/* ==========================================================================
   Coach OS — Goals page
   Scoped to body[data-route="goals"]. app.css carries nine duplicated copies
   of the old per-page stylesheets, so several rules here need !important to
   beat the last duplicate that happens to win the cascade.
   Grivaa palette: navy #0B1F3A · orange #F97316 · ivory #FAF7F2
   ========================================================================== */

body[data-route="goals"]{
  --gv-navy:#0B1F3A;
  --gv-navy-2:#16324F;
  --gv-navy-3:#294A6E;
  --gv-orange:#F97316;
  --gv-orange-2:#EA6A0C;
  --gv-orange-soft:#FFF3E8;
  --gv-orange-line:#F8D3B0;
  --gv-ivory:#FAF7F2;
  --gv-ivory-2:#F4EFE7;
  --gv-ink:#16263B;
  --gv-muted:#77859A;
  --gv-placeholder:#B4BECB;
  --gv-line:#E9E2D8;
  --gv-line-2:#F1ECE4;
  --gv-green:#0E8A54;
  --gv-green-soft:#E9F6EF;
  --gv-red:#B42318;
  --gv-font:Inter,"Noto Sans Devanagari","Nirmala UI",Arial,sans-serif;
}
body[data-route="goals"] .main{background:var(--gv-ivory)}

/* ==========================================================================
   1. METRICS ROW
   The winning rule in app.css is `#module-root .summary .metric` with
   display:flex and min-height:112px — written for a metric that has an icon
   and a text wrapper. Goals renders neither, so the label and number sat
   side by side inside a 112px-tall empty box. Reset it here.
   ========================================================================== */
body[data-route="goals"] #module-root .summary{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  margin-bottom:14px;
}
body[data-route="goals"] #module-root .summary .metric{
  position:relative;
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  padding:13px 14px!important;
  background:#fff!important;
  border:1px solid var(--gv-line)!important;
  border-right:1px solid var(--gv-line)!important;
  border-radius:12px!important;
  overflow:hidden;
}
body[data-route="goals"] #module-root .summary .metric label{
  display:block!important;
  margin:0!important;
  color:var(--gv-muted)!important;
  font-family:var(--gv-font);
  font-size:10.5px!important;font-weight:600!important;line-height:1.3!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body[data-route="goals"] #module-root .summary .metric strong{
  display:block!important;
  margin-top:6px!important;
  color:var(--gv-navy)!important;
  font-size:22px!important;font-weight:600!important;line-height:1.05!important;
}
/* accent edge: 2nd = active (green), 3rd = needs attention (orange) */
body[data-route="goals"] #module-root .summary .metric:nth-child(2)::before,
body[data-route="goals"] #module-root .summary .metric:nth-child(3)::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
}
body[data-route="goals"] #module-root .summary .metric:nth-child(2)::before{background:var(--gv-green)}
body[data-route="goals"] #module-root .summary .metric:nth-child(3)::before{background:var(--gv-orange)}

/* ==========================================================================
   2. TABS AND FILTERS
   ========================================================================== */
body[data-route="goals"] #module-root .panel{
  background:#fff;border:1px solid var(--gv-line);border-radius:14px;overflow:visible;
}
body[data-route="goals"] .tabs{
  display:flex;gap:4px;
  padding:6px 10px 0;
  border-bottom:1px solid var(--gv-line-2);
}
body[data-route="goals"] .tabs .tab{
  position:relative;
  height:40px;padding:0 14px;
  border:0;background:none;
  color:var(--gv-muted);
  font-family:var(--gv-font);font-size:12.5px;font-weight:600;
  cursor:pointer;
}
body[data-route="goals"] .tabs .tab:hover{color:var(--gv-navy-2)}
body[data-route="goals"] .tabs .tab.active{color:var(--gv-navy)}
body[data-route="goals"] .tabs .tab.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  border-radius:2px;background:var(--gv-orange);
}

