/* =========================================================
   POS Admin Template — Components
   ========================================================= */

/* Page title bar */
.page-title-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-title-bar h1 { font-size: 1.45rem; margin: 0; font-weight: 700; }
.page-title-bar .sub { color: var(--text-muted-color); font-size: .85rem; margin-top: 2px; }

/* KPI / stat card */
.stat-card { border-radius: var(--radius); overflow: hidden; position: relative; }
.stat-card .stat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.stat-card .stat-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.stat-card .stat-label { color: var(--text-muted-color); font-size: .8rem; font-weight: 500; }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; margin: 4px 0; }
.stat-card .stat-meta { font-size: .76rem; }
.stat-card .progress { height: 5px; }

.bg-primary-soft { background: var(--primary-soft); color: var(--primary-color); }
.bg-success-soft { background: rgba(var(--bs-success-rgb), .14); color: var(--bs-success); }
.bg-warning-soft { background: rgba(var(--bs-warning-rgb), .16); color: #b07d0c; }
.bg-danger-soft { background: rgba(var(--bs-danger-rgb), .14); color: var(--bs-danger); }
.bg-info-soft { background: rgba(var(--bs-info-rgb), .14); color: #0aa2c0; }
.bg-purple-soft { background: rgba(var(--bs-purple-rgb), .14); color: var(--bs-purple); }
.bg-pink-soft { background: rgba(var(--bs-pink-rgb), .14); color: var(--bs-pink); }
[data-bs-theme="dark"] .bg-warning-soft { color: var(--bs-warning); }

/* Card header actions */
.card-header .card-actions { display: flex; align-items: center; gap: .3rem; }
.card-title-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-title-bar .card-title { margin: 0; font-size: 1rem; font-weight: 600; }
.icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text-muted-color); border-radius: var(--radius); transition: background-color .15s, color .15s; }
.icon-btn:hover, .icon-btn:focus { background: var(--surface-2-bg); color: var(--primary-color); }

/* Toolbar / filters */
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.toolbar .input-group, .toolbar .form-select, .toolbar .form-control { min-width: 160px; }

/* Datatable wrapper */
.table-wrap { overflow-x: auto; }
.table-card { margin: 0; }
.action-cell { white-space: nowrap; }
.action-cell .icon-btn { width: 30px; height: 30px; font-size: 1rem; }
.action-cell .icon-btn.tbl-success,
.action-cell .icon-btn.tbl-success:focus { color: rgba(var(--bs-success-rgb), .9); }
.action-cell .icon-btn.tbl-success:hover { background: rgba(var(--bs-success-rgb), .12); color: rgba(var(--bs-success-rgb), .9); }
.action-cell .icon-btn.tbl-danger,
.action-cell .icon-btn.tbl-danger:focus { color: rgba(var(--bs-danger-rgb), .85); }
.action-cell .icon-btn.tbl-danger:hover { background: rgba(var(--bs-danger-rgb), .12); color: rgba(var(--bs-danger-rgb), .85); }

/* DataTables (Bootstrap5) controls — make only the table scroll, keep controls fixed */
.table-wrap:has(> .dt-container) { overflow: visible; }
.dt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.dt-container { width: 100%; padding-bottom: .85rem; }

/* Add horizontal padding to DataTables addon rows (length, search, info, paging) so
   they align with the toolbar inputs in the card-body / card-header above the table.
   Padding mirrors the card-body / card-header padding (DataTables zeroes row margins
   and first/last col padding, so padding insets content cleanly). Excludes the middle
   row that wraps the table to keep the table full-width. */
.card:has(> .card-body + .table-wrap > .dt-container) > .table-wrap > .dt-container > .row:not(:has(.dt-table-scroll)) {
  padding-left: 1.15rem;
  padding-right: 1.15rem;
}
.card:has(> .card-header + .table-wrap > .dt-container) > .table-wrap > .dt-container > .row:not(:has(.dt-table-scroll)) {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}
@media (max-width: 767.98px) {
  .card:has(> .card-body + .table-wrap > .dt-container) > .table-wrap > .dt-container > .row:not(:has(.dt-table-scroll)) {
    padding-left: .85rem;
    padding-right: .85rem;
  }
}

/* Tables with no custom filters have the length/search row as the first row in the
   card, so it sits flush against the line above (card-header border / card edge).
   Give the top controls row top padding so the controls don't crowd that line.
   Filtered tables (custom filter card-body above the table) are excluded. */
.card:has(> .table-wrap > .dt-container):not(:has(> .card-body + .table-wrap > .dt-container)) > .table-wrap > .dt-container > .row:first-child {
  padding-top: .5rem;
}
.card:has(> .tab-content > .tab-pane > .table-wrap > .dt-container):not(:has(> .tab-content > .tab-pane > .card-body + .table-wrap > .dt-container)) > .tab-content > .tab-pane > .table-wrap > .dt-container > .row:first-child {
  padding-top: .5rem;
}

