/* ── Existing form/font classes (used by other calendar pages) ── */
.e_name        { width:350px; }
.e_description { width:350px; height:90px; overflow:auto; }
.e_txtMessage  { width:350px; height:90px; overflow:auto; }
.e_mobileList  { width:350px; height:90px; overflow:auto; }

.font1  { font-size:15px; font-style:normal; line-height:20px; color:#0000FF; letter-spacing:2px; font-weight:bold; }
.font2  { font-size:12px; }
.font3  { font-size:15px; color:#0000FF; }
.font3:hover { color:#FF0000; }
.font4  { font-size:16px; color:#FF0000; font-weight:bold; }
.font5  { font-size:13px; color:#0000FF; }
.font5:hover { font-size:13px; color:#FF0000; }
.font6  { font-size:13px; }
.font7  { font-size:16px; font-weight:bold; color:#000000; }
.font7:hover { color:#FF0000; }
.font8  { font-size:13px; color:#000000; }
.font8:hover { font-size:13px; color:#FF0000; }
.font9  { color:#FF0000; }
.font10 { color:#0000FF; }
.font11 { font-size:12px; color:#000000; }
.font11:hover { color:#FF0000; }
.font12 { font-size:13px; color:#FF0000; }

/* ── Page loader ── */
#cal-loader {
  display: flex; align-items: center; justify-content: center;
  padding: 32px 0;
  transition: opacity .35s ease;
}
#cal-loader.hidden { opacity: 0; pointer-events: none; }
.cal-spinner {
  width: 36px; height: 36px;
  border: 4px solid #f0e0d0;
  border-top-color: #22aa4f;
  border-radius: 50%;
  animation: cal-spin .75s linear infinite;
}
@keyframes cal-spin { to { transform: rotate(360deg); } }

/* ── Toolbar ── */
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 10px 4px 12px;
}
.cal-quicksel {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #555;
}
.cal-quicksel select {
  padding: 5px 8px; border: 1px solid #ccc; border-radius: 6px;
  font-size: 13px; background: #fff; cursor: pointer; outline: none;
  transition: border-color .15s;
}
.cal-quicksel select:focus { border-color: #22aa4f; }
.cal-go-btn {
  padding: 5px 14px; background: #22aa4f; color: #fff;
  border: none; border-radius: 6px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.cal-go-btn:hover { background: #1d9244; }
.cal-add-event-btn {
  padding: 6px 16px; background: #fff; color: #22aa4f;
  border: 2px solid #22aa4f; border-radius: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: all .15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.cal-add-event-btn:hover { background: #22aa4f; color: #fff; }

/* ── Calendar grid table ── */
.cal-table {
  width: 100%; border-collapse: separate; border-spacing: 3px;
  table-layout: fixed;
}

/* ── Month navigation header ── */
.cal-nav-row td {
  background: #4DCF81;
  padding: 10px 16px; border-radius: 8px 8px 0 0;
}
.cal-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
}
.cal-nav-arrow {
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: 14px; font-weight: 700;
  padding: 4px 12px; border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,.35);
  transition: all .15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.cal-nav-arrow:hover { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.6); }
.cal-nav-title {
  color: #fff; font-size: 18px; font-weight: 700;
  letter-spacing: .5px; text-align: center; flex: 1;
}

/* ── Weekday header ── */
.cal-dow-row td {
  text-align: center; padding: 8px 4px;
  font-size: 13px; font-weight: 700;
  background: #f8f8f8; color: #555;
  border-bottom: 2px solid #e8e8e8;
}
.cal-dow-sun { color: #e53935; }
.cal-dow-sat { color: #1565c0; }

/* ── Day cells ── */
.cal-day {
  vertical-align: top;
  height: 96px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.06);
  transition: box-shadow .15s, transform .1s;
  overflow: hidden;
}
.cal-day:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
  transform: translateY(-1px);
  z-index: 2; position: relative;
}
.cal-day-empty {
  background: #f9f9f9 !important;
  border: 1px solid transparent;
}
.cal-day-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 7px 3px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cal-day-num {
  font-size: 15px; font-weight: 700; color: #333;
  text-decoration: none; line-height: 1;
  transition: color .15s;
}
.cal-day-num:hover { color: #22aa4f; }
.cal-day-today .cal-day-num { color: #fff; }

/* Today highlight */
.cal-day-today {
  border: 2px solid #22aa4f !important;
  box-shadow: 0 2px 8px rgba(34,170,79,.25);
}
.cal-day-today .cal-day-hdr {
  background: #22aa4f;
  border-bottom-color: rgba(255,255,255,.2);
}
.cal-day-today .cal-day-num { color: #fff; }
.cal-day-today .cal-plus-btn { color: rgba(255,255,255,.8); }
.cal-day-today .cal-plus-btn:hover { color: #fff; background: rgba(255,255,255,.2); }

/* Weekend tint */
.cal-day-weekend { background: #f0f7ff; }

/* Weekday */
.cal-day-weekday { background: #fff; }

.cal-plus-btn {
  font-size: 16px; line-height: 1; color: #aaa;
  text-decoration: none; padding: 1px 4px; border-radius: 4px;
  transition: all .15s;
}
.cal-plus-btn:hover { color: #22aa4f; background: rgba(34,170,79,.08); }

/* Events list inside a day */
.cal-events {
  padding: 3px 6px 4px;
  overflow: hidden;
  max-height: 68px;
}
.cal-evt {
  display: block; font-size: 11.5px; color: #333;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 1px 0;
  text-decoration: none;
  transition: color .12s;
}
.cal-evt::before { content: '·'; margin-right: 3px; color: #22aa4f; font-weight: 700; }
.cal-evt:hover { color: #22aa4f; }

/* ── Left-panel mini calendar ── */
.lp-mini-cal {
  margin: 0 0 14px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.lp-mini-hdr {
  background: #4DCF81;
  padding: 7px 0;
  text-align: center;
}
.lp-mini-hdr a {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .3px;
}
.lp-mini-hdr a:hover { opacity: .85; }
.lp-mini-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.lp-mini-tbl th {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  padding: 5px 0 3px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}
.lp-th-sun { color: #e53935 !important; }
.lp-th-sat { color: #1565c0 !important; }
.lp-mini-tbl td {
  text-align: center;
  padding: 3px 0;
  font-size: 12px;
}
.lp-mini-tbl td a {
  display: inline-block;
  width: 22px; height: 22px;
  line-height: 22px;
  border-radius: 50%;
  color: #333;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.lp-mini-tbl td a:hover {
  background: rgba(34,170,79,.12);
  color: #22aa4f;
}
.lp-td-sun a { color: #e53935; }
.lp-td-sat a { color: #1565c0; }
.lp-td-today a {
  background: #22aa4f !important;
  color: #fff !important;
  font-weight: 700;
}
.lp-td-sel a {
  background: rgba(34,170,79,.18) !important;
  color: #22aa4f !important;
  font-weight: 700;
}
/* Year grid: 3-col months */
.lp-yr-tbl td {
  padding: 5px 0;
  font-size: 12px;
}
.lp-yr-tbl td a {
  width: auto;
  padding: 3px 8px;
  border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   SHARED CALENDAR2 COMPONENTS
   Used by: add_event_form, update_event_form, add_event_birthday_form,
            display_event_form, calendar_event_list, calendar_sendsms_record,
            event_msg, can_sms, can_sms_list
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.cal-page { padding: 12px 16px; }

/* ── Card ── */
.cal-card {
  background: #fff;
  border: 0.5px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.cal-card-hdr {
  background: #f0fdf4;
  border-bottom: 1px solid #b6f1c9;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.cal-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #187938;
}
.cal-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Form rows (label + value) ── */
.cal-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cal-label {
  width: 130px;
  min-width: 130px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  padding-top: 8px;
  text-align: right;
}
.cal-value {
  flex: 1;
  font-size: 13px;
  color: #333;
}

/* ── Inputs & selects ── */
.cal-input,
.cal-select {
  padding: 6px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 13px;
  background: #fafafa;
  outline: none;
  transition: border-color .15s;
}
.cal-input:focus,
.cal-select:focus { border-color: #22aa4f; }
.cal-input-wide   { width: 280px; }

/* ── Textarea ── */
.cal-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 13px;
  resize: vertical;
  background: #fff;
  min-height: 80px;
  outline: none;
  transition: border-color .15s;
}
.cal-textarea:focus { border-color: #22aa4f; }

/* ── Radio group ── */
.cal-radio-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cal-radio-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
}
.cal-radio-item input { accent-color: #22aa4f; }

/* ── Badges ── */
.cal-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.cal-badge-yes  { background: #daf8e4; color: #187938; }
.cal-badge-no   { background: #f0f0f0; color: #999; }
.cal-badge-warn { background: #fff3e0; color: #e65100; }

/* ── Counter pill ── */
.cal-counter {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  background: #f0fdf4;
  color: #187938;
  font-weight: 700;
  border: 1px solid #b6f1c9;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 13px;
}
.cal-counter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #888;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* ── Note / info box ── */
.cal-note {
  font-size: 12px;
  color: #aaa;
  line-height: 1.6;
  background: #fafafa;
  border-radius: 6px;
  padding: 8px 12px;
  border: 1px solid #f0f0f0;
}
.cal-note a      { color: #22aa4f; }
.cal-note-warn   { color: #b45309; background: #fff8f0; border-color: #fde8cc; }
.cal-note-danger { color: #e53935; background: #fff5f5; border-color: #fca5a5; }

/* ── Inline link ── */
.cal-link {
  font-size: 12px;
  color: #22aa4f;
  cursor: pointer;
  text-decoration: underline;
}
.cal-link:hover { color: #187938; }

/* ── Sub-section box (repeat settings, SMS step) ── */
.cal-subbox {
  background: #f8f8f8;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-subbox-title {
  font-size: 13px;
  font-weight: 700;
  color: #333;
}
.cal-subbox-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* ── Filter card (event list / sendsms record) ── */
.cal-filter-card {
  background: #fff;
  border: 0.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
}
.cal-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-filter-label {
  font-size: 12px;
  color: #888;
  font-weight: 600;
}
.cal-filter-input {
  padding: 6px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 13px;
  background: #fafafa;
  width: 160px;
  cursor: pointer;
  outline: none;
}
.cal-filter-input:focus { border-color: #22aa4f; }

/* ── Table ── */
.cal-tbl {
  width: 100%;
  border-collapse: collapse;
}
.cal-tbl th {
  background: #f8f8f8;
  color: #555;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 12px;
  text-align: center;
  border-bottom: 2px solid #e8e8e8;
}
.cal-tbl td {
  font-size: 13px;
  color: #333;
  padding: 9px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.cal-tbl tr.cal-row-odd  { background: #fff; }
.cal-tbl tr.cal-row-even { background: #fafafa; }
.cal-tbl tr:hover td     { background: #f0fdf4; }
.cal-tbl tr.cal-row-empty td {
  text-align: center;
  color: #aaa;
  font-style: italic;
  padding: 24px;
}

/* ── Toolbar above table ── */
.cal-tbl-toolbar {
  background: #f0fdf4;
  border: 1px solid #b6f1c9;
  border-radius: 8px 8px 0 0;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}
.cal-tbl-toolbar-title { font-size: 15px; font-weight: 700; color: #187938; }
.cal-tbl-toolbar-note  { font-size: 12px; color: #888; }

/* ── Pagination ── */
.cal-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 0;
  flex-wrap: wrap;
}
.cal-pg {
  padding: 5px 13px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid #d0d0d0;
  color: #555;
  background: #fff;
  transition: all .15s;
}
.cal-pg:hover          { border-color: #22aa4f; color: #22aa4f; }
.cal-pg.cal-pg-active  { background: #22aa4f; border-color: #22aa4f; color: #fff; pointer-events: none; }
.cal-pg.cal-pg-disabled{ color: #ccc; border-color: #eee; pointer-events: none; }
.cal-pg-info           { font-size: 13px; color: #888; padding: 0 8px; }

/* ── Buttons ── */
.cal-btn {
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .15s;
  white-space: nowrap;
}
.cal-btn-primary   { background: #22aa4f; color: #fff; }
.cal-btn-primary:hover { background: #1d9244; }
.cal-btn-outline   { background: #fff; color: #22aa4f; border: 1.5px solid #22aa4f; }
.cal-btn-outline:hover { background: #f0fdf4; }
.cal-btn-ghost     { background: #fff; color: #888; border: 1.5px solid #d0d0d0; }
.cal-btn-ghost:hover   { background: #f5f5f5; }
.cal-btn-danger    { background: #fff; color: #e53935; border: 1.5px solid #e53935; }
.cal-btn-danger:hover  { background: #fff5f5; }
.cal-btn-lg { padding: 8px 28px; font-size: 14px; font-weight: 700; border-radius: 7px; }

/* ── Form footer ── */
.cal-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
}
.cal-footer-btns { display: flex; gap: 10px; }
.cal-err { color: #e53935; font-size: 13px; min-height: 18px; }

/* ── Result / message card (event_msg.asp) ── */
.cal-result-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  min-height: 320px;
}
.cal-result-card {
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 14px;
  padding: 40px 48px;
  text-align: center;
  min-width: 300px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.cal-result-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin: 0 auto 20px;
}
.cal-result-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}
.cal-result-sub {
  font-size: 13px;
  color: #888;
  margin-bottom: 28px;
  line-height: 1.6;
}
.cal-result-btn {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .15s;
  color: #fff;
}
.cal-result-btn:hover { opacity: .88; }