/* =========================================================
   KINTOUN COFFEE
   PRODUCT QUALITY INTELLIGENCE
   EXECUTIVE DASHBOARD
   BRAND DESIGN SYSTEM
   ========================================================= */


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

:root {

  /* -------------------------------------------------------
     KINTOUN BRAND
     Derived from the supplied Kintoun Coffee logo
     ------------------------------------------------------- */

  --kintoun-navy:
    #062D4B;

  --kintoun-navy-deep:
    #041F35;

  --kintoun-navy-dark:
    #031A2C;

  --kintoun-navy-soft:
    #EAF2F7;

  --kintoun-cream:
    #F5F1DF;

  --kintoun-cream-soft:
    #FAF8EE;

  --kintoun-cream-dark:
    #E9E4CE;


  /* -------------------------------------------------------
     APPLICATION BACKGROUND
     ------------------------------------------------------- */

  --bg:
    #F4F6F8;

  --bg-warm:
    #F7F7F4;

  --surface:
    #FFFFFF;

  --surface-soft:
    #FAFBFC;

  --surface-warm:
    #FCFBF7;


  /* -------------------------------------------------------
     BORDERS
     ------------------------------------------------------- */

  --border:
    #E2E7EB;

  --border-light:
    #EBEEF1;

  --border-strong:
    #CDD5DB;


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

  --text:
    #101820;

  --text-secondary:
    #56616B;

  --text-muted:
    #89939C;

  --text-light:
    #AAB2B9;


  /* -------------------------------------------------------
     SEMANTIC / GRADE COLORS
     ------------------------------------------------------- */

  /* EXCELLENT */
  --grade-high:
    #009B72;

  --grade-high-soft:
    #E7F6F0;

  --grade-high-border:
    #B7E5D4;


  /* GOOD */
  --grade-middle:
    #129C9A;

  --grade-middle-soft:
    #E7F7F6;

  --grade-middle-border:
    #B9E5E3;


  /* BORDERLINE */
  --grade-borderline:
    #E58A00;

  --grade-borderline-soft:
    #FFF3DE;

  --grade-borderline-border:
    #F4D39E;


  /* NEED IMPROVEMENT */
  --grade-middle-fail:
    #E84B16;

  --grade-middle-fail-soft:
    #FDECE5;

  --grade-middle-fail-border:
    #F5C2B0;


  /* FAIL */
  --grade-strong-fail:
    #D92755;

  --grade-strong-fail-soft:
    #FCE8EE;

  --grade-strong-fail-border:
    #F3B7C7;


  /* -------------------------------------------------------
     LEGACY SEMANTIC ALIASES
     Keeps existing JS / HTML compatible
     ------------------------------------------------------- */

  --primary:
    var(--kintoun-navy);

  --primary-soft:
    var(--kintoun-navy-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(--kintoun-navy);

  --info-soft:
    var(--kintoun-navy-soft);


  /* -------------------------------------------------------
     SHADOWS
     ------------------------------------------------------- */

  --shadow-xs:
    0 1px 2px rgba(4, 31, 53, 0.035);

  --shadow-sm:
    0 2px 8px rgba(4, 31, 53, 0.055);

  --shadow-md:
    0 8px 26px rgba(4, 31, 53, 0.085);

  --shadow-lg:
    0 18px 48px rgba(4, 31, 53, 0.12);


  /* -------------------------------------------------------
     RADIUS
     ------------------------------------------------------- */

  --radius-xs:
    6px;

  --radius-sm:
    8px;

  --radius-md:
    12px;

  --radius-lg:
    16px;

  --radius-xl:
    20px;

}


/* =========================================================
   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(--kintoun-navy);

  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(6, 45, 75, 0.97);

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

  color:
    #FFFFFF;

  box-shadow:
    0 2px 16px
    rgba(4, 31, 53, 0.13);

  backdrop-filter:
    blur(14px);

}


.brand {

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  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(--kintoun-cream);

  color:
    var(--kintoun-navy);

  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="Kintoun Coffee">
  </div>

  this styling will automatically apply.
*/

.brand-mark img {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

}


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

.brand-name {

  color:
    var(--kintoun-cream);

  font-size:
    13px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.1em;

}


.brand-subtitle {

  margin-top:
    3px;

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

  font-size:
    11px;

}


.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.52);

  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(--kintoun-navy-dark);

  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(--kintoun-navy);

  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(--kintoun-navy-dark);

  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(--text-muted);

  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(--text-muted);

  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(--kintoun-navy);

}


