/* alfa/styles.css — shared dashboard styles; directions differ via CSS vars + data-theme */

.alfa {
  --radius: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 100%; height: 100%;
  display: flex;
  background: var(--bg);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  font-size: 14px;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.alfa *, .alfa *::before, .alfa *::after { box-sizing: border-box; }
.alfa button { font-family: inherit; cursor: pointer; border: none; background: none; }

.alfa button { color: var(--ink); }
.alfa .alfa-nav-item, .alfa .alfa-sub button { color: var(--side-muted); }
.alfa .alfa-bell, .alfa .alfa-arrow { color: var(--muted); }

/* ---- aurora blobs ---- */
.alfa .blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }

/* ---- sidebar ---- */
.alfa-side {
  width: 248px; flex: 0 0 248px;
  display: flex; flex-direction: column;
  padding: 20px 14px;
  background: var(--side-bg);
  border-right: 1px solid var(--side-border);
  backdrop-filter: blur(14px);
  position: relative; z-index: 3;
}
.alfa-logo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 20px; }
.alfa-logo-mark {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--accent);
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 17px;
  box-shadow: 0 6px 16px color-mix(in oklch, var(--accent) 35%, transparent);
}
.alfa-logo-name { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; color: var(--side-ink); }
.alfa-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.alfa-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--side-muted); font-size: 14px; font-weight: 500;
  width: 100%; text-align: left;
  transition: background .15s, color .15s;
}
.alfa-nav-item:hover { background: var(--side-hover); color: var(--side-ink); }
.alfa-nav-item.active { background: var(--side-active-bg); color: var(--side-active-ink); font-weight: 600; box-shadow: var(--side-active-shadow); }
.alfa-nav-item .chev { margin-left: auto; transition: transform .2s; opacity: .6; }
.alfa-nav-item .chev.open { transform: rotate(180deg); }
.alfa-sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px; }
.alfa-sub button {
  display: block; text-align: left; width: 100%;
  padding: 8px 12px 8px 43px; border-radius: 10px;
  color: var(--side-muted); font-size: 13.5px;
}
.alfa-sub button:hover { color: var(--side-ink); background: var(--side-hover); }

/* ---- main column ---- */
.alfa-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 2; }

/* ---- header ---- */
.alfa-head {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 28px;
  background: var(--head-bg);
  border-bottom: 1px solid var(--head-border);
  backdrop-filter: blur(14px);
}
.alfa-hello { font-size: 15px; }
.alfa-hello b { font-weight: 700; }
.alfa-rank {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  background: linear-gradient(135deg, #eef1f6, #dfe5ee);
  color: #5d6b80; border: 1px solid #d3dae6;
}
.alfa-rank .dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa9bf; }
.alfa-lang {
  display: flex; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--chip-border); background: var(--chip-bg);
}
.alfa-lang button { padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--muted); }
.alfa-lang button.on { background: var(--ink); color: var(--bg-flat); }
.alfa-bell {
  position: relative; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; color: var(--muted);
  border: 1px solid var(--chip-border); background: var(--chip-bg);
}
.alfa-bell:hover { color: var(--ink); }
.alfa-bell .badge {
  position: absolute; top: 7px; right: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-flat);
}
.alfa-ava { position: relative; }
.alfa-ava > button {
  display: flex; align-items: center; gap: 8px;
  padding: 4px; border-radius: 999px;
}
.alfa-ava-img {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklch, var(--accent) 55%, #2b3a4d));
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.alfa-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px;
  background: var(--pop-bg); border: 1px solid var(--card-border);
  border-radius: 14px; box-shadow: 0 18px 40px rgba(20, 35, 50, .14);
  padding: 6px; z-index: 50; backdrop-filter: blur(18px);
}
.alfa-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: 9px; font-size: 13.5px; color: var(--ink); text-align: left;
}
.alfa-menu button:hover { background: var(--side-hover); }
.alfa-menu .sep { height: 1px; background: var(--card-border); margin: 5px 4px; }
.alfa-menu .danger { color: #d4554a; }

/* ---- content ---- */
.alfa-body { flex: 1; padding: 24px 28px; display: flex; flex-direction: column; gap: 22px; min-height: 0; }

/* ---- cards ---- */
.alfa-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(var(--card-blur));
}

