/* ===========================
   Siegfried Asset Management
   Navy & Gold "Private Bank"
   =========================== */
 
/* ---- Theme tokens ---- */
:root{
  --navy-900:#0b1e39;     /* page bg */
  --navy-800:#0f2950;
  --navy-700:#153664;     /* headers */
  --navy-600:#1e4783;
  --navy-500:#2a5aa3;
  --slate-700:#334155;    /* body text on light */
  --slate-500:#64748b;    /* muted text on light */
  --ink-100:#f7f9fc;      /* light surface */
  --ink-200:#eef3f9;
  --ink-300:#e4ecf6;
  --gold-500:#d4af37;     /* brand gold */
  --gold-600:#c5a127;
  --gold-700:#b08e18;
  --success-600:#16a34a;
  --danger-600:#dc2626;
  --warning-600:#d97706;
  --white:#ffffff;
  --black:#000000;

  --radius-xl:14px;
  --radius-lg:12px;
  --radius-md:10px;

  --shadow-1:0 6px 18px rgba(0,0,0,.18);
  --shadow-2:0 10px 28px rgba(0,0,0,.24);

  --ring:0 0 0 3px rgba(212,175,55,.25);
  --focus:0 0 0 3px rgba(42,90,163,.35);

  --font-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", system-ui, sans-serif;
}

/* ---- Global ---- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

body{
  margin:0;
  color:#e6edf6;
  font:15px/1.5 var(--font-sans);
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 120% 10%, rgba(212,175,55,.08), transparent 55%),
    var(--navy-900);
  padding:16px;
}

/* optional page wrapper if present */
.container, .content, main{
  max-width:1200px;
  width:100%;
  margin:0 auto;
}

/* --- Toolbar: wraps by default, no overflow --- */
.toolbar {
  display:flex;
  flex-wrap:wrap;          /* allow wrapping on narrow screens */
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

/* On wider screens, keep it in one line */
@media (min-width:768px){
  .toolbar{
    flex-wrap:nowrap;
    white-space:nowrap;
  }
}

/* ---- Top brandbar (works with your .top block) ---- */
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  margin-bottom:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.top h2, h1, h2, h3{margin:0;color:#f2f6fc;letter-spacing:.2px}
.top .brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img{
  width:38px;
  height:38px;
  border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,.35)
}
.brand .name{
  font-weight:700;
  font-size:18px;
  letter-spacing:.3px;
}
.top .btn{margin-left:8px}

/* ---- Cards ---- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-xl);
  padding:18px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(4px);
  color:#eaf1fb;

  /* equal-height behaviour */
  display:flex;
  flex-direction:column;
}
.card h2, .card h3{margin-top:0;color:#ffffff}
.card + .card{margin-top:16px}

/* let paragraph stretch so CTAs sit at bottom */
.card p{flex-grow:1}

/* ---- Grid helpers ---- */
.grid{
  display:grid;
  gap:16px;
}

/* 1 column on small screens (default) */

/* 2 columns on tablets / small laptops */
@media (min-width:640px){
  .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-auto-rows:1fr;
  }
}

/* 3 columns on wider desktops */
@media (min-width:1024px){
  .grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* ---- Actions ---- */
.actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;          /* allow wrapping on small screens */
  gap:12px;
}

/* ---- Buttons ---- */
/* ---- Buttons & Call-to-Actions ---- */
.btn,
button{
  appearance:none;
  cursor:pointer;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12));
  color:#f7fafc;
  text-decoration:none;
  text-align:center;          /* center text */
  font-weight:600;
  transition:
    .2s transform ease,
    .2s box-shadow ease,
    .2s background ease,
    .2s border-color ease;
  white-space:nowrap;         /* keep label on one line */
  max-width:100%;
  overflow:hidden;            /* protection on very narrow screens */
  text-overflow:ellipsis;     /* trim with … if ever too tight */
}

.btn:hover,
button:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-2);
}

.btn:focus-visible,
button:focus-visible{
  outline:none;
  box-shadow:var(--focus);
}

