/* ==========================================================================
   Item Component — Tickchak Design System
   List row 64px, slots: toggle/checkin/button/icon/caption/help/nominal/avatar
   Required: tokens.css
   Usage: <div class="item app theme-default"> ... </div>
   ========================================================================== */

.item{
  width:100%;max-width:501px;height:64px;
  display:flex;align-items:center;
  padding:0 var(--space-xl);
  gap:var(--space-sm);
  direction:rtl;
  position:relative;
  cursor:pointer;
  transition:background .3s cubic-bezier(.4,0,.2,1);
}

/* Hover bg */
.item.theme-default:hover{background:var(--ta-color-bg-surface-hover);}
.item.theme-inverse:hover{background:var(--ta-color-bg-surface-inv-hover);}

/* Selected state — brand/selected token + green check circle */
.item.is-selected,
.item.is-selected:hover{background:var(--ta-color-brand-selected);}
.item.is-selected .item-text{font-weight:700;}

/* Item check (green V circle) — only visible when item .is-selected */
.item-check{
  width:24px;height:24px;
  display:none;
  align-items:center;justify-content:center;
  flex-shrink:0;
  background:var(--color-green-400);
  border-radius:50%;
  color:var(--color-green-600, #465b17);   /* dark green V on light green bg */
}
.item.is-selected .item-check{display:flex;}
.item-check svg{width:14px;height:14px;display:block;}

/* === RIGHT: Main content — FILL === */
.item-main{
  display:flex;align-items:center;gap:var(--space-sm);
  flex:1;min-width:0;
  height:64px;
}
.item-text{
  flex:1;min-width:0;text-align:right;
  font-size:var(--f-body);font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.item.live .item-text{font-family:'Google Sans','Rubik',sans-serif;line-height:20px;}
.item.app .item-text{font-family:'Google Sans','Assistant',sans-serif;line-height:140%;}
.item.theme-default .item-text{color:var(--ta-color-text-default);}
.item.theme-inverse .item-text{color:var(--tl-color-text-default);}

/* Icons group */
.item-icons{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0;}
.item-icon{
  width:var(--dim-5);height:var(--dim-5);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0.6;transition:opacity .2s;
}
.item:hover .item-icon{opacity:1;}
.item.theme-default .item-icon svg{stroke:var(--ta-color-text-default);}
.item.theme-inverse .item-icon svg{stroke:var(--tl-color-text-default);}

/* Avatar */
.item-avatar{
  width:48px;height:48px;border-radius:70px;overflow:hidden;flex-shrink:0;
}
.item-avatar img{width:100%;height:100%;object-fit:cover;}

/* === MIDDLE: Nominal number — HUG === */
.item-nominal{
  padding:var(--space-xs);
  font-family:'Google Sans','Rubik',sans-serif;
  font-size:14px;font-weight:400;
  line-height:19px;
  flex-shrink:0;
}
.item.theme-default .item-nominal{color:var(--ta-color-text-default);}
.item.theme-inverse .item-nominal{color:var(--tl-color-text-default);}

/* === LEFT: Slot (actions) — HUG === */
.item-slot{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0;}

/* Help icon */
.slot-help{
  width:var(--dim-6);height:var(--dim-6);border-radius:111px;
  background:var(--ta-color-text-default);color:var(--tl-color-text-default);
  display:flex;align-items:center;justify-content:center;
  font-family:'Google Sans','Assistant',sans-serif;font-size:var(--f-body-sm);font-weight:700;
}

/* Button (Category/Tab) */
.slot-btn{
  height:32px;padding:0 var(--space-lg);border-radius:100px;
  border:none;cursor:pointer;
  font-size:var(--f-btn-cat);font-weight:700;line-height:16px;
  display:flex;align-items:center;gap:var(--space-sm);
  transition:background .2s, transform .15s;
  overflow:hidden;position:relative;
}
.slot-btn:active{transform:scale(0.96);}
.item.app .slot-btn{font-family:'Google Sans','Assistant',sans-serif;}
.item.live .slot-btn{font-family:'Google Sans','Rubik',sans-serif;}
.item.theme-default .slot-btn{background:var(--ta-color-bg-surface);color:var(--ta-color-text-default);}
.item.theme-default .slot-btn:hover{background:var(--ta-color-bg-surface-hover);}
.item.theme-inverse .slot-btn{background:var(--ta-color-bg-surface-inv);color:var(--tl-color-text-default);}
.item.theme-inverse .slot-btn:hover{background:var(--ta-color-bg-surface-inv-hover);}

/* Check-in */
.slot-checkin{
  width:var(--dim-6);height:var(--dim-6);border-radius:var(--r-full);
  background:var(--color-grays-300);border:none;cursor:pointer;
  position:relative;display:flex;align-items:center;justify-content:center;
  transition:background .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.slot-checkin.on{background:var(--color-green-400);}
.slot-checkin:hover{transform:scale(1.08);box-shadow:0 0 0 4px rgba(185,202,32,0.15);}
.slot-checkin:active{transform:scale(0.9);}
.slot-checkin .ci-check{
  width:10px;height:8px;opacity:0;
  display:flex;align-items:center;justify-content:center;
  transform:scale(0.3) rotate(-15deg);
  transition:opacity .3s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.175,.885,.32,1.275);
}
.slot-checkin.on .ci-check{opacity:1;transform:scale(1) rotate(0);}
.slot-checkin .ci-check svg path{stroke:var(--color-green-600);}

/* Left icon */
.slot-icon{
  width:var(--dim-5);height:var(--dim-5);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.item.theme-default .slot-icon svg{stroke:var(--ta-color-icon-default);}
.item.theme-inverse .slot-icon svg{stroke:var(--tl-color-icon-default);}

/* Toggle */
.slot-toggle{
  width:64px;height:28px;border-radius:1200px;
  position:relative;cursor:pointer;border:none;outline:none;
  direction:ltr;
  transition:background .4s cubic-bezier(.4,0,.2,1), box-shadow .3s;
  -webkit-tap-highlight-color:transparent;
}
.item.theme-default .slot-toggle{background:var(--ta-color-bg-surface);}
.item.theme-inverse .slot-toggle{background:var(--ta-color-bg-surface-inv);}
.slot-toggle.on{background:var(--ta-color-brand-main) !important;}
.slot-toggle:hover{box-shadow:0 0 0 4px rgba(142,237,255,0.15);}
.slot-toggle.on:hover{box-shadow:0 0 0 4px rgba(142,237,255,0.3);}
.slot-toggle .tg-knob{
  position:absolute;top:50%;left:var(--space-xs);
  width:var(--dim-5);height:var(--dim-5);border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15);
  transform:translateY(-50%) scale(1);
  transition:left .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1);
}
.slot-toggle.on .tg-knob{left:calc(100% - 24px);}
.slot-toggle:active .tg-knob{transform:translateY(-50%) scale(1.1);box-shadow:0 3px 8px rgba(0,0,0,0.3);}
.slot-toggle .tg-lbl{
  position:absolute;top:50%;
  font-family:'Google Sans','Rubik',sans-serif;font-size:var(--f-chip);font-weight:400;
  line-height:16px;white-space:nowrap;pointer-events:none;
  transition:opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
.slot-toggle .tg-off{right:var(--space-sm);opacity:1;color:var(--color-grays-600);transform:translateY(-50%) translateX(0);}
.slot-toggle .tg-on{left:var(--space-sm);opacity:0;color:var(--color-turquoise-700);transform:translateY(-50%) translateX(-4px);}
.slot-toggle.on .tg-off{opacity:0;transform:translateY(-50%) translateX(4px);}
.slot-toggle.on .tg-on{opacity:0.6;transform:translateY(-50%) translateX(0);}
.item.theme-inverse .slot-toggle .tg-off{color:var(--tl-color-text-subtle);}

/* Caption text in slot */
.slot-caption{
  padding:var(--space-xs);
  font-size:var(--f-caption);font-weight:400;
}
.item.live .slot-caption{font-family:'Google Sans','Rubik',sans-serif;line-height:16px;}
.item.app .slot-caption{font-family:'Google Sans','Assistant',sans-serif;line-height:110%;}
.item.theme-default .slot-caption{color:var(--ta-color-text-default);}
.item.theme-inverse .slot-caption{color:var(--tl-color-text-default);}

/* Hidden slot items */
.item-slot > [data-slot]{display:none;}
.item-slot > [data-slot].show{display:flex;}
.item-main > [data-slot]{display:none;}
.item-main > [data-slot].show{display:flex;}
.item-nominal[data-slot]{display:none;}
.item-nominal[data-slot].show{display:block;}