/* =====================================================================
   MI COMPONENTS — Design Lock V1 canonical components.
   Depends on mi-tokens.css. No !important. Weights 400/500/600/700 only.
   Visual language is limited to the approved UI kit.

   Contract (checked by tests/design-contract-mi-v1*.test.js):
   - One filled primary per region (.mi-btn--primary).
   - Destructive actions are outline/menu items. The filled danger button
     exists ONLY inside the final confirmation dialog (.mi-modal--confirm).
   - Every clinical status carries an icon and a word, never colour alone.
   - Metadata chips (.mi-chip) are neutral and never carry clinical colour.
   ===================================================================== */

/* Icons used as masks (monochrome, currentColor) */
:root{
  --mi-icon-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4L12 3.5Z'/%3E%3Cpath d='M12 10v4M12 16.8v.2'/%3E%3C/svg%3E");
  --mi-icon-drop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 3.5c3.5 4.2 5.5 7.3 5.5 10a5.5 5.5 0 0 1-11 0c0-2.7 2-5.8 5.5-10Z'/%3E%3C/svg%3E");
  --mi-icon-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --mi-icon-hourglass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 3h10M7 21h10M8 3c0 5 8 5 8 9s-8 4-8 9M16 3c0 5-8 5-8 9'/%3E%3C/svg%3E");
  --mi-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --mi-icon-x-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E");
  --mi-icon-user-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='8' r='3.2'/%3E%3Cpath d='M4 20c.6-3.6 2.8-5.6 6-5.6 1.3 0 2.4.3 3.3.9M16 15l5 5M21 15l-5 5'/%3E%3C/svg%3E");
  --mi-icon-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='black'/%3E%3C/svg%3E");
  --mi-icon-ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");
  --mi-icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --mi-icon-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
  --mi-icon-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M9.5 7V4.5h5V7M6.5 7l1 13h9l1-13'/%3E%3C/svg%3E");
  --mi-icon-chevron-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --mi-icon-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --mi-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --mi-icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --mi-icon-refresh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 5v6h-6'/%3E%3C/svg%3E");
  --mi-icon-stethoscope:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 3v6a4 4 0 0 0 8 0V3M10 13v2a5 5 0 0 0 10 0v-2'/%3E%3Ccircle cx='20' cy='11' r='2'/%3E%3C/svg%3E");
  --mi-icon-parent:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='7.5' r='3'/%3E%3Cpath d='M3.5 20c.6-3.8 2.7-5.8 5.5-5.8s4.9 2 5.5 5.8'/%3E%3Cpath d='M16 11h5M18.5 8.5v5'/%3E%3C/svg%3E");
  --mi-icon-syringe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 3 6 6M18 6l-9.5 9.5-3 .5.5-3L15.5 3.5M12 9l3 3M3 21l3-3'/%3E%3C/svg%3E");
  --mi-icon-gift:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='1.5'/%3E%3Cpath d='M12 9v11M4 13h16M12 9c-1.5-3-5-3.5-5-1s3.5 1 5 1Zm0 0c1.5-3 5-3.5 5-1s-3.5 1-5 1Z'/%3E%3C/svg%3E");
  --mi-icon-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 4 2.4 5 5.3.6-4 3.6 1.1 5.3L12 15.8 7.2 18.5l1.1-5.3-4-3.6 5.3-.6L12 4Z'/%3E%3C/svg%3E");
  --mi-icon-shield-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --mi-icon-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4V20a.5.5 0 0 1-.5.5h-10A.5.5 0 0 1 7 20V3.5Z'/%3E%3Cpath d='M14 3.5V8h4M9.5 12.5h5M9.5 16h5'/%3E%3C/svg%3E");
  --mi-icon-more:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='12' r='1.6' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='black' stroke='none'/%3E%3Ccircle cx='18.5' cy='12' r='1.6' fill='black' stroke='none'/%3E%3C/svg%3E");
  --mi-icon-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16'/%3E%3Cpath d='m7 15 4-4 3 3 5-6'/%3E%3C/svg%3E");
  --mi-icon-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19c.7-3.4 2.6-5.2 5.5-5.2s4.8 1.8 5.5 5.2'/%3E%3Ccircle cx='17' cy='9' r='2.2'/%3E%3Cpath d='M15.2 14.4c2.7-.7 4.7.8 5.3 3.8'/%3E%3C/svg%3E");
}

