/*
 * Quicksand — the body font below — is SELF-HOSTED: installed with Composer, published to /lib and registered
 * by WebFonts::register() from every layout. It used to be @imported from a third-party font CDN, which put
 * every user's IP in front of that third party on each page load and serialised its DNS+TLS handshake behind
 * this stylesheet. To add another family, do it the same way (see docs/frontend-assets.md) — a unit test,
 * WebFontsTest, fails if a remote font URL comes back into a served file.
 *
 * The Rubik / Asap / Nunito Sans imports that used to sit here, commented out, were removed with it: they were
 * dead references to the same CDN, and uncommenting one would have quietly undone all of this. The
 * font-family lines they belonged to are left below, commented, as the design alternatives they are.
 */
body {
    /* padding-top: 60px; */
    font-family: 'Quicksand', sans-serif !important;
    /*font-family: 'Asap', sans-serif !important;*/
    /*font-family: 'Nunito Sans', sans-serif !important;*/
    /*background-color: #e3e3e3; */
    /*background-color: #e3e3e3; */
    /* font-size: 1.3rem; */
}

.monospace {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

.dropzone {
    border: 3px dashed #ccc !important;
    border-radius: 0px !important;
}

.box-center {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.map-resource-name {
    font-weight: bold;
    font-size: larger;
}

.input-70px {
    max-width: 70px;
}

.input-100px {
    max-width: 100px;
}

.input-150px {
    max-width: 150px;
}

.margin20bottom {
    margin-bottom: 1rem;
}

.mouse-pointer {
    cursor: pointer;
}

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}

.strike>span {
    position: relative;
    display: inline-block;
}

.strike>span:before,
.strike>span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: #333333;
}

.strike>span:before {
    right: 100%;
    margin-right: 15px;
}

.strike>span:after {
    left: 100%;
    margin-left: 15px;
}

h2.formSectionTitle {
    font-weight: 100 !important;
}

div.inner-panel {
    background-color: #fafafa;
    border-left: 5px solid #ccc;
    border-bottom: 5px solid #ccc;
    box-shadow: 1px 1px 3px #ccc;
}

tr.borderless td {
    border-top: none !important;
}

tr.gray td {
    background-color: #f9f9f9 !important;
}

tr.gray th {
    background-color: #f9f9f9 !important;
}

tr.border-bottom td {
    border-bottom: 2px solid #333;
}

tr.white-on-black td {
    background-color: #5b5b5b !important;
    color: #ffffff !important;
}

.table .table {
    background-color: transparent !important;
}

.nav>li>a {
    font-size: 14px;
}

.navbar-brand {
    font-size: 18px;
}

.dropdown-header {
    background-color: #eee;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

#mainmenu2 .dropdown-header {
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: rgb(6, 74, 113);
    color: #fff;
}

#mainmenu2 .divider {
    display: none;
}

.CodeMirror * {
    font-family: "Menlo", "Monaco", "Andale Mono", "Courier", monospace;
    font-size: 16px !important;
}

.CodeMirror {
    font-family: "Menlo", "Monaco", "Andale Mono", "Courier", monospace;
    font-size: 16px !important;
}