.filter-group select:focus {

  border-color:
    var(--kintoun-navy);

  box-shadow:
    0 0 0 3px
    rgba(6, 45, 75, 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(--kintoun-navy-soft);

  color:
    var(--kintoun-navy);

  font-size:
    11px;

  font-weight:
    700;

  transition:
    140ms ease;

}


.filter-reset button:hover {

  background:
    var(--kintoun-navy);

  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(--text-muted);

  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);

}


.standard-middle {

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

  color:
    var(--grade-middle);

}


.standard-borderline {

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

  color:
    var(--grade-borderline);

}


.standard-fail {

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

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

}


.standard-strong-fail {

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

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

}


/* =========================================================
   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(6, 45, 75, 0.045);

  border-radius:
    50%;

  background:
    rgba(6, 45, 75, 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:
    #7C8791;

  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);

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

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

}

.standard.middle {

  color:
    var(--grade-middle);

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

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

}

.standard.borderline {

  color:
    var(--grade-borderline);

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

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

}

.standard.fail {

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

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

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

}

.standard.strong-fail {

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

  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(--kintoun-navy-dark) 0%,
      var(--kintoun-navy) 100%
    );

  border-color:
    var(--kintoun-navy);

  color:
    #FFFFFF;

  box-shadow:
    0 8px 28px
    rgba(6, 45, 75, 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);

  font-size:
    13px;

  font-weight:
    850;

  z-index:
    2;

}


.kpi-label {

  position:
    relative;

  z-index:
    1;

  color:
    var(--text-muted);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;

}


.primary-card .kpi-label {

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

}


.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(--text-muted);

  font-size:
    12px;

  font-weight:
    650;

  letter-spacing:
    0;

}


.primary-card .score-out-of {

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

}


.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(--kintoun-navy-soft);

  color:
    var(--kintoun-navy);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.05em;

}


.primary-card .kpi-grade {

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

  color:
    var(--kintoun-cream);

}


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

.kpi-description {

  position:
    relative;

  z-index:
    1;

  margin-top:
    10px;

  color:
    var(--text-muted);

  font-size:
    10px;

}


.primary-card .kpi-description {

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

}


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

.fail-rate-explanation {

  max-width:
    280px;

  margin-top:
    7px;

  color:
    var(--text-muted);

  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(--kintoun-navy-dark);

  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(--kintoun-navy);

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

  transform:
    translateY(-1px);

}


.comparison-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  color:
    var(--text-muted);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.1em;

}


.comparison-badge {

  padding:
    4px 7px;

  border-radius:
    5px;

  background:
    var(--kintoun-navy-soft);

  color:
    var(--kintoun-navy);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.04em;

}


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

.comparison-score {

  margin-top:
    12px;

  color:
    var(--kintoun-navy-dark);

  font-size:
    32px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -0.055em;

}


.comparison-score .likert-value {

  margin-left:
    5px;

  color:
    var(--text-muted);

  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);

}


.comparison-difference.negative {

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

}


.comparison-difference.neutral {

  color:
    var(--text-muted);

}


.comparison-meta {

  margin-top:
    6px;

  color:
    var(--text-muted);

  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(--text-muted);

  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(--kintoun-navy);

  box-shadow:
    0 0 0 2px var(--kintoun-navy-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(--text-muted);

  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(--kintoun-navy);

}


.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(--kintoun-navy);

  box-shadow:
    0 0 0 2px var(--kintoun-navy-soft);

}


.audit-record-count {

  font-size:
    11px;

  color:
    var(--text-muted);

  white-space:
    nowrap;

}


.doc-link {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    26px;

  height:
    26px;

  border-radius:
    5px;

  background:
    var(--kintoun-navy-soft);

  color:
    var(--kintoun-navy);

  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(--kintoun-navy);

}


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(--kintoun-navy-dark);

  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(--kintoun-navy);

  font-size:
    10px;

  font-weight:
    700;

  transition:
    140ms ease;

}


.panel-action:hover {

  background:
    var(--kintoun-navy);

  border-color:
    var(--kintoun-navy);

  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(--text-muted);

  font-size:
    10px;

  font-weight:
    750;

  transition:
    140ms ease;

}


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

  color:
    var(--kintoun-navy);

}


.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(--kintoun-navy);

  box-shadow:
    0 1px 4px
    rgba(4, 31, 53, 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(--text-muted);

  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(--kintoun-navy);

  color:
    var(--kintoun-cream);

  font-size:
    10px;

  font-weight:
    850;

}


.product-performance-title {

  display:
    flex;

  align-items:
    center;

  color:
    var(--kintoun-navy-dark);

  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(--kintoun-navy-dark);

  font-size:
    32px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -0.055em;

}


.product-performance-score small {

  color:
    var(--text-muted);

  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(--kintoun-navy-dark);

  font-size:
    16px;

  font-weight:
    800;

}


.attribute-card-meta {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-top:
    4px;

  color:
    var(--text-muted);

  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);

}


.grade-middle-pass {

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

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

  color:
    var(--grade-middle);

}


.grade-borderline-pass {

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

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

  color:
    var(--grade-borderline);

}


.grade-middle-fail {

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

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

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

}


.grade-strong-fail {

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

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

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

}


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

.kpi-grade.grade-high {

  color:
    var(--grade-high);

}

.kpi-grade.grade-middle {

  color:
    var(--grade-middle);

}

.kpi-grade.grade-borderline {

  color:
    var(--grade-borderline);

}

.kpi-grade.grade-middle-fail {

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

}

.kpi-grade.grade-strong-fail {

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

}


/* =========================================================
   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(--kintoun-cream-soft);

}


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

  border-bottom:
    0;

}


.table-primary {

  color:
    var(--kintoun-navy-dark) !important;

  font-weight:
    700;

}


.score-cell {

  color:
    var(--kintoun-navy-dark) !important;

  font-weight:
    800;

}


.score-high {

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

}


.score-warning {

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

}


.score-danger {

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

}


.table-loading,
.table-empty {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    110px;

  color:
    var(--text-muted);

  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(--text-light);

}


.audit-search-icon {

  color:
    var(--text-muted);

  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(--kintoun-navy-dark);

}


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

.modal-overlay {

  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    24px;

  background:
    rgba(3, 26, 44, 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(--kintoun-navy);

  color:
    #FFFFFF;

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

}


.modal-header h2 {

  margin:
    4px 0 0;

  color:
    var(--kintoun-cream);

  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(--kintoun-cream);

}


.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(--text-muted);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}


.detail-value {

  margin-top:
    5px;

  color:
    var(--kintoun-navy-dark);

  font-size:
    13px;

  font-weight:
    700;

  word-break:
    break-word;

}


.feedback-box {

  margin-top:
    18px;

  padding:
    14px;

  background:
    var(--kintoun-cream-soft);

  border:
    1px solid
    var(--kintoun-cream-dark);

  border-radius:
    10px;

}


.feedback-label {

  color:
    var(--text-muted);

  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;

}


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

.toast {

  position:
    fixed;

  right:
    24px;

  bottom:
    24px;

  z-index:
    2000;

  max-width:
    360px;

  padding:
    11px 15px;

  background:
    var(--kintoun-navy);

  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);

  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(--kintoun-navy-dark);

  font-size:
    13px;

  font-weight:
    750;

}


.no-data-description {

  max-width:
    420px;

  margin-top:
    5px;

  color:
    var(--text-muted);

  font-size:
    10px;

}


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

.muted {

  color:
    var(--text-muted);

}


.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(--kintoun-navy);

}


/* =========================================================
   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:
      10px;

  }


  .brand-subtitle {

    font-size:
      9px;

  }


  .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;

  }

}


/* =========================================================
   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(--text-muted);
    margin-bottom: 6px;
  }

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

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

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

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

  .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: #009B72;
    background: rgba(0, 155, 114, 0.08);
  }

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

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

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


  


/* ---------------------------------------------------------
   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);

  font-size:
    13px;

  font-weight:
    850;

  z-index:
    2;

}


.kpi-label {

  position:
    relative;

  z-index:
    1;

  color:
    var(--text-muted);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;

}


.primary-card .kpi-label {

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

}


.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(--text-muted);

  font-size:
    12px;

  font-weight:
    650;

  letter-spacing:
    0;

}


.primary-card .score-out-of {

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

}


.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(--kintoun-navy-soft);

  color:
    var(--kintoun-navy);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.05em;

}


.primary-card .kpi-grade {

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

  color:
    var(--kintoun-cream);

}


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

.kpi-description {

  position:
    relative;

  z-index:
    1;

  margin-top:
    10px;

  color:
    var(--text-muted);

  font-size:
    10px;

}


.primary-card .kpi-description {

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

}


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

.fail-rate-explanation {

  max-width:
    280px;

  margin-top:
    7px;

  color:
    var(--text-muted);

  font-size:
    10px;

  line-height:
    1.45;

}


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

  .outlet-click-hint {
    font-size: 11px;
    color: var(--text-muted);
    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(--text-muted);
  }

  .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: #129C9A; }
  .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(--text-muted);
    text-align: center;
  }

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

  .outlet-trend-cell {
    font-size: 12px;
    color: var(--text-muted);
    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(--text-muted);
  }

  .outlet-modal-audits {
    font-size: 12px;
    color: var(--text-muted);
    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(--text-muted);
    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(--text-muted);
    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(6,45,75,0.06);
  }

  .dh-arrow {
    font-size: 10px;
    color: var(--text-muted);
    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(6,45,75,0.06);
  }

  .dh-day input[type=checkbox] {
    accent-color: var(--kintoun-navy, #062D4B);
    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(6,45,75,0.06);
  }

  .dh-arrow {
    font-size: 10px;
    color: var(--text-muted);
    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(6,45,75,0.06);
  }

  .dh-day input[type=checkbox] {
    accent-color: var(--kintoun-navy, #062D4B);
    cursor: pointer;
  }




/* -- Ported from broken: attention + kpi styles -- */
.attention-low-label {
    font-size: 10px;
    color: var(--text-muted);
    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(--text-muted);
    text-align: center;
  }

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

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

