/* =========================================================
   DIKICHI
   PRODUCT QUALITY INTELLIGENCE
   EXECUTIVE DASHBOARD
   BRAND DESIGN SYSTEM
   ========================================================= */


/* =========================================================
   01. ROOT / BRAND TOKENS
   ========================================================= */

:root {

  /* -------------------------------------------------------
     DIKICHI BRAND
     Palette sampled from D:\05 PROJECT\11 PROJECT PPA\10 Dikichi Dashboard\Assets\logo dikichi.jpg
     ------------------------------------------------------- */
  --dikichi-pink: #FF7CBE;
  --dikichi-pink-deep: #C2187D;
  --dikichi-pink-dark: #8E0B57;
  --dikichi-pink-soft: #FFEBF5;
  --dikichi-purple: #84438D;
  --dikichi-purple-deep: #572B7A;
  --dikichi-purple-soft: #F4EAF7;
  --dikichi-ink: #2E1440;
  --dikichi-ink-deep: #1B0B2A;
  --bg: #FBF6FA;
  --bg-warm: #F8F3F9;
  --surface: #FFFFFF;
  --surface-soft: #FEFBFE;
  --surface-warm: #FDFAFD;
  --border: #EEDFEE;
  --border-light: #F5EDF5;
  --border-strong: #DCC7DE;
  --text: #2B1233;
  --text-secondary: #5C4463;
  --text-muted: #6D5975;
  --text-light: #88788F;
  --grade-high: #009B72;
  --grade-high-soft: #E0F3EB;
  --grade-high-border: #B7E5D4;
  --grade-middle: #0E9AA7;
  --grade-middle-soft: #E7F7F6;
  --grade-middle-border: #B9E5E3;
  --grade-borderline: #E58A00;
  --grade-borderline-soft: #FFF3DE;
  --grade-borderline-border: #F4D39E;
  --grade-middle-fail: #E84B16;
  --grade-middle-fail-soft: #FDECE5;
  --grade-middle-fail-border: #F5C2B0;
  --grade-strong-fail: #D92755;
  --grade-strong-fail-soft: #FCE8EE;
  --grade-strong-fail-border: #F3B7C7;
  --grade-high-text: #007D5C;
  --grade-middle-text: #0B7983;
  --grade-borderline-text: #9E5F00;
  --grade-middle-fail-text: #C43F13;
  --grade-strong-fail-text: #D02552;
  --mx-amber-text: #A25D00;
  --gray-muted-text: #746A79;
  --gray-faint-text: #736B75;
  --gray-title-text: #746A7A;
  --primary: var(--dikichi-pink);
  --primary-soft: var(--dikichi-pink-soft);
  --success: var(--grade-high);
  --success-soft: var(--grade-high-soft);
  --warning: var(--grade-borderline);
  --warning-soft: var(--grade-borderline-soft);
  --danger: var(--grade-middle-fail);
  --danger-soft: var(--grade-middle-fail-soft);
  --info: var(--dikichi-pink);
  --info-soft: var(--dikichi-pink-soft);
  --shadow-xs: 0 1px 2px rgba(27, 11, 42, 0.035);
  --shadow-sm: 0 2px 8px rgba(27, 11, 42, 0.055);
  --shadow-md: 0 8px 26px rgba(27, 11, 42, 0.085);
  --shadow-lg: 0 18px 48px rgba(27, 11, 42, 0.12);
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --dikichi-purple-light: #FEF3F9;
  --dikichi-purple-dark-soft: #F9D9EC;
  --color-plum: var(--dikichi-pink-deep);
  --surface-2: var(--surface-soft);
  --text-primary: var(--text);
}


/* =========================================================
   02. GLOBAL RESET
   ========================================================= */

* {
  box-sizing:
    border-box;
}


html {

  margin:
    0;

  padding:
    0;

  background:
    var(--bg);

  scroll-behavior:
    smooth;

}


body {

  margin:
    0;

  padding:
    0;

  background:
    linear-gradient(
      180deg,
      #F5F7F9 0%,
      #F3F5F7 100%
    );

  color:
    var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  font-size:
    14px;

  line-height:
    1.5;

  -webkit-font-smoothing:
    antialiased;

}


button,
select,
input {

  font-family:
    inherit;

}


button {

  cursor:
    pointer;

}


button:focus-visible,
select:focus-visible,
input:focus-visible {

  outline:
    2px solid
    var(--dikichi-pink-deep);

  outline-offset:
    2px;

}


/* =========================================================
   03. APP
   ========================================================= */

.app {

  min-height:
    100vh;

}


/* =========================================================
   04. TOPBAR
   ========================================================= */

.topbar {

  position:
    sticky;

  top:
    0;

  z-index:
    100;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  min-height:
    76px;

  padding:
    13px 32px;

  background:
    rgba(87, 43, 122, 0.97);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);

  color:
    #FFFFFF;

  box-shadow:
    0 2px 16px
    rgba(46, 20, 64, 0.13);

  backdrop-filter:
    blur(14px);

}


.brand {

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  min-width:
    0;

}


/* ---------------------------------------------------------
   LOGO CONTAINER
   --------------------------------------------------------- */

.brand-mark {

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    44px;

  height:
    44px;

  flex:
    0 0 44px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(245, 241, 223, 0.35);

  border-radius:
    11px;

  background:
    var(--dikichi-purple-soft);

  color:
    var(--dikichi-pink-deep);

  font-size:
    18px;

  font-weight:
    800;

  letter-spacing:
    -0.04em;

}


/*
  When index.html is updated to use the real logo:

  <div class="brand-mark">
    <img src="..." alt="Dikichi">
  </div>

  this styling will automatically apply.
*/

.brand-mark img {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

}


/* ---------------------------------------------------------
   BRAND TEXT
   --------------------------------------------------------- */

.brand-name {

  color:
    var(--dikichi-purple-soft);

  font-size:
    32px;
  line-height:
    1.05;

  font-weight:
    900;

  letter-spacing:
    0.14em;

}


.brand-subtitle {

  margin-top:
    5px;

  color:
    rgba(255, 255, 255, 0.90);

  font-size:
    14px;

  font-weight:
    700;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}


.header-status {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

}


.live-status {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    #7DE0BD;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.1em;

}


.live-dot {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #45D5A5;

  box-shadow:
    0 0 0 4px
    rgba(69, 213, 165, 0.14);

}


.last-updated {

  color:
    rgba(255, 255, 255, 0.80);

  font-size:
    11px;

}


.refresh-button {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  min-height:
    34px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius:
    8px;

  background:
    rgba(255, 255, 255, 0.07);

  color:
    #FFFFFF;

  font-size:
    11px;

  font-weight:
    650;

  transition:
    160ms ease;

}


.refresh-button:hover {

  background:
    rgba(245, 241, 223, 0.14);

  border-color:
    rgba(245, 241, 223, 0.35);

}


.refresh-icon {

  display:
    inline-block;

  font-size:
    16px;

  line-height:
    1;

}


.refresh-button.is-loading .refresh-icon {

  animation:
    spin 0.9s linear infinite;

}


@keyframes spin {

  from {

    transform:
      rotate(0deg);

  }

  to {

    transform:
      rotate(360deg);

  }

}


/* =========================================================
   05. MAIN CONTAINER
   ========================================================= */

.dashboard-container {

  width:
    min(1480px, calc(100% - 64px));

  margin:
    0 auto;

  padding:
    32px 0 64px;

}


/* =========================================================
   06. SECTION HEADER
   ========================================================= */

.section-header {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    32px;

  margin-bottom:
    22px;

}


.section-header h1 {

  margin:
    5px 0 7px;

  color:
    var(--dikichi-ink-deep);

  font-size:
    clamp(25px, 3vw, 34px);

  line-height:
    1.12;

  letter-spacing:
    -0.045em;

}


.section-header p {

  max-width:
    680px;

  margin:
    0;

  color:
    var(--text-secondary);

  font-size:
    13px;

}


.eyebrow {

  color:
    var(--dikichi-pink-deep);

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;

  margin-bottom:
    3px;

}


/* ---------------------------------------------------------
   SECTION LAYOUT - spacing & rhythm
   --------------------------------------------------------- */

.dashboard-section {

  margin-top:
    0;

  margin-bottom:
    28px;

}


.section-title-block {

  margin-bottom:
    14px;

}


.section-title-block .eyebrow {

  margin-bottom:
    4px;

}


