/* SamayBook — application styles (scaffold). Extend as the UI is built. */
:root {
    --sb-primary: #2f57ef;
    --sb-dark: #0f172a;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.btn-primary {
    --bs-btn-bg: var(--sb-primary);
    --bs-btn-border-color: var(--sb-primary);
    --bs-btn-hover-bg: #2544c9;
    --bs-btn-hover-border-color: #2544c9;
}

.card {
    border-radius: 14px;
}

/* jquery-confirm button theming ------------------------------------------------
 * jquery-confirm's stylesheet loads after Bootstrap and strips button
 * backgrounds. That left our .btn-primary confirm button with white text on a
 * now-transparent background — effectively invisible — while the light "cancel"
 * button (dark text) stayed readable. Restore proper button styling here (this
 * file loads after jquery-confirm's CSS, so these win).
 */
.jconfirm .jconfirm-buttons button.btn {
    text-transform: none;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 16px;
    margin-left: 8px;
    border: 1px solid transparent;
}
.jconfirm .jconfirm-buttons button.btn-primary {
    background: var(--sb-primary);
    border-color: var(--sb-primary);
    color: #fff;
}
.jconfirm .jconfirm-buttons button.btn-primary:hover {
    background: #2544c9;
    border-color: #2544c9;
    color: #fff;
}
.jconfirm .jconfirm-buttons button.btn-light {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #1f2937;
}
.jconfirm .jconfirm-buttons button.btn-light:hover {
    background: #e2e8f0;
    color: #0f172a;
}
/* Destructive dialogs (data-confirm-type="red") get a red confirm button so the
 * primary action reads as dangerous, not just branded. */
.jconfirm .jconfirm-box.jconfirm-type-red .jconfirm-buttons button.btn-primary {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.jconfirm .jconfirm-box.jconfirm-type-red .jconfirm-buttons button.btn-primary:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* Flex truncation utility -----------------------------------------------------
 * Bootstrap 5 does not ship a .min-w-0 helper, yet several list rows rely on it
 * so a long title can shrink and .text-truncate can engage. Without it the row
 * overflows its card and pushes trailing controls (e.g. the "Join" button on
 * the dashboard schedule) outside the box. Define it, and never let the row's
 * trailing button shrink. */
.min-w-0 { min-width: 0 !important; }
.sb-item { min-width: 0; }
.sb-item .btn { flex-shrink: 0; white-space: nowrap; }

/* Duration / pricing segmented picker (wizard + meeting-type form) ---------- */
.wz-durations { display: flex; gap: 10px; }
.wz-duration { flex: 1; position: relative; }
.wz-duration input { position: absolute; opacity: 0; }
.wz-duration span {
    display: block; text-align: center; padding: 14px 8px; border: 2px solid #e5e7eb;
    border-radius: 12px; font-weight: 600; cursor: pointer; transition: all .12s;
}
.wz-duration input:checked + span { border-color: var(--sb-primary); background: #f4f6ff; color: var(--sb-primary); }

/* Meeting-type location tiles + booking preview ----------------------------- */
.mt-loc-tile { display: block; cursor: pointer; margin: 0; position: relative; }
.mt-loc-tile input { position: absolute; opacity: 0; }
.mt-loc-inner {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    border: 1.5px solid var(--sb-border, #e2e8f0); border-radius: 12px; padding: 12px 12px; min-height: 66px;
    font-size: .82rem; font-weight: 600; transition: border-color .12s, background .12s;
}
.mt-loc-inner i:first-child { font-size: 1.2rem; }
.mt-loc-tick { position: absolute; top: 8px; right: 8px; color: var(--sb-primary); opacity: 0; font-size: .95rem; }
.mt-loc-tile input:checked + .mt-loc-inner { border-color: var(--sb-primary); background: var(--sb-primary-soft, #eef2ff); }
.mt-loc-tile input:checked + .mt-loc-inner .mt-loc-tick { opacity: 1; }
.mt-loc-tile:hover .mt-loc-inner { border-color: var(--sb-primary); }
.mt-pv-hero { background: linear-gradient(135deg, #eef2ff, #f5f0ff); border-radius: 12px; padding: 18px 12px; }
.mt-pv-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(15,23,42,.12); }

/* Dark-mode for the shared pickers */
body.sb-dark .wz-duration span { border-color: var(--sb-border, #263449); color: var(--sb-ink, #e6eaf2); }
body.sb-dark .wz-duration input:checked + span { border-color: var(--sb-primary); background: var(--sb-primary-soft); color: #fff; }
body.sb-dark .mt-loc-inner { border-color: var(--sb-border, #263449); }
body.sb-dark .mt-pv-hero { background: linear-gradient(135deg, #17233f, #201a35); }

/* Searchable timezone dropdown (partials/timezone-select) ------------------- */
.tzsel { position: relative; }
.tzsel-toggle { text-align: left; cursor: pointer; background: #fff; }
.tzsel-panel {
    position: absolute; z-index: 1060; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15,23,42,.14); overflow: hidden;
}
.tzsel-panel[hidden] { display: none; }
.tzsel-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #eef0f4; }
.tzsel-search input { border: 0; outline: 0; width: 100%; font-size: .92rem; background: transparent; color: inherit; }
.tzsel-list { max-height: 280px; overflow-y: auto; }
.tzsel-opt {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 14px; cursor: pointer; font-size: .9rem;
}
.tzsel-opt:hover { background: #f4f6ff; }
.tzsel-opt-time { color: #64748b; font-size: .82rem; flex-shrink: 0; margin-left: 12px; }

body.sb-dark .tzsel-toggle { background: var(--sb-surface-2, #17233f); color: var(--sb-ink, #e6eaf2); border-color: var(--sb-border, #263449); }
body.sb-dark .tzsel-panel { background: var(--sb-surface-2, #17233f); border-color: var(--sb-border, #263449); }
body.sb-dark .tzsel-search { border-color: var(--sb-border, #263449); }
body.sb-dark .tzsel-opt:hover { background: rgba(255,255,255,.06); }