/* ============================================================================
   SimpleAgentRE — Framework Core
   Reset + base typography + shared components + utility layer.
   Colors/spacing/fonts come ONLY from tokens.css (no hardcoded brand values),
   so a brokerage framework or agent theme can restyle everything.

   This file is the single home for components currently duplicated across
   pages (.btn lives in 12 files, .topbar in 10, .modal/.sidebar in 4 each).
   During Task 4 those per-page copies get deleted; deltas reconcile here.
   ========================================================================== */

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}
a { color: var(--color-primary-bright); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── App shell ───────────────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--color-bg-deep);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  /* position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; */
  overflow-y: auto;
}
.sidebar-logo { padding: 1.75rem 1.5rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.sidebar-logo .brand {
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .05em;
  color: var(--color-text); display: block;
}
.sidebar-logo .brand span { color: var(--color-accent); }
.sidebar-logo .portal-tag {
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-muted); margin-top: .2rem; display: block;
}

.sidebar-nav { padding: 1rem 0; flex: 1; }
.nav-section-label {
  font-size: .65rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-text-muted); padding: .75rem 1.5rem .4rem;
}
.nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1.5rem; font-size: .875rem;
  color: var(--color-text-faint); cursor: pointer;
  border-left: 2px solid transparent; transition: all var(--transition);
  background: none; border-top: none; border-bottom: none; border-right: none;
  width: 100%; text-align: left;
}
.nav-item:hover { color: var(--color-text); background: rgba(255,255,255,.04); }
.nav-item.active {
  color: var(--color-primary-bright); background: var(--color-primary-soft);
  border-left-color: var(--color-primary); font-weight: 500;
}
.nav-icon { width: 18px; height: 18px; opacity: .7; flex-shrink: 0; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-badge {
  margin-left: auto; background: var(--color-primary); color: var(--color-on-primary);
  font-size: .65rem; font-weight: 500; padding: .15rem .5rem; border-radius: var(--radius-pill);
}

.sidebar-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm); color: var(--color-text-muted); }
.sidebar-footer a { color: var(--color-primary-bright); }

.main { 
    /*margin-left: var(--sidebar-w);*/
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto; }

.topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  padding: var(--topbar-pad-y) var(--topbar-pad-x);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 40; backdrop-filter: blur(8px);
}
.topbar-title { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: .05em; color: var(--topbar-text); }
.topbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--color-gradient-1), var(--color-gradient-2));
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
  font-size: var(--fs-xs); letter-spacing: 0.05em; flex-shrink: 0; border: 1px solid var(--color-gradient-border);
}
.topbar-actions { display: flex; align-items: center; gap: .75rem; }
.toolbar-left   { display: flex; align-items: center; gap: .5rem; flex:1; flex-wrap:wrap }
.toolbar-right  { display: flex; align-items: center; gap: .4rem; flex-shrink: 0 }

.back-btn { display:flex; align-items:center; gap:.4rem; color: var(--color-text-muted); font-size:.82rem;
  text-decoration:none; padding:.4rem .75rem; border: 1px solid var(--color-border);
  border-radius: 8px; transition:all .15s }
.back-btn:hover{ color: var(--color-text); border-color: var(--color-text-muted); }
.count-lbl{font-size:.82rem;color: var(--color-text-faint); }

/* Hamburger button — hidden on desktop */
.topbar-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--topbar-bg);
  cursor: pointer;
  color: var(--topbar-text);
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.topbar-hamburger:hover { background: var(--topbar-hover); }

.page-content { padding: var(--space-6); flex: 1; }

/* ── Surfaces ────────────────────────────────────────────────────────── */
.card, .panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.section-heading {
  font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .06em;
  color: var(--color-primary-bright); margin: 1.75rem 0 1rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────
   One base + intent modifiers. The many legacy aliases (.btn-save, -preview,
   -submit, -blue, -green, -red, -add, -new …) are mapped to these intents so
   existing markup keeps working until the HTML is updated in Task 2/4.
   ----------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: .875rem; font-weight: 500;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: all var(--transition); text-decoration: none;
  background: var(--color-surface-2); color: var(--color-text);
}
.btn:hover { background: rgba(255,255,255,.12); }
.btn-sm { padding: .45rem .8rem; font-size: var(--fs-sm); }

.btn-primary, .btn-submit, .btn-blue, .btn-generate, .btn-send-active, .btn-login {
  background: var(--color-primary); color: var(--color-on-primary); border-color: transparent;
}
.btn-primary:hover, .btn-submit:hover, .btn-blue:hover, .btn-generate:hover,
.btn-send-active:hover, .btn-login:hover { background: var(--color-primary-hover); transform: translateY(-1px); }

.btn-secondary, .btn-save, .btn-sec, .btn-cancel, .btn-reset {
  background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border);
}
.btn-secondary:hover, .btn-save:hover, .btn-sec:hover, .btn-cancel:hover, .btn-reset:hover {
  background: rgba(255,255,255,.12);
}