.attention-pri--moderate {
    color: #E58A00;
    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(--kintoun-navy, #062D4B);
    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(--text-muted);
  }

.comparison-popup-boundary {
    font-size: 10px;
    color: var(--text-muted);
    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(--text-muted);
    line-height: 1.5;
  }

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

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

.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(--text-muted);
  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(--kintoun-navy);
}

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

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



/* NEW QUALITY STANDARD v2 grade badges */
.grade-badge.grade-excellent {
  background: var(--grade-high-soft);
  border-color: var(--grade-high-border);
  color: var(--grade-high);
}
.grade-badge.grade-good {
  background: #e6f7f2;
  border-color: #129C9A;
  color: #129C9A;
}
.grade-badge.grade-borderline {
  background: var(--grade-borderline-soft);
  border-color: var(--grade-borderline-border);
  color: var(--grade-borderline);
}
.grade-badge.grade-need-improvement {
  background: var(--grade-middle-fail-soft);
  border-color: var(--grade-middle-fail-border);
  color: var(--grade-middle-fail);
}
.grade-badge.grade-fail {
  background: var(--grade-strong-fail-soft);
  border-color: var(--grade-strong-fail-border);
  color: var(--grade-strong-fail);
}
/* Standard color chips */
.standard-excellent {
  background: var(--grade-high-soft);
  border-left-color: var(--grade-high);
  color: var(--grade-high);
}
.standard-good {
  background: #e6f7f2;
  border-left-color: #129C9A;
  color: #129C9A;
}
.standard-need-improvement {
  background: var(--grade-middle-fail-soft);
  border-left-color: var(--grade-middle-fail);
  color: var(--grade-middle-fail);
}
/* score color classes */
.score-excellent { color: var(--grade-high); }
.score-borderline { color: var(--grade-borderline); }


/* 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(--text-muted);
  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, #1A2B3C);
  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-navy, #0B2545);
  color: var(--color-navy, #0B2545);
}
.audit-page-btn.audit-page-active {
  background: var(--color-navy, #0B2545);
  border-color: var(--color-navy, #0B2545);
  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;
}