/* ============================================================================
   SME Portal Design System (portal-ds.css) — fiber-themed enhancement layer for
   the customer/admin portal. Loaded AFTER the inline pt-* styles in
   views/portal/partials/head.php, so it elevates the existing components without
   touching their markup or portal.js. Purely additive + CSP-safe (a stylesheet).

   The portal renders on a fixed light theme; brand tokens (--brand red, --ink
   navy, --ok/--warn/--err) come from head.php. Here we add fiber "signal"
   accents + elevation + subtle, GPU-friendly motion (reduced-motion honored).
   ========================================================================== */

:root {
  --pds-signal:   190 95% 45%;   /* cyan  */
  --pds-signal-2: 212 88% 52%;   /* azure */
  --pds-e1: 0 1px 2px rgba(19,33,46,.06), 0 1px 3px rgba(19,33,46,.08);
  --pds-e2: 0 6px 18px rgba(19,33,46,.08), 0 2px 6px rgba(19,33,46,.05);
  --pds-e3: 0 16px 40px rgba(19,33,46,.14), 0 4px 10px rgba(19,33,46,.06);
  --pds-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---- 1. Auth screen — premium aurora backdrop + glass card ---------------- */
body.pt-auth {
  background:
    radial-gradient(42% 50% at 80% 12%, hsl(var(--pds-signal) / .28), transparent 70%),
    radial-gradient(48% 55% at 12% 22%, hsl(var(--pds-signal-2) / .26), transparent 72%),
    radial-gradient(60% 60% at 50% 110%, hsl(354 70% 30% / .35), transparent 70%),
    linear-gradient(135deg, #0a1322, #1b2942) !important;
}
body.pt-auth::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(hsl(var(--pds-signal) / .35) 1px, transparent 1.6px);
  background-size: 46px 46px; opacity: .12;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000, transparent 75%);
  mask-image: radial-gradient(120% 90% at 70% 10%, #000, transparent 75%);
}
body.pt-auth .pt-card {
  position: relative; z-index: 1;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
body.pt-auth .pt-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 1rem 1rem 0 0;
  background: linear-gradient(90deg, var(--brand), hsl(var(--pds-signal-2)));
}

/* ---- 2. App header — fiber accent under the top bar ----------------------- */
.pt-top { box-shadow: var(--pds-e1); }
.pt-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, hsl(var(--pds-signal) / .6), hsl(var(--pds-signal-2) / .6), transparent);
}
.pt-top { position: sticky; }   /* head.php already sets sticky; keep ::after anchored */