/* stat cards */
.alfa-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.alfa-stat { padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.alfa-stat .icon-chip {
  position: absolute; top: 20px; right: 20px;
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  color: var(--accent);
}
.alfa-stat .lbl { font-size: 13px; color: var(--muted); font-weight: 500; }
.alfa-stat .big { font-size: 30px; font-weight: 700; letter-spacing: -0.6px; margin-top: 2px; }
.alfa-stat .sub { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.alfa-up {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 13%, transparent); color: var(--accent);
}
.alfa-stat .cta { margin-top: 14px; }

/* buttons */
.alfa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: 12px; font-size: 13px; font-weight: 600;
  transition: filter .15s, background .15s;
}
.alfa-btn.primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px color-mix(in oklch, var(--accent) 30%, transparent); }
.alfa-btn.primary:hover { filter: brightness(1.06); }
.alfa-btn.ghost { background: var(--chip-bg); border: 1px solid var(--chip-border); color: var(--ink); }
.alfa-btn.ghost:hover { background: var(--side-hover); }

/* middle row */
.alfa-mid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 20px; min-height: 0; }
.alfa-panel { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.alfa-panel h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.alfa-panel .head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* segmented + chips */
.alfa-seg { display: flex; gap: 4px; background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: 11px; padding: 3px; }
.alfa-seg button { padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.alfa-seg button.on { background: var(--seg-on-bg); color: var(--seg-on-ink); box-shadow: 0 2px 6px rgba(25, 40, 55, .10); }
.alfa-chips { display: flex; gap: 6px; align-items: center; }
.alfa-chips button {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--muted); border: 1px solid transparent;
}
.alfa-chips button.on { background: color-mix(in oklch, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in oklch, var(--accent) 25%, transparent); }
.alfa-dates { display: flex; gap: 8px; align-items: center; }
.alfa-dates input {
  font-family: inherit; font-size: 12px; padding: 5px 9px; border-radius: 9px;
  border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--ink);
}

/* legend */
.alfa-legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.alfa-legend span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.alfa-legend i { width: 10px; height: 10px; border-radius: 4px; display: inline-block; }

/* table */
.alfa-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.alfa-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--card-border);
}
.alfa-table td { padding: 11px 10px; border-bottom: 1px solid var(--row-border); }
.alfa-table tr:last-child td { border-bottom: none; }
.alfa-table .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.alfa-table .amt.neg { color: #c8564b; }
.alfa-table .amt.pos { color: var(--accent); }
.alfa-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.alfa-status i { width: 6px; height: 6px; border-radius: 50%; }
.alfa-status.ok { background: color-mix(in oklch, var(--accent) 12%, transparent); color: var(--accent); }
.alfa-status.ok i { background: var(--accent); }
.alfa-status.pending { background: #f4ecd9; color: #a07c1f; }
.alfa-status.pending i { background: #cfa53a; }
.alfa-status.declined { background: #f7e3e1; color: #c8564b; }
.alfa-status.declined i { background: #c8564b; }

/* news */
.alfa-news-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.alfa-news-card {
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  background: var(--news-bg); border: 1px solid var(--card-border);
  transition: transform .18s, box-shadow .18s; cursor: pointer;
}
.alfa-news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(25, 45, 60, .12); }
.alfa-news-img {
  height: 110px; position: relative; display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, var(--ph-a) 0 10px, var(--ph-b) 10px 20px);
}
.alfa-news-img span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px;
  color: var(--muted); background: color-mix(in srgb, var(--bg-flat) 80%, transparent);
  padding: 3px 8px; border-radius: 6px;
}
.alfa-news-meta { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 7px; }
.alfa-news-meta .row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.alfa-tag { padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px; }
.alfa-tag.company { background: color-mix(in oklch, var(--accent) 13%, transparent); color: var(--accent); }
.alfa-tag.announce { background: #e8ecf9; color: #4a62b8; }
.alfa-tag.events { background: #f3e9f7; color: #95569f; }
.alfa-news-meta h4 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -0.1px; text-wrap: pretty; }
.alfa-arrow {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--muted);
}
.alfa-arrow:hover:not(:disabled) { color: var(--ink); background: var(--side-hover); }
.alfa-arrow:disabled { opacity: .35; cursor: default; }

/* footer */
.alfa-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--head-border);
}
.alfa-foot .links { display: flex; gap: 18px; }
.alfa-foot a { color: var(--muted); text-decoration: none; }
.alfa-foot a:hover { color: var(--ink); }

/* ================= DIRECTION TOKENS ================= */

