:root {
    --footer-height: 56px;
    --color-woei-secondary: rgba(170, 202, 88, 1);
    --color-woei-secondary-hover: rgba(170, 202, 88, 0.7);
    --color-woei-secondary-light: rgba(170, 202, 88, 0.5);
    --color-woei-primary: rgba(33, 37, 41, 1);
    --color-woei-primary-hover: rgba(33, 37, 41, 0.7);
    --color-woei-primary-text: rgba(255, 255, 255, 1);
    --color-woei-button: var(--color-woei-secondary);
    --color-woei-button-hover: var(--color-woei-secondary-hover);
    --color-woei-accent: var(--color-woei-secondary);
    --color-woei-bar: var(--color-woei-secondary);
    --color-woei-bar-text: inherit;
    --focus-shadow: 0 0 5px rgba(81, 203, 238, 1);
    --focus-border-color: rgba(81, 203, 238, 1);
    --side-bar-wrapper-width: 195px;
    --active-sidebar-width: 0px;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    background-color: #f9f7f7;
}

button, input, select, textarea, .btn, .form-control, table, th, td, .custom-select,
.navigation,
.page-item,
.page-link,
.next,
.previous,
.table,
.table th,
.table td {
    font-family: inherit;
    font-size: inherit;
}


.text-woei-secondary {
    color: var(--color-woei-secondary) !important;
}

.navbar .text-woei-secondary,
#sidebar-wrapper .text-woei-secondary {
    color: var(--color-woei-accent) !important;
}

.bg-woei-primary {
    background-color: var(--color-woei-primary);
}

#sidebar-wrapper .text-light {
    color: var(--color-woei-primary-text) !important;
}

.bg-woei-secondary {
    background-color: var(--color-woei-secondary);
}

.bg-woei-bar {
    background-color: var(--color-woei-bar);
    color: var(--color-woei-bar-text);
}

.no-border {
    border: none;
}

.text-with-icon-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
    border-radius: 4px;
    width: 100%;
}

.custom-select:focus {
    outline: none;
    box-shadow: var(--focus-shadow);
    border-color: var(--focus-border-color);
}

.dropdown-icon {
    position: absolute;
    top: 40%;
    right: 10px;
    width: 12px;
    height: 12px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.padding10-30-10-10 {
    padding: 10px 30px 10px 10px;
}

#sidebar-wrapper {
    position: sticky;
    min-width: var(--side-bar-wrapper-width);
    max-width: fit-content;
    transition: transform 0.25s ease-out;
    transform: translateX(0);
    margin-left: 0;
    overflow-y: scroll;
    top: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
}

/* Shift element to keep it on the full-viewport center axis regardless of sidebar state */
.align-viewport-center {
    transition: transform 0.25s ease-out;
    transform: translateX(calc(-1 * var(--active-sidebar-width, 0px) / 2));
}

#sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

.no-pointer-events {
    pointer-events: none;
}

#authenticated-user-wrapper .dropdown-menu {
    width: 100%;
    min-width: auto;
    right: 0;
    left: auto;
    position: absolute;
    z-index: 1000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#authenticated-user-wrapper {
    display: inline-block;
    width: auto;
}

#authenticated-user-dropdown.show,
#authenticated-user-dropdown:focus {
    outline: none;
    box-shadow: var(--focus-shadow);
    border-color: var(--focus-border-color);
}

.cursor-pointer {
    cursor: pointer;
}

#sidebar-wrapper .bg-woei-secondary:hover {
    transition: 0.35s ease-out;
    background-color: rgba(33, 37, 41, 0.4);
}

.list-group-item .bg-woei-primary:hover {
    transition: 0.35s ease-out;
    color: var(--color-woei-secondary) !important;
}

#sidebar-wrapper .list-group-item {
    padding-left: 5px;
    margin-left: 0;
}

.icon-18 {
    font-size: 18px;
}

.icon-16 {
    font-size: 16px;
}

#home-page-link:hover {
    color: var(--color-woei-secondary-light) !important;
}

.btn-woei-secondary {
    background-color: var(--color-woei-button);
    color: #fff;
}

.btn-woei-secondary:hover {
    background-color: var(--color-woei-button-hover);
    color: #000;
    transition: 0.35s ease-out;
}

.btn-outline-woei-secondary {
    color: var(--color-woei-secondary);
    border-color: var(--color-woei-secondary);
}

.btn-outline-woei-secondary:hover {
    color: #fff;
    background-color: var(--color-woei-secondary);
    border-color: var(--color-woei-secondary);
}

