:root {
  --pos-bg: #f5f7fb;
  --pos-content-bg: #ffffff;
  --pos-text: #172033;
  --pos-muted: #6c757d;
  --pos-sidebar-bg: #172033;
  --pos-sidebar-link: rgba(255, 255, 255, .78);
  --pos-sidebar-hover: rgba(255, 255, 255, .1);
  --pos-card-bg: #ffffff;
  --pos-border: #dee2e6;
}

[data-theme='dark'] {
  --pos-bg: #111827;
  --pos-content-bg: #172033;
  --pos-text: #f8fafc;
  --pos-muted: #cbd5e1;
  --pos-sidebar-bg: #0b1220;
  --pos-sidebar-link: rgba(255, 255, 255, .76);
  --pos-sidebar-hover: rgba(255, 255, 255, .12);
  --pos-card-bg: #1f2937;
  --pos-border: #334155;
}

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

.app-shell { min-height: 100vh; }
.sidebar {
  width: 260px;
  background: var(--pos-sidebar-bg);
  color: #fff;
  min-height: 100vh;
  flex: 0 0 260px;
}
.sidebar .nav-link {
  color: var(--pos-sidebar-link);
  border-radius: .6rem;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background: var(--pos-sidebar-hover);
  color: #fff;
}

.main-content { min-width: 0; background: var(--pos-bg); }
.topbar {
  background: var(--pos-content-bg);
  border-color: var(--pos-border) !important;
  color: var(--pos-text);
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pos-bg);
}
.login-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(13,110,253,.25), transparent 38%);
  pointer-events: none;
}
.login-card {
  width: min(420px, 92vw);
  border-radius: 1rem;
  position: relative;
  z-index: 1;
}
.theme-floating { position: fixed; top: 1rem; right: 1rem; z-index: 2; }

.card,
.modal-content,
.dropdown-menu {
  background: var(--pos-card-bg);
  color: var(--pos-text);
  border-color: var(--pos-border);
  border-radius: .9rem;
}
.card-header,
.modal-header,
.modal-footer {
  background: var(--pos-card-bg);
  border-color: var(--pos-border);
}
.table {
  color: var(--pos-text);
  --bs-table-bg: var(--pos-card-bg);
  --bs-table-color: var(--pos-text);
  --bs-table-border-color: var(--pos-border);
  --bs-table-striped-bg: rgba(128, 128, 128, .06);
  --bs-table-hover-bg: rgba(128, 128, 128, .10);
}
.table th {
  font-size: .78rem;
  text-transform: uppercase;
  color: var(--pos-muted);
  letter-spacing: .04em;
}
.text-muted { color: var(--pos-muted) !important; }
.form-control,
.form-select {
  background-color: var(--pos-card-bg);
  color: var(--pos-text);
  border-color: var(--pos-border);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--pos-card-bg);
  color: var(--pos-text);
}
.form-control::placeholder { color: var(--pos-muted); }
[data-theme='dark'] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.mobile-backdrop { display: none; }
.table-scroll {
  overflow: auto;
  max-height: calc(100vh - 220px);
  width: 100%;
}
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--pos-card-bg);
  box-shadow: inset 0 -1px 0 var(--pos-border);
}
.product-category-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  padding-bottom: .25rem;
}
.product-category-tabs .nav-link { white-space: nowrap; }

@media (max-width: 991.98px) {
  .app-shell { display: block !important; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform .2s ease-in-out;
    width: min(82vw, 260px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.35);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1030;
  }
  .main-content { width: 100%; }
  .topbar { position: sticky; top: 0; z-index: 1020; }
}

@media (max-width: 575.98px) {
  .topbar-actions { gap: .35rem !important; }
  .page-actions .btn,
  .page-actions form { width: 100%; }
  .table-scroll { max-height: none; overflow: visible; }
  .table-sticky thead th { position: static; }
  .table-mobile thead { display: none; }
  .table-mobile,
  .table-mobile tbody,
  .table-mobile tr,
  .table-mobile td { display: block; width: 100%; }
  .table-mobile tr {
    border-bottom: 1px solid var(--pos-border);
    padding: .75rem;
  }
  .table-mobile td {
    border: 0;
    padding: .3rem 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: right !important;
  }
  .table-mobile td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--pos-muted);
    text-align: left;
  }
  .table-mobile td[colspan] { display: table-cell; text-align: left !important; }
  .table-mobile td[colspan]::before { display: none; }
  .table-mobile .table-actions { justify-content: flex-end; flex-wrap: wrap; }
  .table-mobile .table-actions::before { display: none; }
}

/* Website Menu Builder */
.website-builder-grid { height: calc(100vh - 255px); min-height: 560px; }
.builder-card { min-height: 0; overflow: hidden; }
.min-h-0 { min-height: 0; }
.builder-scroll { max-height: none; height: 100%; }
.builder-right-scroll { overflow: auto; height: 100%; }
.section-items-scroll { max-height: 330px; }
.section-select { width: 150px; }
.menu-section-block:last-child { border-bottom: 0 !important; }
.section-toolbar { background: rgba(128,128,128,.04); }

@media (max-width: 1199.98px) {
  .website-builder-grid { height: auto; min-height: 0; }
  .builder-card { max-height: 72vh; }
  .builder-scroll, .builder-right-scroll { max-height: 60vh; }
}

@media (max-width: 575.98px) {
  .section-select { width: 120px; }
  .builder-card { max-height: none; }
  .builder-scroll, .builder-right-scroll, .section-items-scroll { max-height: 65vh; overflow: auto; }
}

