/* ფასგუშაგი — shared app design system
   Brand accents (ticket/banknote cards, status colors) stay fixed across
   themes; page chrome (background, surfaces, text, borders) switches
   between light and dark via the tokens below. */

:root{
  /* fixed brand tokens — do not change with theme */
  --ink:#14171F;
  --paper:#EFE8D4; --paper-2:#F6F1E3;
  --gold:#C9A24B; --gold-2:#E4C374;
  --accent:#FF5B00; --accent-2:#FF7A33;
  --drop:#2F6B4F; --drop-bg:#DCE8DF;
  --rise:#8C3B32; --rise-bg:#EFDAD3;

  /* chrome tokens — dark theme values (default base) */
  --page-bg:#14171F;
  --header-bg:rgba(20,23,31,0.92);
  --ink-2:#1B1F2B;
  --ivory:#F3EEDF;
  --muted:#A9AEC0;
  --line:#3C4152;
  --line-soft:rgba(239,232,212,0.14);
  --input-bg:#14171F;
  --row-hover:rgba(239,232,212,0.03);
  --focus-ring: var(--gold-2);

  --font-sans:'Google Sans', 'Noto Sans Georgian', sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-mono: var(--font-sans);
  --radius:14px;
}

/* follow the OS/browser preference until the person picks explicitly */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --page-bg:#FBF9F4;
    --header-bg:rgba(251,249,244,0.92);
    --ink-2:#FFFFFF;
    --ivory:#1B1F2B;
    --muted:#6B7080;
    --line:#E3DECD;
    --line-soft:rgba(20,23,31,0.08);
    --input-bg:#FBF9F4;
    --row-hover:rgba(20,23,31,0.025);
    --focus-ring: var(--accent);
  }
}

/* explicit choice, saved by the toggle in the header */
[data-theme="light"]{
  --page-bg:#FBF9F4;
  --header-bg:rgba(251,249,244,0.92);
  --ink-2:#FFFFFF;
  --ivory:#1B1F2B;
  --muted:#6B7080;
  --line:#E3DECD;
  --line-soft:rgba(20,23,31,0.08);
  --input-bg:#FBF9F4;
  --row-hover:rgba(20,23,31,0.025);
  --focus-ring: var(--accent);
}
[data-theme="dark"]{
  --page-bg:#14171F;
  --header-bg:rgba(20,23,31,0.92);
  --ink-2:#1B1F2B;
  --ivory:#F3EEDF;
  --muted:#A9AEC0;
  --line:#3C4152;
  --line-soft:rgba(239,232,212,0.14);
  --input-bg:#14171F;
  --row-hover:rgba(239,232,212,0.03);
  --focus-ring: var(--gold-2);
}

*{ box-sizing:border-box; }
body{ margin:0; background:var(--page-bg); color:var(--ivory); font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased; transition:background .2s ease, color .2s ease; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; margin:0 0 12px; }
p{ margin:0 0 14px; }
img,svg{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:1440px; margin:0 auto; padding:0 32px; }
.wrap-narrow{ max-width:460px; margin:0 auto; padding:0 24px; }

/* header */
.app-header{ position:sticky; top:0; z-index:40; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft); }
.app-nav{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:19px; }
.brand svg{ width:26px; height:26px; }
.app-nav-links{ display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; }
.app-nav-links a{ font-size:14px; color:var(--muted); }
.app-nav-links a:hover, .app-nav-links a.active{ color:var(--ivory); }
.app-nav-actions{ display:flex; align-items:center; gap:12px; }

.theme-toggle{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ivory); cursor:pointer; }
.theme-toggle:hover{ border-color:var(--gold); color:var(--gold-2); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
[data-theme="light"] .theme-toggle .icon-moon{ display:block; }
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .theme-toggle .icon-sun{ display:none; }
  :root:not([data-theme]) .theme-toggle .icon-moon{ display:block; }
}