/* Unified small/muted footer + top controls (info, length, search, pager) */
.dt-container .dt-info,
.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-paging {
  font-size: .8125rem;
  color: var(--text-muted-color);
}
.dt-container .dt-info { padding: .25rem 0; line-height: 1.5; }

/* Match the search field & "Show" dropdown to the regular page inputs.
   Inputs inherit `.form-control` / `.form-select` (Bootstrap5 integration adds these);
   we only tweak sizing here so they fit their column and read clearly. */
.dt-container .dt-search input { width: 100%; }
.dt-container .dt-search input::placeholder { color: var(--text-muted-color); }
.dt-container .dt-length select { width: auto; min-width: 65px; }
.dt-container .dt-length { display: flex; align-items: center; gap: .35rem; }
.dt-container .dt-search { display: flex; justify-content: flex-end; align-items: center; }
@media (min-width: 576px) { .dt-container .dt-search input { max-width: 260px; } }

/* Compact, muted pagination matching the footer text */
.dt-container .dt-paging .pagination { flex-wrap: wrap; justify-content: flex-start; }
.dt-container .dt-paging .page-link {
  padding: .2rem .55rem;
  font-size: .8125rem;
  color: var(--text-muted-color);
  border-color: var(--border-color);
  background-color: var(--surface-bg);
  min-width: 32px;
  text-align: center;
}
.dt-container .dt-paging .page-link:hover {
  background: var(--surface-bg);
  color: var(--primary-color);
  border-color: var(--border-color);
}
.dt-container .dt-paging .active .page-link {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.dt-container .dt-paging .disabled .page-link {
  color: var(--text-muted-color);
  opacity: .5;
  background: transparent;
  border-color: var(--border-color);
}
@media (min-width: 768px) {
  .dt-container .dt-paging .pagination { justify-content: flex-end; }
}

/* Hide redundant empty card-footer now that DataTables renders its own info/pager.
   Two cases:
   1) Placeholder-only footer (e.g. brands.html): single empty `.small.text-muted` div.
   2) Footer with empty placeholder + a hidden action block (e.g. students.html /
      products.html #bulkActions `style="display:none"`): visually empty, so hide it too.
   `:has` cannot detect display:none descendants, so case 2 uses an attribute selector
   on the inline `style="display:none"` marker that bulkActions containers carry. */
.card-footer:has(> .small.text-muted:empty:only-child),
.card-footer:has(> .small.text-muted:empty + * > [style*="display:none"]:only-child) {
  display: none !important;
}

/* DataTables Responsive — Sneat-style expand/collapse control.
   A small primary-color badge with a white "+" centered in the control cell (same
   look as the Sneat admin template). The badge keeps the "+" glyph while the row is
   expanded; the expanded child row is a soft-surface panel with the hidden columns
   rendered as a responsive grid of Label: Value pairs. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  position: relative;
  cursor: pointer;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {
  position: absolute !important;
  box-sizing: content-box !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, calc(-50% - 1.8px)) !important;
  width: .85rem !important;
  height: .85rem !important;
  margin: 0 0 0 .375rem !important;
  border: 2px solid var(--surface-bg) !important;
  border-radius: 1rem !important;
  background-color: var(--primary-color) !important;
  box-shadow: 0 0 3px rgba(34, 48, 62, .45) !important;
  content: "+" !important;
  color: #fff !important;
  font-family: "Courier New", Courier, monospace !important;
  font-weight: 500 !important;
  font-size: .9375rem !important;
  line-height: 1em !important;
  text-align: center !important;
}

/* Expanded child row — soft surface, no border striping */
table.dataTable > tbody > tr.child { background-color: var(--surface-2-bg) !important; }
table.dataTable > tbody > tr.child > td {
  padding: .7rem .9rem .9rem !important;
  border: 0 !important;
  box-shadow: inset 0 -1px 0 var(--border-color) !important;
}
/* Grid of Label: Value pairs (responsive auto-fill columns) */
table.dataTable > tbody > tr.child ul.dtr-details {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: .55rem 1.5rem !important;
  padding: .35rem 0 0 !important;
  margin: 0 !important;
  list-style: none !important;
  width: 100% !important;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
  display: flex !important;
  align-items: baseline !important;
  gap: .5rem !important;
  padding: 0 !important;
  border: 0 !important;
}
table.dataTable > tbody > tr.child span.dtr-title {
  font-size: .72rem !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--text-muted-color) !important;
  flex: 0 0 110px !important;
  min-width: 110px !important;
  display: inline-block !important;
}
table.dataTable > tbody > tr.child span.dtr-data {
  color: var(--text-color) !important;
  font-size: .85rem !important;
  flex: 1 1 auto !important;
  word-break: break-word !important;
  display: inline-block !important;
}

