/* pf-pl ("กำไรขาดทุน", js/pages/fis/pl.js) and sm-period ("เปรียบเทียบช่วงเวลา", js/pages/fis/period.js).
   Scoped under .fis-scope like css/fis.css, whose card / help / pill rules these views reuse. Colours are
   the prototype tokens (--p-*, css/fis-theme.css). */

/* ── grids ── */
.fis-scope .fpl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;}
.fis-scope .fpl-grid.fpl-g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.fis-scope .fpl-grid > .fis-card,.fis-scope .fpd-col > .fis-card{height:auto;}
.fis-scope .fpl-span2{grid-column:span 2;}
.fis-scope .fpl-span3{grid-column:1 / -1;}
.fis-scope .fpl-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start;}
.fis-scope .fpd-col{display:flex;flex-direction:column;gap:14px;min-width:0;}
.fis-scope .fpd-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.fis-scope .fpd-g3 .fis-card{height:auto;}
.fis-scope .fpd-txt{font-size:calc(13px*var(--fz,1));line-height:1.6;color:var(--p-muted);margin-top:4px;}

/* ── card title with a tool button ── */
.fis-scope .fpl-ttl{flex:0 1 auto;min-width:0;}
.fis-scope .fpl-ttl ~ .fpl-all{order:3;margin-left:auto;}
.fis-scope .fpl-all{flex:none;font-size:calc(12px*var(--fz,1));padding:3px 10px;margin-top:-2px;}

/* ── controls ── */
.fis-scope .fpl-ctl{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;}
.fis-scope .fpl-sel{display:flex;flex-direction:column;gap:3px;font-size:calc(12px*var(--fz,1));color:var(--p-muted);min-width:0;max-width:100%;}
.fis-scope .fpl-sel select{font:inherit;font-size:calc(13px*var(--fz,1));color:var(--p-ink);background:var(--p-card);border:1px solid var(--p-line);
  border-radius:8px;padding:7px 10px;max-width:100%;min-width:0;}
.fis-scope .fpl-sel select:focus-visible{outline:2px solid var(--p-accent);outline-offset:1px;}
.fis-scope .fpl-soon{flex:1 1 260px;font-size:calc(12px*var(--fz,1));line-height:1.5;color:var(--p-muted);padding:6px 10px;border-radius:8px;
  border:1px dashed var(--p-line);}

/* ── tables ── */
.fis-scope .fpl-tbl{width:100%;border-collapse:collapse;font-size:calc(13px*var(--fz,1));color:var(--p-ink);font-variant-numeric:tabular-nums;}
.fis-scope .fpl-tbl th{text-align:left;font-weight:500;color:var(--p-muted);padding:8px 6px;border-bottom:1px solid var(--p-line);white-space:nowrap;}
.fis-scope .fpl-tbl td{padding:7px 6px;border-bottom:1px solid var(--p-line);vertical-align:top;line-height:1.4;}
.fis-scope .fpl-tbl .n{text-align:right;white-space:nowrap;}
.fis-scope .fpl-tbl tbody tr:last-child td{border-bottom:0;}
.fis-scope .neg{color:var(--p-bad);}
.fis-scope .pos{color:var(--p-good);}
.fis-scope .fpl-mut{color:var(--p-muted);font-weight:400;}
.fis-scope .fpl-b td{font-weight:700;}
.fis-scope .fpl-tot td{font-weight:700;border-top:2px solid var(--p-ink);}
.fis-scope .fpl-mrg td{color:var(--p-muted);font-size:calc(12px*var(--fz,1));}
.fis-scope .fpl-mrg td:first-child{padding-left:20px;}
.fis-scope .fpl-line{cursor:pointer;}
.fis-scope .fpl-line:hover td{background:var(--p-soft);}
.fis-scope .fpl-line:focus-visible{outline:2px solid var(--p-accent);outline-offset:-2px;}
.fis-scope .fpl-car{display:inline-block;width:12px;color:var(--p-accent);}
.fis-scope .fpl-acc td{font-size:calc(12.5px*var(--fz,1));color:var(--p-muted);}
.fis-scope .fpl-acc td:first-child{padding-left:30px;max-width:340px;}
.fis-scope .fpl-acc td:first-child b{color:var(--p-ink);}
.fis-scope .fpl-acc td.neg{color:var(--p-bad);}
.fis-scope .fpl-gl td:first-child{min-width:220px;}
.fis-scope .fpl-scroll{max-height:460px;overflow-y:auto;}
.fis-scope .fpl-note{font-size:calc(12px*var(--fz,1));line-height:1.5;color:var(--p-muted);margin-top:8px;}
.fis-scope .fpl-note b{color:var(--p-ink);}
.fis-scope .fpl-warn,.fis-scope .fpd-warn{font-size:calc(12px*var(--fz,1));line-height:1.5;margin-top:8px;padding:6px 10px;border-radius:8px;color:var(--p-ink);
  border:1px solid var(--p-line);border-left:4px solid var(--p-warn);background:var(--p-warn-bg);}