/* ---------- Shared focus ---------- */
.mi-btn:focus-visible,.mi-input:focus-visible,.mi-select:focus-visible,.mi-textarea:focus-visible,
.mi-checkbox input:focus-visible,.mi-toggle input:focus-visible,.mi-tab:focus-visible,
.mi-menu__item:focus-visible,.mi-list__row:focus-visible,.mi-modal__close:focus-visible,
.mi-drawer__close:focus-visible,.mi-tabs-scroll__more:focus-visible{
  outline:var(--mi-focus-width) solid var(--mi-primary);
  outline-offset:var(--mi-focus-offset);
}

/* ---------- Buttons ---------- */
.mi-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--mi-space-2);
  height:var(--mi-control-lg);min-width:var(--mi-control-lg);padding:0 var(--mi-space-4);
  border:1px solid transparent;border-radius:var(--mi-radius-sm);
  background:transparent;color:var(--mi-text);
  font:var(--mi-weight-semibold) var(--mi-text-body)/1 var(--mi-font-sans);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,filter .14s ease;
}
.mi-btn svg{width:16px;height:16px;flex:0 0 16px}
.mi-btn--primary{background:var(--mi-primary);border-color:var(--mi-primary);color:var(--mi-on-primary)}
.mi-btn--primary:hover{filter:brightness(.92)}
.mi-btn--secondary{background:var(--mi-surface);border-color:var(--mi-border-strong);color:var(--mi-text)}
.mi-btn--secondary:hover{background:var(--mi-surface-2)}
.mi-btn--ghost{padding:0 var(--mi-space-3);color:var(--mi-primary)}
.mi-btn--ghost:hover{background:var(--mi-primary-tint)}
/* Destructive: outline everywhere… */
.mi-btn--danger{background:var(--mi-surface);border-color:var(--mi-danger);color:var(--mi-danger)}
.mi-btn--danger:hover{background:var(--mi-danger-tint)}
/* …filled only in the final destructive confirmation dialog. */
.mi-modal--confirm .mi-modal__footer .mi-btn--danger{background:var(--mi-danger);border-color:var(--mi-danger);color:var(--mi-on-danger)}
.mi-modal--confirm .mi-modal__footer .mi-btn--danger:hover{filter:brightness(.92)}
.mi-btn--sm{height:var(--mi-control-sm);min-width:var(--mi-control-sm);padding:0 var(--mi-space-3);font-size:var(--mi-text-dense)}
.mi-btn--md{height:var(--mi-control-md);min-width:var(--mi-control-md);padding:0 14px}
.mi-btn--xl{height:var(--mi-control-xl);min-width:var(--mi-control-xl);padding:0 18px}
.mi-btn--mobile{height:var(--mi-control-mobile);padding:0 var(--mi-space-5);font-size:15px}
.mi-btn--block{display:flex;width:100%}
.mi-btn--icon{padding:0;width:var(--mi-control-lg)}
.mi-btn--icon.mi-btn--sm{width:var(--mi-control-sm)}
.mi-btn--icon.mi-btn--xl{width:var(--mi-control-xl)}
.mi-btn:disabled,.mi-btn[aria-disabled="true"]{
  background:var(--mi-sunken);border-color:var(--mi-border-strong);border-style:dashed;color:var(--mi-text-2);
  cursor:not-allowed;filter:none;
}
.mi-btn[aria-busy="true"]{cursor:progress}
.mi-btn[aria-busy="true"]::before{
  content:"";width:14px;height:14px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:mi-spin .8s linear infinite;
}
@media (max-width:820px){
  .mi-btn{min-height:var(--mi-tap-min)}
  .mi-btn--sm,.mi-btn--md,.mi-btn:not(.mi-btn--mobile){height:auto;min-height:var(--mi-tap-min)}
  .mi-btn--icon{width:var(--mi-tap-min)}
}

