:root {
  --pepsi-blue: #004b93;
  --pepsi-red: #e32934;
  --pepsi-dark: #002a5c;
  --topbar-h: 56px;
}

body {
  background: #f2f4f7;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.topbar {
  background: linear-gradient(90deg, var(--pepsi-dark), var(--pepsi-blue));
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* --- Navbar: left (toggle + brand) --- */
.navbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;   /* allow the brand text to truncate instead of overflowing */
  flex: 1 1 auto;
}

.sidebar-toggle-btn {
  flex-shrink: 0;
}

.topbar .navbar-brand {
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  min-width: 0;
}

.topbar .navbar-brand i.bi-cup-straw-fill {
  font-size: 1.15rem;
}

.brand-text-short { display: none; }

@media (max-width: 575.98px) {
  .brand-text-full { display: none; }
  .brand-text-short { display: inline; }
}

/* --- Navbar: right (user menu) --- */
.navbar-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  max-width: 220px;
}

.user-menu-btn:hover,
.user-menu-btn:focus {
  background: rgba(255,255,255,0.16);
  color: #fff;
}

.user-menu-btn::after {
  display: none; /* replaced by .user-menu-caret */
}

.avatar-circle {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pepsi-red);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.user-menu-text {
  display: none;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
  min-width: 0;
  max-width: 130px;
}

.user-menu-name {
  font-size: 0.82rem;
  font-weight: 600;
}

.user-menu-role {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.65);
  text-transform: capitalize;
}

.user-menu-caret {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
  display: none;
}

@media (min-width: 576px) {
  .user-menu-text { display: flex; }
  .user-menu-caret { display: inline-block; }
}

.user-dropdown-menu {
  min-width: 220px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  padding: 4px 0;
}

.user-dropdown-menu .dropdown-item {
  padding: 8px 14px;
  font-size: 0.9rem;
}

.app-wrapper {
  display: flex;
  min-height: calc(100vh - 56px);
}

.sidebar-backdrop { display: none; }

.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: #0d3b66;
  color: #fff;
  min-height: calc(100vh - 56px);
}

.sidebar .nav-link {
  color: #cfe1f7;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.93rem;
}

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

.sidebar .nav-link.active {
  background: var(--pepsi-red);
  color: #fff;
  font-weight: 600;
}

.sidebar .nav-group-toggle .nav-caret {
  transition: transform .2s ease;
  font-size: 0.75rem;
}

.sidebar .nav-group-toggle.collapsed .nav-caret {
  transform: rotate(-90deg);
}

.sidebar .nav-submenu {
  padding-left: 10px;
  border-left: 2px solid rgba(255,255,255,0.12);
  margin: 2px 0 2px 22px;
}

.sidebar .nav-sublink {
  font-size: 0.87rem;
  padding: 8px 12px;
}

.sidebar .nav-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25em 0.55em;
}

.nav-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  padding: 14px 14px 6px;
}

.nav-section-label:first-child {
  padding-top: 6px;
}

.main-content {
  flex: 1;
  min-width: 0;   /* let the flex child shrink so wide tables scroll inside it, not the page */
  padding: 24px;
  max-width: 100%;
  overflow-x: auto;
}