/*
.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}

div.panel-heading {
    background-color: #fff !important;
    border: none !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

div.panel-body h1,
div.panel-body h2,
div.panel-body h3 {
    margin: 0px 0px 10px 0px !important;
    font-weight: 200;
}

div.well h1,
div.well h2,
div.well h3 {
    margin: 0 !important;
    color: #999;
}

div.container-full {
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
}

div#sidebar div.panel-title {
    color: #4A87B6;
    font-size: 1.7rem;
    font-weight: 200;
}

div#footer div.panel {
    background-color: #f1f1f1;
}
div#footer div.panel-heading {
    background-color: #f1f1f1 !important;
}
div#footer div.panel-title {
    font-size: 1.4rem;
    font-weight: bold;
}

.grid-view .table .filters > td .filter-container select {
  margin-bottom: 0;
  width: 100%;
}

.form-control .select2-choice {
    border: 0;
    border-radius: 2px;
}

.form-control .select2-choice .select2-arrow {
    border-radius: 0 2px 2px 0;
}

.form-control.select2-container {
    height: auto !important;
    padding: 0px;
}

.form-control.select2-container.select2-dropdown-open {
    border-color: #5897FB;
    border-radius: 3px 3px 0 0;
}

.form-control .select2-container.select2-dropdown-open .select2-choices {
    border-radius: 3px 3px 0 0;
}

.form-control.select2-container .select2-choices {
    border: 0 !important;
    border-radius: 3px;
}

a.navbar-brand {
    padding: 10px 15px 0px 15px;
    height: 30px !important;
}


.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

table.table {
    background-color: white;
}

table.table caption {
    text-align: left;
    font-weight: bold;
    font-size: large;
    padding-bottom: 10px;
}

table.table thead tr {
    background-color: #EEE;
}

table.table thead tr th,
table.table thead tr th a:link,
table.table thead tr th a:visited {
    color: #333;
}

table.table thead tr th a:link {
    color: #0e64a2;
    text-decoration: none;
}

table.table thead tr th a:hover {
    color: #0e64a2;
    text-decoration: underline;
}

table.table tbody tr td:last-child {
    text-align: right;
    width: 0;
}

.navbar-default .navbar-toggle .fa-bars {
    background-color: inherit;
    color: #FFFFFF;
}

#mainsearchresults {
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 0px 0px 5px black;
    z-index: 1001;
}

.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
}

.panel-body-custom {
    background-color: #fcfcfc;
}

.table-striped > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th {
  background-color: #f6f6f6;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #fff;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #f6ffcf;
}

.div-pager {
    padding-left: 1px !important;
}

div.panel-default div.panel-heading .panel-title {
    color: #555;
}

div.search-form {
    padding-top: 10px;
}

a.sort-link.asc:after {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f0aa";
    margin-left: 3px;
}

a.sort-link.desc:after {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f0ab";
    margin-left: 3px;
}

span.fc-header-title h2 {
    font-size: 2rem;
}

.intercomFixedWidget {
    position: fixed;
    bottom: 19px;
    right: 15px;
    z-index: 1000;
    padding: 10px 20px 13px 20px;
    background-color: #064a71;
    color: #ddd;
    font-size: 1.5rem;
    border-radius: 100px;
}
.intercomFixedWidget:hover {
    text-decoration: none;
    color: #fff;
}

.intercomInlineWidget {
    z-index: 1000;
    padding: 10px 20px 13px 20px;
    background-color: #064a71;
    color: #fff;
    font-size: 1.5rem;
    border-radius: 100px;
}
.intercomInlineWidget:hover {
    text-decoration: none;
    color: #fff;
}

div#modal-dialog {
    z-index: 2000;
}
*/

.heavy-alert {
    border: none;
    color: #fff;
    font-size: 110%;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 5px;
}

.heavy-alert a,
.heavy-alert .heavy-alert-link {
    color: #fff;
    text-decoration: underline;
}

.heavy-alert-primary {
    background-color: #1f337f;
}

.heavy-alert-secondary {
    background-color: #444;
}

.heavy-alert-success {
    background-color: #007E33;
}

.heavy-alert-info {
    background-color: #0099CC;
}

.heavy-alert-warning {
    background-color: #FF8800;
}

.heavy-alert-danger {
    background-color: #CC0000;
}

.heavy-alert-light {
    background-color: #303030;
}

.heavy-alert-dark {
    background-color: #adb5bd;
}

.table th a.asc {
    /* text-decoration: underline; */
}

.table th a.desc {
    /* text-decoration: underline; */
}

.table th a.asc:after {
    font-size: 100%;
    text-decoration: none;
    content: ' \25BC';
}

.table th a.desc:after {
    font-size: 100%;
    text-decoration: none;
    content: ' \25B2';
}

input:focus,
textarea:focus {
    outline-style: solid;
    outline-width: 2px;
}

.list-group-item-bold {
    font-weight: bold;
}

.text-bold {
    font-weight: bold;
}

@-webkit-keyframes blinker {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}

.blink {
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes row-blink {
    from {
        background-color: darkblue;
    }

    to {
        background-color: inherit;
    }
}

@-moz-keyframes row-blink {
    from {
        background-color: darkblue;
    }

    to {
        background-color: inherit;
    }
}

@-o-keyframes row-blink {
    from {
        background-color: darkblue;
    }

    to {
        background-color: inherit;
    }
}

@keyframes row-blink {
    from {
        background-color: darkblue;
    }

    to {
        background-color: inherit;
    }
}

.row-blink {
    -webkit-animation: row-blink 500ms infinite;
    /* Safari 4+ */
    -moz-animation: row-blink 500ms infinite;
    /* Fx 5+ */
    -o-animation: row-blink 500ms infinite;
    /* Opera 12+ */
    animation: row-blink 500ms infinite;
    /* IE 10+ */
}

.list-group-item-small {
    padding: 5px 10px;
}

/* A group of sidebar entries under one name (Menu widget, 'dropdown' => [...]): the toggle reads as an entry of the
   list and its menu is as wide as the list, like the Print dropdown under it. */
.bs-menu-dropdown { position: relative; }
.bs-menu-dropdown > .dropdown-toggle { display: block; }
.bs-menu-dropdown > .dropdown-menu { width: 100%; margin-top: 0; }

#contract_option.inputGroup,
#transit_option.inputGroup {
    z-index: 1 !important;
}