/* ---------- Fields ---------- */
.mi-field{display:flex;flex-direction:column;gap:6px;font-family:var(--mi-font-sans)}
.mi-field__label{font-size:13px;font-weight:var(--mi-weight-semibold);color:var(--mi-text)}
.mi-field__hint{font-size:var(--mi-text-meta);color:var(--mi-text-2)}
.mi-field__error{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:var(--mi-weight-semibold);color:var(--mi-danger)}
.mi-field__error::before{content:"";width:14px;height:14px;flex:0 0 14px;background:currentColor;-webkit-mask:var(--mi-icon-alert) center/contain no-repeat;mask:var(--mi-icon-alert) center/contain no-repeat}
.mi-input,.mi-select,.mi-textarea{
  width:100%;min-width:0;box-sizing:border-box;
  border:1px solid var(--mi-control-border);border-radius:var(--mi-radius-sm);
  background:var(--mi-surface);color:var(--mi-text);
  font:var(--mi-weight-regular) var(--mi-text-body)/1.4 var(--mi-font-sans);
}
.mi-input,.mi-select{height:var(--mi-control-lg);padding:0 var(--mi-space-3)}
.mi-textarea{min-height:96px;padding:10px var(--mi-space-3);line-height:1.5;resize:vertical}
.mi-input::placeholder,.mi-textarea::placeholder{color:var(--mi-text-3)}
.mi-input:focus,.mi-select:focus,.mi-textarea:focus{border-color:var(--mi-primary);box-shadow:0 0 0 3px var(--mi-primary-tint)}
.mi-select{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:var(--mi-select-chevron);background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
:root{--mi-select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6A76' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html.dark,html[data-theme="dark"]{--mi-select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B3BE' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.mi-input[aria-invalid="true"],.mi-select[aria-invalid="true"],.mi-textarea[aria-invalid="true"]{border:2px solid var(--mi-danger)}
.mi-input:disabled,.mi-select:disabled,.mi-textarea:disabled,.mi-input[readonly]{
  border-style:dashed;border-color:var(--mi-border-strong);background:var(--mi-surface-2);color:var(--mi-text-2);
}
.mi-input-group{display:flex;align-items:stretch;height:var(--mi-control-lg);border:1px solid var(--mi-control-border);border-radius:var(--mi-radius-sm);background:var(--mi-surface);overflow:hidden}
.mi-input-group:focus-within{border-color:var(--mi-primary);box-shadow:0 0 0 3px var(--mi-primary-tint)}
.mi-input-group .mi-input{height:100%;border:0;border-radius:0;box-shadow:none}
.mi-input-group__suffix{display:flex;align-items:center;padding:0 var(--mi-space-3);border-left:1px solid var(--mi-border);color:var(--mi-text-2);font:var(--mi-weight-medium) 13px var(--mi-font-sans)}
@media (max-width:820px){
  .mi-input,.mi-select,.mi-input-group{height:var(--mi-control-mobile);font-size:16px}
  .mi-textarea{font-size:16px}
}

/* ---------- Checkbox & toggle (native inputs, restyled) ---------- */
.mi-checkbox,.mi-toggle{display:inline-flex;align-items:center;gap:10px;min-height:32px;color:var(--mi-text);font:var(--mi-weight-regular) var(--mi-text-body)/1.4 var(--mi-font-sans);cursor:pointer}
.mi-checkbox input{appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;flex:0 0 20px;border:1.5px solid var(--mi-control-border);border-radius:5px;background:var(--mi-surface);display:grid;place-items:center;cursor:pointer}
.mi-checkbox input::before{content:"";width:13px;height:13px;background:var(--mi-on-primary);-webkit-mask:var(--mi-icon-check) center/contain no-repeat;mask:var(--mi-icon-check) center/contain no-repeat;transform:scale(0)}
.mi-checkbox input:checked{background:var(--mi-primary);border-color:var(--mi-primary)}
.mi-checkbox input:checked::before{transform:scale(1)}
.mi-checkbox input:disabled{border-style:dashed;border-color:var(--mi-border-strong);background:var(--mi-sunken);cursor:not-allowed}
.mi-toggle input{appearance:none;-webkit-appearance:none;margin:0;position:relative;width:40px;height:24px;flex:0 0 40px;border:1.5px solid var(--mi-control-border);border-radius:var(--mi-radius-pill);background:var(--mi-sunken);cursor:pointer}
.mi-toggle input::before{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--mi-control-border);transition:transform .14s ease}
.mi-toggle input:checked{background:var(--mi-primary);border-color:var(--mi-primary)}
.mi-toggle input:checked::before{background:var(--mi-on-primary);transform:translateX(16px)}
.mi-toggle__state{font-weight:var(--mi-weight-semibold)}
@media (max-width:820px){.mi-checkbox,.mi-toggle{min-height:var(--mi-tap-min)}}

/* ---------- Tabs ---------- */
.mi-tabs{display:flex;gap:var(--mi-space-4);border-bottom:1px solid var(--mi-border);font-family:var(--mi-font-sans)}
.mi-tab{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 4px;border:0;border-radius:0;background:none;color:var(--mi-text-2);font:var(--mi-weight-semibold) var(--mi-text-body)/1 var(--mi-font-sans);white-space:nowrap;cursor:pointer}
.mi-tab[aria-selected="true"]{color:var(--mi-primary);font-weight:var(--mi-weight-bold);box-shadow:inset 0 -2px 0 var(--mi-primary)}
.mi-tab__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:var(--mi-radius-pill);background:var(--mi-sunken);color:var(--mi-text-2);font-size:var(--mi-text-meta);font-weight:var(--mi-weight-semibold)}
.mi-tabs--segmented{display:inline-flex;gap:2px;padding:3px;border:0;border-radius:8px;background:var(--mi-sunken)}
.mi-tabs--segmented .mi-tab{height:30px;padding:0 12px;border-radius:var(--mi-radius-sm);font-size:13px;box-shadow:none}
.mi-tabs--segmented .mi-tab[aria-selected="true"]{background:var(--mi-surface);color:var(--mi-text);box-shadow:var(--mi-shadow-1)}
/* Horizontal scroll with explicit affordance (fade + chevron), never silent clipping. */
.mi-tabs-scroll{position:relative;border-bottom:1px solid var(--mi-border)}
.mi-tabs-scroll .mi-tabs{border-bottom:0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-right:52px}
.mi-tabs-scroll .mi-tabs::-webkit-scrollbar{display:none}
.mi-tabs-scroll .mi-tab{scroll-snap-align:start}
.mi-tabs-scroll__fade{position:absolute;top:0;bottom:0;right:44px;width:36px;pointer-events:none;background:linear-gradient(to right,transparent,var(--mi-surface))}
.mi-tabs-scroll__more{position:absolute;top:0;right:0;bottom:0;width:44px;display:grid;place-items:center;border:0;border-left:1px solid var(--mi-border);background:var(--mi-surface);color:var(--mi-text-2);cursor:pointer}
.mi-tabs-scroll__more::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--mi-icon-chevron-right) center/contain no-repeat;mask:var(--mi-icon-chevron-right) center/contain no-repeat}

