/* ============================================
   RestaurantSystem - App CSS v5.0
   Bootstrap overrides + custom styles
   ============================================ */

:root {
    --sidebar-w: 260px;
    --topbar-h: 58px;
    --brand: #6366f1;
    --brand-hover: #4f46e5;
    --brand-soft: #8385f4;
    --brand-light: rgba(99,102,241,.1);
    --brand-shadow: rgba(99,102,241,.35);
    --brand-rgb: 99,102,241;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f4f6f9;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Bootstrap's .row is a flex container, so every .col-* is a flex item.
   Flex items default to min-width:auto, which means they refuse to shrink
   below their content's intrinsic width (e.g. a <select> with a long
   option like "Tierra del Fuego..."). On mobile that silently forces the
   whole row wider than the screen even though the col-* percentages/media
   queries are computing correctly - this is the main reason things were
   "shifting right" and feeling like responsive wasn't kicking in. */
.row > * { min-width: 0; }
.min-w-0 { min-width: 0; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: #c1c9d4; border-radius: 3px; }

/* ---- Sidebar ---- */
.sidebar {
    width: var(--sidebar-w);
    min-height: 100vh;
    background: #0f172a;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1040;
    transition: transform .25s ease;
    /* La sidebar en si NO scrollea entera -- solo el <ul class="sidebar-nav"> de en medio
       (regla mas abajo) lo hace, para que el logo/buscador de arriba y la tarjeta de
       usuario/"Cerrar sesion" de abajo queden siempre fijos en pantalla. */
    overflow: hidden;
}
.brand-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
    background: #fff;
}
.brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sidebar-link {
    display: flex; align-items: center;
    padding: 8px 14px; border-radius: 8px;
    color: #94a3b8 !important;
    font-size: .84rem; font-weight: 450;
    transition: all .15s; white-space: nowrap;
    text-decoration: none;
}
.sidebar-link:hover { background: rgba(255,255,255,.06); color: #e2e8f0 !important; }
.sidebar-link.active { background: rgba(var(--brand-rgb), .18); color: var(--brand-soft) !important; font-weight: 550; }
.sidebar-search { flex-shrink: 0; }
.sidebar-search-input {
    height: 34px;
    padding-left: 2rem;
    padding-right: 2rem;
    color: #e2e8f0;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 8px;
}
.sidebar-search-input::placeholder { color: rgba(203,213,225,.55); }
.sidebar-search-input:focus {
    color: #f8fafc;
    background: rgba(255,255,255,.09);
    border-color: rgba(var(--brand-rgb), .55);
    box-shadow: 0 0 0 .16rem rgba(var(--brand-rgb), .18);
}
.sidebar-search-icon {
    position: absolute;
    left: .72rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(203,213,225,.6);
    font-size: .78rem;
    pointer-events: none;
    z-index: 2;
}
.sidebar-search-clear {
    position: absolute;
    right: .15rem;
    top: 50%;
    width: 28px;
    height: 28px;
    padding: 0;
    transform: translateY(-50%);
    color: rgba(203,213,225,.7);
    border: 0;
}
.sidebar-search-clear:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-group-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem .75rem .28rem;
    color: rgba(226,232,240,.5);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sidebar-group-label i {
    font-size: .78rem;
    opacity: .85;
}
.sidebar-group-label::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: rgba(148,163,184,.22);
}
.sidebar-nav .nav-item + .sidebar-group-label { margin-top: .45rem; }
/* min-height:0 es lo que permite que un hijo flex (este <ul>, dentro de la columna flex de
   .sidebar) pueda encogerse por debajo de su contenido y scrollear en vez de empujar el resto --
   sin esto el flex-grow-1 de Bootstrap no alcanza y termina estirando toda la sidebar. */
/* Bootstrap's .nav trae "flex-wrap: wrap" de fabrica. Con flex-direction:column y una altura
   restringida (min-height:0, para poder scrollear), eso hacia que los items que no entraban en
   una columna arrancaran una SEGUNDA COLUMNA a la derecha en vez de desbordar hacia abajo -- por
   eso se veian duplicados/corridos. flex-wrap:nowrap fuerza una sola columna que desborda
   verticalmente, que es lo que overflow-y:auto necesita para poder scrollear. */
