@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900&family=Kumbh+Sans:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════
   ROOT & VARIABLES
═══════════════════════════════════════════════════ */
#it-root {
  --navy:       #131e3b;
  --navy-mid:   #1c2d57;
  --navy-hover: #0d1628;
  --navy-light: #dde3f0;
  --blue-soft:  #f0f4fb;
  --green:      #16a34a;
  --green-bg:   #f0fdf4;
  --red:        #dc2626;
  --red-bg:     #fef2f2;
  --gold:       #d97706;
  --gold-bg:    #fffbeb;
  --border:     #d1d5db;
  --border-focus: #131e3b;
  --text:       #111827;
  --muted:      #6b7280;
  --white:      #ffffff;
  --radius:     10px;
  --shadow:     0 4px 24px rgba(19,30,59,.10), 0 1px 4px rgba(19,30,59,.06);

  font-family:  'Kumbh Sans', 'Roboto', sans-serif;
  color:        var(--text);
  max-width:    960px;
  margin:       0 auto;
  /* Outer padding — stops card touching page edges */
  padding:      28px 24px;
  box-sizing:   border-box;
}

#it-root * {
  box-sizing: border-box;

}
.it-goal-row span.it-input-prefix {
    top: 30px;
}
/* ═══════════════════════════════════════════════════
   CARD SHELL
═══════════════════════════════════════════════════ */
.it-card {
  background:    var(--white);
  border-radius: 18px;
  box-shadow:    var(--shadow);
  overflow:      hidden;
  border:        1px solid var(--navy-light);
}

/* ═══════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════ */
.it-header {
  background: var(--navy);
  padding:    28px 36px;
  display:    flex;
  align-items: center;
  gap:        28px;
}

.it-header-left  { flex: 1; min-width: 0; }

.it-header-eyebrow {
  font-size:      .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.45);
  font-weight:    700;
  margin-bottom:  6px;
}

.it-header h2 {
  font-size:   1.55rem;
  font-weight: 700;
  color:       #ffffff;
  line-height: 1.25;
}

/* ── Year pill ── */
.it-year-pill {
  background:    rgba(255,255,255,.1);
  border:        1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  padding:       4px 12px;
  font-size:     .76rem;
  color:         rgba(255,255,255,.7);
  font-weight:   600;
  letter-spacing:.06em;
  white-space:   nowrap;
  margin-top:    4px;
  display:       inline-block;
}

/* ═══════════════════════════════════════════════════
   PROGRESS CIRCLE  (styled like reference image 2)
═══════════════════════════════════════════════════ */
.it-circle-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  flex-shrink:    0;
}

.it-circle {
  position: relative;
  width:    108px;
  height:   108px;
}

.it-circle svg {
  width:     100%;
  height:    100%;
  transform: rotate(-90deg);
}

/* Track (background ring) */
.it-circle-bg {
  fill:         none;
  stroke:       rgba(255,255,255,.12);
  stroke-width: 7;
}

/* Animated arc */
.it-circle-fill {
  fill:              none;
  stroke-width:      7;
  stroke-linecap:    round;
  stroke-dasharray:  302;
  stroke-dashoffset: 302;
  transition:        stroke-dashoffset .7s cubic-bezier(.4,0,.2,1),
                     stroke .4s ease;
}

/* Centre text */
.it-circle-inner {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1px;
}

.it-circle-pct {
  font-size:   1.35rem;
  font-weight: 900;
  color:       #ffffff;
  line-height: 1;
  font-family: 'Roboto', sans-serif;
  letter-spacing: -.02em;
}

.it-circle-lbl {
  font-size:      .52rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color:          rgba(255,255,255,.45);
  font-weight:    600;
}

/* ═══════════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════════ */
.it-tabs {
  display:       flex;
  border-bottom: 2px solid var(--navy-light);
  background:    var(--white);
  padding:       0 36px;
  gap:           4px;
}

