/* ============================================================
   Shared component library
   ============================================================ */

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:11px 18px;border-radius:var(--r-md);border:1px solid transparent;
  font-size:var(--fs-md);font-weight:600;cursor:pointer;transition:var(--transition);
  white-space:nowrap;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--accent);color:var(--accent-text);}
.btn-primary:hover{background:var(--accent-dark);}
.btn-secondary{background:var(--accent-light);color:var(--accent-dark);}
.btn-secondary:hover{filter:brightness(.97);}
.btn-outline{background:transparent;border-color:var(--border);color:var(--text);}
.btn-outline:hover{background:var(--gray-50);}
.btn-ghost{background:transparent;color:var(--text-muted);}
.btn-ghost:hover{background:var(--gray-100);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:7px 12px;font-size:var(--fs-sm);border-radius:var(--r-sm);}
.btn-lg{padding:14px 22px;font-size:var(--fs-lg);}
.btn-icon{padding:9px;border-radius:var(--r-full);}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* --- Card --- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-sm);
}
.card-flat{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);}
.card-title{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--sp-1);}
.card-subtitle{font-size:var(--fs-sm);color:var(--text-muted);}
.card-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);}

/* --- Stat tile / KPI --- */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);}
.stat-tile{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1);
}
.stat-tile .stat-icon{
  width:34px;height:34px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  background:var(--accent-light);color:var(--accent-dark);font-size:16px;margin-bottom:var(--sp-1);
}
.stat-tile .stat-value{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;}
.stat-tile .stat-label{font-size:var(--fs-sm);color:var(--text-muted);}
.stat-tile .stat-delta{font-size:var(--fs-xs);font-weight:700;}
.stat-delta.up{color:var(--success);}
.stat-delta.down{color:var(--danger);}

/* --- Badges / pills --- */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge-success{background:var(--success-bg);color:var(--success);}
.badge-warning{background:var(--warning-bg);color:var(--warning);}
.badge-danger{background:var(--danger-bg);color:var(--danger);}
.badge-info{background:var(--info-bg);color:var(--info);}
.badge-pending{background:var(--pending-bg);color:var(--pending);}
.badge-neutral{background:var(--gray-100);color:var(--text-muted);}

/* --- Avatar --- */
.avatar{
  border-radius:var(--r-full);background:var(--accent-light);color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;
  overflow:hidden;
}
.avatar-sm{width:32px;height:32px;font-size:var(--fs-sm);}
.avatar-md{width:44px;height:44px;font-size:var(--fs-md);}
.avatar-lg{width:64px;height:64px;font-size:var(--fs-xl);}
.avatar-xl{width:88px;height:88px;font-size:var(--fs-2xl);}
.avatar img{width:100%;height:100%;object-fit:cover;}

/* --- List item --- */
.list-item{
  display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  background:var(--surface);border-bottom:1px solid var(--border);cursor:pointer;transition:var(--transition);
}
.list-item:last-child{border-bottom:none;}
.list-item:hover{background:var(--gray-25);}
.list-item .li-body{flex:1;min-width:0;}
.list-item .li-title{font-weight:600;font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.list-item .li-subtitle{font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.list-item .li-chevron{color:var(--text-faint);font-size:18px;flex-shrink:0;}
.list-item .li-meta{text-align:right;flex-shrink:0;font-size:var(--fs-xs);color:var(--text-faint);}
.list{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;}

/* --- Table (desktop) --- */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);}
table.dtable{width:100%;border-collapse:collapse;font-size:var(--fs-base);min-width:640px;}
table.dtable th{
  text-align:left;padding:var(--sp-3) var(--sp-4);background:var(--gray-25);color:var(--text-muted);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
table.dtable td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);vertical-align:middle;}
table.dtable tr:last-child td{border-bottom:none;}
table.dtable tbody tr:hover{background:var(--gray-25);}
.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4);flex-wrap:wrap;}
.row-actions{display:flex;gap:var(--sp-2);justify-content:flex-end;}

/* --- Timeline --- */
.timeline{position:relative;padding-left:28px;}
.timeline::before{content:"";position:absolute;left:9px;top:4px;bottom:4px;width:2px;background:var(--border);}
.tl-item{position:relative;padding-bottom:var(--sp-6);}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute;left:-28px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--accent);}
.tl-date{font-size:var(--fs-xs);color:var(--text-faint);font-weight:700;text-transform:uppercase;margin-bottom:2px;}
.tl-title{font-weight:700;margin-bottom:2px;}
.tl-desc{font-size:var(--fs-sm);color:var(--text-muted);}
.tl-photo{margin-top:var(--sp-2);border-radius:var(--r-md);height:120px;object-fit:cover;width:100%;}

