/* /css/icc.components.css — ICC Components (single shared system)
   LOCKED: Buttons/Inputs/Tabs/Lists/Empty/Chips/Menus consistent everywhere
   ✅ Tier-5.5: Split ROW semantics:
     - `.row` is now a NEUTRAL flex helper (no forced height/padding/borders).
     - List rows are styled ONLY inside `.list` via `.list .row` (legacy-safe),
       plus optional `.listRow` alias for future.
*/
/* ------------------------------------------------
   ICC Control Height Standard
   Tier-1 Task 2
------------------------------------------------ */

:root{
  --icc-h:36px;
}

/* Typography */
.icc-label{
  font-size:var(--icc-fs-label);
  color:var(--icc-text-mute);
  letter-spacing:.2px;
}

.icc-title{
  font-size:var(--icc-fs-title);
  font-weight:650;
  color:var(--icc-text);
}

/* -----------------------------
   Neutral row (layout helper)
   ----------------------------- */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

/* Buttons */
.btn{
  -webkit-appearance:none;
  appearance:none;

  height:var(--icc-h);
  padding:0 14px;
  border-radius:var(--icc-r-14);
  border:1px solid var(--icc-border);
  background:transparent;
  color:var(--icc-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  transition:
    background var(--icc-dur) var(--icc-ease),
    border-color var(--icc-dur) var(--icc-ease),
    transform var(--icc-dur) var(--icc-ease),
    opacity var(--icc-dur) var(--icc-ease);
}

.btn:hover{
  background:rgba(255,255,255,.04);
  border-color:var(--icc-border-strong);
}

.btn:active{transform:translateY(1px);}

.btn[disabled], .btn.is-disabled{
  opacity:.45;
  cursor:not-allowed;
}

.btn--primary{
  background:rgba(187,146,90,.18);
  border-color:rgba(187,146,90,.42);
}

.btn--primary:hover{
  background:rgba(187,146,90,.26);
  border-color:rgba(187,146,90,.55);
}

.btn--secondary{
  background:rgba(255,255,255,.03);
}

.btn--ghost{
  border-color:transparent;
  background:transparent;
}

.btn--ghost:hover{
  background:rgba(255,255,255,.04);
  border-color:transparent;
}

/* ✅ Elite WhatsApp button treatment (premium, not "random green") */
.btn--wa{
  padding-left:12px; /* icon + text feels tighter */
  padding-right:14px;
  gap:9px;
  border-color: rgba(255,255,255,.16);
  background:
    radial-gradient(160px 52px at 18% 35%, rgba(36,83,114,.14), transparent 62%),
    rgba(255,255,255,.03);
}
.btn--wa:hover{
  border-color: rgba(187,146,90,.40);
  background:
    radial-gradient(180px 56px at 18% 35%, rgba(187,146,90,.12), transparent 62%),
    rgba(255,255,255,.05);
}
.btn--wa:active{
  transform: translateY(1px);
}
.btn--wa .waIcon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
}
.btn--wa:hover .waIcon{
  border-color: rgba(187,146,90,.36);
  background:
    radial-gradient(90px 40px at 30% 35%, rgba(187,146,90,.12), transparent 60%),
    rgba(0,0,0,.10);
}
.btn--wa .waIcon svg{
  display:block;
  opacity:.92;
}

/* Inputs */
.field{
  -webkit-appearance:none;
  appearance:none;

  width:100%;
  height:var(--icc-h);
  border-radius:var(--icc-r-14);
  background:var(--icc-input);
  border:1px solid var(--icc-border);
  padding:0 12px;
  color:var(--icc-text);
  transition:
    border-color var(--icc-dur) var(--icc-ease),
    background var(--icc-dur) var(--icc-ease),
    box-shadow var(--icc-dur) var(--icc-ease);
}

.field::placeholder{color:var(--icc-placeholder);}

.field:focus{
  outline:none;
  border-color:rgba(187,146,90,.55);
  box-shadow:0 0 0 3px var(--icc-focus);
}

/* Select normalization */
select.field{
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='rgba(232,240,247,0.72)' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 14px;
}

select.field::-ms-expand{display:none;}

/* Textarea */
.textarea{
  -webkit-appearance:none;
  appearance:none;

  width:100%;
  min-height:96px;
  resize:vertical;
  padding:10px 12px;
  border-radius:var(--icc-r-14);
  background:var(--icc-input);
  border:1px solid var(--icc-border);
  color:var(--icc-text);
}

.textarea::placeholder{color:var(--icc-placeholder);}

.textarea:focus{
  outline:none;
  border-color:rgba(187,146,90,.55);
  box-shadow:0 0 0 3px var(--icc-focus);
}

