/* Topraq Breakeven Module — brand palette.
   Dashboard/admin: light theme. Login: dark brand moment. */
:root {
  /* Light (dashboard) palette */
  --blue: #2E75B6;          /* primary: buttons, active sliders, chart positive */
  --blue-hover: #4A90D9;    /* hover lift */
  --heading: #1F4E79;       /* deep blue: section headings */
  --green: #3E8E41;         /* success / breakeven / chart growth */
  --bg: #FAFAF9;
  --card: #ffffff;
  --line: #E5E7EB;          /* card borders */
  --muted: #8C8C8C;         /* muted text / hints / labels */
  --ink: #1f2733;
  --red: #C00000;           /* loss / warning */
  --light-blue: #D9E1F2;    /* table headers / hover */
  --light-green: #E2EFDA;   /* positive cells */
  --amber: #FFE699;         /* target-year highlight */
  --red-bg: #F8D7DA;

  /* Dark (login) palette */
  --dark-bg: #0A0A0A;
  --dark-surface: #1A1A1F;
  --dark-border: #2A2A30;
  --dark-text: #E5E5E5;

  --radius-card: 8px;
  --radius-ctl: 6px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.45;
}
h1, h2, h3 { margin: 0 0 .5rem; color: var(--heading); }
a { color: var(--blue); }
button { font-family: inherit; cursor: pointer; }

/* ===================== LOGIN (dark brand) ===================== */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--dark-bg); padding: 1.5rem;
}
.login-stack { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 360px; }
.login-logo { width: 240px; max-width: 80%; height: auto; display: block; margin-bottom: 1.75rem; }
.login-card {
  width: 100%; background: var(--dark-surface);
  border: 1px solid var(--dark-border); border-radius: 12px;
  padding: 32px; box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.login-card h1 { font-size: 16px; text-align: center; color: var(--dark-text); }
.login-rule { border: none; border-top: 1px solid var(--dark-border); margin: .85rem 0 1.4rem; }
.login-card .field label { color: var(--muted); }
.login-card input[type=email], .login-card input[type=password] {
  background: var(--dark-bg); border: 1px solid var(--dark-border);
  color: var(--dark-text);
}
.login-card input[type=email]:focus, .login-card input[type=password]:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46,117,182,.35);
}
.login-card .btn { background: var(--blue); }
.login-card .btn:hover { background: var(--blue-hover); }
.login-card .confidential { color: var(--muted); }
.login-card .error {
  background: rgba(192,0,0,.15); color: #ff9a9a; border: 1px solid rgba(192,0,0,.45);
}

