/* ═══════════════════════════════════════════════════════════════
   RCM Pro  ·  app.css  ·  Mobile-first, Android-optimized
   ═══════════════════════════════════════════════════════════════ */

:root {
  --p:    #2563eb;   /* primary */
  --pd:   #1d4ed8;   /* primary dark */
  --s:    #16a34a;   /* success */
  --d:    #dc2626;   /* danger */
  --w:    #d97706;   /* warning */
  --bg:   #f0f4ff;
  --card: #ffffff;
  --bdr:  #e2e8f0;
  --txt:  #1e293b;
  --mut:  #64748b;
  --rad:  14px;
  --shd:  0 2px 12px rgba(37,99,235,.10);
  --h:    56px;  /* tap target height */
  --tr:   .18s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
     color:var(--txt);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--p);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
select,input,textarea{font-family:inherit;font-size:1rem}

/* ── Wrap ─────────────────────────────────────────────────────── */
.rcmp-wrap{max-width:620px;margin:0 auto;min-height:100vh;padding-bottom:80px}

/* ── Offline ──────────────────────────────────────────────────── */
.rcmp-offline-bar{
  position:sticky;top:0;z-index:1100;
  background:var(--d);color:#fff;
  text-align:center;padding:10px 16px;
  font-weight:600;font-size:.9rem
}

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════════ */
.rcmp-login-card{
  max-width:420px;margin:40px auto 24px;
  background:var(--card);border-radius:var(--rad);
  box-shadow:var(--shd);padding:32px 24px;
}
.rcmp-login-logo{font-size:3.5rem;text-align:center;margin-bottom:10px}
.rcmp-login-title{font-size:1.5rem;font-weight:800;text-align:center;margin-bottom:4px}
.rcmp-login-sub{text-align:center;color:var(--mut);margin-bottom:24px;font-size:.9rem}

/* Role tabs */
.rcmp-login-tabs{display:flex;border-radius:10px;overflow:hidden;border:2px solid var(--bdr);margin-bottom:20px}
.rcmp-ltab{flex:1;height:44px;border:none;background:transparent;font-weight:700;font-size:.9rem;
           color:var(--mut);transition:var(--tr)}