/* Avatar */
.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.avatar-sm { width: 30px; height: 30px; }
.avatar-lg { width: 56px; height: 56px; }
.avatar-initials { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-color), #A9BFD6); color: #fff; font-weight: 600; border-radius: 50%; }

/* Product card (POS) */
.product-card { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; border-radius: var(--radius); border: 1px solid transparent; box-shadow: var(--card-shadow); }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: var(--primary-color); }
.product-card .product-thumb { aspect-ratio: 1 / 1; background: var(--surface-2-bg); display: flex; align-items: center; justify-content: center; border-radius: 8px 8px 0 0; overflow: hidden; position: relative; }
.product-card .product-thumb .thumb-text { font-size: 2.6rem; color: var(--primary-color); opacity: .55; }
.product-card .product-thumb .thumb-img { width: 100%; height: 100%; object-fit: cover; }
.product-card .p-name { font-weight: 600; font-size: .86rem; margin: 0; line-height: 1.25; }
.product-card .p-sku { font-size: .7rem; color: var(--text-muted-color); }
.product-card .p-price { font-weight: 700; color: var(--primary-color); }
.product-card .p-stock { font-size: .7rem; }
.product-card.out-of-stock .product-thumb::after { content: "Out of Stock"; position: absolute; inset: 0; background: rgba(15,23,42,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600; }

/* POS layout */
.pos-area { display: grid; grid-template-columns: 1fr 380px; gap: 1.25rem; }
.pos-area > * { min-width: 0; }
@media (max-width: 1199.98px) { .pos-area { grid-template-columns: 1fr 340px; } }
@media (max-width: 991.98px) { .pos-area { grid-template-columns: 1fr; } .pos-cart { position: static !important; } }

.pos-cart { position: sticky; top: calc(var(--header-height) + 1.25rem); align-self: start; }
.pos-cart .client-row { background: var(--surface-2-bg); border-bottom: 1px solid var(--border-color); padding: .75rem 1rem; }
.cart-list { max-height: 360px; overflow-y: auto; }
.cart-item { display: flex; gap: .6rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border-color); align-items: center; }
.cart-item .ci-thumb { width: 46px; height: 46px; border-radius: 8px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 1.2rem; flex-shrink: 0; }
.cart-item .ci-name { font-weight: 600; font-size: .84rem; margin: 0; line-height: 1.2; }
.cart-item .ci-sku { font-size: .68rem; color: var(--text-muted-color); }
.cart-item .ci-body { flex: 1; min-width: 0; }
.cart-item .ci-line { font-weight: 600; font-size: .84rem; white-space: nowrap; }
.cart-item .ci-remove { border: 0; background: transparent; color: var(--text-muted-color); padding: 0 .1rem; line-height: 1; flex-shrink: 0; }
.cart-item .ci-remove:hover { color: var(--bs-danger); }
.qty-control { display: inline-flex; align-items: center; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.qty-control button { width: 26px; height: 28px; background: var(--surface-2-bg); border: 0; color: var(--text-color); }
.qty-control button:hover { background: var(--primary-soft); color: var(--primary-color); }
.qty-control input { width: 36px; height: 28px; border: 0; text-align: center; padding: 0; background: transparent; color: var(--text-color); }
.qty-control input::-webkit-outer-spin-button, .qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-summary { padding: .85rem 1rem; }
.cart-summary .cs-row { display: flex; justify-content: space-between; padding: .25rem 0; font-size: .86rem; color: var(--text-muted-color); }
.cart-summary .cs-total { display: flex; justify-content: space-between; padding-top: .6rem; margin-top: .35rem; border-top: 1px dashed var(--border-color); font-size: 1.1rem; font-weight: 700; color: var(--text-color); }

/* POS paypad */
.paypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.paypad button { padding: .85rem 0; font-weight: 600; border-radius: var(--radius); }

/* Category pills (POS) */
.pos-filter-scroll { overflow-x: auto; }
.pos-filter-pills { display: flex; gap: .5rem; flex-wrap: nowrap; padding-bottom: .25rem; }
.pos-filter-pills .btn { white-space: nowrap; }

/* Empty state */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted-color); }
.empty-state .es-icon { font-size: 3.5rem; opacity: .5; margin-bottom: .5rem; }

