/* ==========================================================================
   Lecture Card — Tickchak App Component
   Expanded / compact states, with sticker, drag handle, add mode
   Required: tokens.css
   Usage: <div class="lcard"> ... </div>
   ========================================================================== */

.lcard{width:305px;flex-shrink:0;border:1px solid var(--ta-color-border-subtle);border-radius:var(--r-sm);background:var(--ta-color-bg-base);display:flex;cursor:pointer;transition:box-shadow .2s;overflow:hidden;}
.lcard:hover{box-shadow:0 2px 12px rgba(0,0,0,.08);}

/* Body */
.lcard-body{flex:1;min-width:0;display:flex;justify-content:space-between;align-items:flex-start;}
.lcard-body.expanded{padding:var(--space-lg) var(--space-sm) var(--space-lg) var(--space-lg);}
.lcard-body.compact{padding:var(--space-md) var(--space-sm) var(--space-sm) var(--space-lg);}
.lcard-body.hover-expanded{padding:var(--space-sm) var(--space-sm) var(--space-lg) var(--space-lg);}
.lcard-body.hover-compact{padding:var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg);}

/* Menu dots (kebab) */
.lcard-menu{width:14px;height:14px;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.4;transition:opacity .15s;}
.lcard-menu:hover{opacity:1;}

/* Details */
.lcard-details{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-sm);min-width:0;text-align:right;}
.lcard-title{font-size:var(--f-body);font-weight:700;color:#25272d;line-height:1;overflow:hidden;text-overflow:ellipsis;min-width:100%;width:min-content;}
.lcard-lecturer{display:flex;align-items:center;gap:var(--space-xs);}
.lcard-lecturer-name{font-size:var(--f-caption);font-weight:300;color:#25272d;line-height:1;white-space:nowrap;}
.card-ava{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0;}
.card-ava img{width:100%;height:100%;object-fit:cover;}

/* Ticket info */
.lcard-ticket{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-sm);width:100%;}
.ticket-dets{display:flex;flex-direction:column;align-items:flex-end;}
.ticket-dets p{font-size:var(--f-caption);line-height:1.4;color:#25272d;text-align:right;white-space:nowrap;}
.ticket-dets p strong{font-weight:700;}

/* Linked tickets button */
.btn-linked{height:28px;padding:0 var(--space-md) 0 var(--space-xs);border-radius:100px;background:var(--ta-color-bg-surface);border:none;font-family:'Google Sans','Assistant',sans-serif;font-size:var(--f-chip);font-weight:700;color:var(--ta-color-text-default);cursor:pointer;display:flex;align-items:center;gap:var(--space-sm);white-space:nowrap;direction:ltr;transition:transform .1s,background .15s;overflow:clip;}
.btn-linked:hover{background:rgba(0,0,0,.08);}
.btn-linked:active{transform:scale(.95);background:var(--ta-color-bg-surface-hover);}
.btn-linked .cnt{height:18px;border-radius:100px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--f-body-sm);font-weight:700;padding:0 var(--space-sm);line-height:1.3;}
.btn-linked .txt-g{display:flex;align-items:center;gap:var(--space-sm);}

/* Row holding the AssignedTickets chip + edit button (Figma 24950:4352 / 37907:39563)
   Force RTL so the order is consistent across the demo stage (rtl) and the static variants (inherit ltr from body):
   chip on the RIGHT (first DOM child), edit on the LEFT. */
.btn-row{display:flex;align-items:flex-start;gap:var(--space-sm);direction:rtl;}
.btn-edit{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  padding:0;border:none;
  border-radius:100px;
  background:var(--ta-color-bg-surface);
  color:var(--ta-color-text-default);cursor:pointer;
  transition:background .15s, transform .1s;
}
.btn-edit:hover{background:rgba(0,0,0,.08);}
.btn-edit:active{transform:scale(.95);}
.btn-edit svg{width:16px;height:16px;display:block;}

/* Sticker */
.lcard-sticker{width:44px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;}
.lcard-sticker.bottom{justify-content:flex-end;}
.lcard-sticker img{width:38.5px;height:38.5px;object-fit:contain;}
.st-turquoise{background:#68dbdd;}
.st-green{background:#a6dd68;}
.st-purple{background:#687ddd;}

/* Drag Handle (hover only) */
.drag-handle{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-xs);border-left:1px solid var(--ta-color-border-subtle);background:var(--ta-color-bg-base);align-self:stretch;flex-shrink:0;overflow:clip;}
.drag-handle .drag-icon{width:24px;height:24px;position:relative;overflow:clip;}
.drag-handle .drag-icon img{position:absolute;display:block;}

/* Add mode */
.lcard-add{width:305px;border:2px dashed var(--ta-color-brand-main);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;overflow:clip;}
.lcard-add:hover{background:rgba(142,237,255,.06);}
.lcard-add.expanded{height:208px;}
.lcard-add.compact{height:64px;}
.btn-circle-add{width:32px;height:32px;border-radius:50%;background:var(--ta-color-brand-main);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ta-color-text-default);font-weight:700;}

/* Kebab icon */
.kebab-icon{position:relative;width:14px;height:14px;display:block;overflow:clip;}
.kebab-icon img{position:absolute;display:block;}