/* ── headline P&L list (prototype .pl-row) ── */
.fis-scope .fpl-stmt{display:flex;flex-direction:column;font-size:calc(13px*var(--fz,1));font-variant-numeric:tabular-nums;}
.fis-scope .fpl-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--p-line);}
.fis-scope .fpl-row > span:last-child{white-space:nowrap;}
.fis-scope .fpl-row.fpl-rtot{font-weight:700;border-top:2px solid var(--p-ink);}
.fis-scope .fpl-row.fpl-hd{color:var(--p-muted);font-size:calc(12px*var(--fz,1));}

/* ── sm-period ── */
.fis-scope .fpd-lens{font-size:calc(12.5px*var(--fz,1));color:var(--p-muted);margin-top:-8px;}
.fis-scope .fpd-lens b{color:var(--p-ink);}
.fis-scope .fpd-sub{font-size:calc(12px*var(--fz,1));line-height:1.5;color:var(--p-muted);margin-bottom:10px;}
.fis-scope .fpd-sub b{color:var(--p-ink);}
.fis-scope .fpd-cov{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;}
.fis-scope .fpd-cov .cv{border-radius:8px;padding:8px 4px;text-align:center;font-size:calc(10.5px*var(--fz,1));line-height:1.3;min-width:0;
  display:flex;flex-direction:column;gap:2px;}
.fis-scope .fpd-cov .cv b{display:block;font-size:calc(13px*var(--fz,1));}
.fis-scope .fpd-cov .cv span{display:block;color:inherit;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* prototype .cv.t / .cv.g / .cv.b / .cv.n (full · daily · totals only · none) */
.fis-scope .cv.g{background:var(--p-accent);color:var(--p-on-accent);}
.fis-scope .cv.p{background:color-mix(in srgb,var(--p-accent) 45%,var(--p-card));color:var(--p-ink);}
.fis-scope .cv.b{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--p-accent) 18%,var(--p-card)) 0 6px,var(--p-card) 6px 10px);color:var(--p-ink);border:1px solid color-mix(in srgb,var(--p-accent) 30%,transparent);}
.fis-scope .cv.n{background:var(--p-soft);color:var(--p-muted);}
.fis-scope .fpd-covleg{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:calc(12px*var(--fz,1));color:var(--p-muted);margin-top:10px;}
.fis-scope .fpd-covleg span{display:inline-flex;align-items:center;gap:5px;}
.fis-scope .fpd-covleg i{display:inline-block;width:14px;height:14px;border-radius:4px;}
.fis-scope .fpd-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.fis-scope .fpd-kpi{height:auto;}
.fis-scope .fpd-kl{font-size:calc(12.5px*var(--fz,1));color:var(--p-muted);}
.fis-scope .fpd-kv{font-size:calc(23px*var(--fz,1));font-weight:700;margin:2px 0;font-variant-numeric:tabular-nums;}
.fis-scope .fpd-kv small{font-size:calc(12px*var(--fz,1));font-weight:500;color:var(--p-muted);}
.fis-scope .fpd-ks{font-size:calc(12px*var(--fz,1));color:var(--p-muted);font-variant-numeric:tabular-nums;}
/* prototype .delta .up / .down / .flat */
.fis-scope .fpd-d{display:inline-block;font-size:calc(12px*var(--fz,1));font-weight:600;padding:2px 7px;border-radius:99px;white-space:nowrap;}
.fis-scope .fpd-d.up{color:var(--p-good);background:var(--p-good-bg);}
.fis-scope .fpd-d.down{color:var(--p-bad);background:var(--p-bad-bg);}
.fis-scope .fpd-d.flat{color:var(--p-warn);background:var(--p-warn-bg);}
.fis-scope .fpd-hdr td{font-weight:700;color:var(--p-accent);padding-top:10px;}
.fis-scope .fpd-total td{font-weight:700;border-top:2px solid var(--p-ink);}
.fis-scope .fpd-grand td{font-weight:700;border-top:2px solid var(--p-ink);border-bottom:3px double var(--p-ink);}
.fis-scope .fpd-subt td{font-weight:600;background:var(--p-soft);}
.fis-scope .fpd-pct td{color:var(--p-muted);}
.fis-scope .fpd-st td:first-child{min-width:190px;}
.fis-scope #pdRoot.fpd-busy,.fis-scope .fpd-busy{opacity:.6;transition:opacity .15s;}

