/* Container cards */
.ss-form{max-width:600px;margin:30px auto;background:#fff;border:1px solid #e9eef3;border-radius:16px;padding:22px;}
.ss-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:16px}
@media (max-width:768px){.ss-grid{grid-template-columns:1fr}}

/* Inputs */
.ss-form label{display:block;font-weight:600;margin:.25rem 0}
.ss-form input[type="date"],
.ss-form input[type="time"],
.ss-form input[type="number"],
.ss-form input[type="text"],
.ss-form input[type="tel"],
.ss-form input[type="email"],
.ss-form input[type="password"],
.ss-form select,.ss-form textarea{
  width:100%;padding:12px 14px;border:1px solid #dbe3ea;border-radius:10px;outline:none
}
.ss-form textarea{resize:vertical}

/* Buttons */
.ss-btn{padding:14px 18px;border:0;border-radius:999px;background:linear-gradient(90deg, #4b8648, #377744);color:#fff;font-weight:700; margin-top: 10px;}
.ss-btn[type="submit"]{width:100%}
.ss-mini-btn{border:1px solid #dbe3ea;border-radius:8px;padding:6px 10px;cursor:pointer;background:#fff}
.ss-mini-btn.danger{border-color:#f3c9c9;color:#b00}

/* Tables */
.ss-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.ss-table th,.ss-table td{background:#fff;padding:10px 12px;border:1px solid #e6edf3}
.ss-table th{background:#f7fafc;font-weight:700}

/* Messages / badges */
.ss-msg{margin-top:10px}
.ss-msg.ok{color:#0a7e55;font-weight:600}
.ss-msg.err{color:#b00020;font-weight:600}
.ss-badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:.85rem;font-weight:700}
.ss-badge.ok{background:#dcfce7;color:#0f5132;border:1px solid #ccead5}
.ss-badge.warn{background:#fff3cd;color:#664d03;border:1px solid #ffe69c}
.ss-badge.bad{background:#fde2e1;color:#842029;border:1px solid #f5c2c7}
.ss-badge.info{background:#e7f1ff;color:#084298;border:1px solid #b6d4fe}

/* Booking screen layout */
.booking-page{background:#f5f5f5;padding:32px;border-radius:20px}
/* .booking-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:24px} */
@media (max-width:900px){.booking-wrapper{grid-template-columns:1fr}}

.login-header h2{margin:0 0 4px 0}
.login-tabs{display:flex;gap:10px;margin:10px 0 14px}
.login-tabs .tab-btn{border:1px solid #dbe3ea;background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer}
.login-tabs .tab-btn.active{background:linear-gradient(90deg, #4b8648, #377744);color:#fff;border-color:transparent}
.tab-content{display:none}
.tab-content.active{display:block}

.booking-info .info-card{background:#fff;border:1px solid #e9eef3;border-radius:14px;padding:14px 16px;margin-bottom:10px}
.booking-form-container{margin-top:12px;justify-items: center;}
.patient-info{background:#f7fafc;border:1px solid #eaf1f7;border-radius:12px;padding:12px 14px;margin-bottom:10px;width: 100%;}
.logout-btn{margin-left:10px;border:1px solid #e0e7ef;border-radius:999px;background:#fff;padding:6px 10px;cursor:pointer}

/* Doctor portal shell */
.ss-dash{display:grid;grid-template-columns:260px 1fr;gap:24px;max-width:1200px;margin:0 auto}
.ss-dash-top{grid-column:1/3;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ss-dash-top h1{margin:0}
.ss-logout{border:1px solid #cfe3f3;padding:8px 16px;border-radius:999px;background:#fff}

/* Sidebar */
.ss-dash-sidebar{background:#fff;border:1px solid #e7eef5;border-radius:18px;padding:14px}
.ss-dash-sidebar ul{list-style:none;margin:0;padding:0}
.ss-dash-sidebar a{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;text-decoration:none;color:#1f2a37}
.ss-dash-sidebar a.active{background:linear-gradient(90deg, #4b8648, #377744);color:#fff}

/* Main */
.ss-dash-main{display:block}
.ss-card{background:#fff;border:1px solid #e7eef5;border-radius:18px;padding:18px;margin-bottom:16px}
.ss-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ss-metric{background:#f8fbff;border:1px solid #e9f1f8;border-radius:14px;padding:14px}
.ss-metric .num{font-size:28px;font-weight:800;line-height:1}
.ss-metric .lbl{color:#5b6b7b;margin-top:6px}

/* Table card */
.ss-card-table table{width:100%;border-collapse:separate;border-spacing:0 8px}
.ss-card-table th,.ss-card-table td{background:#fff;border:1px solid #e6edf3;padding:12px}
.ss-card-table th{background:#f7fafc;font-weight:700}
.ss-card-table .name{font-weight:600}
.ss-card-table .sub{color:#6b7280;font-size:.9rem}

/* Badges already exist in your CSS (.ss-badge classes) */


/* Modal */
.ss-lock{overflow:hidden}
.ss-modal{position:fixed;inset:0;z-index:9999;display:none}
.ss-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(2px)}
.ss-modal-card{position:relative;max-width:720px;margin:6vh auto;background:#fff;border-radius:16px;border:1px solid #e6edf3;box-shadow:0 20px 60px rgba(2,8,23,.2)}
.ss-modal-head,.ss-modal-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #eef2f7}
.ss-modal-foot{border-top:1px solid #eef2f7;border-bottom:0}
.ss-modal-body{padding:16px 18px;max-height:65vh;overflow:auto}
.ss-modal-close{border:1px solid #dbe3ea;background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}

/* Details content */
.ss-appt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ss-appt-grid > div{background:#f8fbff;border:1px solid #e9f1f8;border-radius:12px;padding:10px 12px}
.ss-appt-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}
.ss-appt-people .name{font-weight:700}
.ss-appt-people .sub{color:#6b7280}
.ss-appt-notes h4{margin:.5rem 0}
.ss-hr{border:0;border-top:1px solid #eef2f7;margin:14px 0}


/* Calendar day coloring */
.flatpickr-day.ss-available:not(.selected):not(.today) {
  background: #10b98122; /* soft green */
  border-color: #10b98144;
  color: #065f46;
}
.flatpickr-day.ss-available:hover {
  background: #10b98155;
  color: #064e3b;
}

.flatpickr-day.ss-unavailable {
  background: #ef444422 !important; /* soft red */
  border-color: #ef444455 !important;
  color: #7f1d1d !important;
}
.flatpickr-day.flatpickr-disabled {
  cursor: not-allowed;
  opacity: 1; /* keep our red visible */
}

/* Selected day */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
}


/* Popup layout upgrades */
.ss-pop[hidden]{display:none!important}
.ss-pop{position:fixed;inset:0;z-index:99999}
.ss-pop-backdrop{position:absolute;inset:0;background:rgba(17,24,39,.45);backdrop-filter:blur(2px);opacity:0;transition:opacity .15s}
.ss-pop.show .ss-pop-backdrop{opacity:1}

.ss-pop-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);
  width:min(92vw,640px);background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.2);
  border:1px solid #e5e7eb;overflow:hidden;opacity:0;transition:opacity .15s, transform .15s; z-index: 999;
}
.ss-pop.show .ss-pop-card{opacity:1;transform:translate(-50%,-50%) scale(1)}

.ss-pop-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#f8fafc;border-bottom:1px solid #e5e7eb}
.ss-pop-title-wrap{display:flex;flex-direction:column}
.ss-pop-kicker{font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.04em}
.ss-pop-head strong{font-size:18px;color:#111827}
.ss-pop-close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#6b7280}

.ss-pop-body{padding:16px 18px 4px}
.ss-pop-simple p{margin:0;color:#374151;font-size:15px}

.ss-pop-foot{display:flex;gap:10px;justify-content:flex-end;align-items:center;padding:12px 18px;background:#f8fafc;border-top:1px solid #e5e7eb}
.ss-pop-ok{background:#4b8648;color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer}
.ss-pop-cta{display:inline-block;background:#059669;color:#fff;text-decoration:none;font-weight:700;padding:10px 14px;border-radius:10px}

.ss-pop--success .ss-pop-head{background:#f0fdf4}
.ss-pop--success .ss-pop-card{border-color:#bbf7d0}
.ss-pop--error .ss-pop-head{background:#fef2f2}
.ss-pop--error .ss-pop-card{border-color:#fecaca}
.ss-pop--info .ss-pop-head{background:#eff6ff}
.ss-pop--info .ss-pop-card{border-color:#bfdbfe}

/* Appointment receipt */
.ss-pop-appt{margin-top:4px}
.ss-receipt-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.ss-id-block{display:flex;flex-direction:column}
.ss-id-label{font-size:12px;color:#6b7280}
.ss-id-val{font-size:20px;font-weight:800;color:#0f172a}

.ss-badge{
  display:inline-block;padding:6px 10px;border-radius:999px;background:#e2e8f0;color:#0f172a;
  font-weight:700;font-size:12px;text-transform:capitalize;border:1px solid #cbd5e1
}
.ss-badge.ok{background:#dcfce7;border-color:#86efac;color:#166534}
.ss-badge.warn{background:#fef9c3;border-color:#fde68a;color:#854d0e}
.ss-badge.bad{background:#fee2e2;border-color:#fecaca;color:#7f1d1d}
.ss-badge.info{background:#dbeafe;border-color:#bfdbfe;color:#1e3a8a}

.ss-receipt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;border:1px dashed #e5e7eb;border-radius:12px;padding:12px}
@media (max-width:560px){ .ss-receipt-grid{grid-template-columns:1fr} }

.ss-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed #eef2f7}
.ss-row:last-child{border-bottom:0}
.ss-row-label{color:#64748b;font-size:13px}
.ss-row-val{color:#111827;font-weight:600;font-size:14px}

.ss-receipt-notes{margin-top:12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px}
.ss-notes-label{font-size:12px;color:#64748b;margin-bottom:4px}
.ss-notes-val{font-size:14px;color:#111827;white-space:pre-wrap}



/* ===== Reschedule Panel Styling ===== */
#ss-resched-panel {
  background: #ffffff;
  border: 1px solid #dce7dc;
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 520px;
  margin: 20px auto;
  box-shadow: 0 4px 12px rgba(80, 138, 74, 0.08);
  font-family: "Segoe UI", Roboto, sans-serif;
  color: #333;
}

/* Header */
#ss-resched-panel h3 {
  color: #508a4a;
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 18px;
  border-bottom: 2px solid #e6f2e5;
  padding-bottom: 8px;
}

/* Form fields */
#ss-resched-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#ss-resched-form label {
  font-weight: 600;
  color: #405d40;
  margin-bottom: 3px;
}

#ss-resched-form select,
#ss-resched-form input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd9cb;
  border-radius: 8px;
  background: #f9fbf9;
  font-size: 15px;
  transition: border 0.2s, box-shadow 0.2s;
}

#ss-resched-form select:focus,
#ss-resched-form input[type="text"]:focus {
  border-color: #508a4a;
  outline: none;
  box-shadow: 0 0 0 3px rgba(80, 138, 74, 0.15);
}

#ss-resched-form .ss-btn:hover {
  background: #41783e;
  transform: translateY(-1px);
}

#ss-resched-form .ss-btn:active {
  transform: translateY(1px);
}

/* Responsive */
@media (max-width: 480px) {
  #ss-resched-panel {
    padding: 20px;
    margin: 12px;
  }
  #ss-resched-panel h3 {
    font-size: 1.2rem;
  }
}