.rcmp-ltab.rcmp-ltab-active{background:var(--p);color:#fff}

/* Sub-tabs */
.rcmp-subtabs{display:flex;gap:6px;margin-bottom:16px}
.rcmp-stab{flex:1;height:38px;border:2px solid var(--bdr);border-radius:8px;
           background:transparent;font-weight:600;font-size:.85rem;color:var(--mut);transition:var(--tr)}
.rcmp-stab.rcmp-stab-active{border-color:var(--p);color:var(--p);background:#eff6ff}
.rcmp-subpanel{animation:rcmp-in .2s ease}
.rcmp-hint{font-size:.85rem;color:var(--mut);margin-bottom:14px}
.rcmp-muted-link{text-align:center;font-size:.82rem;color:var(--mut);margin-top:14px}

/* Checkbox region list */
.rcmp-checkbox-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.rcmp-checkbox-list label{
  display:flex;align-items:center;gap:6px;padding:6px 12px;
  border:2px solid var(--bdr);border-radius:999px;font-size:.85rem;cursor:pointer;transition:var(--tr)
}
.rcmp-checkbox-list label:has(input:checked){border-color:var(--p);background:#eff6ff;color:var(--p)}

/* ══════════════════════════════════════════════════════════════
   APP HEADER
   ══════════════════════════════════════════════════════════════ */
.rcmp-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--p);color:#fff;
  position:sticky;top:0;z-index:999;box-shadow:0 2px 10px rgba(0,0,0,.15)
}
.rcmp-header-l{display:flex;align-items:center;gap:10px}
.rcmp-header-r{display:flex;align-items:center;gap:8px}
.rcmp-header-icon{font-size:1.6rem}
.rcmp-header-title{font-size:1rem;font-weight:800}
.rcmp-hdr-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6)}
.rcmp-user-badge{background:rgba(255,255,255,.2);border-radius:999px;padding:4px 12px;font-size:.78rem;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══════════════════════════════════════════════════════════════
   TAB BAR
   ══════════════════════════════════════════════════════════════ */
.rcmp-tabbar{
  display:flex;background:#fff;border-bottom:2px solid var(--bdr);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.rcmp-tabbar::-webkit-scrollbar{display:none}
.rcmp-tab{
  flex:1 0 auto;min-width:72px;height:var(--h);border:none;background:transparent;
  font-size:.78rem;font-weight:700;color:var(--mut);
  border-bottom:3px solid transparent;transition:var(--tr);white-space:nowrap;padding:0 6px;
}
.rcmp-tab.rcmp-tab-on{color:var(--p);border-bottom-color:var(--p)}

/* ══════════════════════════════════════════════════════════════
   TAB CONTENT
   ══════════════════════════════════════════════════════════════ */
.rcmp-tabcontent{animation:rcmp-in .25s ease}

/* ══════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════════════════════════════════════ */
.rcmp-field{margin-bottom:14px}
.rcmp-field label{display:block;font-size:.82rem;font-weight:700;margin-bottom:5px;color:var(--mut)}
.rcmp-field input,
.rcmp-field select,
.rcmp-field textarea,
.rcmp-input,
.rcmp-select{
  width:100%;height:var(--h);padding:0 14px;
  border:2px solid var(--bdr);border-radius:10px;
  color:var(--txt);background:#fff;
  transition:border-color var(--tr);
  -webkit-appearance:none;appearance:none;
}
.rcmp-field input[type="file"]{height:auto;padding:12px 14px}
.rcmp-field input:focus,
.rcmp-field select:focus,
.rcmp-input:focus,
.rcmp-select:focus{
  border-color:var(--p);outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
.rcmp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--h);padding:0 24px;
  border:2px solid transparent;border-radius:12px;
  font-size:1rem;font-weight:700;
  transition:var(--tr);-webkit-tap-highlight-color:transparent;white-space:nowrap;
}
.rcmp-btn:active{transform:scale(.97)}
.rcmp-btn-primary{background:var(--p);color:#fff;border-color:var(--p)}
.rcmp-btn-primary:hover{background:var(--pd)}
.rcmp-btn-success{background:var(--s);color:#fff}
.rcmp-btn-danger{background:var(--d);color:#fff}
.rcmp-btn-outline{background:transparent;color:var(--p);border-color:var(--p)}
.rcmp-btn-sm{height:40px;padding:0 14px;font-size:.82rem;border-radius:8px}
.rcmp-btn-full{width:100%}
.rcmp-sticky-book{position:sticky;bottom:12px;box-shadow:0 4px 16px rgba(37,99,235,.3)}

/* Back button */
.rcmp-back{background:none;border:none;color:var(--p);font-size:.9rem;font-weight:700;
           padding:10px 16px;display:inline-flex;align-items:center;gap:4px}

/* ══════════════════════════════════════════════════════════════
   MESSAGES
   ══════════════════════════════════════════════════════════════ */
.rcmp-msg{padding:12px 16px;border-radius:10px;margin:10px 0;font-weight:600;font-size:.88rem}
.rcmp-msg-ok{background:#d1fae5;color:#065f46}
.rcmp-msg-err{background:#fee2e2;color:#991b1b}
.rcmp-msg-info{background:#dbeafe;color:#1e40af}

/* ══════════════════════════════════════════════════════════════
   HEALTH TIP
   ══════════════════════════════════════════════════════════════ */
.rcmp-tip-wrap{padding:16px 16px 0}
.rcmp-tip{
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;border-radius:var(--rad);
  padding:16px 18px;font-size:.9rem;font-weight:500;
  transition:opacity .3s ease;
}

/* ══════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════ */
.rcmp-section{padding:14px 16px 0}
.rcmp-sec-title{font-size:.95rem;font-weight:800;margin-bottom:10px;padding:0 16px;margin-top:14px}

/* ══════════════════════════════════════════════════════════════
   COMPOUNDER CARDS
   ══════════════════════════════════════════════════════════════ */
.rcmp-card-list{padding:0 16px}

.rcmp-comp-card{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border-radius:var(--rad);
  box-shadow:var(--shd);padding:14px 16px;
  margin-bottom:10px;cursor:pointer;
  border:2px solid transparent;
  transition:box-shadow var(--tr),transform var(--tr),border-color var(--tr);
  animation:rcmp-in .25s ease;
}
.rcmp-comp-card:hover{box-shadow:0 4px 20px rgba(37,99,235,.18);transform:translateY(-1px)}
.rcmp-comp-card.selected{border-color:var(--p)}

.rcmp-avatar{
  width:62px;height:62px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:#e0e7ff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;
}
.rcmp-avatar img{width:100%;height:100%;object-fit:cover}

.rcmp-comp-info{flex:1;min-width:0}
.rcmp-comp-name{font-size:.95rem;font-weight:800;color:var(--txt)}
.rcmp-comp-phone{font-size:.82rem;color:var(--mut);margin-top:1px}
.rcmp-comp-region{font-size:.78rem;color:var(--mut);margin-top:1px}

.rcmp-comp-actions{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}

/* Availability badge */
.rcmp-avail{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:800;margin-top:4px}
.avail-on{background:#d1fae5;color:#065f46}
.avail-off{background:#fee2e2;color:#991b1b}

/* Call btn */
.rcmp-call{
  width:40px;height:40px;border-radius:50%;background:var(--s);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  text-decoration:none;transition:var(--tr);flex-shrink:0;
}
.rcmp-call:hover{background:#15803d;text-decoration:none}

/* Fav btn */
.rcmp-fav{
  width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
  cursor:pointer;transition:var(--tr);
}
.rcmp-fav.faved{background:#fef3c7;border-color:#f59e0b}

/* ══════════════════════════════════════════════════════════════
   SLOTS
   ══════════════════════════════════════════════════════════════ */
.rcmp-slot-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px;margin-top:8px;
}
@media(min-width:400px){.rcmp-slot-grid{grid-template-columns:repeat(3,1fr)}}

.rcmp-slot{
  background:var(--card);border:2px solid var(--bdr);
  border-radius:10px;padding:12px 8px;text-align:center;
  cursor:pointer;transition:var(--tr);font-size:.85rem;
}
.rcmp-slot.open{border-color:#86efac}
.rcmp-slot.open:hover{background:#f0fdf4;border-color:var(--s)}
.rcmp-slot.booked{background:#f8fafc;color:var(--mut);cursor:not-allowed;opacity:.65}
.rcmp-slot.sel{background:var(--p);color:#fff;border-color:var(--p)}
.slot-time{font-weight:800}
.slot-date{font-size:.72rem;opacity:.8;margin-top:1px}
.slot-status{font-size:.7rem;margin-top:2px}

/* Comp preview bar (step 2) */
.rcmp-comp-preview-bar{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border-radius:var(--rad);
  padding:12px 16px;margin:0 16px 14px;box-shadow:var(--shd);
}

/* ══════════════════════════════════════════════════════════════
   CONFIRM BOX
   ══════════════════════════════════════════════════════════════ */
.rcmp-confirm-box{
  background:var(--bg);border-radius:10px;padding:14px 16px;
  margin:0 16px 14px;font-size:.88rem;line-height:2;
}
.rcmp-confirm-box strong{display:inline-block;min-width:130px;color:var(--mut)}

/* ══════════════════════════════════════════════════════════════
   REASON CHIPS
   ══════════════════════════════════════════════════════════════ */
.rcmp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;padding:0 16px}
.rcmp-chip{
  padding:10px 16px;border:2px solid var(--bdr);border-radius:999px;
  background:#fff;font-size:.86rem;font-weight:700;transition:var(--tr);
}
.rcmp-chip.sel,.rcmp-chip:hover{background:var(--p);color:#fff;border-color:var(--p)}
.rcmp-input{display:block;margin:0 16px;width:calc(100% - 32px)}

/* ══════════════════════════════════════════════════════════════
   BOOKING CARDS (History / Compounder)
   ══════════════════════════════════════════════════════════════ */
.rcmp-booking{
  background:var(--card);border-radius:var(--rad);
  box-shadow:var(--shd);padding:14px 16px;
  margin:0 16px 10px;animation:rcmp-in .25s ease;
}
.rcmp-booking-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.rcmp-booking-comp{display:flex;align-items:center;gap:10px}
.rcmp-booking-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#e0e7ff;flex-shrink:0}
.rcmp-booking-name{font-weight:800;font-size:.9rem}
.rcmp-booking-time{font-size:.78rem;color:var(--mut);margin-top:1px}
.rcmp-booking-detail{font-size:.82rem;color:var(--mut);margin-bottom:8px}
.rcmp-booking-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* Status badges */
.rcmp-sbadge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:800}
.sb-pending{background:#fef3c7;color:#92400e}
.sb-confirmed{background:#dbeafe;color:#1e40af}
.sb-completed{background:#d1fae5;color:#065f46}
.sb-cancelled{background:#fee2e2;color:#991b1b}

/* ══════════════════════════════════════════════════════════════
   SLOT MANAGEMENT (Compounder)
   ══════════════════════════════════════════════════════════════ */
.rcmp-slot-mgmt{padding:0 16px}
.rcmp-slot-row{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border-radius:10px;
  padding:12px 14px;margin-bottom:8px;box-shadow:var(--shd);
  animation:rcmp-in .2s ease;
}
.rcmp-slot-row-info .st{font-weight:800;font-size:.9rem}
.rcmp-slot-row-info .ss{font-size:.78rem;color:var(--mut);margin-top:2px}
.rcmp-slot-row-actions{display:flex;gap:6px;align-items:center}

/* Availability toggle (compounder header) */
.rcmp-avail-btn{
  padding:8px 14px;border-radius:999px;border:2px solid rgba(255,255,255,.6);
  font-size:.8rem;font-weight:800;cursor:pointer;
  background:rgba(255,255,255,.2);color:#fff;transition:var(--tr);
}
.avail-on{background:rgba(22,163,74,.75)!important}
.avail-off{background:rgba(220,38,38,.6)!important}

/* ══════════════════════════════════════════════════════════════
   PROFILE / INFO TABLE
   ══════════════════════════════════════════════════════════════ */
.rcmp-profile-lg{
  width:100px;height:100px;border-radius:50%;object-fit:cover;
  margin:0 auto 16px;border:4px solid var(--p);
}
.rcmp-info-tbl{width:100%;border-collapse:collapse}
.rcmp-info-tbl tr{border-bottom:1px solid var(--bdr)}
.rcmp-info-tbl td{padding:10px 4px;font-size:.88rem}
.rcmp-info-tbl td:first-child{color:var(--mut);font-weight:700;width:110px}

/* ══════════════════════════════════════════════════════════════
   CARDS / GATE
   ══════════════════════════════════════════════════════════════ */
.rcmp-card{background:var(--card);border-radius:var(--rad);box-shadow:var(--shd)}
.rcmp-card-pad{padding:20px 16px}
.rcmp-gate-card{
  max-width:400px;margin:40px auto;
  background:var(--card);border-radius:var(--rad);
  box-shadow:var(--shd);padding:32px 24px;text-align:center;
}
.rcmp-logo-xl{font-size:3.5rem;margin-bottom:12px}
.rcmp-gate-card h2{margin-bottom:8px}
.rcmp-gate-card p{color:var(--mut);margin-bottom:16px;font-size:.9rem}

/* ══════════════════════════════════════════════════════════════
   SKELETON LOADERS
   ══════════════════════════════════════════════════════════════ */
.rcmp-skel{
  background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
  background-size:200% 100%;
  animation:rcmp-shimmer 1.3s infinite;
  border-radius:12px;height:84px;margin:0 16px 10px;
}
@keyframes rcmp-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ══════════════════════════════════════════════════════════════
   PREVIEW
   ══════════════════════════════════════════════════════════════ */
.rcmp-preview{margin-top:8px}
.rcmp-preview img{max-width:130px;max-height:130px;border-radius:8px;border:2px solid var(--bdr)}

/* ══════════════════════════════════════════════════════════════
   SPINNER
   ══════════════════════════════════════════════════════════════ */
.rcmp-spin{
  display:inline-block;width:18px;height:18px;
  border:3px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:rcmp-rotate .7s linear infinite;
}
@keyframes rcmp-rotate{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATES
   ══════════════════════════════════════════════════════════════ */
.rcmp-empty{text-align:center;padding:40px 16px;color:var(--mut)}
.rcmp-empty-icon{font-size:2.8rem;margin-bottom:10px}

/* ══════════════════════════════════════════════════════════════
   ANIMATION
   ══════════════════════════════════════════════════════════════ */
@keyframes rcmp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}