.btn-accent, .btn-preview, .btn-attach-client, .btn-open, .btn-edit, .btn-note {
  background: var(--color-primary-soft); color: var(--color-primary-bright);
  border-color: var(--color-primary-line);
}
.btn-accent:hover, .btn-preview:hover, .btn-attach-client:hover, .btn-open:hover,
.btn-edit:hover, .btn-note:hover { background: rgba(96,165,250,.2); }

.btn-success, .btn-green { background: var(--color-success); color: var(--color-on-primary); }
.btn-success:hover, .btn-green:hover { background: var(--color-success-deep); }

.btn-danger, .btn-red, .btn-del, .btn-delete, .btn-disable {
  background: var(--color-danger-soft); color: #fca5a5; border-color: rgba(239,68,68,.3);
}
.btn-danger:hover, .btn-red:hover, .btn-del:hover, .btn-delete:hover, .btn-disable:hover {
  background: rgba(239,68,68,.2);
}

.btn-ghost, .btn-outline {
  background: transparent; color: var(--color-text-muted); border-color: var(--color-border);
}
.btn-ghost:hover, .btn-outline:hover { color: var(--color-text); background: rgba(255,255,255,.05); }

.btn:disabled, .btn-send-disabled, [disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ── Form controls ───────────────────────────────────────────────────── */
.field-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field-group label {
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-faint);
}
.field-group label .req { color: var(--color-accent); margin-left: 2px; }

input, select, textarea,
.field-group input, .field-group select, .field-group textarea {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--control-pad-y) var(--control-pad-x);
  font-size: .92rem; color: var(--color-text);
  font-family: var(--font-body); outline: none; width: 100%;
  transition: border-color .2s, background .2s;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.2); }
input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary-hover); background: var(--color-primary-soft);
}
select option { background: var(--color-elevated); color: var(--color-text); }
textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
.field-row.full  { grid-template-columns: 1fr; }
.field-hint { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.4; }

/* ── Badges / pills ──────────────────────────────────────────────────── */
.badge, .pill {
  display: inline-block; font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-primary-bright); background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-line);
  padding: .3rem .8rem; border-radius: var(--radius-pill);
}

/* ── Modals ──────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65);
  z-index: 200; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  max-width: 560px; width: 100%; padding: var(--space-6);
}

/* ── Tables ──────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--color-border-soft); }
th { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }

/* ── Utility layer ────────────────────────────────────────────────────────
   These are the targets for Task 2: inline styles like style="display:flex;
   gap:8px;margin-top:10px" become class="u-flex u-gap-2 u-mt-3".
   ----------------------------------------------------------------------- */
.u-flex   { display: flex; }
.u-iflex  { display: inline-flex; }
.u-grid   { display: grid; }
.u-block  { display: block; }
.u-inline { display: inline-block; }
.u-none   { display: none; }
.u-wrap   { flex-wrap: wrap; }
.u-col    { flex-direction: column; }
.u-center { align-items: center; justify-content: center; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end { justify-content: flex-end; }
.u-flex-1 { flex: 1; }
.u-w-full { width: 100%; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-muted  { color: var(--color-text-muted); }
.u-primary{ color: var(--color-primary-bright); }
.u-danger { color: var(--color-danger); }
.u-success{ color: var(--color-success); }
.u-bold   { font-weight: 600; }
.u-nowrap { white-space: nowrap; }
.u-hidden { display: none !important; }
.u-rounded{ border-radius: var(--radius-md); }

.u-gap-1 { gap: var(--space-1); } .u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); } .u-gap-4 { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); } .u-gap-6 { gap: var(--space-6); }

.u-m-0 { margin: 0; }
.u-mt-1{margin-top:var(--space-1);} .u-mt-2{margin-top:var(--space-2);} .u-mt-3{margin-top:var(--space-3);}
.u-mt-4{margin-top:var(--space-4);} .u-mt-5{margin-top:var(--space-5);} .u-mt-6{margin-top:var(--space-6);}
.u-mb-1{margin-bottom:var(--space-1);} .u-mb-2{margin-bottom:var(--space-2);} .u-mb-3{margin-bottom:var(--space-3);}
.u-mb-4{margin-bottom:var(--space-4);} .u-mb-5{margin-bottom:var(--space-5);} .u-mb-6{margin-bottom:var(--space-6);}
.u-p-3{padding:var(--space-3);} .u-p-4{padding:var(--space-4);} .u-p-5{padding:var(--space-5);} .u-p-6{padding:var(--space-6);}

/* ── Responsive (shell) ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  /*.sidebar { transform: translateX(-100%); transition: transform .2s; } */
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .topbar { padding: .75rem 1rem; }
  .field-row, .field-row.three { grid-template-columns: 1fr; }
}