/**
 * assets/css/premium.css
 * ---------------------------------------------------------------------
 * Shared finishing layer for every page (customer, admin, technician).
 * Loaded last in <head>, after each page's own <style>, so it refines
 * the look without changing any layout: typography, focus states,
 * hover feedback, shadows, scrollbars and selection.
 *
 * Brand: navy #023047 · teal #209EBB · sky #8ECAE6 · orange #FC8500
 * Font:  Inter (loaded by each page)
 * ---------------------------------------------------------------------
 */

:root {
  --pm-ring: 0 0 0 3px rgba(32, 158, 187, 0.22);
  --pm-shadow-sm: 0 1px 2px rgba(2, 48, 71, 0.04), 0 1px 3px rgba(2, 48, 71, 0.06);
  --pm-shadow-md: 0 2px 4px rgba(2, 48, 71, 0.04), 0 8px 24px rgba(2, 48, 71, 0.08);
  --pm-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- Typography ---- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';   /* Inter: open digits, cleaner 1 */
}
h1, h2, h3 { letter-spacing: -0.022em; }
h4, h5, h6 { letter-spacing: -0.01em; }
input, select, textarea, button { font-family: inherit; }

/* Money and counts line up in tables, totals and stat cards */
table, .total, .val, .price, .item-price, .sum-total, .stat-value, .stat-num { font-variant-numeric: tabular-nums; }

::selection { background: rgba(32, 158, 187, 0.22); color: #023047; }

/* ---- Form fields: one consistent focus state ---- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select, textarea {
  transition: border-color .18s var(--pm-ease), box-shadow .18s var(--pm-ease), background-color .18s var(--pm-ease);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
select:focus, textarea:focus {
  border-color: #209EBB !important;
  box-shadow: var(--pm-ring) !important;
  outline: none;
}
input[type=checkbox], input[type=radio] { accent-color: #209EBB; }
::placeholder { color: #8A9FAC; opacity: 1; }

/* Keyboard users always see where they are (mouse clicks don't show a ring) */
a:focus-visible, button:focus-visible, [role=button]:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--pm-ring);
  border-radius: 8px;
}

/* ---- Buttons: gentle lift on hover, press-in on click ---- */
.btn, button.btn, a.btn, .btn-primary, .btn-orange, .btn-outline, .btn-success, .btn-danger,
.btn-checkout, .btn-shop, .btn-add, .sn-btn {
  transition: transform .18s var(--pm-ease), box-shadow .18s var(--pm-ease), background-color .18s var(--pm-ease), border-color .18s var(--pm-ease), color .18s var(--pm-ease), filter .18s var(--pm-ease);
}
@media (hover: hover) {
  .btn:not(:disabled):hover, .btn-primary:not(:disabled):hover, .btn-orange:not(:disabled):hover,
  .btn-checkout:not(:disabled):hover, .btn-shop:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 48, 71, 0.14);
  }
}
.btn:not(:disabled):active, .btn-primary:not(:disabled):active, .btn-orange:not(:disabled):active,
.btn-checkout:not(:disabled):active { transform: translateY(0); box-shadow: none; }
button:disabled, .btn:disabled { cursor: not-allowed; }

/* ---- Links ---- */
a { text-underline-offset: 3px; }

/* ---- Images load softly instead of popping in ---- */
img { image-rendering: auto; }

/* ---- Scrollbars (desktop) ---- */
@media (hover: hover) {
  * { scrollbar-width: thin; scrollbar-color: rgba(2, 48, 71, 0.22) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(2, 48, 71, 0.18); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(2, 48, 71, 0.32); background-clip: padding-box; border: 2px solid transparent; }
}

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

@media print {
  * { box-shadow: none !important; }
}

/* Phones: inputs at 16px so iPhone Safari doesn't zoom the page when a field is tapped */
@media (max-width: 768px) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select,
  textarea { font-size: 16px !important; }
}

