/* v9.0.2 */
/* ============================================================================
checkin-checkout-v8.4.6.css
MoldCutterSearch - Check-in / Check-out UI (CSS sạch)
Tương thích hoàn toàn với: checkin-checkout-v8.4.6.js

Mục tiêu:
- Desktop: 2 cột (Lịch sử bên trái, Thao tác bên phải).
- Mobile: Thao tác ở trên, Lịch sử ở dưới.
- Picker (chọn Nhân viên / Điểm đến): popup ở GIỮA màn hình, có lưới quick 3x4.
- Badge IN/OUT có màu giống phong cách “Gần nhất”.
- Toast luôn nổi trên cùng (z-index cao hơn popup).
============================================================================ */

:root{
  --cio-font: Inter, "Be Vietnam Pro", "Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --cio-z-backdrop: 500000;
  --cio-z-panel: 500001;
  --cio-z-picker: 500002;
  --cio-z-toast: 500050;

  --cio-text: #0b1220;
  --cio-text-2: #1f2937;
  --cio-muted: #64748b;
  --cio-border: rgba(15,23,42,0.14);

  --cio-surface: #ffffff;
  --cio-surface-2: #f8fafc;

  --cio-success: #16a34a;
  --cio-danger: #ef4444;
  --cio-warning: #f59e0b;
  --cio-info: #0ea5e9;

  --cio-mold: #0891b2;
  --cio-mold-2: #0e7490;

  --cio-cutter: #ea580c;
  --cio-cutter-2: #9a3412;

  --cio-shadow: 0 18px 48px rgba(15,23,42,0.32);
  --cio-shadow-sm: 0 2px 10px rgba(15,23,42,0.12);

  --cio-r: 14px;
  --cio-gap: 10px;
}

/* Modal lock */
body.cio-modal-open{
  overflow: hidden;
  touch-action: none;
}

.hidden{ display:none !important; }

/* Backdrop */
.cio-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px) saturate(0.96);
  z-index: var(--cio-z-backdrop);
}

/* Panel */
.cio-panel{
  position: fixed;
  inset: 0;
  z-index: var(--cio-z-panel);
  background: var(--cio-surface);
  color: var(--cio-text);
  font-family: var(--cio-font);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 901px){
  .cio-panel{
    inset: 6vh 2vw;
    max-width: 1400px;
    max-height: 920px;
    margin: auto;
    border-radius: var(--cio-r);
    box-shadow: var(--cio-shadow);
    border: 1px solid var(--cio-border);
  }
}

/* Topbar */
.cio-topbar{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg,#0f766e,#14b8a6);
  color: #fff;
}

