/* Brian Autoparts POS — Modern Uniform UI
   Presentation only: no workflow or transaction behavior is changed. */

:root {
  --pos-primary: #d92335;
  --pos-primary-hover: #b81728;
  --pos-primary-deep: #861522;
  --pos-primary-soft: #fff0f2;
  --pos-primary-ring: rgba(217, 35, 53, .16);
  --pos-accent: #f59e0b;
  --pos-bg: #f4f6f9;
  --pos-bg-deep: #e9edf3;
  --pos-surface: #ffffff;
  --pos-surface-muted: #f8fafc;
  --pos-ink: #182230;
  --pos-ink-soft: #344054;
  --pos-muted: #475467;
  --pos-line: #e4e7ec;
  --pos-line-strong: #d0d5dd;
  --pos-success: #14804a;
  --pos-warning: #b54708;
  --pos-danger: #c1152f;
  --pos-info: #175cd3;
  --pos-radius-sm: 8px;
  --pos-radius: 12px;
  --pos-radius-lg: 18px;
  --pos-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --pos-shadow: 0 8px 24px rgba(16, 24, 40, .08);
  --pos-shadow-lg: 0 20px 48px rgba(16, 24, 40, .14);
  --pos-transition: 160ms ease;

  --bs-primary: var(--pos-primary);
  --bs-primary-rgb: 217, 35, 53;
  --bs-success: var(--pos-success);
  --bs-success-rgb: 20, 128, 74;
  --bs-info: var(--pos-info);
  --bs-info-rgb: 23, 92, 211;
  --bs-warning: #f79009;
  --bs-warning-rgb: 247, 144, 9;
  --bs-danger: var(--pos-danger);
  --bs-danger-rgb: 193, 21, 47;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--pos-bg);
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--pos-ink) !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--pos-primary) 6%, transparent), transparent 32rem),
    linear-gradient(180deg, #f8f9fb 0, var(--pos-bg) 24rem) !important;
  font-family: Inter, "Segoe UI Variable", "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--pos-primary-soft); color: var(--pos-primary-deep); }

a {
  color: var(--pos-primary-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--pos-transition), opacity var(--pos-transition);
}

a:hover { color: var(--pos-primary-hover); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--pos-ink);
  font-weight: 750;
  letter-spacing: -.025em;
}

h1, .h1 { font-size: clamp(1.75rem, 2vw, 2.25rem); }
h2, .h2 { font-size: clamp(1.45rem, 1.6vw, 1.85rem); }
h3, .h3 { font-size: clamp(1.2rem, 1.3vw, 1.5rem); }

.text-muted, small, .small { color: var(--pos-muted) !important; }
.text-primary { color: var(--pos-primary) !important; }
.text-success { color: var(--pos-success) !important; }
.text-info { color: var(--pos-info) !important; }
.text-danger { color: var(--pos-danger) !important; }

/* Shared application chrome */
.navbar, .navbar-dark, .navbar-light, .topbar, .header, .app-header,
.main-header, .page-header, .bg-gradient-primary {
  color: #fff !important;
  background: linear-gradient(118deg, var(--pos-primary-deep) 0%, var(--pos-primary) 58%, var(--pos-primary-hover) 100%) !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(134, 21, 34, .18);
}

.navbar a, .navbar .nav-link, .navbar-brand, .topbar a,
.header a, .app-header a, .main-header a, .page-header a {
  color: rgba(255, 255, 255, .92) !important;
  text-decoration: none;
}

.navbar a:hover, .navbar .nav-link:hover, .navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .12);
  border-radius: var(--pos-radius-sm);
}

