/* ============================================================
   MOSTAQER — WAITING PROGRAMS CSS
   css/waiting-programs.css
   ============================================================ */

/* ══════════════════════════════════════════
   SETTINGS — Program Cards
══════════════════════════════════════════ */

.wp-settings { display: flex; flex-direction: column; gap: 0; }

.wp-empty {
  text-align: center; padding: 2rem; color: #aaa;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.wp-empty i { font-size: 2rem; color: #D1D5DB; }
.wp-empty p { font-size: .88rem; color: #666; margin: 0; }
.wp-empty span { font-size: .75rem; color: #aaa; }

.wp-program-card {
  border: 1px solid #EEE; border-radius: 10px; padding: .75rem 1rem;
  margin-bottom: .6rem; background: #FAFAFA; transition: all .15s;
}
.wp-program-card:hover { border-color: #DDD; background: #F5F5F5; }

.wp-program-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.wp-program-card-info { display: flex; align-items: center; gap: .6rem; }
.wp-program-card-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(245,158,11,.1); color: #F59E0B;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.wp-program-card-name { font-size: .88rem; font-weight: 700; color: #1A1A1A; margin: 0; }
.wp-program-card-meta { display: flex; gap: .75rem; font-size: .72rem; color: #888; margin-top: .15rem; }
.wp-program-card-meta i { margin-left: .2rem; }
.wp-program-card-actions { display: flex; align-items: center; gap: .4rem; }
.wp-program-card-goals {
  font-size: .75rem; color: #666; margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid #F0F0F0; line-height: 1.5;
}

.wp-status-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .5rem; border-radius: 6px; font-size: .68rem; font-weight: 600;
}
.wp-status-active { background: rgba(16,185,129,.08); color: #059669; }
.wp-status-inactive { background: rgba(156,163,175,.1); color: #6B7280; }

/* ══════════════════════════════════════════
   FORM OVERLAY
══════════════════════════════════════════ */

.wp-form-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 1rem; opacity: 0; transition: opacity .2s;
}
.wp-form-overlay.visible { opacity: 1; }

.wp-form-box {
  background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.2);
  transform: translateY(20px); transition: transform .2s;
}
.wp-form-overlay.visible .wp-form-box { transform: translateY(0); }

.wp-form-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid #F0F0F0;
}
.wp-form-header h3 { font-size: .95rem; font-weight: 700; margin: 0; color: #1A1A1A; }
.wp-form-header h3 i { color: #F59E0B; margin-left: .4rem; }

.wp-form-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; }

.wp-form-row { display: flex; flex-direction: column; gap: .3rem; }
.wp-form-row label { font-size: .78rem; font-weight: 600; color: #555; }
.wp-form-row input,
.wp-form-row textarea,
.wp-form-row select {
  padding: .5rem .75rem; border: 1px solid #DDD; border-radius: 8px;
  font-family: inherit; font-size: .82rem; color: #333;
  background: #FAFAFA; transition: border-color .15s;
}
.wp-form-row input:focus,
.wp-form-row textarea:focus,
.wp-form-row select:focus {
  outline: none; border-color: #F59E0B; background: #fff;
}
.wp-form-row textarea { resize: vertical; min-height: 60px; }

/* ── Tools Table ── */
.wp-tools-section {
  border: 1px solid #E5E7EB; border-radius: 10px; background: #FAFAFA; overflow: hidden;
}
.wp-tools-table-wrap { overflow-x: auto; }
.wp-tools-table {
  width: 100%; border-collapse: collapse; font-size: .78rem;
}
.wp-tools-table thead th {
  background: #F3F4F6; padding: .45rem .5rem; font-weight: 600; color: #555;
  text-align: right; border-bottom: 1px solid #E5E7EB; white-space: nowrap; font-size: .72rem;
}
.wp-tools-table tbody tr { border-bottom: 1px solid #F0F0F0; transition: background .15s; }
.wp-tools-table tbody tr:last-child { border-bottom: none; }
.wp-tools-table tbody tr:hover { background: #FFF9EB; }
.wp-tools-table td { padding: .3rem .25rem; vertical-align: middle; }

.wp-tool-input {
  width: 100%; padding: .35rem .5rem; border: 1px solid transparent; border-radius: 6px;
  font-family: inherit; font-size: .78rem; color: #333; background: transparent;
  transition: border-color .15s, background .15s;
}
.wp-tool-input:focus {
  outline: none; border-color: #F59E0B; background: #fff;
}
.wp-tool-input::placeholder { color: #BBB; font-size: .72rem; }
.wp-tool-num { text-align: center; }

.wp-tool-del {
  background: none; border: none; cursor: pointer; color: #CCC; padding: .25rem;
  border-radius: 4px; transition: color .15s, background .15s; font-size: .75rem;
}
.wp-tool-del:hover { color: #EF4444; background: #FEE2E2; }

.wp-tools-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .75rem; border-top: 1px solid #E5E7EB; gap: .5rem; flex-wrap: wrap;
}
.wp-tools-add-btn {
  background: none; border: 1px dashed #D1D5DB; border-radius: 6px;
  padding: .3rem .75rem; font-size: .75rem; font-family: inherit; color: #6B7280;
  cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: .3rem;
}
.wp-tools-add-btn:hover { border-color: #F59E0B; color: #D97706; background: #FFFBEB; }
.wp-tools-add-btn i { font-size: .65rem; }

.wp-tools-total {
  font-size: .75rem; color: #059669; font-weight: 600;
  display: inline-flex; align-items: center; gap: .3rem;
}
.wp-tools-total i { font-size: .7rem; }

@media (max-width: 480px) {
  .wp-tools-table thead th { font-size: .65rem; padding: .35rem .25rem; }
  .wp-tool-input { font-size: .72rem; padding: .3rem .35rem; }
}

.wp-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }

.wp-form-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  padding: .75rem 1.25rem; border-top: 1px solid #F0F0F0;
}

.wp-spec-grid {
  display: flex; flex-wrap: wrap; gap: .4rem; padding: .4rem;
  background: #FAFAFA; border: 1px solid #EEE; border-radius: 8px;
}
.wp-spec-check {
  display: flex; align-items: center; gap: .3rem;
  padding: .3rem .5rem; border-radius: 6px; font-size: .78rem;
  cursor: pointer; transition: background .15s;
}
.wp-spec-check:hover { background: #F0F0F0; }
.wp-spec-check input { accent-color: #F59E0B; }

/* ══════════════════════════════════════════
   WEEKLY SCHEDULE GRID
══════════════════════════════════════════ */

.wp-schedule-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: .6rem; min-height: 400px;
}

.wp-day-column {
  border: 1px solid #EEE; border-radius: 12px;
  background: #FAFAFA; overflow: hidden;
}
.wp-day-today { border-color: #F59E0B; background: rgba(245,158,11,.02); }

.wp-day-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .6rem; background: #fff; border-bottom: 1px solid #EEE;
  border-top: 3px solid #DDD;
}
.wp-day-today .wp-day-header { border-top-color: #F59E0B; }

.wp-day-name { font-size: .82rem; font-weight: 700; color: #333; }
.wp-today-badge {
  font-size: .62rem; font-weight: 700; padding: .1rem .35rem;
  background: #F59E0B; color: #fff; border-radius: 4px;
}

.wp-day-add {
  width: 24px; height: 24px; border: 1px dashed #CCC; border-radius: 6px;
  background: transparent; color: #AAA; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .65rem;
  transition: all .15s;
}
.wp-day-add:hover { border-color: #F59E0B; color: #F59E0B; background: rgba(245,158,11,.05); }

.wp-day-slots { padding: .4rem; display: flex; flex-direction: column; gap: .4rem; min-height: 100px; }

.wp-slot-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem .5rem; color: #CCC; font-size: .72rem; gap: .3rem;
}
.wp-slot-empty i { font-size: 1.2rem; }

.wp-slot-card {
  border: 1px solid #E8E8E8; border-radius: 8px; padding: .5rem .6rem;
  background: #fff; border-right: 3px solid #DDD; transition: all .15s;
}
.wp-slot-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.wp-slot-inactive { opacity: .5; }

.wp-slot-program { font-size: .78rem; font-weight: 700; color: #333; margin-bottom: .2rem; }
.wp-slot-program i { color: #F59E0B; margin-left: .25rem; font-size: .7rem; }

.wp-slot-time { font-size: .7rem; color: #888; direction: ltr; text-align: right; }
.wp-slot-time i { color: #4F46E5; margin-left: .2rem; }

.wp-slot-specs { font-size: .68rem; color: #666; margin-top: .2rem; }
.wp-slot-specs i { color: #10B981; margin-left: .2rem; }

.wp-slot-notes { font-size: .65rem; color: #AAA; margin-top: .2rem; font-style: italic; }
.wp-slot-notes i { margin-left: .2rem; }

.wp-slot-actions {
  display: flex; gap: .3rem; margin-top: .3rem; padding-top: .3rem; border-top: 1px solid #F0F0F0;
}
.wp-slot-actions button {
  width: 24px; height: 24px; border: 1px solid #EEE; border-radius: 6px;
  background: #F8F8F8; color: #888; cursor: pointer; font-size: .6rem;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.wp-slot-actions button:hover { background: #EEE; }

/* ══════════════════════════════════════════
   TODAY'S PROGRAM PAGE
══════════════════════════════════════════ */

.wp-today-info {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 1rem; background: linear-gradient(135deg, rgba(245,158,11,.05), rgba(245,158,11,.02));
  border: 1px solid rgba(245,158,11,.15); border-radius: 12px; margin-bottom: .75rem;
}
.wp-today-info-right { display: flex; align-items: flex-start; gap: .75rem; }
.wp-today-info-left { display: flex; align-items: center; gap: .5rem; }

.wp-today-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(245,158,11,.12); color: #F59E0B;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.wp-today-program-name { font-size: 1.05rem; font-weight: 800; color: #1A1A1A; margin: 0; }
.wp-today-meta {
  display: flex; gap: .75rem; flex-wrap: wrap; font-size: .75rem; color: #666; margin-top: .3rem;
}
.wp-today-meta i { margin-left: .2rem; color: #999; }
.wp-today-goals { font-size: .75rem; color: #666; margin-top: .4rem; line-height: 1.5; }

.wp-session-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .6rem; border-radius: 8px; font-size: .72rem; font-weight: 600;
}
.wp-session-open { background: rgba(16,185,129,.08); color: #059669; }
.wp-session-closed { background: rgba(107,114,128,.08); color: #6B7280; }

.wp-session-controls {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem 0; margin-bottom: .5rem;
}

/* ══════════════════════════════════════════
   ATTENDANCE STATS STRIP
══════════════════════════════════════════ */

.wp-attend-stats {
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
  font-size: .75rem; color: #888; padding: .35rem 0;
}
.wp-stat-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .55rem; border-radius: 6px; background: #F8F8F8;
  border: 1px solid #EEE; font-weight: 600; color: #555;
}
.wp-stat-val { font-weight: 800; }
.wp-stat-present { border-color: rgba(16,185,129,.2); }
.wp-stat-present .wp-stat-val { color: #059669; }
.wp-stat-left { border-color: rgba(79,70,229,.2); }
.wp-stat-left .wp-stat-val { color: #4F46E5; }
.wp-stat-absent { border-color: rgba(239,68,68,.15); }
.wp-stat-absent .wp-stat-val { color: #DC2626; }
.wp-stat-sep { color: #DDD; margin: 0 .1rem; }

/* ══════════════════════════════════════════
   CHILDREN LIST / ATTENDANCE
══════════════════════════════════════════ */

.wp-children-list { margin-top: .25rem; }

.wp-list-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .4rem 0; font-size: .8rem; font-weight: 700; color: #555;
  margin-bottom: .35rem;
}
.wp-list-header i { margin-left: .3rem; color: #F59E0B; }

.wp-child-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .6rem .75rem; border: 1px solid #EEE;
  border-radius: 10px; margin-bottom: .4rem; background: #fff;
  transition: all .15s; flex-wrap: wrap;
}
.wp-child-row:hover { border-color: #DDD; background: #FAFAFA; }
.wp-child-present { border-right: 3px solid #10B981; }
.wp-child-left { border-right: 3px solid #4F46E5; opacity: .7; }
.wp-child-preview { border-right: 3px solid #F59E0B; }

.wp-child-info { display: flex; align-items: center; gap: .6rem; }

.wp-child-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: #F0F0F0; color: #999;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; flex-shrink: 0;
}
.wp-avatar-present { background: rgba(16,185,129,.1); color: #10B981; }
.wp-avatar-left { background: rgba(79,70,229,.08); color: #4F46E5; }

.wp-child-name { font-size: .82rem; font-weight: 700; color: #1A1A1A; }
.wp-child-meta { display: flex; gap: .6rem; font-size: .68rem; color: #888; margin-top: .1rem; }
.wp-child-meta i { margin-left: .15rem; }

.wp-child-actions { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

.wp-attend-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .2rem .5rem; border-radius: 6px; font-size: .68rem; font-weight: 600;
}
.wp-attend-present { background: rgba(16,185,129,.08); color: #059669; }
.wp-attend-left { background: rgba(79,70,229,.06); color: #4F46E5; }
.wp-attend-absent { background: rgba(156,163,175,.08); color: #6B7280; }

.wp-att-btn {
  width: 30px; height: 30px; border: 1px solid #E8E8E8; border-radius: 8px;
  background: #F8F8F8; color: #888; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; transition: all .15s;
}
.wp-att-btn:hover { background: #EEE; }
.wp-att-arrive { border-color: rgba(16,185,129,.3); color: #10B981; }
.wp-att-arrive:hover { background: rgba(16,185,129,.1); }
.wp-att-leave { border-color: rgba(79,70,229,.2); color: #4F46E5; }
.wp-att-leave:hover { background: rgba(79,70,229,.06); }
.wp-att-wa { border-color: rgba(37,211,102,.3); color: #25D366; }
.wp-att-wa:hover { background: rgba(37,211,102,.08); }
.wp-att-feedback { border-color: rgba(245,158,11,.3); color: #F59E0B; }
.wp-att-feedback:hover { background: rgba(245,158,11,.08); }
.wp-att-wa-sent { opacity: .5; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .wp-schedule-grid {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .wp-day-column { min-height: auto; }
  .wp-day-slots { min-height: 0; }
}

@media (max-width: 600px) {
  .wp-form-grid-2 { grid-template-columns: 1fr; }
  .wp-today-info { flex-direction: column; }
  .wp-child-row { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .wp-child-actions { width: 100%; justify-content: flex-end; }
}