/* Variants */
.btn-primary{
  background:linear-gradient(180deg, var(--gold-500), var(--gold-600));
  color:#1a1f2a;
  border-color:rgba(212,175,55,.6);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

.btn-primary:hover{
  background:linear-gradient(180deg, var(--gold-600), var(--gold-700));
}

.btn-secondary{
  background:linear-gradient(180deg, var(--navy-600), var(--navy-700));
  border-color:rgba(42,90,163,.6);
}

.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.18);
}

.btn-danger{
  background:linear-gradient(180deg, #ef4444, #b91c1c);
  border-color:rgba(239,68,68,.6);
}

.btn-success{
  background:linear-gradient(180deg, #22c55e, #15803d);
  border-color:rgba(34,197,94,.6);
}

/* Inline action spacing (kept from your original) */
.actions a,
.actions button{
  margin-right:8px;
}

/* ---- Links (non-button anchors) ---- */
/* Only style links that are NOT buttons */
a:not(.btn){
  color:var(--gold-500);
  text-decoration:none;
}

a:not(.btn):hover{
  text-decoration:underline;
}

/* ---- Forms ---- */
form{display:block}
label{
  display:block;
  color:#eef5ff;
  font-weight:600;
  margin:6px 0;
}
input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#f1f6ff;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder{color:rgba(238,245,255,.55)}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:rgba(212,175,55,.65);
  box-shadow:var(--ring);
  background:rgba(255,255,255,.10);
}
.formline{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;        /* allow wrapping always */
  margin:6px 0;
}

/* Password visibility fix on very dark bg (Safari) */
input[type="password"]{-webkit-text-security:disc}

/* ---- Tables ---- */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  background:rgba(255,255,255,.03);
}
thead th{
  background:linear-gradient(180deg, rgba(10,25,49,.9), rgba(10,25,49,.65));
  color:#fefefe;
  text-align:left;
  padding:12px;
  font-weight:700;
  letter-spacing:.3px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
tbody td{
  padding:10px 12px;
  color:#e7eef9;
  border-bottom:1px solid rgba(255,255,255,.06);
  word-break:break-word;    /* avoid long text pushing out */
}
tbody tr:hover{background:rgba(255,255,255,.04)}
tbody tr:last-child td{border-bottom:none}

/* ---- Notices / Alerts ---- */
.note{color:#c9d7ee; font-size:12.5px}
.notice, .error{
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:12px;
  font-weight:600;
  border:1px solid
    color-mix(in srgb, var(--gold-500) 40%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--gold-500) 20%, transparent),
      rgba(0,0,0,.10));
  color:#fef7dc;
}
.error{
  border-color:rgba(220,38,38,.55);
  background:linear-gradient(180deg, rgba(220,38,38,.20), rgba(0,0,0,.15));
  color:#ffecec;
}

/* ---- Links ---- */
a{
  color:var(--gold-500);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

/* Make sure anchor-buttons look like real buttons */
a.btn{
  text-decoration:none;
}

/* Primary anchor buttons keep their dark label, not link-gold */
a.btn-primary{
  color:#1a1f2a;          /* same as .btn-primary */
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

/* ---- Login layout tweaks (your login pages) ---- */

/* Center login content and constrain width on any device */
body.login{
  min-height:100vh;
  margin:0;
  padding:32px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* If you wrap login in .login .card OR just a top-level form, both get constrained */
.login .card,
body.login > form{
  max-width:420px;
  width:100%;
  margin:0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1);
  padding:18px;
}

.login .brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px
}
.login .brand img{width:44px; height:44px}
.login h2{margin:0 0 8px;}

/* ---- Admin/Portal headers (applies to _admin_shell & _portal_shell) ---- */
header.sam{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 14px 0;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.10));
}
header.sam .lhs{
  display:flex;
  align-items:center;
  gap:12px;
}
header.sam img{
  width:34px;
  height:34px;
  border-radius:50%;
}
header.sam .title{
  font-weight:800;
  letter-spacing:.4px;
}

/* --- Responsive Brand Header Improvements --- */
header.sam .lhs.brand {
  display:flex;
  align-items:center;
  gap:16px;
}