/* High-contrast information inside red application headers. */
.topbar .pos-header-date {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 13px;
  color: #fff !important;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

.topbar .pos-header-date i { color: #fff !important; }
.topbar .text-muted, .topbar .text-dark, .topbar .notif-icon { color: #fff !important; }
.topbar .notif-icon:hover { color: #ffe4e8 !important; }

.sidebar, .side-rail, .admin-sidebar, .menu-sidebar, .left-sidebar, .sidebar-dark {
  color: #fff !important;
  background: var(--pos-sidebar, #0b1f3a) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 12px 0 40px rgba(16, 24, 40, .16) !important;
}

.sidebar .logo-container, .side-rail .logo-container,
.admin-sidebar .logo-container, .menu-sidebar .logo-container {
  padding-bottom: 1.25rem !important;
  margin-bottom: .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.sidebar .logo-container img, .sidebar-brand img {
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6,
.side-rail h1, .side-rail h2, .side-rail h3, .side-rail h4, .side-rail h5,
.admin-sidebar h1, .admin-sidebar h2, .admin-sidebar h3, .admin-sidebar h4, .admin-sidebar h5 {
  color: #fff !important;
  letter-spacing: -.01em;
}

.sidebar a, .side-rail a, .admin-sidebar a, .menu-sidebar a,
.left-sidebar a, .sidebar-dark a, .sidebar .nav-link, .sidebar-brand,
.sidebar-brand-text {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255, 255, 255, .78) !important;
  text-decoration: none !important;
  border: 1px solid transparent;
  border-radius: 10px !important;
  transition: background var(--pos-transition), color var(--pos-transition), transform var(--pos-transition), border-color var(--pos-transition);
}

.sidebar a:hover, .sidebar a.active, .side-rail a:hover, .side-rail a.active,
.admin-sidebar a:hover, .admin-sidebar a.active, .menu-sidebar a:hover,
.menu-sidebar a.active, .left-sidebar a:hover, .left-sidebar a.active {
  color: #fff !important;
  background: linear-gradient(90deg, var(--pos-primary), var(--pos-primary-deep)) !important;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 8px 18px rgba(134, 21, 34, .22);
  transform: translateX(2px);
}

.sidebar a i, .side-rail a i, .admin-sidebar a i, .menu-sidebar a i {
  width: 1.25rem;
  text-align: center;
  font-size: 1.05em;
}

.sidebar .logout {
  color: rgba(255,255,255,.86) !important;
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.09) !important;
}

.sidebar .logout:hover { background: rgba(255,255,255,.13) !important; }

/* One shared sidebar layout for every page that includes sidebar.php. */
#sidebar.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  width: 240px;
  height: 100vh;
  padding: 1rem 12px;
  overflow-y: auto;
  transition: left .24s ease;
}

#sidebar.sidebar .logo-container { padding: 10px 8px 18px !important; }
#sidebar.sidebar > a { min-height: 44px; padding: 10px 12px; margin: 3px 0; font-weight: 650; }
#sidebar.sidebar ~ .content-wrapper { margin-left: 240px; min-height: 100vh; }

/* Content surfaces */
.container, .container-fluid, main, .main-content, .content, .content-wrapper {
  --bs-gutter-x: 1.5rem;
}

.card, .modal-content, .dropdown-menu, .list-group-item,
.pos-panel, .panel, .box, .stat-card, .summary-card, .dashboard-card {
  color: var(--pos-ink);
  background: var(--pos-surface) !important;
  border: 1px solid rgba(228, 231, 236, .92) !important;
  border-radius: var(--pos-radius-lg) !important;
  box-shadow: var(--pos-shadow-sm) !important;
}

.card, .pos-panel, .panel, .box, .stat-card, .summary-card, .dashboard-card {
  transition: box-shadow var(--pos-transition), transform var(--pos-transition), border-color var(--pos-transition);
}

.card:hover, .stat-card:hover, .summary-card:hover, .dashboard-card:hover {
  border-color: #d8dde5 !important;
  box-shadow: var(--pos-shadow) !important;
}

.card-header, .panel-heading, .box-header {
  color: var(--pos-ink) !important;
  background: linear-gradient(180deg, #fff, var(--pos-surface-muted)) !important;
  border-bottom: 1px solid var(--pos-line) !important;
  border-radius: var(--pos-radius-lg) var(--pos-radius-lg) 0 0 !important;
  padding: 1rem 1.25rem;
  font-weight: 700;
}

.card-body { padding: 1.25rem; }
.card-footer { background: var(--pos-surface-muted); border-top-color: var(--pos-line); }

/* Forms */
.content-wrapper,
.content-wrapper > .container,
.content-wrapper > .container-fluid,
.row > [class*="col-"] {
  min-width: 0;
}

.content-wrapper {
  max-width: 100%;
  overflow-x: clip;
}

.card,
.card-body,
.dashboard-panel,
.filter-panel,
.logs-panel {
  min-width: 0;
  max-width: 100%;
}

.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

img, svg, video, canvas { max-width: 100%; }

@media (max-width: 768px) {
  .content-wrapper { padding-left: 12px !important; padding-right: 12px !important; }
  .card-body { padding: 1rem; }
  .d-flex.justify-content-between { flex-wrap: wrap; gap: .75rem; }
  .modal-dialog { margin: .75rem; max-width: calc(100% - 1.5rem); }
  #alert-area { left: 12px !important; right: 12px !important; min-width: 0 !important; width: auto !important; }
}

.form-label, label {
  color: var(--pos-ink-soft);
  font-weight: 650;
  font-size: .875rem;
}

.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select, textarea, .input-group-text {
  color: var(--pos-ink) !important;
  background-color: #fff !important;
  border: 1px solid var(--pos-line-strong) !important;
  border-radius: 10px !important;
  min-height: 42px;
  transition: border-color var(--pos-transition), box-shadow var(--pos-transition), background-color var(--pos-transition);
}

textarea.form-control, textarea { min-height: 92px; }

.form-control:hover, .form-select:hover, input:hover, select:hover, textarea:hover {
  border-color: #98a2b3 !important;
}

.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--pos-primary) !important;
  box-shadow: 0 0 0 4px var(--pos-primary-ring) !important;
  outline: none !important;
}

.form-control::placeholder, input::placeholder, textarea::placeholder { color: #98a2b3 !important; }

.form-control:disabled, .form-select:disabled, input:disabled, select:disabled, textarea:disabled,
.form-control[readonly] {
  color: var(--pos-muted) !important;
  background: #f2f4f7 !important;
  cursor: not-allowed;
}

.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) {
  border-radius: 10px 0 0 10px !important;
}

.input-group-text {
  color: var(--pos-muted) !important;
  background: var(--pos-surface-muted) !important;
}

/* Joined fields: keep icons readable and leave comfortable space before text. */
.input-group > .input-group-text:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding-inline: .8rem !important;
  border-right: 0 !important;
  border-radius: 10px 0 0 10px !important;
}

.input-group > .input-group-text:first-child + .form-control,
.input-group > .input-group-text:first-child + .form-select,
.input-group > .input-group-text:first-child + input {
  padding-left: .8rem !important;
  border-left: 0 !important;
  border-radius: 0 10px 10px 0 !important;
}

.input-group > .input-group-text:first-child + .form-control:not(:last-child),
.input-group > .input-group-text:first-child + .form-select:not(:last-child),
.input-group > .input-group-text:first-child + input:not(:last-child) {
  border-radius: 0 !important;
}

.input-group:focus-within > .input-group-text:first-child {
  color: var(--pos-primary) !important;
  border-color: var(--pos-primary) !important;
}

.form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  border-color: #98a2b3;
}

.form-check-input:checked { background-color: var(--pos-primary); border-color: var(--pos-primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--pos-primary-ring); }

/* Buttons */
.btn, button, input[type="submit"], input[type="button"] {
  border-radius: 10px !important;
  font-weight: 680 !important;
  letter-spacing: -.005em;
  min-height: 40px;
  transition: transform var(--pos-transition), box-shadow var(--pos-transition), background-color var(--pos-transition), border-color var(--pos-transition) !important;
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover { transform: translateY(-1px); }
.btn:active, button:active { transform: translateY(0); }

.btn-primary, input[type="submit"], button[type="submit"] {
  color: #fff !important;
  background: linear-gradient(135deg, #e22c3e, var(--pos-primary-hover)) !important;
  border-color: var(--pos-primary) !important;
  box-shadow: 0 5px 12px rgba(217, 35, 53, .18);
}

.btn-primary:hover, input[type="submit"]:hover, button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--pos-primary), var(--pos-primary-deep)) !important;
  border-color: var(--pos-primary-hover) !important;
  box-shadow: 0 8px 18px rgba(217, 35, 53, .24);
}