.it-tab {
  padding:       13px 20px;
  font-size:     .86rem;
  font-weight:   600;
  color:         var(--muted);
  cursor:        pointer;
  border:        none;
  background:    none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition:    color .2s, border-color .2s;
  font-family:   'Kumbh Sans', 'Roboto', sans-serif;
  letter-spacing:.01em;
  white-space:   nowrap;
}
.it-tab:hover  { color: var(--navy); }
.it-tab.active { color: var(--navy); border-bottom-color: var(--navy); }

/* ═══════════════════════════════════════════════════
   PANELS
═══════════════════════════════════════════════════ */
.it-panel        { display: none; padding: 32px 36px; }
.it-panel.active { display: block; }

/* ═══════════════════════════════════════════════════
   STAT CARDS ROW
═══════════════════════════════════════════════════ */
.it-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
  margin-bottom:         28px;
}

.it-stat {
  background:    var(--blue-soft);
  border:        1px solid var(--navy-light);
  border-radius: var(--radius);
  padding:       20px 22px;
}

.it-stat-label {
  display:        block;
  font-size:      .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--muted);
  font-weight:    700;
  margin-bottom:  10px;
}

.it-stat-value {
  display:     block;
  font-size:   1.6rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 6px;
  font-family: 'Roboto', sans-serif;
  letter-spacing: -.02em;
}

.it-stat-sub { font-size: .72rem; color: var(--muted); line-height: 1.4; }

.color-gold  { color: var(--gold);  }
.color-green { color: var(--green); }
.color-red   { color: var(--red);   }
.color-navy  { color: var(--navy);  }

/* ═══════════════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════════════ */
.it-progress-section { margin-bottom: 28px; }

.it-progress-label {
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--muted);
  margin-bottom:  10px;
}

.it-bar-row   { display: flex; align-items: center; gap: 14px; }

.it-bar-track {
  flex:          1;
  height:        10px;
  background:    var(--navy-light);
  border-radius: 99px;
  overflow:      hidden;
}

.it-bar-fill {
  height:        100%;
  border-radius: 99px;
  background:    var(--navy);
  min-width:     0;
  transition:    width .65s cubic-bezier(.4,0,.2,1), background .3s ease;
}

.it-bar-pct {
  font-size:   .82rem;
  font-weight: 700;
  color:       var(--navy);
  min-width:   42px;
  text-align:  right;
  font-family: 'Roboto', sans-serif;
}

/* ═══════════════════════════════════════════════════
   SECTION DIVIDER TITLE
═══════════════════════════════════════════════════ */
.it-section-title {
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color:          var(--navy);
  margin-bottom:  16px;
  padding-bottom: 10px;
  border-bottom:  2px solid var(--navy-light);
}

/* ═══════════════════════════════════════════════════
   GOAL ROW
═══════════════════════════════════════════════════ */
.it-goal-row {
  display:      flex;
  align-items:  center;
  gap:          20px;
  margin-bottom:28px;
  flex-wrap:    wrap;
}

.it-goal-label {
  font-size:   .86rem;
  font-weight: 700;
  color:       var(--navy);
  white-space: nowrap;
  min-width:   120px;
}

/* ── Input wrapper (for $ prefix approach) ── */
.it-field-wrap {
  position:  relative;
  flex:      1;
  min-width: 220px;
  max-width: 340px;
}

/* ═══════════════════════════════════════════════════
   INPUTS — site-matching style
   $ prefix is a label-based approach using padding
   to avoid overlap issues with type="number"
═══════════════════════════════════════════════════ */