.cio-top-title{
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.cio-top-title .ja{
  font-size: 16px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cio-top-title .vi{
  font-size: 11px;
  font-weight: 900;
  opacity: 0.95;
}

.cio-top-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cio-top-btn{
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.16);
  color: #fff;
  border-radius: 999px;
  padding: 7px 11px;
  cursor: pointer;
  font-weight: 950;
  font-size: 11px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background 0.15s ease, transform 0.15s ease;
  user-select: none;
}

.cio-top-btn:hover{
  background: rgba(255,255,255,0.24);
  transform: translateY(-1px);
}

.cio-top-btn:active{ transform: translateY(0px); }

/* Body */
.cio-body{
  flex: 1 1 auto;
  min-height: 0;
  background: var(--cio-surface-2);
  overflow: auto;
}

/* Desktop grid */
.cio-desktop{
  height: 100%;
  min-height: 0;
  display: grid;
  gap: 12px;
  padding: 10px 12px 12px;
}

@media (min-width: 901px){
  .cio-desktop{
    grid-template-columns: minmax(520px, 1.2fr) minmax(360px, 0.9fr);
    grid-template-areas: "history controls";
    align-items: stretch;
  }
  .cio-col-history{ grid-area: history; }
  .cio-col-controls{ grid-area: controls; }
}

.cio-col{
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Card */
.cio-card{
  background: var(--cio-surface);
  border-radius: var(--cio-r);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: var(--cio-shadow-sm);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cio-card-head{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(15,23,42,0.03), transparent);
}

.cio-card-title{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.cio-card-title .ja{
  font-size: 13px;
  font-weight: 950;
}

.cio-card-title .vi{
  font-size: 10px;
  font-weight: 900;
  opacity: 0.78;
  color: var(--cio-muted);
}

.cio-card-body{
  padding: 10px 12px 12px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Status pill */
.cio-status-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  font-weight: 950;
  font-size: 11.5px;
  background: rgba(255,255,255,0.06);
  color: #f9fafb;
  user-select: none;
}

.cio-status-pill.in{
  background: rgba(22,163,74,0.14);
  border-color: rgba(22,163,74,0.40);
  color: #14532d;
}

.cio-status-pill.out{
  background: rgba(239,68,68,0.14);
  border-color: rgba(239,68,68,0.42);
  color: #7f1d1d;
}

.cio-status-pill.unknown{
  background: rgba(148,163,184,0.18);
  border-color: rgba(148,163,184,0.40);
  color: #111827;
}

/* Hero */
.cio-hero{
  padding: 12px;
  border-radius: var(--cio-r);
  border: 1px solid rgba(15,23,42,0.10);
  background: linear-gradient(135deg, var(--cio-mold), var(--cio-mold-2));
  color: #fff;
  box-shadow: 0 14px 30px rgba(15,23,42,0.32);
}

.cio-hero.cio-hero-mold{
  background: linear-gradient(135deg, var(--cio-mold), var(--cio-mold-2));
}

.cio-hero.cio-hero-cutter{
  background: linear-gradient(135deg, var(--cio-cutter), var(--cio-cutter-2));
}

.cio-hero-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 16px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cio-hero-name{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 900;
  opacity: 0.96;
}

/* Fields */
.cio-fields{
  margin-top: 2px;
  display: grid;
  gap: 10px;
}

.cio-field{ display: grid; gap: 6px; }

.cio-label{
  font-weight: 950;
  color: var(--cio-text);
  font-size: 12px;
}

.cio-control{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.12);
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 900;
  background: var(--cio-surface);
  color: var(--cio-text);
}

.cio-control:focus{
  outline: none;
  border-color: rgba(15,118,110,0.70);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.20);
}

/* Picker buttons (Emp/Dest) */
.cio-picker-btn{
  width: 100%;
  border-radius: 12px;
  border: 1px dashed rgba(15,23,42,0.28);
  background: rgba(255,255,255,0.98);
  padding: 10px 10px;
  cursor: pointer;
  display: grid;
  gap: 2px;
  text-align: left;
  user-select: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.cio-picker-btn:hover{
  transform: translateY(-1px);
  background: rgba(15,118,110,0.06);
  border-color: rgba(15,118,110,0.40);
}

.cio-picker-btn:active{ transform: translateY(0px); }

.cio-picker-btn-text{
  font-size: 13px;
  font-weight: 850;
  color: var(--cio-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cio-picker-btn-sub{
  font-size: 11px;
  font-weight: 850;
  color: var(--cio-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cio-default-row{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--cio-text-2);
  user-select: none;
}

.cio-default-row input{
  width: 18px;
  height: 18px;
}

/* Confirm dialog (delete) */
#cio-confirm{
  padding: 18px 12px;
}

#cio-confirm .cio-dest-sheet-card{
  max-width: 460px;
}

#cio-confirm .cio-dest-sheet-body{
  text-align: center;
}

#cio-confirm .cio-picker-help{
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.10);
}

#cio-confirm .cio-picker-help-line{
  display: grid;
  justify-items: center;
  gap: 4px;
}

#cio-confirm .cio-picker-help-line .ja{
  font-weight: 750;
  color: #0b1220;
}

#cio-confirm .cio-picker-help-line .vi{
  font-weight: 650;
  color: #334155;
  opacity: 0.95;
}

.cio-confirm-actions{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cio-confirm-btn{
  border-radius: 14px;
  padding: 10px 10px;
  border: 1px solid rgba(15,23,42,0.12);
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.cio-confirm-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15,23,42,0.14);
}

.cio-confirm-cancel{
  background: rgba(148,163,184,0.14);
  border-color: rgba(148,163,184,0.30);
  color: #0b1220;
}

.cio-confirm-danger{
  background: rgba(239,68,68,0.92);
  border-color: rgba(239,68,68,0.20);
  color: #fff;
}

.cio-confirm-btn .ja{ font-size: 12px; font-weight: 950; line-height: 1.05; }
.cio-confirm-btn .vi{ font-size: 10px; font-weight: 850; line-height: 1.05; opacity: 0.95; }