.btn-success { background-color: var(--pos-success) !important; border-color: var(--pos-success) !important; color: #fff !important; }
.btn-danger { background-color: var(--pos-danger) !important; border-color: var(--pos-danger) !important; color: #fff !important; }
.btn-info { background-color: var(--pos-info) !important; border-color: var(--pos-info) !important; color: #fff !important; }
.btn-warning { background-color: #f79009 !important; border-color: #f79009 !important; color: #371b00 !important; }
.btn-dark { background-color: #242a35 !important; border-color: #242a35 !important; }
.btn-light, .btn-secondary { border-color: var(--pos-line-strong) !important; box-shadow: var(--pos-shadow-sm); }

.btn-outline-primary { color: var(--pos-primary) !important; border-color: #f1a7af !important; background: #fff !important; }
.btn-outline-primary:hover { color: #fff !important; background: var(--pos-primary) !important; border-color: var(--pos-primary) !important; }
.btn-outline-success:hover, .btn-outline-info:hover, .btn-outline-danger:hover { color: #fff !important; }

.btn-sm { min-height: 34px; border-radius: 8px !important; }
.btn-lg { min-height: 48px; border-radius: 12px !important; }
.btn-close, .navbar-toggler {
  min-height: auto;
  transform: none !important;
  box-shadow: none !important;
}

/* Tables and data grids */
.table-responsive {
  background: var(--pos-surface);
  border: 1px solid var(--pos-line);
  border-radius: var(--pos-radius);
  box-shadow: var(--pos-shadow-sm);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: #fafbfc;
  --bs-table-hover-bg: #fff4f5;
  margin-bottom: 0;
  color: var(--pos-ink-soft) !important;
  background: transparent !important;
  border-color: var(--pos-line) !important;
  vertical-align: middle;
}

.table > :not(caption) > * > * { padding: .82rem .9rem; border-bottom-color: var(--pos-line); }

.table thead th, .thead-dark th, .thead-light th {
  color: #475467 !important;
  background: #f8fafc !important;
  border-color: var(--pos-line) !important;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table tbody tr { transition: background-color var(--pos-transition); }
.table-hover tbody tr:hover, .table tbody tr:hover { background: #fff6f7 !important; }
.table tbody tr:last-child td { border-bottom-width: 0; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border-radius: 9px !important; }

/* Modals, menus, alerts and status */
.modal-backdrop.show { opacity: .46; backdrop-filter: blur(2px); }
.modal-content { overflow: hidden; box-shadow: var(--pos-shadow-lg) !important; }

.modal-header {
  color: var(--pos-ink) !important;
  background: linear-gradient(180deg, #fff, #f8fafc) !important;
  border-bottom: 1px solid var(--pos-line) !important;
  padding: 1.1rem 1.25rem;
}

.modal-header.bg-primary, .modal-header.bg-danger, .modal-header.bg-dark,
.modal-header.text-white {
  color: #fff !important;
  background: linear-gradient(120deg, var(--pos-primary-hover), var(--pos-primary)) !important;
}

.modal-header.text-white .modal-title, .modal-header.bg-primary .modal-title,
.modal-header.bg-danger .modal-title, .modal-header.bg-dark .modal-title { color: #fff !important; }

.modal-footer { background: #fafbfc; border-top-color: var(--pos-line); }

.dropdown-menu { padding: .5rem; box-shadow: var(--pos-shadow-lg) !important; }
.dropdown-item { border-radius: 8px; padding: .55rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--pos-primary-soft); color: var(--pos-primary-deep); }

.alert {
  border: 1px solid transparent !important;
  border-radius: var(--pos-radius) !important;
  box-shadow: var(--pos-shadow-sm);
}

.alert-primary { color: #8a1523; background: #fff0f2 !important; border-color: #fecdd3 !important; }
.alert-success { color: #05603a; background: #ecfdf3 !important; border-color: #abefc6 !important; }
.alert-info { color: #1849a9; background: #eff8ff !important; border-color: #b2ddff !important; }
.alert-warning { color: #93370d; background: #fffaeb !important; border-color: #fedf89 !important; }
.alert-danger { color: #a40e26; background: #fff1f3 !important; border-color: #fda4af !important; }

.badge, .label {
  border-radius: 999px !important;
  padding: .38em .65em;
  font-weight: 700;
  letter-spacing: .01em;
}

.badge.bg-primary, .text-bg-primary, .label-primary { background: var(--pos-primary) !important; color: #fff !important; }
.badge.bg-success, .text-bg-success, .label-success { background: var(--pos-success) !important; color: #fff !important; }
.badge.bg-info, .text-bg-info, .label-info { background: var(--pos-info) !important; color: #fff !important; }

.list-group { gap: .45rem; }
.list-group-item { border-radius: 10px !important; }
.list-group-item-action:hover { color: var(--pos-primary-deep); background: var(--pos-primary-soft) !important; }

.nav-tabs { gap: .25rem; border-bottom-color: var(--pos-line); }
.nav-tabs .nav-link { color: var(--pos-muted); border: 0; border-radius: 9px 9px 0 0; font-weight: 650; }
.nav-tabs .nav-link:hover { color: var(--pos-primary); background: var(--pos-primary-soft); }
.nav-tabs .nav-link.active { color: var(--pos-primary); background: #fff; border-bottom: 2px solid var(--pos-primary); }

.pagination { gap: .3rem; }
.page-link {
  color: var(--pos-ink-soft) !important;
  border-color: var(--pos-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--pos-shadow-sm);
}
.page-link:hover { color: var(--pos-primary) !important; background: var(--pos-primary-soft) !important; }
.page-item.active .page-link { color: #fff !important; background: var(--pos-primary) !important; border-color: var(--pos-primary) !important; }

.progress { height: .65rem; background: #eaecf0; border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, var(--pos-primary-hover), #ee5362); }

/* Login and role landing pages */
.login-wrapper { padding: 1.25rem !important; }
.login-card, .auth-card {
  overflow: hidden;
  background: rgba(255, 255, 255, .97) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-top: 5px solid var(--pos-primary) !important;
  border-radius: 22px !important;
  box-shadow: 0 28px 70px rgba(46, 18, 25, .20) !important;
  backdrop-filter: blur(14px);
}

.login-card .logo-container img, .auth-card img { filter: drop-shadow(0 8px 12px rgba(16,24,40,.10)); }
.login-card .btn-login, .auth-card .btn-primary { min-height: 48px; }

.nav-card, .feature-card, .quick-action, .action-card {
  border: 1px solid var(--pos-line) !important;
  border-radius: var(--pos-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--pos-shadow-sm) !important;
  transition: transform var(--pos-transition), box-shadow var(--pos-transition), border-color var(--pos-transition) !important;
}

.nav-card:hover, .feature-card:hover, .quick-action:hover, .action-card:hover {
  transform: translateY(-3px) !important;
  border-color: #f1a7af !important;
  box-shadow: var(--pos-shadow) !important;
}

/* Utility compatibility */
.bg-primary { background-color: var(--pos-primary) !important; }
.bg-success { background-color: var(--pos-success) !important; }
.bg-info { background-color: var(--pos-info) !important; }
.bg-danger { background-color: var(--pos-danger) !important; }
.border-left-primary { border-left-color: var(--pos-primary) !important; }
.border-left-success { border-left-color: var(--pos-success) !important; }
.border-left-info { border-left-color: var(--pos-info) !important; }

hr { border-color: var(--pos-line); opacity: 1; }
.breadcrumb { color: var(--pos-muted); background: transparent; }
.accordion-item { border-color: var(--pos-line); }
.accordion-button:not(.collapsed) { color: var(--pos-primary-deep); background: var(--pos-primary-soft); box-shadow: none; }

/* Lightweight operational utilities */
.pos-utility-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1045;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 42px;
  padding: .55rem .8rem;
  color: #fff;
  background: rgba(24, 34, 48, .94);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, .22);
  backdrop-filter: blur(12px);
  font-size: .78rem;
  line-height: 1.15;
  pointer-events: none;
}

.pos-utility-dock .pos-network-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: #32d583;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(50, 213, 131, .13);
}

.pos-utility-dock.is-offline .pos-network-dot {
  background: #f97066;
  box-shadow: 0 0 0 4px rgba(249, 112, 102, .14);
}

.pos-utility-time { color: #fff; font-weight: 750; }
.pos-utility-date { color: rgba(255,255,255,.62); }

.pos-back-to-top {
  position: fixed;
  right: 18px;
  bottom: 72px;
  z-index: 1044;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--pos-primary);
  border: 0;
  border-radius: 12px !important;
  box-shadow: 0 10px 22px rgba(217, 35, 53, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--pos-transition), visibility var(--pos-transition), transform var(--pos-transition) !important;
}

.pos-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

.ops-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  width: min(860px, 100%);
  margin: 0 auto 1.5rem;
}

.ops-chip {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1rem;
  color: var(--pos-ink);
  text-align: left;
  text-decoration: none !important;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--pos-line);
  border-radius: 14px;
  box-shadow: var(--pos-shadow-sm);
  transition: transform var(--pos-transition), border-color var(--pos-transition), box-shadow var(--pos-transition);
}

.ops-chip:hover { color: var(--pos-ink); transform: translateY(-2px); border-color: #f1a7af; box-shadow: var(--pos-shadow); }
.ops-chip-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 11px; font-size: 1.15rem; }
.ops-chip-label { display: block; color: var(--pos-muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ops-chip-value { display: block; color: var(--pos-ink); font-size: 1.25rem; font-weight: 800; line-height: 1.15; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #edf0f4; }
::-webkit-scrollbar-thumb { background: #c3c9d2; border: 2px solid #edf0f4; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #98a2b3; }

@media (max-width: 991.98px) {
  body { font-size: 14px; }
  .card-body { padding: 1rem; }
  .table > :not(caption) > * > * { padding: .7rem .75rem; }
  .modal-dialog { margin: .75rem; }
}

@media (max-width: 1200px) {
  #sidebar.sidebar { left: -240px; }
  #sidebar.sidebar.active { left: 0; }
  #sidebar.sidebar ~ .content-wrapper { margin-left: 0; }
}

@media (max-width: 575.98px) {
  :root { --pos-radius-lg: 14px; }
  .container, .container-fluid, main, .main-content, .content, .content-wrapper { --bs-gutter-x: 1rem; }
  .btn { min-height: 42px; }
  .card-header, .card-body { padding-left: 1rem; padding-right: 1rem; }
  h1, .h1 { font-size: 1.65rem; }
  h2, .h2 { font-size: 1.4rem; }
  .pos-utility-dock { right: 10px; bottom: 10px; }
  .pos-utility-date { display: none; }
  .pos-back-to-top { right: 10px; bottom: 62px; }
  .ops-strip { grid-template-columns: 1fr; gap: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Clean, consistent spacing for table workflow controls. */
.pos-action-heading,
.pos-action-cell {
  min-width: 112px;
  text-align: center !important;
}
.pos-action-cell {
  white-space: normal !important;
  vertical-align: middle !important;
}
.pos-action-cell > a,
.pos-action-cell > button,
.pos-action-cell > form,
.pos-action-cell > .btn,
.pos-action-cell > .btn-group,
.pos-action-cell > div > a,
.pos-action-cell > div > button,
.pos-action-cell > div > form {
  margin: 3px !important;
}
.pos-action-cell form,
.action-buttons form,
.action-btns form,
.line-actions form {
  display: inline-flex !important;
  margin-block: 3px !important;
}
.pos-action-cell .btn,
.action-buttons .btn,
.action-btns .btn,
.line-actions .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: .45rem .65rem;
  line-height: 1;
  border-radius: 9px !important;
  box-shadow: none !important;
}
.action-buttons,
.action-btns,
.line-actions {
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px !important;
}
@media (max-width: 575.98px) {
  .pos-action-heading,
  .pos-action-cell { min-width: 126px; }
  .pos-action-cell .btn,
  .action-buttons .btn,
  .action-btns .btn,
  .line-actions .btn { min-width: 40px; min-height: 40px; }
}

@media print {
  html, body { color: #000 !important; background: #fff !important; }
  .sidebar, .navbar, .topbar, .no-print, .btn, button { display: none !important; }
  .card, .table-responsive, .table, .modal-content {
    border-color: #bbb !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .table thead th { color: #000 !important; background: #eee !important; }
  a { color: #000 !important; text-decoration: none !important; }
}

/* =========================================
   GLOBAL SYNCHRONIZED SIDEBAR & BUTTON
========================================= */

/* =========================================
   GLOBAL SYNCHRONIZED SIDEBAR & BUTTON
========================================= */

/* Bagong Global Button Styling */
button#globalToggleBtn {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #172033 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  width: 45px !important;
  height: 45px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
  cursor: pointer !important;
  z-index: 2147483647 !important; /* MAXIMUM Z-INDEX - WALANG MAKAKAPATONG DITO */
  position: fixed !important; 
  top: 25px !important;
  left: 25px !important;
}

button#globalToggleBtn i { font-size: 1.8rem !important; color: #ffffff !important; }
button#globalToggleBtn:hover { background-color: #253044 !important; }

/* 1. Itago ang bagong button kapag naka-Desktop */
@media (min-width: 1201px) {
  button#globalToggleBtn { display: none !important; }
}

/* 2. ITAGO ANG MGA LUMANG BUTTON SA LAHAT NG PAGES PARA HINDI MANGGULO */
button#toggleBtn {
  display: none !important; 
  pointer-events: none !important;
}

/* 3. Global Spacing para hindi takpan ng banner ang button */
@media (max-width: 1200px) {
  .content-wrapper {
    padding-top: 90px !important; 
  }
  #sidebar.sidebar .logo-container {
    padding-top: 75px !important; 
  }
}
.pos-toast-stack{position:fixed;z-index:2147483000;top:82px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;width:min(390px,calc(100vw - 28px));pointer-events:none}
.pos-side-toast{display:grid;grid-template-columns:34px minmax(0,1fr) 28px;align-items:center;gap:10px;width:100%;padding:12px 10px 12px 12px;color:#10233d;background:#fff;border:1px solid #dbe3ef;border-left:5px solid #2f80ed;border-radius:12px;box-shadow:0 14px 35px rgba(15,23,42,.20);opacity:0;transform:translateX(24px);transition:opacity .2s ease,transform .2s ease;pointer-events:auto}
.pos-side-toast.is-visible{opacity:1;transform:translateX(0)}.pos-side-toast.is-leaving{opacity:0;transform:translateX(24px)}
.pos-side-toast.is-success{border-left-color:#15805d}.pos-side-toast.is-error{border-left-color:#c5223c}.pos-side-toast.is-info{border-left-color:#2f80ed}
.pos-toast-icon{display:grid;place-items:center;width:30px;height:30px;color:#fff;font-weight:900;background:#2f80ed;border-radius:50%}.is-success .pos-toast-icon{background:#15805d}.is-error .pos-toast-icon{background:#c5223c}
.pos-toast-message{min-width:0;font-size:.9rem;font-weight:650;line-height:1.35;overflow-wrap:anywhere}.pos-side-toast button{width:28px;height:28px;padding:0;color:#64748b;font-size:1.25rem;line-height:1;background:transparent;border:0;border-radius:7px}.pos-side-toast button:hover{color:#0f172a;background:#f1f5f9}
@media(max-width:768px){.pos-toast-stack{top:72px;left:12px;right:12px;width:auto}.pos-side-toast{padding:11px 9px 11px 11px}}
.input-group.pos-search-group{position:relative!important;display:flex!important;align-items:stretch!important;min-height:44px!important;padding:0!important;background:#fff!important;border:1px solid #cbd5e1!important;border-radius:10px!important;box-shadow:0 2px 7px rgba(15,23,42,.06)!important;overflow:hidden!important}
.input-group.pos-search-group>.pos-search-icon{position:static!important;z-index:1!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 46px!important;width:46px!important;min-width:46px!important;margin:0!important;padding:0!important;color:#45617f!important;background:#fff!important;border:0!important;border-right:1px solid #e2e8f0!important;border-radius:0!important;box-shadow:none!important;pointer-events:none!important}
.input-group.pos-search-group>.pos-search-input,
body .input-group.pos-search-group>.pos-search-icon+.form-control.pos-search-input,
body .input-group.pos-search-group>.pos-search-icon+input.pos-search-input{flex:1 1 auto!important;min-width:0!important;min-height:42px!important;margin:0!important;padding:9px 14px!important;background:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important}
.input-group.pos-search-group:focus-within{border-color:var(--pos-primary,#12345b)!important;box-shadow:0 0 0 3px var(--pos-primary-ring,rgba(18,52,91,.14))!important}
.input-group.pos-search-group:focus-within>.pos-search-icon{color:var(--pos-primary,#12345b)!important}
.pos-search-standalone{min-height:44px!important;padding:9px 14px!important;background:#fff!important;border:1px solid #cbd5e1!important;border-radius:10px!important;box-shadow:0 2px 7px rgba(15,23,42,.06)!important;outline:0!important}
.pos-search-standalone:focus{border-color:var(--pos-primary,#12345b)!important;box-shadow:0 0 0 3px var(--pos-primary-ring,rgba(18,52,91,.14))!important}