/* --- Progress bar / ring --- */
.progress-bar{height:8px;border-radius:var(--r-full);background:var(--gray-100);overflow:hidden;}
.progress-bar > span{display:block;height:100%;background:var(--accent);border-radius:var(--r-full);transition:width .4s ease;}
.progress-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:var(--fs-sm);}
.progress-ring{transform:rotate(-90deg);}
.progress-ring circle{fill:none;stroke-width:8;}
.progress-ring .ring-bg{stroke:var(--gray-100);}
.progress-ring .ring-fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .5s ease;}

/* --- Calendar grid (attendance) --- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-dow{text-align:center;font-size:var(--fs-xs);color:var(--text-faint);font-weight:700;padding-bottom:4px;}
.cal-cell{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:600;background:var(--gray-50);color:var(--text-muted);position:relative;
}
.cal-cell.present{background:var(--success-bg);color:var(--success);}
.cal-cell.absent{background:var(--danger-bg);color:var(--danger);}
.cal-cell.late{background:var(--warning-bg);color:var(--warning);}
.cal-cell.holiday{background:var(--gray-100);color:var(--text-faint);}
.cal-cell.empty{background:transparent;}
.cal-cell.today::after{content:"";position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--accent);}

/* --- Chart container --- */
.chart-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);}
.bar-chart{display:flex;align-items:flex-end;gap:var(--sp-3);height:180px;padding-top:var(--sp-4);}
.bar-chart .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.bar-chart .bar{width:100%;max-width:36px;border-radius:6px 6px 0 0;background:var(--accent);transition:height .5s ease;}
.bar-chart .bar-label{font-size:var(--fs-xs);color:var(--text-muted);}
.legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text-muted);}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;}

/* --- Forms --- */
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4);}
.form-field label{font-size:var(--fs-sm);font-weight:700;color:var(--text);}
.form-field .hint{font-size:var(--fs-xs);color:var(--text-faint);}
.input,.select,textarea.textarea{
  width:100%;padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--border);
  font-size:var(--fs-md);background:var(--surface);color:var(--text);font-family:inherit;
  transition:var(--transition);
}
.input:focus,.select:focus,textarea.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
textarea.textarea{resize:vertical;min-height:88px;}
.form-row{display:flex;gap:var(--sp-3);}
.form-row > .form-field{flex:1;}
.toggle-switch{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-switch .slider{
  position:absolute;inset:0;background:var(--gray-300);border-radius:var(--r-full);cursor:pointer;transition:var(--transition);
}
.toggle-switch .slider::before{
  content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;
  transition:var(--transition);box-shadow:var(--shadow-sm);
}
.toggle-switch input:checked + .slider{background:var(--accent);}
.toggle-switch input:checked + .slider::before{transform:translateX(18px);}

/* OTP input */
.otp-row{display:flex;gap:10px;justify-content:center;}
.otp-box{
  width:46px;height:56px;text-align:center;font-size:22px;font-weight:700;
  border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);
}
.otp-box:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}

/* File upload (mock) */
.file-upload{
  border:1.5px dashed var(--border);border-radius:var(--r-lg);padding:var(--sp-6);text-align:center;
  color:var(--text-muted);cursor:pointer;transition:var(--transition);
}
.file-upload:hover{border-color:var(--accent);background:var(--accent-light);}
.file-upload .fu-icon{font-size:26px;margin-bottom:var(--sp-2);}
.file-chip{
  display:inline-flex;align-items:center;gap:8px;background:var(--gray-50);border:1px solid var(--border);
  border-radius:var(--r-md);padding:8px 12px;font-size:var(--fs-sm);margin:4px 4px 0 0;
}

/* Filter bar / chips */
.filter-bar{display:flex;gap:var(--sp-2);overflow-x:auto;padding-bottom:2px;}
.chip{
  flex-shrink:0;padding:7px 14px;border-radius:var(--r-full);border:1px solid var(--border);
  font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);background:var(--surface);cursor:pointer;
  white-space:nowrap;transition:var(--transition);
}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-text);}
.search-box{
  display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:9px 14px;flex:1;
}
.search-box input{border:none;outline:none;background:transparent;font-size:var(--fs-base);width:100%;color:var(--text);}