/* IN/OUT buttons */
.cio-stamp{
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.cio-stamp-btn{
  border-radius: 18px;
  padding: 12px 10px;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-weight: 950;
  min-height: 52px;
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  user-select: none;
}

.cio-stamp-btn.in{
  background: linear-gradient(135deg, var(--cio-success), #22c55e);
  box-shadow: 0 10px 24px rgba(22,163,74,0.50);
}

.cio-stamp-btn.out{
  background: linear-gradient(135deg, var(--cio-danger), #f97316);
  box-shadow: 0 10px 24px rgba(239,68,68,0.50);
}

.cio-stamp-btn.relocate{
  background: linear-gradient(135deg, var(--cio-info), #38bdf8);
  box-shadow: 0 10px 24px rgba(14,165,233,0.50);
}

.cio-stamp-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.cio-stamp-btn:active{
  transform: translateY(0px);
  box-shadow: 0 8px 20px rgba(15,23,42,0.30);
}

.cio-stamp-btn .ja{ font-size: 14px; }
.cio-stamp-btn .vi{ font-size: 11px; }

.cio-stamp-btn.pulse{
  box-shadow: 0 0 0 0 rgba(56,189,248,0.6);
  animation: cio-pulse 1.6s ease-out infinite;
}

@keyframes cio-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(56,189,248,0.6); }
  70%{ box-shadow: 0 0 0 18px rgba(56,189,248,0); }
  100%{ box-shadow: 0 0 0 0 rgba(56,189,248,0); }
}

/* History */
.cio-history-card{ flex: 1 1 auto; min-height: 0; }

.cio-history-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Chỉ khi unlock mới ép bảng rộng hơn để có cuộn ngang */
#cio-panel.cio-history-unlocked .cio-history-table{
  min-width: 980px;
}

/* Ẩn/hiện cột extra theo unlock */
.cio-col-extra{ display: none; }
#cio-panel.cio-history-unlocked .cio-col-extra{ display: table-cell; }

.cio-search{
  width: 220px;
  max-width: 320px;
  padding: 8px 9px;
  border-radius: 12px;
  border: 2px solid rgba(245,158,11,0.70);
  background: #fff7db;
  font-size: 12px;
  font-weight: 900;
  color: var(--cio-text);
  height: 36px;
  box-sizing: border-box;
}

.cio-search:focus{
  outline: none;
  border-color: var(--cio-warning);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.25);
  background: #fff;
}

.cio-card-right{
  display: flex;
  align-items: center;
  gap: 8px;
}

#cio-history-unlock{
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  min-width: 88px;
  border-radius: 12px;
}

#cio-history-unlock .ja{
  font-size: 11px;
  font-weight: 950;
  line-height: 1.05;
}

#cio-history-unlock .vi{
  font-size: 10px;
  font-weight: 850;
  line-height: 1.05;
  opacity: 0.9;
}

.cio-history-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--cio-surface);
}

.cio-history-table th,
.cio-history-table td{
  padding: 7px 8px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  vertical-align: middle;
  white-space: nowrap;
  text-align: left;
}

.cio-history-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0f766e;
  color: #fff;
  font-weight: 950;
  font-size: 11px;
}

.cio-history-table thead th{
  vertical-align: middle;
}

.cio-history-table thead th .ja{
  font-size: 11px;
  font-weight: 950;
  line-height: 1.05;
}

.cio-history-table thead th .vi{
  font-size: 10px;
  font-weight: 850;
  opacity: 0.92;
  line-height: 1.05;
}

.cio-history-table tbody tr:nth-child(odd){ background: rgba(15,23,42,0.02); }
.cio-history-table tbody tr:hover{ background: rgba(15,118,110,0.08); }

.cio-col-extra{ display: none; }

#cio-panel.cio-history-unlocked .cio-col-extra{
  display: table-cell;
}

.cio-sync-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(148,163,184,0.14);
  color: #111827;
}