/* ---------- Status, badges, chips (colour + icon + word) ---------- */
.mi-status,.mi-badge,.mi-chip{
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;box-sizing:border-box;
  border:1px solid transparent;border-radius:var(--mi-radius-pill);
  font:var(--mi-weight-semibold) var(--mi-text-meta)/1 var(--mi-font-sans);white-space:nowrap;
}
.mi-status::before,.mi-badge::before{
  content:"";width:12px;height:12px;flex:0 0 12px;background:currentColor;
  -webkit-mask:var(--mi-status-icon,var(--mi-icon-dot)) center/contain no-repeat;
  mask:var(--mi-status-icon,var(--mi-icon-dot)) center/contain no-repeat;
}
.mi-status--scheduled{border-color:var(--mi-border-strong);color:var(--mi-text-2);--mi-status-icon:var(--mi-icon-ring)}
.mi-status--next{background:var(--mi-primary-tint);color:var(--mi-primary);--mi-status-icon:var(--mi-icon-dot)}
.mi-status--arrived{background:var(--mi-sage-tint);color:var(--mi-sage);--mi-status-icon:var(--mi-icon-arrow)}
.mi-status--in-progress{background:var(--mi-success-tint);color:var(--mi-success);--mi-status-icon:var(--mi-icon-dot)}
.mi-status--success{background:var(--mi-success-tint);color:var(--mi-success);--mi-status-icon:var(--mi-icon-check)}
.mi-status--pending{background:var(--mi-pending-tint);color:var(--mi-pending);--mi-status-icon:var(--mi-icon-hourglass)}
.mi-status--warning{background:var(--mi-warning-tint);color:var(--mi-warning);--mi-status-icon:var(--mi-icon-clock)}
.mi-status--callback{background:var(--mi-primary-tint);color:var(--mi-primary);--mi-status-icon:var(--mi-icon-phone)}
.mi-status--cancelled{border:1px dashed var(--mi-border-strong);color:var(--mi-text-2);--mi-status-icon:var(--mi-icon-x-circle)}
.mi-status--no-show{background:var(--mi-sunken);color:var(--mi-text-2);--mi-status-icon:var(--mi-icon-user-x)}
/* Critical badges — filled, uppercase word + icon. Emergency ONLY from deterministic safety logic. */
.mi-badge{height:24px;padding:0 10px;font-weight:var(--mi-weight-bold);letter-spacing:.04em;text-transform:uppercase}
.mi-badge--emergency{background:var(--mi-danger);color:var(--mi-on-danger);--mi-status-icon:var(--mi-icon-alert)}
.mi-badge--allergy{background:var(--mi-allergy);color:var(--mi-on-primary);--mi-status-icon:var(--mi-icon-drop)}
/* Metadata: neutral, no icon, no clinical colour (e.g. «Κορίτσι», «3 ετ. 4 μην.», «Online»). */
.mi-chip{background:var(--mi-sunken);color:var(--mi-text-2)}
.mi-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:var(--mi-radius-pill);background:var(--mi-primary);color:var(--mi-on-primary);font:var(--mi-weight-bold) var(--mi-text-meta)/1 var(--mi-font-sans)}

