/* HMS Calendar Picker */
.hms-dp { position: relative; display: inline-block; width: 100%; }
.hms-dp-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 1050;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 12px; width: 280px;
    animation: hmsDpFade 0.15s ease;
}
[dir="rtl"] .hms-dp-dropdown { left: auto; right: 0; }
@keyframes hmsDpFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.hms-dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hms-dp-nav { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px 10px; border-radius: 6px; color: #4b5563; line-height: 1; }
.hms-dp-nav:hover { background: #f3f4f6; }
.hms-dp-title { font-weight: 600; font-size: 14px; }

.hms-dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 4px; }
.hms-dp-weekdays span { font-size: 11px; font-weight: 600; color: #9ca3af; padding: 4px 0; }

.hms-dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hms-dp-day {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: auto; font-size: 13px;
    border-radius: 8px; cursor: pointer; transition: background 0.1s, color 0.1s;
}
.hms-dp-day:hover:not(.hms-dp-day--empty) { background: #f3f4f6; }
.hms-dp-day--empty { cursor: default; }
.hms-dp-day--today { font-weight: 700; color: #009ef7; border: 1.5px solid #009ef7; }
.hms-dp-day--selected { background: #009ef7 !important; color: #fff !important; font-weight: 600; border: none; }

.hms-dp-footer { display: flex; justify-content: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f3f4f6; }
.hms-dp-today-btn { background: none; border: none; color: #009ef7; font-size: 13px; font-weight: 500; cursor: pointer; padding: 4px 12px; border-radius: 6px; }
.hms-dp-today-btn:hover { background: #f9fafb; }

/* Clickable header title (opens month / year selection) */
.hms-dp-title-btn { background: none; border: none; cursor: pointer; border-radius: 6px; padding: 4px 10px; }
.hms-dp-title-btn:hover { background: #f3f4f6; }

/* Month & year selection grids */
.hms-dp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px 0; }
.hms-dp-cell {
    display: flex; align-items: center; justify-content: center;
    height: 44px; font-size: 13px; border-radius: 8px; cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.hms-dp-cell:hover { background: #f3f4f6; }
.hms-dp-cell--today { font-weight: 700; color: #009ef7; border: 1.5px solid #009ef7; }
.hms-dp-cell--selected { background: #009ef7 !important; color: #fff !important; font-weight: 600; border: none; }

/* --- The clock ----------------------------------------------------------
   Shown only on fields that collect a time as well as a date. Forced LTR even
   under a Shamsi or Hijri calendar: a clock reads hour-then-minute in every
   locale this hospital serves, and mirroring it puts the minutes on the left. */
.hms-dp-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

.hms-dp-time-icon { font-size: 14px; color: #9ca3af; line-height: 1; }
.hms-dp-time-sep { font-weight: 700; color: #4b5563; }

.hms-dp-time input {
    width: 52px;
    text-align: center;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    padding: 6px 4px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #111827;
}

.hms-dp-time input:focus {
    outline: none;
    border-color: #009ef7;
    box-shadow: 0 0 0 3px rgba(0, 158, 247, .14);
}

/* The spinners are 20px of furniture on a 52px box and the arrows are far
   fiddlier than typing the number. */
.hms-dp-time input::-webkit-outer-spin-button,
.hms-dp-time input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hms-dp-time input[type="number"] { -moz-appearance: textfield; }

/* AM / PM as a two-button segment rather than a <select>: everything in the
   dropdown has to be safe to preventDefault() on, which is what stops an
   enclosing <label> from forwarding the click to the display box and closing
   the calendar. See _bindEvents in hms-calendar-picker.js. */
.hms-dp-meridiem {
    display: inline-flex;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.hms-dp-meridiem button {
    border: 0;
    background: #fff;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 9px;
    cursor: pointer;
    line-height: 1;
}

.hms-dp-meridiem button + button { border-inline-start: 1px solid #e5e7eb; }
.hms-dp-meridiem button:hover { background: #f3f4f6; }
.hms-dp-meridiem button.is-on { background: #009ef7; color: #fff; }

/* --- Dark mode -----------------------------------------------------------
   The dropdown had no dark rules at all, so a hospital running a Shamsi or
   Hijri calendar in dark mode got a white card with grey furniture floating
   over a dark page. `body.theme-dark` is the class this app actually writes
   (layouts/app.blade.php, from users.thememode) — not `[data-bs-theme]` and
   not `body.dark-theme`. */
body.theme-dark .hms-dp-dropdown {
    background: #1b2431;
    border-color: #2b3849;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: #e9eff7;
}

body.theme-dark .hms-dp-title { color: #e9eff7; }
body.theme-dark .hms-dp-nav { color: #9db0c6; }
body.theme-dark .hms-dp-nav:hover,
body.theme-dark .hms-dp-title-btn:hover,
body.theme-dark .hms-dp-day:hover:not(.hms-dp-day--empty),
body.theme-dark .hms-dp-cell:hover { background: #24303f; }

body.theme-dark .hms-dp-weekdays span { color: #6e829a; }
body.theme-dark .hms-dp-footer { border-top-color: #2b3849; }
body.theme-dark .hms-dp-today-btn:hover { background: #24303f; }

body.theme-dark .hms-dp-time { border-top-color: #2b3849; }
body.theme-dark .hms-dp-time-sep { color: #9db0c6; }
body.theme-dark .hms-dp-time input {
    background: #131b25;
    border-color: #2b3849;
    color: #e9eff7;
}
body.theme-dark .hms-dp-meridiem { border-color: #2b3849; }
body.theme-dark .hms-dp-meridiem button { background: #131b25; color: #9db0c6; }
body.theme-dark .hms-dp-meridiem button + button { border-inline-start-color: #2b3849; }
body.theme-dark .hms-dp-meridiem button:hover { background: #24303f; }
body.theme-dark .hms-dp-meridiem button.is-on { background: #009ef7; color: #fff; }