.btn-woei-primary {
    background-color: var(--color-woei-primary);
    color: #fff;
}

.btn-woei-primary:hover {
    background-color: var(--color-woei-primary-hover);
    color: #fff;
    transition: 0.35s ease-out;
}

.woei-table th a {
    color: var(--color-woei-secondary);
}

.woei-table th {
    color: var(--color-woei-secondary);
}

.woei-table tr,
.woei-table th,
.woei-table td {
    padding: 4px 8px;
}

.table-cell-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 5rem;
}

.table-cell-w-30px {
    width: 30px;
}

.table-cell-w-3rem {
    width: 3rem;
}

.table-cell-truncate.table-cell-w-3rem,
.table-cell-truncate.table-cell-w-30px {
    max-width: none;
}

.table-cell-fill {
    width: 100%;
}

.form-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.form-label.pt-0 {
    padding-top: .25em !important;
    display: flex;
    align-items: center;
}

.woei-flex input[type="date"] {
    flex: 1 0 0%;
    margin-left: .5rem;
    margin-right: .5rem;
}

.woei-form .mb-3 {
    margin-bottom: .5rem !important;
}

#page-content-wrapper {
    margin-left: 0;
    transition: margin 0.25s ease-out, opacity 0.3s ease, visibility 0.3s;
}

#page-footer {
    z-index: 1050;
}

input[type="color"].woei-color-input {
    width: 100%;
    height: 2.5rem;
    padding: 0.15rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    cursor: pointer;
    background-color: transparent;
}

input[type="color"].woei-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"].woei-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 0.25rem;
}

input[type="color"].woei-color-input::-moz-color-swatch {
    border: none;
    border-radius: 0.25rem;
}

input[type="checkbox"] {
    border-radius: 3px;
    border: 2px solid var(--color-woei-primary);
    outline: none;
}

input[type="checkbox"]:checked {
    background-color: var(--color-woei-primary);
    border-color: var(--color-woei-primary);
}

input[type="checkbox"].is-invalid:checked {
    border-color: #dc3545;
}

input[type="checkbox"]:focus {
    box-shadow: none;
    outline: none;
}

.pagination .page-item .page-link {
    color: var(--color-woei-bar-text);
    background-color: var(--color-woei-bar);
    border: 1px solid var(--color-woei-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--color-woei-primary);
    border-color: var(--color-woei-primary);
    color: var(--color-woei-primary-text);
}

.readonly-field {
    background-color: #e9ecef;
    border-color: #ced4da;
    pointer-events: none;
    color: #6c757d;
}

.select2-container--default .select2-selection--single {
    background: none;
    border: 1px solid #ced4da;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    border-left: none;
}

.select2-container--default.select2-container .select2-selection--single:after {
    content: none;
}