/* Keep all admin tables as real scrollable tables on mobile too */
@media (max-width: 575.98px) {
  .table-scroll { max-height: calc(100vh - 260px); overflow: auto; }
  .table-sticky thead th { position: sticky; top: 0; z-index: 5; }
  .table-mobile thead { display: table-header-group; }
  .table-mobile, .table-mobile tbody, .table-mobile tr { display: revert; width: auto; }
  .table-mobile td { display: table-cell; width: auto; text-align: inherit !important; padding: .5rem .5rem; border-bottom-width: 1px; }
  .table-mobile td::before { display: none; }
}

.builder-product-row { cursor: grab; }
.builder-product-row:active, .builder-menu-row:active { cursor: grabbing; }
.builder-menu-row { cursor: grab; }
.builder-menu-row.dragging { opacity: .45; }
.builder-drag-handle { white-space: nowrap; color: var(--pos-muted); }
.builder-drop-zone.drag-ok { outline: 2px dashed #198754; outline-offset: -6px; background: rgba(25,135,84,.06); }
.builder-drop-zone.drag-wrong { outline: 2px dashed #dc3545; outline-offset: -6px; background: rgba(220,53,69,.06); }
.product-category-tabs { gap: .35rem; overflow-x: auto; flex-wrap: nowrap; }
.product-category-tabs .nav-link { white-space: nowrap; }

.builder-section-tab-item { cursor: grab; }
.builder-section-tab-item.dragging { opacity: .45; }
.builder-section-tab-item:active { cursor: grabbing; }

/* Menu Designer */
.menu-designer-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:1rem}.designer-left{min-width:0}.designer-main{min-width:0}.product-palette{max-height:560px;overflow:auto}.designer-product{border:1px solid var(--bs-border-color);border-radius:.35rem;padding:.55rem;margin-bottom:.4rem;background:var(--bs-body-bg);cursor:grab}.designer-product:active{cursor:grabbing}.designer-workspace{display:grid;grid-template-columns:240px minmax(0,1fr);gap:1rem}.designer-tools{align-self:start;max-height:720px;overflow:auto}.designer-stage-wrap{background:#f2f3f5;overflow:auto;min-height:720px;max-height:78vh;padding:1rem;text-align:center}.designer-canvas{position:relative;display:inline-block;text-align:left;background-size:100% 100%;background-repeat:no-repeat;box-shadow:0 8px 24px rgba(0,0,0,.18);overflow:hidden}.designer-element{position:absolute;box-sizing:border-box;min-width:40px;min-height:28px;padding:.35rem;cursor:move;white-space:pre-wrap;outline:1px dashed transparent}.designer-element.selected{outline:2px solid #0d6efd}.designer-element-content{pointer-events:none}.resize-handle{position:absolute;right:0;bottom:0;width:12px;height:12px;background:#0d6efd;cursor:nwse-resize;display:none}.designer-element.selected .resize-handle{display:block}@media(max-width:991px){.menu-designer-grid,.designer-workspace{grid-template-columns:1fr}.designer-stage-wrap{max-height:70vh}.designer-left{order:2}}
.designer-element.group-selected{outline:2px dashed #198754;}
.designer-element-img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;}
#imageToolPanel:not(.d-none){display:block;}
.designer-element.group-selected{outline:2px solid #198754!important;box-shadow:0 0 0 3px rgba(25,135,84,.15)}
.designer-element.grouped{outline-style:dotted}
.designer-element.grouped::before{content:"group";position:absolute;top:-18px;left:0;background:#198754;color:#fff;font-size:10px;line-height:1;padding:1px 4px;border-radius:3px;display:none}
.designer-element.grouped.selected::before,.designer-element.grouped.group-selected::before{display:block}

/* Menu Designer focused controls */
body.designer-sidebar-hidden .sidebar { display: none !important; }
body.designer-sidebar-hidden .main-content { width: 100%; }
#designerBackgroundColor { min-width: 3.2rem; padding: .2rem; }
.designer-canvas { background-color: var(--designer-bg, #fff); }

body.designer-left-hidden .menu-designer-grid{grid-template-columns:1fr;}
body.designer-left-hidden .designer-left{display:none!important;}
#styleBackgroundColor{min-width:3.2rem;padding:.2rem;}


/* Desktop sidebar collapse / show-hide navigation */
@media (min-width: 992px) {
  body.sidebar-collapsed .sidebar { width: 72px; flex-basis: 72px; }
  body.sidebar-collapsed .sidebar .sidebar-label,
  body.sidebar-collapsed .sidebar .brand .small { display: none !important; }
  body.sidebar-collapsed .sidebar .brand { justify-content: center !important; }
  body.sidebar-collapsed .sidebar .nav-link { text-align: center; padding-left: .5rem; padding-right: .5rem; }
  body.sidebar-collapsed .sidebar .nav-link i { margin-right: 0 !important; font-size: 1.15rem; }
}
.log-viewer-output{background:#1f2529;color:#f8f9fa;min-height:520px;max-height:72vh;overflow:auto;font-size:.78rem;line-height:1.35;white-space:pre-wrap;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace}.log-viewer-output:empty:before{content:'No log lines found.'}

.deploy-code { max-height: 520px; overflow: auto; background: #0b1220; color: #e5e7eb; padding: 1rem; border-radius: .75rem; font-size: .82rem; white-space: pre; }
[data-theme='light'] .deploy-code { background: #111827; color: #f8fafc; }

/* Menu Templates gallery */
.menu-template-card { overflow: hidden; }
.menu-template-preview { height: 220px; background: var(--bs-tertiary-bg); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--bs-border-color); }
.menu-template-preview img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.menu-template-placeholder { color: var(--bs-secondary-color); display:grid; gap:.35rem; text-align:center; }
@media (max-width: 575.98px) { .menu-template-preview { height: 180px; } }