/* =========================================================
   POS Admin Template — Page-specific styles
   ========================================================= */

/* Dashboard revenue card revenue height */
.revenue-card .css-bar-chart { height: 220px; }
.top-products .rank { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2-bg); color: var(--text-muted-color); font-size: .72rem; font-weight: 700; display:inline-flex; align-items:center; justify-content:center; }
.top-products .rank.top1 { background: var(--bs-warning); color: #4a3500; }
.top-products .rank.top2 { background: var(--surface-2-bg); color: var(--text-color); }
.top-products .rank.top3 { background: #cd7f32; color: #fff; }

/* POS brand-strip */
.pos-brand-strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.pos-brand-strip .brand-pill { padding: .35rem .85rem; border-radius: var(--radius); background: var(--surface-2-bg); font-size: .78rem; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, color .15s; }
.pos-brand-strip .brand-pill.active { background: var(--primary-color); color:#fff; border-color: var(--primary-color); }

/* POS product grid */
.pos-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; }

/* Payment method cards */
.pay-method { border: 1px solid transparent; border-radius: var(--radius); padding: .9rem .6rem; text-align: center; cursor: pointer; transition: transform .12s, box-shadow .15s, background-color .15s; background: var(--surface-bg); box-shadow: var(--card-shadow); }
.pay-method i { font-size: 1.5rem; color: #b57407; }
.pay-method img { height: 1.5rem; width: auto; }
.pay-method .pm-name { font-size: .78rem; font-weight: 600; margin-top: .35rem; }
.pay-method:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.pay-method.active { border-color: var(--primary-color); background: var(--primary-soft); }
.pay-method.active i { color: var(--primary-color); }
.pay-method.disabled { opacity: .4; pointer-events: none; cursor: not-allowed; }

/* Login split page styling already in layout */

/* Settings sticky nav */
.settings-nav { position: sticky; top: calc(var(--header-height) + 1.25rem); }
@media (max-width: 991.98px) { .settings-nav { position: static; } }

/* Calendar (simple) */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell { aspect-ratio: 1; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .4rem; font-size: .78rem; background: var(--surface-bg); min-height: 64px; transition: background-color .15s; }
.cal-cell.muted { background: var(--surface-2-bg); color: var(--text-muted-color); }
.cal-cell.today { border-color: var(--primary-color); }
.cal-head { text-align: center; font-weight: 600; font-size: .76rem; color: var(--text-muted-color); padding: .35rem 0; }

/* Barcode */
.barcode-fake { background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px, #111 4px 7px, #fff 7px 8px, #111 8px 12px, #fff 12px 13px); height: 64px; border-radius: 4px; }

/* Profile cover */
.profile-cover { height: 130px; background: linear-gradient(135deg, var(--primary-color), #A9BFD6); border-radius: var(--radius); }

/* Misc helper */
.cursor-pointer { cursor: pointer; }
.fw-medium { font-weight: 500; }
.text-xs { font-size: .72rem; }
.text-sm { font-size: .82rem; }
.min-w-180 { min-width: 180px; }

/* Auth */
.auth-otp {
   display: flex;
   gap: .5rem;
   justify-content: center;
}
.auth-otp-input {
   width: 48px;
   height: 48px;
   padding: 0;
   font-size: 1.35rem;
   font-weight: 600;
   text-align: center;
   border-color: rgba(0, 52, 99, .5);
}
.auth-otp-input:focus {
   border-color: var(--bs-primary);
   box-shadow: 0 0 0 .2rem var(--primary-soft);
}
[data-bs-theme="dark"] .auth-otp-input {
   border-color: rgba(148, 163, 184, .65);
}
[data-bs-theme="dark"] .auth-otp-input:focus {
   border-color: var(--bs-primary);
   box-shadow: 0 0 0 .2rem var(--primary-soft);
}

@media (max-width: 400px) {
   .auth-otp { gap: .4rem; }
   .auth-otp-input { width: 40px; height: 40px; }
}

.form-status-host .alert { padding: .55rem .8rem; margin-bottom: 0; }
.form-status-host .alert .alert-heading { margin-bottom: .2rem; font-size: .8rem; font-weight: 600; }
.form-status-host .alert .alert-heading i { margin-right: .15rem; }
.form-status-host .alert hr { margin: .3rem 0; border-top-color: currentColor; opacity: .2; }
.form-status-host .alert p.small { margin: 0; line-height: 1.35; font-size: .9rem; }

.form-status-host.compact .alert { padding: .3rem .6rem; font-size: .78rem; }
.form-status-host.compact .alert .alert-heading { margin-bottom: .1rem; }
.form-status-host.compact .alert hr { margin: .2rem 0; }

.alert-success { --bs-alert-color: #0f5132; --bs-alert-bg: #d1e7dd; --bs-alert-border-color: #badbcc; }
.alert-danger  { --bs-alert-color: #842029; --bs-alert-bg: #f8d7da; --bs-alert-border-color: #f5c2c7; }
.alert-info    { --bs-alert-color: #055160; --bs-alert-bg: #cff4fc; --bs-alert-border-color: #b6effb; }
.alert-warning { --bs-alert-color: #664d03; --bs-alert-bg: #fff3cd; --bs-alert-border-color: #ffecb5; }
.alert-primary { --bs-alert-color: #084298; --bs-alert-bg: #cfe2ff; --bs-alert-border-color: #b6d4fe; }

/* Profile page header
   ---------------------------------------------------------------------------
   Structure follows the Sneat `pages-profile-user.html` profile header: a banner
   image with the avatar overlapping it, the name and a row of inline facts
   beneath. Ported rather than linked because the rules are 26 lines and the
   template's own stylesheet is not part of this build.

--surface-bg is this project's card background (bootstrap-overrides.css), and
   stands in for the template's --bs-paper-bg. */
.user-profile-header-banner img {
  block-size: 250px;
  inline-size: 100%;
  object-fit: cover;
}

.user-profile-header {
  margin-block-start: -2rem;
}

.user-profile-header .user-profile-img {
  border: 5px solid var(--surface-bg, #fff);
  inline-size: 120px;
}

/* Responsive style */
@media (max-width: 767.98px) {
  .user-profile-header-banner img {
    block-size: 150px;
  }
  .user-profile-header .user-profile-img {
    inline-size: 100px;
  }
}