/* shared form atoms */
.field { margin-bottom: .9rem; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: .3rem; }
input[type=email], input[type=password], input[type=text], input[type=number], select {
  width: 100%; padding: .55rem .65rem; border: 1px solid var(--line);
  border-radius: var(--radius-ctl); font-size: 14px; background: #fff; color: var(--ink);
}
input[type=email]:focus, input[type=password]:focus, input[type=text]:focus,
input[type=number]:focus, select:focus { outline: none; border-color: var(--blue); }
.btn {
  display: inline-block; width: 100%; padding: .6rem 1rem; border: none;
  border-radius: var(--radius-ctl); background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 600;
}
.btn:hover { background: var(--blue-hover); }
.btn-sm { width: auto; padding: .35rem .7rem; font-size: 12px; }
.btn-ghost { background: #fff; color: var(--blue); border: 1px solid var(--line); }
.btn-ghost:hover { background: #f3f7fb; }
.btn-danger { background: var(--red); color: #fff; }
.error {
  background: var(--red-bg); color: var(--red); border: 1px solid #f1aeb5;
  border-radius: var(--radius-ctl); padding: .55rem .7rem; font-size: 13px; margin-bottom: 1rem;
}
.confidential { text-align: center; font-size: 11px; color: var(--muted); margin-top: 1.1rem; }

/* ===================== TOP BAR ===================== */
.topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1rem;
  background: #fff; border-bottom: 1px solid var(--line); padding: 1rem 1.25rem;
}
.topbar img.brand { width: 160px; height: auto; }
.topbar .title { font-weight: 700; color: var(--heading); }
.topbar .spacer { flex: 1; }
.topbar .muted { color: var(--muted); font-size: 13px; }
.topbar a, .topbar button { font-size: 13px; }
.iconbtn { background: none; border: 1px solid var(--line); border-radius: 50%;
  width: 30px; height: 30px; color: var(--blue); font-weight: 700; }

/* ===================== LAYOUT ===================== */
.container { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem; }
.section { margin-bottom: 1.5rem; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 1rem;
}
.card h2 { font-size: 16px; }

/* ===================== CONTROLS ===================== */
.controls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.control label { display: block; font-size: 12px; color: var(--muted); margin-bottom: .35rem; font-weight: 600; }
.control .val { color: var(--blue); font-weight: 700; }
.control .val.val-neg { color: var(--red); }     /* OPEX reduction */
.control .val.val-pos { color: var(--ink); }      /* OPEX growth */
.control .val.val-zero { color: var(--muted); }    /* neutral */
/* slider with an emphasized neutral (0%) tick at centre */
.slider-wrap { position: relative; }
.slider-wrap .zero-tick {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 18px; background: var(--ink); border-radius: 1px;
  pointer-events: none; opacity: .55;
}
.readout .warn { color: var(--red); cursor: help; font-weight: 700; }
/* calculated readout under a slider — muted, reads as output not input */
.readout { font-size: 12px; color: var(--muted); margin-top: .35rem; line-height: 1.4; }
.readout .big { font-weight: 600; }
.readout .footnote { font-style: italic; }
.pillrow { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.pillrow button { border: none; background: #fff; padding: .45rem .85rem; font-size: 13px; color: var(--muted); }
.pillrow button.active { background: var(--blue); color: #fff; }
input[type=range] { width: 100%; accent-color: var(--blue); }

/* ===================== METRIC CARDS ===================== */
.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.metric { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1rem; }
.metric .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.metric .v { font-size: 22px; font-weight: 700; color: var(--heading); margin-top: .25rem; }
.metric .v.neg { color: var(--red); }
.metric .v.pos { color: var(--green); }
.metric .v.small { font-size: 15px; }   /* "No breakeven within plan" */

/* ===================== STATUS BAR ===================== */
.statusbar { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem;
  border-radius: var(--radius-card); font-weight: 600; font-size: 15px; }
.statusbar .dot { font-size: 18px; }
.status-red { background: var(--red-bg); color: var(--red); border: 1px solid #f1aeb5; }
.status-yellow { background: var(--amber); color: #7a5b00; border: 1px solid #e6c34d; }
.status-green { background: var(--light-green); color: var(--green); border: 1px solid #acd396; }

/* ===================== TABLES ===================== */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: .5rem .6rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { background: var(--light-blue); color: var(--heading); position: sticky; }
tbody tr:hover { background: #fafbfd; }
.row-target { background: var(--amber) !important; }
.row-target:hover { background: var(--amber) !important; }
.row-locked { background: #f1f3f5 !important; color: var(--muted); }   /* FY26 locked anchor */
.row-locked:hover { background: #f1f3f5 !important; }
.cell-green { background: var(--light-green); }
.cell-yellow { background: var(--amber); }
.cell-red { background: var(--red-bg); }
.cell-neutral { background: #fff; }
.num-neg { color: var(--red); }
.tag { font-size: 11px; padding: .1rem .4rem; border-radius: 4px; font-weight: 700; }
.tag-loss { background: var(--red-bg); color: var(--red); }
.tag-profit { background: var(--light-green); color: var(--green); }
.tag-breakeven { background: var(--amber); color: #7a5b00; }
.table-scroll { overflow-x: auto; }

/* ===================== TOOLTIPS ===================== */
.metric-name { position: relative; cursor: help; border-bottom: 1px dotted var(--muted); }
.metric-name .tip {
  display: none; position: absolute; left: 0; top: 130%; z-index: 80;
  width: 280px; background: #1b2430; color: #fff; padding: .6rem .7rem;
  border-radius: 6px; font-size: 12px; font-weight: 400; line-height: 1.4;
  text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.metric-name:hover .tip, .metric-name:focus .tip { display: block; }

/* ===================== ACTION PLAN ===================== */
.action-plan { background: var(--light-blue); border-radius: var(--radius-card); padding: 1rem; font-size: 14px; }

/* ===================== MODAL / OVERLAY ===================== */
.overlay { position: fixed; inset: 0; background: rgba(15,23,32,.45); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal { background: #fff; border-radius: var(--radius-card); padding: 1.25rem; width: 100%; max-width: 460px; }
.modal.wide { max-width: 720px; max-height: 85vh; overflow: auto; }
.row { display: flex; gap: .5rem; align-items: center; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.mt { margin-top: 1rem; } .mb { margin-bottom: 1rem; }
.hint { font-size: 12px; color: var(--muted); }
kbd { background:#eef1f6; border:1px solid var(--line); border-radius:4px; padding:0 .3rem; font-size:12px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .controls-grid { grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .metric-row { grid-template-columns: 1fr; }
  .topbar .muted.email { display: none; }
}