.hide {
    display: none;
}


.content {
    margin-top: -15px;
}


/* Card header tabs — separator line + active indicator */
.card-header .nav-tabs {
    border-bottom: 2px solid #dee2e6;
}

.card-header .nav-tabs .nav-link {
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: #222e3c;
}

.card-header .nav-tabs .nav-link.active {
    border-bottom: 3px solid #3b7ddd;
    font-weight: 600;
}

/*.card-header{*/
/*    border-bottom: 1px solid lightgray;*/
/*}*/


.card-body{
    margin-top: 0px;
    padding-top: 0px;
}

.form-label{
    font-weight: 600;
    padding-bottom: 3px;
    margin-bottom: 0;
    margin-top: 0.8rem;
}

.error,.dropdown-error {
    border: 1px solid red!important;
}


.table-bordered .form-control {
    border-top: none!important;
    border-left: 0!important;
    border-right: 0!important;
    border-radius: 0!important;
}

.table-bordered textarea.form-control {
    height: 150px;
    border: 2px solid #efefef;
}

table.table-bordered.dataTable td:first-child, table.table-bordered.dataTable th:first-child {
    border-left-width: 1px;
}

.table-bordered>:not(caption)>*>* {
    border-width: 1px 1px;
}

table.table-bordered.dataTable tbody tr:last-child td {
    border-bottom-width: 1px!important;
}

.table-bordered>:not(caption)>*>* {
    border-width: 1px 1px!important;
}
.table>:not(caption)>*>* {
    padding: 7px;
}
.dataTable{
    zoom: 90%;
}

.dataTable .btn-primary {
    padding: 0 10px;
    margin: 0 1px;
}

@media (min-width: 992px) {
    .content {
        padding: 2rem 1rem 1.5rem;
    }
}

/* ------------------------------------------------------------------
 * Accommodation options accordion
 *
 * The stock .accordion-button is a full width block, which would push the option's action
 * buttons onto their own line. Here it shares an .accordion-header flex row with them, so
 * it needs admin sized padding and no trailing border shadow.
 * ------------------------------------------------------------------ */

#AccommodationOptionsWrapper .accordion-button {
    padding: 0.5rem 0.75rem;
}

#AccommodationOptionsWrapper .accordion-button:not(.collapsed) {
    box-shadow: none;
}

/* The header row owns the padding on the right, where the actions are. */
#AccommodationOptionsWrapper .accordion-header .row {
    padding-right: 0.75rem;
}

/* Items stand apart rather than stacking flush, so each one has to carry its own frame.
   AdminKit strips the side borders and the radius, and Bootstrap drops the top border on
   every item after the first - all three come back here, or a gap leaves a floating rule. */
#AccommodationOptionsWrapper .accordion-item {
    margin-bottom: 20px;
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
    border-radius: var(--bs-border-radius);
}

/* Round the children to match, rather than clipping with overflow, which would cut the
   accordion button focus ring. */
#AccommodationOptionsWrapper .accordion-item .accordion-button {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
}

#AccommodationOptionsWrapper .accordion-item .accordion-collapse {
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

/* A white sheet under the tables, against the tinted header of the open item. */
#AccommodationOptionsWrapper .accordion-body {
    background-color: #fff;
}

/* ------------------------------------------------------------------
 * Departures card
 *
 * Each departure pane is inset from the card body, so the date being worked on reads as a
 * panel of its own rather than running into the tab strip above it.
 * ------------------------------------------------------------------ */

#DeparturesCard .tab-pane {
    margin: 20px;
}

/* ------------------------------------------------------------------
 * Summary strips - #BookingSummary and #CustomerSummary
 *
 * Two screens now, one set of rules: the four figures on a booking, and the four on a client.
 * Still scoped to the two ids rather than opened up to a class, so a .stat anywhere else in the
 * admin keeps AdminKit's own styling and these tints cannot leak into it.
 *
 * The four figures a consultant is asked for on the phone. AdminKit ships .stat as a 40px
 * tinted circle, but hardcoded to the primary blue, so the tints below are the only thing
 * missing - each tile carries the colour of what it is saying rather than all four reading
 * the same.
 *
 * Tints are the theme colours at roughly 15% over white, worked out rather than picked, so
 * they sit together and the icon keeps its contrast against them.
 * ------------------------------------------------------------------ */

#BookingSummary .stat, #CustomerSummary .stat {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

#BookingSummary .stat-primary, #CustomerSummary .stat-primary {
    background: #e2ecfa;
    color: #3b7ddd;
}

#BookingSummary .stat-success, #CustomerSummary .stat-success {
    background: #d8f5ec;
    color: #159a73;
}

#BookingSummary .stat-warning, #CustomerSummary .stat-warning {
    background: #fef1d5;
    color: #c88a10;
}

#BookingSummary .stat-danger, #CustomerSummary .stat-danger {
    background: #fadcdf;
    color: #c32835;
}