.section-title-block h2 {

  margin:
    0 0 4px;

  color:
    var(--dikichi-ink-deep);

  font-size:
    20px;

  font-weight:
    700;

  letter-spacing:
    -0.03em;

  line-height:
    1.2;

}


.section-title-block p {

  margin:
    0;

  color:
    var(--text-secondary);

  font-size:
    12px;

  line-height:
    1.5;

}


.data-status {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    3px;

  padding-bottom:
    4px;

}


.status-label {

  color:
    var(--gray-title-text);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.1em;

}


.status-value {

  color:
    var(--text-secondary);

  font-size:
    12px;

  font-weight:
    650;

}


/* =========================================================
   07. FILTER BAR
   ========================================================= */

.filter-bar {

  display:
    flex;

  align-items:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-bottom:
    20px;

  padding:
    15px;

  background:
    rgba(255, 255, 255, 0.94);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--shadow-xs);

}


.filter-group {

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    170px;

}


.filter-group label {

  color:
    var(--gray-title-text);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;

}


.filter-group select {

  height:
    39px;

  padding:
    0 32px 0 11px;

  border:
    1px solid
    var(--border-strong);

  border-radius:
    8px;

  background:
    #FFFFFF;

  color:
    var(--text);

  font-size:
    12px;

  cursor:
    pointer;

  transition:
    140ms ease;

}


.filter-group select:hover {

  border-color:
    var(--dikichi-pink-deep);

}


.filter-group select:focus {

  border-color:
    var(--dikichi-pink-deep);

  box-shadow:
    0 0 0 3px
    rgba(87, 43, 122, 0.08);

}


/* ---------------------------------------------------------
   FILTER RESET
   --------------------------------------------------------- */

.filter-reset {

  margin-left:
    auto;

}


.filter-reset button {

  height:
    39px;

  padding:
    0 13px;

  border:
    1px solid
    var(--border);

  border-radius:
    8px;

  background:
    var(--dikichi-pink-soft);

  color:
    var(--dikichi-pink-deep);

  font-size:
    11px;

  font-weight:
    700;

  transition:
    140ms ease;

}


.filter-reset button:hover {

  background:
    var(--dikichi-pink-deep);

  color:
    #FFFFFF;

}


/* =========================================================
   08. STANDARD / GRADE LEGEND
   ========================================================= */

.grade-standard,
.standards-legend,
.grade-legend {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-bottom:
    20px;

}


.grade-standard-label,
.standards-label {

  margin-right:
    4px;

  color:
    var(--gray-title-text);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}


.standard-item,
.legend-item {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    4px 7px;

  border-radius:
    5px;

  font-size:
    9px;

  font-weight:
    750;

}


.standard-high {

  background:
    var(--grade-high-soft);

  color:
    var(--grade-high-text);

}


.standard-middle {

  background:
    var(--grade-middle-soft);

  color:
    var(--grade-middle-text);

}


.standard-borderline {

  background:
    var(--grade-borderline-soft);

  color:
    var(--grade-borderline-text);

}


.standard-fail {

  background:
    var(--grade-middle-fail-soft);

  color:
    var(--grade-middle-fail-text);

}


.standard-strong-fail {

  background:
    var(--grade-strong-fail-soft);

  color:
    var(--grade-strong-fail-text);

}


/* =========================================================
   09. KPI GRID
   ========================================================= */

.kpi-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    14px;

  margin-bottom:
    20px;

}


/* =========================================================
   KPI CARD
   ========================================================= */

.kpi-card {

  position:
    relative;

  min-height:
    166px;

  padding:
    21px;

  overflow:
    hidden;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-sm);

  transition:
    170ms ease;

}


.kpi-card:hover {

  transform:
    translateY(-1px);

  box-shadow:
    var(--shadow-md);

}


.kpi-card::after {

  content:
    "";

  position:
    absolute;

  right:
    -34px;

  bottom:
    -42px;

  width:
    125px;

  height:
    125px;

  border:
    1px solid
    rgba(87, 43, 122, 0.045);

  border-radius:
    50%;

  background:
    rgba(87, 43, 122, 0.025);

}


/* ---------------------------------------------------------
   QUALITY STANDARD
   --------------------------------------------------------- */

.quality-standard {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    12px;

  margin:
    4px 0 22px;

  flex-wrap:
    wrap;

}

.quality-standard-title {

  color:
    #746A7A;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.13em;

  white-space:
    nowrap;

}

.quality-standard-items {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  flex-wrap:
    wrap;

}

.standard {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    24px;

  padding:
    0 9px;

  border:
    1px solid transparent;

  border-radius:
    6px;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.02em;

  white-space:
    nowrap;

}

.standard.high {

  color:
    var(--grade-high-text);

  background:
    var(--grade-high-soft);

  border-color:
    var(--grade-high-border);

}

.standard.middle {

  color:
    var(--grade-middle-text);

  background:
    var(--grade-middle-soft);

  border-color:
    var(--grade-middle-border);

}

.standard.borderline {

  color:
    var(--grade-borderline-text);

  background:
    var(--grade-borderline-soft);

  border-color:
    var(--grade-borderline-border);

}

.standard.fail {

  color:
    var(--grade-middle-fail-text);

  background:
    var(--grade-middle-fail-soft);

  border-color:
    var(--grade-middle-fail-border);

}

.standard.strong-fail {

  color:
    var(--grade-strong-fail-text);

  background:
    var(--grade-strong-fail-soft);

  border-color:
    var(--grade-strong-fail-border);

}


/* ---------------------------------------------------------
   NO-DATA GRADE BADGE
   --------------------------------------------------------- */

.grade-no-data {

  color:
    #68737D;

  background:
    #F0F3F5;

  border-color:
    #DDE3E7;

}


/* ---------------------------------------------------------
   PRIMARY KPI
   --------------------------------------------------------- */

.primary-card {

  background:
    linear-gradient(
      135deg,
      var(--dikichi-ink-deep) 0%,
      var(--dikichi-pink-deep) 100%
    );

  border-color:
    var(--dikichi-pink-deep);

  color:
    #FFFFFF;

  box-shadow:
    0 8px 28px
    rgba(87, 43, 122, 0.18);

}


.primary-card::after {

  width:
    160px;

  height:
    160px;

  right:
    -54px;

  bottom:
    -66px;

  border-color:
    rgba(245, 241, 223, 0.08);

  background:
    rgba(245, 241, 223, 0.035);

}


/* ---------------------------------------------------------
   ATTENTION KPI
   --------------------------------------------------------- */

.attention-card {

  border-left:
    3px solid
    var(--grade-borderline);

}


.attention-card::before {

  content:
    "!";

  position:
    absolute;

  top:
    17px;

  right:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    25px;

  height:
    25px;

  border:
    1px solid
    var(--grade-borderline-border);

  border-radius:
    50%;

  background:
    var(--grade-borderline-soft);

  color:
    var(--grade-borderline-text);

  font-size:
    13px;

  font-weight:
    850;

  z-index:
    2;

}


.kpi-label {

  position:
    relative;

  z-index:
    1;

  color:
    var(--gray-title-text);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;

}


.primary-card .kpi-label {

  color:
    rgba(255, 255, 255, 0.90);

}


.kpi-value {

  position:
    relative;

  z-index:
    1;

  margin-top:
    13px;

  color:
    var(--text);

  font-size:
    35px;

  line-height:
    1;

  font-weight:
    780;

  letter-spacing:
    -0.055em;

}


.primary-card .kpi-value {

  color:
    #FFFFFF;

  font-size:
    43px;

}


/* ---------------------------------------------------------
   SCORE / 5
   --------------------------------------------------------- */

.score-out-of {

  position:
    relative;

  z-index:
    1;

  margin-left:
    4px;

  color:
    var(--gray-title-text);

  font-size:
    12px;

  font-weight:
    650;

  letter-spacing:
    0;

}


.primary-card .score-out-of {

  color:
    rgba(255, 255, 255, 0.92);

}


.attention-value {

  font-size:
    23px;

  line-height:
    1.2;

  letter-spacing:
    -0.035em;

}


/* ---------------------------------------------------------
   KPI GRADE
   --------------------------------------------------------- */

.kpi-grade {

  position:
    relative;

  z-index:
    1;

  display:
    inline-flex;

  margin-top:
    9px;

  padding:
    4px 8px;

  border-radius:
    5px;

  background:
    var(--dikichi-pink-soft);

  color:
    var(--dikichi-pink-deep);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.05em;

}


