/* =========================
   Noblextrade - Mobile First UI
   ========================= */

:root{
  --bg:#0b1020;
  --panel:#111a33;
  --panel2:#0f1730;
  --line:#22325f;
  --line2:#2a3c73;
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.82);

  --primary:#2f6bff;
  --primary2:#2357da;

  --danger:#ff2f66;
  --success:#2ce6a5;
  --warn:#ffbf00;

  --radius:16px;
  --radius2:14px;
  --shadow: 0 10px 25px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:radial-gradient(1000px 600px at 20% -10%, rgba(47,107,255,.18), transparent 55%),
             radial-gradient(900px 500px at 100% 0%, rgba(255,47,102,.10), transparent 55%),
             var(--bg);
  color:var(--text);
}

/* links */
a{color:#9bd0ff;text-decoration:none}
a:hover{opacity:.92}

/* layout */
.wrap{max-width:980px;margin:0 auto;padding:14px}
@media (min-width:700px){
  .wrap{padding:18px}
}

/* typography helpers */
.small{opacity:.85;font-size:.92rem}
h1,h2,h3{letter-spacing:.2px}
h1{font-size:1.7rem}
h2{font-size:1.25rem}
h3{font-size:1.05rem}

/* icon helper (SVG sprite) */
.icon{width:20px;height:20px;fill:currentColor;vertical-align:middle}

/* cards */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  margin:12px 0;
  box-shadow:var(--shadow);
}
.card.soft{
  background:var(--panel);
  box-shadow:none;
}

/* topbar / appbar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.appbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:4px 0 12px;
}

/* grid rows */
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1;min-width:260px}
@media (max-width:540px){
  .col{min-width:100%}
}

/* form controls */
label{display:block;margin:8px 0 6px;font-size:.92rem;color:var(--muted)}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line2);
  background:var(--panel2);
  color:var(--text);
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(47,107,255,.8);
  box-shadow:0 0 0 4px rgba(47,107,255,.18);
}
input::placeholder,textarea::placeholder{color:rgba(234,240,255,.45)}
textarea{resize:vertical;min-height:90px}

/* buttons */
button{
  padding:12px 14px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) , var(--primary);
  color:white;
  font-weight:800;
  cursor:pointer;
  transition: transform .06s ease, filter .15s ease, background .15s ease;
}
button:hover{filter:brightness(1.03)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.55;cursor:not-allowed}

button.secondary{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) , #26345f;
}
button.ghost{
  background:transparent;
  border:1px solid var(--line2);
}

/* badges + chips */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-weight:900;
  line-height:1;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:rgba(22,34,74,.85);
  font-weight:800;
  font-size:.9rem;
}
.chip.pending{border-color:rgba(255,191,0,.35); color:#ffe08a}
.chip.approved{border-color:rgba(44,230,165,.35); color:#9ff2d5}
.chip.rejected{border-color:rgba(255,47,102,.35); color:#ff9ab3}

/* notices */
.notice{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(22,34,74,.75);
  border:1px solid var(--line2);
}
.ok{border-color:rgba(44,230,165,.6)}
.err{border-color:rgba(255,47,102,.6)}

/* tables (mobile friendly) */
.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
}
.table th,.table td{
  border-bottom:1px solid var(--line);
  padding:10px;
  text-align:left;
  vertical-align:top;
}
.table th{
  font-size:.9rem;
  color:rgba(234,240,255,.88);
  background:rgba(15,23,48,.55);
}
.table tr:hover td{background:rgba(15,23,48,.35)}

/* make tables scrollable on small screens */
@media (max-width:720px){
  .table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table th,.table td{white-space:nowrap}
}

/* pills (used in the dashboard) */
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(22,34,74,.75);
  border:1px solid var(--line2);
  color:var(--text);
}

/* utility */
.mt8{margin-top:8px}
.mt12{margin-top:12px}
.mt16{margin-top:16px}
.center{display:flex;align-items:center;justify-content:center}