/* Shared input reset */
input[type="number"].it-goal-input,
input[type="number"].it-month-input {
  -webkit-appearance: textfield;
  -moz-appearance:    textfield;
  appearance:         textfield;
}
input[type="number"].it-goal-input::-webkit-inner-spin-button,
input[type="number"].it-goal-input::-webkit-outer-spin-button,
input[type="number"].it-month-input::-webkit-inner-spin-button,
input[type="number"].it-month-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Goal input */
input.it-goal-input {
  width:          100%;
  display:        block;
  border:         1px solid var(--border);
  /* Generous left-pad for the $ label */
  padding:        13px 16px 13px 36px;
  font-family:    "Kumbh Sans", "Roboto", sans-serif;
  font-size:      1rem;
  font-weight:    700;
  color:          var(--navy);
  box-sizing:     border-box;
  border-radius:  var(--radius);
  background:     var(--white);
  outline:        none;
  transition:     border-color .2s, box-shadow .2s;
}
input.it-goal-input:focus {
  border-color: var(--navy);
  box-shadow:   0 0 0 3px rgba(19,30,59,.1);
}
input.it-goal-input::placeholder { color: #c0c4cc; font-weight: 400; }

/* Month input */
input.it-month-input {
  width:         100%;
  display:       block;
  border:        1px solid var(--border);
  padding:       12px 14px 12px 36px;
  font-family:   "Kumbh Sans", "Roboto", sans-serif;
  font-size:     .95rem;
  font-weight:   400;
  color:         var(--text);
  box-sizing:    border-box;
  margin-bottom: 0;
  border-radius: var(--radius);
  background:    var(--white);
  outline:       none;
  transition:    border-color .2s, box-shadow .2s, background .2s, font-weight .15s;
}
input.it-month-input:focus {
  border-color: var(--border-focus);
  box-shadow:   0 0 0 3px rgba(19,30,59,.1);
}
input.it-month-input::placeholder { color: #c0c4cc; }
input.it-month-input.filled {
  border-color: var(--navy);
  background:   var(--blue-soft);
  font-weight:  600;
  color:        var(--navy);
}

/* ── $ prefix label — positioned cleanly left of text ── */
.it-input-prefix {
  position:      absolute;
  left:          13px;
  top:           50%;
  transform:     translateY(-50%);
  font-size:     .95rem;
  font-weight:   500;
  color:         var(--muted);
  pointer-events:none;
  user-select:   none;
  z-index:       2;
  line-height:   1;
}

/* ── Month field wrapper ── */
.it-month-field {
  position: relative;
}
/* Inline $ prefix sits inside */
.it-month-field .it-input-prefix {
  left:  13px;
  color: var(--muted);
}
input.it-month-input.filled + .it-input-prefix,
.it-month-field:has(.filled) .it-input-prefix {
  color: var(--navy);
}

/* ═══════════════════════════════════════════════════
   MONTH GRID
═══════════════════════════════════════════════════ */
.it-months {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   18px 16px;
  margin-bottom:         28px;
}

.it-month-label {
  display:        block;
  font-size:      .76rem;
  font-weight:    700;
  color:          var(--navy);
  margin-bottom:  7px;
  letter-spacing: .01em;
}

/* ═══════════════════════════════════════════════════
   SAVE ACTIONS
═══════════════════════════════════════════════════ */
.it-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 4px;
    justify-content: end;
}

.it-save-btn {
  background:    var(--navy);
  color:         #ffffff;
  border:        none;
  border-radius: var(--radius);
  padding:       13px 36px;
  font-family:   'Kumbh Sans', 'Roboto', sans-serif;
  font-weight:   700;
  font-size:     .88rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:        pointer;
  transition:    background .2s, box-shadow .2s, transform .1s;
  line-height:   1;
}
.it-save-btn:hover    { background: var(--navy-hover); box-shadow: 0 5px 18px rgba(19,30,59,.28); }
.it-save-btn:active   { transform: translateY(1px); box-shadow: none; }
.it-save-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.it-save-msg {
  font-size:   .82rem;
  font-weight: 600;
  color:       var(--green);
  opacity:     0;
  transition:  opacity .3s;
}
.it-save-msg.show { opacity: 1; }

/* ═══════════════════════════════════════════════════
   HISTORY PANEL
═══════════════════════════════════════════════════ */
.it-history-empty {
  text-align:  center;
  padding:     60px 20px;
  color:       var(--muted);
  font-size:   .9rem;
  line-height: 1.7;
}
.it-history-empty strong {
  display:      block;
  color:        var(--navy);
  font-size:    1rem;
  font-weight:  700;
  margin-bottom:8px;
}

.it-history-meta {
  font-size:     .78rem;
  color:         var(--muted);
  margin-bottom: 16px;
  font-weight:   500;
}

/* ── Table ── */
.it-table-wrap {
  overflow-x:    auto;
  border-radius: var(--radius);
  border:        1px solid var(--navy-light);
}

.it-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .86rem;
  min-width:       560px;
}