#BookingSummary .stat-secondary, #CustomerSummary .stat-secondary {
    background: #eceef1;
    color: #6c757d;
}

/* The figure itself. Tabular numbers so a column of amounts lines up on the decimal instead
   of shifting with the digits. */
#BookingSummary .summary-figure, #CustomerSummary .summary-figure {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}

#BookingSummary .summary-label, #CustomerSummary .summary-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 0.35rem;
}

/* A thin rule, not a chunky bar: it sits under a figure and must not compete with it. */
#BookingSummary .progress, #CustomerSummary .progress {
    height: 4px;
    background-color: #eceef1;
}

/* Equal height across the row however long the package name runs. */
#BookingSummary .card, #CustomerSummary .card {
    height: 100%;
}

/* The departure banner above the figures. Tinted rather than white so the context reads as
   a heading for the row and not as a fifth figure. */
#BookingContext, #CustomerContext {
    background: #f7f9fc;
    border-left: 3px solid #3b7ddd;
}

#BookingContext .context-package, #CustomerContext .context-package {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

/* The four figure boxes on a booking - Travellers, Total, Paid, Balance - sit tight under
   the context card, so the label needs air above it. Scoped to the boxes by their column,
   which leaves #BookingContext above them on its own py-3. */
#BookingSummary .col-xl-3 .card-body, #CustomerSummary .col-xl-3 .card-body {
    padding-top: 15px;
}

.alert{
    padding: 10px;
}

/* Drag to reorder any table of child rows (SortableJS). Itinerary days, flight segments, hotels and
   room type prices, on packages and on quotes - one class because the markup is the same everywhere
   and the JS looks for this one class. It was .sortable-days while the itinerary was the only table
   that had it. */
.sortable-rows .drag-handle {
    cursor: grab;
    width: 34px;
}

.sortable-rows .drag-handle:active {
    cursor: grabbing;
}

/* The row left behind under the cursor while dragging. */
.sortable-rows .sortable-ghost {
    opacity: .4;
    background: #e7f1ff !important;
}

/* The row actually following the cursor. */
.sortable-rows .sortable-drag {
    opacity: .95;
}

/* While a reorder is being written. The drop already moved the row, so this is not a loader - it
   only says "not settled yet" and stops the grips inviting a second drag that is being ignored. */
.sortable-rows.sorting-saving {
    opacity: .65;
}

.sortable-rows.sorting-saving .drag-handle {
    cursor: progress;
}

/* ============================================================ the Groups folder browser
   A LIST, the way Explorer's details view reads: a small icon, the name, and the figures to the
   right. Tiles were tried first and were too big for a catalogue you scan. Scoped to .folder-list so
   nothing else in the admin picks these up. */

.folder-list {
    border: 1px solid #e3e5ea;
    border-radius: 6px;
    overflow: hidden;
}

.folder-list .folder-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #eef0f3;
    background: #fff;
    text-decoration: none;
    color: #23262f;
    transition: background-color .1s ease;
}

.folder-list .folder-row:last-child { border-bottom: 0; }

.folder-list .folder-row:hover {
    background: #f4f8ff;
    color: #23262f;
}

/* Small on purpose - it labels the row, it is not the subject of it. */
.folder-list .folder-icon {
    flex: 0 0 22px;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    color: #f0b429;
}

/* Swap to an open folder on hover: the one flourish that makes it read as a file manager. */
.folder-list .folder-row .folder-icon .fa-folder-open { display: none; }
.folder-list .folder-row:hover .folder-icon .fa-folder { display: none; }
.folder-list .folder-row:hover .folder-icon .fa-folder-open { display: inline-block; }

/* An ITEM is a folder too - a programme contains its departure dates - so it gets the same shape,
   the same open-on-hover, and opening it walks INTO it. BLUE is the distinction: amber is a folder
   somebody made, blue is a record that has contents of its own. */
