/* ==========================================================================
   components.css — cards, tables, forms, badges, buttons, calendar
   Class names mirror the Figma layer names (card, btn, calGrid, slot-pill…)
   ========================================================================== */

/* --- Icons --------------------------------------------------------------- */
/* Lets markup stay `<svg class="ic18"><use href="#i-x"/></svg>` */
.ic18,.ic16{fill:none;stroke:currentColor;stroke-width:1.5;
            stroke-linecap:round;stroke-linejoin:round}
.ic18{width:18px;height:18px}
.ic16{width:16px;height:16px}

/* --- Card ---------------------------------------------------------------- */
.card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);
}
.card-title{font-size:var(--text-title);font-weight:700}
.card-body{padding:var(--space-5)}
.card-foot{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);
           display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}

/* --- Stat tile ----------------------------------------------------------- */
.stat{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-xs);
}
.stat-label{font-size:var(--text-caption);color:var(--color-text-muted);font-weight:700}
.stat-value{font-size:var(--text-h1);font-weight:700;line-height:1.2;margin-top:var(--space-2);
            font-variant-numeric:tabular-nums}
.stat-unit{font-size:var(--text-body-m);font-weight:400;color:var(--color-text-muted)}
.stat-delta{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-caption);
            font-weight:700;margin-top:var(--space-2)}
.stat-delta.up{color:var(--color-success)}
.stat-delta.down{color:var(--color-danger)}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:40px;padding:0 var(--space-5);border-radius:var(--radius-md);
  font-size:var(--text-body-m);font-weight:700;white-space:nowrap;
  transition:filter .12s ease,background .12s ease,border-color .12s ease;
}
.btn-primary{background:var(--brand-gradient);color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary{background:#fff;border:1.5px solid var(--color-border-strong);color:var(--gray-700)}
.btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-400)}
.btn-ghost{color:var(--gray-600)}
.btn-ghost:hover{background:var(--gray-100)}
.btn-danger{background:var(--color-danger);color:#fff}
.btn-danger:hover{filter:brightness(1.06)}
.btn-sm{height:32px;padding:0 var(--space-3);font-size:var(--text-cell)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

/* --- Chips / filter bar --------------------------------------------------- */
.filterbar{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);
}
.search{
  display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:220px;max-width:340px;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-md);
  padding:8px var(--space-4);background:#fff;
}
.search input{border:none;outline:none;width:100%;background:none}
.search input::placeholder{color:var(--color-placeholder)}
.select{
  border:1px solid var(--color-border-strong);border-radius:var(--radius-md);
  padding:8px var(--space-3);background:#fff;min-width:140px;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px var(--space-4);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);
  background:#fff;font-size:var(--text-cell);white-space:nowrap;
}
.chip:hover{background:var(--gray-50)}
.chip.is-active{background:var(--brand-gradient);border-color:transparent;color:#fff;font-weight:700}

/* --- Table --------------------------------------------------------------- */
.table-wrap{overflow-x:auto}
.table{width:100%;font-size:var(--text-cell)}
.table th{
  text-align:left;font-weight:700;color:var(--color-text-muted);
  font-size:var(--text-caption);white-space:nowrap;
  padding:var(--space-3) var(--space-4);
  background:var(--gray-50);border-bottom:1px solid var(--color-border);
  position:sticky;top:0;
}
.table td{
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--gray-100);
  height:var(--row-h);vertical-align:middle;
}
.table tbody tr:hover{background:var(--gray-50)}
.table tbody tr:last-child td{border-bottom:none}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table .actions{text-align:right;white-space:nowrap}
.cell-main{font-weight:700;color:var(--color-text)}
.cell-sub{color:var(--color-text-muted);font-size:var(--text-caption)}

.cell-user{display:flex;align-items:center;gap:var(--space-3)}
.cell-user .avatar{width:32px;height:32px;font-size:12px}