.it-table thead tr {
  background: var(--navy);
}
.it-table thead th {
  padding:        13px 18px;
  text-align:     left;
  color:          rgba(255,255,255,.8);
  font-weight:    700;
  font-size:      .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space:    nowrap;
}

.it-table tbody tr {
  border-bottom: 1px solid var(--navy-light);
  transition:    background .15s;
}
.it-table tbody tr:last-child { border-bottom: none; }
.it-table tbody tr:hover      { background: var(--blue-soft); }

.it-table td {
  padding:        13px 18px;
  vertical-align: middle;
  line-height:    1.4;
}
.it-table td.it-td-date { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.it-table td.it-td-num  { font-weight: 700; font-family: 'Roboto', sans-serif; }

/* ── Badges ── */
.it-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       4px 11px;
  border-radius: 20px;
  font-size:     .7rem;
  font-weight:   700;
  letter-spacing:.04em;
  white-space:   nowrap;
}
.it-badge-green { background: var(--green-bg); color: var(--green); }
.it-badge-red   { background: var(--red-bg);   color: var(--red);   }
.it-badge-gold  { background: var(--gold-bg);  color: var(--gold);  }

/* ═══════════════════════════════════════════════════
   LOGIN MESSAGE
═══════════════════════════════════════════════════ */
.it-login-msg {
  background:    var(--white);
  border-radius: 18px;
  padding:       40px;
  text-align:    center;
  box-shadow:    var(--shadow);
  font-size:     .95rem;
  color:         var(--muted);
  border:        1px solid var(--navy-light);
}
.it-login-msg a { color: var(--navy); font-weight: 700; text-decoration: none; }
.it-login-msg a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 760px) {
  #it-root {
    padding: 16px 14px;
  }
  .it-header {
    padding: 22px 22px;
    gap:     18px;
  }
  .it-tabs  { padding: 0 22px; overflow-x: auto; }
  .it-panel { padding: 22px 22px; }

  .it-stats  { grid-template-columns: 1fr 1fr; gap: 12px; }
  .it-months { grid-template-columns: 1fr 1fr; gap: 14px 12px; }

  .it-circle { width: 90px; height: 90px; }
  .it-circle-pct { font-size: 1.15rem; }
}

@media (max-width: 520px) {
  #it-root { padding: 12px 10px; }

  .it-header { padding: 18px 18px; gap: 14px; }
  .it-header h2 { font-size: 1.15rem; }
  .it-tabs  { padding: 0 18px; }
  .it-panel { padding: 20px 18px; }

  .it-stats  { grid-template-columns: 1fr; gap: 10px; }
  .it-months { grid-template-columns: 1fr 1fr; gap: 12px 10px; }

  .it-stat-value { font-size: 1.35rem; }
  .it-circle     { width: 78px; height: 78px; }
  .it-circle-pct { font-size: 1rem; }
  .it-circle-lbl { font-size: .48rem; }

  .it-goal-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .it-field-wrap { max-width: 100%; min-width: unset; }

  .it-tab { padding: 11px 14px; font-size: .8rem; }
  .it-save-btn { width: 100%; text-align: center; padding: 14px; }
}

/* ── Status message below progress bar (v2) ── */
.it-status-msg {
  font-size:   .78rem;
  font-weight: 700;
  margin-top:  8px;
  padding:     8px 12px;
  border-radius: 6px;
  line-height: 1.4;
}
.it-status-green { background:#f0fdf4; color:#16a34a; }
.it-status-red   { background:#fef2f2; color:#dc2626; }