/* ======================================================
   SilverAxisNet - Refactored style.css (visual update)
   Replaces visuals only — backend behavior unchanged.
   ====================================================== */

/* Design tokens */
:root{
  /* Theme */
  --bg-900: #071021;      /* page background */
  --bg-800: #0b1524;
  --surface: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.02);
  --card: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --text: #E6EEF8;
  --muted: #9AA8BD;
  --silver: #C0C7D1;
  --accent: #38BDF8;      /* blue accent */
  --accent-600: #0ea5e9;
  --success: #22C55E;
  --danger: #EF4444;
  --warning: #F59E0B;
  --border: rgba(148,163,184,0.12);

  /* layout tokens */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-1: 0 6px 18px rgba(2,6,23,0.45);
  --shadow-2: 0 10px 30px rgba(2,6,23,0.55);

  /* typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ui-gap: 14px;
  --ui-gap-lg: 22px;
}

/* -------------------------
   Reset + base improvements
   ------------------------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html,body{
  height:100%;
  margin:0;
  padding:0;
  font-family: var(--font-sans);
  color:var(--text);
  background:
    radial-gradient(700px 400px at 10% 5%, rgba(56,189,248,0.06), transparent 20%),
    linear-gradient(180deg, var(--bg-900), var(--bg-800));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
}

/* Make anchors show accent on hover but keep no underline */
a{
  color: var(--accent);
  text-decoration: none;
  transition: color .14s ease, opacity .14s ease;
}
a:hover{ color: var(--accent-600); text-decoration: underline; }

/* Ensure images scale */
img{ max-width:100%; height:auto; display:block; }

/* Utility: container centered like your existing container sizes */
.container{
  width:100%;
  padding-left:16px;
  padding-right:16px;
  margin-left:auto;
  margin-right:auto;
}
@media(min-width:576px){ .container{ max-width:540px; } }
@media(min-width:768px){ .container{ max-width:720px; } }
@media(min-width:992px){ .container{ max-width:960px; } }
@media(min-width:1200px){ .container{ max-width:1140px; } }

/* -------------------------
   App header ( polished )
   ------------------------- */
.appHeader{
  height:64px;
  position:fixed;
  top:0; left:0; right:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  -webkit-user-select:none;
}

/* header inner wrap to constrain width */
.appHeader .wrap{
  width:100%;
  max-width:1140px;
  padding: 0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

/* left/right icon areas */
.appHeader .left,
.appHeader .right{
  position:absolute;
  top:0;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
}

.appHeader .left{ left:0; }
.appHeader .right{ right:0; }

/* back icon style - stretched for tappable area */
.appHeader .left .icon,
.appHeader .right .icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--silver);
  transition: background .12s ease, transform .08s ease;
}
.appHeader .left .icon:hover,
.appHeader .right .icon:hover{
  background: rgba(255,255,255,0.02);
  transform: translateY(-1px);
}