/* ---- 3. Stat tiles — elevation, hover lift, gradient number, icon glow ---- */
.pt-tile {
  box-shadow: var(--pds-e1);
  transition: transform var(--pds-ease) .25s, box-shadow var(--pds-ease) .25s, border-color var(--pds-ease) .25s;
  position: relative; overflow: hidden;
}
.pt-tile::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--brand), hsl(var(--pds-signal-2)));
  opacity: 0; transition: opacity var(--pds-ease) .25s;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pt-tile:hover { transform: translateY(-3px); box-shadow: var(--pds-e3); }
  .pt-tile:hover::before { opacity: 1; }
}
.pt-tile .n {
  background: linear-gradient(180deg, var(--ink), hsl(214 30% 40%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.pt-tile-ic {
  background: linear-gradient(150deg, rgba(179,18,42,.1), hsl(var(--pds-signal-2) / .14)) !important;
  box-shadow: inset 0 0 0 1px rgba(179,18,42,.08);
}

/* ---- 4. Panels + section headers ----------------------------------------- */
.pt-panel { box-shadow: var(--pds-e1); transition: box-shadow var(--pds-ease) .25s; }
.pt-phead { letter-spacing: .005em; }
.pt-phead svg { filter: drop-shadow(0 1px 2px rgba(179,18,42,.25)); }

/* ---- 5. Buttons — depth + hover lift + sheen ----------------------------- */
.pt-btn {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 4px 12px rgba(179,18,42,.22);
  transition: transform var(--pds-ease) .2s, box-shadow var(--pds-ease) .2s, filter var(--pds-ease) .2s;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pt-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(179,18,42,.3); filter: brightness(1.04); }
}
.pt-btn--ghost {
  background: #fff; box-shadow: var(--pds-e1);
}
@media (hover: hover) { .pt-btn--ghost:hover { background: #fff; border-color: var(--brand); color: var(--brand); } }
/* Disabled buttons: one consistent semantic look — no inline opacity hacks. */
.pt-btn:disabled, .pt-btn[disabled] {
  opacity: .55; cursor: not-allowed; transform: none !important;
  box-shadow: none; filter: none;
}

/* ---- 6. Tables — premium header + row hover ------------------------------ */
table.pt-tbl thead th {
  text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; color: var(--muted);
  background: linear-gradient(180deg, #f7f9fc, #eef2f7); border-bottom: 1px solid var(--line);
}
table.pt-tbl tbody tr { transition: background var(--pds-ease) .15s; }
@media (hover: hover) { table.pt-tbl tbody tr:hover { background: hsl(var(--pds-signal-2) / .05); } }

/* ---- 7. Sub-navigation — active gets the fiber gradient ------------------ */
.pt-subnav a { transition: color var(--pds-ease) .2s, border-color var(--pds-ease) .2s, background var(--pds-ease) .2s, transform var(--pds-ease) .2s; }
.pt-subnav a.is-active {
  background: linear-gradient(135deg, var(--brand), hsl(354 70% 32%)) !important;
  border-color: transparent !important; box-shadow: 0 4px 12px rgba(179,18,42,.25);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pt-subnav a:not(.is-active):hover { transform: translateY(-1px); }
}

/* ---- 8. Quota bars — gradient fill + soft sheen -------------------------- */
.pt-bar { background: #e9eef4; box-shadow: inset 0 1px 2px rgba(19,33,46,.08); }
.pt-bar-fill { position: relative; background-image: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0)); }

/* ---- 9. Cards (subscription, etc.) hover lift ---------------------------- */
.pt-sub-card { transition: box-shadow var(--pds-ease) .25s, transform var(--pds-ease) .25s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pt-sub:not(.pt-sub--toggle) .pt-sub-card:hover { box-shadow: var(--pds-e2); }
}

/* ---- 10. Inputs — refined focus ----------------------------------------- */
input[type=text]:focus, input[type=password]:focus, input[type=tel]:focus,
input[type=email]:focus, input[type=number]:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(179,18,42,.12);
}

/* ---- 11. Mono code blocks (credentials) --------------------------------- */
.pt-mono { background: linear-gradient(180deg, #f6f9fc, #eef2f7); }

/* ---- 12. Tile entrance — gentle staggered fade-up on load (CSS-only, so no
        JS and no hidden-content risk; reduced-motion shows tiles instantly) --- */
@media (prefers-reduced-motion: no-preference) {
  .pt-grid > .pt-tile { animation: pds-tile-in .5s var(--pds-ease) both; }
  .pt-grid > .pt-tile:nth-child(2) { animation-delay: .05s; }
  .pt-grid > .pt-tile:nth-child(3) { animation-delay: .10s; }
  .pt-grid > .pt-tile:nth-child(4) { animation-delay: .15s; }
  .pt-grid > .pt-tile:nth-child(5) { animation-delay: .20s; }
  .pt-grid > .pt-tile:nth-child(6) { animation-delay: .25s; }
  .pt-grid > .pt-tile:nth-child(n+7) { animation-delay: .30s; }
}
@keyframes pds-tile-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- 13. Inline-SVG charts (donut + legend) ----------------------------- */
.pds-chart {
  display: flex; align-items: center; gap: clamp(1rem, 4vw, 2.5rem); flex-wrap: wrap; justify-content: center;
}
.pds-donut { flex: 0 0 auto; max-width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .pds-donut { animation: pds-donut-in .6s var(--pds-ease) both; transform-origin: center; }
  .pds-donut circle[stroke-dasharray] { transition: stroke-width .2s var(--pds-ease); }
}
@keyframes pds-donut-in { from { opacity: 0; transform: scale(.92) rotate(-8deg); } to { opacity: 1; transform: none; } }
.pds-donut-n { font-size: 1.7rem; font-weight: 800; fill: var(--ink); }
.pds-donut-l { font-size: .72rem; fill: var(--muted); }
.pds-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; min-width: 170px; }
.pds-legend li { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.pds-legend-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.pds-legend-label { color: var(--ink); }
.pds-legend-val { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Vertical bar chart (payment history) */
.pds-bars { width: 100%; height: auto; display: block; }
.pds-bars rect { transition: opacity .2s var(--pds-ease); }
@media (hover: hover) { .pds-bars:hover rect { opacity: .6; } .pds-bars rect:hover { opacity: 1; } }
.pds-bar-v { font-size: 11px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.pds-bar-l { font-size: 11px; fill: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .pds-bars { animation: pds-donut-in .55s var(--pds-ease) both; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-tile, .pt-btn, .pt-subnav a, .pt-sub-card, table.pt-tbl tbody tr { transition: none; }
}

/* === Live chat (customer Support page + admin conversation view) ============ */
.lc-wrap{max-width:820px;margin:0 auto}
.lc-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.lc-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;padding:.25rem .6rem;border-radius:999px}
.lc-pill::before{content:'';width:.5rem;height:.5rem;border-radius:50%}
.lc-pill.is-online{background:rgba(22,163,74,.12);color:#15803d}.lc-pill.is-online::before{background:#16a34a}
.lc-pill.is-offline{background:rgba(120,120,120,.14);color:var(--muted)}.lc-pill.is-offline::before{background:#9ca3af}
.lc-offline{border:1px solid var(--line);background:#fff;border-radius:.7rem;padding:.9rem 1rem;margin-bottom:.7rem}
.lc-offline h3{margin:0 0 .3rem;font-size:1rem}
.lc-hours{font-size:.82rem;color:var(--muted);margin:.1rem 0 .7rem;line-height:1.45}
.lc-hours a{color:var(--brand,#1d4ed8);font-weight:600}
.lc-ticket-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;text-decoration:none}
.lc-ticket-btn svg{width:16px;height:16px}
.lc-count{font-weight:700;color:var(--brand)}
.lc-log{height:min(56vh,440px);overflow-y:auto;border:1px solid var(--line);border-radius:.7rem;background:#fbfbfc;padding:.8rem;display:flex;flex-direction:column;gap:.5rem}
.lc-sep{align-self:center;font-size:.72rem;color:var(--muted);background:#eef0f3;border-radius:999px;padding:.15rem .6rem;margin:.3rem 0}
.lc-msg{max-width:80%;padding:.5rem .7rem;border-radius:.8rem;font-size:.92rem;line-height:1.4;position:relative;word-wrap:break-word;overflow-wrap:anywhere}
.lc-msg .lc-meta{display:block;font-size:.68rem;opacity:.7;margin-top:.25rem}
.lc-msg.is-customer{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:.2rem}
.lc-msg.is-admin{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:.2rem}
.lc-empty{margin:auto;color:var(--muted);text-align:center;font-size:.9rem}
.lc-form{display:flex;gap:.5rem;margin-top:.7rem}
.lc-form textarea{flex:1;resize:none;min-height:2.6rem;max-height:8rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:.6rem;font:inherit}
.lc-form textarea:disabled{background:#f3f4f6;color:var(--muted)}
.lc-hint{font-size:.72rem;color:var(--muted);margin:.3rem 0 0}
@media (max-width:600px){ .lc-msg{max-width:90%} }
.lc-att{display:inline-block;margin-top:.35rem}
.lc-att-img{max-width:220px;max-height:170px;border-radius:.4rem;display:block}
.lc-att-file{font-size:.85rem;text-decoration:underline;color:inherit;word-break:break-all}
.lc-msg.is-customer .lc-att-file{color:#fff}
.lc-file-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--line);border-radius:.6rem;padding:0 .7rem;background:#fff;font-size:1.1rem;line-height:1}
.lc-file-btn input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.lc-typing{font-size:.8rem;color:var(--muted);font-style:italic;margin:.3rem 0 0}
.lc-presence{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;text-transform:capitalize;color:var(--muted)}
.lc-presence::before{content:'';width:.45rem;height:.45rem;border-radius:50%;background:#9ca3af}
.lc-presence.is-online::before{background:#16a34a}
.lc-presence.is-away::before{background:#f59e0b}

/* === Floating live-chat widget (customer) ================================== */
.lc-widget{position:fixed;right:1rem;bottom:1rem;z-index:1200}
.lc-widget[hidden]{display:none}
.lc-launch{position:relative;width:3.4rem;height:3.4rem;border-radius:50%;border:0;background:var(--brand);color:#fff;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}
.lc-launch svg{width:24px;height:24px}
.lc-launch:hover{filter:brightness(1.06)}
.lc-launch:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.lc-badge{position:absolute;top:-.2rem;right:-.2rem;min-width:1.2rem;height:1.2rem;padding:0 .25rem;border-radius:999px;background:#dc2626;color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.lc-online{position:absolute;bottom:.1rem;right:.1rem;width:.85rem;height:.85rem;border-radius:50%;background:#9ca3af;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.05)}   /* grey = support offline */
.lc-online.is-online{background:#16a34a}   /* green = online, only during business hours */
.lc-popup{position:absolute;right:0;left:auto;bottom:4.1rem;width:min(92vw,360px);max-height:min(70vh,520px);background:#fff;border:1px solid var(--line);border-radius:.8rem;box-shadow:0 12px 40px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden}
.lc-popup[hidden]{display:none}   /* the flex display above otherwise overrides the [hidden] attr → panel stuck open */
.lc-pop-head{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);font-weight:700}
.lc-pop-head svg{width:18px;height:18px;vertical-align:middle}
.lc-pop-x{margin-left:auto;background:none;border:0;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--muted)}
.lc-pop-x:hover{color:var(--ink)}
.lc-popup .lc-log{flex:1;height:auto;border:0;border-radius:0;background:#fbfbfc}
.lc-popup .lc-form{padding:.5rem .6rem;margin:0;border-top:1px solid var(--line)}
.lc-popup .lc-offline{margin:.5rem .6rem 0;background:#fff7ed}
.lc-popup .lc-hours{margin:.5rem .6rem 0;padding:.4rem .55rem;background:#f8fafc;border:1px solid var(--line);border-radius:.5rem;font-size:.76rem}
.lc-popup .lc-typing{margin:.2rem .8rem 0}
@media (max-width:480px){ .lc-widget{right:.5rem;bottom:.5rem} .lc-popup{width:94vw} }
@media (prefers-reduced-motion: no-preference){ .lc-popup{animation:lc-pop .15s ease-out} @keyframes lc-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} }

/* === Modern interaction polish (2026-07) ===================================
   CSS-only niceties: stable scrollbar gutter (no layout shift), brand-tinted
   form controls + text selection, a visible keyboard-focus ring on actionable
   elements (form fields keep their own focus treatment), balanced headings,
   tactile button press, and smooth in-page scrolling for motion-OK users. */
html { scrollbar-gutter: stable; color-scheme: light; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: rgba(179, 18, 42, .14); }
input, select, textarea, progress { accent-color: var(--brand); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
h1, h2, .pt-h { text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .pt-btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
}