/* ---------- Alerts & safety strips ---------- */
.mi-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:8px;font:var(--mi-weight-regular) var(--mi-text-body)/1.45 var(--mi-font-sans);color:var(--mi-text)}
.mi-alert::before{content:"";width:18px;height:18px;flex:0 0 18px;margin-top:1px;background:var(--mi-alert-color);-webkit-mask:var(--mi-alert-icon) center/contain no-repeat;mask:var(--mi-alert-icon) center/contain no-repeat}
.mi-alert__title{display:block;font-weight:var(--mi-weight-bold);color:var(--mi-alert-color)}
.mi-alert__text{display:block;font-size:13px;color:var(--mi-text-2)}
.mi-alert--warning{background:var(--mi-warning-tint);--mi-alert-color:var(--mi-warning);--mi-alert-icon:var(--mi-icon-alert)}
.mi-alert--success{background:var(--mi-success-tint);--mi-alert-color:var(--mi-success);--mi-alert-icon:var(--mi-icon-check)}
.mi-alert--error{background:var(--mi-danger-tint);--mi-alert-color:var(--mi-danger);--mi-alert-icon:var(--mi-icon-x-circle)}
.mi-alert--allergy{align-items:center;background:var(--mi-allergy-tint);box-shadow:inset 6px 0 0 var(--mi-allergy);padding-left:20px;--mi-alert-color:var(--mi-allergy);--mi-alert-icon:var(--mi-icon-drop)}
.mi-alert--allergy::before{display:none}
.mi-alert--emergency{align-items:center;background:var(--mi-danger-tint);border:1px solid var(--mi-danger);box-shadow:inset 4px 0 0 var(--mi-danger);padding-left:18px;--mi-alert-color:var(--mi-danger);--mi-alert-icon:var(--mi-icon-alert)}
.mi-alert--emergency::before{display:none}