/* Title */
.appHeader .pageTitle{
  font-weight:700;
  font-size:16px;
  color:var(--text);
  letter-spacing:.2px;
  text-align:center;
}
.appHeader.color-light .pageTitle{ color:#fff; }

/* small subtitle under title if present */
.appHeader .pageTitle .text-muted{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* make sure header doesn't overlay content (keep page padding) */
body > #appCapsule,
body > main{ padding-top:76px; } /* header height + gap */

/* -------------------------
   Cards & surfaces
   ------------------------- */
.card{
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  overflow:hidden;
  color:var(--text);
}

.card.p-0{ padding:0; }
.card .card-body{
  padding: var(--ui-gap);
}

/* subtle title */
.sectionTitle .lead{
  font-weight:700;
  color:var(--text);
  margin:0 0 6px 0;
}

/* -------------------------
   Buttons (modern)
   ------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:700;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease, opacity .12s ease;
  min-height:44px;
  line-height:1;
}

/* Primary (Silver-styled) */
.btn-primary{
  background: linear-gradient(180deg, var(--silver), rgba(192,199,209,0.95));
  color:#071021;
  border-color: rgba(255,255,255,0.05);
  box-shadow: 0 12px 24px rgba(2,6,23,0.45);
}
.btn-primary:hover{ filter:brightness(.98); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }

/* Accent blue filled (used for action highlights) */
.btn-accent{
  background: linear-gradient(180deg, var(--accent), var(--accent-600));
  color:#fff;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 26px rgba(56,189,248,0.12);
}
.btn-accent:hover{ filter:brightness(.98); }

/* Outline / ghost */
.btn-ghost{
  background: transparent;
  color: var(--silver);
  border:1px solid var(--border);
}

/* Small and large sizes */
.btn-sm{ padding:8px 12px; border-radius:10px; min-height:36px; }
.btn-lg{ padding:12px 20px; border-radius:16px; min-height:52px; }

/* Disabled state */
.btn:disabled,
.btn.disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* -------------------------
   Form controls (styled but compatible with Bootstrap names)
   ------------------------- */
.form-control,
input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select{
  width:100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.10);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
  font-size: 14px;
  -webkit-appearance: none;
  appearance:none;
}
.form-control::placeholder{ color: rgba(154,168,189,0.6); }
.form-control:focus{
  border-color: rgba(56,189,248,0.5);
  box-shadow: 0 6px 18px rgba(56,189,248,0.08);
  background: rgba(255,255,255,0.03);
}

/* Labels */
label{ color: var(--muted); font-size:13px; display:block; margin-bottom:6px; }

/* Form helper text */
.form-text{ color:var(--muted); font-size:13px; margin-top:6px; display:block; }

/* Inline small form elements */
.form-inline .form-control{ width:auto; display:inline-block; }

/* -------------------------
   Lists / Transaction rows
   ------------------------- */
.item-row{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:12px;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
  background: rgba(255,255,255,0.01);
}
.item-row:hover{
  background: rgba(255,255,255,0.03);
  border-color: rgba(148,163,184,0.06);
}

/* Status pill */
.pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  color:#071021;
  background: var(--silver);
}
.pill--success{ background: var(--success); color:#06220e; }
.pill--danger{ background: var(--danger); color:#fff; }
.pill--warning{ background: var(--warning); color:#071021; }

/* -------------------------
   Tables (polished)
   ------------------------- */
.table{
  width:100%;
  border-collapse:collapse;
  color:var(--muted);
  font-size:14px;
}
.table th,
.table td{
  padding:12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  vertical-align:middle;
}
.table thead th{
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.6px;
  color:var(--muted);
  border-bottom:1px solid rgba(148,163,184,0.06);
}

/* striped rows */
.table tbody tr:nth-child(odd){
  background: rgba(255,255,255,0.005);
}

/* responsive table wrapper */
.table-responsive{
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

/* -------------------------
   Alerts / messages
   ------------------------- */
.alert{
  padding:12px 14px;
  border-radius:12px;
  color:var(--text);
  background: rgba(255,255,255,0.02);
  border:1px solid var(--border);
}
.alert--success{ border-color: rgba(34,197,94,0.12); background: rgba(34,197,94,0.04); }
.alert--danger{ border-color: rgba(239,68,68,0.12); background: rgba(239,68,68,0.04); }

/* -------------------------
   Small devices & responsiveness
   ------------------------- */
@media (max-width:575px){
  .appHeader{ height:60px; }
  body > #appCapsule, body > main{ padding-top:68px; }
  .card .card-body{ padding:12px; }
  .btn{ min-height:44px; font-size:14px; }
  .sectionTitle .lead{ font-size:20px; }
}

/* -------------------------
   Helpers
   ------------------------- */
.text-muted{ color:var(--muted) !important; }
.text-center{ text-align:center; }
.mb-0{ margin-bottom:0 !important; }
.mt-0{ margin-top:0 !important; }
.mt-1{ margin-top:8px !important; }
.mt-2{ margin-top:14px !important; }

/* Ensure links in small text not too bright */
.small a{ color: var(--accent); }

/* -------------------------
   Safe overrides for legacy styles found in original file
   (these only change visuals; keep class names/behavior the same)
   ------------------------- */

/* Make default bootstrap .btn-primary follow our look */
.btn-primary{
  background: linear-gradient(180deg, var(--silver), rgba(192,199,209,0.95));
  color:#071021;
  border-color: rgba(255,255,255,0.05);
  box-shadow: 0 8px 20px rgba(2,6,23,0.42);
}
.btn-primary:hover{ filter:brightness(.98); }

/* Form-control improvements (override older borders/backgrounds) */
.form-control{
  background: rgba(255,255,255,0.02);
  border:1px solid rgba(148,163,184,0.08);
  color:var(--text);
}
.form-control:disabled{ opacity:.6; }

/* If original CSS forced body color white on white, override */
body, html{ color:var(--text) !important; background: linear-gradient(180deg, var(--bg-900), var(--bg-800)) !important; }

/* fix existing .appHeader color mismatch seen earlier (blue bg + black title) */
.appHeader{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
}
.appHeader .pageTitle{ color: var(--text) !important; }

/* remove any accidental bright blue link color left earlier */
a{ color:var(--accent) !important; }

/* Ensure icons (ionicons) show in silver if available */
.icon, i[class^="icon"], i[class*="ion-"]{ color:var(--silver) !important; }

/* -------------------------
   Accessibility: focus styles
   ------------------------- */
:focus{ outline:none; }
a:focus, .btn:focus, .form-control:focus{
  box-shadow: 0 6px 22px rgba(56,189,248,0.12);
  border-color: rgba(56,189,248,0.45);
  transform: none;
}

/* -------------------------
   Minor visual helpers used across pages
   ------------------------- */
.kv{ display:flex; align-items:center; gap:8px; }
.kv .label{ color:var(--muted); font-size:13px; }
.kv .value{ color:var(--text); font-weight:700; font-size:15px; }

/* -------------------------
   End of file
   ------------------------- */