/* Stepper (wizards) */
.stepper{display:flex;align-items:center;gap:6px;margin-bottom:var(--sp-6);}
.step{display:flex;align-items:center;gap:8px;flex:1;}
.step-dot{
  width:28px;height:28px;border-radius:50%;background:var(--gray-100);color:var(--text-faint);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:700;flex-shrink:0;
  transition:var(--transition);
}
.step.done .step-dot{background:var(--success);color:#fff;}
.step.active .step-dot{background:var(--accent);color:var(--accent-text);}
.step-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-faint);white-space:nowrap;}
.step.active .step-label,.step.done .step-label{color:var(--text);}
.step-line{flex:1;height:2px;background:var(--gray-100);}
.step.done + .step .step-line, .step-line.done{background:var(--success);}

/* Tabs */
.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--border);}
.tab{
  padding:10px 16px;font-size:var(--fs-md);font-weight:600;color:var(--text-muted);cursor:pointer;
  border-bottom:2px solid transparent;transition:var(--transition);white-space:nowrap;
}
.tab.active{color:var(--accent);border-color:var(--accent);}
.tabs.segmented{background:var(--gray-100);border:none;border-radius:var(--r-md);padding:3px;gap:0;}
.tabs.segmented .tab{flex:1;text-align:center;border-radius:var(--r-sm);border-bottom:none;padding:8px 10px;font-size:var(--fs-sm);}
.tabs.segmented .tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* --- Modal --- */
.overlay{
  position:fixed;inset:0;background:rgba(18,20,26,.5);display:none;align-items:center;justify-content:center;
  z-index:200;padding:var(--sp-4);
}
.overlay.open{display:flex;}
.modal{
  background:var(--surface);border-radius:var(--r-lg);max-width:420px;width:100%;max-height:86vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);animation:pop .18s ease;
}
@keyframes pop{from{transform:scale(.95);opacity:0;}to{transform:scale(1);opacity:1;}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5);border-bottom:1px solid var(--border);}
.modal-header h3{font-size:var(--fs-lg);}
.modal-body{padding:var(--sp-5);}
.modal-footer{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border);display:flex;gap:var(--sp-3);justify-content:flex-end;}
.modal-close{cursor:pointer;color:var(--text-faint);font-size:20px;background:none;border:none;line-height:1;}

/* --- Bottom sheet (mobile) --- */
.sheet-overlay{
  position:fixed;inset:0;background:rgba(18,20,26,.5);display:none;z-index:200;
}
.sheet-overlay.open{display:block;}
.bottom-sheet{
  position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-radius:20px 20px 0 0;
  max-height:88vh;overflow-y:auto;transform:translateY(100%);transition:transform .25s ease;
  box-shadow:var(--shadow-lg);z-index:201;padding-bottom:env(safe-area-inset-bottom);
}
.sheet-overlay.open .bottom-sheet{transform:translateY(0);}
.sheet-handle{width:36px;height:4px;background:var(--gray-200);border-radius:var(--r-full);margin:10px auto 0;}
.sheet-header{padding:var(--sp-4) var(--sp-5) var(--sp-2);}
.sheet-header h3{font-size:var(--fs-lg);}
.sheet-body{padding:0 var(--sp-5) var(--sp-6);}