.folder-list .folder-row.is-item .folder-icon { color: #3b7ddd; }

/* A DATE is the leaf: a file in the folder, not another folder. Nothing below it and nothing to
   drag, because a departure belongs to its programme and cannot be filed anywhere else. */
.folder-list .folder-row.is-date .folder-icon { color: #3b7ddd; }
.folder-list .folder-row.is-date.is-past { opacity: .55; }
/* A BOOKING is the client folder SOP 08 keeps inside the period folder. GREEN, and it LEAVES the
   browser: a booking's own contents - travellers, payments, documents - are the tabs of its own
   screen, so the row carries an external-link marker rather than pretending to open inward. */
.folder-list .folder-row.is-booking .folder-icon { color: #28a745; }
.folder-list .folder-row.is-booking.is-past { opacity: .55; }

/* The meta can run to two lines on a booking, so the row stops being a strict single line. */
.folder-list .folder-row.is-booking { align-items: flex-start; }
.folder-list .folder-row.is-booking .folder-icon { padding-top: 2px; }
.folder-list .folder-row.is-booking .folder-meta { white-space: normal; text-align: right; }

.folder-list .folder-name {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: .9rem;
    min-width: 0;
    /* One line: a long programme name must not push the figures onto a second row. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-list .folder-meta {
    flex: 0 0 auto;
    font-size: .8rem;
    color: #6b7280;
    text-align: right;
    white-space: nowrap;
}

/* The chevron says the row opens something, the way a folder row does in a file manager. */
.folder-list .folder-go {
    flex: 0 0 14px;
    font-size: .75rem;
    color: #c2c8d0;
}

.folder-list .folder-row:hover .folder-go { color: #3b7ddd; }

/* Hidden by the filter box rather than removed, so filtering costs no request. */
.folder-list .folder-row.is-filtered { display: none; }

.folder-empty {
    border: 1px dashed #dee2e6;
    border-radius: 6px;
    padding: 40px 20px;
    text-align: center;
    color: #9ca3af;
}

/* --- the folder browser's rows are now draggable and droppable ------------------------------ */

/* DRAG FROM THE HANDLE ONLY. The row itself is not a grab surface, so clicking a name, a button or
   anywhere else can never pick a folder up by accident - which matters when the drop reorganises
   somebody's filing. */
.folder-list .drag-handle {
    flex: 0 0 16px;
    text-align: center;
    font-size: .8rem;
    color: #ccd2da;
    cursor: grab;
}

.folder-list .drag-handle:active { cursor: grabbing; }

/* Always visible, not hover-revealed like the action buttons: it is now the ONLY way to drag, so it
   has to advertise itself. Muted until the row is hovered. */
.folder-list .folder-row:hover .drag-handle { color: #6b7280; }

/* The spacer on the ".." row, which cannot be dragged but has to line up with the ones below. */
.folder-list .drag-handle.is-empty { cursor: default; }
.folder-list .folder-row .folder-name { text-decoration: none; color: inherit; }
.folder-list .folder-row .folder-name:hover { text-decoration: underline; }

.folder-list .folder-actions {
    flex: 0 0 auto;
    white-space: nowrap;
    /* Out of the way until the row is hovered: a list of rows each shouting three buttons is noise. */
    visibility: hidden;
}

.folder-list .folder-row:hover .folder-actions { visibility: visible; }

/* A folder lit up as the thing a drop would land in. Only folders get this - an item is not a
   container, so dropping onto one must look like nothing. */
.folder-list .folder-row.is-folder.is-drop-target {
    background: #e7f1ff;
    box-shadow: inset 0 0 0 2px #3b7ddd;
}

/* The row being carried. */
.folder-list .sortable-ghost { opacity: .35; }
.folder-list .sortable-drag { opacity: .95; }

/* While a move is being written. */
.folder-list.is-saving { opacity: .6; pointer-events: none; }

/* The ".." row: a way up, and a place to drop something to move it out of this folder. It is never
   itself draggable, so it has no grab cursor and no actions. */
.folder-list .folder-row.is-up {
    background: #fafbfc;
    border-bottom: 1px solid #e3e5ea;
}

.folder-list .folder-row.is-up .folder-icon { color: #6b7280; }
.folder-list .folder-row.is-up .folder-name { font-weight: 600; }
.folder-list .folder-row.is-up .folder-meta { font-size: .72rem; font-style: italic; }

/* The zone sits directly above the list and joins onto it, so the two read as one pane. */
.folder-up-zone {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.folder-up-zone + .folder-list {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Armed while something is being dragged, so it is visible as a destination BEFORE the mouse is
   released rather than only on hover. */
.folder-up-zone.is-armed {
    border-color: #3b7ddd;
    border-style: dashed;
}

.folder-up-zone.is-armed .folder-row.is-up { background: #f4f8ff; }

.folder-up-zone.is-saving { opacity: .6; pointer-events: none; }


/* ------------------------------------------------- the filing modal's table (#FileItemsModal)

   The only DataTable in this project that lives inside a modal, which is why it is the only place
   needing this. A .row inside a modal-body carries no mt-1 - g-3 already spaces the rows and a second
   margin on top of it is the uneven-gaps bug - but the DataTables CHROME is not in a row at all: the
   length select above the table and the info and pagination below sit inside the wrapper. So the
   breathing room goes on the wrapper, where it cannot disturb the row spacing rule.
*/
#FileItemsModal .dataTables_wrapper,
#FileItemsModal .dt-container {
    margin-top: .75rem;
    margin-bottom: .25rem;
}

/* The "Show N entries" control and the table are flush against each other by default, so the header
   row reads as part of the control rather than as the top of the table. */
#FileItemsModal .dataTables_wrapper table.dataTable,
#FileItemsModal .dt-container table.dataTable {
    margin-top: .75rem;
    margin-bottom: .75rem;
}

/* Keeps the pagination off the modal footer's border. */
#FileItemsModal .dataTables_paginate,
#FileItemsModal .dt-paging {
    margin-top: .25rem;
}