.lang-toggle{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-family:var(--font-mono); font-size:11.5px; }
.lang-toggle a{ padding:6px 11px; color:var(--muted); }
.lang-toggle a.active{ background:var(--gold); color:var(--ink); font-weight:600; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:9px; font-size:14.5px; font-weight:600; border:none; cursor:pointer; font-family:var(--font-body); transition:.18s ease; }
.btn-sm{ padding:7px 13px; font-size:13px; border-radius:7px; }
.btn-gold{ background:linear-gradient(180deg, var(--accent-2), var(--accent)); color:var(--ink); }
.btn-gold:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(255,91,0,.55); }
.btn-ghost{ background:transparent; color:var(--ivory); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-danger{ background:transparent; color:var(--rise); border:1px solid rgba(140,59,50,.5); }
.btn-danger:hover{ background:rgba(140,59,50,.12); }
.btn-block{ width:100%; }

/* cards / forms */
.card{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:7px; font-family:var(--font-mono); }
.field input, .field textarea{ width:100%; padding:12px 14px; border-radius:9px; border:1px solid var(--line); background:var(--input-bg); color:var(--ivory); font-size:14.5px; font-family:var(--font-body); }
.field input:focus, .field textarea:focus{ border-color:var(--accent); outline:none; }
.field .hint{ font-size:12px; color:var(--muted); margin-top:6px; }
.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:14px; }
.form-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; gap:12px; flex-wrap:wrap; }
.divider{ display:flex; align-items:center; gap:12px; margin:20px 0; font-size:12px; color:var(--muted); font-family:var(--font-mono); }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.google-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 16px; border:1px solid var(--line); border-radius:9px; font-size:14px; font-weight:600; background:transparent; color:var(--ivory); cursor:pointer; }
.google-btn:hover{ border-color:var(--muted); }
.fine{ text-align:center; font-size:13px; color:var(--muted); margin-top:16px; }
.fine a{ color:var(--accent); border-bottom:1px solid rgba(255,91,0,.4); }

/* flash messages */
.flash{ padding:13px 16px; border-radius:9px; font-size:14px; margin-bottom:18px; }
.flash-success{ background:var(--drop-bg); color:var(--drop); }
.flash-error{ background:var(--rise-bg); color:var(--rise); }
.flash-info{ background:rgba(201,162,75,.14); color:var(--gold-2); }

/* page heading */
.page-head{ padding:44px 0 30px; }
.page-head h1{ font-size:clamp(24px,3vw,32px); }
.page-head p{ color:var(--muted); margin:0; }
.page-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }

main{ min-height:60vh; padding-bottom:80px; }

/* product ticket cards (dashboard grid) — always the "paper" brand
   look, independent of site theme, like a printed price tag. */
