/* ============================================================
   Design system — Mendix Atlas (Lato) port.
   Brand primary near-black, Raleway body, Bebas Neue display,
   small 4px default radii, 8px inputs, 8px panels.

   Loaded via _base_css.html so every template that includes that
   partial picks up the same tokens, base resets, and primitive
   component styles. Page-specific styles live next to their
   feature (insights.css, deck-stacks.css, etc.).
   ============================================================ */

:root {
  --brand-primary:        #131313;
  --brand-primary-700:    #1f1f1f;
  --brand-primary-600:    #2a2a2a;
  --brand-primary-100:    #e5e5e5;
  --brand-primary-50:     #f3f3f3;
  --brand-success:        #008042;
  --brand-success-50:     #e6f5ec;
  --brand-warning:        #d88a31;
  --brand-warning-50:     #fbf2e7;
  --brand-danger:         #b00020;
  --brand-danger-50:      #fceaeb;
  --gray:                 #58595B;

  --bg-color:             #f9f9f9;
  --card-bg:              #ffffff;
  --panel-soft:           #f3f3f3;
  --topbar-bg:            #191919;

  --text-main:            #131313;
  --text-muted:           #58595B;
  --text-soft:            #8e8f91;
  --font-color-contrast:  #ffffff;

  --accent:               var(--brand-primary);
  --accent-hover:         var(--brand-primary-700);
  --accent-soft:          var(--brand-primary-50);
  --accent-strong:        var(--brand-primary);

  --error-color:          var(--brand-danger);
  --error-soft:           var(--brand-danger-50);
  --success:              var(--brand-success);
  --success-soft:         var(--brand-success-50);

  --border-color:         #e7e7e9;
  --border-strong:        #d4d4d6;
  --input-bg:             #ffffff;
  --hover-bg:             #f3f3f3;

  --radius-s:             4px;
  --radius-input:         6px;
  --radius-m:             8px;
  --radius-l:             12px;

  --shadow-sm:            0 2px 4px 0 rgba(19, 19, 19, 0.06);
  --shadow-md:            0 4px 6px 0 rgba(19, 19, 19, 0.08);
  --shadow-lg:            0 8px 10px 0 rgba(19, 19, 19, 0.12);

  --font-family-base:     'Raleway', 'Open Sans', 'Arial', sans-serif;
  --font-family-display:  'Bebas Neue', 'Raleway', 'Open Sans', sans-serif;
  --font-size-default:    15px;
  --font-size-small:      12px;
  --font-size-large:      18px;
  --font-size-h1:         32px;
  --font-size-h2:         26px;
  --font-size-h3:         24px;
  --font-size-h4:         18px;

  --spacing-smaller:      4px;
  --spacing-small:        8px;
  --spacing-medium:       16px;
  --spacing-large:        24px;
  --spacing-larger:       32px;
  --spacing-largest:      48px;
}

* { box-sizing: border-box; }
html, body { background: var(--bg-color); }
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-default);
  line-height: 1.428571429;
  margin: 0;
  color: var(--text-main);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-family: var(--font-family-base); margin: 0 0 var(--spacing-small); font-weight: 600; color: var(--text-main); }
h1 { font-family: var(--font-family-display); font-size: var(--font-size-h1); font-weight: 400; line-height: 1.1; }
h2 { font-family: var(--font-family-display); font-size: var(--font-size-h2); font-weight: 400; }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

p.subtitle { color: var(--text-muted); font-size: var(--font-size-large); margin: 0 0 var(--spacing-larger); font-weight: 400; }
.muted { color: var(--text-muted); }
.error { color: var(--error-color); background: var(--error-soft); border: 1px solid #f5c2c7; padding: 0.75rem 1rem; border-radius: var(--radius-m); }
.success { color: var(--success); }

.glass-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-m);
  padding: var(--spacing-large);
  box-shadow: var(--shadow-sm);
}