/* --- Toast --- */
.toast-stack{position:fixed;bottom:calc(72px + env(safe-area-inset-bottom));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:300;pointer-events:none;}
.desktop-shell ~ .toast-stack,.dshell .toast-stack{bottom:24px;}
.toast{
  background:var(--gray-900);color:#fff;padding:12px 18px;border-radius:var(--r-md);font-size:var(--fs-sm);
  box-shadow:var(--shadow-lg);animation:toast-in .2s ease;max-width:90vw;display:flex;align-items:center;gap:8px;
}
.toast.success{background:var(--success);}
.toast.error{background:var(--danger);}
@keyframes toast-in{from{transform:translateY(10px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* --- Empty state --- */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sp-9) var(--sp-5);color:var(--text-muted);}
.empty-state .es-icon{font-size:40px;margin-bottom:var(--sp-3);opacity:.7;}
.empty-state .es-title{font-weight:700;color:var(--text);margin-bottom:4px;}
.empty-state .es-desc{font-size:var(--fs-sm);margin-bottom:var(--sp-4);max-width:280px;}

/* --- FAB --- */
.fab{
  position:fixed;right:var(--sp-5);bottom:calc(88px + env(safe-area-inset-bottom));width:54px;height:54px;
  border-radius:50%;background:var(--accent);color:var(--accent-text);border:none;font-size:24px;
  box-shadow:var(--shadow-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:90;
}

/* --- QR box (UPI) --- */
.qr-box{
  width:180px;height:180px;margin:0 auto;background:
    repeating-conic-gradient(var(--gray-800) 0% 25%, #fff 0% 50%) 0 0/16px 16px,
    #fff;
  border-radius:var(--r-md);border:1px solid var(--border);position:relative;
}
.qr-box::after{
  content:"";position:absolute;inset:38%;background:var(--surface);border-radius:4px;
}

/* --- Utility --- */
.flex{display:flex;} .flex-col{display:flex;flex-direction:column;}
.items-center{align-items:center;} .justify-between{justify-content:space-between;} .justify-center{justify-content:center;}
.gap-1{gap:var(--sp-1);} .gap-2{gap:var(--sp-2);} .gap-3{gap:var(--sp-3);} .gap-4{gap:var(--sp-4);}
.mt-1{margin-top:var(--sp-1);} .mt-2{margin-top:var(--sp-2);} .mt-3{margin-top:var(--sp-3);} .mt-4{margin-top:var(--sp-4);} .mt-6{margin-top:var(--sp-6);}
.mb-1{margin-bottom:var(--sp-1);} .mb-2{margin-bottom:var(--sp-2);} .mb-3{margin-bottom:var(--sp-3);} .mb-4{margin-bottom:var(--sp-4);}
.text-muted{color:var(--text-muted);} .text-faint{color:var(--text-faint);} .text-sm{font-size:var(--fs-sm);} .text-xs{font-size:var(--fs-xs);}
.font-bold{font-weight:700;} .font-semibold{font-weight:600;}
.w-full{width:100%;} .hidden{display:none !important;}
.section-title{font-size:var(--fs-md);font-weight:700;margin-bottom:var(--sp-3);}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3);}
.link-more{font-size:var(--fs-sm);font-weight:700;color:var(--accent);cursor:pointer;}

/* --- Language toggle --- */
.lang-toggle{display:inline-flex;background:var(--gray-100);border-radius:var(--r-full);padding:3px;gap:2px;}
.lang-toggle .lang-opt{padding:6px 14px;border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:700;color:var(--text-muted);cursor:pointer;}
.lang-toggle .lang-opt.active{background:var(--accent);color:var(--accent-text);}

/* --- Milestone badge strip --- */
.badge-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
.badge-chip{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;padding:12px 6px;
  border-radius:var(--r-lg);background:var(--accent-light);cursor:pointer;text-align:center;border:1px solid transparent;
  transition:var(--transition);
}
.badge-chip:hover{border-color:var(--accent);}
.badge-chip .bc-icon{font-size:26px;}
.badge-chip .bc-title{font-size:var(--fs-xs);font-weight:700;color:var(--accent-dark);line-height:1.2;}

/* --- Indicator chips (photo/voice/attachment/whatsapp) --- */
.indicator-chip{
  display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);
  background:var(--gray-100);border-radius:var(--r-full);padding:3px 9px;
}

/* --- Mic / voice-to-text button --- */
.mic-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;flex-shrink:0;color:var(--text-muted);
  transition:var(--transition);
}
.mic-btn.recording{background:var(--danger);border-color:var(--danger);color:#fff;animation:mic-pulse 1s infinite;}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35);}50%{box-shadow:0 0 0 8px rgba(220,38,38,.08);}}

/* --- Like / heart button --- */
.like-btn{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);
}
.like-btn.liked{color:#ff4d6d;}

/* --- Lightbox prev/next --- */
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.15);border:none;color:#fff;font-size:18px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;
}
.lightbox-nav.prev{left:12px;} .lightbox-nav.next{right:12px;}

/* --- Roster row (shared by attendance-style per-child quick actions) --- */
.roster-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.roster-row:last-child{border-bottom:none;}
.quick-status{display:flex;gap:6px;}
.quick-status .qs-btn{
  padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);
  font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);cursor:pointer;white-space:nowrap;
}
.quick-status .qs-btn.selected{background:var(--accent);border-color:var(--accent);color:var(--accent-text);}

/* --- Guest count stepper --- */
.qty-stepper{display:flex;align-items:center;gap:10px;}
.qty-stepper button{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface);font-weight:700;cursor:pointer;}
.qty-stepper .qty-val{min-width:24px;text-align:center;font-weight:700;}