.ticket-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px; }
.ticket{ background:linear-gradient(175deg, var(--paper-2), var(--paper)); color:var(--ink); border-radius:16px; padding:22px 22px 18px; position:relative; border:1px solid rgba(201,162,75,.35); transition:transform .2s ease, box-shadow .2s ease; }
.ticket:hover{ transform:translateY(-3px); box-shadow:0 30px 60px -24px rgba(0,0,0,.5); }
.ticket a.ticket-link{ position:absolute; inset:0; border-radius:inherit; }
.ticket-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; position:relative; }
.ticket-serial{ font-family:var(--font-mono); font-size:11px; color:#6b6350; }
.ticket-name{ font-weight:700; font-size:15.5px; margin-bottom:6px; position:relative; }
.ticket-watch{ font-family:var(--font-mono); font-size:11.5px; color:#6b6350; margin-bottom:14px; }
.ticket-perf{ display:flex; align-items:center; margin:14px -22px; padding:0 22px; }
.ticket-perf span{ flex:1; height:1px; background-image:repeating-linear-gradient(90deg,#b9ae8f 0 5px, transparent 5px 10px); }
.ticket-perf::before,.ticket-perf::after{ content:""; width:12px; height:12px; border-radius:50%; background:var(--page-bg); flex:none; }
.ticket-perf::before{ margin-left:-31px; }
.ticket-perf::after{ margin-right:-31px; }
.ticket-price-row{ display:flex; align-items:baseline; justify-content:space-between; position:relative; }
.ticket-price{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700; font-size:21px; }
.ticket-badge{ font-family:var(--font-mono); font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; }
.badge-ok{ background:var(--drop-bg); color:var(--drop); }
.badge-error, .badge-broken{ background:var(--rise-bg); color:var(--rise); }
.badge-out_of_stock{ background:rgba(201,162,75,.18); color:#8a6f2c; }
.badge-pending{ background:rgba(107,99,80,.15); color:#6b6350; }

/* empty state */
.empty-state{ text-align:center; padding:80px 20px; border:1px dashed var(--line); border-radius:var(--radius); }
.empty-state h2{ font-size:22px; }
.empty-state p{ color:var(--muted); max-width:40ch; margin:0 auto 22px; }

/* tracked-link tiles (product detail page) */
.link-tile-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:18px; margin-bottom:12px; }
.link-tile{ display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; }
.link-tile:hover{ transform:translateY(-3px); box-shadow:0 24px 44px -24px rgba(0,0,0,.45); }
.link-tile-photo{ width:100%; aspect-ratio:1/1; background:linear-gradient(155deg,#2c3040,#171a24); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.link-tile-photo img{ width:100%; height:100%; object-fit:cover; }
.link-tile-body{ padding:14px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.link-tile-title{ font-weight:600; font-size:14px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.link-tile-domain{ font-size:12px; color:var(--muted); font-family:var(--font-mono); display:flex; align-items:center; }
.link-tile-error{ font-size:12px; color:var(--rise); }
.link-tile-prices{ margin-top:auto; padding-top:6px; display:flex; align-items:baseline; gap:8px; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.link-tile-price{ font-size:18px; font-weight:700; }
.link-tile-prev{ font-size:12.5px; color:var(--muted); text-decoration:line-through; }
.link-tile-actions{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line-soft); }
.link-tile-actions form{ flex:1; }
.link-tile-actions .btn{ width:100%; padding:7px 10px; }

.status-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; flex:none; }
.status-dot.ok{ background:var(--drop); }
.status-dot.error, .status-dot.broken{ background:var(--rise); }
.status-dot.out_of_stock{ background:var(--gold-2); }
.status-dot.pending{ background:var(--muted); }

.match-card{ display:flex; gap:14px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; }
.match-main{ flex:1; min-width:0; }
.match-actions{ display:flex; gap:8px; flex:none; }
.link-photo{ width:56px; height:56px; border-radius:9px; flex:none; background:linear-gradient(155deg,#2c3040,#171a24); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.link-photo img{ width:100%; height:100%; object-fit:cover; }
.link-title{ font-weight:600; font-size:14.5px; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.link-domain{ font-size:12.5px; color:var(--muted); font-family:var(--font-mono); }

/* compact link rows — used for the read-only admin product overview */
.link-row{ display:flex; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.link-row:last-child{ border-bottom:none; }
.link-main{ flex:1; min-width:0; }
.link-prices{ text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; flex:none; }
.link-price-now{ font-size:16px; font-weight:700; }

/* tables (admin) */
table.data-table{ width:100%; border-collapse:collapse; font-size:14px; }
.data-table th{ text-align:left; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-2); padding:10px 14px; border-bottom:1px solid var(--line); }
.data-table td{ padding:14px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.data-table tr:hover td{ background:var(--row-hover); }

.section-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:12px; }

footer.app-footer{ border-top:1px solid var(--line-soft); padding:28px 0; text-align:center; color:var(--muted); font-size:13px; }

@media (max-width:720px){
  .app-nav-links{ display:none; }
  .link-tile-grid{ grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); }
}