.primary-card .kpi-grade {

  background:
    rgba(245, 241, 223, 0.14);

  color:
    var(--dikichi-purple-soft);

}


/* ---------------------------------------------------------
   KPI DESCRIPTION
   --------------------------------------------------------- */

.kpi-description {

  position:
    relative;

  z-index:
    1;

  margin-top:
    10px;

  color:
    var(--gray-title-text);

  font-size:
    10px;

}


.primary-card .kpi-description {

  color:
    rgba(255, 255, 255, 0.92);

}


/* ---------------------------------------------------------
   FAIL RATE EXPLANATION
   --------------------------------------------------------- */

.fail-rate-explanation {

  max-width:
    280px;

  margin-top:
    7px;

  color:
    var(--gray-title-text);

  font-size:
    10px;

  line-height:
    1.45;

}


/* =========================================================
   10. PERIOD COMPARISON
   ========================================================= */

.comparison-section {

  margin-bottom:
    20px;

}


.section-title-row {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    12px;

}


.section-title-row h2 {

  margin:
    4px 0 0;

  color:
    var(--dikichi-ink-deep);

  font-size:
    18px;

  letter-spacing:
    -0.03em;

}


.comparison-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    14px;

}


.comparison-card {

  min-height:
    148px;

  padding:
    18px;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--shadow-xs);

  cursor:
    pointer;

  transition:
    160ms ease;

}


.comparison-card:hover {

  border-color:
    var(--dikichi-pink-deep);

  box-shadow:
    var(--shadow-md);

  transform:
    translateY(-1px);

}


.comparison-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  color:
    var(--gray-title-text);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.1em;

}


.comparison-badge {

  padding:
    4px 7px;

  border-radius:
    5px;

  background:
    var(--dikichi-pink-soft);

  color:
    var(--dikichi-pink-deep);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.04em;

}


/* ---------------------------------------------------------
   BIG PERCENTAGE
   --------------------------------------------------------- */

.comparison-score {

  margin-top:
    12px;

  color:
    var(--dikichi-ink-deep);

  font-size:
    32px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -0.055em;

}


.comparison-score .likert-value {

  margin-left:
    5px;

  color:
    var(--gray-title-text);

  font-size:
    11px;

  font-weight:
    650;

  letter-spacing:
    0;

}


/* ---------------------------------------------------------
   MOVEMENT
   --------------------------------------------------------- */

.comparison-difference {

  margin-top:
    8px;

  color:
    var(--text-secondary);

  font-size:
    11px;

  font-weight:
    750;

}


.comparison-difference.positive {

  color:
    var(--grade-high-text);

}


.comparison-difference.negative {

  color:
    var(--grade-middle-fail-text);

}


.comparison-difference.neutral {

  color:
    var(--gray-title-text);

}


.comparison-meta {

  margin-top:
    6px;

  color:
    var(--gray-title-text);

  font-size:
    10px;

}


/* =========================================================
   11. PANELS
   ========================================================= */

/* ---------------------------------------------------------
   PRODUCT + GRADE SIDE-BY-SIDE GRID
   --------------------------------------------------------- */

.product-grade-grid {

  display:
    grid;

  grid-template-columns:
    3fr 2fr;

  gap:
    12px;

  align-items:
    start;

}


.grade-panel {

  display:
    flex;

  flex-direction:
    column;

}


.rank-cell {

  width:
    32px;

  color:
    var(--gray-title-text);

  font-size:
    11px;

  font-weight:
    700;

  text-align:
    center;

}


@media (max-width: 900px) {

  .product-grade-grid {

    grid-template-columns:
      1fr;

  }

  .grade-panel {

    position:
      static;

  }

}


/* ---------------------------------------------------------
   MULTI-SELECT FILTER
   --------------------------------------------------------- */

.multi-select {

  position:
    relative;

  min-width:
    120px;

}


.multi-select-trigger {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    6px;

  padding:
    0 10px;

  height:
    34px;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    6px;

  cursor:
    pointer;

  user-select:
    none;

  font-size:
    12px;

  color:
    var(--text);

}


.multi-select-trigger:hover {

  border-color:
    var(--border-strong);

}


.multi-select.is-open .multi-select-trigger {

  border-color:
    var(--dikichi-pink-deep);

  box-shadow:
    0 0 0 2px var(--dikichi-pink-soft);

}


.multi-select-label {

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  max-width:
    140px;

}


.multi-select-arrow {

  flex:
    0 0 auto;

  font-size:
    10px;

  color:
    var(--gray-title-text);

  transition:
    transform 0.15s;

}


.multi-select.is-open .multi-select-arrow {

  transform:
    rotate(180deg);

}


.multi-select-dropdown {

  display:
    none;

  position:
    absolute;

  top:
    calc(100% + 4px);

  left:
    0;

  min-width:
    100%;

  max-height:
    220px;

  overflow-y:
    auto;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    8px;

  box-shadow:
    0 4px 16px rgba(0,0,0,0.10);

  z-index:
    200;

  padding:
    4px 0;

}


.multi-select.is-open .multi-select-dropdown {

  display:
    block;

}


.multi-select-option {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    7px 12px;

  font-size:
    12px;

  color:
    var(--text);

  cursor:
    pointer;

}


.multi-select-option:hover {

  background:
    var(--surface-soft);

}


.multi-select-option input[type="checkbox"] {

  margin:
    0;

  accent-color:
    var(--dikichi-pink-deep);

}


.multi-select-option.is-all {

  border-bottom:
    1px solid var(--border-light);

  font-weight:
    600;

  margin-bottom:
    2px;

}


/* ---------------------------------------------------------
   AUDIT EXPLORER - rich table additions
   --------------------------------------------------------- */

.audit-search-bar {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    12px;

}


.audit-search-input {

  flex:
    1;

  padding:
    7px 12px;

  border:
    1px solid var(--border);

  border-radius:
    6px;

  font-size:
    12px;

  color:
    var(--text);

  background:
    var(--surface);

  outline:
    none;

}


.audit-search-input:focus {

  border-color:
    var(--dikichi-pink-deep);

  box-shadow:
    0 0 0 2px var(--dikichi-pink-soft);

}


.audit-record-count {

  font-size:
    11px;

  color:
    var(--gray-title-text);

  white-space:
    nowrap;

}


.doc-link {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    26px;

  height:
    26px;

  border-radius:
    5px;

  background:
    var(--dikichi-pink-soft);

  color:
    var(--dikichi-pink-deep);

  font-size:
    13px;

  text-decoration:
    none;

  margin-right:
    2px;

}


.doc-link:hover {

  background:
    var(--grade-high-soft);

}


th.sortable {

  cursor:
    pointer;

  user-select:
    none;

}


th.sortable:hover {

  color:
    var(--dikichi-pink-deep);

}


th.sort-asc::after {

  content:
    " -";

  font-size:
    9px;

}


th.sort-desc::after {

  content:
    " -";

  font-size:
    9px;

}


.panel {

  margin-bottom:
    20px;

  padding:
    20px;

  background:
    rgba(255, 255, 255, 0.96);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-xs);

}


.panel-header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    16px;

}


.panel-header h2 {

  margin:
    4px 0 0;

  color:
    var(--dikichi-ink-deep);

  font-size:
    18px;

  line-height:
    1.25;

  letter-spacing:
    -0.03em;

}


.panel-description {

  margin:
    6px 0 0;

  color:
    var(--text-secondary);

  font-size:
    11px;

}


.panel-action {

  flex:
    0 0 auto;

  min-height:
    33px;

  padding:
    0 11px;

  border:
    1px solid
    var(--border);

  border-radius:
    8px;

  background:
    #FFFFFF;

  color:
    var(--dikichi-pink-deep);

  font-size:
    10px;

  font-weight:
    700;

  transition:
    140ms ease;

}


.panel-action:hover {

  background:
    var(--dikichi-pink-deep);

  border-color:
    var(--dikichi-pink-deep);

  color:
    #FFFFFF;

}


/* =========================================================
   12. PERIOD SWITCHER
   ========================================================= */

.period-switcher,
.period-tabs,
.trend-tabs {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    2px;

  padding:
    3px;

  background:
    #F0F3F5;

  border:
    1px solid
    var(--border);

  border-radius:
    9px;

}


.period-switcher button,
.period-tabs button,
.trend-tabs button {

  min-height:
    30px;

  padding:
    0 11px;

  border:
    0;

  border-radius:
    6px;

  background:
    transparent;

  color:
    var(--gray-title-text);

  font-size:
    10px;

  font-weight:
    750;

  transition:
    140ms ease;

}