/* Brand chips + "Show more" on the AC Units pages */
.bchips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.bchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 100px; border: 1.5px solid #E2EBF3; background: #fff; color: #023047; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: all .2s; }
.bchip span { font-size: 11px; font-weight: 600; color: #5A7A8C; background: #EEF2F6; border-radius: 20px; padding: 1px 7px; }
.bchip:hover { border-color: #209EBB; color: #209EBB; }
.bchip.active { background: #023047; border-color: #023047; color: #fff; }
.bchip.active span { background: rgba(255,255,255,.18); color: #fff; }
.sm-hidden { display: none !important; }
.show-more-wrap { text-align: center; margin-top: 20px; }
.show-more-btn { padding: 11px 26px; border-radius: 100px; border: 1.5px solid #209EBB; background: #fff; color: #209EBB; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .2s; }
.show-more-btn:hover { background: #209EBB; color: #fff; }
@media (max-width: 768px) {
  .bchips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 12px; padding: 2px 14px 4px; scrollbar-width: none; }
  .bchips::-webkit-scrollbar { display: none; }
  .bchip { padding: 7px 12px; font-size: 12.5px; }
}

/* ---------------------------------------------------------------
   Product card (includes/product-card.php) — same everywhere
   --------------------------------------------------------------- */
.pcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(2,48,71,.08); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(2,48,71,.04); transition: box-shadow .25s, transform .25s, border-color .25s; min-width: 0; }
.pcard[hidden] { display: none; }
@media (hover: hover) { .pcard:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 12px 32px rgba(2,48,71,.10); } }
.pcard-img { position: relative; height: 176px; background: #fff; border-bottom: 1px solid rgba(2,48,71,.06); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: contain; padding: 26px 18px 14px; mix-blend-mode: multiply; transition: transform .35s; }
@media (hover: hover) { .pcard:hover .pcard-img img { transform: scale(1.04); } }
.pcard-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(160deg, #F4FAFC 0%, #E8F4F8 100%); color: #8ECAE6; }
.pcard-ph i { font-size: 38px; }
.pcard-ph span { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #6FA9BF; }
.pcard-flag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 20px; letter-spacing: .2px; z-index: 2; }
.pcard-flag.free { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.pcard-flag.out { background: #023047; color: #fff; }
.pcard.is-out .pcard-img img, .pcard.is-out .pcard-ph { opacity: .45; filter: grayscale(.6); }
.pcard-heart { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: #C3D2DB; box-shadow: 0 2px 8px rgba(2,48,71,.10); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: transform .15s, color .15s; }
.pcard-heart:hover { transform: scale(1.08); color: #EF4444; }
.pcard-heart.active, .pcard-heart.in-wishlist, .pcard-heart.wishlisted { color: #EF4444; }
.pcard-body { display: flex; flex-direction: column; flex: 1; padding: 14px 14px 16px; }
.pcard-brand { font-size: 10.5px; font-weight: 700; color: #5A7A8C; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 3px; }
.pcard-name { font-size: 13.5px; font-weight: 700; color: #023047; line-height: 1.35; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; margin-bottom: 8px; }
.pcard-name::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pcard-specs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.pcard-specs span { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: #EEF6F9; color: #1B7F97; }
.pcard-specs span.inv { background: #FFF7ED; color: #C2410C; }
.pcard-specs span i { font-size: 9px; }
.pcard-rating { font-size: 11.5px; font-weight: 600; color: #B45309; margin: -2px 0 10px; }
.pcard-rating span { color: #8A9FAC; font-weight: 500; }
.pcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard-price { font-size: 17px; font-weight: 800; color: #023047; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcard-add { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border: none; border-radius: 10px; background: #209EBB; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .2s, transform .15s; white-space: nowrap; }
.pcard-add:hover { background: #023047; }
.pcard-add:active { transform: scale(.97); }
.pcard-add:disabled { background: #E2EBF3; color: #8A9FAC; cursor: not-allowed; }
.pcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
@media (max-width: 600px) {
  .pcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard { border-radius: 14px; }
  .pcard-img { height: 124px; }
  .pcard-img img { padding: 16px 10px 8px; }
  .pcard-flag { top: 7px; left: 7px; font-size: 10px; padding: 3px 7px; }
  .pcard-heart { width: 28px; height: 28px; font-size: 12px; top: 6px; right: 6px; }
  .pcard-body { padding: 10px 10px 12px; }
  .pcard-name { font-size: 12.5px; min-height: 33px; margin-bottom: 6px; }
  .pcard-specs { margin-bottom: 8px; }
  .pcard-price { font-size: 14.5px; }
  .pcard-foot { flex-direction: column; align-items: stretch; gap: 7px; }
  .pcard-add { padding: 8px 10px; }
}
.pcard-grid > .empty-state { grid-column: 1 / -1; }

/* Technician job pages — header (same look as the technician dashboard) */
.jobbar { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 24px; background: rgba(255,255,255,.88); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border-bottom: 1px solid #E2EBF3; }
.jobbar-back { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; border: 1.5px solid #E2EBF3; background: #fff; color: #023047; display: flex; align-items: center; justify-content: center; font-size: 15px; text-decoration: none; transition: border-color .2s, color .2s; }
.jobbar-back:hover { border-color: #209EBB; color: #209EBB; }
.jobbar-title { min-width: 0; }
.jobbar-kind { font-size: 10.5px; font-weight: 700; color: #209EBB; text-transform: uppercase; letter-spacing: 1.2px; }
.jobbar-ref { font-size: 16px; font-weight: 800; color: #023047; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jobbar-brand { margin-left: auto; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #023047, #209EBB); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
@media (max-width: 768px) { .jobbar { padding: 0 14px; height: 60px; } .jobbar-ref { font-size: 15px; } }

/* Loading skeletons (shimmer placeholders while content loads) */
.skel { position: relative; overflow: hidden; background: #EDF2F6; border-radius: 10px; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: skelShimmer 1.3s infinite; }
@keyframes skelShimmer { to { transform: translateX(100%); } }
.skel-rows { padding: 6px 0; }
.skel-rows .skel { height: 13px; margin: 9px 0; }
.skel-cards { display: grid; gap: 12px; }
.skel-cards .skel { height: 92px; border-radius: 14px; }
.skel-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.skel-tiles .skel { height: 210px; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* Empty states — the icon sits in a soft brand-coloured circle */
html body .empty-state > i:first-child,
html body .empty-state > .fas:first-child {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(160deg, #F2F9FB 0%, #E2F1F6 100%);
  color: #209EBB; font-size: 30px !important; opacity: 1 !important;
  margin: 0 auto 16px !important; box-shadow: inset 0 0 0 6px rgba(255,255,255,.7);
}
html body .empty-state { line-height: 1.6; }
html body .empty-state p:first-of-type { color: #023047; }

/* Admin list search + pager */
.adm-search { position: relative; display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; max-width: 520px; margin: 0 0 16px; }
.adm-search > i { position: absolute; left: 14px; color: #8A9FAC; font-size: 13px; pointer-events: none; }
.adm-search input[type=search] { flex: 1; min-width: 0; padding: 11px 36px 11px 38px; border: 1.5px solid #E2EBF3; border-radius: 12px; background: #fff; font-size: 13.5px; color: #023047; outline: none; transition: border-color .2s, box-shadow .2s; }
.adm-search input[type=search]:focus { border-color: #209EBB; box-shadow: 0 0 0 3px rgba(32,158,187,.14); }
.adm-search input[type=search]::-webkit-search-cancel-button { display: none; }
.adm-search-clear { position: absolute; right: 96px; color: #8A9FAC; font-size: 13px; padding: 4px; }
.adm-search button { padding: 11px 18px; border: none; border-radius: 12px; background: #209EBB; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; flex-shrink: 0; }
.adm-search button:hover { background: #023047; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; }
.pager-info { font-size: 12.5px; color: #5A7A8C; }
.pager-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-btn { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1.5px solid #E2EBF3; background: #fff; color: #023047; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pager-btn:hover { border-color: #209EBB; color: #209EBB; }
.pager-btn.on { background: #023047; border-color: #023047; color: #fff; }
.pager-btn.off { opacity: .4; pointer-events: none; }
.pager-gap { color: #8A9FAC; padding: 0 4px; }
.search-note { font-size: 13px; color: #5A7A8C; margin: -6px 0 14px; }
.search-note strong { color: #023047; }

/* Install-app buttons stay hidden until the browser can install (pwa.js) */
[data-install-app][hidden] { display: none !important; }