.cio-sync-pill.ok{ background: rgba(22,163,74,0.12); color: #166534; }
.cio-sync-pill.pending{ background: rgba(245,158,11,0.14); color: #92400e; }
.cio-sync-pill.error{ background: rgba(239,68,68,0.12); color: #b91c1c; }

.cio-td-note{
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}


.cio-empty{
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--cio-muted);
}

.cio-td-time{
  white-space: normal; /* override nowrap của bảng */
  padding-top: 6px;
  padding-bottom: 6px;
}

.cio-time-2l{
  display: grid;
  gap: 1px;
  line-height: 1.05;
}

.cio-time-2l .d{
  font-size: 10px;
  font-weight: 850;
  opacity: 0.9;
}

.cio-time-2l .t{
  font-size: 11px;
  font-weight: 900;
}

.cio-del-btn{
  border: 1px solid rgba(239,68,68,0.28);
  background: rgba(239,68,68,0.10);
  color: #7f1d1d;
  border-radius: 10px;
  padding: 4px 6px;

  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;

  min-width: 52px;
  line-height: 1.05;
  transform: translateZ(0);
}

.cio-del-btn .ja{
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
}

.cio-del-btn .vi{
  font-size: 9px;
  font-weight: 850;
  line-height: 1.05;
  opacity: 0.9;
}


.cio-del-btn:hover{
  background: rgba(239,68,68,0.16);
  transform: translateY(-1px);
}

/* IN/OUT badge (reuse look from “recent”) */
.cio-recent-st{
  font-weight: 950;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  border: 1px solid rgba(15,23,42,0.10);
}

.cio-recent-st.in{
  background: rgba(22,163,74,0.12);
  color: #166534;
}

.cio-recent-st.out{
  background: rgba(239,68,68,0.12);
  color: #b91c1c;
}

/* Picker overlay (centered modal) */
.cio-dest-sheet{
  position: fixed;
  inset: 0;
  z-index: var(--cio-z-picker);
  background: rgba(15,23,42,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
}

.cio-dest-sheet-card{
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: var(--cio-surface);
  border-radius: 18px;
  box-shadow: 0 18px 52px rgba(15,23,42,0.45);
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 720px);
  border: 1px solid rgba(15,23,42,0.12);
  overflow: hidden;
}

.cio-dest-sheet-head{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cio-dest-sheet-title{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.cio-dest-sheet-title .ja{
  font-size: 14px;
  font-weight: 750;
}

.cio-dest-sheet-title .vi{
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
  color: var(--cio-muted);
}

.cio-mini-btn{
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.14);
  padding: 7px 10px;
  background: rgba(255,255,255,0.96);
  font-weight: 950;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background 0.15s ease, transform 0.15s ease;
  user-select: none;
}

.cio-mini-btn:hover{
  background: rgba(15,118,110,0.08);
  transform: translateY(-1px);
}

.cio-mini-btn:active{ transform: translateY(0px); }

.cio-dest-sheet-body{
  padding: 10px 12px 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* help line */
.cio-picker-help{
  border: 1px solid rgba(245,158,11,0.40);
  background: rgba(245,158,11,0.12);
  border-radius: 14px;
  padding: 10px 10px;
  color: var(--cio-text);
  font-weight: 900;
}

.cio-picker-help-line{ font-size: 12px; line-height: 1.35; }

.cio-attn{
  font-weight: 750;
  color: #92400e;
}

/* quick grid 3x4 */
.cio-dest-quick{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 420px){
  .cio-dest-quick{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cio-quick-dest{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.12);
  padding: 10px 10px;
  background: rgba(248,250,252,0.98);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.cio-quick-dest{
  position: relative;
}

.cio-quick-tooltip{
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 3;

  max-width: 240px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(2,6,23,0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);

  pointer-events: none;
  white-space: normal;
}

.cio-quick-dest:hover .cio-quick-tooltip,
.cio-quick-dest.show-tooltip .cio-quick-tooltip{
  display: block;
}

.cio-quick-dest:hover{
  background: #e0f2fe;
  border-color: rgba(59,130,246,0.55);
  transform: translateY(-1px);
}

.cio-quick-dest:active{ transform: translateY(0px); }

.cio-quick-dest.active{
  border-color: rgba(59,130,246,0.85);
  background: rgba(59,130,246,0.12);
}

.cio-quick-no{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(15,23,42,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 750;
  color: rgba(15,23,42,0.70);
}

.cio-quick-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  line-height: 1.2;
}

#cio-dest-btn .cio-picker-btn-text{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
}

.cio-dest-all{
  margin-top: 2px;
  display: grid;
  gap: 6px;
}

/* Toast (always above everything) */
.cio-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 10px);
  z-index: var(--cio-z-toast);
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
  max-width: 92vw;
  line-height: 1.35;
  opacity: 1;
  border: 1px solid rgba(0,0,0,0.10);
  background: #ffffff;
  color: #111827;
  pointer-events: none;
}

.cio-toast-vi{ font-weight: 950; }
.cio-toast-ja{ opacity: 0.88; font-size: 11px; font-weight: 850; }

/* Mobile */
@media (max-width: 900px){
  .cio-panel{
    inset: 0;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
  }

  .cio-desktop{
    display: block;
    padding: 10px 10px 12px;
  }

  .cio-col{ margin-top: 10px; }

  .cio-history-table{ font-size: 11px; }

  .cio-search{ width: 180px; }
}


.cio-stamp-btn.audit{background:var(--cio-info,#0ea5e9);border-color:rgba(14,165,233,.5)}
.cio-stamp-btn.audit:active{background:#0284c7;transform:translateY(2px)}
.cio-recent-st.audit{background:#f0fdf4;color:#166534;border-color:#bbf7d0}