.period-switcher button:hover,
.period-tabs button:hover,
.trend-tabs button:hover {

  color:
    var(--dikichi-pink-deep);

}


.period-switcher button.active,
.period-tabs button.active,
.trend-tabs button.active,
.period-switcher button.is-active,
.period-tabs button.is-active,
.trend-tabs button.is-active {

  background:
    #FFFFFF;

  color:
    var(--dikichi-pink-deep);

  box-shadow:
    0 1px 4px
    rgba(46, 20, 64, 0.08);

}


/* =========================================================
   13. QUALITY TREND
   ========================================================= */

.quality-trend-panel {

  overflow:
    hidden;

}


.quality-trend-header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

}


.trend-chart-wrapper {

  position:
    relative;

  width:
    100%;

  min-height:
    380px;

}


.trend-chart-container {

  position:
    relative;

  width:
    100%;

  min-height:
    360px;

}


.chart-container {

  width:
    100%;

  min-height:
    320px;

  height:
    320px;

}


.donut-container {

  width:
    100%;

  overflow:
    visible;

}


/* ---------------------------------------------------------
   CHART LEGEND
   --------------------------------------------------------- */

.chart-legend {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    10px;

}


.chart-legend-item {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  color:
    var(--text-secondary);

  font-size:
    10px;

}


.chart-legend-dot {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

}


/* ---------------------------------------------------------
   CHART LOADING
   --------------------------------------------------------- */

.chart-loading {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    300px;

  color:
    var(--gray-title-text);

  font-size:
    11px;

}


/* =========================================================
   14. CHART GRID
   ========================================================= */

.chart-grid {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(0, 1fr);

  gap:
    20px;

  margin-bottom:
    20px;

}


.chart-panel {

  margin-bottom:
    0;

}


/* =========================================================
   15. PRODUCT QUALITY PERFORMANCE
   ========================================================= */

.product-performance-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(390px, 1fr)
    );

  gap:
    16px;

}


.product-performance-card {

  position:
    relative;

  padding:
    18px;

  background:
    var(--surface-warm);

  border:
    1px solid
    var(--border);

  border-radius:
    14px;

  overflow:
    hidden;

  transition:
    160ms ease;

}


.product-performance-card:hover {

  border-color:
    var(--border-strong);

  box-shadow:
    var(--shadow-md);

  transform:
    translateY(-1px);

}


/* ---------------------------------------------------------
   PRODUCT RANK
   --------------------------------------------------------- */

.product-rank {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    26px;

  height:
    26px;

  margin-right:
    7px;

  border-radius:
    50%;

  background:
    var(--dikichi-pink-deep);

  color:
    var(--dikichi-purple-soft);

  font-size:
    10px;

  font-weight:
    850;

}


.product-performance-title {

  display:
    flex;

  align-items:
    center;

  color:
    var(--dikichi-ink-deep);

  font-size:
    17px;

  font-weight:
    800;

  letter-spacing:
    -0.025em;

}


.product-performance-meta {

  margin-top:
    4px;

  color:
    var(--text-secondary);

  font-size:
    10px;

}


.product-performance-score {

  margin-top:
    13px;

  color:
    var(--dikichi-ink-deep);

  font-size:
    32px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -0.055em;

}


.product-performance-score small {

  color:
    var(--gray-title-text);

  font-size:
    10px;

  font-weight:
    650;

  letter-spacing:
    0;

}


/* ---------------------------------------------------------
   SCORE PROGRESS
   --------------------------------------------------------- */

.score-progress {

  width:
    100%;

  height:
    8px;

  margin-top:
    12px;

  overflow:
    hidden;

  border-radius:
    99px;

  background:
    #E7E9EA;

}


.score-progress-bar {

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(--grade-high);

  transition:
    width
    300ms ease;

}


/* ---------------------------------------------------------
   ATTRIBUTE BREAKDOWN
   --------------------------------------------------------- */

.attribute-breakdown {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(115px, 1fr)
    );

  gap:
    8px;

  margin-top:
    16px;

  padding-top:
    14px;

  border-top:
    1px solid
    var(--border);

}


.attribute-card {

  padding:
    10px;

  background:
    #FFFFFF;

  border:
    1px solid
    var(--border);

  border-radius:
    9px;

}


.attribute-card-name {

  color:
    var(--text-secondary);

  font-size:
    10px;

}


.attribute-card-score {

  margin-top:
    3px;

  color:
    var(--dikichi-ink-deep);

  font-size:
    16px;

  font-weight:
    800;

}


.attribute-card-meta {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-top:
    4px;

  color:
    var(--gray-title-text);

  font-size:
    9px;

}


/* =========================================================
   16. GRADE BADGES
   ========================================================= */

.grade-badge {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    4px 8px;

  border:
    1px solid
    transparent;

  border-radius:
    5px;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.045em;

  white-space:
    nowrap;

}


.grade-high-pass {

  background:
    var(--grade-high-soft);

  border-color:
    var(--grade-high-border);

  color:
    var(--grade-high-text);

}


.grade-middle-pass {

  background:
    var(--grade-middle-soft);

  border-color:
    var(--grade-middle-border);

  color:
    var(--grade-middle-text);

}


.grade-borderline-pass {

  background:
    var(--grade-borderline-soft);

  border-color:
    var(--grade-borderline-border);

  color:
    var(--grade-borderline-text);

}


.grade-middle-fail {

  background:
    var(--grade-middle-fail-soft);

  border-color:
    var(--grade-middle-fail-border);

  color:
    var(--grade-middle-fail-text);

}


.grade-strong-fail {

  background:
    var(--grade-strong-fail-soft);

  border-color:
    var(--grade-strong-fail-border);

  color:
    var(--grade-strong-fail-text);

}


/* ---------------------------------------------------------
   KPI GRADE CLASS ALIASES
   --------------------------------------------------------- */

.kpi-grade.grade-high {

  color:
    var(--grade-high-text);

}

.kpi-grade.grade-middle {

  color:
    var(--grade-middle-text);

}

.kpi-grade.grade-borderline {

  color:
    var(--grade-borderline-text);

}

.kpi-grade.grade-middle-fail {

  color:
    var(--grade-middle-fail-text);

}

.kpi-grade.grade-strong-fail {

  color:
    var(--grade-strong-fail-text);

}


/* =========================================================
   17. QUALITY ATTENTION
   ========================================================= */

.attention-row {

  cursor:
    pointer;

}


.attention-indicator {

  display:
    inline-block;

  width:
    7px;

  height:
    7px;

  margin-right:
    7px;

  border-radius:
    50%;

  background:
    var(--grade-borderline);

  box-shadow:
    0 0 0 3px
    var(--grade-borderline-soft);

}


.attention-indicator.high {

  background:
    var(--grade-middle-fail);

  box-shadow:
    0 0 0 3px
    var(--grade-middle-fail-soft);

}


/* =========================================================
   18. OUTLET - ATTRIBUTE MATRIX
   ========================================================= */

.matrix-container {

  width:
    100%;

  overflow-x:
    auto;

}


.quality-matrix {

  width:
    100%;

  min-width:
    780px;

  border-collapse:
    separate;

  border-spacing:
    0;

}


.quality-matrix th {

  padding:
    11px 12px;

  background:
    #F5F6F7;

  border-bottom:
    1px solid
    var(--border);

  color:
    var(--text-secondary);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-align:
    center;

  text-transform:
    uppercase;

}


.quality-matrix th:first-child {

  text-align:
    left;

}


.quality-matrix td {

  padding:
    11px 12px;

  border-bottom:
    1px solid
    var(--border);

  text-align:
    center;

}


.quality-matrix td:first-child {

  text-align:
    left;

}


.matrix-score {

  display:
    inline-flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    70px;

  min-height:
    52px;

  padding:
    5px 8px;

  border:
    1px solid;

  border-radius:
    9px;

}


.matrix-score-value {

  font-size:
    14px;

  font-weight:
    800;

}


.matrix-score-meta {

  margin-top:
    1px;

  font-size:
    8px;

  opacity:
    0.72;

}


/* =========================================================
   19. TABLE
   ========================================================= */

.table-container {

  width:
    100%;

  overflow-x:
    auto;

}


.data-table {

  width:
    100%;

  min-width:
    0;

  border-collapse:
    collapse;

}


.data-table th {

  padding:
    8px 10px;

  background:
    #F7F8F9;

  border-bottom:
    1px solid
    var(--border);

  color:
    var(--text-secondary);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;

}