/* ---------- Lists ---------- */
.mi-list{display:flex;flex-direction:column;border:1px solid var(--mi-border);border-radius:var(--mi-radius-md);background:var(--mi-surface);overflow:hidden;font-family:var(--mi-font-sans)}
.mi-list__header{padding:14px 16px 6px;font-size:var(--mi-text-overline);font-weight:var(--mi-weight-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--mi-text-3)}
.mi-list__row{display:flex;align-items:center;gap:var(--mi-space-3);min-height:56px;padding:8px 16px;border-top:1px solid var(--mi-border);color:var(--mi-text);text-align:left;background:transparent}
.mi-list__row:first-child{border-top:0}
.mi-list__row--current{background:var(--mi-primary-tint);box-shadow:inset 3px 0 0 var(--mi-primary)}
.mi-list__row--callback{box-shadow:inset 3px 0 0 var(--mi-primary)}
.mi-list__row--pending{box-shadow:inset 3px 0 0 var(--mi-pending)}
.mi-list__row--overdue{box-shadow:inset 3px 0 0 var(--mi-warning)}
.mi-list__time{width:48px;flex:0 0 48px;font-weight:var(--mi-weight-bold)}
.mi-list__main{flex:1 1 auto;min-width:0}
.mi-list__title{display:block;font-weight:var(--mi-weight-semibold);overflow-wrap:anywhere}
.mi-list__meta{display:block;font-size:12.5px;color:var(--mi-text-2)}
.mi-list__row--cancelled .mi-list__time{text-decoration:line-through;color:var(--mi-text-2)}
@media (max-width:820px){.mi-list__header{font-size:var(--mi-text-meta)}}

/* ---------- Modal ---------- */
.mi-modal{position:fixed;inset:0;z-index:var(--mi-z-modal);display:grid;place-items:center;padding:var(--mi-space-6);font-family:var(--mi-font-sans)}
.mi-modal[hidden]{display:none}
.mi-modal__scrim{position:absolute;inset:0;background:var(--mi-scrim)}
.mi-modal__dialog{position:relative;width:min(560px,100%);max-height:min(88dvh,880px);overflow:auto;border-radius:var(--mi-radius-md);background:var(--mi-surface);color:var(--mi-text);box-shadow:var(--mi-shadow-3)}
.mi-modal__header{display:flex;align-items:flex-start;gap:var(--mi-space-3);padding:18px 18px 0}
.mi-modal__title{margin:0;font-size:var(--mi-text-subhead);line-height:var(--mi-lh-subhead);font-weight:var(--mi-weight-bold)}
.mi-modal__body{padding:14px 18px;font-size:var(--mi-text-body);color:var(--mi-text-2)}
.mi-modal__footer{display:flex;justify-content:flex-end;gap:var(--mi-space-2);padding:16px 18px;background:var(--mi-surface-2);border-top:1px solid var(--mi-border)}
.mi-modal__close,.mi-drawer__close{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;margin-left:auto;border:0;border-radius:var(--mi-radius-sm);background:transparent;color:var(--mi-text-2);cursor:pointer}
.mi-modal__close::before,.mi-drawer__close::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--mi-icon-close) center/contain no-repeat;mask:var(--mi-icon-close) center/contain no-repeat}
.mi-modal--confirm .mi-modal__icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--mi-danger-tint);color:var(--mi-danger)}
.mi-modal--confirm .mi-modal__icon::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--mi-icon-trash) center/contain no-repeat;mask:var(--mi-icon-trash) center/contain no-repeat}
@media (max-width:820px){
  .mi-modal{place-items:end stretch;padding:calc(var(--mi-topbar-height-mobile) + 8px) 0 0}
  .mi-modal__dialog{width:100%;max-height:100%;border-radius:var(--mi-radius-md) var(--mi-radius-md) 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .mi-modal__close,.mi-drawer__close{width:var(--mi-tap-min);height:var(--mi-tap-min);flex-basis:var(--mi-tap-min)}
}

/* ---------- Drawer ---------- */
.mi-drawer{position:fixed;inset:0;z-index:var(--mi-z-modal);font-family:var(--mi-font-sans)}
.mi-drawer[hidden]{display:none}
.mi-drawer__scrim{position:absolute;inset:0;background:var(--mi-scrim)}
.mi-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);display:flex;flex-direction:column;background:var(--mi-surface);color:var(--mi-text);box-shadow:var(--mi-shadow-3)}
.mi-drawer__header{display:flex;align-items:center;gap:var(--mi-space-2);padding:12px 16px;border-bottom:1px solid var(--mi-border)}
.mi-drawer__title{margin:0;font-size:15px;font-weight:var(--mi-weight-bold)}
.mi-drawer__body{flex:1 1 auto;overflow:auto;padding:14px 16px}
.mi-drawer__footer{display:flex;gap:var(--mi-space-2);padding:12px 16px;border-top:1px solid var(--mi-border);background:var(--mi-surface-2)}

