/* ============================================================
   OT Room admin dashboard + patient room styles.
   Extends styles.css — reuses the same CSS variables/palette.
   ============================================================ */

/* ---- Admin: room list ---- */
.rooms-heading{font-family:var(--ff-head);font-size:1.3rem;color:var(--teal-deep);font-weight:600;margin-bottom:1rem;}
.rooms-list{display:flex;flex-direction:column;gap:1rem;}
.room-card{background:var(--white);border:1px solid var(--border);border-left:5px solid var(--teal);border-radius:20px;padding:1.4rem 1.6rem;box-shadow:var(--shadow);}
.room-card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:0.9rem;}
.room-card-head h4{font-family:var(--ff-head);font-size:1.1rem;color:var(--teal-deep);font-weight:600;}
.room-copy-btn{background:var(--teal-light);color:var(--teal-dark);border:none;padding:0.4rem 0.9rem;border-radius:50px;font-family:var(--ff-body);font-size:0.78rem;font-weight:700;cursor:pointer;white-space:nowrap;}
.room-copy-btn:hover{background:var(--teal);color:var(--white);}
.room-card-actions{display:flex;align-items:center;gap:0.8rem;margin-top:0.9rem;flex-wrap:wrap;}
.room-card-actions .btn-p,.room-card-actions .btn-o{padding:0.55rem 1.2rem;font-size:0.82rem;}
.room-save-status{font-size:0.82rem;color:var(--moss);font-weight:700;}

/* ---- Patient room page ---- */
.ot-room-wrap{max-width:1000px;margin:0 auto;padding:2rem 2rem 4rem;}
.ot-room-header{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.75rem;}
.ot-room-title{font-family:var(--ff-head);font-size:1.7rem;color:var(--teal-deep);font-weight:600;}
.ot-room-title em{font-style:normal;color:var(--coral);}
.join-btn{background:var(--rainbow);color:var(--white);border:none;padding:0.9rem 1.9rem;border-radius:50px;font-family:var(--ff-body);font-size:0.98rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow-lg);transition:transform 0.2s;}
.join-btn:hover{transform:translateY(-2px);}
.join-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
.join-hint{font-size:0.8rem;color:var(--text-muted);margin-top:0.4rem;}

.tool-section{background:var(--white);border:1px solid var(--border);border-radius:26px;padding:1.6rem 1.8rem 2rem;box-shadow:var(--shadow);margin-bottom:2rem;}
.tool-section h2{font-family:var(--ff-head);font-size:1.25rem;color:var(--teal-deep);font-weight:600;margin-bottom:0.3rem;}
.tool-section p.tool-sub{font-size:0.86rem;color:var(--text-muted);margin-bottom:1.1rem;}

.sticker-tray{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.1rem;padding:0.9rem;background:var(--parchment);border-radius:18px;border:1px dashed var(--border);}
.sticker-tray-item{font-size:1.7rem;line-height:1;background:var(--white);border:1px solid var(--border);border-radius:14px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.15s;user-select:none;box-shadow:var(--shadow);}
.sticker-tray-item:hover{transform:translateY(-2px) scale(1.06);}
.sticker-tray-item:active{transform:scale(0.94);}

.sticker-board{position:relative;width:100%;height:min(60vh,480px);background:linear-gradient(160deg,var(--teal-light) 0%,var(--sky-light) 100%);border-radius:22px;border:2px solid var(--border);overflow:hidden;touch-action:none;}
.placed-sticker{position:absolute;font-size:2.4rem;line-height:1;cursor:grab;user-select:none;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 6px rgba(12,90,80,0.25));}
.placed-sticker:active{cursor:grabbing;}
.sticker-remove{position:absolute;top:-8px;right:-10px;width:20px;height:20px;border-radius:50%;background:var(--coral);color:var(--white);font-size:0.7rem;line-height:20px;text-align:center;font-weight:700;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity 0.15s;}
.placed-sticker.selected .sticker-remove{opacity:1;pointer-events:auto;}
.board-empty-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--teal-dark);font-size:0.92rem;font-weight:600;padding:0 2rem;pointer-events:none;opacity:0.7;}