.select2-container--default .select2-selection--single select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.btn,
.form-control,
.form-select,
select {
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    height: auto;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

.date-with-no-picker input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

input::placeholder {
    color: #f0f0f0;
    opacity: 0.6;
    font-size: inherit;
    font-style: italic;
}

.input-horizontal {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.input-horizontal label {
    width: 25%;
}

.input-horizontal div {
    width: 75%;
}

.input-horizontal-w-100 div {
    width: 100%;
}

.custom-nr-input ::-webkit-inner-spin-button,
.custom-nr-input ::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-group .order-address-dropdown-btn {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-left: none;
}

.input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .btn:hover {
    background-color: #e9ecef;
}

.input-group .order-address-dropdown-btn i {
    font-weight: 900;
    text-shadow: 0 0 1px #000000;
}

.address-field-dropdown-container {
    position: absolute;
    z-index: 1000;
    background-color: white;
    border: 1px solid #ddd;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    top: 100%;
}

.address-field-dropdown-container.show {
    display: block;
}

.dropdown-option {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-option:hover {
    background-color: #f0f0f0;
}

.dropdown-option-highlighted {
    background-color: #f0f0f0;
}

.disabled-dropdown-option {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.disabled-dropdown-option:last-child {
    border-bottom: none;
}

#loading-postal-dropdown-container.show, #unloading-postal-dropdown-container.show {
    display: block;
}

.cell-checkbox,
.cell-checkbox-header {
    width: 1.5rem;
    padding: 0.2rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.cell-checkbox input[type="checkbox"],
.cell-checkbox-header input[type="checkbox"] {
    margin: 0;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.no-dropdown-select {
    background-image: none;
    padding-right: 10px;
    border: none;
}

.opening-times-divider-col-right {
    border-right: 3px solid #000;
}

.readonly-checkbox,
.readonly-checkbox + label {
    pointer-events: none;
    opacity: 0.6;
}

.readonly-select {
    pointer-events: none;
}

.closed-checkbox-cell > div > div {
    padding: 0 !important;
    margin: 0 !important;
}

.closed-checkbox-cell > div {
    padding-top: .5em !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.closed-checkbox-cell {
    text-align: center;
    vertical-align: middle;
    padding: 0;
    height: 100%;
}

.closed-checkbox-cell input[type="checkbox"] {
    margin: 0;
    position: relative;
    top: 0;
}

.opening-hours-td > div {
    margin-bottom: 0 !important;
}

.w-90px {
    width: 90px;
}

.goods-line-item-number-input.is-invalid {
    padding-right: 0.40rem !important;
    background-image: none !important;
}

.timedropdowninput.is-invalid {
    padding-right: 0.40rem !important;
    background-image: none !important;
}

.nothing:has(.timedropdowninput.is-invalid) .invalid-feedback {
    display: block !important;
}

/* Same fix, same reason, as the .timedropdowninput rule above: EmailDropdownInput's own template
   (woei/templates/woei/email_dropdown_input.html) wraps the actual <input> two levels deep
   (.emails-dropdown-input-container > .input-group > input), so crispy's own .invalid-feedback
   (rendered as a sibling of .emails-dropdown-input-container, not of the input itself) never
   matches Bootstrap's default ".is-invalid ~ .invalid-feedback" sibling selector -- the red
   border/icon on the input still shows (that's just a class on the input), but the "this field is
   required" text stays invisible. Found via a colleague's manual test of Resource 1009's
   phone/mail requirement (06/08/26), but this widget is shared with CustomerMasterAddressForm too. */
.nothing:has(.email-input.is-invalid) .invalid-feedback {
    display: block !important;
}

#page-content-wrapper {
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.content-ready #page-content-wrapper {
    opacity: 1;
}

.disabled-overlay {
  position: relative;
  pointer-events: none;
}

.disabled-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 10;
}

.disabled-overlay-with-message::after {
  content: attr(data-overlay-message);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 15px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 11;
  white-space: nowrap;
  color: #666;
}

#order-goods-line-items-wrapper.hide-barcode-packaging .goods-line-barcode-col,
#order-goods-line-items-wrapper.hide-barcode-packaging .goods-line-packaging-col {
    display: none !important;
}

.startup-message-modal .modal-body img {
    max-width: 100%;
    height: auto;
}

.startup-message-modal .modal-body p,
.startup-message-modal .modal-body ul,
.startup-message-modal .modal-body ol,
.startup-message-modal .modal-body li,
.startup-message-modal .modal-body h1,
.startup-message-modal .modal-body h2,
.startup-message-modal .modal-body h3,
.startup-message-modal .modal-body h4,
.startup-message-modal .modal-body h5,
.startup-message-modal .modal-body h6 {
    margin-bottom: 0;
    margin-top: 0;
}

/* Resource 1010 ("Geolocatie levering", doc 30): clicking anywhere on the map moves the pin there
   (static/js/site.js, geolocationPinMap.on('click', ...)) -- Leaflet's default grab-hand cursor on
   the map background is meant for "drag to pan", and reads as "you can't place things here, only
   drag the map itself", which is exactly the opposite of the intended interaction. Overriding it to
   a plain pointer makes clicking read as clickable; panning by dragging still works regardless of
   the cursor shown. Reported by a colleague's manual test (07/08/26): the grab hand made them think
   the pin could only be moved by dragging it directly. Marker dragging itself keeps Leaflet's own
   cursor (a real drag interaction, unlike the map background). */
#geolocation-map.leaflet-grab {
    cursor: pointer !important;
}

/* Sprint 50, "Klanten verwijderen": grey out an archived company's row in the Bedrijven list
   (cms/tables.py CompanyTable/AllCompaniesTable row_attrs). Bootstrap's own .text-muted only sets
   inherited text color, which its link-color rule (applied directly to <a>, more specific than an
   inherited color) overrides - the linkified company-name column stayed full-color regardless.
   opacity dims every descendant uniformly (links, icons, everything), confirmed on staging
   (27/08/26, manual test) to actually look greyed out. */
.archived-company-row {
    opacity: 0.5;
}