button, input[type=button], input[type=submit] {
  font-family: inherit;
  font-size: var(--font-size-default);
  font-weight: 500;
  background: var(--accent);
  color: var(--font-color-contrast);
  border: none;
  border-radius: var(--radius-input);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
button:hover { background: var(--accent-hover); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border-color); }
.btn-secondary:hover { background: var(--hover-bg); }
.btn-ghost { background: transparent; color: var(--text-muted); border: none; }
.btn-ghost:hover { background: var(--hover-bg); color: var(--text-main); }
.btn-icon { padding: 0.4rem 0.6rem; font-size: 0.85rem; line-height: 1; }
.btn-row { display: flex; gap: var(--spacing-small); }
.btn-row > button { flex: 1 1 0; width: auto; margin: 0; }

input[type=text], input[type=email], input[type=password], input[type=url], select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--font-size-default);
  padding: 0.6rem 0.8rem;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-input);
  color: var(--text-main);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); margin-bottom: var(--spacing-smaller); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.page-shell { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.page-shell-narrow { max-width: 720px; margin: 0 auto; padding: 1.5rem; }

/* Topnav */
.topnav {
  background: var(--topbar-bg);
  color: var(--font-color-contrast);
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}
.topnav-brand { display: flex; align-items: center; gap: 0.75rem; color: var(--font-color-contrast); font-family: var(--font-family-display); font-size: 1.4rem; letter-spacing: 0.02em; text-decoration: none; }
.topnav-brand:hover { text-decoration: none; opacity: 0.85; }
.topnav-actions { display: flex; align-items: center; gap: 0.6rem; }
.topnav-link { color: var(--font-color-contrast); padding: 0.4rem 0.8rem; border-radius: var(--radius-input); font-size: 0.9rem; opacity: 0.85; }
.topnav-link:hover { background: rgba(255,255,255,0.08); opacity: 1; text-decoration: none; }
.topnav-user { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.7rem 0.3rem 0.4rem; background: rgba(255,255,255,0.06); border-radius: 999px; font-size: 0.85rem; }
.topnav-user .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; }
.topnav-menu { position: relative; }
.topnav-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-m); min-width: 200px; box-shadow: var(--shadow-lg); padding: 0.4rem; display: none; }
.topnav-menu-panel.open { display: block; }
.topnav-menu-panel a, .topnav-menu-panel button { display: block; width: 100%; text-align: left; padding: 0.55rem 0.75rem; font-size: 0.88rem; color: var(--text-main); background: transparent; border: none; border-radius: var(--radius-s); cursor: pointer; }
.topnav-menu-panel a:hover, .topnav-menu-panel button:hover { background: var(--hover-bg); text-decoration: none; }
.topnav-menu-panel hr { border: none; border-top: 1px solid var(--border-color); margin: 0.3rem 0; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-card { background: var(--card-bg); border-radius: var(--radius-l); border: 1px solid var(--border-color); padding: 1.75rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); }
.tab-btn { background: transparent; color: var(--text-muted); border: none; padding: 0.4rem 0.8rem; font-weight: 500; font-size: 0.9rem; border-bottom: 2px solid transparent; border-radius: 0; }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); background: transparent; }
.tab-btn:hover { background: transparent; color: var(--text-main); }

/* Loader */
.loader { width: 16px; height: 16px; border: 2px solid var(--border-color); border-top-color: var(--accent); border-radius: 50%; animation: loader-spin 0.7s linear infinite; display: inline-block; }
@keyframes loader-spin { to { transform: rotate(360deg); } }

/* Report card — shared "section card" primitive used inside result panels
   (mana tab, and the look the insights/combos/swap cards already follow):
   white surface, 1px border, 3px accent left-stripe, uppercase label. */
.report-card { background: var(--card-bg); border: 1px solid var(--border-color); border-left: 3px solid var(--border-color); border-radius: var(--radius-m); padding: 1rem 1.15rem; margin-bottom: 1rem; }
.report-card:last-child { margin-bottom: 0; }
.report-card.accent { border-left-color: var(--accent); }
.report-card-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 0.7rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.report-card-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-soft); font-size: 0.76rem; }