.room-status-msg{text-align:center;padding:4rem 2rem;font-size:1.02rem;color:var(--text-muted);}
.room-status-msg.error{color:#C2452B;}

/* ---- Parent explainer strip ---- */
.room-page{overscroll-behavior:contain;}
.parent-strip{display:flex;align-items:flex-start;gap:0.8rem;background:var(--gold-light);border:1px solid var(--border);border-radius:16px;padding:0.8rem 1.1rem;margin-bottom:1.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.55;}
.parent-strip strong{color:var(--text);}
.parent-strip button{margin-left:auto;background:none;border:none;font-size:1.3rem;line-height:1;color:var(--text-muted);cursor:pointer;padding:0 0.2rem;flex-shrink:0;}
.parent-strip button:hover{color:var(--text);}

/* ---- Tool tabs ---- */
.tool-tabs{display:flex;gap:0.5rem;margin-bottom:1.25rem;flex-wrap:wrap;}
.tool-tab{font-family:var(--ff-body);font-size:0.95rem;font-weight:700;color:var(--teal-dark);background:var(--white);border:2px solid var(--teal-light);border-radius:50px;padding:0.6rem 1.3rem;cursor:pointer;transition:all 0.15s;}
.tool-tab:hover{background:var(--teal-light);}
.tool-tab.active{background:var(--teal);border-color:var(--teal);color:var(--white);box-shadow:0 4px 12px rgba(31,185,168,0.3);}

/* ---- Drawing board ---- */
.draw-toolbar{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;margin-bottom:1rem;padding:0.7rem 0.9rem;background:var(--parchment);border-radius:16px;border:1px dashed var(--border);}
.draw-swatches{display:flex;gap:0.45rem;flex-wrap:wrap;}
.draw-swatch{width:34px;height:34px;border-radius:50%;border:3px solid var(--white);cursor:pointer;box-shadow:var(--shadow);transition:transform 0.12s;}
.draw-swatch:hover{transform:scale(1.12);}
.draw-swatch.active{outline:3px solid var(--teal);outline-offset:2px;}
.draw-tool-btn{font-family:var(--ff-body);font-size:0.82rem;font-weight:700;color:var(--teal-dark);background:var(--white);border:2px solid var(--border);border-radius:50px;padding:0.45rem 0.95rem;cursor:pointer;transition:all 0.15s;}
.draw-tool-btn:hover{border-color:var(--teal);}
.draw-tool-btn.active{background:var(--teal);border-color:var(--teal);color:var(--white);}
.draw-canvas{display:block;width:100%;border-radius:18px;border:2px solid var(--border);background:var(--white);touch-action:none;cursor:crosshair;box-shadow:var(--shadow);}

/* ---- Feelings check-in ---- */
.feelings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:0.8rem;}
.feeling-btn{display:flex;flex-direction:column;align-items:center;gap:0.35rem;background:var(--white);border:2px solid var(--border);border-radius:20px;padding:1rem 0.5rem;cursor:pointer;transition:all 0.15s;font-family:var(--ff-body);}
.feeling-btn:hover{transform:translateY(-3px);border-color:var(--teal);}
.feeling-btn.selected{border-color:var(--teal);background:var(--teal-light);box-shadow:0 6px 16px rgba(31,185,168,0.25);}
.feeling-emoji{font-size:2.4rem;line-height:1;}
.feeling-label{font-size:0.85rem;font-weight:700;color:var(--teal-deep);}
.feelings-msg{margin-top:1rem;font-size:0.95rem;font-weight:700;color:var(--moss);min-height:1.4em;}

/* ---- Family portal ---- */
.family-actions{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-bottom:2rem;}
.family-action-card{background:var(--white);border:1px solid var(--border);border-top:5px solid var(--teal);border-radius:22px;padding:1.5rem 1.7rem;box-shadow:var(--shadow);}
.family-action-card:nth-child(2){border-top-color:var(--coral);}
.family-action-card h3{font-family:var(--ff-head);font-size:1.18rem;color:var(--teal-deep);font-weight:600;margin-bottom:0.4rem;}
.family-action-card p{font-size:0.87rem;color:var(--text-muted);line-height:1.6;margin-bottom:0.9rem;}
.family-action-card .btn-p,.family-action-card .btn-o{padding:0.7rem 1.5rem;font-size:0.88rem;}
.family-action-card .btn-p:disabled{opacity:0.5;cursor:not-allowed;transform:none;}

.list-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--parchment);border:1px solid var(--border);border-radius:14px;padding:0.75rem 1rem;margin-bottom:0.6rem;text-decoration:none;}
.list-row-main{min-width:0;}
.list-row-main strong{display:block;font-size:0.92rem;color:var(--teal-deep);font-weight:700;}
.list-row-main small{display:block;font-size:0.76rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px;}
.list-row-side{display:flex;align-items:center;gap:0.6rem;flex-shrink:0;font-size:0.85rem;color:var(--teal-dark);font-weight:700;}
.status-chip{font-size:0.72rem;font-weight:700;padding:0.25rem 0.75rem;border-radius:50px;}
.chip-paid{background:var(--moss-light);color:var(--moss);}
.chip-due{background:var(--coral-light);color:#C2452B;}
.list-mini-btn{padding:0.35rem 0.8rem;font-size:0.76rem;}
.pay-btn{padding:0.5rem 1.1rem;font-size:0.8rem;}

/* ---- Admin: per-room sub-panels ---- */
.room-sub{margin-top:0.9rem;border:1px dashed var(--border);border-radius:14px;padding:0.6rem 0.9rem;background:var(--parchment);}
.room-sub summary{font-size:0.86rem;font-weight:700;color:var(--teal-dark);cursor:pointer;list-style:none;}
.room-sub summary::-webkit-details-marker{display:none;}
.room-sub[open] summary{margin-bottom:0.75rem;}
.room-sub .sub-list .list-row{background:var(--white);}
.sub-add{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.6rem;}
.sub-add input{flex:1 1 180px;padding:0.55rem 0.8rem;border:2px solid var(--border);border-radius:10px;font-family:var(--ff-body);font-size:0.84rem;outline:none;}
.sub-add input:focus{border-color:var(--teal);}
.sub-add .btn-o{padding:0.5rem 1.1rem;font-size:0.8rem;}

/* ---- Touch devices: bigger targets ---- */
@media(pointer:coarse){
  .sticker-tray-item{width:62px;height:62px;font-size:2rem;}
  .draw-swatch{width:42px;height:42px;}
  .tool-tab{padding:0.75rem 1.5rem;}
}

@media(max-width:820px){
  .ot-room-header{flex-direction:column;align-items:flex-start;}
  .family-actions{grid-template-columns:1fr;}
  .list-row-main small{max-width:200px;}
}