/* ==========================================
   Admin Panel — Snack Kamal ✨ Redesign
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter', 'Segoe UI', sans-serif; }

:root {
    --orange:        #ff7a00;
    --orange-dark:   #e56700;
    --orange-light:  #fff3e8;
    --orange-glow:   rgba(255,122,0,0.18);
    --bg:            #f5f6fa;
    --card:          #ffffff;
    --border:        #eaecf2;
    --text:          #1a1c26;
    --text-mute:     #7a7f96;
    --danger:        #e8453c;
    --success:       #1fa572;
    --sidebar-bg:    #0f1117;
    --sidebar-w:     256px;
    --radius:        14px;
    --shadow:        0 2px 16px rgba(0,0,0,0.07);
    --shadow-card:   0 4px 24px rgba(0,0,0,0.09);
}

html, body { height:100%; }
body { background:var(--bg); color:var(--text); line-height:1.5; }

a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; font-family:inherit; }
input, textarea, select { font-family:inherit; }

/* ==========================================
   LAYOUT
   ========================================== */
.admin-shell { display:flex; min-height:100vh; }

/* ==========================================
   SIDEBAR
   ========================================== */
.sidebar {
    width:var(--sidebar-w);
    background:var(--sidebar-bg);
    color:#fff;
    display:flex;
    flex-direction:column;
    flex-shrink:0;
    position:sticky;
    top:0;
    height:100vh;
    border-right:1px solid rgba(255,255,255,0.04);
}