body[data-route="goals"] .filters{
  display:grid;
  grid-template-columns:minmax(180px,1.6fr) repeat(4,minmax(120px,1fr)) auto;
  gap:10px;
  padding:12px;
}
body[data-route="goals"] .filters .control{
  position:relative;
  height:46px;
  padding:6px 12px;
  display:flex;flex-direction:column;justify-content:center;gap:0;
  border:1px solid var(--gv-line);
  border-radius:11px;
  background:#fff;
}
body[data-route="goals"] .filters .control:focus-within{
  border-color:var(--gv-orange-line);
  box-shadow:0 0 0 3px rgba(249,115,22,.1);
}
body[data-route="goals"] .gv-lbl{
  display:block;
  color:var(--gv-muted);
  font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  line-height:1.2;
}
body[data-route="goals"] .filters .control select,
body[data-route="goals"] .filters .control input{
  width:100%;border:0;outline:0;background:transparent;
  color:var(--gv-navy);
  font-family:var(--gv-font);font-size:12px;font-weight:500;
  padding:0;height:auto;
}
body[data-route="goals"] .filters .control input::placeholder{color:var(--gv-placeholder);font-weight:400}
body[data-route="goals"] .filters .control select{
  appearance:none;-webkit-appearance:none;
  padding-right:20px;
  background-image:
    linear-gradient(45deg,transparent 50%,#77859A 50%),
    linear-gradient(135deg,#77859A 50%,transparent 50%);
  background-position:calc(100% - 9px) 7px,calc(100% - 5px) 7px;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
}
/* the search control keeps its icon on the left */
body[data-route="goals"] .filters .control:first-child{
  flex-direction:row;align-items:center;gap:9px;
}
body[data-route="goals"] .filters .control svg{
  width:15px;height:15px;flex:0 0 15px;stroke:var(--gv-muted);fill:none;
}
body[data-route="goals"] #resetFilters{
  height:46px;padding:0 16px;
  border:1px solid var(--gv-line);border-radius:11px;
  background:#fff;color:var(--gv-navy);
  font-family:var(--gv-font);font-size:12.5px;font-weight:600;cursor:pointer;
}
body[data-route="goals"] #resetFilters:hover{border-color:var(--gv-navy-3)}

/* ==========================================================================
   3. GOAL CARDS
   The card printed eight meta boxes. Keep the three that matter and move
   them to a single footer line.
   ========================================================================== */
body[data-route="goals"] .layout{
  grid-template-columns:minmax(0,1fr) 300px;
  gap:14px;align-items:start;
}
body[data-route="goals"] .panel-head{
  min-height:0;padding:14px 16px 0;border-bottom:0;
}
body[data-route="goals"] .panel-head h2{
  color:var(--gv-muted);
  font-family:var(--gv-font);
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
body[data-route="goals"] .panel-head .sub{
  color:var(--gv-muted);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
body[data-route="goals"] .goal-grid{
  grid-template-columns:1fr;
  gap:12px;
}
body[data-route="goals"] .goal-card{
  padding:16px 18px;
  border:1px solid var(--gv-line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 2px rgba(11,31,58,.04);
}
body[data-route="goals"] .goal-head{
  display:flex;align-items:flex-start;gap:14px;margin-bottom:12px;
}
body[data-route="goals"] .goal-card h3{
  margin:0 0 4px;
  color:var(--gv-navy);
  font-family:var(--gv-font);
  font-size:14.5px;font-weight:600;letter-spacing:-.2px;
}
body[data-route="goals"] .goal-card .goal-head p{
  margin:0;color:var(--gv-muted);font-size:11.5px;line-height:1.5;
}
body[data-route="goals"] .goal-card .badge{
  flex:0 0 auto;
  padding:4px 12px;border-radius:999px;
  font-size:10.5px;font-weight:600;
}

/* progress */
body[data-route="goals"] .progress-row{margin:0}
body[data-route="goals"] .progress-row .label{
  display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;
  color:var(--gv-muted);font-size:11px;
}
body[data-route="goals"] .progress-row .bar{
  height:6px;border-radius:3px;background:var(--gv-line-2);overflow:hidden;
}
body[data-route="goals"] .progress-row .bar span{
  display:block;height:100%;border-radius:3px;background:var(--gv-orange);
}

/* meta: keep category, target date and milestones only, as one quiet line */
body[data-route="goals"] .goal-meta{
  display:flex!important;
  flex-wrap:wrap;
  gap:0 22px;
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid var(--gv-line-2);
}
body[data-route="goals"] .goal-meta .meta-box{
  display:none;
  padding:0;border:0;background:none;
}
body[data-route="goals"] .goal-meta .meta-box:nth-child(1),
body[data-route="goals"] .goal-meta .meta-box:nth-child(2),
body[data-route="goals"] .goal-meta .meta-box:nth-child(7){
  display:flex;align-items:baseline;gap:7px;
}
body[data-route="goals"] .goal-meta .meta-box label{
  margin:0;color:var(--gv-muted);font-size:10.5px;font-weight:500;
}
body[data-route="goals"] .goal-meta .meta-box strong{
  color:var(--gv-navy-2);font-size:11px;font-weight:600;
}

body[data-route="goals"] .goal-foot{
  display:flex;align-items:center;gap:10px;margin-top:14px!important;
}
body[data-route="goals"] .goal-foot .btn{
  height:34px;padding:0 15px;
  border:1px solid var(--gv-line);border-radius:10px;
  background:#fff;color:var(--gv-navy);
  font-family:var(--gv-font);font-size:12px;font-weight:600;
}
body[data-route="goals"] .goal-foot .btn:hover{border-color:var(--gv-navy-3)}
body[data-route="goals"] .goal-foot .iconbtn{
  width:34px;height:34px;border:1px solid var(--gv-line);border-radius:10px;background:#fff;
}

/* ==========================================================================
   4. RIGHT COLUMN
   A later duplicate in app.css sets .side-card padding to 0 and the heading
   margin to 0, which is why "Goal Snapshot" sat on top of its own rows.
   ========================================================================== */
body[data-route="goals"] .right{gap:12px}
body[data-route="goals"] .right .side-card{
  padding:14px 15px!important;
  background:#fff;
  border:1px solid var(--gv-line);
  border-radius:13px;
  overflow:visible!important;
  box-shadow:0 1px 2px rgba(11,31,58,.04);
}
body[data-route="goals"] .right .side-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0!important;margin:0 0 10px!important;
}
body[data-route="goals"] .right .side-card h3{
  display:flex;align-items:center;gap:8px;
  margin:0!important;
  color:var(--gv-navy);
  font-family:var(--gv-font);
  font-size:10px!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
body[data-route="goals"] .right .side-card h3::before{
  content:"";width:12px;height:2px;border-radius:2px;background:var(--gv-orange);flex:0 0 12px;
}
body[data-route="goals"] .right .accordion-body{
  display:block!important;padding:0!important;
}
body[data-route="goals"] .right .mobile-toggle{display:none}
body[data-route="goals"] .right .side-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;
  border-bottom:1px dashed var(--gv-line-2);
  font-size:11.5px;
}
body[data-route="goals"] .right .side-row:last-child{border-bottom:0}
body[data-route="goals"] .right .side-row span{color:var(--gv-muted)}
body[data-route="goals"] .right .side-row strong{color:var(--gv-navy);font-weight:600}
body[data-route="goals"] .right .privacy{
  padding:12px 13px;border-radius:10px;
  background:var(--gv-ivory);border:1px solid var(--gv-line);
  color:var(--gv-muted);font-size:11px;line-height:1.6;
}
body[data-route="goals"] .right .btn.orange{
  height:42px;border:0;border-radius:11px;
  background:var(--gv-orange);color:#fff;
  font-family:var(--gv-font);font-size:13px;font-weight:700;
}
body[data-route="goals"] .right .btn.orange:hover{background:var(--gv-orange-2)}

/* ==========================================================================
   5. EMPTY STATES
   ========================================================================== */
body[data-route="goals"] .empty{
  padding:36px 20px;text-align:center;
}
body[data-route="goals"] .empty h2{
  margin:0 0 6px;color:var(--gv-navy);
  font-family:var(--gv-font);font-size:16px;font-weight:600;
}
body[data-route="goals"] .empty p{margin:0 0 16px;color:var(--gv-muted);font-size:12.5px}
body[data-route="goals"] .empty .btn.orange{
  height:40px;border:0;border-radius:11px;
  background:var(--gv-orange);color:#fff;font-size:13px;font-weight:700;
}

body[data-route="goals"] :focus-visible{outline:2px solid var(--gv-orange);outline-offset:2px}

/* ==========================================================================
   6. NARROW SCREENS
   ========================================================================== */
@media (max-width:1240px){
  body[data-route="goals"] #module-root .summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body[data-route="goals"] .filters{grid-template-columns:minmax(160px,1.4fr) repeat(2,minmax(120px,1fr)) auto}
}
@media (max-width:900px){
  body[data-route="goals"] #module-root .summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-route="goals"] .filters{grid-template-columns:1fr;gap:8px}
  body[data-route="goals"] .layout{grid-template-columns:1fr}
  body[data-route="goals"] .tabs{overflow-x:auto;scrollbar-width:none}
  body[data-route="goals"] .tabs::-webkit-scrollbar{display:none}
}

/* ==========================================================================
   7. CORRECTIONS after the first pass
   ========================================================================== */

/* 7a. Filter controls — app.css sets .control to a horizontal flex row, so the
   label ended up beside the value instead of above it. Force the stack and
   pin the label first. */
body[data-route="goals"] .filters .control{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:2px!important;
}
body[data-route="goals"] .filters .gv-lbl{order:-1;width:100%;text-align:left}
body[data-route="goals"] .filters .control select,
body[data-route="goals"] .filters .control input{order:1;text-align:left}
body[data-route="goals"] .filters .control:first-child{
  flex-direction:row!important;align-items:center!important;gap:9px!important;
}

/* 7b. Right column cards — force a plain block flow so the heading can never
   sit beside or on top of its own rows. */
body[data-route="goals"] .right .side-card{
  display:block!important;
  position:relative!important;
  float:none!important;
}
body[data-route="goals"] .right .side-card-head,
body[data-route="goals"] .right .side-card h3,
body[data-route="goals"] .right .accordion-body,
body[data-route="goals"] .right .side-card>div{
  float:none!important;
  position:static!important;
  width:auto!important;
  max-width:100%!important;
  clear:both;
}
body[data-route="goals"] .right .side-card-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0!important;
  margin:0 0 10px!important;
}
body[data-route="goals"] .right .side-card h3{
  display:flex!important;
  flex:1 1 auto;
  min-width:0;
}
body[data-route="goals"] .right .accordion-body{
  display:block!important;
  padding:0!important;
  margin:0!important;
}

/* 7c. Privacy reminder — app.css forces a purple panel with #module-root and
   !important, so this needs !important to win. */
body[data-route="goals"] .right .privacy{
  padding:12px 13px!important;
  border:1px solid var(--gv-line)!important;
  border-radius:10px!important;
  background:var(--gv-ivory)!important;
  color:var(--gv-muted)!important;
  font-size:11px!important;
  line-height:1.65!important;
}

/* 7d. Progress row — when a goal has no milestones there is no bar, only the
   two labels, which read as loose stray text under the meta line. */
body[data-route="goals"] .goal-card .progress-row{
  order:2;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--gv-line-2);
}
body[data-route="goals"] .goal-card .progress-row .label{
  align-items:baseline;
  margin-bottom:0;
  font-size:11px;
}
body[data-route="goals"] .goal-card .progress-row .label span:first-child{
  color:var(--gv-navy-2);font-weight:600;
}
body[data-route="goals"] .goal-card .progress-row .bar{margin-top:8px}

/* keep the meta line above the progress row and drop its own divider so the
   card has one hairline, not two */
body[data-route="goals"] .goal-card{display:flex;flex-direction:column}
body[data-route="goals"] .goal-card .goal-head{order:0}
body[data-route="goals"] .goal-card .goal-meta{
  order:1;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--gv-line-2);
}
body[data-route="goals"] .goal-card .goal-foot{order:3}