/* ---------- Menu ---------- */
.mi-menu{display:flex;flex-direction:column;min-width:200px;padding:4px;border:1px solid var(--mi-border);border-radius:8px;background:var(--mi-surface);box-shadow:var(--mi-shadow-2);font-family:var(--mi-font-sans)}
.mi-menu[hidden]{display:none}
.mi-menu__item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 10px;box-sizing:border-box;border:0;border-radius:var(--mi-radius-sm);background:transparent;color:var(--mi-text);font:var(--mi-weight-medium) var(--mi-text-body)/1.2 var(--mi-font-sans);text-align:left;cursor:pointer}
.mi-menu__item:hover,.mi-menu__item.is-active{background:var(--mi-surface-2)}
.mi-menu__item:focus-visible{outline-offset:-2px;background:var(--mi-primary-tint)}
.mi-menu__item--danger{color:var(--mi-danger);font-weight:var(--mi-weight-semibold)}
.mi-menu__item--danger::before{content:"";width:15px;height:15px;flex:0 0 15px;background:currentColor;-webkit-mask:var(--mi-icon-trash) center/contain no-repeat;mask:var(--mi-icon-trash) center/contain no-repeat}
.mi-menu__separator{height:1px;margin:4px 6px;background:var(--mi-border)}
.mi-menu__count{margin-left:auto}
@media (max-width:820px){.mi-menu__item{min-height:var(--mi-tap-min)}}

/* ---------- Tooltip ---------- */
.mi-tooltip{position:absolute;z-index:var(--mi-z-menu);display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;box-sizing:border-box;border-radius:var(--mi-radius-sm);background:var(--mi-text);color:var(--mi-surface);font:var(--mi-weight-semibold) 12.5px/1.3 var(--mi-font-sans);white-space:nowrap;pointer-events:none}
.mi-tooltip[hidden]{display:none}

/* ---------- Toast ---------- */
.mi-toast-region{position:fixed;left:50%;bottom:calc(var(--mi-space-6) + env(safe-area-inset-bottom));z-index:var(--mi-z-toast);display:flex;flex-direction:column;gap:var(--mi-space-2);transform:translateX(-50%);width:min(440px,calc(100vw - 32px))}
.mi-toast{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--mi-border);border-radius:8px;background:var(--mi-surface);color:var(--mi-text);box-shadow:var(--mi-shadow-2);font:var(--mi-weight-semibold) var(--mi-text-body)/1.35 var(--mi-font-sans)}
.mi-toast::before{content:"";width:18px;height:18px;flex:0 0 18px;background:var(--mi-toast-color,var(--mi-success));-webkit-mask:var(--mi-toast-icon,var(--mi-icon-check)) center/contain no-repeat;mask:var(--mi-toast-icon,var(--mi-icon-check)) center/contain no-repeat}
.mi-toast--error{--mi-toast-color:var(--mi-danger);--mi-toast-icon:var(--mi-icon-x-circle)}
.mi-toast__text{flex:1 1 auto;min-width:0}
@media (max-width:820px){.mi-toast-region{bottom:calc(var(--mi-bottom-nav-height) + 12px + env(safe-area-inset-bottom))}}

/* ---------- Empty & loading ---------- */
.mi-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 14px;border:1px dashed var(--mi-border-strong);border-radius:8px;text-align:center;font-family:var(--mi-font-sans);color:var(--mi-text)}
.mi-empty__title{font-weight:var(--mi-weight-bold)}
.mi-empty__text{font-size:13px;color:var(--mi-text-2)}
.mi-skeleton{display:block;height:12px;border-radius:4px;background:var(--mi-sunken)}
.mi-loading{display:inline-flex;align-items:center;gap:8px;font:var(--mi-weight-medium) 12.5px var(--mi-font-sans);color:var(--mi-text-2)}
.mi-loading::before,.mi-spinner{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:mi-spin .8s linear infinite}
@keyframes mi-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .mi-loading::before,.mi-spinner,.mi-btn[aria-busy="true"]::before{animation-duration:2.4s}
}