ul.nav-pills a {
    color: #333;
    font-weight: bold;
    min-height: 50px;
    padding: 15px 0;

}

ul.nav-pills i.fa {
    font-size: 25px;

}

div.border5px {
    border-width: 5px;
}

div.boatTopView {
    background-image: url("images/boat_top_view.png");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
}

h4.title-option-widget {
    border-bottom: 5px solid #eee;
}

i.icon-big {
    font-size: 25px;
}

.panel-login {
    border-radius: 10px;
}

/*
.navbar-dockbooking {
    border-color: #d37102;
    background-color: #d37102;
    color: #000;
}
.navbar-dockbooking .navbar-nav > .open > a, .navbar-dockbooking .navbar-nav > .open > a:hover, .navbar-dockbooking .navbar-nav > .open > a:focus {
	color: #fff;
	background-color: #ff9f31;
}

#mainmenu-dockbooking .dropdown-header {
	margin-top: 1rem;
	margin-bottom: 1rem;
	background-color: rgb(165, 71, 0);
	color: #fff;
}
*/

.navbar-dockbooking {
    background-color: #F39200;
    border-color: #043552;
}

.navbar-dockbooking .navbar-brand {
    color: rgba(255, 255, 255, 1);
}

.navbar-dockbooking .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
}

#mainmenu-dockbooking .dropdown-header {
    background-color: #F39200;
    color: #fff;
    margin-bottom: 1rem;
}

.panel-heading-dockbooking {
    background-color: #FF9500 !important;
}

/* Margin */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }

/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

/* Margin Start (left in LTR) */
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }

/* Margin End (right in LTR) */
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* Padding Top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

/* Padding Start (left in LTR) */
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

/* Padding End (right in LTR) */
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

/* Contenitore (solo per spacing) */
.skeleton {
  margin: 20px 0;
}

/* Linee di testo simulate */
.skeleton-line {
  height: 16px;
  margin-bottom: 10px;
  background: #e0e0e0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

/* Effetto "shimmer" */
.skeleton-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150px;
  height: 100%;
  width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: skeletonloading 1.5s infinite;
}

/* Animazione */
@keyframes skeletonloading {
  0% {
    left: -150px;
  }
  100% {
    left: 100%;
  }
}

/* Larghezze personalizzate */
.w-100 { width: 100%; }
.w-75  { width: 75%; }
.w-50  { width: 50%; }

.skeleton-h1 { height: 40px; border-radius: 6px; }
.skeleton-h2 { height: 32px; border-radius: 6px; }
.skeleton-h3 { height: 24px; border-radius: 6px; }

/* Segmented control (pills) for Yes/No and either/or radio groups.
   Wrap the .radio-inline group in a .segmented-switch div (the JS helper
   initSegmentedSwitches() does this). Defined once here; used by super/tenant
   config, the order-pricing wizard, the bundle line form, etc. */
.segmented-switch {
    display: inline-flex;
    background-color: #edf2f7;
    border-radius: 10px;
    padding: 3px;
    border: 1px solid #e2e8f0;
    margin-top: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}
