/* CMS page styles.  Loaded from includes/include_style.php.
   Plain CSS (no build step); these used to be inline <style> blocks and style="" attributes in the views. */

/* ===== Filter panels (visitors list, activity log) ===== */
.filter-panel { background: #f8f9fc; border: 1px solid #e3e6f0; border-radius: 12px; padding: 16px 18px 14px; margin-bottom: 14px; }
.filter-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.filter-panel-title { font-weight: 700; color: #273863; }
.filter-panel-title i { color: #C9AA5F; margin-right: 6px; }
.filter-count { display: inline-block; min-width: 20px; padding: 0 7px; margin-left: 6px; border-radius: 10px; background: #273863; color: #fff; font-size: .72rem; line-height: 20px; text-align: center; }
.filter-clear { font-size: .82rem; color: #b71c1c; text-decoration: none; }
.filter-clear:hover { text-decoration: underline; color: #b71c1c; }
.filter-panel label { display: block; margin-bottom: 4px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; }
.filter-panel .form-control { border-radius: 8px; border-color: #d1d5db; background-color: #fff; }
.filter-panel .form-control:focus { border-color: #273863; box-shadow: 0 0 0 3px rgba(39, 56, 99, .15); }
/* Icon and input share one bordered box (no overlay positioning). */
.filter-search { display: flex; align-items: center; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
.filter-search:focus-within { border-color: #273863; box-shadow: 0 0 0 3px rgba(39, 56, 99, .15); }
.filter-search i { flex: 0 0 auto; position: static; padding-left: 14px; color: #9ca3af; line-height: 1; }
/* The wrapper supplies the 1px border, so the input drops its own and uses plain
   padding: total height then matches the selects and date fields beside it. */
.filter-search .form-control { flex: 1 1 auto; min-width: 0; height: auto; line-height: 1.5; padding: .375rem .75rem .375rem .65rem; border: 0; background: transparent; box-shadow: none; }
.filter-search .form-control:focus { border: 0; box-shadow: none; }
.filter-range { display: flex; align-items: center; gap: 8px; }
.filter-range .sep { color: #9ca3af; }
.filter-actions { display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; height: 100%; }
.filter-actions .btn { border-radius: 8px; font-weight: 600; min-width: 110px; }
.filter-actions .btn-primary { background: #273863; border-color: #273863; }
.filter-actions .btn-primary:hover { background: #1b2a4d; border-color: #1b2a4d; }
.filter-actions .btn-reset { background: #fff; border: 1px solid #c9ced8; color: #4b5563; }
.filter-actions .btn-reset:hover { background: #f1f3f7; color: #1f2937; }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; font-size: .82rem; }
.filter-chips .lead { color: #6b7280; margin-right: 2px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 14px; background: #e8ecf6; color: #273863; text-decoration: none; }
.filter-chip b { font-weight: 700; }
.filter-chip .x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #273863; color: #fff; font-size: .65rem; line-height: 1; }
.filter-chip:hover { background: #d8def0; color: #273863; text-decoration: none; }
.filter-results { color: #6b7280; margin-bottom: 8px; }

/* ===== Visitors list: expanded booking details and expand arrows ===== */
/* Expanded booking details */
.vd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px 6px 8px; }
@media (max-width: 767px) { .vd { grid-template-columns: 1fr; } }
.vd-card { background: #fff; border: 1px solid #e3e6f0; border-radius: 10px; padding: 12px 14px; }
.vd-card h6 { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid #C9AA5F; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #273863; }
.vd-card dl { margin: 0; }
.vd-row { display: flex; gap: 8px; padding: 3px 0; font-size: .85rem; }
.vd-row dt { flex: 0 0 38%; margin: 0; font-weight: 600; color: #6b7280; }
.vd-row dd { flex: 1 1 auto; margin: 0; color: #1f2937; word-break: break-word; }
.vd-empty { color: #9ca3af; font-size: .85rem; }
.vd-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.vd-tag { padding: 2px 9px; border-radius: 10px; background: #e8ecf6; color: #273863; font-size: .72rem; font-weight: 600; }
.vd-guests { margin: 0; padding-left: 18px; font-size: .85rem; }
.vd-guests li { padding: 1px 0; }
.vd-guests small { color: #6b7280; }
.vd-id img { display: block; max-width: 100%; max-height: 190px; border-radius: 8px; border: 1px solid #e3e6f0; }
.vd-wide { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; background: transparent; border: 0; padding: 0; }
/* Expand arrow: right when collapsed, down when the row is expanded. */
#visitor-datatable .visitor-pointer { cursor: pointer; }
/* Font Awesome may swap the <i> for an <svg>, so both are styled (svg takes its color from `color`). */
#visitor-datatable .visitor-pointer i,
#visitor-datatable .visitor-pointer svg { color: #273863 !important; fill: #273863 !important; font-size: 1.15rem; transition: color .15s, fill .15s, transform .15s; }
#visitor-datatable .visitor-pointer:hover i,
#visitor-datatable .visitor-pointer:hover svg { color: #C9AA5F !important; fill: #C9AA5F !important; transform: scale(1.1); }
#visitor-datatable tr.shown .visitor-pointer i,
#visitor-datatable tr.shown .visitor-pointer svg { color: #C9AA5F !important; fill: #C9AA5F !important; }
#visitor-datatable tr.shown .visitor-pointer:hover i,
#visitor-datatable tr.shown .visitor-pointer:hover svg { color: #273863 !important; fill: #273863 !important; }
#visitor-datatable .visitor-pointer .arrow-open { display: none !important; }
#visitor-datatable tr.shown .visitor-pointer .arrow-closed { display: none !important; }
#visitor-datatable tr.shown .visitor-pointer .arrow-open { display: inline-block !important; }

/* ===== Visitor form: conditional sections, read-only mode, ID preview ===== */
.visitor-type-block,
#purpose-of-visit-section,
#purpose-of-visit-other-group,
#benchmarking-tour-group {
    display: none;
}
/* View mode: nothing is editable, so hide the controls that add or change data. */
.is-readonly #add-visitor-btn,
.is-readonly .remove-visitor-row,
.is-readonly .dropzone,
.is-readonly #max-visitor-message { display: none !important; }
.is-readonly fieldset:disabled .form-control { background-color: #f8f9fa; }

/* Section headings: navy + gold accent bar, consistent with #eventModal .form-label */
#visitor-form .form-section-title { display: flex; align-items: center; gap: 8px; color: #273863; font-weight: 700; border-left: 3px solid #C9AA5F; padding-left: 10px; margin-bottom: 1.1rem; }
#visitor-form .form-section-title i { color: #C9AA5F; }
#visitor-form .form-section-title small { color: #6b7280; font-weight: 400; margin-left: 4px; }
#visitor-form .form-section + .form-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e3e6f0; }
#visitor-form hr { border-top: 1px solid #e3e6f0; margin: 2rem 0; }

/* Visitor repeater: each visitor is a distinct card with its own header row */
#visitor-rows .visitor-row { background: #f8f9fc; border: 1px solid #e3e6f0 !important; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; transition: border-color .15s, box-shadow .15s; }
#visitor-rows .visitor-row:focus-within { border-color: #273863 !important; box-shadow: 0 0 0 3px rgba(39, 56, 99, .1); }
#visitor-rows .visitor-row .additional-visitor-heading { flex-basis: 100%; color: #273863; font-weight: 700; font-size: .95rem; margin: 0 0 12px; }
.visitor-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.visitor-index-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #273863; background: #e8ecf6; border-radius: 12px; padding: 3px 10px; }
.visitor-row .remove-visitor-row { border-radius: 8px; font-weight: 600; padding: .3rem .75rem; }

/* Checkboxes styled as compact pill toggles */
#visitor-rows .visitor-checkboxes .title,
.visitor-checkboxes > label.fw-bold { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; display: block; margin-bottom: 6px; }
#visitor-rows .form-check-inline { background: #fff; border: 1px solid #d1d5db; border-radius: 14px; padding: 4px 12px 4px 10px; margin-right: 8px; margin-bottom: 6px; transition: border-color .15s, background .15s; }
#visitor-rows .form-check-inline:has(.form-check-input:checked) { border-color: #273863; background: #e8ecf6; }
#visitor-rows .form-check-label { margin-bottom: 0; font-size: .85rem; }

/* Add Visitor control + running guest count */
#add-visitor-btn { border-radius: 8px; font-weight: 600; border-color: #273863; color: #273863; }
#add-visitor-btn:hover { background: #273863; border-color: #273863; color: #fff; }
.no-of-pax { font-weight: 600; color: #273863; }
.no-of-pax .badge { background: #273863 !important; font-size: .85rem; padding: .4em .75em; border-radius: 10px; }

/* File upload dropzones: brand-coloured dashed drop targets */
#visitor-form .dropzone { border: 2px dashed #c9ced8; border-radius: 10px; background: #f8f9fc; min-height: 110px; padding: 1rem; transition: border-color .15s, background .15s; }
#visitor-form .dropzone:hover { border-color: #273863; background: #fff; }
#visitor-form .dropzone .dz-message { font-weight: 600; color: #273863; margin: 1em 0; }
#visitor-form .dropzone .dz-message::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f0ee'; display: block; font-size: 1.6rem; color: #C9AA5F; margin-bottom: 8px; }
#visitor-form .uploaded-file { margin-top: 6px; }

/* ===== Schedules: calendar, schedule dialogs and details ===== */
#calendar { --fc-bg-event-opacity: 1; }
.holiday-label { font-size: .75rem; font-weight: 700; color: #8b1a10; padding: 2px 4px; }
#calendar .fc-daygrid-day.holiday-cell { pointer-events: none; cursor: not-allowed; }
#calendar .fc-daygrid-day.holiday-cell .fc-daygrid-day-number { color: #8b1a10; font-weight: 700; }
#calendar .fc-event.bk-event { background: transparent; border: 0; box-shadow: none; cursor: default; margin: 1px 2px; }
.bk-summary { padding: 3px 4px; border: 1px solid #d9dde6; border-radius: 6px; background: #fff; font-size: .72rem; line-height: 1.35; white-space: normal; }
.bk-title { font-weight: 700; color: #273863; margin-bottom: 2px; }
.bk-title.bk-full { color: #b71c1c; }
.bk-chip { display: inline-block; margin: 1px 2px 1px 0; padding: 1px 7px; border-radius: 10px; font-size: .68rem; font-weight: 600; color: #fff; text-decoration: none; }
a.bk-chip:hover { color: #fff; filter: brightness(.92); text-decoration: none; }
#calendar .schedule-item.schedule-unavailable { background: repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 8px, #f3f4f6 8px, #f3f4f6 16px) !important; color: #374151 !important; border: 1px dashed #6b7280; }
.bk-pending { background: #d99a00; }
.bk-approved { background: #1e8f56; }
.bk-completed { background: #2c7fb8; }
.bk-rejected { background: #c0392b; }
.bk-cancelled { background: #6b7280; }
#calendar .fc-daygrid-day.past-day { background: #f1f2f4; cursor: not-allowed; }
#calendar .fc-daygrid-day.past-day .fc-daygrid-day-number { color: #9aa0a6; }
.sd-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: 2px; }
.sd-facts > div { margin-bottom: .5rem; font-weight: 600; color: #273863; }
.sd-total { font-size: 2rem; font-weight: 700; color: #273863; line-height: 1; }
.sd-day { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.sd-day-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.sd-day-head a { font-weight: 400; font-size: .8rem; }
.sd-meter { height: 8px; border-radius: 4px; background: #e5e7eb; overflow: hidden; margin: 6px 0; }
.sd-meter > span { display: block; height: 100%; }
.sd-meter .ok { background: #1e8f56; } .sd-meter .warn { background: #d99a00; } .sd-meter .full { background: #c0392b; }
.ev-range { font-size: .85rem; color: #6b7280; }
.ev-option { background: #f8f9fc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; }
.ev-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ev-slot { position: relative; margin: 0; cursor: pointer; }
.ev-slot input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ev-slot span { display: block; text-align: center; padding: 8px 6px; border: 1px solid #d1d5db; border-radius: 8px; font-size: .9rem; background: #fff; transition: background .15s, border-color .15s, color .15s; }
.ev-slot:hover span { border-color: #273863; }
.ev-slot input:checked + span { background: #273863; border-color: #273863; color: #fff; font-weight: 600; }
.ev-slot input:focus-visible + span { outline: 3px solid #C9AA5F; outline-offset: 2px; }
/* Modal buttons: navy primary, quiet outlined secondary. */
#eventModal .modal-footer .btn, #scheduleModal .modal-footer .btn { min-width: 96px; border-radius: 8px; font-weight: 600; padding: .45rem 1rem; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
#eventModal .btn-primary, #scheduleModal .btn-outline-primary:hover { background: #273863; border-color: #273863; color: #fff; }
#eventModal .btn-primary:hover:not(:disabled) { background: #1b2a4d; border-color: #1b2a4d; }
#eventModal .btn-primary:disabled { background: #8a94ad; border-color: #8a94ad; opacity: 1; cursor: not-allowed; }
#scheduleModal .btn-outline-primary { color: #273863; border-color: #273863; background: #fff; }
#eventModal .modal-footer .btn-secondary, #scheduleModal .modal-footer .btn-secondary { background: #fff; border: 1px solid #c9ced8; color: #4b5563; }
#eventModal .modal-footer .btn-secondary:hover, #scheduleModal .modal-footer .btn-secondary:hover { background: #f1f3f7; border-color: #9aa3b5; color: #1f2937; }
#eventModal .modal-footer .btn:focus-visible, #scheduleModal .modal-footer .btn:focus-visible { outline: 3px solid #C9AA5F; outline-offset: 2px; box-shadow: none; }
/* Create-schedule form labels: navy, bold, gold accent bar so each field stands out. */
#eventModal .form-label, #eventModal .form-check-label.fw-bold { color: #273863; font-weight: 700 !important; border-left: 3px solid #C9AA5F; padding-left: 8px; line-height: 1.2; margin-bottom: .5rem; }
#eventModal .form-label small { color: #6b7280; }
#eventModal .form-check-label.fw-bold { display: inline-block; }
#eventModal .form-control:focus, #eventModal .form-select:focus { border-color: #273863; box-shadow: 0 0 0 3px rgba(39, 56, 99, .15); }

/* ===== Card header buttons (Back / Save / Add ...): right-aligned, brand colours =====
   Headers that only hold a title (dashboard, activity log) are left as they were. */
.card-header:has(> .btn) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.card-header > .btn { margin: 0; min-width: 88px; border-radius: 8px; font-weight: 600; padding: .4rem .9rem; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.card-header > .btn-primary { background: #273863; border-color: #273863; color: #fff; }
.card-header > .btn-primary:hover:not(:disabled) { background: #1b2a4d; border-color: #1b2a4d; color: #fff; }
.card-header > .btn-secondary { background: #fff; border: 1px solid #c9ced8; color: #4b5563; }
.card-header > .btn-secondary:hover { background: #f1f3f7; border-color: #9aa3b5; color: #1f2937; }
.card-header > .btn:focus-visible { outline: 3px solid #C9AA5F; outline-offset: 2px; box-shadow: none; }

/* ===== Utilities replacing inline style="" attributes ===== */
.is-hidden { display: none; }
.tbody-baseline { vertical-align: baseline; }
.pre-line { white-space: pre-line; }
.col-w-10 { width: 10%; }
.col-w-25 { width: 25%; }
.col-w-220 { width: 220px; }
.id-preview-img { max-width: 320px; max-height: 240px; }

/* Approve / reject / cancel dialogs (SweetAlert) */
.swal-summary { display: inline-block; font-size: .95rem; line-height: 1.6; }
.swal-note { font-size: .85rem; }