/* File: public/assets/css/app.css */

/* =========================
   Dark Theme Variables
========================= */
:root{
  color-scheme: dark;
  --bg: #0b1220;           /* deep navy */
  --panel: #0f1b2d;        /* darker panel */
  --panel-2: #0c1728;      /* alt panel */
  --border: #1f2f47;       /* subtle border */
  --text: #e6eefc;         /* main text */
  --muted: #9fb2d6;        /* secondary text */
  --accent: #19c37d;       /* green */
  --accent-2: #1b6cff;     /* blue */
  --danger: #ff4d6d;       /* red/pink */
  --warn: #ffb020;         /* amber */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 12px;
  --radius-sm: 10px;
  --pad: 14px;
  --max: 1200px;
  --focus: 0 0 0 3px rgba(25,195,125,.18);
}

select { color-scheme: dark; }
select option, select optgroup {
  background-color: var(--panel);
  color: var(--text);
}
select option:disabled { color: var(--muted); }

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(27,108,255,.12), transparent 55%),
              radial-gradient(900px 600px at 80% 0%, rgba(25,195,125,.10), transparent 50%),
              var(--bg);
  color: var(--text);
  line-height: 1.45;
}

/* =========================
   Links / Text
========================= */
a{
  color: var(--accent-2);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }
strong{ color: var(--text); }

h1,h2,h3{
  margin: 0 0 10px;
  line-height: 1.2;
}
p{ color: var(--muted); }

code, pre{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--text);
}

/* =========================
   Layout Helpers
========================= */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shadow);
}

.card-soft{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
}

/* =========================
   Header / Nav
========================= */
header{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,.75);
  border-bottom: 1px solid var(--border);
}

header > .bar{
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  letter-spacing: .3px;
}

.brand-badge{
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 4px rgba(25,195,125,.12);
}

nav{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
}

.nav-link{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--text);
  background: transparent;
}
.nav-link:hover{
  border-color: var(--border);
  background: rgba(255,255,255,.03);
  text-decoration: none;
}

/* Badge (notifications) */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(27,108,255,.18);
  border: 1px solid rgba(27,108,255,.35);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
}

/* =========================
   Forms
========================= */
label{
  color: var(--muted);
  font-size: 14px;
}

input, select, textarea{
  width: 100%;
  background: rgba(255,255,255,.03);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}

textarea{ min-height: 110px; resize: vertical; }

input::placeholder, textarea::placeholder{
  color: rgba(159,178,214,.65);
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(25,195,125,.55);
  box-shadow: var(--focus);
}

.form-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 14px;
}
.form-row{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.form-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* =========================
   Buttons
========================= */
button, .btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}
button:hover, .btn:hover{
  background: rgba(255,255,255,.06);
}

.btn-primary{
  border-color: rgba(25,195,125,.55);
  background: linear-gradient(135deg, rgba(25,195,125,.25), rgba(27,108,255,.18));
}
.btn-primary:hover{
  background: linear-gradient(135deg, rgba(25,195,125,.33), rgba(27,108,255,.22));
}

.btn-danger{
  border-color: rgba(255,77,109,.55);
  background: rgba(255,77,109,.12);
}
.btn-danger:hover{
  background: rgba(255,77,109,.18);
}

.btn-link{
  border: 1px solid transparent;
  background: transparent;
  color: var(--accent-2);
  padding: 10px 6px;
}
.btn-link:hover{
  text-decoration: underline;
  background: transparent;
}

/* =========================
   Tables
========================= */
.table-wrap{
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}

table{
  width: 100%;
  border-collapse: collapse;
  min-width: 740px;
}

th, td{
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(31,47,71,.6);
  vertical-align: top;
}

th{
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
}

tr:hover td{
  background: rgba(255,255,255,.02);
}

/* =========================
   Alerts (flash)
========================= */
.alert{
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  margin-bottom: 12px;
}
.alert-success{
  border-color: rgba(25,195,125,.55);
  background: rgba(25,195,125,.10);
}
.alert-error{
  border-color: rgba(255,77,109,.55);
  background: rgba(255,77,109,.10);
}

/* =========================
   Responsive
========================= */
@media (max-width: 900px){
  .form-grid{ grid-template-columns: 1fr; }
  header > .bar{ flex-direction: column; align-items:flex-start; }
  nav{ width:100%; }
}