.sidebar-nav { overflow-y: auto; overflow-x: hidden; min-height: 0; flex-wrap: nowrap; }
.sidebar-empty-state {
    padding: .85rem .75rem;
    color: rgba(203,213,225,.65);
    font-size: .78rem;
    text-align: center;
}
.sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1039; backdrop-filter: blur(2px);
}

/* ---- Main Content ---- */
/* #appWrapper (the sidebar's sibling) is a flex container. As its only real flex
   item (the sidebar is position:fixed, so it's out of flow), .main-content defaults
   to min-width:auto, which blocks it from ever shrinking below the intrinsic width
   of whatever is nested inside (a wide table, a button label, a <select> option...).
   That's what was silently widening the whole page past the viewport on mobile
   regardless of how well each page's own responsive CSS was written. */
.main-content {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    min-width: 0;
}
.topbar {
    height: var(--topbar-h);
    z-index: 20;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,.92) !important;
}

/* ---- Loading spinner ---- */
.page-loader { display: flex; align-items: center; justify-content: center; padding: 80px 0; }

/* ============================================
   BUTTONS - clean, consistent, well-spaced
   ============================================ */

/* Primary: brand indigo */
.btn-primary {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    font-weight: 550;
    border-radius: 8px;
    transition: all .15s;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    box-shadow: 0 2px 8px var(--brand-shadow) !important;
}

/* Outline Primary */
.btn-outline-primary {
    color: var(--brand) !important;
    border-color: var(--brand) !important;
    border-radius: 8px;
    font-weight: 500;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px var(--brand-shadow);
}

/* All buttons: rounded, snappy */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all .15s ease;
    font-size: .85rem;
}
.btn-sm {
    border-radius: 7px;
    padding: 5px 12px;
    font-size: .8rem;
}
.btn-lg {
    border-radius: 10px;
    padding: 10px 20px;
}

/* Outline variants: subtle, professional */
.btn-outline-secondary {
    border-color: #d1d5db; color: #4b5563;
}
.btn-outline-secondary:hover {
    background: #f3f4f6; border-color: #9ca3af; color: #1f2937;
}

.btn-outline-dark {
    border-color: #374151; color: #374151;
}
.btn-outline-dark:hover {
    background: #1f2937; border-color: #1f2937; color: #fff;
}

.btn-outline-danger {
    border-color: #fca5a5; color: #dc2626;
}
.btn-outline-danger:hover {
    background: #dc2626; border-color: #dc2626; color: #fff;
}

.btn-outline-success {
    border-color: #86efac; color: #16a34a;
}
.btn-outline-success:hover {
    background: #16a34a; border-color: #16a34a; color: #fff;
}

.btn-outline-warning {
    border-color: #fcd34d; color: #d97706;
}
.btn-outline-warning:hover {
    background: #d97706; border-color: #d97706; color: #fff;
}

.btn-outline-info {
    border-color: #7dd3fc; color: #0284c7;
}
.btn-outline-info:hover {
    background: #0284c7; border-color: #0284c7; color: #fff;
}

/* Solid colors */
.btn-success { border-radius: 8px; font-weight: 550; }
.btn-danger  { border-radius: 8px; font-weight: 550; }
.btn-warning { border-radius: 8px; font-weight: 550; }
.btn-info    { border-radius: 8px; font-weight: 550; }
.btn-dark    { border-radius: 8px; font-weight: 550; }
.btn-secondary { border-radius: 8px; font-weight: 500; background: #6b7280; border-color: #6b7280; }
.btn-secondary:hover { background: #4b5563; border-color: #4b5563; }

.btn-light {
    background: #fff; border-color: #e5e7eb; color: #374151;
}
.btn-light:hover { background: #f9fafb; border-color: #d1d5db; }

/* Rounded pills */
.rounded-pill { border-radius: 50rem !important; }

/* Button group: no double borders */
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: 8px 0 0 8px; }
.btn-group > .btn:last-child  { border-radius: 0 8px 8px 0; }

/* ============================================
   CARDS
   ============================================ */
.card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .2s;
}
.card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.06); }
.card-header { background: transparent; border-bottom: 1px solid #f0f0f0; }
.card-footer { background: transparent; border-top: 1px solid #f0f0f0; }

.metric-card { border-radius: 12px; transition: transform .2s, box-shadow .2s; }
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }

.inicio-card { transition: transform .2s, box-shadow .2s; }
.inicio-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.1) !important; }