/* Tabs */
.tabs{
  display:flex;
  gap:8px;
  padding:6px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--icc-border);
  border-radius:var(--icc-r-18);
}

.tab{
  height:32px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--icc-text-dim);
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  transition:
    background var(--icc-dur) var(--icc-ease),
    color var(--icc-dur) var(--icc-ease);
}

.tab:hover{
  background:rgba(255,255,255,.04);
  color:var(--icc-text);
}

.tab.is-active{
  background:rgba(187,146,90,.16);
  color:var(--icc-text);
  border-color:rgba(187,146,90,.35);
}

/* Lists */
.list{
  border:1px solid var(--icc-border);
  border-radius:var(--icc-r-18);
  overflow:hidden;
  background:rgba(0,0,0,.08);
}

/* ✅ List row styling (scoped) — legacy `.list .row` + new `.listRow` alias */
.list .row,
.listRow{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  border-bottom:1px solid var(--icc-border);
  color:var(--icc-text-dim);
}

.list .row:last-child,
.listRow:last-child{border-bottom:none;}

.list .row:hover,
.listRow:hover{
  background:rgba(255,255,255,.03);
  color:var(--icc-text);
}

.list .row.is-selected,
.listRow.is-selected{
  background:rgba(187,146,90,.12);
  color:var(--icc-text);
}

/* ✅ SPECIAL CASE: patient rows are multi-line "mini cards" (nav + results)
   - Keeps other lists compact (44px rows)
   - Allows patients.js to render Name/Meta/LastSeen/PID without overlap
*/
.list .row.patientRow{
  height:auto;
  padding:10px 12px;
  align-items:flex-start;
}

.list .row.patientRow .icc-title{
  font-size:14px; /* compact but readable inside nav list */
  line-height:1.25;
}

.list .row.patientRow .icc-label{
  line-height:1.25;
}

.list .row.patientRow .chip{
  margin-top:2px;
}

/* ✅ Elite selected state — PATIENT ROWS ONLY (does not affect other lists) */
.list .row.patientRow.is-selected{
  background:
    radial-gradient(220px 80px at 18% 20%, rgba(187,146,90,.16), transparent 60%),
    rgba(187,146,90,.10);
  color: var(--icc-text);
  box-shadow:
    inset 3px 0 0 rgba(187,146,90,.65),
    0 8px 24px rgba(0,0,0,.22);
}

/* Slightly sharpen chips when selected (optional but nice) */
.list .row.patientRow.is-selected .chip{
  border-color: rgba(187,146,90,.55);
  background: rgba(187,146,90,.10);
  color: var(--icc-text);
}

/* ✅ Skeleton rows (E2) — calm, premium, no harsh shimmer */
.skRow{
  position:relative;
  height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--icc-border);
  overflow:hidden;
}
.skRow:last-child{ border-bottom:none; }

.skLine{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
}

.skLeft{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}
.skRight{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.skRow::after{
  content:"";
  position:absolute;
  inset:-2px;
  transform:translateX(-60%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: skShimmer 1.2s ease-in-out infinite;
  pointer-events:none;
  opacity:.9;
}

@keyframes skShimmer{
  0%{ transform:translateX(-60%); }
  100%{ transform:translateX(60%); }
}

@media (prefers-reduced-motion:reduce){
  .skRow::after{ animation:none !important; }
}

/* Chips (tiny highlights only) */
.chip{
  height:22px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid var(--icc-border);
  background:rgba(255,255,255,.03);
  color:var(--icc-text-mute);
  font-size:12px;
  display:inline-flex;
  align-items:center;
}

/* ✅ Chips used as buttons should feel clickable + premium */
button.chip{
  cursor:pointer;
  user-select:none;
  transition:
    background var(--icc-dur) var(--icc-ease),
    border-color var(--icc-dur) var(--icc-ease),
    transform var(--icc-dur) var(--icc-ease);
}
button.chip:hover{
  background:rgba(255,255,255,.05);
  border-color:var(--icc-border-strong);
  color:var(--icc-text);
}
button.chip:active{ transform: translateY(1px); }
button.chip:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--icc-focus);
}

.chip--bronze{
  border-color:rgba(187,146,90,.45);
  background:rgba(187,146,90,.12);
  color:var(--icc-text);
}

/* ✅ NEW: elite clinical alert flag (for ALLERGY etc.) */
.chip--alert{
  border-color: rgba(187,146,90,.58);
  color: var(--icc-text);
  background:
    radial-gradient(120px 44px at 18% 30%, rgba(187,146,90,.20), transparent 60%),
    rgba(255,255,255,.03);
}
.chip--alert:hover{
  border-color: rgba(187,146,90,.70);
  background:
    radial-gradient(140px 52px at 18% 30%, rgba(187,146,90,.26), transparent 60%),
    rgba(255,255,255,.05);
}