.segmented-switch .radio-inline {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}
.segmented-switch .radio-inline input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.segmented-switch .radio-inline span {
    display: inline-block;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    color: #4a5568;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.segmented-switch .radio-inline input[type="radio"]:checked + span {
    background-color: #ffffff;
    color: #1a202c;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.segmented-switch .radio-inline:hover span { color: #1a202c; }

/* Toggle pill: a single checkbox rendered as an on/off pill (green when on).
   Use for standalone yes/no toggles (e.g. "Include this item"). For a mutually
   exclusive either/or choice use .segmented-switch (radios) instead.
   Markup: <label class="toggle-pill"><input type="checkbox" class="toggle-pill-input">
           <span class="pill-icon"><i class="fas fa-check pill-icon-on"></i>
           <i class="fas fa-xmark pill-icon-off"></i></span>
           <span class="pill-text">…</span></label>
   The .pill-active class is toggled on the label by JS on change. */
.toggle-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: #edf2f7;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    margin: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle-pill:hover { border-color: #a0aec0; }
.toggle-pill .toggle-pill-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-pill .pill-icon {
    display: inline-flex;
    width: 14px;
    margin-right: 6px;
    justify-content: center;
}
/* Icon swaps with state, no layout shift: X (grey) when off, check (white) when on. */
.toggle-pill .pill-icon-on { display: none; }
.toggle-pill .pill-icon-off { display: inline; color: #a0aec0; }
.toggle-pill.pill-active {
    background-color: #2f9e44;
    border-color: #2f9e44;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(47, 158, 68, 0.25);
}
.toggle-pill.pill-active .pill-icon-on { display: inline; color: #ffffff; }
.toggle-pill.pill-active .pill-icon-off { display: none; }

/* ON/OFF sliding switch — the reference on/off control. Use it ONLY for settings that turn a
   feature/behaviour on or off; the track lights up with the current macro-area accent
   (var(--area-accent)) so "on" reads at a glance. For an either/or choice (Block/Warn, VAT
   excluded/included) use .segmented-switch (radios) or a Select2 instead.
   Markup: <label class="bs-toggle"><input type="checkbox" class="bs-toggle-input">
           <span class="bs-toggle-track"><span class="bs-toggle-knob"></span></span>
           <span class="bs-toggle-state"><span class="bs-toggle-on">ON</span>
           <span class="bs-toggle-off">OFF</span></span></label>
   The checkbox carries a Yii hidden companion (posts 0 when off, 1 when on). */
.bs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-top: 4px;
    user-select: none;
}
.bs-toggle .bs-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.bs-toggle-track {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background-color: #cbd5e0;
    /* The OFF fill is 1.49:1 against a white card — under the 3:1 WCAG 1.4.11 asks of a UI component's
       boundary, so an off switch had no discernible edge (and the white knob was 1.49:1 on it too). An
       inset ring carries the boundary at 3.47:1 without changing the track's size or its deliberately
       quiet look — the same technique the save pill uses to outline its button. */
    box-shadow: inset 0 0 0 1px #7d8b9c;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.bs-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.bs-toggle .bs-toggle-input:checked ~ .bs-toggle-track {
    background-color: var(--area-accent);
    /* ON the fill itself carries the boundary (the settings accent #064a71 is 9.44:1 on white), so the
       ring is dropped rather than drawing a second edge over a dark track. */
    box-shadow: none;
}
.bs-toggle .bs-toggle-input:checked ~ .bs-toggle-track .bs-toggle-knob {
    transform: translateX(20px);
}
/* box-shadow does not accumulate across rules, so the focus ring has to restate the boundary ring or
   focusing an OFF switch would erase its edge. */
.bs-toggle input:focus ~ .bs-toggle-track {
    box-shadow: inset 0 0 0 1px #7d8b9c, 0 0 0 3px var(--area-accent-ring);
}
.bs-toggle input:focus:checked ~ .bs-toggle-track {
    box-shadow: 0 0 0 3px var(--area-accent-ring);
}
.bs-toggle-state {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #64748b; /* OFF label — WCAG AA (~5:1) on white; the accent lives in the track, not the text */
    min-width: 26px;
}
.bs-toggle .bs-toggle-on { display: none; color: #2c3e50; } /* ON label — dark neutral, AA on every area accent */
.bs-toggle .bs-toggle-off { display: inline; }
.bs-toggle .bs-toggle-input:checked ~ .bs-toggle-state .bs-toggle-on { display: inline; }
.bs-toggle .bs-toggle-input:checked ~ .bs-toggle-state .bs-toggle-off { display: none; }

/* ---------------------------------------------------------------------------
 * Grids whose cells must never wrap (.bs-grid-nowrap on the CGridView wrapper)
 *
 * One long free-text cell — an invoice row description — otherwise sets the
 * height of its whole row and pushes every other column out of shape. Here a
 * cell is always ONE line: what does not fit is cut with an ellipsis, and
 * js/grid-nowrap.js puts the full text in the cell's title on hover. The grid
 * itself scrolls sideways, so a wide layout never widens the page.
 * ------------------------------------------------------------------------ */
.bs-grid-nowrap .table-responsive {
    overflow-x: auto;
}
.bs-grid-nowrap table > thead > tr:not(.filters) > th,
.bs-grid-nowrap table > tbody > tr > td,
.bs-grid-nowrap table > tfoot > tr > td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
/* The filter row keeps its inputs (and their Select2 drop-downs) unclipped. */
.bs-grid-nowrap table > thead > tr.filters > td {
    white-space: nowrap;
}

/* Block buttons: a label that does not fit is CUT, not spilled ---------------
 *
 * `.btn-block` is as wide as its column, and Bootstrap already sets
 * `white-space: nowrap` on `.btn` — so a long label used to run out of the
 * button and under whatever sat next to it. All that was missing is the cut.
 *
 * ONLY on a `.btn`. `.btn-block` also sits on CONTAINERS — `div.btn-group.btn-block`
 * around a toggle and its menu, `ul.dropdown-menu.btn-block`: 53 places in 23
 * views — and `overflow: hidden` on the container clips the absolutely-positioned
 * menu. It opens (`.open`, `display: block`) and nobody sees it. Shipped that way
 * on 2026-09-15 as `.btn-block:not(.dropdown-toggle)`: every sidebar dropdown of
 * the application looked dead for the 27 minutes the release served.
 * Guard: tests/Unit/BlockButtonClipGuardTest.php.
 *
 * Dropdown toggles are left out on purpose: clipping would eat the caret, and a
 * dropdown with no caret does not look like one. Same reasoning, and the same
 * pair of properties, as the grid rule above.
 *
 * The label stays readable because the buttons that can lose it carry their full
 * text in `title` (see views/contract/_sidebar_options.php).
 * ------------------------------------------------------------------------ */
.btn.btn-block:not(.dropdown-toggle) {
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================================
 * Application footer (restyled 2026-09-17 - docs/reference-style.md)
 *
 * One quiet bar instead of a Bootstrap `.well` inside a 9/3 grid: the product and
 * its live state on the left, the legal links beside them, the language on the
 * right. Rendered by //layouts/main, so this is every page of the app.
 *
 * Two things it must not touch: `#socketIoStatus` keeps its own colour (the
 * layout's Pusher callback switches text-danger -> text-success on it), and
 * `.bs-save-pill-spacer` still reserves the pill's height above this bar.
 * ========================================================================== */
.bs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 24px 0 16px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid #e9eef3;
    border-radius: 12px;
}
.bs-footer-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    color: #6c757d;
    min-width: 0;
}
/* A thin divider between the groups, drawn by the layout rather than typed into
   the markup, so a group that is not rendered (the support diagnostics, the
   Italian-only policy links) takes its separator with it. */
.bs-footer-main > * + *::before {
    content: "\00b7";
    margin-right: 14px;
    color: #cbd5e0;
}
.bs-footer-product { color: #2c3e50; }
.bs-footer-product strong { font-weight: 600; }
.bs-footer-product #socketIoStatus { font-size: 9px; vertical-align: middle; margin-right: 6px; }
.bs-footer-version { color: #8a97a6; }
.bs-footer-links a,
.bs-footer-links a:visited {
    color: #6c757d;
    text-decoration: none;
}
.bs-footer-links a:hover,
.bs-footer-links a:focus {
    color: var(--area-strong, #0b4a6f);
    text-decoration: underline;
}
/* Three links in a row need a separator, and it sits INSIDE the anchor. `:not(:first-of-type)` rather
   than `a + a`: it counts anchors among the siblings and ignores anything wedged between them (iubenda's
   old embed script inserted a <script> after each anchor, and `a + a` then matched nothing).
   `pointer-events: none` keeps the divider from being a clickable piece of the link it lives in. */
.bs-footer-links a:not(:first-of-type)::before {
    content: "\00b7";
    display: inline-block;
    margin: 0 9px;
    color: #cbd5e0;
    pointer-events: none;
    text-decoration: none;
}
/* Only in a support session, and it says so. */
.bs-footer-diag { color: #9a6410; }
.bs-footer-diag i { margin-right: 4px; }

.bs-footer-aside { margin-left: auto; }
/* --- The footer sits at the bottom of the page ------------------------------------------------
   On a page shorter than the window the footer used to stop wherever the content did, leaving a band
   of empty background under it (measured 2026-09-24: 443px on admin/customerPortal/index, while
   admin/order/admin and admin/settings/index were unaffected because their content already overflows).

   `position: sticky` and NOT a flex body, deliberately. A flex container turns every static child of
   <body> into a flex item and stops margins collapsing between them - and this app appends a lot to
   <body>: Select2 v3.5 re-parents its dropdown panel there, so do the modals, toastr and the BlockUI
   overlay. Sticky leaves the flow exactly as it was; the clamp to the parent's content box is what
   lands the footer on the bottom edge instead of below it. */
body { min-height: 100vh; }

#footer { position: sticky; top: 100vh; }

/* The language picker is a CPortlet, so its chrome has to be undressed here. */
#footer .portlet { margin: 0; }
#footer .portlet-decoration { background: none; border: 0; padding: 0; }
#footer .portlet-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a97a6;
    margin: 0 0 4px;
}
#footer .portlet-content { padding: 0; background: none; border: 0; }
#footer .portlet-content form { margin: 0; }
#footer .select2-container .select2-choice { border-radius: 8px; }

@media (max-width: 767px) {
    .bs-footer { align-items: flex-start; }
    .bs-footer-aside { margin-left: 0; }
    /* Stacked, the inline dots would hang at the start of a line. */
    .bs-footer-main > * + *::before { content: none; }
    .bs-footer-main { gap: 4px 12px; }
}


/* ============================================================================
 * The PRIVILEGED session, said in the chrome (2026-09-17)
 *
 * Two states, one colour: `--root-warn` (css/area-tokens.css). The body class comes
 * from `Controller::getSessionChrome()`, so nothing here has to re-derive "am I
 * root?" - and nothing else in the application uses this brown.
 *
 * The bar itself has been brown since long before this block, from a re-themed
 * `.navbar-default` inside the minified bootstrap build. The rule below repaints it
 * with the SAME value through the token: the colour now has a name, and a rebuilt
 * bootstrap can no longer take the warning away by accident.
 * ========================================================================== */
#mainmenu.navbar-default {
    background-color: var(--root-warn);
    border-color: var(--root-warn-edge);
}

/* ---- Support session: root working AS somebody ----------------------------
   The strip the marina strip cannot be (`_tenant_strip.php` returns early for a
   masquerade, and rightly: there is no marina to switch). This is the state where a
   mistake by root is recorded as the customer's own action, and before this band the
   only trace of it on screen was one line in the footer. */
.bs-support-strip {
    background: var(--root-warn);
    color: var(--root-warn-ink);
    font-size: 12px;
    line-height: 1.4;
}
.bs-support-strip__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 0;
}
.bs-support-strip__bar > * { flex: 0 0 auto; }
.bs-support-strip__who { font-weight: 700; }
.bs-support-strip__out,
.bs-support-strip__out:visited {
    color: var(--root-warn-ink);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    padding: 1px 12px;
    text-decoration: none;
}
.bs-support-strip__out:hover,
.bs-support-strip__out:focus {
    color: var(--root-warn);
    background: var(--root-warn-ink);
    text-decoration: none;
}

/* ---- A destructive confirm in a root session wears the same warning --------
   SweetAlert2 appends its popup to <body>, so the session class still reaches it.
   Scoped to `.btn-danger`, i.e. to the dialogs `bsConfirm({dangerous: true})` paints
   red: an ordinary confirm stays as it is. */
body.bs-root-session .swal2-container .btn.btn-danger {
    background-color: var(--root-warn);
    border-color: var(--root-warn-edge);
    color: var(--root-warn-ink);
}
body.bs-root-session .swal2-container .btn.btn-danger:hover,
body.bs-root-session .swal2-container .btn.btn-danger:focus,
body.bs-root-session .swal2-container .btn.btn-danger:active {
    background-color: var(--root-warn-edge);
    border-color: var(--root-warn-edge);
    color: var(--root-warn-ink);
}

/* ---- Colour field: the ONE colour picker of the application -----------------
   A native <input type="color"> (the system picker) as a square swatch, optionally
   beside a live `.settings-chip` preview. Global, not in settings-pages.css, because
   it replaced jquery-minicolors on pages that are not settings pages too (contract
   categories, DockBooking, the root tenant config): docs/reference-style.md §7.
   The value it is given must be `#rrggbb` — Color::forPicker(). */
.settings-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* The swatch keeps its square-ish WIDTH but takes the area's control height: measured 2026-09-02, 39
   of these across 20 create/update forms were 38px in a row of 42px fields, which is the single most
   repeated size mismatch in the area — 4px of ragged top and bottom on every one of those forms. */
.settings-color-input {
    width: 48px;
    height: 42px;
    padding: 2px;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
}