/* ============================================
   FORMS
   ============================================ */
.form-control, .form-select {
    border-radius: 8px;
    border-color: #d1d5db;
    font-size: .85rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem var(--brand-light);
}
.form-control-sm, .form-select-sm { border-radius: 7px; }
.form-control-lg, .form-select-lg { border-radius: 10px; }
.form-label { margin-bottom: .35rem; }

/* ============================================
   TABLES
   ============================================ */
.table { font-size: .85rem; }
.table th { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; color: #6b7280; }
.table-hover > tbody > tr { transition: background .1s; }

/* ============================================
   BADGES
   ============================================ */
.badge { font-weight: 550; border-radius: 6px; font-size: .72rem; }

/* ============================================
   NAV PILLS
   ============================================ */
.nav-pills .nav-link { font-size: .82rem; padding: 6px 14px; border-radius: 8px; font-weight: 500; color: #475569; }
.nav-pills .nav-link.active { background: var(--brand) !important; color: #fff; font-weight: 600; }

/* ============================================
   MISC
   ============================================ */
/* POS Layout */
.pos-layout { height: calc(100vh - var(--topbar-h) - 56px); }
.pos-products-pane { min-height: 0; }
.pos-products-toolbar { flex-shrink: 0; }
.pos-category-select {
    width: 180px;
    max-width: 100%;
}
.pos-product-scroll {
    min-height: 0;
    max-height: calc(100vh - var(--topbar-h) - 112px);
    overflow-y: auto !important;
    overflow-x: hidden;
    padding-right: 4px;
}
.pos-touch-grid {
    --pos-card-height: 258px;
    --pos-grid-gap: .5rem;
    max-height: calc((var(--pos-card-height) * 3) + (var(--pos-grid-gap) * 2));
    margin-right: -4px;
}
.pos-touch-grid .pos-prod-item {
    height: var(--pos-card-height);
    display: flex;
}
.pos-product-card {
    width: 100%;
    overflow: hidden;
}
.pos-product-card .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.pos-product-thumb {
    height: 152px;
    flex: 0 0 152px;
    overflow: hidden;
}
.pos-product-thumb img,
.product-mini-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-mini-img {
    width: 38px;
    height: 38px;
    border-radius: 7px;
    border: 1px solid #e5e7eb;
    flex: 0 0 38px;
}
.pos-product-card h6 {
    line-height: 1.15;
    min-height: 1.15em;
}
.pos-product-card .pos-add-btn { margin-top: auto; }
.pos-list-scroll {
    max-height: 100%;
    overflow-y: auto;
}
.pos-list-scroll thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.pos-pay-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .5rem;
}
.pos-pay-methods .pay-method {
    min-width: 0;
    min-height: 56px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Table grid (mesas) */
.table-mini { border: 2px solid; border-radius: 8px; text-align: center; padding: 12px 8px; transition: transform .15s; cursor: default; }
.table-mini:hover { transform: scale(1.04); }
.table-mini.bg-success-subtle { border-color: #86efac; }
.table-mini.bg-danger-subtle  { border-color: #fca5a5; }
.table-mini.bg-primary-subtle { border-color: #93c5fd; }
.table-mini.bg-warning-subtle { border-color: #fcd34d; }

/* Paginadores (Pedidos, Inventario, Preparacion, Productos, Caja - historial): Bootstrap trae
   un estilo por defecto muy chato (cuadrado, azul generico); esto lo lleva a la linea del resto
   de la app (redondeado, color de marca, mas aire entre paginas). */
.pagination {
    gap: .3rem;
    flex-wrap: wrap;
}
.pagination .page-link {
    border: none;
    border-radius: 8px;
    color: #475569;
    font-weight: 500;
    font-size: .82rem;
    padding: .4rem .8rem;
    transition: background .15s, color .15s;
}
.pagination .page-link:hover,
.pagination .page-link:focus {
    background: var(--brand-light);
    color: var(--brand-hover);
    box-shadow: none;
}
.pagination .page-item.active .page-link {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 2px 6px var(--brand-shadow);
}
.pagination .page-item.disabled .page-link {
    color: #cbd5e1;
    background: transparent;
}
.pagination-sm .page-link { font-size: .78rem; padding: .3rem .65rem; }

/* Movement items */
.mov-item { transition: background .15s; }
.mov-item:hover { background: #f8f9fa; }

/* Notification items */
.notif-item { transition: background .15s; color: inherit; }
.notif-item:hover { background: #f8f9fa; }
.new-order-toast {
    --toast-accent: #6757f2;
    width: min(360px, calc(100vw - 24px));
    color: #162033;
    background: rgba(255,255,255,.82);
    border-left: 4px solid var(--toast-accent) !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(15,23,42,.18) !important;
    backdrop-filter: blur(14px);
}
.new-order-toast-primary { --toast-accent: #6757f2; }
.new-order-toast-success { --toast-accent: #10a36f; }
.new-order-toast .toast-body {
    background: rgba(255,255,255,.58);
}
.new-order-toast-header {
    color: #111827;
    background: rgba(255,255,255,.34);
    border-bottom: 1px solid rgba(148,163,184,.22) !important;
}
.new-order-toast-header .bi {
    color: var(--toast-accent);
}
.new-order-toast-action {
    color: #fff;
    background: var(--toast-accent);
    background: color-mix(in srgb, var(--toast-accent) 88%, #fff);
    border-color: transparent;
}
.new-order-toast-action:hover,
.new-order-toast-action:focus {
    color: #fff;
    background: var(--toast-accent);
    border-color: transparent;
}

/* Dropdowns */
.dropdown-menu { border-radius: 10px; border: 1px solid #e9ecef; box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.dropdown-item { border-radius: 6px; margin: 1px 4px; padding: 6px 12px; font-size: .84rem; }

/* Progress */
.progress { border-radius: 6px; background: #f0f2f5; }
.progress-bar { border-radius: 6px; transition: width .6s ease; }

/* Modals */
.modal-content { border-radius: 14px; }

/* ============================================
   PRINT
   ============================================ */
@media print {
    .sidebar, .topbar, .sidebar-overlay { display: none !important; }
    .main-content { margin-left: 0 !important; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
    #topbarClock { display: none; }
    .pos-layout { height: calc(100vh - var(--topbar-h) - 48px); }
    .pos-product-scroll { max-height: 56vh; }
    .pos-touch-grid {
        --pos-card-height: 226px;
        max-height: min(64vh, calc((var(--pos-card-height) * 3) + (var(--pos-grid-gap) * 2)));
    }
    .pos-product-thumb { height: 128px; flex-basis: 128px; }

    /* Compress chrome so content has more room on tablet/mobile */
    #pageContent { padding: 1rem !important; }
    .topbar { padding-left: 1rem !important; padding-right: 1rem !important; }
    #pageTitle { font-size: 1rem; }

    /* Pill tab bars (settings, menu, inventario, compras, reportes, mesas, etc.):
       scroll horizontally as a single row instead of wrapping into a tall stack */
    .nav-pills.d-inline-flex,
    #settingsTabs {
        display: flex;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-pills.d-inline-flex::-webkit-scrollbar,
    #settingsTabs::-webkit-scrollbar { display: none; }
    .nav-pills.d-inline-flex .nav-item,
    #settingsTabs .nav-item { flex: 0 0 auto; }
    .nav-pills.d-inline-flex .nav-link,
    #settingsTabs .nav-link { white-space: nowrap; }
}
@media (max-width: 575.98px) {
    .pos-layout { height: auto; }
    .pos-product-scroll { max-height: 54vh; }
    .pos-touch-grid {
        --pos-card-height: 206px;
        max-height: 58vh;
    }
    .pos-product-thumb { height: 110px; flex-basis: 110px; }
    .pos-category-select { flex: 1 1 150px; }

    #pageContent { padding: .75rem !important; }
    .topbar { padding-left: .75rem !important; padding-right: .75rem !important; }
    .card-body { padding: .85rem; }
    .kitchen-toolbar .btn { font-size: .74rem; padding: .3rem .6rem; }
}

/* ============================================
   LOGIN
   ============================================ */
.login-wrapper { min-height: 100vh; background: #0f172a; position: relative; overflow: hidden; }
.login-wrapper::before {
    content: ''; position: absolute; inset: -50%;
    background: radial-gradient(ellipse at 20% 50%, var(--brand-light) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, var(--brand-shadow) 0%, transparent 50%);
}
.login-brand-image {
    width: 88px;
    height: 88px;
    padding: 8px;
    border-radius: 20px;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15,23,42,.18);
}