header.sam .lhs.brand img {
  width:clamp(42px, 6vw, 70px);
  height:clamp(42px, 6vw, 70px);
  object-fit:contain;
  border-radius:12px;
}

header.sam .lhs.brand .title {
  font-size:clamp(18px, 2.2vw, 32px);
  font-weight:800;
  letter-spacing:.6px;
  white-space:nowrap;   /* will be relaxed on small screens */
}

/* ---- Preview / iframe panes ---- */
.preview{
  width:100%;
  height:70vh;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.03)
}

/* ---- Plotly charts ----*/
.js-plotly-plot, #chart{
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(8,19,36,.75);
  box-shadow:var(--shadow-1);
}

/* ---- Badges / Pills ---- */
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#f3f8ff;
}
.badge.gold{
  border-color:rgba(212,175,55,.55);
  background:linear-gradient(180deg, rgba(212,175,55,.25), rgba(0,0,0,.10));
  color:#fff8dc;
}

/* ---- Footer (optional) ---- */
footer{
  margin-top:18px;
  padding-top:10px;
  color:#c7d2e5;
  font-size:12px;
  border-top:1px dashed rgba(255,255,255,.10)
}

/* ---- Utilities ---- */
.mt-0{margin-top:0}.mt-1{margin-top:6px}.mt-2{margin-top:10px}.mt-3{margin-top:16px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:10px}.mb-3{margin-bottom:16px}
.text-right{text-align:right}.text-center{text-align:center}
.hidden{display:none}

/* ---- Responsive tweaks: phones / small screens ---- */
@media (max-width: 640px) {
  body{
    padding:10px;
    font-size:14px;           /* slightly smaller base font on mobile */
  }

  h1{font-size:1.35rem}
  h2{font-size:1.2rem}
  h3{font-size:1.05rem}

  header.sam .lhs.brand img{
    width:36px;
    height:36px;
  }

  header.sam .lhs.brand .title {
    white-space: normal !important;   /* allow wrapping */
    line-height: 1.2;
    font-size: clamp(16px, 4.5vw, 22px);
  }

  /* stack header content, prevent overlap */
  header.sam{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  /* Header actions: keep compact instead of full-width */
  header.sam .actions{
    width:auto;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:flex-start;
    gap:8px;
  }

  header.sam .actions .btn,
  header.sam .actions form{
    flex:0 0 auto;     /* ⭐ do NOT stretch */
    width:auto;        /* ⭐ shrink to content */
  }

  header.sam .actions .btn{
    padding:8px 14px;  /* same feel but still compact */
  }

  .top{
    padding:10px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .top .brand img{
    width:32px;
    height:32px;
  }

  .formline{
    flex-direction:column;
    align-items:stretch;
  }

  .grid{
    grid-template-columns:1fr;    /* force single-column on very small screens */
  }

  .card{
    padding:14px;
  }

  /* toolbar buttons: stack nicely */
  .toolbar{
    display: flex;
    flex-wrap: wrap;        /* ✅ allow wrapping to next line when needed */
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }
  .toolbar .btn,
  .toolbar a,
  .toolbar form{
    flex: 0 0 auto;       /* ✅ do not stretch to fill row */
  }

  /* actions/buttons inside cards: stack */
  .card .actions{
    flex-direction:column;
    align-items:stretch;
  }
  .card .actions .btn,
  .card .actions a,
  .card .actions button{
    width:100%;
    margin-right:0;
  }

  /* generic “button clusters” in forms or cards */
  .card .formline > *{
    flex:1 1 100%;
  }
}

/* Even smaller devices: tighten a bit more */
@media (max-width: 400px){
  body{
    padding:8px;
    font-size:13px;
  }
  header.sam{
    padding:8px;
  }
  .card{
    padding:12px;
  }
}

/* ---- Print minimal ---- */
@media print{
  body{background:#fff; color:#111}
  .card, .top, header.sam{box-shadow:none; border-color:#ddd; background:#fff}
  a{text-decoration:underline; color:#0b1e39}
}