/* ============================================================
   assets/css/app.css
   Bootstrap 5.3 overrides + TailwindCSS-inspired utilities
   Font: Inter (Google Fonts)
   ============================================================ */

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

/* ============================================================
   CSS CUSTOM PROPERTIES (Override Bootstrap variables)
   ============================================================ */
:root {
    /* Colors - Tailwind palette */
    --bs-primary:          #2563eb;
    --bs-primary-rgb:      37, 99, 235;
    --bs-secondary:        #64748b;
    --bs-secondary-rgb:    100, 116, 139;
    --bs-success:          #16a34a;
    --bs-success-rgb:      22, 163, 74;
    --bs-danger:           #dc2626;
    --bs-danger-rgb:       220, 38, 38;
    --bs-warning:          #d97706;
    --bs-warning-rgb:      217, 119, 6;
    --bs-info:             #0891b2;
    --bs-info-rgb:         8, 145, 178;
    --bs-light:            #f8fafc;
    --bs-dark:             #1e293b;
    
    --bs-modal-bg:       #ffffff;

    /* Body */
    --bs-body-bg:          #f1f5f9;
    --bs-body-color:       #334155;
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-body-font-size:   0.9375rem;
    --bs-body-line-height: 1.6;

    /* Border */
    --bs-border-color:     #e2e8f0;
    --bs-border-radius:    0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;

    /* Shadows */
    --bs-box-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --bs-box-shadow-sm:    0 1px 2px rgba(0,0,0,.05);
    --bs-box-shadow-lg:    0 10px 25px rgba(0,0,0,.1), 0 4px 10px rgba(0,0,0,.06);

    /* Sidebar */
    --sidebar-width:       260px;
    --sidebar-bg:          #1e293b;
    --sidebar-hover-bg:    #2563eb;
    --top-navbar-height:   60px;

    /* Transitions */
    --transition-fast:     all .15s ease;
    --transition-base:     all .2s ease;
    --transition-slow:     all .3s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--bs-body-font-family);
    background:  var(--bs-body-bg);
    color:       var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