/* --- Badges -------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px var(--space-2);border-radius:var(--radius-sm);
  font-size:var(--text-caption);font-weight:700;white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-upcoming{background:rgba(0,159,206,.1);color:var(--ci-blue)}
.badge-done{background:rgba(59,208,96,.12);color:var(--ci-green)}
.badge-cancel{background:rgba(236,2,97,.1);color:var(--ci-pink)}
.badge-pending{background:rgba(251,176,83,.16);color:#B26A00}
.badge-neutral{background:var(--gray-100);color:var(--gray-600)}
.badge-danger{background:var(--color-danger-bg);color:var(--color-danger)}

.badge-role{background:var(--gray-100);color:var(--gray-700);font-weight:700}
.badge-role::before{display:none}

/* --- Tier pill ----------------------------------------------------------- */
.tier{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
      border-radius:var(--radius-pill);font-size:var(--text-caption);font-weight:700;color:#fff}
.tier-gold{background:var(--tier-gold)}
.tier-silver{background:linear-gradient(226deg,#9AA4B2 0%,#D6DCE4 32%,#8C97A5 66%)}
.tier-platinum{background:linear-gradient(226deg,#4B5768 0%,#9BA9BF 32%,#3A4453 66%)}

/* --- Forms --------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-5)}
.label{font-size:var(--text-cell);font-weight:700}
.req{color:var(--ci-pink)}
.input,.textarea{
  border:1px solid var(--color-border-strong);border-radius:var(--radius-md);
  padding:10px var(--space-4);background:#fff;width:100%;
}
.input::placeholder,.textarea::placeholder{color:var(--color-placeholder)}
.input:focus,.textarea:focus{outline:none;box-shadow:var(--ring);border-color:var(--ci-blue)}
.textarea{min-height:96px;resize:vertical}
.help{font-size:var(--text-caption);color:var(--color-text-muted)}
.counter{font-size:var(--text-caption);color:var(--color-text-muted);text-align:right}

/* Dual-language input — content management only */
.i18n{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.i18n-row{display:grid;grid-template-columns:56px 1fr;align-items:stretch}
.i18n-row + .i18n-row{border-top:1px solid var(--color-border)}
.i18n-tag{
  display:grid;place-items:center;background:var(--gray-50);
  border-right:1px solid var(--color-border);
  font-size:var(--text-caption);font-weight:700;color:var(--gray-600);
}
.i18n-tag.req-th{color:var(--ci-pink)}
.i18n .input,.i18n .textarea{border:none;border-radius:0}
.i18n .input:focus,.i18n .textarea:focus{box-shadow:none;background:var(--gray-50)}

.fieldset{border:none;margin-bottom:var(--space-7)}
.fieldset legend{font-size:var(--text-title);font-weight:700;margin-bottom:var(--space-1)}
.fieldset .legend-sub{color:var(--color-text-muted);font-size:var(--text-caption);
                      margin-bottom:var(--space-5)}

.switch{width:40px;height:22px;border-radius:var(--radius-pill);background:var(--gray-300);
        position:relative;flex-shrink:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
               border-radius:50%;background:#fff;box-shadow:var(--shadow-xs)}
.switch.is-on{background:var(--ci-lime)}
.switch.is-on::after{left:20px}

/* --- Tabs ---------------------------------------------------------------- */
.tabs{display:flex;gap:var(--space-6);border-bottom:1px solid var(--color-border);
      padding:0 var(--space-5)}
.tab{padding:var(--space-4) 0;font-size:var(--text-body-m);color:var(--color-text-muted);
     position:relative;white-space:nowrap}
.tab:hover{color:var(--color-text);text-decoration:none}
.tab.is-active{color:var(--color-text);font-weight:700}
.tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
                      background:var(--brand-gradient);border-radius:2px}

/* --- Definition rows ----------------------------------------------------- */
.dl{display:grid;grid-template-columns:140px 1fr;gap:var(--space-3) var(--space-4)}
.dl dt{color:var(--color-text-muted);font-size:var(--text-cell)}
.dl dd{font-weight:700;font-size:var(--text-cell)}

/* --- Ledger rows (points history) ---------------------------------------- */
.hrow{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;
      border-bottom:1px solid var(--gray-100)}
.hrow:last-child{border-bottom:none}
.hrow .ic{width:36px;height:36px;border-radius:var(--radius-pill);display:grid;
          place-items:center;flex-shrink:0;font-size:15px}
.ic-earn{background:rgba(59,208,96,.15)}
.ic-burn{background:rgba(236,2,97,.15)}
.hrow .m{flex:1;min-width:0}
.hrow .delta{font-weight:700;font-size:var(--text-title);font-variant-numeric:tabular-nums}
.delta-plus{color:var(--ci-lime)}
.delta-minus{color:var(--ci-pink)}

/* --- Pagination ---------------------------------------------------------- */
.pager{display:flex;align-items:center;gap:var(--space-2)}
.pager-btn{min-width:32px;height:32px;padding:0 var(--space-2);border-radius:var(--radius-sm);
           display:grid;place-items:center;font-size:var(--text-cell);color:var(--gray-600)}
.pager-btn:hover{background:var(--gray-100)}
.pager-btn.is-active{background:var(--gray-900);color:#fff;font-weight:700}

/* --- Progress ------------------------------------------------------------ */
.pbar{height:8px;border-radius:999px;background:var(--gray-200);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:999px;background:var(--brand-gradient)}
.pbar.on-dark{background:rgba(255,255,255,.3)}
.pbar.on-dark i{background:#fff}
.quota-bar{height:6px;border-radius:999px;background:var(--gray-200);overflow:hidden;width:88px}
.quota-bar i{display:block;height:100%;background:var(--ci-blue)}
.quota-bar.near i{background:var(--ci-yellow)}
.quota-bar.full i{background:var(--color-danger)}

/* --- Empty state --------------------------------------------------------- */
.empty{padding:var(--space-9) var(--space-5);text-align:center;color:var(--color-text-muted)}
.empty-mark{width:56px;height:56px;border-radius:var(--radius-lg);background:var(--gray-100);
            display:grid;place-items:center;margin:0 auto var(--space-4);font-size:22px}

/* --- Calendar (จัดการตารางเวลา) ------------------------------------------ */
.cal-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
            padding:var(--space-4) var(--space-5);flex-wrap:wrap}
.legend{display:flex;gap:var(--space-4);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-caption);
             color:var(--color-text-muted)}
.legend .ld{width:10px;height:10px;border-radius:3px}
.ld-available{background:var(--slot-available)}
.ld-partial{background:var(--slot-partial)}
.ld-full{background:var(--slot-full)}
.ld-closed{background:var(--slot-closed)}

.calGrid{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--color-border)}
.cal-day-header{padding:var(--space-2);text-align:center;font-size:var(--text-caption);
                font-weight:700;color:var(--color-text-muted);background:var(--gray-50);
                border-bottom:1px solid var(--color-border)}
.cal-day{min-height:92px;padding:var(--space-2);border-right:1px solid var(--gray-100);
         border-bottom:1px solid var(--gray-100);display:flex;flex-direction:column;gap:4px}
.cal-day:nth-child(7n){border-right:none}
.cal-day.is-out{background:var(--gray-50)}
.day-num{font-size:var(--text-cell);font-weight:700;color:var(--gray-600)}
.cal-day.is-closed .day-num{color:var(--gray-400)}
.slot-pill{font-size:10px;font-weight:700;padding:2px 6px;border-radius:var(--radius-sm);
           white-space:nowrap}
.slot-available{background:rgba(59,208,96,.15);color:var(--ci-green)}
.slot-partial{background:rgba(251,176,83,.2);color:#B26A00}
.slot-full{background:rgba(0,159,206,.12);color:var(--ci-blue)}
.slot-closed{background:var(--gray-100);color:var(--gray-500)}

/* --- Accessible control wrappers ------------------------------------------
   Real <input>/<button> underneath; the visual chrome is on the wrapper.
   Checked/focus state driven by :has() so no JS is required.             */
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.opt:has(input:focus-visible){box-shadow:var(--ring)}

/* facility / multi-select tile */
.fac{display:flex;align-items:center;gap:var(--space-2);padding:10px var(--space-3);
     border:1px solid var(--color-border);border-radius:var(--radius-md);
     font-size:var(--text-cell)}
.fac .box{width:16px;height:16px;border:1.5px solid var(--gray-300);border-radius:4px;
          flex-shrink:0;display:grid;place-items:center;color:#fff;font-size:11px}
.fac:has(input:checked){border-color:var(--ci-blue);background:rgba(0,159,206,.06);font-weight:700}
.fac:has(input:checked) .box{background:var(--ci-blue);border-color:var(--ci-blue)}

/* radio card */
.optcard{display:flex;gap:var(--space-3);padding:var(--space-4);
         border:1px solid var(--color-border);border-radius:var(--radius-md)}
.optcard:has(input:checked){border-color:var(--ci-blue);background:rgba(0,159,206,.05)}
.optcard .dotmark{width:18px;height:18px;border:1.5px solid var(--gray-300);border-radius:50%;
                  flex-shrink:0;margin-top:2px}
.optcard:has(input:checked) .dotmark{border-color:var(--ci-blue);border-width:5px}

/* toggle switch — wraps a real checkbox */
.switchwrap{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer}
.switchwrap .switch{transition:background .12s ease}
.switchwrap:has(input:checked) .switch{background:var(--ci-lime)}
.switchwrap:has(input:checked) .switch::after{left:20px}
/* the input is visually hidden, so focus must be shown on the visible switch */
.switchwrap:has(input:focus-visible) .switch{box-shadow:var(--ring)}

/* sortable column header */
.th-sort{display:inline-flex;align-items:center;gap:5px;font:inherit;color:inherit}
.th-sort::after{content:"↕";opacity:.4;font-size:11px}
.th-sort[aria-sort="ascending"]::after{content:"↑";opacity:1}
.th-sort[aria-sort="descending"]::after{content:"↓";opacity:1}

/* --- Prototype-only notice ----------------------------------------------- */
.proto-note{
  display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);
  background:rgba(251,176,83,.12);border:1px solid rgba(251,176,83,.4);
  border-radius:var(--radius-md);font-size:var(--text-caption);color:#7A4A00;
  margin-bottom:var(--space-5);
}