/* Skeleton */
.skeleton { background: linear-gradient(90deg, var(--surface-2-bg) 25%, var(--border-color) 37%, var(--surface-2-bg) 63%); background-size: 400% 100%; animation: skeleton 1.4s infinite; border-radius: 6px; height: 14px; }
@keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Cash flow chart (CSS bar charts) */
.css-bar-chart { display: flex; align-items: flex-end; gap: .5rem; height: 200px; padding-top: 1rem; }
.css-bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; justify-content: flex-end; height: 100%; }
.css-bar-chart .bar { width: 60%; background: linear-gradient(180deg, var(--primary-color), rgba(var(--bs-primary-rgb),.4)); border-radius: 6px 6px 0 0; transition: height .4s; min-height: 4px; position: relative; }
.css-bar-chart .bar:hover { background: var(--primary-hover); }
.css-bar-chart .bar-label { font-size: .68rem; color: var(--text-muted-color); }

/* Donut chart SVG helper */
.donut { --donut-size: 140px; width: var(--donut-size); height: var(--donut-size); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.donut .donut-center { position: absolute; text-align: center; }
.donut .donut-center .v { font-size: 1.4rem; font-weight: 700; }
.donut .donut-center .l { font-size: .68rem; color: var(--text-muted-color); }

/* Mini stat list */
.trend-up { color: var(--bs-success); }
.trend-down { color: var(--bs-danger); }

/* List group */
.list-group-item { background-color: var(--surface-bg); border-color: var(--border-color); color: var(--text-color); }
[data-bs-theme="dark"] .list-group-item { background-color: var(--surface-bg); }

/* Timeline */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--border-color); }
.timeline-item { position: relative; padding: 0 0 1rem .75rem; }
.timeline-item::before { content: ""; position: absolute; left: -1.2rem; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary-color); border: 2px solid var(--surface-bg); }

/* Switch / toggle */
.form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); }
.form-switch .form-check-input:checked { background-color: #b57407; border-color: #b57407; }

/* Larger selection checkboxes (row select + select-all) in data tables */
.table [data-row-check],
.table [data-select-all] {
  width: 18px;
  height: 18px;
  margin-top: 0;
  border: 1px solid var(--primary-color);
}

/* Custom white checkmark for checked table selection checkboxes */
.table [data-row-check]:checked,
.table [data-select-all]:checked {
  background-image: url("data:image/svg+xml,%3csvg%20version='1.2'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201280%201244'%20width='1280'%20height='1244'%3e%3ctitle%3e27820-svg%3c/title%3e%3cstyle%3e%20.s0%20{%20fill:%20%23ffffff%20}%20%3c/style%3e%3cg%20id='Layer'%3e%3cpath%20id='Layer'%20class='s0'%20d='m1237.8%201.5c-32%206.4-78.2%2037-144.3%2095.4-30.3%2026.8-54.1%2049.6-106.6%20102.1-84.5%2084.5-142.4%20146-296.4%20315-72.9%2080-116.4%20127.5-143.9%20157-76.2%2081.8-122.6%20126.6-133.2%20128.6-7.5%201.4-35.5-0.3-51.4-3.1-35.1-6.1-86-20.4-165.5-46.5-109.9-36-133.8-42.5-158.5-42.5-12.8%200-13.8%200.1-19.8%202.9-7.6%203.5-13.3%209.6-16.2%2017.2-4.2%2011.2-2.7%2017%2011.5%2045.9%2045.4%2092.1%20125.2%20198.4%20224.5%20298.9%2093.2%2094.3%20173%20153.5%20227.5%20168.7%2010.6%203%2028.2%203.3%2036.9%200.6%208.7-2.7%2017.4-11.3%2022.6-22.4%2012.4-26.6%2056.5-98.9%20133.8-219.8%2049.5-77.2%20103.6-160.5%20297.7-457.5%20161.7-247.4%20240.6-370.5%20286.5-447%2014-23.2%2034-58.9%2034-60.5%200-0.6-3.9-8.4-8.6-17.2-6.2-11.6-9.2-16.3-10.7-16.7-3.5-0.9-12.7-0.5-19.9%200.9z'/%3e%3c/g%3e%3c/svg%3e");
  background-size: 60% 60%;
}

/* Permission matrix */
.perm-matrix th, .perm-matrix td { text-align: center; vertical-align: middle; }
.perm-matrix th:first-child, .perm-matrix td:first-child { text-align: left; }

/* Hover row actions */
.row-actions .icon-btn { opacity: .7; }
.row-actions .icon-btn:hover { opacity: 1; }

/* Color swatch */
.color-swatch { width: 30px; height: 30px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: transform .12s; }
.color-swatch:hover { transform: scale(1.08); }
.color-swatch.active { border-color: var(--primary-color); }

/* Invoice / receipt */
.invoice-paper { background: var(--surface-bg); border-radius: var(--radius); padding: 2rem; box-shadow: var(--card-shadow); }
.invoice-meta-row { display:flex; justify-content: space-between; font-size: .86rem; padding: .3rem 0; }

@media print {
  .sidebar, .app-header, .sidebar-backdrop, .no-print { display: none !important; }
  .main { margin: 0 !important; }
  .app-content { padding: 0 !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 0; }
}