.sidebar-brand {
    padding:24px 20px 20px;
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.sidebar-brand .logo-badge {
    width:42px; height:42px;
    background:linear-gradient(135deg, var(--orange) 0%, #ff4d4d 100%);
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px;
    box-shadow:0 4px 16px rgba(255,122,0,0.4);
    flex-shrink:0;
    animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
    0%,100% { box-shadow:0 4px 16px rgba(255,122,0,0.4); }
    50%      { box-shadow:0 4px 28px rgba(255,122,0,0.7); }
}
.sidebar-brand .brand-text strong { display:block; font-size:15px; font-weight:700; letter-spacing:.3px; }
.sidebar-brand .brand-text span   { font-size:11px; color:#5a6080; font-weight:500; letter-spacing:.5px; text-transform:uppercase; }

.sidebar-nav { flex:1; padding:16px 10px; overflow-y:auto; }
.sidebar-nav::-webkit-scrollbar { width:0; }

.nav-btn {
    width:100%;
    display:flex; align-items:center; gap:12px;
    padding:11px 14px;
    background:transparent;
    color:#6b7194;
    border-radius:10px;
    font-size:14px;
    font-weight:500;
    margin-bottom:2px;
    transition:background .18s, color .18s, transform .15s;
    text-align:left;
    position:relative;
    overflow:hidden;
}
.nav-btn::before {
    content:'';
    position:absolute; left:0; top:0; width:3px; height:100%;
    background:var(--orange);
    border-radius:0 3px 3px 0;
    transform:scaleY(0);
    transition:transform .2s;
}
.nav-btn .nav-icon { font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.nav-btn:hover { background:rgba(255,255,255,0.05); color:#c8cce0; transform:translateX(2px); }
.nav-btn.active {
    background:linear-gradient(90deg, rgba(255,122,0,0.18) 0%, rgba(255,122,0,0.05) 100%);
    color:#fff;
    font-weight:600;
}
.nav-btn.active::before { transform:scaleY(1); }

.sidebar-foot { padding:14px; border-top:1px solid rgba(255,255,255,0.06); }
.view-site-link {
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:rgba(255,122,0,0.12);
    color:var(--orange);
    padding:11px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    transition:.18s;
    border:1px solid rgba(255,122,0,0.2);
}
.view-site-link:hover { background:rgba(255,122,0,0.22); border-color:rgba(255,122,0,0.4); }

/* ==========================================
   TOPBAR
   ========================================== */
.main { flex:1; min-width:0; }
.topbar {
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    padding:16px 32px;
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
}
.topbar h1 { font-size:20px; font-weight:700; }
.topbar p  { font-size:12.5px; color:var(--text-mute); margin-top:1px; }

/* ==========================================
   CONTENT & PANELS
   ========================================== */
.content { padding:28px 32px 80px; max-width:1100px; }

.panel { display:none; }
.panel.active {
    display:block;
    animation: panelIn .3s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes panelIn {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ==========================================
   STAT CARDS
   ========================================== */
.stats-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
    gap:16px;
    margin-bottom:24px;
}
.stat-card {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px 20px;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:transform .2s, box-shadow .2s;
}
.stat-card::after {
    content:'';
    position:absolute; bottom:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--orange), #ff4d4d);
    border-radius:0 0 var(--radius) var(--radius);
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-card); }
.stat-card .num { font-size:32px; font-weight:800; color:var(--orange); line-height:1; }
.stat-card .lbl { font-size:12.5px; color:var(--text-mute); margin-top:6px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; }

/* ==========================================
   CARD BOX
   ========================================== */
.card-box {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
    margin-bottom:18px;
    box-shadow:var(--shadow);
    transition:box-shadow .2s;
}
.card-box:hover { box-shadow:var(--shadow-card); }
.card-box h2   { font-size:16px; font-weight:700; margin-bottom:4px; }
.card-box .sub { font-size:13px; color:var(--text-mute); margin-bottom:18px; line-height:1.55; }

.quick-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ==========================================
   FORMS
   ========================================== */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid.full, .field.full { grid-column:1/-1; }

.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-size:12.5px; font-weight:600; color:#444; letter-spacing:.2px; }
.field .hint  { font-size:11.5px; color:var(--text-mute); }

.field input, .field textarea, .field select {
    padding:11px 13px;
    border:1.5px solid var(--border);
    border-radius:9px;
    font-size:14px;
    background:#fafbfd;
    color:var(--text);
    transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline:none;
    border-color:var(--orange);
    background:#fff;
    box-shadow:0 0 0 3px var(--orange-glow);
}
.field textarea { resize:vertical; min-height:84px; }

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
    padding:11px 20px;
    border-radius:9px;
    font-size:14px;
    font-weight:600;
    display:inline-flex; align-items:center; gap:8px;
    transition:transform .15s, box-shadow .15s, background .15s;
    position:relative;
    overflow:hidden;
}
.btn::after {
    content:'';
    position:absolute; inset:0;
    background:rgba(255,255,255,0);
    transition:background .15s;
}
.btn:hover::after { background:rgba(255,255,255,0.1); }
.btn:active { transform:scale(0.97); }

.btn-primary {
    background:linear-gradient(135deg, var(--orange) 0%, #ff5a00 100%);
    color:#fff;
    box-shadow:0 4px 14px rgba(255,122,0,0.3);
}
.btn-primary:hover { box-shadow:0 6px 20px rgba(255,122,0,0.45); transform:translateY(-1px); }

.btn-secondary { background:#eef0f6; color:var(--text); }
.btn-secondary:hover { background:#e3e6f0; }

.btn-danger { background:#fdeceb; color:var(--danger); }
.btn-danger:hover { background:var(--danger); color:#fff; }

.btn-sm { padding:7px 12px; font-size:12.5px; }
.btn-block { width:100%; justify-content:center; }

/* ==========================================
   MENU LIST
   ========================================== */
.menu-toolbar {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:16px; gap:12px; flex-wrap:wrap;
}
.menu-search { flex:1; min-width:180px; }
.menu-search input {
    width:100%; padding:11px 13px;
    border:1.5px solid var(--border); border-radius:9px; font-size:14px;
    background:#fafbfd; transition:.15s;
}
.menu-search input:focus { border-color:var(--orange); outline:none; box-shadow:0 0 0 3px var(--orange-glow); }

.menu-list { display:flex; flex-direction:column; gap:8px; }

.menu-row {
    display:flex; align-items:center; gap:14px;
    background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px;
    transition:transform .18s, box-shadow .18s, border-color .18s;
    animation: rowIn .25s ease both;
}
@keyframes rowIn {
    from { opacity:0; transform:translateX(-8px); }
    to   { opacity:1; transform:translateX(0); }
}
.menu-row:hover { transform:translateX(3px); box-shadow:0 4px 16px rgba(0,0,0,0.08); border-color:var(--orange); }

.menu-row img { width:54px; height:54px; border-radius:9px; object-fit:cover; flex-shrink:0; background:#eee; }
.menu-row .mi-info { flex:1; min-width:0; }
.menu-row .mi-info h4 { font-size:14.5px; font-weight:600; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu-row .mi-info p  { font-size:12px; color:var(--text-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:480px; }
.menu-row .mi-price   { font-weight:700; color:var(--orange); font-size:15px; min-width:60px; text-align:right; }

.tag { font-size:11px; padding:3px 9px; border-radius:20px; background:var(--orange-light); color:var(--orange-dark); font-weight:600; white-space:nowrap; }
.tag.dessert { background:#eaf6f0; color:var(--success); }

.mi-actions { display:flex; gap:6px; }
.icon-btn {
    width:34px; height:34px; border-radius:8px; background:#f3f4f8;
    display:flex; align-items:center; justify-content:center; font-size:15px;
    transition:.15s;
}
.icon-btn:hover     { background:#e7e9f0; transform:scale(1.08); }
.icon-btn.del:hover { background:#fdeceb; }

.empty-state { text-align:center; padding:50px 20px; color:var(--text-mute); }
.empty-state .em-icon { font-size:40px; margin-bottom:10px; }

/* ==========================================
   MODAL
   ========================================== */
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(10,12,20,0.6);
    backdrop-filter:blur(4px);
    display:none; align-items:center; justify-content:center;
    z-index:200; padding:20px;
}
.modal-overlay.show {
    display:flex;
    animation: overlayIn .2s ease;
}
@keyframes overlayIn {
    from { opacity:0; }
    to   { opacity:1; }
}
.modal-box {
    background:#fff; border-radius:18px;
    width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
    padding:28px;
    animation: modalSlide .25s cubic-bezier(0.22,1,0.36,1);
    box-shadow:0 24px 64px rgba(0,0,0,0.2);
}
@keyframes modalSlide {
    from { opacity:0; transform:translateY(20px) scale(0.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
.modal-box h3 { font-size:18px; font-weight:700; margin-bottom:20px; }
.modal-actions { display:flex; gap:10px; margin-top:10px; }

/* ==========================================
   REVIEWS
   ========================================== */
.review-edit-card {
    border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:12px;
    transition:.18s;
}
.review-edit-card:hover { border-color:var(--orange); box-shadow:0 4px 14px var(--orange-glow); }
.review-edit-card .stars-preview { color:#f5a623; margin-bottom:10px; font-size:15px; }

/* ==========================================
   TOAST
   ========================================== */
#toast {
    position:fixed; bottom:26px; left:50%;
    transform:translateX(-50%) translateY(16px);
    background:#1a1c26; color:#fff;
    padding:13px 22px; border-radius:12px; font-size:14px; font-weight:500;
    display:flex; align-items:center; gap:10px;
    opacity:0; pointer-events:none;
    transition:opacity .25s, transform .25s;
    z-index:300;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 28px rgba(0,0,0,0.3);
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast .t-icon { font-size:16px; }

/* ==========================================
   IMAGE UPLOAD
   ========================================== */
.img-upload-row { display:flex; align-items:center; gap:14px; }
.img-preview-box {
    width:84px; height:84px; border-radius:12px; flex-shrink:0;
    background:#f3f4f8; border:2px dashed var(--border);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; font-size:26px; color:#b9bdcc;
    transition:border-color .2s;
}
.img-preview-box:hover { border-color:var(--orange); }
.img-preview-box img { width:100%; height:100%; object-fit:cover; }
.img-upload-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.img-upload-actions label.btn { display:inline-flex; }

/* ==========================================
   BACKUP / DANGER
   ========================================== */
.backup-row { display:flex; gap:12px; flex-wrap:wrap; }
.danger-zone {
    border:1.5px dashed #f3b8b3;
    background:linear-gradient(135deg, #fffaf9 0%, #fff5f4 100%);
    border-radius:var(--radius); padding:22px;
}
.danger-zone h2 { color:var(--danger); }

/* ==========================================
   MOBILE
   ========================================== */
.mobile-toggle { display:none; }

@media (max-width:900px) {
    .form-grid { grid-template-columns:1fr; }
    .sidebar { position:fixed; left:-100%; z-index:500; transition:left .25s cubic-bezier(0.22,1,0.36,1); }
    .sidebar.open { left:0; box-shadow:8px 0 32px rgba(0,0,0,0.3); }
    .mobile-toggle {
        display:flex; align-items:center; justify-content:center;
        width:38px; height:38px; border-radius:9px;
        background:var(--sidebar-bg); color:#fff; font-size:18px;
    }
    .content { padding:20px 16px 80px; }
    .topbar   { padding:14px 16px; }
    .menu-row { flex-wrap:wrap; }
}

/* ==========================================
   SCROLLBAR
   ========================================== */
::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#dde0ea; border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:#c0c4d4; }

/* ==========================================
   SELECTION
   ========================================== */
::selection { background:var(--orange-glow); color:var(--orange-dark); }