.stat-card {
  border: none;
  border-radius: 14px;
  color: #fff;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.stat-card .stat-value { font-size: 1.8rem; font-weight: 700; }
.stat-card .stat-icon { font-size: 2rem; opacity: 0.5; }

.bg-c1 { background: linear-gradient(135deg, #004b93, #0072ce); }
.bg-c2 { background: linear-gradient(135deg, #e32934, #ff5b63); }
.bg-c3 { background: linear-gradient(135deg, #1b8a5a, #35c281); }
.bg-c4 { background: linear-gradient(135deg, #8a4fff, #b98bff); }

.card-panel {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e7eaf0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pepsi-dark), var(--pepsi-blue) 60%, var(--pepsi-red));
}

.login-card {
  width: 100%;
  max-width: 380px;
  border-radius: 16px;
  border: none;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

.table thead th {
  background: #f7f9fc;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #667;
}

/* ==========================================================
   Floating chat widget (includes/chat_widget.php)
   ========================================================== */

.chatw {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1050;
}

.chatw-bubble {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--pepsi-red);
  color: #fff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform .15s ease;
}

.chatw-bubble:hover { transform: scale(1.06); }

.chatw-bubble-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pepsi-dark);
  border: 2px solid #fff;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatw-panel {
  width: 330px;
  max-width: calc(100vw - 24px);
  height: 480px;
  max-height: calc(100vh - 100px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chatw-header {
  flex-shrink: 0;
  height: 52px;
  padding: 0 8px 0 14px;
  background: linear-gradient(90deg, var(--pepsi-dark), var(--pepsi-blue));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chatw-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 0;
}

.chatw-back {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 1.1rem;
}

.chatw-header-actions { display: flex; align-items: center; }

.chatw-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
}

.chatw-icon-btn:hover { background: rgba(255,255,255,0.15); }

.chatw-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* --- Contacts list --- */

.chatw-contacts {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.chatw-contact {
  width: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
}

.chatw-contact:hover { background: #f2f4f7; }

.chatw-avatar {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pepsi-blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatw-status-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.chatw-status-dot.chatw-online { background: #2ea043; }
.chatw-status-dot.chatw-offline { background: #b0b6c0; }

.chatw-contact-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.chatw-contact-name {
  font-size: 0.87rem;
  font-weight: 600;
  color: #1c2430;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatw-contact-preview {
  font-size: 0.76rem;
  color: #7a8496;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatw-unread-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pepsi-red);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatw-empty {
  padding: 24px 16px;
  text-align: center;
  color: #99a1af;
  font-size: 0.85rem;
}

/* --- Thread --- */

.chatw-thread {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chatw-thread-status {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 0.75rem;
  color: #7a8496;
  border-bottom: 1px solid #eef0f4;
}

.chatw-thread-status.chatw-online-text { color: #2ea043; font-weight: 600; }

.chatw-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f7f9fc;
}

.chatw-msg-row {
  max-width: 78%;
  display: flex;
  flex-direction: column;
}

.chatw-msg-row .chatw-bubble-text {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.35;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.chatw-msg-row .chatw-msg-time {
  font-size: 0.65rem;
  color: #9aa3b1;
  margin-top: 2px;
}

.chatw-msg-theirs {
  align-self: flex-start;
}

.chatw-msg-theirs .chatw-bubble-text {
  background: #fff;
  color: #1c2430;
  border: 1px solid #e7eaf0;
  border-bottom-left-radius: 4px;
}

.chatw-msg-mine {
  align-self: flex-end;
  align-items: flex-end;
}

.chatw-msg-mine .chatw-bubble-text {
  background: var(--pepsi-blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chatw-composer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #eef0f4;
  background: #fff;
}

.chatw-input {
  flex: 1;
  border: 1px solid #dde2ea;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  outline: none;
}

.chatw-input:focus {
  border-color: var(--pepsi-blue);
}

.chatw-send-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--pepsi-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chatw-send-btn:hover { filter: brightness(0.95); }

@media (max-width: 480px) {
  .chatw {
    right: 12px;
    bottom: 12px;
  }
  .chatw-panel {
    width: calc(100vw - 24px);
    height: calc(100vh - 90px);
  }
}


/* ==========================================================
   RESPONSIVE LAYOUT  (phones < 576, large phones < 768,
   tablets 768-991, small laptops 992-1199)
   ========================================================== */

img, canvas, svg, video { max-width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ---- Below lg (< 992px): sidebar becomes an off-canvas drawer ---- */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    width: 280px;
    max-width: 85vw;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 1040;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sidebar.show {
    transform: translateX(0);
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
    box-shadow: 6px 0 24px rgba(0,0,0,.28);
  }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: rgba(0,0,0,.45);
    z-index: 1035;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  body.sidebar-open { overflow: hidden; }
  .sidebar .nav-link { padding: 12px 14px; }          /* comfortable touch targets */
  .app-wrapper { display: block; min-height: 0; }
  .main-content { padding: 18px; }
}

/* Small laptops: slimmer permanent sidebar */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sidebar { width: 210px; }
  .main-content { padding: 20px; }
}

/* ---- Tablets portrait / large phones (< 768px) ---- */
@media (max-width: 767.98px) {
  .main-content { padding: 12px 10px; }
  .main-content h4 { font-size: 1.15rem; }
  .main-content h5 { font-size: 1.05rem; }

  .stat-card { padding: 14px; border-radius: 12px; }
  .stat-card .stat-value { font-size: 1.35rem; }
  .stat-card .stat-icon { font-size: 1.6rem; }
  .card-panel.p-3, .card-panel.p-4 { padding: .85rem !important; }

  /* Header rows: title on top, action buttons wrap underneath */
  .main-content > .d-flex.justify-content-between,
  .main-content .d-flex.justify-content-between.flex-wrap { row-gap: .5rem; }
  .main-content .btn-toolbar, .main-content .btn-group { flex-wrap: wrap; }

  /* 16px inputs stop iOS Safari zooming the page on focus */
  .form-control, .form-select, .form-control-sm, .form-select-sm,
  .input-group-text, textarea { font-size: 16px; }
  .form-control, .form-select { min-height: 40px; }

  /* Data tables: scroll sideways instead of crushing columns */
  .table-responsive > .table:not(#loadSheetGrid) th,
  .table-responsive > .table:not(#loadSheetGrid) td { white-space: nowrap; }
  .table-responsive > .table td.text-wrap,
  .table-responsive > .table th.text-wrap { white-space: normal; min-width: 180px; }
  .table > :not(caption) > * > * { padding: .4rem .5rem; }
  .table-responsive.is-overflowing {
    background:
      linear-gradient(to left, rgba(0,0,0,.14), rgba(0,0,0,0)) right center / 14px 100% no-repeat local,
      linear-gradient(to left, rgba(0,0,0,.14), rgba(0,0,0,0)) right center / 14px 100% no-repeat scroll;
  }

  /* Sticky tab bars scroll sideways instead of wrapping */
  .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link, .nav-pills .nav-link { flex-shrink: 0; }

  /* Modals use the whole screen width and scroll inside the viewport */
  .modal-dialog:not(.modal-dialog-centered) { margin: .5rem; }
  .modal-dialog { max-width: calc(100vw - 1rem); }
  .modal-body { padding: .85rem; }
  .modal-footer { flex-wrap: wrap; gap: .4rem; }
  .modal-footer > .btn { flex: 1 1 auto; }

  /* Dropdowns never wider than the screen */
  .dropdown-menu { max-width: calc(100vw - 1rem); }
  .dropdown-menu[style*="min-width"] { min-width: min(380px, calc(100vw - 1.5rem)) !important; }

  /* Pagination / button rows */
  .pagination { flex-wrap: wrap; }

  /* Map */
  #map { height: min(560px, 62vh) !important; }

  /* Autocomplete lists */
  .sku-suggest { left: 0 !important; right: 0 !important; }
}

/* ---- Phones (< 576px) ---- */
@media (max-width: 575.98px) {
  :root { --topbar-h: 52px; }
  .topbar { height: var(--topbar-h); }
  .main-content { padding: 10px 8px; }
  .login-wrapper { padding: 16px; align-items: flex-start; padding-top: 8vh; }
  .login-card { padding: 1.25rem !important; }
  .stat-card .stat-value { font-size: 1.2rem; }

  .modal-dialog, .modal-dialog:not(.modal-dialog-centered) { margin: 0; max-width: 100vw; min-height: 100%; }
  .modal-content { min-height: 100vh; border-radius: 0; border: 0; }
  .modal-dialog-scrollable .modal-content { max-height: 100vh; }
  .modal-dialog-centered { align-items: flex-start; }
  .modal-title { font-size: 1.05rem; }

  .user-dropdown-menu { min-width: 200px; }
  .toast-container, .chatw { max-width: 100vw; }
}

/* Short landscape phones: keep the drawer usable */
@media (max-height: 480px) and (max-width: 991.98px) {
  .sidebar .nav-link { padding: 8px 12px; }
  .nav-section-label { padding-top: 8px; }
}

/* ---- Mobile drawer refinements (phones / small tablets) ---- */
@media (max-width: 991.98px) {
  .sidebar {
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    padding-left: env(safe-area-inset-left);
  }
  .sidebar .nav { padding-bottom: 24px !important; flex-wrap: nowrap; }
  .sidebar .nav-link { min-height: 44px; font-size: 1rem; align-items: center; }
  .sidebar .nav-link > i { flex: 0 0 22px; font-size: 1.1rem; text-align: center; }
  .sidebar .nav-link > span:not(.badge) { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
  .sidebar .nav-badge { flex: 0 0 auto; margin-left: auto; }
  .nav-section-label { padding: 16px 14px 6px; }
  .sidebar-toggle-btn { min-width: 40px; min-height: 36px; font-size: 1.2rem; line-height: 1; }
  .topbar .navbar-brand { font-size: 1rem; }
}
@media (max-width: 575.98px) {
  .sidebar { width: 82vw; max-width: 300px; }
}

/* Never alter the printed output */
@media print {
  .sidebar-backdrop { display: none !important; }
}