/* Empty states (solid) */
.empty{
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--icc-r-18);
  background:rgba(255,255,255,.02);
  color:var(--icc-text-mute);
}

.empty b{
  color:var(--icc-text);
  font-weight:650;
}

/* Menus */
.menu{
  position:absolute;
  z-index:var(--icc-z-menu);
  min-width:200px;
  background:rgba(12,28,42,.96);
  border:1px solid var(--icc-border-strong);
  border-radius:var(--icc-r-18);
  box-shadow:var(--icc-shadow-2);
  padding:6px;
  backdrop-filter: blur(10px);
}

.menu__item{
  height:36px;
  border-radius:12px;
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--icc-text-dim);
  cursor:pointer;
}

.menu__item:hover{
  background:rgba(255,255,255,.05);
  color:var(--icc-text);
}

.menu__sep{
  height:1px;
  background:var(--icc-border);
  margin:6px;
}

/* -----------------------------
   Modal system (ICC Standard)
   ----------------------------- */

.modal{
  position:fixed;
  inset:0;
  z-index:var(--icc-z-modal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--icc-s-16);

  background: rgba(0,0,0,.48);
  backdrop-filter: blur(6px);
}

.modal[aria-hidden="true"]{ display:none; }

/* Elite overlay feel */
.modal--elite{
  background:
    radial-gradient(900px 380px at 20% 15%, rgba(187,146,90,.10), transparent 60%),
    rgba(0,0,0,.52);
}

.modalBox{
  width:min(920px, 100%);
  max-height:min(88vh, 900px);
  overflow:hidden;

  background: var(--icc-card);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--icc-r-22);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);

  display:flex;
  flex-direction:column;
}

.modalBox--elite{
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
    var(--icc-card);
}

.modalHead{
  padding: var(--icc-s-16);
  border-bottom: 1px solid var(--icc-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--icc-s-16);
}

.modalHead--elite{
  background: rgba(255,255,255,.02);
}

.modalBody{
  padding: var(--icc-s-16);
  overflow:auto;
  min-height:0;
}

.modalBody--elite{
  padding: var(--icc-s-24);
}

.modalFoot{
  padding: var(--icc-s-16);
  border-top: 1px solid var(--icc-border);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: var(--icc-s-16);
}

/* Optional alert block inside modals */
.formAlert{
  padding: 12px 14px;
  border-radius: var(--icc-r-18);
  border: 1px solid rgba(187,146,90,.22);
  background: rgba(187,146,90,.08);
  color: var(--icc-text);
}

/* Modal scrollbars */
.modalBody{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) rgba(0,0,0,.18); }
.modalBody::-webkit-scrollbar{ width:10px; height:10px; }
.modalBody::-webkit-scrollbar-track{ background:rgba(0,0,0,.20); border-radius:999px; }
.modalBody::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border:2px solid rgba(0,0,0,.22); border-radius:999px; }
.modalBody::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); }

@media (max-width: 700px){
  .modal{ padding: 10px; }
  .modalBody--elite{ padding: var(--icc-s-16); }
}

/* -----------------------------
   Toast (ICC Standard)
   ----------------------------- */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(10px);
  z-index:var(--icc-z-toast);

  max-width:min(520px, calc(100vw - 24px));
  padding:10px 14px;
  border-radius:999px;

  background:
    radial-gradient(220px 80px at 30% 20%, rgba(187,146,90,.14), transparent 60%),
    rgba(12,28,42,.92);

  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);

  color:var(--icc-text);
  font-size:13px;
  font-weight:650;
  letter-spacing:.1px;
  line-height:1.25;
  text-align:center;

  opacity:0;
  pointer-events:none;

  transition:
    opacity var(--icc-dur) var(--icc-ease),
    transform var(--icc-dur) var(--icc-ease);
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion:reduce){
  .toast{ transition:none !important; }
}
/* ------------------------------------------------
   ICC Global Scrollbar — Elite thin cockpit style
   Tier-1 Task 1
------------------------------------------------ */

*{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) rgba(0,0,0,.22);
}

/* WebKit */
::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-track{
  background:rgba(0,0,0,.22);
  border-radius:999px;
}

::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);
  border-radius:999px;
  border:2px solid rgba(0,0,0,.25);
}

::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.24);
}

::-webkit-scrollbar-corner{
  background:transparent;
}