/* ==========================================================================
   VIETRRO 2026 — components.css
   Reusable content components shared across the 19 transcluded documents:
   cards/grids, tables, accordion, calculators, filter bars, notices.
   Declarations are consolidated from the 19 source styles.css files
   (1 shared regulation stylesheet + 4 distinct royalty stylesheets) —
   grouped by shared selectors instead of being repeated per document.
   ========================================================================== */

/* ---------- Generic multi-column grids (shared layout, original class
   names kept so no source HTML needed to change) ---------- */
.overview-grid,
.small-grid,
.principle-grid,
.stats,
.tariff-grid,
.method-grid,
.formula-grid,
.risk-grid,
.todo-grid,
.status-strip,
.process-line,
.work-flow,
.payment-flow,
.pay-grid,
.data-grid,
.account-grid,
.action-grid,
.check-grid,
.checklist,
.license-check,
.public-grid,
.risk-grid5,
.roadmap,
.kpi-grid,
.rights-flow,
.scope-grid,
.class-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.overview-grid { grid-template-columns: repeat(3,1fr); }
.small-grid { grid-template-columns: repeat(4,1fr); }
.principle-grid { grid-template-columns: repeat(3,1fr); }
.stats { grid-template-columns: repeat(4,1fr); }
.tariff-grid { grid-template-columns: repeat(2,1fr); gap: 16px; }
.method-grid { grid-template-columns: repeat(3,1fr); gap: 16px; }
.formula-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
.risk-grid { grid-template-columns: repeat(2,1fr); }
.todo-grid { grid-template-columns: repeat(2,1fr); }
.status-strip { grid-template-columns: repeat(3,1fr); }
.process-line { grid-template-columns: repeat(5,1fr); gap: 10px; }
.work-flow { grid-template-columns: repeat(4,1fr); gap: 14px; }
.payment-flow { grid-template-columns: repeat(5,1fr); gap: 11px; }
.pay-grid { grid-template-columns: repeat(2,1fr); gap: 15px; }
.data-grid { grid-template-columns: repeat(2,1fr); }
.account-grid { grid-template-columns: repeat(3,1fr); gap: 13px; }
.action-grid { grid-template-columns: repeat(2,1fr); }
.check-grid { grid-template-columns: repeat(2,1fr); }
.checklist { grid-template-columns: repeat(2,1fr); gap: 12px; }
.license-check { grid-template-columns: repeat(2,1fr); }
.public-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
.risk-grid5 { grid-template-columns: repeat(2,1fr); }
.roadmap { grid-template-columns: repeat(7,1fr); gap: 8px; }
.kpi-grid { grid-template-columns: repeat(2,1fr); gap: 11px; }
.rights-flow { grid-template-columns: repeat(3,1fr); gap: 14px; }
.scope-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
.class-grid { grid-template-columns: repeat(4,1fr); }

/* ---------- Generic white card look shared by most grid items ---------- */
.overview-grid article,
.small-grid article,
.stats article,
.role,
.tariff-card,
.method-card,
.formula-card,
.risk-card,
.todo,
.status-card,
.process-node,
.work-step,
.payment-step,
.pay-card,
.data-card,
.account-card,
.action-card,
.check-row,
.check-item,
.check-card,
.public-card,
.risk5,
.road-step,
.kpi,
.rights-node,
.scope-card,
.class-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 18px;
}

.overview-grid article > span { color: var(--gold); font-size: 12px; font-weight: 900; }
.overview-grid h3, .overview-grid article h3 { font-size: 20px; margin: 7px 0; }
.overview-grid p { color: var(--muted); margin: 0; }

.small-grid b, .small-grid span { display: block; }
.small-grid span { font-size: 14px; color: var(--muted); margin-top: 5px; }

.stats article { min-height: 130px; display: flex; flex-direction: column; justify-content: space-between; }
.stats b { font-size: 22px; color: var(--blue); letter-spacing: -.02em; }
.stats span { font-size: 14px; color: var(--muted); }

.role.major { border-top: 3px solid var(--blue); }
.role em { font-style: normal; color: var(--gold); font-size: 12px; font-weight: 900; }
.role h3 { font-size: 20px; margin: 7px 0; }
.role p { color: var(--muted); margin: 0; }