/* A — Porcelain: solid white cards, hairlines, calm */
.alfa[data-theme="porcelain"] {
  --bg: linear-gradient(180deg, #f3f7f5 0%, #eef3f1 100%);
  --bg-flat: #f3f7f5;
  --ink: #1d2733; --muted: #71808f;
  --card-bg: #ffffff; --card-border: #e5ebe8; --card-blur: 0px;
  --card-shadow: 0 1px 2px rgba(25, 45, 60, .04), 0 10px 28px rgba(25, 45, 60, .05);
  --pop-bg: #ffffff;
  --side-bg: #ffffff; --side-border: #e5ebe8;
  --side-ink: #1d2733; --side-muted: #71808f;
  --side-hover: #f1f5f3;
  --side-active-bg: color-mix(in oklch, var(--accent) 11%, white);
  --side-active-ink: var(--accent); --side-active-shadow: none;
  --head-bg: rgba(255, 255, 255, .75); --head-border: #e5ebe8;
  --chip-bg: #f4f7f6; --chip-border: #e3e9e6;
  --seg-on-bg: #ffffff; --seg-on-ink: var(--ink);
  --row-border: #f0f4f2;
  --news-bg: #fbfdfc;
  --ph-a: #eef3f0; --ph-b: #e6ede9;
}

/* B — Aurora: gradient blobs + frosted translucent cards */
.alfa[data-theme="aurora"] {
  --bg: linear-gradient(160deg, #f2f8f4 0%, #eef4fa 55%, #f5f2fa 100%);
  --bg-flat: #f1f7f4;
  --ink: #18222e; --muted: #69788a;
  --card-bg: rgba(255, 255, 255, .62); --card-border: rgba(255, 255, 255, .85); --card-blur: 22px;
  --card-shadow: 0 2px 4px rgba(30, 50, 70, .04), 0 18px 44px rgba(30, 50, 70, .09);
  --pop-bg: rgba(255, 255, 255, .92);
  --side-bg: rgba(255, 255, 255, .55); --side-border: rgba(255, 255, 255, .8);
  --side-ink: #18222e; --side-muted: #69788a;
  --side-hover: rgba(255, 255, 255, .65);
  --side-active-bg: rgba(255, 255, 255, .92);
  --side-active-ink: var(--accent);
  --side-active-shadow: 0 6px 18px rgba(30, 50, 70, .1);
  --head-bg: rgba(255, 255, 255, .45); --head-border: rgba(255, 255, 255, .75);
  --chip-bg: rgba(255, 255, 255, .55); --chip-border: rgba(255, 255, 255, .9);
  --seg-on-bg: #ffffff; --seg-on-ink: var(--ink);
  --row-border: rgba(120, 140, 160, .12);
  --news-bg: rgba(255, 255, 255, .72);
  --ph-a: rgba(255, 255, 255, .5); --ph-b: rgba(228, 238, 234, .6);
  --radius: 22px;
}

/* C — Ink & Air: dark glass sidebar, airy white content, pill nav */
.alfa[data-theme="ink"] {
  --bg: #f6f8f7;
  --bg-flat: #f6f8f7;
  --ink: #1b2530; --muted: #74828f;
  --card-bg: #ffffff; --card-border: #eaeeec; --card-blur: 0px;
  --card-shadow: 0 14px 34px rgba(22, 40, 55, .07);
  --pop-bg: #ffffff;
  --side-bg: linear-gradient(175deg, #16241f 0%, #0f1a16 100%);
  --side-border: transparent;
  --side-ink: #f0f5f2; --side-muted: #8da39a;
  --side-hover: rgba(255, 255, 255, .07);
  --side-active-bg: var(--accent);
  --side-active-ink: #ffffff;
  --side-active-shadow: 0 8px 20px color-mix(in oklch, var(--accent) 40%, transparent);
  --head-bg: transparent; --head-border: #e8edeb;
  --chip-bg: #ffffff; --chip-border: #e4e9e7;
  --seg-on-bg: #1b2530; --seg-on-ink: #ffffff;
  --row-border: #f1f4f3;
  --news-bg: #ffffff;
  --ph-a: #eff3f1; --ph-b: #e7ede9;
  --radius: 24px;
}
.alfa[data-theme="ink"] .alfa-side { padding: 24px 16px; }
.alfa[data-theme="ink"] .alfa-nav-item { border-radius: 999px; }
.alfa[data-theme="ink"] .alfa-logo-mark { background: var(--accent); }
.alfa[data-theme="ink"] .alfa-rank { background: rgba(255,255,255,.0); }