/* Tailwind-like color utilities */
.text-slate-300 { color: #cbd5e1 !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-500 { color: #64748b !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-900 { color: #0f172a !important; }
.text-blue-600  { color: #2563eb !important; }

/* Background utilities */
.bg-slate-50  { background-color: #f8fafc !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.bg-slate-200 { background-color: #e2e8f0 !important; }
.bg-slate-800 { background-color: #1e293b !important; }
.bg-slate-900 { background-color: #0f172a !important; }
.bg-blue-50   { background-color: #eff6ff !important; }
.bg-blue-600  { background-color: #2563eb !important; }

/* Border utilities */
.border-slate-200 { border-color: #e2e8f0 !important; }

/* ============================================================
   SHADOW UTILITIES
   ============================================================ */
.shadow-sm  { box-shadow: 0 1px 2px rgba(0,0,0,.05) !important; }
.shadow     { box-shadow: var(--bs-box-shadow) !important; }
.shadow-md  { box-shadow: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05) !important; }
.shadow-lg  { box-shadow: 0 10px 25px rgba(0,0,0,.1), 0 4px 10px rgba(0,0,0,.06) !important; }
.shadow-xl  { box-shadow: 0 20px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.08) !important; }

/* ============================================================
   BORDER RADIUS UTILITIES
   ============================================================ */
.rounded-xl  { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-3xl { border-radius: 1.5rem !important; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    border:        none;
    border-radius: 0.75rem;
    box-shadow:    var(--bs-box-shadow);
    background:    #ffffff;
    transition:    var(--transition-base);
}

.card-header {
    background:    #ffffff;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    padding:       1rem 1.25rem;
    font-weight:   600;
    color:         #334155;
}

.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }

/* Restaurant card */
.restaurant-card { transition: transform .2s ease, box-shadow .2s ease; }
.restaurant-card:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    border-radius: 0.5rem;
    font-weight:   500;
    transition:    var(--transition-fast);
    letter-spacing: 0.01em;
}

.btn-primary {
    background:   #2563eb;
    border-color: #2563eb;
    color:        #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background:   #1d4ed8;
    border-color: #1d4ed8;
    color:        #fff;
}

.btn-outline-primary {
    color:        #2563eb;
    border-color: #2563eb;
}
.btn-outline-primary:hover {
    background:   #2563eb;
    border-color: #2563eb;
    color:        #fff;
}

.btn-light {
    background:   #f1f5f9;
    border-color: #e2e8f0;
    color:        #475569;
}
.btn-light:hover {
    background:   #e2e8f0;
    border-color: #cbd5e1;
    color:        #334155;
}

/* Extra small button */
.btn-xs {
    padding:     0.2rem 0.5rem;
    font-size:   0.75rem;
    line-height: 1.4;
    border-radius: 0.375rem;
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form-control, .form-select {
    border-radius: 0.5rem;
    border-color:  #e2e8f0;
    color:         #334155;
    font-size:     0.9rem;
    padding:       0.5rem 0.75rem;
    transition:    var(--transition-fast);
}

.form-control:focus, .form-select:focus {
    border-color: #2563eb;
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
    color:        #1e293b;
}

.form-control::placeholder { color: #94a3b8; }

.form-label {
    font-size:   0.875rem;
    font-weight: 500;
    color:       #334155;
    margin-bottom: .375rem;
}

.form-text {
    color:     #94a3b8;
    font-size: 0.8rem;
}

.input-group-text {
    border-color:  #e2e8f0;
    background:    #f8fafc;
    color:         #94a3b8;
    border-radius: 0.5rem;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    width:      var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    padding:    1.25rem 1rem;
    position:   sticky;
    top:        0;
    height:     100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
    flex-shrink: 0;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

.sidebar .nav-link {
    color:         #94a3b8;
    border-radius: 0.5rem;
    padding:       0.5rem 0.75rem;
    font-size:     0.875rem;
    font-weight:   500;
    transition:    var(--transition-fast);
    display:       flex;
    align-items:   center;
}

.sidebar .nav-link:hover {
    background: rgba(255,255,255,.08);
    color:      #e2e8f0;
}

.sidebar .nav-link.active {
    background: var(--sidebar-hover-bg);
    color:      #ffffff;
}

.sidebar-brand {
    font-weight: 700;
    font-size:   1.1rem;
    letter-spacing: -.02em;
}

.sidebar-label {
    font-size:      0.65rem;
    letter-spacing: .08em;
    color:          #475569;
    text-transform: uppercase;
    font-weight:    600;
    padding:        0 0.5rem;
    display:        block;
    margin-bottom:  .25rem;
}

/* ============================================================
   TOP NAVBAR
   ============================================================ */
.top-navbar {
    height:        var(--top-navbar-height);
    background:    #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position:      sticky;
    top:           0;
    z-index:       100;
    padding:       0 1.5rem;
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.app-wrapper {
    display:   flex;
    min-height: 100vh;
}

.main-content {
    flex:     1 1 0%;
    min-width: 0;
}

/* ============================================================
   AVATAR CIRCLES
   ============================================================ */
.avatar-circle {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      #2563eb;
    color:           white;
    font-weight:     700;
    font-size:       0.875rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.avatar-circle-sm {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      #2563eb;
    color:           white;
    font-weight:     700;
    font-size:       0.7rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.avatar-circle-lg {
    width:           48px;
    height:          48px;
    border-radius:   50%;
    background:      linear-gradient(135deg, #2563eb, #7c3aed);
    color:           white;
    font-weight:     700;
    font-size:       1.1rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-wrapper {
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #f0fdf4 100%);
    min-height: 100vh;
    padding:    2rem 1rem;
}

.auth-card {
    border-radius: 1rem !important;
    box-shadow:    0 8px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06) !important;
}

.auth-logo {
    width:           56px;
    height:          56px;
    border-radius:   14px;
    background:      linear-gradient(135deg, #eff6ff, #dbeafe);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* ============================================================
   UPLOAD AREAS
   ============================================================ */
.upload-area {
    position:     relative;
    border:        2px dashed #e2e8f0;
    border-radius: 0.75rem;
    background:    #f8fafc;
    cursor:        pointer;
    transition:    var(--transition-base);
    min-height:    140px;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    justify-content: center;
    padding:       1rem;
    overflow:      hidden;
}

/* File input covers the whole area for click-to-upload */
.upload-area input[type="file"] {
    position: absolute;
    inset:    0;
    opacity:  0;
    cursor:   pointer;
    z-index:  1;
}

/* Remove/action buttons must be above the file input */
.upload-area button,
.upload-area a {
    position: relative;
    z-index:  2;
}

/* Preview image — also above file input */
.upload-area img {
    position: relative;
    z-index:  2;
    pointer-events: none;
}

.upload-area:hover, .upload-area.drag-over {
    border-color: #2563eb;
    background:   #eff6ff;
}

.upload-area-sm {
    min-height: 110px;
}

/* ============================================================
   DISH CARDS (Menu page)
   ============================================================ */
.dish-card {
    border:        none;
    border-left:   3px solid #2563eb;
    border-radius: 0.625rem;
    transition:    var(--transition-base);
    box-shadow:    0 1px 3px rgba(0,0,0,.06);
}

.dish-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    transform:  translateX(2px);
}

.dish-card.inactive {
    opacity:      0.55;
    border-color: #94a3b8;
}

/* Dish tag badges */
.badge-vegan      { background: #16a34a; color: white; }
.badge-vegetarian { background: #65a30d; color: white; }
.badge-spicy      { background: #dc2626; color: white; }
.badge-halal      { background: #d97706; color: white; }

/* Price display */
.price-original {
    text-decoration: line-through;
    color:           #94a3b8;
    font-size:       0.875rem;
}

.price-promo {
    color:       #dc2626;
    font-weight: 700;
}

/* ============================================================
   CATEGORY ITEMS (drag & drop list)
   ============================================================ */
.category-item {
    transition: var(--transition-fast);
    user-select: none;
}

.category-item:hover        { background: #eff6ff !important; border-color: #bfdbfe !important; }
.category-item.dragging     { opacity: .5; transform: scale(1.02); }
.category-item.drag-over    { border-color: #2563eb !important; background: #dbeafe !important; }

/* ============================================================
   SORTABLE LIST
   ============================================================ */
.sortable-list { min-height: 60px; }

/* ============================================================
   FLASH MESSAGES (auto dismiss)
   ============================================================ */
.flash-messages { z-index: 9999; }
.flash-messages .alert {
    min-width:     300px;
    border-radius: 0.625rem;
    font-size:     0.875rem;
}

/* ============================================================
   DISH FORM CHECKBOXES
   ============================================================ */
.dish-check {
    background:    #f8fafc;
    border:        1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding:       0.5rem 0.75rem;
    transition:    var(--transition-fast);
}

.dish-check:hover { background: #eff6ff; border-color: #bfdbfe; }

.dish-check .form-check-input:checked ~ .form-check-label { color: #1e293b; font-weight: 500; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
    border:        none;
    border-radius: 0.875rem;
    box-shadow:    0 20px 60px rgba(0,0,0,.2);
    background-color: #ffffff;
}

.modal-header { border-bottom: 1px solid #f1f5f9; padding: 1.25rem 1.5rem; }
.modal-footer { border-top:    1px solid #f1f5f9; padding: 1rem 1.5rem; }
.modal-body   { padding: 1.25rem 1.5rem; }

/* ============================================================
   DROPDOWNS
   ============================================================ */
.dropdown-menu {
    border:        none;
    border-radius: 0.625rem;
    box-shadow:    0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
    padding:       0.375rem;
    font-size:     0.875rem;
}

.dropdown-item {
    border-radius: 0.375rem;
    padding:       0.4rem 0.75rem;
    transition:    var(--transition-fast);
}

.dropdown-item:hover  { background: #f1f5f9; }
.dropdown-item.active { background: #2563eb !important; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    font-weight:   600;
    border-radius: 0.375rem;
    font-size:     0.72rem;
    letter-spacing: .02em;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert { border: none; border-radius: 0.625rem; }
.alert-success { background: #f0fdf4; color: #166534; }
.alert-danger  { background: #fef2f2; color: #991b1b; }
.alert-warning { background: #fffbeb; color: #92400e; }
.alert-info    { background: #f0f9ff; color: #0c4a6e; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb { font-size: 0.8rem; }
.breadcrumb-item + .breadcrumb-item::before { color: #94a3b8; }
.breadcrumb-item a { color: #64748b; }
.breadcrumb-item a:hover { color: #2563eb; }
.breadcrumb-item.active { color: #334155; font-weight: 500; }

/* ============================================================
   AUTOCOMPLETE DROPDOWN
   ============================================================ */
.autocomplete-item {
    padding:    0.45rem 0.75rem;
    cursor:     pointer;
    font-size:  0.875rem;
    transition: var(--transition-fast);
    border-radius: 0.375rem;
    margin:     2px 4px;
}

.autocomplete-item:hover {
    background: #eff6ff;
    color:      #2563eb;
}

/* ============================================================
   LANGUAGE TABS
   ============================================================ */
.lang-tab {
    font-size:   0.75rem !important;
    padding:     3px 10px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
}

/* ============================================================
   PROGRESS BAR (password strength)
   ============================================================ */
.progress { border-radius: 99px; }
.progress-bar { border-radius: 99px; }

/* ============================================================
   FONT MONOSPACE (API key)
   ============================================================ */
.font-monospace { font-family: 'Courier New', Courier, monospace; letter-spacing: .05em; }

/* ============================================================
   MIN WIDTH FIX
   ============================================================ */
.min-width-0 { min-width: 0; }

/* ============================================================
   SCROLLBAR STYLING (webkit)
   ============================================================ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */
@media (max-width: 991.98px) {
    .main-content { min-width: 0; }
    .top-navbar   { padding: 0 1rem; }

    main.flex-grow-1 { padding: 1rem !important; }
}

@media (max-width: 575.98px) {
    .dish-card .card-body { padding: 0.75rem !important; }
    .modal-body   { padding: 1rem !important; }
    .modal-header { padding: 1rem !important; }
    .modal-footer { padding: 0.75rem 1rem !important; }
}

/* ============================================================
   PRINT - hide sidebar/navbar
   ============================================================ */
@media print {
    .sidebar, .top-navbar, .btn, .modal { display: none !important; }
    .main-content { margin: 0 !important; }
}