/* the prototype's grid breakpoint (L29): every multi-column grid goes to one column at 1000px */
@media (max-width:1000px){
  .fis-scope .fpl-two{grid-template-columns:minmax(0,1fr);}
  .fis-scope .fpl-grid,.fis-scope .fpl-grid.fpl-g2{grid-template-columns:minmax(0,1fr);}
  .fis-scope .fpl-span2{grid-column:auto;}
}
@media (max-width:991.98px){
  .fis-scope .fpd-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:767.98px){
  .fis-scope .fpd-g3{grid-template-columns:minmax(0,1fr);}
  .fis-scope .fpd-cov{grid-template-columns:repeat(6,minmax(0,1fr));}
  .fis-scope .fpd-kv{font-size:calc(17px*var(--fz,1));}
  .fis-scope .fpl-gl td:first-child,.fis-scope .fpd-st td:first-child{min-width:160px;}
  .fis-scope .fpl-acc td:first-child{max-width:220px;}
  .fis-scope .fpl-sel,.fis-scope .fpl-sel select{width:100%;}
}
/* the comparative statements need the wider column */
.fis-scope .fpl-grid.fpl-g2.fpd-main{grid-template-columns:repeat(2,minmax(0,1fr));}
.fis-scope #pdRt td:last-child,.fis-scope #pdPl td:last-child{white-space:nowrap;}
.fis-scope .fpd-st td:first-child{min-width:170px;}
@media (max-width:1000px){ .fis-scope .fpl-grid.fpl-g2.fpd-main{grid-template-columns:minmax(0,1fr);} }

/* sm-period hero = prototype .txhero / .txkick / .lens (CSS L100–102, L124–128) */
.fis-scope .txhero{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:20px 22px;border-radius:16px;
  border:1px solid var(--p-line);background:linear-gradient(120deg,color-mix(in srgb,var(--p-accent) 12%,var(--p-card)),var(--p-card) 55%,color-mix(in srgb,var(--p-accent3) 10%,var(--p-card)));}
.fis-scope .txhero-l{flex:1;min-width:260px;}
.fis-scope .txkick{font-size:calc(11.5px*var(--fz,1));letter-spacing:.12em;font-weight:700;color:var(--p-accent);}
.fis-scope .txhero h2{font-size:calc(22px*var(--fz,1));margin:4px 0 6px;font-weight:700;line-height:1.4;color:var(--p-ink);}
.fis-scope .txsub{color:var(--p-muted);font-size:calc(13px*var(--fz,1));}
.fis-scope .txsub b{color:var(--p-ink);}
.fis-scope .lens{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.fis-scope .lens button{flex:1;min-width:150px;text-align:left;border:1.5px solid var(--p-line);background:var(--p-card);color:var(--p-ink);border-radius:12px;
  padding:12px 16px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:2px;line-height:1.5;}
.fis-scope .lens button b{font-size:calc(16px*var(--fz,1));}
.fis-scope .lens button span{font-size:calc(12px*var(--fz,1));color:var(--p-muted);}
.fis-scope .lens button.on{border-color:var(--p-accent);background:color-mix(in srgb,var(--p-accent) 12%,var(--p-card));box-shadow:0 0 0 3px color-mix(in srgb,var(--p-accent) 18%,transparent);}
.fis-scope .lens button.on b{color:var(--p-accent);}
.fis-scope .lens button:focus-visible{outline:2px solid var(--p-accent);outline-offset:1px;}