.data-table td {

  padding:
    8px 10px;

  border-bottom:
    1px solid
    var(--border);

  color:
    var(--text-secondary);

  font-size:
    11px;

  vertical-align:
    middle;

}


.data-table tbody tr {

  transition:
    background
    120ms ease;

}


.data-table tbody tr:hover {

  background:
    var(--dikichi-purple-light);

}


.data-table tbody tr:last-child td {

  border-bottom:
    0;

}


.table-primary {

  color:
    var(--dikichi-ink-deep) !important;

  font-weight:
    700;

}


.score-cell {

  color:
    var(--dikichi-ink-deep) !important;

  font-weight:
    800;

}


.score-high {

  color:
    var(--grade-high-text) !important;

}


.score-warning {

  color:
    var(--grade-borderline-text) !important;

}


.score-danger {

  color:
    var(--grade-middle-fail-text) !important;

}


.table-loading,
.table-empty {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    110px;

  color:
    var(--gray-title-text);

  font-size:
    11px;

}


/* =========================================================
   20. AUDIT EXPLORER
   ========================================================= */

.audit-explorer {

  overflow:
    hidden;

}


.audit-search {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    260px;

  height:
    36px;

  padding:
    0 11px;

  background:
    #FFFFFF;

  border:
    1px solid
    var(--border);

  border-radius:
    8px;

}


.audit-search input {

  width:
    100%;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--text);

  font-size:
    11px;

}


.audit-search input::placeholder {

  color:
    var(--gray-muted-text);

}


.audit-search-icon {

  color:
    var(--gray-title-text);

  font-size:
    14px;

}


/* ---------------------------------------------------------
   EVIDENCE LINKS
   --------------------------------------------------------- */

.documentation-links {

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

}


.documentation-link {

  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  gap:
    5px;

  padding:
    4px 7px;

  border:
    1px solid
    var(--grade-borderline-border);

  border-radius:
    5px;

  background:
    var(--grade-borderline-soft);

  color:
    #9A5700;

  text-decoration:
    none;

  font-size:
    9px;

  font-weight:
    700;

  transition:
    140ms ease;

}


.documentation-link:hover {

  background:
    var(--grade-borderline);

  border-color:
    var(--grade-borderline);

  color:
    #FFFFFF;

}


/* =========================================================
   21. CLICKABLE ROWS
   ========================================================= */

.clickable-row {

  cursor:
    pointer;

}


.clickable-row:hover td {

  color:
    var(--dikichi-ink-deep);

}


/* =========================================================
   22. MODAL
   ========================================================= */

.modal-overlay {

  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    24px;

  background:
    rgba(43, 18, 51, 0.58);

  backdrop-filter:
    blur(5px);

  opacity:
    0;

  visibility:
    hidden;

  transition:
    180ms ease;

}


.modal-overlay.is-open {

  opacity:
    1;

  visibility:
    visible;

}


.modal {

  width:
    min(980px, 100%);

  max-height:
    min(780px, calc(100vh - 48px));

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  background:
    #FFFFFF;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-lg);

  transform:
    translateY(10px)
    scale(0.985);

  transition:
    180ms ease;

}


.modal-overlay.is-open .modal {

  transform:
    translateY(0)
    scale(1);

}


.modal-header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    20px 22px;

  background:
    var(--dikichi-pink-deep);

  color:
    #FFFFFF;

  border-bottom:
    1px solid
    var(--border);

}


.modal-header h2 {

  margin:
    4px 0 0;

  color:
    var(--dikichi-purple-soft);

  font-size:
    20px;

  letter-spacing:
    -0.03em;

}


.modal-close {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  border:
    1px solid
    rgba(255,255,255,0.18);

  border-radius:
    8px;

  background:
    rgba(255,255,255,0.07);

  color:
    #FFFFFF;

  font-size:
    21px;

  line-height:
    1;

}


.modal-close:hover {

  background:
    rgba(245,241,223,0.16);

  color:
    var(--dikichi-purple-soft);

}


.modal-body {

  overflow:
    auto;

  padding:
    22px;

}


/* =========================================================
   23. MODAL SUMMARY
   ========================================================= */

.detail-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    10px;

  margin-bottom:
    20px;

}


.detail-item {

  padding:
    12px;

  background:
    var(--surface-soft);

  border:
    1px solid
    var(--border);

  border-radius:
    9px;

}


.detail-label {

  color:
    var(--gray-title-text);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}


.detail-value {

  margin-top:
    5px;

  color:
    var(--dikichi-ink-deep);

  font-size:
    13px;

  font-weight:
    700;

  word-break:
    break-word;

}


/* ---------------------------------------------------------
   ITEM DETAIL MODAL - summary header + stats strip
   --------------------------------------------------------- */

.detail-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    linear-gradient(
      135deg,
      var(--dikichi-pink-soft) 0%,
      var(--surface-soft) 100%
    );
}

