/* public/assets/css/app.css */

/* Font (uploaded in assets) */
@font-face {
  font-family: "PeydaWeb";
  src: url("./fonts/woff2/PeydaWeb-Regular.woff2") format("woff2"),
       url("./fonts/woff/PeydaWeb-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PeydaWeb";
  src: url("./fonts/woff2/PeydaWeb-Bold.woff2") format("woff2"),
       url("./fonts/woff/PeydaWeb-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Light UI system (white background) */
:root{
  /* AI Startup Palette */
  --accent:#FFB200;
  --navy:#032238;
  --bg:#ffffff;
  --surface:#ffffff;
  --surface2:#fbfcff;

  --text:var(--navy);
  --muted:rgba(3,34,56,.62);
  --border:rgba(3,34,56,.12);

  /* Status */
  --danger:#dc2626;
  --ok:#16a34a;
  --warn:#FFB200;

  /* Focus / Glow */
  --ring:rgba(255,178,0,.32);
  --shadow: 0 12px 34px rgba(3,34,56,.08);
  --glow: 0 10px 26px rgba(255,178,0,.25);
  --radius:12px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: "PeydaWeb", sans-serif;
  color:var(--text);
  background: var(--bg);
  /* Subtle AI grid */
  background-image: radial-gradient(rgba(3,34,56,.06) 1px, transparent 1px);
  background-size: 26px 26px;
}
a{color:inherit}

body:before{
  content:"";
  position:fixed;
  top:0; left:0; right:0;
  height:6px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--accent) 55%, #ffd36a 100%);
  box-shadow: 0 6px 24px rgba(255,178,0,.22);
  z-index:999;
  pointer-events:none;
}

.container{max-width:980px;margin:0 auto;padding:22px 18px 18px;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:14px;
}
.title{font-size:18px;margin:0}
.badge{font-size:12px;color:rgba(3,34,56,.78);background:rgba(255,178,0,.18);border:1px solid rgba(255,178,0,.32);padding:6px 10px;border-radius:999px;font-weight:900}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-1px); box-shadow: 0 16px 40px rgba(3,34,56,.10); }
.card.subtle{ background: var(--surface2); }
.grid-2{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){ .grid-2{grid-template-columns:1.3fr .7fr} }
.field{display:grid;gap:6px;margin-bottom:10px}
.field span{color:var(--muted);font-size:12px}

/* inputs with icons */
.input-wrap{ position:relative; }
.input-wrap svg{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:18px; height:18px;
  color:var(--muted);
  pointer-events:none;
}
.input-wrap input,
.input-wrap select{
  padding-right:44px;
}

input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  outline:none;
  transition: box-shadow .18s ease, border-color .18s ease;
}
input:focus,select:focus,textarea:focus{ box-shadow: 0 0 0 4px var(--ring); border-color: rgba(255,178,0,.55); }
input[readonly], input:disabled{ background: #f8fafc; color: rgba(15,23,42,.85); }
textarea{min-height:80px;resize:vertical}
.btn{
  padding:12px 14px;
  border:0;
  border-radius:var(--radius);
  background:var(--accent);
  color:var(--navy);
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 10px 20px rgba(3,34,56,.08);
}
.btn:hover{ box-shadow: var(--glow); transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); filter: brightness(.98); }
.btn.secondary{
  background:#ffffff;
  color:var(--navy);
  border:1px solid var(--border);
  box-shadow:none;
}
.btn.secondary:hover{ box-shadow: 0 10px 22px rgba(3,34,56,.10); }
.btn.danger{background:var(--danger); color:#fff;}
.btn.ok{background:var(--navy); color:#fff; }
.btn.ok:hover{ box-shadow: 0 10px 26px rgba(3,34,56,.20); }
.btn:disabled{opacity:.6;cursor:not-allowed}
.msg{margin:0;color:var(--danger);min-height:20px;font-size:13px}
.msg.ok{ color: var(--ok); }
.hint{color:var(--muted);font-size:13px;line-height:1.6}
.hr{height:1px;background:rgba(15,23,42,.08);margin:12px 0}
.kv{display:grid;gap:8px}
.kv .row{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:13px}
.kv .row strong{color:var(--text)}
.stickybar{
  position:sticky; bottom:0;
  margin-top:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 25%, rgba(255,255,255,1) 100%);
  padding-top:10px;
}
.sticky-inner{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow: var(--shadow);
}
.small{font-size:12px;color:var(--muted)}
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:#ffffff; color:var(--muted); font-size:12px;
  border:1px solid rgba(15,23,42,.10);
}
.pill input{ accent-color: var(--accent); }

/* stepper */
.stepper{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 8px 0 14px;
}
.step{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  font-size:12px;
}
.step .n{
  width:22px;height:22px;
  border-radius:999px;
  display:grid;place-items:center;
  border:1px solid rgba(15,23,42,.14);
  font-weight:900;
  color:var(--muted);
}
.step.active{ border-color: rgba(255,178,0,.55); color: var(--navy); background: rgba(255,178,0,.10); }
.step.active .n{ border-color: rgba(255,178,0,.55); background: var(--accent); color: var(--navy); box-shadow: 0 8px 18px rgba(255,178,0,.22); }
.step.done{ color: rgba(3,34,56,.90); border-color: rgba(3,34,56,.18); background: rgba(3,34,56,.03); }
.step.done .n{ border-color: rgba(3,34,56,.18); color: rgba(3,34,56,.85); }

.topbar .pill svg{ width:16px; height:16px; }

.legend{display:flex;flex-wrap:wrap;gap:10px}
.legend-item{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.dot{width:12px;height:12px;border-radius:4px;border:1px solid rgba(15,23,42,.16)}
.dot.av{background:#ffffff}
.dot.hold{background: rgba(255,178,0,.35)}
.dot.sold{background:#f1f5f9}
.dot.sel{background:var(--accent)}
.dot.block{background:#000}

/* small utilities */
.row2{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:700px){ .row2{ grid-template-columns:1fr 1fr; } }

/* --- Icon system (Tabler/Feather style) --- */
/* Never allow SVG icons to blow up due to generic svg rules elsewhere */
svg{ max-width:100%; height:auto; }

/* Use .icon on all inline SVG icons */
svg.icon{ width:20px; height:20px; display:block; flex:0 0 20px; }

/* Form icons: hard clamp */
.input-wrap svg,
.pill svg,
.btn svg{
  width:18px !important;
  height:18px !important;
}

/* If any global rule sets svg width:100%, override for common UI containers */
.field svg,
.input-wrap svg,
.pill svg,
.btn svg{
  max-width:none !important;
}