.finance-kpis{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin:14px 0}
.dashboard-finance{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:0 0 14px}
.dashboard-finance span{display:block;color:var(--muted);font-size:13px;margin-bottom:7px}
.dashboard-finance strong{display:block;font-size:24px}
.dashboard-finance small{display:block;color:var(--muted);margin-top:7px}
.metric-card{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:0 12px 30px rgba(0,0,0,.12)}
.metric-icon{width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:grid;place-items:center;font-size:13px;font-weight:900;background:rgba(27,108,255,.14);color:var(--accent-2);border:1px solid rgba(27,108,255,.28)}
.dashboard-finance .finance-total{border-color:rgba(27,108,255,.5)}
.dashboard-finance .finance-mine{border-color:rgba(25,195,125,.5)}
.dashboard-finance .finance-tech{border-color:rgba(255,190,60,.45)}
.dashboard-finance .finance-given{border-color:rgba(155,110,255,.5);background:rgba(155,110,255,.06)}
.dashboard-finance .finance-tips{border-color:rgba(255,209,102,.55);background:rgba(255,209,102,.06)}
.dashboard-charts{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:14px;margin-bottom:16px}
.chart-title{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.chart-title span,.chart-title small{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.8px}
.chart-title h3{margin:4px 0 0}
.comparison-bars{display:grid;gap:18px}
.comparison-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:13px}
.comparison-label strong{white-space:nowrap}
.comparison-track{height:12px;border-radius:99px;background:rgba(255,255,255,.055);overflow:hidden}
.comparison-track i{display:block;height:100%;min-width:3px;border-radius:99px}
.bar-mine{background:linear-gradient(90deg,#19c37d,#36e3a2)}
.bar-printer{background:linear-gradient(90deg,#ffb84d,#ff7a45)}
.donut-wrap{display:flex;align-items:center;justify-content:center;gap:24px}
.donut{--mine:50%;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#19c37d 0 var(--mine),#ff9f43 var(--mine) 100%);position:relative}
.donut:before{content:"";position:absolute;inset:19px;border-radius:50%;background:#101a2b}
.donut>div{position:relative;text-align:center}.donut strong,.donut span{display:block}.donut strong{font-size:22px}.donut span{font-size:11px;color:var(--muted)}
.chart-legend{display:grid;gap:12px}.chart-legend>div{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px;font-size:12px}.chart-legend i{width:9px;height:9px;border-radius:50%}.legend-mine{background:#19c37d}.legend-printer{background:#ff9f43}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:26px 0 12px}.section-heading>div:last-child{display:flex;gap:8px}.section-heading span{color:var(--accent-2);font-size:12px;text-transform:uppercase;letter-spacing:1px}.section-heading h2{margin:4px 0 0}.store-kpis{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:12px;margin-bottom:14px}.store-products{border-color:rgba(27,108,255,.45)}.store-low{border-color:rgba(255,77,109,.45)}.store-sales{border-color:rgba(25,195,125,.45)}.store-today{border-color:rgba(155,110,255,.45)}
.store-kpis .metric-card>div:last-child{min-width:0}
.store-kpis span,.store-kpis strong,.store-kpis small{display:block}
.store-kpis span{color:var(--muted);font-size:13px;margin-bottom:7px}
.store-kpis strong{font-size:22px;overflow-wrap:anywhere}
.store-kpis small{color:var(--muted);margin-top:7px}
.store-overview .card{min-width:0}
.store-overview .donut-wrap{flex-wrap:wrap;gap:18px}
.store-overview .donut{flex-shrink:0}
.store-overview .comparison-track i{min-width:0}
.bar-store-profit{background:linear-gradient(90deg,#2b7cff,#9b6eff)}
.bar-store-negative{background:linear-gradient(90deg,#ff4d6d,#ff7a45)}
.donut.donut-empty{background:var(--border)}
.store-chart-note{color:var(--muted);font-size:13px;text-align:center}
.store-charts{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin-bottom:16px}.sales-columns{height:210px;display:flex;align-items:end;gap:10px;padding-top:22px;overflow-x:auto}.sales-column{height:100%;flex:1;min-width:38px;display:grid;grid-template-rows:20px 1fr 22px;text-align:center;font-size:10px;color:var(--muted)}.sales-column>strong{font-size:10px;color:var(--text)}.sales-column>i{height:100%;display:flex;align-items:end;justify-content:center}.sales-column b{display:block;width:min(34px,75%);min-height:4px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#36e3a2,#168e61)}
.profit-strip{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr)) auto;align-items:center;gap:1px;padding:1px;margin:0 0 14px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--border)}.profit-strip>div{align-self:stretch;padding:15px;background:#111b2c}.profit-strip span,.profit-strip small{display:block;color:var(--muted);font-size:12px}.profit-strip strong{display:block;font-size:19px;margin:5px 0}.profit-strip .net{background:rgba(25,195,125,.09)}.profit-strip>a{margin:10px}
.audit-note{padding:12px 14px;margin:12px 0;border:1px solid rgba(27,108,255,.35);border-radius:var(--radius);background:rgba(27,108,255,.07);color:var(--muted);font-size:13px}.audit-table{min-width:1250px}.audit-action{display:inline-block;padding:5px 8px;border-radius:7px;background:rgba(25,195,125,.1);border:1px solid rgba(25,195,125,.25);font-size:11px;font-weight:800}.audit-sub{display:block;color:var(--muted);margin-top:4px}.audit-table details{min-width:130px}.audit-table summary{cursor:pointer;color:var(--accent-2)}.audit-table pre{max-width:420px;max-height:260px;overflow:auto;white-space:pre-wrap;font-size:11px;color:var(--muted);background:rgba(0,0,0,.2);padding:8px;border-radius:7px}
.top-products{display:grid;gap:16px}.top-products>div>div{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:6px}.top-products i{display:block;height:9px;background:rgba(255,255,255,.055);border-radius:99px;overflow:hidden}.top-products b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2b7cff,#9b6eff)}.empty-chart{color:var(--muted);display:grid;place-items:center;min-height:150px}.store-lists{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}.store-lists table{min-width:520px}
.finance-kpis span{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
.finance-kpis strong{font-size:22px}
.finance-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.finance-chart{display:grid;gap:10px}
.chart-row{display:grid;grid-template-columns:100px 1fr 100px;align-items:center;gap:10px;font-size:13px}
.chart-row strong{text-align:right}
.chart-track{height:12px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.chart-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
@media (max-width:900px){.finance-kpis,.store-kpis{grid-template-columns:1fr 1fr}.finance-grid,.dashboard-charts,.store-charts,.store-lists{grid-template-columns:1fr}.profit-strip{grid-template-columns:1fr 1fr}.chart-row{grid-template-columns:85px 1fr 85px}.donut-wrap{flex-wrap:wrap}.section-heading{align-items:flex-start;flex-direction:column}}
@media (max-width:540px){.store-kpis,.profit-strip{grid-template-columns:1fr}.store-overview .comparison-label{flex-wrap:wrap}.section-heading>div:last-child{flex-wrap:wrap}}

/* Shared screen layout for the admin, client and public pages. */
.ticket-intake-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:start;
}
.ticket-intake-section { min-width:0; }
.ticket-intake-section > .form-grid,
.ticket-intake-section > label:not(:first-child) { margin-top:14px; }
.ticket-intake-section + .ticket-intake-section {
  border-left:1px solid var(--border);
  padding-left:24px;
}
@media (max-width:900px) {
  .ticket-intake-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .ticket-intake-section + .ticket-intake-section {
    border-left:0;
    border-top:1px solid var(--border);
    padding-left:0;
    padding-top:20px;
  }
}
.clients-table th, .clients-table td,
.products-table th, .products-table td {
  white-space:nowrap;
  overflow-wrap:normal;
  vertical-align:middle;
  padding:9px 10px;
  font-size:13px;
}
.client-actions, .product-actions { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; }
.product-actions > form { flex:0 0 auto; }
.clients-table .client-actions .btn,
.products-table .product-actions .btn {
  white-space:nowrap;
  margin:0;
  flex:0 0 auto;
  min-height:36px;
  padding:7px 9px;
  border-radius:9px;
  font-size:12px;
}
@media (pointer:coarse) {
  .clients-table .client-actions .btn,
  .products-table .product-actions .btn { min-height:44px; }
}
@media screen {
  body { overflow-wrap:anywhere; }
  main.container { width:100%; }
  .container, .card, .card-soft, .table-wrap,
  .form-grid > *, .form-row > *, .finance-grid > *,
  .dashboard-finance > *, .dashboard-charts > *, .store-charts > *,
  .store-lists > *, .finance-kpis > *, .store-kpis > *,
  .metric-card > *, .contact-grid > * { min-width:0; }
  img, svg, video, iframe { max-width:100%; }
  pre { max-width:100%; overflow:auto; white-space:pre-wrap; }
  input, select, textarea { min-width:0; max-width:100%; font:inherit; }
  input[type="checkbox"], input[type="radio"] {
    width:20px; height:20px; padding:0; vertical-align:middle;
    accent-color:var(--accent); margin:0 6px 0 0;
  }
  label { display:block; margin-bottom:5px; }
  form > label:not(:first-child), form > .form-grid { margin-top:12px; }
  form > button, form > .btn { margin-top:12px; }
  td form > button { margin-top:0; }
  main > .card, main > form, main > .table-wrap { margin-bottom:16px; }
  main > .btn { margin-bottom:12px; }
  .btn { display:inline-flex; align-items:center; justify-content:center; text-align:center; }
  button, .btn, .nav-link { min-height:44px; font-size:14px; }
  button, .btn { max-width:100%; white-space:normal; }
  a:focus-visible, button:focus-visible, .table-wrap:focus-visible {
    outline:2px solid var(--accent); outline-offset:3px;
  }
  .table-wrap { width:100%; max-width:100%; overscroll-behavior-x:contain; }
  td { overflow-wrap:anywhere; }
  td .btn { margin:2px; }
  .table-wrap input, .table-wrap select { min-width:100px; }
  .table-wrap select { width:100%; max-width:420px; }
  .dashboard-finance { grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); }
  .chart-title, .comparison-label, .section-heading > div:last-child { flex-wrap:wrap; gap:10px; }
  .donut { flex-shrink:0; }
  .donut-wrap { flex-wrap:wrap; }
  .nav-toggle { display:none; }
  .brand { flex-shrink:0; }
}

@media screen and (max-width:1100px) {
  header > .bar { flex-direction:row; flex-wrap:wrap; align-items:center; }
  .nav-toggle:not([hidden]) { display:inline-flex; align-items:center; gap:10px; }
  #primary-navigation { width:100%; gap:6px; }
  #primary-navigation.collapsible { display:none; }
  #primary-navigation.collapsible.is-open {
    display:flex; max-height:65vh; max-height:65dvh; overflow-y:auto;
    padding:4px 4px 12px;
  }
  #primary-navigation .nav-link { flex:1 1 160px; }
  #primary-navigation .lang-switch { flex-basis:100%; margin-left:0 !important; }
  .store-kpis, .finance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profit-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media screen and (max-width:600px) {
  .container { padding:12px; }
  header > .bar { padding:10px 12px; }
  .card, .card-soft { padding:12px; }
  h2 { font-size:23px; }
  h3 { font-size:19px; }
  input, select, textarea { font-size:16px; min-height:44px; }
  input[type="checkbox"], input[type="radio"] { min-height:20px; }
  .form-grid { gap:12px; }
  .form-row { flex-direction:column; }
  .form-actions > .btn, .form-actions > button, .contact-actions > a { flex:1 1 100%; }
  .finance-kpis, .store-kpis, .profit-strip { grid-template-columns:minmax(0,1fr); }
  .metric-card { padding:14px; }
  .comparison-label strong { white-space:normal; }
  .chart-row { grid-template-columns:minmax(0,1fr) auto; }
  .chart-row .chart-track { grid-column:1 / -1; grid-row:2; }
  .chart-row strong { grid-column:2; grid-row:1; }
  .chart-legend { max-width:100%; }
  .chart-legend > div { grid-template-columns:10px minmax(0,1fr) auto; }
  .table-wrap { margin-top:12px; }
  th, td { padding:10px; }
  /* Sale entry fields stack while read-only data tables retain their columns. */
  .sale-items table, .sale-items tbody, .sale-items tr, .sale-items td { display:block; min-width:0; width:100%; }
  .sale-items thead { display:none; }
  .sale-items tr { padding:8px; border-bottom:2px solid var(--border); }
  .sale-items td { border:0; padding:6px; }
  .sale-items td::before { content:attr(data-label); display:block; color:var(--muted); font-size:14px; margin-bottom:5px; }
  .sale-items select { max-width:100%; }
}