.detail-score {
  flex: 0 0 auto;
  min-width: 92px;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.detail-title {
  color: var(--dikichi-ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.detail-subtitle {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.detail-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong, #DCC7DE);
  border-radius: 12px;
  background: var(--surface);
}

.detail-stat-value {
  color: var(--dikichi-ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}

.detail-stat-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}


.feedback-box {

  margin-top:
    18px;

  padding:
    14px;

  background:
    var(--dikichi-purple-light);

  border:
    1px solid
    var(--border-strong, #DCC7DE);

  border-radius:
    10px;

}


.feedback-label {

  color:
    var(--gray-title-text);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}


.feedback-text {

  margin-top:
    7px;

  color:
    var(--text-secondary);

  font-size:
    12px;

  line-height:
    1.65;

}


/* =========================================================
   MODAL BOXED BLOCKS — bordered cards (round 3)
   ========================================================= */
.modal-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.modal-stat-card {
  background: var(--surface-2, #F8F1F7);
  border: 1px solid var(--border-strong, #DCC7DE);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow-xs);
}

.modal-panel {
  background: var(--surface-2, #F8F1F7);
  border: 1px solid var(--border-strong, #DCC7DE);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}

@media (max-width: 640px) {
  .modal-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =========================================================
   24. TOAST
   ========================================================= */

.toast {

  position:
    fixed;

  right:
    24px;

  bottom:
    24px;

  z-index:
    2000;

  max-width:
    360px;

  padding:
    11px 15px;

  background:
    var(--dikichi-pink-deep);

  color:
    #FFFFFF;

  border:
    1px solid
    rgba(255,255,255,0.08);

  border-radius:
    8px;

  box-shadow:
    var(--shadow-md);

  font-size:
    11px;

  font-weight:
    650;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(8px);

  transition:
    180ms ease;

}


.toast.is-visible {

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0);

}


/* =========================================================
   25. ERROR STATE
   ========================================================= */

.error-state {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    240px;

  padding:
    30px;

  text-align:
    center;

}


.error-state-title {

  color:
    var(--grade-middle-fail-text);

  font-size:
    15px;

  font-weight:
    800;

}


.error-state-message {

  max-width:
    560px;

  margin-top:
    7px;

  color:
    var(--text-secondary);

  font-size:
    11px;

}


/* =========================================================
   26. NO DATA STATE
   ========================================================= */

.no-data {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    160px;

  padding:
    24px;

  text-align:
    center;

}


.no-data-title {

  color:
    var(--dikichi-ink-deep);

  font-size:
    13px;

  font-weight:
    750;

}


.no-data-description {

  max-width:
    420px;

  margin-top:
    5px;

  color:
    var(--gray-title-text);

  font-size:
    10px;

}


/* =========================================================
   27. GENERIC UTILITIES
   ========================================================= */

.muted {

  color:
    var(--gray-title-text);

}


.text-right {

  text-align:
    right !important;

}


.text-center {

  text-align:
    center !important;

}


.hidden {

  display:
    none !important;

}


/* =========================================================
   28. SCROLLBAR
   ========================================================= */

* {

  scrollbar-width:
    thin;

  scrollbar-color:
    #B7C1C8
    transparent;

}


*::-webkit-scrollbar {

  width:
    7px;

  height:
    7px;

}


*::-webkit-scrollbar-track {

  background:
    transparent;

}


*::-webkit-scrollbar-thumb {

  background:
    #B7C1C8;

  border-radius:
    99px;

}


*::-webkit-scrollbar-thumb:hover {

  background:
    var(--dikichi-pink-deep);

}


/* =========================================================
   29. RESPONSIVE - LAPTOP
   ========================================================= */

@media (
  max-width: 1180px
) {

  .dashboard-container {

    width:
      min(
        calc(100% - 40px),
        1080px
      );

  }


  .kpi-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }


  .chart-grid {

    grid-template-columns:
      1fr;

  }


  .product-performance-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }

}


/* =========================================================
   30. RESPONSIVE - TABLET
   ========================================================= */

@media (
  max-width: 820px
) {

  .topbar {

    padding:
      12px 18px;

  }


  .header-status {

    gap:
      8px;

  }


  .last-updated {

    display:
      none;

  }


  .dashboard-container {

    width:
      calc(100% - 28px);

    padding-top:
      24px;

  }


  .section-header {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      14px;

  }


  .data-status {

    align-items:
      flex-start;

  }


  .filter-group {

    flex:
      1 1
      calc(50% - 8px);

    min-width:
      150px;

  }


  .filter-reset {

    margin-left:
      0;

  }


  .quality-standard {

    align-items:
      flex-start;

    justify-content:
      flex-start;

    flex-direction:
      column;

  }


  .quality-standard-items {

    justify-content:
      flex-start;

  }


  .comparison-grid {

    grid-template-columns:
      1fr;

  }


  .product-performance-grid {

    grid-template-columns:
      1fr;

  }


  .detail-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .quality-trend-header {

    flex-direction:
      column;

  }


  .audit-search {

    width:
      100%;

    min-width:
      0;

  }

}


/* =========================================================
   31. RESPONSIVE - MOBILE
   ========================================================= */

@media (
  max-width: 560px
) {

  body {

    font-size:
      13px;

  }


  .topbar {

    min-height:
      66px;

    padding:
      10px 14px;

  }


  .brand-mark {

    width:
      36px;

    height:
      36px;

    flex-basis:
      36px;

  }


  .brand-name {

    font-size:
      22px;

  }


  .brand-subtitle {

    font-size:
      12px;

  }


  .live-status {

    display:
      none;

  }


  .refresh-button {

    padding:
      0 9px;

  }


  .dashboard-container {

    width:
      calc(100% - 20px);

    padding:
      20px 0 40px;

  }


  .section-header h1 {

    font-size:
      24px;

  }


  .filter-bar {

    padding:
      11px;

  }


  .filter-group {

    flex:
      1 1 100%;

  }


  .filter-reset {

    width:
      100%;

  }


  .filter-reset button {

    width:
      100%;

  }


  .grade-standard,
  .standards-legend,
  .grade-legend {

    justify-content:
      flex-start;

  }


  .kpi-grid {

    grid-template-columns:
      1fr;

  }


  .kpi-card {

    min-height:
      145px;

  }


  .kpi-value {

    font-size:
      31px;

  }


  .primary-card .kpi-value {

    font-size:
      37px;

  }


  .panel {

    padding:
      15px;

    border-radius:
      12px;

  }


  .panel-header {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .period-switcher,
  .period-tabs,
  .trend-tabs {

    width:
      100%;

    justify-content:
      space-between;

  }


  .period-switcher button,
  .period-tabs button,
  .trend-tabs button {

    flex:
      1;

    padding:
      0 7px;

  }


  .chart-container,
  .donut-container {

    min-height:
      270px;

  }


  .trend-chart-wrapper,
  .trend-chart-container {

    min-height:
      300px;

  }


  .audit-search {

    width:
      100%;

  }


  .modal-overlay {

    padding:
      10px;

  }


  .modal {

    max-height:
      calc(100vh - 20px);

    border-radius:
      12px;

  }


  .modal-header {

    padding:
      16px;

  }


  .modal-body {

    padding:
      16px;

  }


  .detail-grid {

    grid-template-columns:
      1fr;

  }

}


/* =========================================================
   31b. RESPONSIVE - BRAND TEXT + DETAIL SUMMARY
   ========================================================= */

@media (
  max-width: 640px
) {

  .brand-name {

    font-size:
      22px;

  }

  .brand-subtitle {

    font-size:
      12px;

  }

  .detail-header {

    flex-wrap:
      wrap;

  }

  .detail-stats {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }

}


@media (
  max-width: 420px
) {

  .brand-name {

    font-size:
      19px;

  }

  .brand-subtitle {

    font-size:
      11px;

  }

  .detail-stats {

    grid-template-columns:
      1fr;

  }

}


/* =========================================================
   32. PRINT
   ========================================================= */

@media print {

  .topbar {

    position:
      static;

  }


  .filter-bar,
  .refresh-button,
  .panel-action,
  .period-switcher,
  .period-tabs,
  .trend-tabs {

    display:
      none !important;

  }


  .dashboard-container {

    width:
      100%;

    padding:
      0;

  }


  .panel,
  .kpi-card {

    box-shadow:
      none;

  }

  }


  /* ---------------------------------------------------------
     COMPARISON POPUP
     --------------------------------------------------------- */

  .comparison-popup-grid {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: center;
    margin-bottom: 16px;
  }

  .comparison-popup-col {
    text-align: center;
    min-width: 120px;
  }

  .comparison-popup-period {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-title-text);
    margin-bottom: 6px;
  }

  .comparison-popup-score {
    font-size: 28px;
    font-weight: 800;
    color: var(--dikichi-pink-deep);
    line-height: 1;
    margin-bottom: 4px;
  }

  .comparison-popup-pct {
    font-size: 13px;
    color: var(--gray-title-text);
    margin-bottom: 8px;
  }

  .comparison-popup-badge {
    margin-bottom: 8px;
  }

  .comparison-popup-meta {
    font-size: 11px;
    color: var(--gray-title-text);
  }

  .comparison-popup-divider {
    font-size: 18px;
    font-weight: 700;
    color: var(--border-strong);
    padding: 0 8px;
  }

  .comparison-popup-movement {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    margin-top: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--surface-soft);
  }

  .comparison-popup-movement.positive {
    color: #007D5C;
    background: rgba(0, 155, 114, 0.08);
  }

  .comparison-popup-movement.negative {
    color: #D02552;
    background: rgba(217, 39, 85, 0.08);
  }

  .comparison-popup-diff {
    text-align: center;
    font-size: 12px;
    color: var(--gray-title-text);
    margin-top: 6px;
  }

  .feedback-cell {
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    color: var(--gray-title-text);
  }


  


/* ---------------------------------------------------------
   ATTENTION KPI
   --------------------------------------------------------- */

.attention-card {

  border-left:
    3px solid
    var(--grade-borderline);

}


.attention-card::before {

  content:
    "!";

  position:
    absolute;

  top:
    17px;

  right:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    25px;

  height:
    25px;

  border:
    1px solid
    var(--grade-borderline-border);

  border-radius:
    50%;

  background:
    var(--grade-borderline-soft);

  color:
    var(--grade-borderline-text);

  font-size:
    13px;

  font-weight:
    850;

  z-index:
    2;

}


.kpi-label {

  position:
    relative;

  z-index:
    1;

  color:
    var(--gray-title-text);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;

}


.primary-card .kpi-label {

  color:
    rgba(255, 255, 255, 0.90);

}


.kpi-value {

  position:
    relative;

  z-index:
    1;

  margin-top:
    13px;

  color:
    var(--text);

  font-size:
    35px;

  line-height:
    1;

  font-weight:
    780;

  letter-spacing:
    -0.055em;

}


.primary-card .kpi-value {

  color:
    #FFFFFF;

  font-size:
    43px;

}


/* ---------------------------------------------------------
   SCORE / 5
   --------------------------------------------------------- */

.score-out-of {

  position:
    relative;

  z-index:
    1;

  margin-left:
    4px;

  color:
    var(--gray-title-text);

  font-size:
    12px;

  font-weight:
    650;

  letter-spacing:
    0;

}


.primary-card .score-out-of {

  color:
    rgba(255, 255, 255, 0.92);

}


.attention-value {

  font-size:
    23px;

  line-height:
    1.2;

  letter-spacing:
    -0.035em;

}


/* ---------------------------------------------------------
   KPI GRADE
   --------------------------------------------------------- */

.kpi-grade {

  position:
    relative;

  z-index:
    1;

  display:
    inline-flex;

  margin-top:
    9px;

  padding:
    4px 8px;

  border-radius:
    5px;

  background:
    var(--dikichi-pink-soft);

  color:
    var(--dikichi-pink-deep);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.05em;

}


.primary-card .kpi-grade {

  background:
    rgba(245, 241, 223, 0.14);

  color:
    var(--dikichi-purple-soft);

}


/* ---------------------------------------------------------
   KPI DESCRIPTION
   --------------------------------------------------------- */

.kpi-description {

  position:
    relative;

  z-index:
    1;

  margin-top:
    10px;

  color:
    var(--gray-title-text);

  font-size:
    10px;

}


.primary-card .kpi-description {

  color:
    rgba(255, 255, 255, 0.92);

}


/* ---------------------------------------------------------
   FAIL RATE EXPLANATION
   --------------------------------------------------------- */

.fail-rate-explanation {

  max-width:
    280px;

  margin-top:
    7px;

  color:
    var(--gray-title-text);

  font-size:
    10px;

  line-height:
    1.45;

}


/* ---------------------------------------------------------
     OUTLET PERFORMANCE -- REDESIGN
     --------------------------------------------------------- */

  .outlet-click-hint {
    font-size: 11px;
    color: var(--gray-title-text);
    margin-top: 6px;
    font-style: italic;
  }

  .outlet-score-cell {
    min-width: 110px;
  }

  .outlet-score-main {
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
  }

  .outlet-score-pct {
    font-size: 11px;
    color: var(--gray-title-text);
  }

  .outlet-score-bar-wrap {
    height: 3px;
    background: #eef0f2;
    border-radius: 2px;
    margin-top: 4px;
    width: 80px;
    overflow: hidden;
  }

  .outlet-score-bar {
    height: 3px;
    border-radius: 2px;
  }

  .outlet-score-bar.score-high  { background: #009B72; }
  .outlet-score-bar.score-good  { background: #0E9AA7; }
  .outlet-score-bar.score-mid   { background: #E58A00; }
  .outlet-score-bar.score-low   { background: #E84B16; }
  .outlet-score-bar.score-bad   { background: #D92755; }

  .outlet-audits-cell {
    font-size: 12px;
    color: var(--gray-title-text);
    text-align: center;
  }

  .outlet-attention-cell {
    font-size: 12px;
    color: var(--gray-title-text);
  }

  .outlet-trend-cell {
    font-size: 12px;
    color: var(--gray-title-text);
    text-align: center;
  }

  /* Outlet modal */
  .outlet-modal-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .outlet-modal-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .outlet-modal-score {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
  }

  .outlet-modal-pct {
    font-size: 13px;
    color: var(--gray-title-text);
  }

  .outlet-modal-audits {
    font-size: 12px;
    color: var(--gray-title-text);
    margin-left: auto;
  }

  .outlet-modal-attention {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .outlet-modal-attention-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-title-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .outlet-modal-attention-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }

  .outlet-modal-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-title-text);
    margin: 0 0 10px 0;
  }


  /* ---------------------------------------------------------
     DATE HIERARCHY FILTER
     --------------------------------------------------------- */

  .date-hierarchy-dropdown {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 0;
  }

  .dh-year,
  .dh-month {
    user-select: none;
  }

  .dh-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
  }

  .dh-toggle:hover {
    background: rgba(87, 43, 122,0.06);
  }

  .dh-arrow {
    font-size: 10px;
    color: var(--gray-title-text);
    min-width: 12px;
  }

  .dh-month .dh-toggle {
    padding-left: 22px;
    font-weight: 500;
  }

  .dh-children {
    padding-left: 8px;
  }

  .dh-day {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 30px;
    font-size: 11px;
    color: var(--text);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
    white-space: nowrap;
  }

  .dh-day:hover {
    background: rgba(87, 43, 122,0.06);
  }

  .dh-day input[type=checkbox] {
    accent-color: var(--dikichi-pink-deep, #572B7A);
    cursor: pointer;
  }


/* ---------------------------------------------------------
     DATE HIERARCHY FILTER
     --------------------------------------------------------- */

  .date-hierarchy-dropdown {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 0;
  }

  .dh-year,
  .dh-month {
    user-select: none;
  }

  .dh-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
  }

  .dh-toggle:hover {
    background: rgba(87, 43, 122,0.06);
  }

  .dh-arrow {
    font-size: 10px;
    color: var(--gray-title-text);
    min-width: 12px;
  }

  .dh-month .dh-toggle {
    padding-left: 22px;
    font-weight: 500;
  }

  .dh-children {
    padding-left: 8px;
  }

  .dh-day {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 30px;
    font-size: 11px;
    color: var(--text);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
    white-space: nowrap;
  }

  .dh-day:hover {
    background: rgba(87, 43, 122,0.06);
  }

  .dh-day input[type=checkbox] {
    accent-color: var(--dikichi-pink-deep, #572B7A);
    cursor: pointer;
  }




/* -- Ported from broken: attention + kpi styles -- */
.attention-low-label {
    font-size: 10px;
    color: var(--gray-title-text);
    display: block;
  }

.attention-low-pct {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
  }

.attention-low-signal {
    text-align: center;
  }

.attention-obs {
    font-size: 12px;
    color: var(--gray-title-text);
    text-align: center;
  }

.attention-pri--high {
    color: #D02552;
    background: rgba(217, 39, 85, 0.10);
  }

.attention-pri--low {
    color: #007D5C;
    background: rgba(0, 155, 114, 0.10);
  }

.attention-pri--moderate {
    color: #9E5F00;
    background: rgba(229, 138, 0, 0.10);
  }

.attention-priority-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-block;
    white-space: nowrap;
  }

.attention-priority-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--dikichi-pink-deep, #572B7A);
    letter-spacing: 0.04em;
    margin-top: 8px;
    opacity: 0.75;
  }

.attention-score-bar {
    height: 3px;
    border-radius: 2px;
  }

.attention-score-bar-wrap {
    height: 3px;
    background: #eef0f2;
    border-radius: 2px;
    margin-top: 4px;
    width: 80px;
    overflow: hidden;
  }

.attention-score-cell {
    min-width: 110px;
  }

.attention-score-main {
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
  }

.attention-score-pct {
    font-size: 11px;
    color: var(--gray-title-text);
  }

.comparison-popup-boundary {
    font-size: 10px;
    color: var(--gray-title-text);
    margin-bottom: 8px;
    line-height: 1.4;
  }

.comparison-popup-note {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--surface-soft, #f5f7fa);
    border-radius: 6px;
    font-size: 11px;
    color: var(--gray-title-text);
    line-height: 1.5;
  }

.kpi-click-hint {
  margin-top: auto;
  padding-top: 10px;
  font-size: 10px;
  color: var(--gray-title-text);
  letter-spacing: 0.03em;
  opacity: 0.9;
}

.kpi-clickable {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

/*
 * Isi kartu KPI di-center vertikal di dalam kartu,
 * sementara label tetap di atas dan hint tetap di bawah.
 */
.kpi-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
}

.kpi-product-bar {
  height: 4px;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.kpi-product-bar-wrap {
  grid-column: 1;
  grid-row: 2;
  height: 4px;
  background: #eef0f2;
  border-radius: 2px;
  overflow: hidden;
}

.kpi-product-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 1px 8px;
  align-items: center;
}

.kpi-product-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.kpi-product-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  grid-column: 1;
  grid-row: 1;
}

.kpi-product-score {
  font-size: 11px;
  font-weight: 700;
  grid-column: 2;
  grid-row: 1 / 3;
  text-align: right;
  white-space: nowrap;
}


/* ---------------------------------------------------------
   PRODUCT RANKING TABLE ENHANCEMENTS
   --------------------------------------------------------- */

.product-ranking-table .prod-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.prod-score-cell {
  white-space: nowrap;
}

.prod-score-main {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.prod-score-pct {
  display: block;
  font-size: 10px;
  color: var(--gray-title-text);
  font-weight: 400;
  margin-top: 1px;
}

.prod-audits-cell {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.product-ranking-table tbody tr:hover .prod-name {
  color: var(--dikichi-pink-deep);
}

/* ---------------------------------------------------------
   GRADE LEGEND ROW HOVER
   --------------------------------------------------------- */

.grade-legend-row:hover {
  background: #F7F8F9;
  padding-left: 4px;
  transition: background 150ms ease;
}



/* QUALITY STANDARD (SOURCE OF TRUTH) grade badges
   HIGH PASS / MIDDLE PASS / BORDERLINE PASS / MIDDLE FAIL / STRONG FAIL */
.grade-badge.grade-high-pass {
  background: var(--grade-high-soft);
  border-color: var(--grade-high-border);
  color: var(--grade-high-text);
}
.grade-badge.grade-middle-pass {
  background: var(--grade-middle-soft);
  border-color: var(--grade-middle-border);
  color: var(--grade-middle-text);
}
.grade-badge.grade-borderline-pass {
  background: var(--grade-borderline-soft);
  border-color: var(--grade-borderline-border);
  color: var(--grade-borderline-text);
}
.grade-badge.grade-middle-fail {
  background: var(--grade-middle-fail-soft);
  border-color: var(--grade-middle-fail-border);
  color: var(--grade-middle-fail-text);
}
.grade-badge.grade-strong-fail {
  background: var(--grade-strong-fail-soft);
  border-color: var(--grade-strong-fail-border);
  color: var(--grade-strong-fail-text);
}
/* score color classes */
.score-high { color: var(--grade-high-text); }
.score-middle { color: var(--grade-middle-text); }
.score-borderline { color: var(--grade-borderline-text); }
.score-warning { color: var(--grade-middle-fail-text); }
.score-danger { color: var(--grade-strong-fail-text); }


/* Audit Explorer Pagination */
#auditPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 4px;
  flex-wrap: wrap;
  gap: 8px;
}
.audit-page-info {
  font-size: 12px;
  color: var(--gray-title-text);
  font-weight: 500;
}
.audit-page-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.audit-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--text, #2E1440);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.audit-page-btn:hover:not(:disabled):not(.audit-page-active) {
  background: var(--surface-2, #F5F7FA);
  border-color: var(--color-plum, #2E1440);
  color: var(--color-plum, #2E1440);
}
.audit-page-btn.audit-page-active {
  background: var(--color-plum, #2E1440);
  border-color: var(--color-plum, #2E1440);
  color: #fff;
  cursor: default;
}
.audit-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.audit-page-nav {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* =========================================================
   PERIOD PERFORMANCE GAUGE (Executive Summary, card 4)

   Redesign v2 - minimal executive:
   - satu busur saja (track tipis + segmen standard),
     tanpa tick 0..5 yang mengelilingi gauge
   - skor saat ini = elemen paling dominan
   - grade, delta, dan info periode dipisah menjadi
     blok sendiri dengan jarak lega
   ========================================================= */

.kpi-card-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 18px 16px;
}

.kpi-card-gauge .kpi-label {
  align-self: center;
}

.gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
}

.gauge-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.gauge-svg {
  display: block;
  width: 100%;
  max-width: 216px;
  height: auto;
  overflow: visible;
}

.gauge-svg text {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* skor utama - hierarki tertinggi di kartu */
.gauge-value-svg {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1.8px;
}

.gauge-outof-svg {
  font-size: 13px;
  font-weight: 700;
  fill: #746A79;
}

/* grade - tepat di bawah skor, di dalam busur */
.gauge-grade-svg {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  fill: #5C4463;
}

/* ---------- blok meta di bawah gauge ---------- */

.gauge-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.gauge-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.gauge-delta-pct {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.75;
}

.gauge-delta--up {
  color: #007D5C;
}

.gauge-delta--down {
  color: #D02552;
}

.gauge-delta--flat {
  color: #6D5975;
}

.gauge-periods {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

.gauge-period {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  width: 100%;
  font-size: 10px;
}

.gauge-period-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #746A79;
  white-space: nowrap;
}

.gauge-period-value {
  font-weight: 700;
  color: var(--text-secondary);
}

.gauge-period.is-muted .gauge-period-value {
  color: #736B75;
  font-weight: 600;
}

.gauge-period.is-low .gauge-period-value {
  color: #9E5F00;
}

.gauge-empty {
  font-size: 12px;
  color: var(--gray-title-text);
  text-align: center;
  padding: 40px 8px;
}


/* =========================================================
   MONTHLY MATRIX TABLES (TABLE A & B)
   ========================================================= */

.matrix-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px 0;
}

.matrix-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.matrix-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: 0 0 9px;
}

.matrix-scroll {
  overflow: auto;
  max-height: 640px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  -webkit-overflow-scrolling: touch;
}

.mx-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* ---------- header ---------- */

.mx-table thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #F2F6F9;
  color: #4A3552;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  padding: 8px 7px;
  border-bottom: 1px solid #DDE6EC;
}

.mx-table thead th.mx-year {
  background: #E8F0F5;
  color: #3A2444;
  letter-spacing: 1.5px;
  font-size: 10px;
  border-bottom: 1px solid #D2E0E8;
}

.mx-table thead th.mx-cat,
.mx-table thead th.mx-item {
  z-index: 8;
  text-align: left;
}

.mx-table thead th.mx-cat {
  width: 168px;
  min-width: 168px;
  max-width: 168px;
  background: var(--dikichi-pink-soft);
  color: var(--dikichi-pink-dark);
  letter-spacing: 1.2px;
  border-right: 1px solid #CFE7EF;
}

.mx-table thead th.mx-item {
  background: #F2F6F9;
  border-right: 1px solid #DDE6EC;
}

/* ---------- body: kolom kunci ---------- */

.mx-table td.mx-cat {
  position: sticky;
  left: 0;
  z-index: 4;
  width: 168px;
  min-width: 168px;
  max-width: 168px;
  padding: 7px 9px;
  background: var(--dikichi-pink-soft);
  color: var(--dikichi-pink-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
  line-height: 1.35;
  border-right: 1px solid #CFE7EF;
  border-bottom: 1px solid #E4EEF3;
}

.mx-table td.mx-item,
.mx-table th.mx-item {
  text-align: left;
  white-space: nowrap;
  padding: 7px 10px;
  color: var(--text);
  font-weight: 600;
  background: var(--surface);
  border-right: 1px solid #E3EAF0;
  border-bottom: 1px solid #EDF2F6;
  min-width: 176px;
}

.mx-table.mx-with-cat td.mx-item {
  position: sticky;
  left: 168px;
  z-index: 3;
}

.mx-table td.mx-item.mx-first {
  position: sticky;
  left: 0;
  z-index: 4;
  min-width: 190px;
  font-weight: 700;
}

/* ---------- body: sel nilai ---------- */

.mx-table td.mx-cell {
  text-align: center;
  font-weight: 700;
  padding: 7px 7px;
  min-width: 54px;
  color: var(--text-secondary);
  background: var(--surface);
  border-left: 1px solid #F1F5F8;
  border-bottom: 1px solid #EDF2F6;
}

.mx-table tbody tr:nth-child(even) td.mx-cell {
  background: #FBFDFE;
}

.mx-table td.mx-empty {
  color: #D8C8DA;
  font-weight: 500;
  background: #FCFDFE;
}

/* ---------- conditional color (Quality Standard) ---------- */

.mx-table td.mx-ex {
  background: #E0F3EB;
  color: #00805E;
}

.mx-table td.mx-good {
  background: #E7F7F6;
  color: #0B7A85;
}

.mx-table td.mx-bd {
  background: #FFF3DE;
  color: #A25D00;
}

.mx-table td.mx-ni {
  background: #FDECE5;
  color: #CF3F10;
}

.mx-table td.mx-fl {
  background: #FCE8EE;
  color: #C31F49;
}

/* baris ganjil: warna tetap dominan, hanya sedikit digelapkan */
.mx-table tbody tr:nth-child(even) td.mx-ex   { background: #E0F3EB; }
.mx-table tbody tr:nth-child(even) td.mx-good { background: #DFF4F2; }
.mx-table tbody tr:nth-child(even) td.mx-bd   { background: #FDEDD3; }
.mx-table tbody tr:nth-child(even) td.mx-ni   { background: #FBE5DC; }
.mx-table tbody tr:nth-child(even) td.mx-fl   { background: #FADFE7; }

.mx-table tbody tr:hover td.mx-cell {
  outline: 1px solid #BEE0EA;
  outline-offset: -1px;
}

/* =========================================================
   LEGIBILITY PATCH (dark surfaces) — WCAG AA on the
   Dikichi gradient primary card / topbar.
   ========================================================= */
.kpi-card.primary-card .kpi-click-hint {
  color: rgba(255, 255, 255, 0.92);
  opacity: 1;
}

.kpi-card.primary-card .kpi-label {
  color: rgba(255, 255, 255, 0.90);
}

.primary-card .kpi-description,
.primary-card .score-out-of {
  color: rgba(255, 255, 255, 0.92);
}
.last-updated {
  color: rgba(255, 255, 255, 0.80);
}

/* White-surface KPI card hint: opacity .9 blended it below 4.5:1 */
.kpi-card .kpi-click-hint {
  color: #6D5975;
  opacity: 1;
}