/* Niyya look: Backup Storage Sizing Tool (BSZT).
   ok / warn / danger and the Word / Excel / PowerPoint buttons are kept. */

:root {
  --navy: var(--niyya-ink);
  --navy-700: var(--niyya-ink-2);
  --accent: var(--niyya-pink-ink);
  --accent-2: var(--niyya-pink);
  --ink: var(--niyya-ink);
  --muted: var(--niyya-muted);
  --line: var(--niyya-line);
  --bg: var(--niyya-paper);
  --card: #fff;
  --shadow: 0 1px 2px rgba(11, 11, 11, .04), 0 4px 16px rgba(11, 11, 11, .04);
}

/* ---- top bar ---- */
.topbar { box-shadow: none; border-bottom: 1px solid var(--niyya-ink); }
.brand small { color: var(--niyya-on-dark-2); }
.logo-mark { background: var(--niyya-ink-3); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.logo-mark span { color: var(--niyya-pink); }
.guest-note { color: var(--niyya-on-dark); }
.avatar { background: var(--niyya-pink); color: var(--niyya-ink); }
.btn-sso:hover { background: var(--niyya-paper-2); }
.sso-dot { background: var(--niyya-rainbow); }

/* ---- buttons and fields ---- */
.btn-primary { background: var(--niyya-ink); }
.btn-primary:hover { background: var(--niyya-ink-3); }
.panel-inputs .btn-ghost:hover, .modal .btn-ghost:hover { background: var(--niyya-paper-2); }
label { color: var(--niyya-text-2); }
input:focus, select:focus, textarea:focus { border-color: var(--niyya-pink); box-shadow: 0 0 0 3px rgba(240, 111, 168, .2); }
.range-row input[type=range] { accent-color: var(--niyya-ink); }
.card > summary:hover { background: var(--niyya-paper); }

/* ---- notes and results ---- */
.platform-note { background: var(--niyya-paper-2); border-left-color: var(--niyya-pink); color: var(--niyya-text-2); }
.input-table td, .out-table th, .out-table td { border-bottom-color: var(--niyya-paper-3); }
.metric { background: var(--niyya-paper); }
.metric.accent { background: linear-gradient(150deg, var(--niyya-ink) 0%, var(--niyya-ink-3) 100%); }
.metric.accent .m-label, .metric.accent .m-sub { color: var(--niyya-on-dark); }
.out-table th, .target-sub, .assumptions { color: var(--niyya-text-2); }
.out-table tr.sub th, .out-table tr.sub td { background: var(--niyya-paper); }
.model-table tr.chosen td { background: var(--niyya-pink-soft); }
.modal { background: rgba(11, 11, 11, .5); }
.tab.active { border-bottom-color: var(--niyya-pink); }

/* ---- sign-in page ---- */
.auth-page { background: var(--niyya-ink); }