.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; }
.arrow { display: grid; place-items: center; color: #8797a6; font-size: 22px; }

/* ---------- Card-content text conventions (kept identical wording,
   just deduped selectors) ---------- */
.tariff-card h3, .method-card h3, .formula-card h3, .pay-card h3,
.action-card h3, .rights-node h3, .scope-card h3, .class-card h3,
.public-card h3 { margin: 0 0 7px; color: var(--blue); font-size: 16px; }

.tariff-card .code, .method-card .tag, .pay-card .tag { font-size: 11px; color: var(--gold); font-weight: 800; letter-spacing: .08em; }
.tariff-card p, .method-card p, .formula-card p, .risk-card p, .pay-card p,
.data-card p, .account-card p, .action-card ul, .rights-node p, .scope-card ul,
.class-card p, .public-card ul, .risk5 p, .road-step p, .kpi p { color: #5c6972; font-size: 13.5px; line-height: 1.6; margin: 0; }

.tariff-card.hidden,
[data-filter-card].hidden,
[data-case-card].hidden,
[data-search-card].hidden { display: none; }

.tariff-card table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.tariff-card th, .tariff-card td { border-top: 1px solid #e5ebef; padding: 9px 6px; text-align: left; vertical-align: top; }
.tariff-card th { color: var(--dark); width: 46%; font-weight: 700; }
.tariff-card td { color: #53616c; }

.formula,
.tariff-card .formula,
.formula-card .formula,
.pay-card .when {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f4f7f9;
  border-left: 3px solid var(--gold);
  color: #17364c;
  font-weight: 700;
  font-size: 13px;
}
.formula-card small, .risk-card .control, .risk5 .control,
.pay-card .draft, .todo p, .check-row p, .check-item p, .check-card p,
.data-card small, .field-table .protect, .timeline-table .draftmark { color: #8a6d2f; }

.tariff-card .limit {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--warn-bg);
  border: 1px solid #ead8ae;
  border-radius: 8px;
  color: #66501f;
  font-size: 13px;
  line-height: 1.5;
}

/* status-card modifiers */
.status-card b { display: block; color: var(--blue); margin-bottom: 5px; }
.status-card span { font-size: 13px; line-height: 1.5; color: #63717b; }
.status-card.consult { border-color: #dcc898; background: #fffaf0; }
.status-card.verify { border-color: #b8cfbf; background: #f7fbf8; }
.status-card.rule { border-color: #c2d2df; background: #f7fafc; }

/* process / work / payment step "flow" cards with connecting arrow */
.process-node, .work-step, .payment-step { position: relative; min-height: 150px; }
.process-node:not(:last-child)::after,
.payment-step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -10px; top: 50%;
  transform: translate(50%,-50%);
  color: #a2864c; font-weight: 800;
  background: #f6f8fa; padding: 3px;
}
.process-node em, .payment-step em, .work-step span, .road-step span {
  font-style: normal; font-size: 11px; color: var(--gold); font-weight: 800; letter-spacing: .07em;
}
.process-node b, .payment-step b, .work-step b, .road-step b { display: block; color: var(--blue); margin: 7px 0; font-size: 14px; }
.process-node p, .payment-step p, .work-step p, .road-step p { margin: 0; color: #66737c; font-size: 12.5px; line-height: 1.5; }

/* risk / todo / check row list items */
.risk-card b, .risk5 b, .data-card b, .account-card b, .todo b, .check-row b,
.check-item b, .check-card b, .kpi b { display: block; color: var(--blue); margin-bottom: 5px; font-size: 14px; }

.todo, .check-row, .check-item, .check-card, .kpi { display: flex; gap: 10px; }
.todo i, .check-row i, .check-item i, .check-card i, .kpi i {
  width: 25px; height: 25px; flex: 0 0 25px;
  border: 1px solid var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; color: #896d34; font-weight: 800;
}
.kpi i { background: #f1f5f7; border: 0; color: var(--blue); }

/* rights-node / scope-card / class-card / public-card status modifiers */
.rights-node .level { font-size: 11px; color: var(--gold); font-weight: 800; letter-spacing: .08em; }
.rights-node.ok { border-top: 4px solid #8da99b; }
.rights-node.review { border-top: 4px solid #c6a65d; }
.rights-node.no { border-top: 4px solid #9ca8b1; }

.scope-card.allow { border-left: 4px solid #799987; }
.scope-card.conditional { border-left: 4px solid var(--gold); }
.scope-card.exclude { border-left: 4px solid #8a969f; }

.class-card .badge {
  display: inline-flex; width: 32px; height: 32px; border-radius: 50%;
  align-items: center; justify-content: center; font-weight: 800; margin-bottom: 8px;
}
.class-card.a .badge { background: #e8f2ec; color: #426550; }
.class-card.b .badge { background: #edf3f7; color: #41637b; }
.class-card.c .badge { background: #fff3d9; color: #80641f; }
.class-card.d .badge { background: #eef0f2; color: #59636a; }

.public-card.no-public { border-top: 4px solid #aeb6bd; }
.public-card.yes-public { border-top: 4px solid #78988a; }

/* ---------- Tables (wrap in a scroll container so overflow never touches
   the page body — required for the 390px/768px responsive checks) ---------- */
.work-table-wrap, .matrix-wrap, .timeline-table-wrap, .field-table-wrap {
  overflow-x: auto;
  margin-top: 20px;
  border: 1px solid var(--card-border);
  border-radius: 11px;
  background: var(--white);
}
.work-table, .matrix, .timeline-table, .field-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.work-table th, .work-table td,
.matrix th, .matrix td,
.timeline-table th, .timeline-table td,
.field-table th, .field-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e6ebef;
  text-align: left;
  vertical-align: top;
  font-size: 12.8px;
}
.work-table th, .matrix th, .timeline-table th, .field-table th {
  background: #f3f6f8; color: var(--blue);
}
.work-table td, .matrix td, .timeline-table td, .field-table td { color: #596872; line-height: 1.5; }
.work-table tr:last-child td, .matrix tr:last-child td,
.timeline-table tr:last-child td, .field-table tr:last-child td { border-bottom: 0; }
.matrix .strong, .timeline-table .key, .field-table .fkey { color: #173e5a; font-weight: 700; }
.field-table .fkey { width: 22%; }

/* ---------- Accordion (chapters) — scoped per document by JS via
   closest('.document-section'), styling is global ---------- */
.chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.chapter { background: var(--white); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; }
.chapter.open { border-color: #aec9da; box-shadow: 0 8px 24px rgba(18,63,99,.06); }
.chapter button {
  width: 100%; display: grid; grid-template-columns: 44px 1fr 24px; gap: 12px;
  align-items: center; text-align: left; padding: 16px 18px; border: 0; background: none; color: inherit;
}
.chapter button > span {
  width: 38px; height: 38px; border-radius: 7px; display: grid; place-items: center;
  background: #eef4f8; color: var(--blue); font-weight: 900;
}
.chapter button strong { font-size: 15px; }
.chapter button small { display: block; color: var(--muted); font-weight: 600; margin-top: 2px; }
.chapter i { font-style: normal; font-size: 20px; color: var(--blue); transition: .2s; }
.chapter.open i { transform: rotate(45deg); }
.chapter .content { display: none; padding: 0 20px 18px 74px; color: var(--muted); }
.chapter.open .content { display: block; }
.chapter .content p { margin-top: 0; }
.chapter .content ul { margin: 0; padding-left: 18px; }

/* ---------- Calculators (.calc-box = simple tariff calc, .calc-panel =
   methodology model calc). Purely presentational; wiring is in
   interactions.js and is scoped by container, not by id. ---------- */
.calc-box, .calc-panel {
  margin-top: 22px;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;
}
.calc-box h3, .calc-panel h3 { margin: 0; color: var(--blue); }
.calc-box > p, .calc-panel > p { color: #65727b; font-size: 13px; }
.calc-grid, .calc-row { display: grid; gap: 10px; align-items: end; margin-top: 12px; }
.calc-grid { grid-template-columns: 1.1fr 1fr 1fr auto; }
.calc-row { grid-template-columns: 1.2fr 1fr 1fr 1fr auto; }
.calc-field label { display: block; color: #53616c; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.calc-field select, .calc-field input {
  width: 100%; padding: 10px; border: 1px solid var(--field-border); border-radius: 7px; background: var(--white);
}
.calc-btn, .calc-go {
  padding: 10px 16px; border: 0; border-radius: 7px; background: var(--blue); color: #fff; font-weight: 700;
}
.calc-result, .calc-output {
  margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: #f4f7f9; color: #17364c; font-weight: 700;
}
.calc-note, .calc-help { margin-top: 8px; color: #8a6a26; font-size: 12px; line-height: 1.5; }

/* ---------- Search / filter widgets ---------- */
.quick-search, .search-row {
  margin: 20px 0 14px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.quick-search input, .search-row input,
.filter-bar input, .case-filter input {
  flex: 1; min-width: 240px; padding: 12px 14px;
  border: 1px solid var(--field-border); border-radius: 8px;
  background: var(--white); color: var(--dark); outline: none;
}
.quick-search input:focus, .search-row input:focus,
.filter-bar input:focus, .case-filter input:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,63,99,.08);
}
.quick-search small { color: #6b7780; }

.filter-bar, .case-filter, .db-tabs {
  display: flex; gap: 9px; flex-wrap: wrap; margin: 20px 0 14px;
}
.filter-chip, .case-chip, .db-tab {
  border: 1px solid var(--field-border); background: var(--white); color: var(--blue);
  border-radius: 999px; padding: 9px 12px; font-size: 12px; font-weight: 700;
}
.filter-chip.active, .case-chip.active, .db-tab.active {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.db-panel { display: none; }
.db-panel.active { display: block; }

/* ---------- Warning / notice / status boxes (draft-notice family) —
   these must stay visually prominent, never demoted. ---------- */
.draft-alert, .notice-warning, .warning-box {
  margin-top: 20px;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  border-radius: 10px;
  padding: 15px 17px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.draft-alert strong, .notice-warning b, .warning-box b {
  display: block; color: var(--warn-text-strong); margin-bottom: 4px;
}
.draft-alert p, .notice-warning p, .warning-box p { margin: 0; color: var(--warn-text); font-size: 14px; line-height: 1.55; }
.draft-dot {
  flex: 0 0 12px; height: 12px; border-radius: 50%;
  background: var(--warn-dot); margin-top: 5px;
  box-shadow: 0 0 0 4px rgba(181,148,79,.13);
}

.status-box, .audit-box {
  margin-top: 22px; background: var(--dark-box); color: #fff;
  border-radius: 11px; padding: 18px;
}
.status-box small, .audit-box small {
  display: block; color: var(--dark-box-label); font-weight: 800; letter-spacing: .08em; margin-bottom: 7px;
}
.status-box b, .audit-box b { font-size: 15px; line-height: 1.6; }

.summary-box {
  margin-top: 22px; padding: 22px; border-radius: 10px;
  background: rgba(255,255,255,.075); border-left: 3px solid #b9964f;
}
.summary-box small, .summary-box b { display: block; }
.summary-box small { color: #b9d8ea; font-weight: 900; letter-spacing: .12em; margin-bottom: 5px; }
.summary-box b { font-size: 18px; }

.source-note {
  margin-top: 22px; padding: 14px 16px; border: 1px dashed #b7c6d0;
  border-radius: 8px; color: #596872; font-size: 13px; line-height: 1.55;
}
.source-note b { color: var(--blue); }

/* Governance / hero-note diagram (regulation hero aside) */
.hero-note {
  padding: 28px; border-radius: var(--radius-lg); color: #fff;
  background: linear-gradient(145deg,#12344f,#0f4266);
  box-shadow: 0 18px 45px rgba(16,41,61,.13);
}
.hero-note small { display: block; color: #bbd7ea; font-size: 11px; font-weight: 900; letter-spacing: .14em; margin-bottom: 16px; }
.governance div { padding: 14px 15px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.045); border-radius: 9px; }
.governance b, .governance span { display: block; }
.governance b { font-size: 16px; }
.governance span { margin-top: 3px; color: #d3e0e8; font-size: 13px; }
.governance i { display: block; text-align: center; font-style: normal; color: #9ec5dc; padding: 4px; }

.meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.meta div { min-width: 104px; padding: 12px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.meta b, .meta span { display: block; }
.meta b { font-size: 19px; color: var(--blue); }
.meta span { font-size: 12px; color: var(--muted); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

/* principles (dark closing section of every regulation doc) */
.principles { background: var(--dark); color: #fff; }
.principles .kicker { color: #a9cfe5; }
.principle-grid div {
  padding: 16px; border-radius: 9px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12);
}
.principle-grid b, .principle-grid span { display: block; }
.principle-grid b { font-size: 15px; }
.principle-grid span { margin-top: 4px; color: #d5e0e7; font-size: 13px; }