/** font for our logo **/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --cm-yellow:  rgb(252,178,20);
    --cm-pale-yellow: #feef9e;
    --cm-green: rgb(19,60,65);
    --cm-light-green: rgb(132,175,176);
    --cm-dark-green: rgb(13,46,50);
    --cm-dark-green-transparent: rgba(13,46,50,0.6);
    /* Primary-button fills only. One step lighter than --cm-green so the
       button reads as deliberate dark teal rather than near-black; hover goes
       LIGHTER because on a dark fill darkening is imperceptible. */
    --cm-btn-primary: #17515a;
    --cm-btn-primary-hover: #1b5e69;
    --cm-light-green-transparent: rgba(132,175,176,0.6);
    --cm-white: #ffffff;
    --cm-danger: #F44336;
    --cm-danger-soft: rgba(244, 67, 102, 0.62);
    --cm-dark-gray: #444;
    --cm-mid-gray:  #777 ;
    --cm-nav-color: rgb(169,169,169);
    --cm-light-gray: rgb(227,238,231) ;
    --cm-very-light-gray: #f8f8f8;
    /* A genuinely neutral soft fill. `--cm-light-gray` is green despite the
       name, so it tints anything it fills; reach for this where a surface
       should read as grey rather than as part of the green palette. */
    --cm-neutral-gray: #ededed;
    --cm-lines-color: rgb(210,215,208);
    /* Row separators only. A table draws one line per row, so the weight that
       reads as a border around a single card reads as ruling on a long list;
       this is the same hue stepped a third of the way to white. The header's
       bottom edge stays on --cm-lines-color — it bounds the band, it is not
       one of the rules inside it. */
    --cm-table-line-color: rgb(226,229,224);
    --cm-color-credited-bg: #edbd6b;
    --cm-color-danger-bg: rgb(254,160,163);
    --cm-color-warning-bg: rgb(254,222,131);
    --cm-color-success-bg: rgb(178,246,178);
    --cm-color-info-bg: #2196F3;
    --cm-color-danger:  rgb(154,59,62);
    --cm-color-credited: #875807;
    --cm-color-warning: rgb(143,111,33);
    --cm-color-success: rgb(43,132,40);
    --cm-color-info: #fff;
    --cm-font-color: #1F2429;
    --cm-table-heading-color: #5A646E;
    --cm-table-heading-bg-color: #F7F8F9;
    --cm-background-color: #e8e8e6;
    --cm-border-radius: 4px;
    --cm-card-border-radius: 4px;
    --cm-grid-column-gap: 30px; /* TODO rem? */
    --cm-grid-row-gap: 30px; /* TODO rem? */
    --cm-button-border-radius: 24px;
    /* One vertical step between form fields, everywhere a form lives. */
    --cm-form-field-gap: 18px;

    /* fonts */
    --cm-ui-font-family: 'figtree', sans-serif;

    /* font sizes */
    --cm-html-font-size: 15px;
    /* from here on, everything in rem or em! */
    --cm-normal-font-size: 1rem;
    --cm-h1-font-size: 1.86rem;
    --cm-h2-font-size: 1.7333rem;
    --cm-h3-font-size: 1.466rem;
    --cm-h4-font-size: 1.06rem;
    --cm-h5-font-size: 1.0rem;
    --cm-h6-font-size: 0.9rem;

    /* order status colors */
    --cm-status-concept: rgb(103,103,103);
    --cm-status-new: #5c5a5a;
    --cm-status-cancelled: #d68d0f;
    --cm-status-estimate: #7b6585;
    --cm-status-option: #177896;
    --cm-status-to-invoice: #fff;
    --cm-status-invoiced: #851b1b;
    --cm-status-confirmed: #7f8c7a;
    --cm-status-completed: #545353;
    --cm-status-partial-invoiced: #b84852;
    --cm-status-to-invoice: #961529;
    --cm-status-prospect: #28728a;
    --cm-status-awaiting-confirmation: #2a7d6f;

    /* A reminded invoice and a sent quote are the same "we have contacted them,
       now we wait" state, and they were the same colours written out twice.
       Pale blue keeps it in the family with the other pill fills — the pill
       said "notified", not "problem", but a solid #2196F3 with white text
       shouted louder than overdue did. */
    --cm-status-reminded-bg: #dbe9f5;
    --cm-status-reminded: #2a5f8f;

    /* Overdue is the loudest thing a pill says, but it sits in a row of pale
       fills, so a saturated red made it read as an error banner rather than a
       status. Same lightness as the confirmed/cancelled fills beside it; the
       dark text carries the urgency. Separate from --cm-color-danger-bg, which
       also paints calendar day-labels. */
    --cm-status-late-bg: #fbdad9;

    /* The credited pill sits beside the open/unpaid one, which fills with
       --cm-status-cancelled-bg. Same amber, one step darker, so the two read as
       neighbours rather than as unrelated states. Separate from
       --cm-color-credited-bg, which also paints a calendar day-label. */
    --cm-status-credited-bg: #f5dcae;

    --cm-status-concept-bg: #f2f2f2;
    --cm-status-new-bg: #dedede;
    --cm-status-cancelled-bg: rgb(253,234,201);
    --cm-status-estimate-bg: #f0e4f5; /* #e7d8ed; */
    --cm-status-option-bg: #c6ebf7 ;
    --cm-status-to-invoice-bg: #e3b8b8; /* #f78f8f; /* #fc7e91; */
    --cm-status-invoiced-bg: #c48b8b ; /* #c98181; /*#fc6f6f; */
    --cm-status-partial-invoiced-bg: #f0d1d4;
    --cm-status-confirmed-bg: rgb(222,249,213);
    --cm-status-completed-bg: #b3bbc9;
    --cm-status-prospect-bg: #cef5f4;
    --cm-status-awaiting-confirmation-bg: #afeee4;

    --cm-status-concept-bg-secondary: #aaa;
    --cm-status-new-bg-secondary: #8a8a8a;
    --cm-status-cancelled-bg-secondary: #d68d0f;
    --cm-status-estimate-bg-secondary: #aa80bd;
    --cm-status-option-bg-secondary: #4a9bb5;
    --cm-status-to-invoice-bg-secondary: #b06d6d;
    --cm-status-confirmed-bg-secondary: #96b08d;
    --cm-status-invoiced-bg-secondary: #914141;
    --cm-status-partial-invoiced-bg-secondary: #b5607e;
    --cm-status-completed-bg-secondary: #757474;
    --cm-status-prospect-bg-secondary: #4a9bb5;
    --cm-status-awaiting-confirmation-bg-secondary: #6bc4b5;
}


.tr-debug {
  box-shadow: 0 0 0 2px rgba(32,32,32,0.6);
}

.label-success {
    background-color: var(--cm-color-success-bg);
    color: var(--cm-color-success);
}

@keyframes popIn {
    0% { color: white; opacity: 0; transform: scale(1.44, 1.1) rotate(-5deg); }
    100% { color: inherit; opacity: 1; transform: scale(1,1) rotate(0deg); }
}

@keyframes popIn2 {
    0% { opacity: 0%; transform: scale(4.7, 1.3) rotate(-34deg); }
    40% { opacity: 50%; transform: rotate(8deg); }
    60% { opacity: 75%; transform: scale(1, 1.8) rotate(13deg); }
    100% { opacity: 100%; transform: scale(1, 1) roate(0deg); }
}

@keyframes popIn3 {
    0% { color: white; opacity: 0; transform: scale(1.1, 1); }
    100% { color: inherit; opacity: 1; transform: scale(1, 1); }
}

@keyframes popIn4 {
    0% { transform: scale(1, 1) rotate(0deg); }
    23% { transform: scale(0.97, 0.97); }
    38% { transform: scale(1.03, 1.03) rotate(2deg); }
    62% { transform: rotate(-1deg); }
    100% { transform: scale(1, 1); }
}


@keyframes emphasizeIt {
    0% { border-width: thick; border-color: var(--cm-yellow); }
    100% { border-width: thin; }
}
@keyframes emphasizeGlowing {
    0% { border-color: var(--cm-yellow); }
    100% { border-color: transparent; }
}
@keyframes emphasizeCompleted {
    0% { border-color: var(--cm-yellow); }
    50% { border-width: medium; }
    100% { border-color: var(--cm-green); border-width: thin; }
}

@keyframes horizontalSlide {
    0% { opacity: 0%; transform: translate(-250px,0); }
    50% { opacity: 100%; transform: translate(0); }
    100% { opacity: 0%; transform: translate(250px,0); }
}

.horizontal-slide {
    display: inline-block;
    animation: horizontalSlide 5s ease-in-out infinite;
}

@keyframes slideDown {
    0% { opacity: 0%; transform: translateY(-50px); }
    75% { opacity: 50%; }
    100% { opacity: 100%; transform: translate(0); }
}

.slide-down {
    animation: slideDown 0.1s ease-out;
}

@keyframes slideLeft {
    0% { opacity: 0%; transform: translateX(50px); }
    75% { opacity: 50%; }
    100% { opacity: 100%; transform: translate(0); }
}

.slide-left {
    animation: slideLeft 0.1s ease-out;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate-border-angle {
  0%     { --angle: 0deg; }
  100%   { --angle: 360deg; }
}

.moving-border {
  position: relative;
}

.btn.moving-border:hover {
  background-color: rgba(255,255,255,0.6);
}

.moving-border::before,
.moving-border::after {
  content: "";
  position: absolute;
  inset: -0.2rem;
  z-index: -1;
  background: linear-gradient(var(--angle), var(--cm-yellow),  #C3F2FF, var(--cm-green));
  animation: rotate-border-angle 10s linear infinite;
  border-radius: var(--cm-button-border-radius) !important;
}

.moving-border:hover {
  color:black;
}

.moving-border:hover::before,
.moving-border:hover::after {
  animation-duration: 3s;
  animation-direction: reverse;
}

.moving-border::after {
  xfilter: blur(10px);
}

.ql-align-justify {
    text-align: justify;
}

.estimate-page-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* The estimate pages are laid out at the size they print or present at (an A4
   or a 1123px 16:9 slide, written inline per page), and the wrap centres them.
   Narrower than a page, centring hangs equal amounts off BOTH edges with
   nothing scrolling — the left margin of the quote is simply gone. Anchor the
   pages left and scroll the wrap instead; the page keeps its real geometry,
   which is the point of a preview. */
@media only screen and (max-width: 900px) {
    .estimate-page-wrap {
        align-items: flex-start;
        max-width: 100%;
        overflow-x: auto;
    }
}

.estimate-page-wrap h1,
.estimate-page-wrap h2,
.estimate-page-wrap h3,
.estimate-page-wrap h4,
.estimate-page-wrap h5 {
    color: inherit;
}

.Panton-ExtraBold {
	font-family: Panton-ExtraBold;
	font-weight: normal;
	font-style: normal;
}

.Panton-Regular {
	  font-family: Panton-Regular;
	  font-weight: normal;
	  font-style: normal;
}

.w-95-procent {
   width: 95%;
}

.align-center {

    text-align: center;
}
.delay-1s {
    animation-delay: 1s;
}

.loading-popup-monkey {

}

.hourly-rate-form {
    display: flex;
}

.hourly-rate-form div:nth-of-type(1) {
}

.hourly-rate-form div.money input {
    height: 21px !important;
}

.hourly-rate-form div:nth-of-type(2) {
    width: 60px;
    margin-right: 5px;
}


.check-list {
    display: flex;
    border-bottom: 1px solid #ededed;
    padding: 10px 0px;
    text-align: left;
}

.check-list:last-of-type {
    border: none;
}
.check-list .check-box > a {
    margin-right: 40px;
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    line-height: 60px;
    font-size: 30px;
}

.loading-minimal {
    width: 100%;
    height: 100vh;
    display: flex;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(230,230,230,1) 100%);
}

.loading-minimal img {
    margin: auto;
    width: 220px;
}


[data-current-skin="bluegray"] {
    /*
background-color: #353A65;
    background: linear-gradient(220deg, #353A65 0%, #353A65 50%, #353A65 100%);
*/
    background-color: var(--cm-green)
}

.s-profile > a {
    display: block;
    height: 60px;
    margin-bottom: 5px;
    width: 100%;
    /*background: url(../img/profile-menu.png) left top no-repeat;*/
    background-color: #fff;
    background-size: auto auto;
    background-size: 100%;
}

.s-profile > a .sp-pic {
    padding: 12px;
}

.s-profile .sp-pic > img {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    border: 0px solid rgba(0,0,0,.14);
    box-sizing: content-box;
}
/* The whole footer sits inside one rounded pill container, with the
   avatar + icons spread evenly across it. */
.nav-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 12px 10px;
    padding: 7px 12px;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 30px;
}
.nav-footer .nav-footer-avatar {
    display: inline-flex;
    border-radius: 50%;
}
.nav-footer .nav-footer-avatar.active {
    box-shadow: 0 0 0 2px var(--cm-yellow);
}
.nav-footer .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

/* Icons sit bare on the container; only hover / active state fills a pill. */
.nav-footer .nav-footer-icon a {
    color: var(--cm-white) !important;
    font-size: 1.3rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    background-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-footer .nav-footer-icon a:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--cm-white) !important;
}

/* Logout lives in the ear on the sidebar edge (below); the in-pill copy is
   for touch only, where there is no hover to reveal the ear with. Six icons
   are ~8px wider than the pill, so the gap tightens there. */
.nav-footer .nav-footer-icon.logout {
    display: none;
}
/* The staff portal has no logout ear, so its pill carries logout on every
   pointer type. */
.nav-footer.nav-footer-staff .nav-footer-icon.logout {
    display: block;
}
@media (hover: none) {
    .nav-footer {
        gap: 4px;
    }
    .nav-footer .nav-footer-icon.logout {
        display: block;
    }
}

/* The logout ear: a half-round tab flush against the sidebar's right edge,
   level with the footer pill, in the collapsed-toggle's tab style. It is
   invisible until the pill is hovered, and keeps its place while the cursor
   crosses over to it — nothing in the pill moves, so the icon under the
   cursor is always the one that was there. */
.nav-logout-ear {
    position: fixed;
    left: 268px;   /* sidebar width when expanded */
    bottom: 19px;  /* pill margin 12px + (48px pill - 34px ear) / 2 */
    z-index: 1050;
    width: 30px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-white) !important;
    font-size: 1.3rem;
    /* The sidebar's gradient ends in dark green, so the ear continues it. */
    background-color: var(--cm-dark-green);
    border-radius: 0 17px 17px 0;
    box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.15s, background-color 0.15s ease;
}
/* Bridges the 10px of sidebar between the pill and the ear: hovering it
   counts as hovering the ear, so the cursor can leave the pill for the ear
   without the ear fading (and going inert) halfway across. */
.nav-logout-ear::before {
    content: "";
    position: absolute;
    left: -10px;
    top: -7px;
    width: 10px;
    height: 48px;
}
#main:has(.nav-footer:hover) .nav-logout-ear,
.nav-logout-ear:hover {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}
.nav-logout-ear:hover {
    background-color: var(--cm-light-green);
}
/* Touch has no hover, so the pill carries logout itself (above). This must
   come after the ear's own rules: at equal specificity the later `display`
   wins, and a tap leaves the pill `:hover`, which would fade the ear in on top
   of the pill's help icon on a full-width phone nav. */
@media (hover: none) {
    .nav-logout-ear {
        display: none;
    }
}

/* Active footer icon: pale-yellow pill, matching the main-menu active look. */
.nav-footer .nav-footer-icon.active a,
.nav-footer .nav-footer-icon.active a:hover {
    background-color: var(--cm-pale-yellow);
    color: var(--cm-green) !important;
}

/* Main-nav items are inset uniformly so the active/hover pill reads as a
   rounded pill without shifting the other items. */
.main-menu > li > a {
    margin: 2px 10px;
    border-radius: 30px;
}
.main-menu > li > a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 30px;
}
.main-menu > li.active > a,
.main-menu > li.active:hover > a {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--cm-white);
}
.main-menu > li.active > a > i {
    color: var(--cm-yellow);
}
/* Search is a control, not a destination, so it wears its pill permanently —
   but as a hairline only, with no fill of its own.

   Fill is how the active item says "you are here". Giving search a fill too,
   even a lighter one, put two filled pills in the nav competing to be the
   selected one; an outline is a different signal rather than a weaker version
   of the same one, and it reads as the field it opens. Hover is the nav's
   ordinary hover, so it behaves like every neighbour. */
.main-menu > li.nav-global-search {
    /* A control, not the first destination, so it sits apart from the list
       rather than at the top of it. It borrows the space above — there was 30px
       of air under the logo — instead of pushing every item below it down. */
    margin-top: -8px;
    margin-bottom: 12px;
}
.main-menu > li.nav-global-search > a {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* The `/` shortcut, as a keycap on the right of the pill. Shown on hover only:
   it is a reminder for the second time you reach for search, and a key sitting
   there permanently competes with the label for a nav item nobody is reading
   yet. Absolute, so appearing costs the pill no layout. */
.main-menu > li.nav-global-search > a .nav-search-kbd {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    min-width: 18px;
    padding: 0 5px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    opacity: 0;
    transition: opacity 120ms ease;
}
.main-menu > li.nav-global-search > a:hover .nav-search-kbd,
.main-menu > li.nav-global-search > a:focus-visible .nav-search-kbd {
    opacity: 1;
}

/* No keyboard, no shortcut — the same rule the attract-mode tip follows. */
@media (pointer: coarse) {
    .main-menu > li.nav-global-search > a .nav-search-kbd { display: none; }
}

/* The collapsed nav drops every pill; this one goes with them, and the keycap
   has no room beside an icon-only item. */
.sidebar.move-out .main-menu > li.nav-global-search {
    margin: 0;
}
.sidebar.move-out .main-menu > li.nav-global-search > a {
    background-color: transparent;
    box-shadow: none;
}
.sidebar.move-out .main-menu > li.nav-global-search > a .nav-search-kbd {
    display: none;
}

/* Centre the icon on the pill rather than pinning it to the anchor's top edge
   with hand-tuned padding. The padded icon box (13 + 20 + 13 = 46px) is shorter
   than the anchor (49.4px), so `top: 0` alone left the glyph ~1.7px above the
   pill's centre — and the label carried a compensating -2px nudge to match it,
   putting both above centre. Stretching the box top-to-bottom and centring the
   glyph inside it makes this independent of the anchor's padding and
   line-height, so the label needs no nudge. */
.main-menu > li > a > i {
    top: 0;
    bottom: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-menu > li > a .nav-item-text {
    position: relative;
    top: 0;
}
/* Keep the collapsed (icon-only) nav flush — no pill inset. */
.sidebar.move-out .main-menu > li > a {
    margin: 0;
    border-radius: 0;
}

/* Group labels. Deliberately inert: a dropdown here would put the most-used
   page behind an extra click. Aligned to the icon column (10px anchor margin
   + 16px icon offset) rather than the label column, so the heading reads as
   spanning the group instead of belonging to a row. */
.main-menu > li.nav-group-heading {
    padding: 16px 20px 4px 26px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.45);
    cursor: default;
    pointer-events: none;
}
/* Collapsed (icon-only): the label has no room, so the heading becomes the
   divider rule between groups. Zero height because `.main-menu`'s 27px flex
   gap already supplies the breathing room on both sides. */
.sidebar.move-out .main-menu > li.nav-group-heading {
    padding: 0;
    width: 22px;
    height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.sidebar.move-out .main-menu > li.nav-group-heading .nav-item-text {
    display: none;
}

.user-info {
    flex-grow: 1;
    font-size: 0.8rem;
}

.user-info .username {
    color: var(--cm-yellow);
}
.user-info .company {
    color: var(--cm-nav-color);
}

/* Logo and company name are treated as one block: the wrap owns the width, the
   logo fills it, and the name aligns to `flex-start` — the logo's own left
   edge. Sizing the GROUP rather than centring each child independently is what
   lets the name line up under the logo's first letter without hard-coding it.
   The logo must not also be sized in %, or the two would size off each other.

   The 26px inset lines the logo's left edge up with the nav icons below it.
   That figure is not a variable anywhere: the nav `<a>` carries margin-left:10px
   and its icon sits 16px into the link's 52px left padding. If the nav inset
   changes, this has to follow — there is nothing to keep them in step
   automatically. */
.app-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin: 0 26px 30px;
}
.app-logo-wrap .company {
    color: var(--cm-nav-color);
}
.sidebar .app-logo {
    margin-top: 20px;
    width: 100%;
}

.company.select select {
    background-color: var(--cm-green);
    border: none;
    border-radius: 0;
    color: var(--cm-nav-color);
}

body .company.select:hover::before {
    background-image: url("../img/caret_inversed.png") !important;
}

body .company.select::before {
    background-image: none !important;
}

.user-info .my-profile a {
    color: var(--cm-white);
}
.bgm-green {
    background-color: #6fd273;
}
.cm-grid {
    display: grid;
    grid-column-gap: 30px;
    grid-row-gap: 20px;
}

.cm-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.status-checkboxes {
    gap: 20px;
    flex-wrap: wrap;

}

.report-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}


.oo-checkbox-grid {
    margin-top: 5px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Order-overview settings: each section (Gegevens, Productinformatie, …) is a
   column; its checkboxes stack vertically within the column. */
.oo-groups-grid {
    margin-top: 24px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: start;
}

.oo-checkbox-group > b {
    display: block;
    margin-bottom: 8px;
}

.oo-checkbox-group-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oo-checkbox-group-items .checkbox {
    margin: 0;
}

/* Online order-overview viewer: the section blocks no longer sit inside an
   outer card, so give them their own outline (matches the order editor). */
.order-overview-viewer .card {
    border: 1px solid var(--cm-lines-color);
    border-radius: 8px;
}

.cm-grid  .checkbox {
    margin-top: 0px;
}

.cm-grid.three-col {
    grid-template-columns: 1fr 1fr 1fr;
}

.cm-grid.auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}


/* Responsive Media Queries */

.hide-xs { display: revert; }
.hide-sm { display: revert; }
.hide-md { display: revert; }
.hide-lg { display: revert; }
.hide-xl { display: revert; }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 768px) {
    .xs-only { display: revert !important; }
    .hide-xs { display: none !important; }

    .desktop-view .estimate-page.a4-portrait {
        display: none;
    }

    .mobile-view .estimate-page.a4-portrait {
        display: revert;
    }
    .mobile-view .estimate-section:not(.responsive-bg-image) {
        margin-left: 2px;
        margin-right: 2px;
    }
    .mobile-view .estimate-section.responsive-bg-image {
        margin-left: 0px;
        margin-right: 0px;
    }


    .intercom-lightweight-app-launcher, .intercom-launcher {
        display: none !important;
    }

    .hero .sub-slogan {
        flex-direction: column;
        text-align: center;
    }
    #app-logo-login {
        width: 320px;
    }

    .maty-block {
        width: 100%;
    }
    .card .card-header .actions {
        position: static;
        margin-left: 10px;
    }
    .orders-list .actions {
    }

    .orders-list .actions > li:first-of-type {
        display: block;
    }

    .modal.fixed {
        position: static;
    }
    .normal-modal .modal-dialog {
        width: 95% !important;
    }

    .modal-body label {
        display: block;
    }
    .order-filter-modal .filter-button {
        margin-bottom: 10px;
    }

    .filter-button-row {
        margin-bottom: 70px;
    }

    .order-editor-grid {
        display: flex;
        flex-direction: column;
    }

    .alternative-group-wrap {
        width: 100%;
    }

    .get-started-buttons {
        flex-direction: row;
        align-items: space-evenly;
    }

    .get-started-buttons > div {
        margin-top: 10px;
        margin-left: 0px !important;
    }

    #l-register {
        padding-left: 15px;
        padding-right: 15px;
    }

    .center-box img {
        max-width: 90%;
    }

    #site .nav {
        height: 390px;
    }

    #site .nav .pull-left {
        display: inline-block;
        width: 100%;
        float: none !important;
    }

    #site .nav .pull-left li {
        display: block;
    }

    #site .nav .pull-right {
        display: inline-block;
        width: 100%;
        float: none !important;
    }

    #site .nav .pull-right li {
        display: block;
    }

    #site .nav li {
        padding: 10px;
        display: block;
        width: 100%;
        border-bottom: 1px solid #ededed;
    }

    #site .nav li.sign-up {
        margin-top: 10px;
    }

    #site .nav li a {
        display: block;
    }

    #site .nav li.flags a {
        display: inline-block;
    }

    .staff-portal-grid-id td .col-md-2 .pull-right {
        float: none !important;
    }

    .wildatheart > div {
        column-count: 2;
    }

    .partyz .content {
        background-size: cover;
    }

    .partyz .content-logo {
        position: static;
        width: 200px;
        margin: 0 auto;
    }

    .partyz .content-text {
        position: static;
        margin-top: 20px;
        width: 100%;
    }

}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .sm-only { display: revert !important; }
    .hide-sm { display: none !important; }

    .desktop-view .estimate-page.a4-portrait {
        display: revert;
    }
    .mobile-view .estimate-page.a4-portrait {
        display: none;
    }
    .mobile-view .estimate-section:not(.responsive-bg-image) {
        margin-left: 8px;
        margin-right: 8px;
    }
    .mobile-view .estimate-section.responsive-bg-image {
        margin-left: 0px;
        margin-right: 0px;
    }

}

/* Extra small AND small devices!  */
@media only screen and (max-width: 768px) {
    .order-editor-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "general general"
            "customer location"
            "products products"
            "comments comments"
            "planning planning"
            "estimates estimates"
            "invoices invoices"
            "gks gks"
            "view-estimate view-estimate"
            "internal-comments internal-comments"
            "staff staff"
            "sent-items sent-items"
            "files files"
            "margin margin"
            "ingredients ingredients"
            "activitylog activitylog";
    }

    .staff-portal-grid-id tbody tr td {
        display: flex;
        flex-direction: column;
        padding-left: 30px;
    }

    .staff-portal-grid-id tbody tr {

        border: 2px solid black;
    }

    .price-grid {
        grid-template-columns: 1fr;
    }
}

#content .container-fluid {
    padding-left: 70px;
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .md-only { display: revert !important; }
    .hide-md { display: none !important; }
}


/* Extra small, small AND medium devices */
@media only screen and (max-width: 992px) {
    .desktop-view .estimate-page.a4-landscape {
        display: none;
    }
    .desktop-view .estimate-page.page-16-9 {
        display: none;
    }

    .mobile-view .estimate-page.a4-landscape {
        display: revert;
    }
    .mobile-view .estimate-page.page-16-9 {
        display: revert;
    }
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .lg-only { display: revert !important; }
    .hide-lg { display: none !important; }

    .desktop-view .estimate-page.page-16-9 {
        display: revert;
    }
    .desktop-view .estimate-page.a4-landscape {
        display: revert;
    }

    .mobile-view .estimate-page.a4-landscape {
        display: none;
    }
    .mobile-view .estimate-page.page-16-9 {
        display: none;
    }

    .modal-dialog {
     /*   width: 922px; */
    }
    .cm-grid.two-col {
        grid-template-columns: 1fr 1fr;
    }
}

/* Extra small, small, medium AND large devices */
@media only screen and (max-width: 1200px) {
    #site .nav li {
        padding: 20px 25px;
    }
    #site .nav li.sign-up {
        padding: 10px 20px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .xl-only { display: revert !important; }
    .hide-xl { display: none !important; }

    .invoice-editor .document {
        width: 760px !important;
    }
    .modal-dialog {
/*        width: 950px; */
    }
    #content .container-fluid.container-margin-left {
        padding-left: 290px;
    }
}

.xs-only { display: none; }
.sm-only { display: none; }
.md-only { display: none; }
.lg-only { display: none; }
.xl-only { display: none; }

/* END OF RESPONSIVE MEDIA QUERIES */

.mobile-view .estimate-column { /* Responsive estimate columns on smaller screens */
    width: 100%;
    margin: 0px;
}

.s-profile > a .sp-info {
    padding: 14px 15px;
    color: #16192B;
    margin-top: 7px;
    position: relative;
    border-bottom: 1px dashed #ededed;
}


.s-profile > a .sp-info span {
    font-weight: bold;
}


table .commands  {
    vertical-align: top !important;
    padding-top: 13px !important;
}

/* Datagrid rows size to their CONTENT, not to their action button.
   A one-line row is 18px of text, but the row was 57px: the commands cell adds
   3px of extra top padding and holds a button whose `btn-xs` is overridden to
   `6px 16px`, making it 33px on its own. Rows that DO have a second line still
   grow — this only stops the empty ones from paying for it. */
.bootgrid-table td.commands {
    padding-top: 10px !important;
}

.bootgrid-table td.commands .btn {
    padding: 3px 10px;
}

/* `waves-circle` pins a width AND height on the button, so padding alone left
   it 33px and the row could not shrink past it. `.blocked-days-grid` already
   carries this same workaround. */
.bootgrid-table td.commands button.waves-circle {
    width: auto !important;
    height: auto !important;
}

/* Middle, on every grid. On a single-line row there is no slack to distribute
   so it is indistinguishable from top; the difference shows on a row where one
   cell runs to a second line, and there centring is what stops the checkbox and
   the one-line cells sitting against the top edge while their neighbour fills
   the row. The cost is that a two-line cell's FIRST line no longer shares a
   baseline with its neighbours. */
.bootgrid-table tbody td,
.bootgrid-table td.commands {
    vertical-align: middle !important;
}

/* The header reads as one of the rows rather than a squashed strip above them:
   same vertical padding, so the same height. */
.table.bootgrid-table > thead > tr > th {
    /* !important because `table thead tr th` carries one. */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    /* A header never wraps. `Prijs (incl. BTW)` broke across two lines and took
       the whole header band with it, so the band's height was decided by the
       narrowest column rather than by the text. A label is short by
       construction; if one is long enough to need the room, the column is
       misnamed. */
    white-space: nowrap;
    /* Closes the header band. `table > tbody > tr:first-of-type > td` clears the
       first data row's border-top, so without this the band has no bottom edge
       and the column titles float above the list. Darker than the row rules on
       purpose: it bounds them. */
    border-bottom: 1px solid var(--cm-lines-color);
}

.bootgrid-table {
    width: 100% !important;
}

.order-overview .bootgrid-table tbody td:last-of-type {
    padding-right: 5px !important;
}
.order-overview .bootgrid-table tbody td:last-of-type .delete {
    margin-right: 20px;
}


table .commands .commands-inner {
    display: flex;
    gap: 5px;
}

.ungrouped

.ungrouped.bootgrid-table .commands {
    display: table-cell !important;
    overflow: hidden;
}

.ungrouped.bootgrid-table td {
    border-top: 1px solid #f3f3f3;
}

.s-profile > a .sp-info > i {
    font-size: 19px;
    line-height: 100%;
    position: absolute;
    right: 15px;
    top: 7px;
    -webkit-transition: all;
    -o-transition: all;
    transition: all;
        transition-duration: 0s;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.su-stats {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
    grid-template-columns: 1fr 1fr;
}


.alternatives-widget .alternative {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
/* Keep the address pin on the same line as the customer name. The name link
   holds the contact-person name in a block <div> for companies-with-a-contact,
   so a plain-flow sibling pin drops below it; flex lays them out side by side. */
.order-grid-customer-cell {
    display: flex;
    align-items: flex-start;
}

/* Map pin in list rows: reveal only while the row is hovered, so it doesn't
   clutter the resting view. Space is reserved (opacity, not display) so hover
   never reflows the row. Scoped to `tr` so the week/month calendar pins, which
   render outside a table row, stay always visible. */
tr .cm-map-pin {
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}
tr:hover .cm-map-pin {
    opacity: 1;
}

.alternative-group-wrap {
    max-width: 800px;
}

.alternative-products u li {
    flex-grow: 1;
}
.alternative-products u li > div.flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alternative-products .prod-name {
    flex-grow: 1;
    max-width: 66%;
}
.alternative-products .premium {
    width: 200px;
}
.alternative-settings {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 10px;
}

/*.alternative-settings > div {
    display: flex;
    margin-right: 20px;
    flex-direction: row;
    justify-content: flex-start;
}*/
.alternative-settings > div:last-of-type {
    margin-right: 0px;
}

.alternative-selector {
    display: flex;
    justify-content: space-between;
    /* width: 300px; */
}

.alternative-selector > div.select {
    width: 300px;
}

/* Selection-group product picker: a multi-select checklist (tick to add, untick
   to remove) replacing the per-item dropdown. Order is stable and delete-safe. */

/* Stretch the checklist to the full width of the (centred) flex-column settings
   parent so its scrollbar sits at the card's right edge, not floating inside the
   content next to the meerprijs box (CAT-1131). */
.alternative-checklist {
    width: 100%;
    align-self: stretch;
}

.alternative-checklist ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.alternative-checklist li.alternative-product-row {
    padding: 6px 0;
    margin: 0;
}

.alternative-checklist li.alternative-product-row .flex-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.alternative-checklist li.alternative-product-row .checkbox.prod-name {
    margin: 0;
    flex-grow: 1;
}

.alternative-checklist li.alternative-product-row.is-disabled {
    opacity: 0.5;
}

/* Selection group as a bordered, collapsible card (CAT-1131). */
.alternative-group-card {
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-card-border-radius);
    padding: 16px 20px;
}

.alternative-group-card .alternative-title {
    align-items: center;
    margin: 0;
}

.alternative-group-card .alternative-title > strong {
    font-size: var(--cm-h3-font-size);
    color: var(--cm-font-color);
}

.alternative-group-card .alternative-title-actions {
    align-items: center;
}

.alternative-group-card .alternative-collapse-btn {
    color: var(--cm-font-color);
}

.alternative-group-card .alternative-group-body {
    margin-top: 16px;
}

/* Give the add-group button room so it isn't glued to a (collapsed) group card. */
.alternatives-add-group {
    margin-top: 24px;
}

/* Group-name field: a normal input with the long helper as small text below. */
.alt-group-name .form-control {
    width: 100%;
}

.alt-group-name .alt-group-name-help {
    display: block;
    margin-top: 4px;
    color: var(--cm-mid-gray);
    font-style: italic;
    font-size: 0.85rem;
}

/* Min / max settings and the rato checkbox on one wrapping row. */
.alternative-settings-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.alternative-settings-row > div {
    display: flex;
    align-items: center;
}

/* Long product names wrap; the "meerprijs" box keeps a fixed right position. */
.alternative-checklist li.alternative-product-row .flex-row {
    align-items: flex-start;
    flex-wrap: nowrap;
}

.alternative-products .prod-name {
    max-width: none;
    flex: 1 1 0;
    min-width: 0;
}

.alternative-products .prod-name label {
    display: flex;
    align-items: flex-start;
}

.alternative-products .premium {
    flex: 0 1 200px;
    width: 200px;
    min-width: 120px;
}

.alternative-products .premium input {
    width: 100%;
}

/* Narrow screens: let the price box drop under the wrapping name instead of
   overflowing the card. */
@media (max-width: 600px) {
    .alternative-checklist li.alternative-product-row .flex-row {
        flex-wrap: wrap;
    }

    .alternative-products .prod-name {
        flex: 1 1 100%;
    }

    .alternative-products .premium {
        flex: 1 1 100%;
        width: 100%;
        margin-top: 6px;
    }
}


.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active {
}

a {
}
a.focus , a:hover {
    color: var(--cm-yellow);

}

a.disabled {
    opacity: 0.38;
    filter: grayscale(0.38);
    cursor: auto !important;
}

.create-webshop-button :hover {
    animation: popIn4 0.47s ease-out;
}

#app-logo-login {
    width: 375px;
    margin-top: 20px;
}

#app-logo-login-text {
    width: 160px;
}

#app-logo {
   border: 0px solid red;
   width: 50px;
   margin-top: -10px;
}

#app-logo-font {
   width: 160px;
   margin-left: 20px;
   margin-bottom: 5px;
   position: absolute;
   top: 25px;
   right: 30px;
}

.login-content {
   text-align: center;
   overflow: visible;
}

.reg-panel-wrap {
    display: flex;
}


.reg-logo-wrap {
    width: 50%;
    position: fixed;
    text-align: center;
    margin-top: 40px;
}
.reg-logo-wrap object {
    width: 400px !important;
}

@media screen and (max-width: 1079px) {
    .reg-panel {
        flex-direction: column;
    }
    .reg-logo-wrap {
        width: initial;
        position: static;
        text-align: center;
    }
}

.reg-sales-text .mobile-only {
    display: none;
}

@media screen and (max-width: 450px) {
    .bounce {
        display: inline-block; /* or any other display property as needed */
        animation: bounce 1.4s ease-in-out infinite;
    }

    @keyframes bounce {
        0%, 100% {
            transform: translateY(0); /* Start and end position */
        }
        50% {
            transform: translateY(-20px); /* Bouncing up */
        }
    }
    .reg-logo-wrap {
        margin-top: 15px;
    }

    .reg-logo-wrap object {
        max-width: 300px !important;
    }
    .reg-sales-text {
    }
    .reg-panel .left-panel,
    .reg-panel .right-panel
    {
        justify-content: start !important;
        padding-top: 10px;
        flex: 0 !important;
    }
    .reg-panel .right-panel {
        flex-grow: 1 !important;
    }

    .reg-sales-text .mobile-only {
        display: block;
        width: 100%;
        text-align: center;
        color: rgb(254,190,21)  !important;
        font-size: 75px;
        line-height: 0.8;
    }

    .left-panel {
        padding-bottom: 10px !important;
    }

}

.reg-panel {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.reg-panel .half-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.registration-button {
    background: linear-gradient(to right, rgb(254,190,21) 0%, rgb(254,190,21) 75%, rgb(255,222,130) 100%);
    border: none;
    border-radius: var(--cm-border-radius);
    padding: 10px 20px;
    font-weight: bold;
    color: var(--cm-green);
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    transition: background 0.3s ease;
}
.registration-button:disabled {
    background: linear-gradient(to right, rgb(220, 180, 100) 0%, rgb(220, 180, 100) 75%, rgb(200, 200, 180) 100%);
    cursor: not-allowed;
    color: var(--cm-green);
    opacity: 0.6; /* Slightly transparent */
}

/* --- SSO buttons (Google / Microsoft) -------------------------------- */
.sso-section {
    margin-top: 30px;
}
.sso-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #888;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.sso-divider::before,
.sso-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #e5e5e5;
}
.sso-divider span {
    padding: 0 14px;
}
.sso-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 16px;
    margin-bottom: 10px;
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.sso-button:hover {
    background: #f8f9fa;
    border-color: #c6c9ce;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    text-decoration: none;
}
.sso-button svg {
    flex-shrink: 0;
}
.reg-sales-panel,
.reg-sales-panel h2,
.reg-sales-panel h1
{
    color: white;
}
.reg-sales-text p {
    font-size: 12pt;
}
.reg-sales-text ul {
    list-style: none; /* Remove default list dots */
    padding-left: 0; /* Remove default padding */
    font-size: 12pt;
}
.reg-sales-text ul li {
    position: relative;
    margin-bottom: 10px; /* Optional spacing between items */
}

.reg-sales-text ul li .zmdi  {
    color: rgb( 244,193,70);
    font-size: 24px;
    line-height: 1;
}



.reg-sales-panel {
    max-width: 500px;
}


.reg-panel .left-panel {
    background-color: transparent;
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
}

.reg-panel .right-panel {
    background-color: white;
    display: flex;
    align-items: center;
    padding: 40px;
}

.reg-panel .register-form input {
    background-color: rgb(234,241,236);
    border-radius: 6px;
    padding: 3px 6px;
    border: none !important;
}

.reg-panel .right-panel .register-form {
    max-width: 500px;
}

.login-content {
    display: flex;
    text-align: left;
    margin: auto;
    max-width: 640px;

}

.lc-block {
    border-radius: 8px;
}

.login-content .lc-block {
    width: inherit;
}

.get-started-buttons {
    display: flex;
    align-items: baseline;
}

#l-register {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
}
#l-register > img {
    align-self: center;
}

.loading-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    align-items: center;

}


.loading-box .loading-logo {
    margin-bottom: 20px;
}

.loading-box .loading-logo img {
   max-width: 300px;
}

.error-listing {
   text-align: left;
}

#l-register .field-iban,
#l-register .field-bank_account_owner {
    width: 100% !important;
}

.login-content .image-logo {
    width: 140px;
}

.login-content .text-logo {
    width: 240px;
    margin-top: 10px;
}

.reg-panel-wrap .cm-input-group {
    width: 100%;
}
.cm-input-group {
    position: relative;
}
.input-group {
    position: relative;
}

.input-group-addon {
    position: absolute;
    right: 0px;
    top: 3px;
}

.input-group-addon .zmdi-check {
    margin-left: 40px;
}

.trialing-period {
    border: 0px solid red;
    width: 100%;
}

.trialing-period .hovered {
    display: none;
}

.trialing-period:hover .hovered {
    display: block;
}
.trialing-period:hover .not-hovered {
    display: none;
}

.error-listing ul {

}
.alert {
    border-radius: var(--cm-border-radius);
}

.alert.alert-warning {
   background-color: var(--cm-color-warning-bg);
   color: var(--cm-font-color);
}

.alert > i.zmdi {
   font-size: 16pt;
   vertical-align: middle;
}

i.zmdi.danger {
    color: var(--cm-danger);
}

i.zmdi.warning {
   color: #FFC107;
}

i.zmdi.success {
   color: #4CAF50;
}

i.zmdi.info {
   color: #2196F3;
}

.alert-info > a {
    color: var(--cm-pale-yellow);
}
.alert-info {
    background-color: var(--cm-light-green);
}

.alert-info-light {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-green);
}

.alert-info-light > a {
    color: var(--green);
}

.peppol-validation-errors {
    padding-left: 0;
    max-height: 200px;
    overflow-y: auto;
    font-size: 11px;
}




.invoice-status {
    background-color: #ccc;
}

.invoice-status.late {
    background-color: var(--cm-status-late-bg);
    color: var(--cm-color-danger);
}

.invoice-status.credited {
    background-color: var(--cm-status-credited-bg);
    color: var(--cm-color-credited);
}

.invoice-status.reminded {
    background-color: var(--cm-status-reminded-bg);
    color: var(--cm-status-reminded);
}


.invoice-status.concept {
    background-color: var(--cm-light-gray);
    color: var(--cm-mid-gray);
}
table tr:hover .invoice-status.concept {
    border: 1px solid var(--cm-lines-color);
}

/* An unpaid invoice and a cancelled order are the same "needs attention, not
   yet an error" state, so they share the order palette's amber rather than the
   generic warning tokens. */
.invoice-status.open {
    background-color: var(--cm-status-cancelled-bg);
    color: var(--cm-status-cancelled);
}

/* Paid and confirmed are the same "settled" state; same green as the order
   palette, not the generic success tokens. */
.invoice-status.paid {
    background-color: var(--cm-status-confirmed-bg);
    color: var(--cm-status-confirmed);
}

.invoice-status-icon {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    border: 1px solid var(--cm-lines-color);
    /* The dot sits in a flex row next to a label that may wrap; without this it
       is the flexible item and collapses to a shard. */
    flex: 0 0 auto;
}

/* ... */
.invoice-status-icon.concept {
    background-color: var(--cm-status-concept-bg);
    border: 1px solid var(--cm-lines-color);
}

.invoice-status-icon.prospect {
    background-color: var(--cm-status-prospect-bg);
}

.invoice-status-icon.option {
    background-color: var(--cm-status-option-bg);
}

.invoice-status-icon.estimate {
    background-color: var(--cm-status-estimate-bg);
}

.invoice-status-icon.awaiting-confirmation {
    background-color: var(--cm-status-awaiting-confirmation-bg);
}

.invoice-status-icon.confirmed {
    background-color: var(--cm-status-confirmed-bg);
}

.invoice-status-icon.cancelled {
    background-color: var(--cm-status-cancelled-bg);
}

.invoice-status-icon.partial-invoiced {
    background-color: var(--cm-status-partial-invoiced-bg);
}

.invoice-status-icon.invoiced {
    background-color: var(--cm-status-invoiced-bg);
}
.invoice-status-icon.to-invoice {
    background-color: var(--cm-status-to-invoice-bg);
}
.invoice-status-icon.completed {
    background-color: var(--cm-status-completed-bg);
}



/* ... */

.invoice-status-icon.late {
   background-color: var(--cm-color-danger);
}


.invoice-status-icon.reminded {
    background-color: var(--cm-color-info);
}


.invoice-status-icon.open {
    background-color: var(--cm-color-warning);
}


.invoice-status-icon.paid {
    background-color: var(--cm-color-success);
}

.sidebar {
    opacity: 1 !important;
}

.sidebar.move-out .main-menu > li > a:hover {
    background-color: transparent !important;
}



.sidebar.move-out { /* collapsed */
  transform: translate3d(0px,0,0) !important;
  width: 50px !important;
}
.sidebar.move-out .main-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 27px;
}

.sidebar.move-out .line-wrap {
    margin: 12px 15px !important;
}

.sidebar.move-out .main-menu > li > a > i {
    position: static;
}
.sidebar.move-out .nav-footer {
    padding: 0px;
}

.sidebar.move-out .nav-footer .avatar img {
    width: 30px;
    height: 30px;
}

.sidebar.move-out .main-menu > li{
    display: block;
}


.sidebar.move-out .main-menu > li > a {
    padding: 0px;
    display: block;
    width: 22px;
    height: 22px;
}
.sidebar.move-out .company {
    opacity: 0; /* Fade in when the parent animation completes */
    height: 22px;
}

.sidebar.move-out .main-menu li .nav-item-text,
.sidebar.move-out .app-logo,
.sidebar.move-out .complete-account,
.sidebar.move-out .trialing-period
{
    opacity: 0; /* Fade in when the parent animation completes */
}

.sidebar.move-in .main-menu li .nav-item-text,
.sidebar.move-in .company,
.sidebar.move-in .nav-footer .user-info,
.sidebar.move-in .app-logo,
.sidebar.move-in .complete-account

{
    opacity: 1;
    transition: opacity 0.1s ease-in-out; /* Fade in */
    transition-delay: 250ms; /* Delay equal to the parent's animation duration */

}

.sidebar.move-out .nav-footer {
    flex-direction: column;
}
.sidebar.move-out .nav-footer .user-info {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.sidebar.move-out .app-logo-wrap {
    padding-left: 0px;
    align-items: center;
    margin-top: 20px;
}

.sidebar.move-out .app-logo-wrap .company,
.sidebar.move-out .app-logo-wrap .trialing-period,
.sidebar.move-out .complete-account {
    display: none !important;
}

.sidebar.move-out img.app-logo-mobile {
    display: inline-block;
}
.sidebar.move-in img.app-logo-mobile {
    display: none;
}

.sidebar.move-out img.app-logo {
    opacity: 0;
    width: 0px;
    height: 0px;
    margin-top: 0px;
}
.sidebar.move-in img.app-logo {
    display: inline-block;
}


.sidebar.move-in {
  transform: translate3d(0px,0,0) !important;
}

.sidebar.move-in {
    /* collapsed menu styling */

}
.sidebar.move-in {

}

.nav-toggle-wrap {
    display: flex;
    flex-direction: row;
}

.hi-trigger {
   cursor: pointer !important;
   display: block !important;
}

.line-wrap .line {
    background-color: white ;
}

.huge-icon {
  font-size: 64pt;
  color: #ccc;
}

.align-right {
   text-align: right;
}

.align-center {
    text-align: center;
}

.align-left {
   text-align: left;
}

.commands > span {
   margin-right: 5px;
}




.blog-article {

    max-width: 768px;
    margin: 0 auto;

}

.site-body li {
    font-size: 13pt;
}

.blog-article img {
    width: 508px;
    margin: 0px auto;
    display: block;
}

.blog-article h1 {
    margin-top: 40px;

}

.article-thumb {
   margin: 30px 0px;
   padding-bottom: 20px;
   border-top: 1px solid #ededed;
}


.quil-display-area img,
.quil-display-area table
{
   width: 100%;
}

.quil-display-area img.user-image {
   width: auto;
   max-width: 400px;
}

.quil-display-area table th,
.quil-display-area table td {
   padding: 2px 5px;
}



.rsvp.declined {
     color: #FFC107;
}

.rsvp.accepted {
     color: #4CaF50;
}

.rsvp.invited {
    color: #a0d5f2;
}


.filter-button.order-status {
    padding: 6px 16px;
}

.filter-button.deactivated {
    background-color: var(--cm-lines-color) !important;
    color: var(--cm-mid-gray) !important;
    opacity: 0.8;
    border: none !important;
}

.filter-pills-row .btn:not(.bgm-teal):not(.btn-select-toggle):not(.btn-primary) {
    opacity: 0.4;
    transition: opacity 0.15s;
}

.filter-pills-row .btn:not(.bgm-teal):not(.btn-select-toggle):not(.btn-primary):hover {
    opacity: 0.8;
    transition: opacity 0.3s;
}

.filter-pills-row .filter-button.order-status.deactivated.new { background-color: var(--cm-status-new-bg) !important; color: var(--cm-status-new) !important; border-color: var(--cm-status-new) !important; }
.filter-pills-row .filter-button.order-status.deactivated.concept { background-color: var(--cm-status-concept-bg) !important; color: var(--cm-status-concept) !important; border-color: var(--cm-status-concept) !important; }
.filter-pills-row .filter-button.order-status.deactivated.option { background-color: var(--cm-status-option-bg) !important; color: var(--cm-status-option) !important; border-color: var(--cm-status-option) !important; }
.filter-pills-row .filter-button.order-status.deactivated.estimate { background-color: var(--cm-status-estimate-bg) !important; color: var(--cm-status-estimate) !important; border-color: var(--cm-status-estimate) !important; }
.filter-pills-row .filter-button.order-status.deactivated.awaiting-confirmation { background-color: var(--cm-status-awaiting-confirmation-bg) !important; color: var(--cm-status-awaiting-confirmation) !important; border-color: var(--cm-status-awaiting-confirmation) !important; }
.filter-pills-row .filter-button.order-status.deactivated.confirmed { background-color: var(--cm-status-confirmed-bg) !important; color: var(--cm-status-confirmed) !important; border-color: var(--cm-status-confirmed) !important; }
.filter-pills-row .filter-button.order-status.deactivated.cancelled { background-color: var(--cm-status-cancelled-bg) !important; color: var(--cm-status-cancelled) !important; border-color: var(--cm-status-cancelled) !important; }
.filter-pills-row .filter-button.order-status.deactivated.completed { background-color: var(--cm-status-completed-bg) !important; color: var(--cm-status-completed) !important; border-color: var(--cm-status-completed) !important; }
.filter-pills-row .filter-button.order-status.deactivated.prospect { background-color: var(--cm-status-prospect-bg) !important; color: var(--cm-status-prospect) !important; border-color: var(--cm-status-prospect) !important; }
.filter-pills-row .filter-button.order-status.deactivated.to-invoice { background-color: var(--cm-status-to-invoice-bg) !important; color: var(--cm-status-to-invoice) !important; border-color: var(--cm-status-to-invoice) !important; }
.filter-pills-row .filter-button.order-status.deactivated.partial-invoiced { background-color: var(--cm-status-partial-invoiced-bg) !important; color: var(--cm-status-partial-invoiced) !important; border-color: var(--cm-status-partial-invoiced) !important; }
.filter-pills-row .filter-button.order-status.deactivated.invoiced { background-color: var(--cm-status-invoiced-bg) !important; color: var(--cm-status-invoiced) !important; border-color: var(--cm-status-invoiced) !important; }
.order-status.concept {
    color: var(--cm-status-concept);
    background-color: var(--cm-status-concept-bg);
}

.order-status.new {
    color: var(--cm-status-new);
    background-color: var(--cm-status-new-bg);
}


.order-status.cancelled {
     color: var(--cm-status-cancelled);
     background-color: var(--cm-status-cancelled-bg);
}

.order-status.estimate {
    color: var(--cm-status-estimate);
    background-color: var(--cm-status-estimate-bg);
}

.order-status.confirmed {
     color: var(--cm-status-confirmed);
     background-color: var(--cm-status-confirmed-bg);
}

.order-status.to-invoice {
     color: var(--cm-status-to-invoice);
     background-color: var(--cm-status-to-invoice-bg);
}

.order-status.partial-invoiced {
    color: var(--cm-status-partial-invoiced);
    background-color: var(--cm-status-partial-invoiced-bg);
}

.order-status.invoiced {
    color: var(--cm-status-invoiced);
    background-color: var(--cm-status-invoiced-bg);
}

.order-status.option {
    color: var(--cm-status-option);
    background-color: var(--cm-status-option-bg);
}

.order-status.completed {
    color: var(--cm-status-completed);
    background-color: var(--cm-status-completed-bg);
}

.order-status.prospect {
    color: var(--cm-status-prospect);
    background-color: var(--cm-status-prospect-bg);
}


.roster-conflict {
}

.inline-datepicker {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.inline-datepicker .datepicker-wrapper .datepicker {
   border: 1px solid #ccc;

}

.datepicker-wrapper .datepicker {
    z-index: 9999999999 !important;
}

.order-overview .inline-datepicker {
   font-size: 7pt;
   display: inline-block !important;
}
/*
input, input.form-control, select.form-control {
    border: 1px solid var(--cm-light-gray) !important;
    border-radius: 6px;
}

input.form-control {
    padding-left: 5px !important;
    margin-bottom: 5px;
}

select.form-control {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

div.select::before {
    background: none !important;
}
*/
.order-overview .inline-datepicker .form-control{
   font-size: 7pt;
   height: 20px;
}
.inline-datepicker .input-group-addon {
   padding-left: 0px;
   padding-right: 0px;
   display: none !important;
}

.input-group.date > input {
  padding-left: 10px;
}

.inline-datepicker .datepicker-wrapper,
.inline-datepicker .input-group.date {
    display: inline-block !important;
}

.datepicker-wrapper span.input-group-addon {

}

.datepicker-wrapper .form-control {
}

.datepicker-wrapper .form-control {
    width: 100px;
    border-radius: var(--cm-border-radius) !important;
}


.datepicker table td.day,
.datepicker table td.month,
.datepicker table th
{
   cursor: pointer;
}

.datepicker table td.day,
.datepicker table th
{
   text-align: center;
}

.inline-datepicker .datepicker {
   position: absolute;
   z-index: 9999;
}

.order-overview .table-responsive > table > tbody > tr > td.col-order_id {
   min-width: 20px;
}

.order-overview .table-responsive > table > tbody > tr > td.col-date {
   min-width: 20px;
}

.order-overview .table-responsive > table > tbody > tr > td.col-customer_id {
    min-width: 200px;
}

.order-overview .table-responsive > table > tbody > tr > td.col-name {
    min-width: 20px;
}

.order-overview .table-responsive > table > tbody > tr > td.col-price {
   width: 200px;
   text-align: right;
}

.order-overview .table-responsive > table > thead > tr > th.col-price {
    text-align: right;
}
.order-overview .table-responsive > table > thead > tr > th.col-price:not(.commands) > div:last-of-type {
    display: none;
}

.order-overview .table-responsive > table > tbody > tr > th.col-price {
   font-size: 8pt;
}

.order-overview .table-responsive > table > tbody > tr > td.col-actions {
   width: 20px;
   padding: 10px 10px !important;
}


/* The products grid's row marks: "has a recipe" and its absence.

   Brand tokens rather than `green`/`#ccc`: the check says the same thing the
   confirmed pill says, so it wears the same colour, and a saturated green next
   to those pale fills reads as a different vocabulary. The padding keeps the
   glyph off the neighbouring cell in a 40px column. */
.product-mark {
    color: var(--cm-status-confirmed);
    padding: 0 4px;
}
.product-mark-muted {
    color: var(--cm-mid-gray);
}
/* The photo glyph is the only mark you can click, so it gets a hover state —
   but it is a mark first: default black made it the loudest thing in a column
   of quiet ones. */
.product-mark-action {
    cursor: pointer;
}
.product-mark-action:hover {
    color: var(--cm-dark-green);
}

.extra-order-options {
   font-size: 14pt;
   color: var(--cm-mid-gray);
   width: 24px;
   cursor: pointer;
}
.extra-order-options-wrap {
   position: relative;
   /* Matches `.extra-order-options`: at 16px the icon overflowed its own wrap
      into a cell that clips. */
   width: 24px;
   text-align: right;
}
.extra-order-options-modal {
   position: absolute;
   width: 230px;
   z-index: 9999999 !important;
   right: 10px !important;
   top: 15px !important;
   left: inherit !important;
   display: block !important;
}


.modal {
  display: block !important;
}

.normal-modal .modal-dialog {

}
.normal-modal .modal-dialog.scrollable {
   height: 95% !important;
}

.modal-dialog.scrollable {
   height: 95% !important;
}

.modal.fixed {
    position: fixed !important;
    z-index: 999999;
}

.modal .modal-content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 90%;
}


.button-bar-inner {
    display: flex;
    flex-direction: column;
    row-gap: 10px;

}
.button-bar-inner > div:first-of-type {
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
}

.modal .modal-body {
    overflow: auto;
    /*overscroll-behavior: contain;*/
}

.modal.fade.in {
    display: block;
}
.w-95-procent {
    width: 95% !important;
}

.h-95-procent {
    height: 95%;
}

.customer-search-results-wrap {
   position: relative;
}
.customer-search-results,
.product-search-results {
  background-color: white;
  box-shadow: 3px 3px 3px #ccc;
  z-index: 99999;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid #ededed;
}

.pricelist-customer-panel .customer-search-results {
    top: 120px !important;
}

.product-search-results {
   top: 30px;
}

.search-result-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ededed;
}

.search-result-item .flex {
    gap: 30px;
    justify-content: space-between;

}

.search-result-item .flex > div:first-of-type {
    flex-grow: 1;
}
.search-result-item .flex > div {
    min-width: 100px; /* needed for alignment */
}

.search-result-item.active,
.search-result-item:hover {
   background-color: #ededed;
}

.contacts-item-header {
  padding: 10px;
  border-bottom: 1px solid #ffffff;
  background-color: #ededed;
}

.modal.normal-modal .datepicker-wrapper .form-control {
    width: 85px;
}


/* drag and drop */
.draggable, .dropped-element {
   position: relative;
}

.draggable .drag-mask,
.dropped-element .drag-mask {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 0px;
   height: 0px;
   background-color: rgba(0,0,0,0.2);
   z-index: 9999;
}

.drop-zone.highlight {
}

.drag-box-wrap {
  z-index: 999999999 !important;
}

.drag-box {
  position: fixed;
  background-color: rgba(0,0,0,0.1);
  z-index: 999999999 !important;
  height: 0px;
  width: 0px;
}

.product-drop-zone-wrap {
}
.product-edit-row {
    display: flex;
}

.product-edit-row h4 {
    display: inline-block;
}

.product-edit-row,
.product-row-non-edit-row  {
    display: flex;
    gap: 5px;
}

.product-edit-row {
    align-items: baseline;
}


.product-row-headers .product-name-cell,
.product-row-non-edit-row .product-name-cell {
    width: 100%;
    flex-shrink: 1;
}
/* edit row should use grow */
.product-edit-row .product-name-cell {
    flex-grow: 1 !important;
}
.product-edit-row .product-name-cell > div {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.product-edit-row.product-edit-title {
    padding-right: 16px;
}
.invoice-editor-body .product-edit-row.product-edit-title {
    padding-right: 0px;
}


.product-edit-row .quantity-cell,
.product-row-non-edit-row .quantity-cell {
    width: 50px;
    margin-right: 5px;
}
.product-edit-row .product-edit-commands,
.product-row-non-edit-row .product-edit-commands {
    width: 150px;
}

.product-row-non-edit-row .product-price-cell {
    width: 90px;
}

.product-margin-column, .product-percentage-column {
    width: 120px;
    text-align: right;
}

.product-edit-row .product-edit-discount,
.product-row-non-edit-row .product-edit-discount {
    width: 90px;
}


.product-row-non-edit-row .product-name-cell.hidden-product,
.product-row-non-edit-row .quantity-cell.hidden-product,
.product-row-inner.hidden-product,
.cm-sub-products .hidden-product {
    color: #bbb;
}

/* `cs2.order-util/sub-products` lays its rows out with Bootstrap grid markup,
   and a `.row` carries `margin: 0 -15px` because it expects a container that
   pads 15px. A datagrid cell pads 10px, so the row reaches past the cell's left
   border and the cell's `overflow: hidden` takes the first character off every
   sub-product name.

   Only visible when sub-quantities are hidden: that branch zeroes the
   `.col-sm-11` gutter, which is what otherwise cancels the row's negative
   margin out.

   Scoped to `.bootgrid-table` rather than fixed in `sub-products` itself, which
   is cljc and also renders estimate and invoice PDFs — those sit in a container
   the negative margin is correct for. */
.bootgrid-table .cm-sub-products > .row.product-row {
    margin-left: 0;
    margin-right: 0;
}

.product-edit-row .product-edit-price,
.product-row-non-edit-row .product-edit-price {
    width: 120px;
}

.product-edit-row > div.align-right {
    text-align: right;
}

.product-headers-edit-wrap {
    margin-left: 50px;
}

.product-total-row {
    padding-top: 5px;
    padding-bottom: 5px;
}


/* unset re-dnd styling */
#drop-zone-product-drop-zone,
#drop-zone-charges-drop-zone {
    width: 100% !important;
}
#drop-zone-product-drop-zone .dropped-element,
#drop-zone-charges-drop-zone .dropped-element {
    display: flex !important;
    margin-left: inherit !important;
    margin-right: inherit !important;
}

#drop-zone-product-drop-zone .dropped-element .col-md-11,
#drop-zone-charges-drop-zone .dropped-element .col-md-11 {
    width: inherit !important;
    padding: 0px !important;
    flex-grow: 1;
}

.product-row {
   border-bottom: 1px solid #ededed;
   padding-top: 10px;
   padding-bottom: 10px;
}

.dropped-element {
  /* border-bottom: 1px solid #ededed; */
}


.product-drop-zone-marker {
   height: 2px;
   background-color: #ededed;
   border: 1px solid black;
}


/* TODO style me */
.drag-handle {
   cursor: move;
   cursor: -webkit-grab;
}

.bold {
  font-weight: bold;
}

.new-product {
   padding: 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.new-product  div.title {
   padding-top: 5px;
}

.new-product .type {
    display: flex;
    align-items: center;
    gap: 5px;
}

.new-product .type input {
    margin-bottom: 0px;
}
.new-product .type input {
    margin: 0px;
    margin-right: 20px;
}
.products-subtitle {
  font-weight: bold
}

.product-total-rows div.row {
   padding-top: 10px;
   padding-left: 5px;
}

.product-total-rows div.row div.align-right {
  padding-right: 20px;
}

.search-result-item {
  cursor: pointer;
}

input.hidden-xs-up {
    display: none !important;
}

.upload-label {
  width: 100%;
  height: 40px;
  display: block;
  padding: 10px;
  cursor: pointer;
  background-color: #ededed;
}

.upload-label label {
  cursor: pointer;
  display: block;
  width: 100%;
}


.upload-label:hover {
  background-color: #ccc;
 }

.product-import-preview table td:nth-of-type(3) {
   text-align: right;
}

.import-preview tr.invalid {
    border-left: 2px solid red;
}


.import-preview tr.valid {
    border-left: 2px solid green;
}

.import-preview tr.skipped {
    border-left: 2px solid yellow;
}

.import-row-error {
   position: absolute;
   right: 50px;
   top: 10px;
   background-color: white;
   border: 1px solid #ededed;
   box-shadow: 3px 3px 3px #ccc;
   padding-top: 10px;
   text-align: left;
   padding-right: 20px;
   z-index: 99999999;
}


.estimate-editor .canvas {
   background-color: #eee;
   padding-top: 20px;
   padding-bottom: 20px;
}

.webshop-sections-wrap {
  position: relative;
}
/*base font sizes*/
.estimate-editor.estimate-base-font-size-6 .estimate-template {--estimate-base-font-size: 6pt;}
.estimate-editor.estimate-base-font-size-7 .estimate-template {--estimate-base-font-size: 7pt;}
.estimate-editor.estimate-base-font-size-8 .estimate-template {--estimate-base-font-size: 8pt;}
.estimate-editor.estimate-base-font-size-9 .estimate-template {--estimate-base-font-size: 9pt;}
.estimate-editor.estimate-base-font-size-10 .estimate-template {--estimate-base-font-size: 10pt;}
.estimate-editor.estimate-base-font-size-11 .estimate-template {--estimate-base-font-size: 11pt;}
.estimate-editor.estimate-base-font-size-12 .estimate-template {--estimate-base-font-size: 12pt;}
.estimate-editor.estimate-base-font-size-13 .estimate-template {--estimate-base-font-size: 13pt;}
.estimate-editor.estimate-base-font-size-14 .estimate-template {--estimate-base-font-size: 14pt;}
.estimate-editor.estimate-base-font-size-15 .estimate-template {--estimate-base-font-size: 15pt;}
.estimate-editor.estimate-base-font-size-16 .estimate-template {--estimate-base-font-size: 16pt;}
.estimate-editor.estimate-base-font-size-17 .estimate-template {--estimate-base-font-size: 17pt;}

.estimate-template h1 {font-size: calc(var(--estimate-base-font-size) + 8pt);}
.estimate-template h2 {font-size: calc(var(--estimate-base-font-size) + 6pt);}
.estimate-template h3 {font-size: calc(var(--estimate-base-font-size) + 4pt);}
.estimate-template h4 {font-size: calc(var(--estimate-base-font-size) + 3pt);}
.estimate-template h5 {font-size: calc(var(--estimate-base-font-size) + 2pt);}
.estimate-template h6 {font-size: calc(var(--estimate-base-font-size) + 1pt);}


.estimate-editor .document-wrap {
  position: relative;
  overflow: hidden;

}

.estimate-editor .document {
   position: relative;
   background-color: white;
   width: 790px;
   min-height: 1117px;
   margin: 0 auto;
   padding: 55px 50px 50px 55px;
   border-radius: 3px;
   box-shadow: 0 0 10px 0 rgba(19, 29, 41, 0.05);
}

.estimate-editor .document h1,
.estimate-editor .document h2,
.estimate-editor .document h3,
.estimate-editor .document h4,
.estimate-editor .document h5,
.estimate-editor .document h6 {
    font-family: inherit !important;
    font-weight: inherit !important;
    color: inherit;
    line-height: inherit !important;
}


.invoice-editor .document {
   width: 912px !important;
}

.estimate-editor .document .document-contents {

}


.estimate-preview-button {
   cursor: pointer;
}




.drop-zone .drag-handle {
    visibility: visible;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 34px;
    text-align: center;
}

#drop-zone-estimate-drop-zone .drag-handle  {
    visibility: hidden;
}


.document-hovered #drop-zone-estimate-drop-zone .drag-handle  {
    visibility: visible;
}



.drop-zone .drag-handle .zmdi {
    display: block;
}

.drop-zone .drag-handle .zmdi.zmdi-menu {
    cursor: ns-resize;
}

#drop-zone-estimate-drop-zone .actions {
    visibility: hidden;
}

.document-hovered #drop-zone-estimate-drop-zone .actions {
    display: inline;
    visibility: visible;
}

#drop-zone-estimate-drop-zone > .dropped-element > .dropped-element-body.col-md-11
#drop-zone-webshop-section-drop-zone  > .dropped-element > .dropped-element-body.col-md-11
{
   width: 100%;
   margin-bottom: 20px;
}

.dropped-element.row {
    display: flex;
    align-items: center;
}
.card .card .card .card-body {
    padding-top: 10px;
}

#drop-zone-estimate-product-dropzone  input[name="price_excl_vat"]  {
    width: 55px !important;
}

#drop-zone-estimate-product-dropzone  input[name="quantity"]  {
    width: 35px !important;
}

#drop-zone-estimate-product-dropzone  i.zmdi.edit {
   margin-right: 1px !important;
}

#drop-zone-estimate-drop-zone .drag-handle:hover {
}

#drop-zone-estimate-drop-zone .dropped-element {
    border-top: 1px solid white;
}

.document-hovered #drop-zone-estimate-drop-zone .dropped-element {
   border-top: 1px solid #ededed;
}

#drop-zone-estimate-drop-zone .dropped-element {
   border-bottom: 0px solid #ededed;
}

.estimate-drop-zone-marker {
   background-color: #ededed;
   border: 1px solid black;
}

.media-grid-wrap {
   border: 1px solid #ededed;
   border-radius: 6px;
   padding: 20px;
   max-height: 800px;
   overflow-y: auto;
}


.thumb-wrap {
  border: 1px solid var(--cm-lines-color);
  border-radius: var(--cm-border-radius);
  cursor: pointer;
  position: relative;
  justify-content: center;
  overflow: hidden;
  height: 240px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.thumb-wrap:hover {
  border-color: rgba(32,32,32,0.25);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.file-document .filename,
.img-document .filename {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 4px 8px;
    text-align: center;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    color: var(--cm-white);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.thumb-wrap:hover .filename {
    opacity: 1;
}
.img-document {
    height: 100%;
    position: relative;
}

.file-document {
    background-color: var(--cm-light-green-transparent);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.file-document .zmdi {
    font-size: 4rem;
    color: var(--cm-dark-green-transparent);
}

.uppy-wrap .uppy-Root {
    font-family: 'figtree' !important;
}


.flag-wrap {
    padding: 10px;
}
.flag-wrap.active {
    background-color: #ccc;
}

.thumb-wrap.active {
    border: 1px solid #2196f3;
}

.thumb-quick-insert {
  position: absolute;
  z-index: 9998;
  top: 3px;
  left: 3px;
}

.sweet-alert {
    z-index: 999999;
}

.sweet-alert p:last-of-type {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.thumb-quick-delete {
    position: absolute;
    z-index: 9998;
    top: 3px;
    right: 3px;
}


.thumb-wrap .thumb-actions {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 10;
    display: none;
    gap: 10px;
    align-items: center;
    background: white;
    padding: 0 10px;
    border-radius: 2rem;
    box-shadow: 0 0 3px 0 rgba(32,32,32,0.15);
    height: 30px;
}

.thumb-wrap:hover .thumb-actions {
    display: flex;
}

.thumb-actions .zmdi {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: black;
    font-size: 0.75rem;
    transition: background 150ms, color 150ms;
}

.thumb-actions .zmdi:hover {
    background: #f0f0f0;
    color: #333;
}

.thumb-actions a {
    display: flex;
    color: inherit;
}


.thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.image-text-widget-display img {
    width: 100%;

}

.image-text-widget-edit .img-container {
   position: relative;
}
.image-text-widget-edit .img-container button {
   position: absolute;
   left: 0px;
   top: 0px;
}

.table a {
   cursor: pointer;
}

.progress-wrap {
  height: 10px;
  position: relative;
  overflow-y: visible;
  height: 40px;
  padding-top: 15px;
  margin-bottom: 20px;
}

.progress.slider {
   cursor: pointer;
}

div.scroller {
   background-color: white;
   border: 1px solid #ccc;
   height: 24px;
   width: 10px;
   position: absolute;
   z-index: 99;
   top: 6px;
   cursor: pointer;

}

/* TODO add invoice-template */




.document.estimate-template-wrap {
   position: relative;
   padding: 0px;
}

.estimate-template .header {
     position: absolute;
     width: 100%;
     height: 280px;
     pointer-events: none;
     background-repeat: no-repeat;
     background-color: transparent;
}

.estimate-template .body {
    /* Since the pointer-events: none fix (above), somehow the position of children could be 'static'. Explicitly fix that here: */
    position: relative;
}

.document > div > .body,
.document > div > div > .body {
     padding: 200px 43px;
}

.estimate-view .document .body {
     height: auto !important;
}

.document .body.invoice-body {
     padding: 70px 43px;
     height: auto !important;
}

.document .body .footer {
  width: 100%;
  left: 0px;
  font-size: 1rem;
  position: absolute;
  bottom: 20px;
  text-align: center;
}

.picker-document-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.picker-document-colors > span {
    display: inline-flex;
}

.picker-document-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(0, 0, 0, 0.15);
}

.picker-document-color:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4285f4;
}

.chrome-picker  {
   box-shadow: none !important;
   border: 1px solid #ededed !important;
}
.modal .chrome-picker {
    width: 100% !important;
}

.file-document {
}

.popup-panel {
   position: fixed;
   top: 12px;
   right: 12px;
   box-shadow: 3px 3px 10px 6px #ddd;
   z-index: 999000000000000;
   background-color: var(--cm-light-green);
   color: var(--cm-white);
   padding: 20px 30px;
}



.sent-items-collapsed {
     height: 50px;
     overflow-y: hidden;
}

.sent-items-expanded {
     height: inherit;
     overflow-y: auto;
}

a {
   cursor: pointer;
}

.staff-overview table td:first-of-type {
    width: 30px;
}

.percentage-bar {
    height: 20px;
    border-radius: 2px;
    margin-bottom: 20px;
}

.percentage-bar .active {
    float: left;
    text-align: right;
    padding-right: 5px;
    color: white;
}

.bg-green {
    background-color: var(--cm-green);
}

.bg-yellow {
    background-color: var(--cm-yellow);
}

.modal .planning-section .items {
    align-items: center;
    border: 1px solid #ededed;
    grid-template-columns: 1fr !important;
}
.planning-divider-wrap {
    display: flex;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 30px;
    padding-right: 30px;
}

.planning-divider-wrap-2 {
    align-items: baseline;
}

.planning-divider .zmdi {
    font-size: 32px;
    color: #ccc;

}

.planning-toolbar {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    display: flex;
    align-items: top;
    justify-content: space-between;

}
.selected-staff table td:first-of-type,
.selected-staff table th:first-of-type {

}

.staff-overview table td:nth-of-type(2) {
     width: 304px;
}

.selected-staff table td:nth-of-type(2)  {
      width: 304px;
}

.m-l-60 {
   margin-left: 60px;
}

.shortage {
    color: red;
}

.too-many {
    color: orange;
}

.order-alert {
   position: relative;
}

.order-alert .tooltip {
   position: absolute;
   opacity: 1;
   background-color: white;
   box-shadow: 3px 3px 3px #ccc;
   padding: 10px;
   width: 350px;
   left: 0px;
   border: 1px solid #ededed;
   border-radius: 6px;
   z-index: 999999;
}
.table-responsive {
   overflow-x: auto !important;
}

.estimate-status.declined {
   color: #FFC107;
}
.estimate-status.accepted {
   color: #4CAF50;
}
.estimate-status.sent {
   color: #BA68C8;
}
.estimate-status.concept {
   color: var(--cm-mid-gray);
}

/* No width here on purpose: the products grid is a datagrid whose columns are
   configurable, so a hardcoded width fights whatever set the reader has chosen.
   A column that needs one declares `:width` in its field spec. This rule used
   to pin the name to 50%, which squeezed Type until "Food / drinks" wrapped
   onto two lines on every food row. */

.product-overview-table th.col-type {
   padding-right: 10px !important;
}
.tag-box-wrap {
    display: flex;
    gap: 10px;
}
.template-icon {
   color: var(--cm-mid-gray);
}



/* Temporary homepage centering */

#header {
  z-index: 9999;
}

.modal-dialog {
    margin-top: 80px;
}

.invoice-payment .datepicker,
.reports-filter .datepicker {
   position: absolute;
}

.reports-filter .datepicker {
  z-index: 9;
}

/** site */
.Aligner {
  display: flex;
  align-items: center;
  min-height: 12em;
  justify-content: center;
  height: 100vh;
}

.Aligner-item {
  flex: 1;
}

.center-box {
   border: 0px solid #ccc;

}

.center-box img {
   min-width: 480px;
}

.center-box a {
   display: inline-block;
   padding: 10px;
   background-color: #505361;
   color: white;
   text-transform: uppercase;
   font-size: 12pt;
   font-weight: bold;
   border-radius: 5px;
}


.center-box a:hover {
    background-color: #878ca3;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}

.Aligner-item--fixed {
  flex: none;
  max-width: 50%;
}


.site .nav {

}

.site .selling-points img {
  margin-bottom: 10px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  width: 65%;
  height: 200px;
}

.site .who-is-it-for img {
  margin-bottom: 10px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  height: 200px;
}




.site .nav li.logo {
   padding-right: 10px;
}

.site .nav .logo img:first-of-type {
   margin-right: 10px;
   width: 70px;
}

.logo-text  {
   display: inline-block;
   font-size: 19pt;
   color: black;
}

.site .nav ul {
   list-style-type: none;
   display: inline-block;
   padding-left: 0px !important;
   height: 93px;
}

.site a {
    color: #671751;
    font-weight: bold;
}

.site h1, .site h2, .site h3 {
    color: #671751;
}


.site a.btn {
    color: #fff;
}

.site .nav  ul:last-of-type {
   padding-top: 15px;
}

.site .nav li {
   display: inline-block;
   padding: 20px 20px;
}

.site .nav li a {
   font-family: Panton-ExtraBold;
   text-transform: lowercase;
   color: black;
   font-size: 12pt;
}
.site .nav li.log-in {

}

.site .nav li.sign-up {

}

.jumbo {
    font-size: 42pt;
    text-align: center;
}


h1.jumbo {
}

.hero h1, .hero h3 {
    color: #FFFFFF !important;
    text-shadow: 4px 3px 0px #7A7A7A;
    color: #FFFFFF;
}

.hero {
    padding: 30px 0px 50px 0px;
    background-color: red;
    background: rgb(145,175,116);
    background-image: linear-gradient(-45deg, #FFC796 0%, #FF6B95 100%);
}


.hero .container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hero .sub-slogan {
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: space-around;
    flex-grow: 1;
    flex-basis: 0;
    margin-bottom: 20px;
}


.hero .slogan {
    flex-grow: 1;
    flex-basis: 0;
}

.hero .video {
    margin: 0px auto;
}

.hero2   {
    text-align: center;
    background-color: #fff;
    padding: 40px 0px;
    background-size: cover;
}

.hero2 .container {
    display: flex;
    min-height: 250px;
}

.hero2 h1 {
    width: 100%;
    margin: auto;
}


h1.jumbo-alt {
    color: #222;
    font-size: 33pt;
}


.hero3 {
    background-image: linear-gradient(-225deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%);
}
.hero3 h1.jumbo-alt-2 {
    color: #ededed;
}


.hero3 {
    padding: 50px 0px;
}

.hero3 p {
    color: #ebebeb;
}

.video {
    text-align: center;
    max-width: 800px;
}

.video video {
    width: 100%;
    border-top: 2px solid #333;
    border-left: 2px solid #333;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
}

.clear {
   clear: both;
}

.site-body {
   background-color: white;
}

.site-body .hero .content .slogan h1 {
   color: white;
}

.site-body h1,
.site-body h2,
.site-body h3,
.site-body h4,
.site-body h5,
.site-body h6,
.site-body .cm-font,
.site-body .btn,
#app h1,
#app h2,
#app h3,
#app h4,
#app h5,
#app h6,
#app .cm-font,
{
  font-family: salesforce-sans;
  font-weight: bold;
	font-style: normal;
}

.catermonkey {
   color: #999;
}


.site .nav .sign-up {
   background-color: #179648;
   border-radius: 20px;
   padding: 10px 20px;
   color: white;
}


.site .nav .sign-up a {
   color: white;
}

.btn-signup {
    font-size: 14pt;
    background-color: #1bb171;
    border-radius: 24px;
    padding: 10px 20px;
    margin-top: 10px;
    text-transform: lowercase;
}
.btn-signup:hover {
    background-color: #1bb171 !important;
}

.selling-points {
   padding: 50px 0px;
}


.reference-quote blockquote {
   font-family: Panton-ExtraBold;
   font-weight: normal;
   font-style: italic;
   font-size: 13pt;
   color: #671751;
   border-left: 0px;
}

.quote-from {
   font-family: Panton-ExtraBold;
   font-weight: normal;
   font-style: normal;
   color: #555;
   text-align: right;
}


.who-is-it-for {
    padding: 50px 0px;
}

.who-is-it-for .container > .row {
    margin-bottom: 30px;
}


.other-companies {
   padding: 50px 0px;
   background-color: #1c1b37;
}


.other-companies .icons {
   margin-top: 20px;
}

.other-companies h1 {
    color: white;
}

.get-started-footer {
    padding: 100px 0px;
    background-color: #feffff;
}


.get-started-footer .logo {
   width: 150px;
}

.site-body p {
   font-size: 13pt;
}


.site-body .footer  {
   padding: 50px 0px;
}

.site-body .footer .footer-nav {
   text-align: center;

}

.site-body .footer .footer-nav ul li {
    display: inline-block;
    font-size: 13pt;
    padding: 10px 40px;
}


.site-body .footer .footer-nav ul li a {
    color: black;
}

.planning-edit-table td {
}

.planning-edit-table tr td:nth-of-type(2),
.planning-edit-table tr td:nth-of-type(4){
   width: 80px;
   padding-right: 0px;
   padding-left: 4px;
   margin-left: 0px;
}

.planning-edit-table tr td:nth-of-type(1) {
   width: 138px;
   padding-right: 0px;
}

.planning-edit-table tr td:nth-of-type(3){
   width: 130px;
   padding-right: 0px;
}

.planning-edit-table textarea {
    min-width: 150px;
}

.planning-edit-table input.desc {
    height: 26px;
}

.planning-edit-table .datepicker-wrapper {
   position: relative;
}

.planning-edit-table .datepicker-wrapper .dp-dropdown {
    position: absolute;
    z-index: 99999;
}

.general-box .datepicker-wrapper .dp-dropdown {
    right: 0px;
}

.planning-panel-view tr td:first-of-type {
    width: 176px;
    white-space: nowrap;
}

.planning-panel-view tr:hover td {
    background-color: transparent !important;
}

.planning-edit-table tr td:nth-of-type(7),
.planning-edit-table tr td:nth-of-type(8) {
   width: 33px;
}

.editor-modal-v2-template-mode .modal-header {
    background-color: #cadae6 !important;
}

.editor-modal-v2-template-mode .modal-content {
    border: 1px solid #0f6eaf !important;
}

.estimate-editor-v2  .planning-panel-view td {
    border: none !important;
}
.estimate-editor-v2  .planning-panel-view {
    background: transparent !important;
}

.planning-panel-view tr.hidden-from-estimates td {
   color: #999;
}

.card .planning-view-group-title td {
    background-color: var(--cm-table-heading-bg-color);
}

/* A row title is the card's second level under the day band, so it sits at
   the h3 register (one step above body), not above it. */
.card .planning-view-row .planning-view-row-title {
    font-weight: 600;
    font-size: 1rem;
}

.application-box {
   padding: 0px 30px;
   background-color: white;
}
#header .logo a {

    padding: 0px;
}

/* The same gradient the nav rail carries, so the two dark green surfaces in the
   product are one surface. The colour stays as the fallback: it is what shows
   if the image ever fails to resolve, and it is the token the rest of the page
   was designed against. */
.login-page, .registration-page {
    background-color: var(--cm-green);
    background-image: linear-gradient(180deg, #17474d 0%, #0d2e32 72%);
}

.login-panel-wrap, .reg-panel-wrap  {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    gap: 30px;
}

.login-content {
    width: 570px;
}
.login-panel-wrap .lc-block ,
.reg-panel-wrap .lc-block {
    margin-top: 0px;
}

.app-logo {
    width: 211px;
    display: block;
    max-height: 200px;
    overflow-y: hidden;
}
.app-logo-mobile {
    width: 32px;
    display: block;
}

.advanced-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px 10px;
}

/* Three fixed columns squeezed a label, a field and now a stepper into a third
   of a phone; the roles drop to one column when there is no room for two. */
.demand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 10px 20px;
}

.demand-form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.demand-form-item .demand-label {
    font-weight: 600;
}

/* --- Staff modal on a phone ------------------------------------------------
   Its action rows are sentences with controls in them ("plan N externals from
   supplier X as Y", "move the N selected people to HH:MM - HH:MM"), laid out
   as one non-wrapping line. At phone width the words wrap into a column of
   single-word lines while the controls carry on past the edge of the card,
   which is where the buttons that finish each sentence ended up. The rows
   wrap, and a control takes the line it lands on rather than being squeezed
   beside the words that describe it.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .modal-body.staff-modal .flex {
        flex-wrap: wrap;
    }

    .modal-body.staff-modal .select,
    .modal-body.staff-modal .btn {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* The hourly-rate row is its own flex; same treatment, and the money field
       keeps the width it was given rather than stretching across the line. */
    .modal-body.staff-modal .hourly-rate-form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .modal-body.staff-modal .hourly-rate-form > div {
        margin-right: 0;
    }
}

/* --- Diet modal ------------------------------------------------------------
   One dish per block: its name and line total, the "of which" splits when the
   dish has diets to split by, then its delivery settings as a field grid. The
   settings were a flex row of four controls with their labels beside them,
   which on any narrow column broke each label into single-word lines and left
   the controls at different heights; they stack now, on the same rhythm every
   other form in the app uses.
   --------------------------------------------------------------------------- */
.product-diet-selector {
    max-width: 760px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--cm-lines-color);
}

.product-diet-selector:last-of-type {
    border-bottom: 0;
}

.product-diet-selector__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.diet-modal__label {
    /* The label names the block below it, so it is not a column. */
    display: block;
}

.diet-splits {
    margin-bottom: var(--cm-form-field-gap);
}

/* The row ends after its diets: full width parked the delete cross half a
   screen away from the line it deletes. */
.diet-splits .product-edit-row {
    align-items: center;
    gap: 10px;
    max-width: 520px;
}

.diet-modal__settings {
    display: flex;
    flex-direction: column;
    gap: var(--cm-form-field-gap);
    max-width: 360px;
}

.diet-modal__settings > * {
    min-width: 0;
}

.diet-modal__settings label {
    display: block;
    margin-bottom: 4px;
}

/* --- Stepper ---------------------------------------------------------------
   A count adjusted one at a time: a round button either side of the field.
   Round, not the button pill: the shape says "one step", and at equal width
   and height the button's own 24px radius is already a circle.
   --------------------------------------------------------------------------- */
.cm-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cm-stepper > .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cm-stepper > .btn .zmdi {
    margin: 0;
}

.demand-form-stepper input {
    width: 56px;
    text-align: center;
    /* The +/- buttons are the control; native spinners beside them are a
       second, tinier pair of the same thing. */
    -moz-appearance: textfield;
}

.demand-form-stepper input::-webkit-outer-spin-button,
.demand-form-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-gap: 30px;
}

.apps-grid.site .application-box {
    border: 1px solid #ededed;
    padding: 30px;

}
.apps-grid.site {
    grid-gap: 30px 30px;
}

.eenvoudigfactureren .card-header h2 {
    background-color: rgb(39,108,111);
}


.su-tenant-panel table tr td:nth-of-type(1) {
   width: 80px;
}

.su-tenant-panel table tr td:nth-of-type(2) {
   width: 130px;
}


.su-tenant-panel table tr td:nth-of-type(4) {
   width: 90px;
}


.su-tenant-panel table tr td:nth-of-type(4) {
   width: 120px;
}


#mCSB_1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* The menu scrolls, the footer pill does not. The pill has to stay on screen
   (it carries settings and logout), and the logout ear is `position: fixed`
   level with where the pill sits at the bottom, so the pill must actually be
   there. Scrolling the menu alone also keeps its scrollbar out of the strip
   between the pill and the ear, which the ear's 10px hover bridge assumes is
   bare sidebar. */
#mCSB_1_container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
#mCSB_1 > .nav-footer {
    flex: none;
}

.bottom-logo {
    text-align: center;
}
.bottom-logo img {
    max-height: 150px;
    margin-bottom: 10px;
    max-width: 100%;
}


.about-us-page .content {
    max-width: 700px;
    margin: 0 auto;
}
.about-us-page .content p {

}

.about-us-page h1 {
     text-align: center;
}

.maty-block {
   width: 80%;
   margin: 0 auto;
   margin-bottom: 20px;
   border: 1px solid #ededed;
   padding: 15px;
}

.maty-block img {
   width: 100%;
}
.maty-block span {
	font-family: Panton-ExtraBold;
	font-weight: normal;
	font-style: normal;
  font-size: 10pt;
}

.quote-remark {
   margin-top: 30px;
   margin-left: 20px;
   font-style: italic;
}


.price-box-wrap {
    border: 1px solid #ccc;
}

.price-box-wrap:hover {
   box-shadow: 0 0 0 2px #333;
   cursor: pointer;
}

.price-box-wrap.selected {
   box-shadow: 0 0 0 2px black;
}

.price-box-wrap .price-box {
    box-shadow: none !important;
}

.plan-extra {
   border: 1px solid #ededed;
   border-radius: 6px;
}

.plan-extra .title {
   text-align: center;
}




.jumbo-alt {
}

.jumbo-alt {
}

.exact-mapping thead th {

}
.exact-mapping tbody tr td {
    width: 50%;
}

.gallery-image-edit-row img {
   width: 100px;
   padding: 10px;
}

.estimate-gallery-row {
   margin-bottom: 20px;
}
.estimate-gallery-image img {
   width: 100%;
}

.estimate-gallery-caption {
  font-weight: bold;
}

/* Swipable Image Gallery */
.cm-image-gallery {
  position: relative;
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
}
.cm-image-gallery__track {
  display: flex;
  width: 100%;
  will-change: transform;
}
.cm-image-gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
  overflow: hidden;
}
.cm-image-gallery__slide img {
  width: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.cm-image-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  opacity: 1;
}
.cm-image-gallery__arrow--prev { left: 8px; }
.cm-image-gallery__arrow--next { right: 8px; }
.cm-image-gallery__arrow:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.cm-image-gallery__arrow .zmdi {
  font-size: 18px;
  color: #333;
}
.cm-image-gallery__dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.cm-image-gallery__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
  transition: background 0.1s;
}
.cm-image-gallery__dot.active {
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
.cm-image-gallery__dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* Fullscreen gallery modal */
.cm-image-gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm-image-gallery-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  color: #fff;
  font-size: 24px;
  transition: background 0.15s;
}
.cm-image-gallery-modal__close:hover {
  background: rgba(255, 255, 255, 0.4);
}
.cm-image-gallery-modal .cm-image-gallery {
  width: 80vw;
  max-width: 1200px;
  max-height: 85vh;
}
.cm-image-gallery-modal .cm-image-gallery__slide img {
  max-height: 85vh;
  object-fit: contain;
}
.cm-image-gallery-modal .cm-image-gallery__arrow {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.25);
}
.cm-image-gallery-modal .cm-image-gallery__arrow:hover {
  background: rgba(255, 255, 255, 0.4);
}
.cm-image-gallery-modal .cm-image-gallery__arrow .zmdi {
  font-size: 24px;
  color: #fff;
}
.cm-image-gallery-modal .cm-image-gallery__arrow--prev { left: 12px; }
.cm-image-gallery-modal .cm-image-gallery__arrow--next { right: 12px; }
.cm-image-gallery-modal .cm-image-gallery__dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
}
.cm-image-gallery-modal .cm-image-gallery__dot.active {
  background: #fff;
}
.cm-image-gallery-modal .cm-image-gallery__dots {
  bottom: 16px;
}

/* Gallery thumbnail list in editor */
.cm-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
}
.cm-gallery-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid #e0e0e0;
}
.cm-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cm-gallery-thumb__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
}
.cm-gallery-thumb__remove:hover {
  background: rgba(220, 53, 69, 0.9);
}
.cm-gallery-thumb__move {
  position: absolute;
  bottom: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 0;
  opacity: 0;
  transition: opacity 0.1s;
}
.cm-gallery-thumb:hover .cm-gallery-thumb__move {
  opacity: 1;
}
.cm-gallery-thumb__move--left { left: 2px; }
.cm-gallery-thumb__move--right { right: 2px; }
.cm-gallery-thumb__move:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Dynamic gallery filters */
.dynamic-gallery-filters {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px 0;
}
.dynamic-gallery-filter > label {
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
}
.dynamic-gallery-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dynamic-gallery-filter__chips .chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.dynamic-gallery-filter__chips .chip:hover {
  border-color: #999;
}
.dynamic-gallery-filter__chips .chip--active {
  background: var(--cm-yellow);
  border-color: var(--cm-yellow);
  color: #333;
}
.dynamic-gallery-filter__checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dynamic-gallery-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: #f9f9f9;
  border: 2px dashed #ddd;
  border-radius: 6px;
  color: #999;
  text-align: center;
  padding: 20px;
}
.dynamic-gallery-preview i {
  margin-bottom: 8px;
  color: #ccc;
}
.gallery-mode-toggle {
  margin-top: 10px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.gallery-mode-toggle .radio-inline {
  cursor: pointer;
}

.rg-grid .commands {
   width: 120px;
}

.page-break-dropped-widget {
   height: 1px;
   border-bottom: 1px dashed #ccc;
}


.blocks .block-row {
   margin-bottom: 30px;
   padding-bottom: 30px;
   border-bottom: 1px solid #ededed;
}


.blocks .block-row:nth-of-type(odd) {
   background-color: #f9f9f9;
}

.blocks .block img {
   max-width: 100%;
   display: block;
   border: 1px solid #ededed;
   padding: 10px;
}


.blocks .block p {
}

.next-button {
    font-size: 14pt;
}


.variable-listing {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
}
.variable-group {}

ul.variables {
   list-style-type: none;
   margin-left: 0px;
   padding-left: 0px;
}

li .catermonkey-variable > span  {
   margin-bottom: 5px;
   margin-left: 0px;
}

.catermonkey-variable  > span {
    background-color: rgba(143, 195, 159, 0.3);
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    color: #666 !important;

}

.tooltip-icon .catermonkey-variable {
    cursor: pointer;
}

.catermonkey-variable {
   color: transparent; /* TODO fix me once we have figured out how these '?' chars end up in the database */
}

.ql-editor .catermonkey-variable,
ul.variables .catermonkey-variable {
    cursor: pointer;
}
/*
.estimate-column ul {
    margin-bottom: 0px !important;
}
*/
.estimate-column ul + ul {
    margin-top: 0px;
}



.variableblot.ql-picker {
   width: 100px;
}


.image-viewer {
  position: relative;
}
.image-viewer img {
  width: 100%;
}
.image-viewer > button {
  position: absolute;
  top: 5px;
  right: 5px;
}

.comment-row-header .zmdi.active {

}

.comment-row-header,
.comment-row-tools {
    align-items: center;
}

/* CAT-1272: inline images in order internal notes render as thumbnails —
   in the online order overview, the note display, and the compose editor —
   so a large upload never dominates the layout (the PDF is capped separately,
   server-side). */
.oo-comment-body img,
.cm-note-body img,
.quil-editor .ql-editor img {
    max-width: 200px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
    vertical-align: middle;
}

.zmdi.active {
    color: var(--cm-font-color);
 }

.zmdi.inactive {
   color: var(--cm-light-gray) !important;
}


b.negative {
   color: red;
}

.references-page .wildatheart {
    background-color: #333;
}

.wildatheart {
   padding-top: 30px;
   padding-bottom: 30px;
}
.wildatheart > div {
   column-rule: 1px dashed rgba(255,255,255,0.5);
   column-gap: 40px;
   column-count: 3;
}


.wildatheart-frontpage {
    padding: 40px 0px;
}
.wildatheart-frontpage h1 {
}

.wildatheart-frontpage {
}

.wildatheart-frontpage p {
   font-family: Lato !important;
}


.wildatheart h1 {
   font-family: 'Amatic SC';
   color: white;
}
.wildatheart p {
   font-family: Lato;
   color: rgba(255,255,255,.5);
}

.wildatheart .image {
   text-align: center;
}


.wildatheart .image img {
   width: 100%;
   margin-bottom: 10px;
}

.partygarden {
   background-color: rgb(243, 241, 236);

}

.partygarden h1 {
    font-family: "PT Serif";
    text-transform: uppercase;
    color: #808369;
    font-size: 1.3em;
    text-align: center;
}

.partygarden-content {
   padding: 30px;
   margin-bottom: 40px;
   margin-top: 30px;
   background-color: white;
}

.partygarden-content .rob-wrap {
   border-radius: 50%;
   overflow: hidden;
   background-color: white;
   width: 260px;
   height: 260px;
   float: right;
   margin-left: 10px;
}

.partygarden-content .rob {
   width: 300px;
}

.partygarden .title-bg {
    font-size: 18px;
    background-image: url(https://partygarden.nl/wp-content/uploads/2018/05/title_bg_green.png);
    background-repeat: no-repeat;
    width: 17.929rem;
    height: 6.929rem;
    margin: auto;
    left: 0;
    right: 0;
    z-index: 0;
    background-size: contain;
}

.partygarden-content .logo {
   width: 25%;
   margin-bottom: 20px;
}

.partyz {
   font-family: 'Open Sans Condensed',sans-serif;
   background-color: #afa96b;
}

.partyz .content {
   background-image: url("../img/references/partyz.jpeg");
   min-height: 560px;
   margin-bottom: 30px;
   margin-top: 30px;
   font-size: 26px !important;
   position: relative;
}

.partyz .content-text {
  position: absolute;
  left: 0px;
  top: 10%;
  width: 60%;
  padding: 20px;
  background-color: rgba(0,0,0,0.5);
  color: white !important;
}

.partyz .content-logo {
   width: 20%;
   position: absolute;
   right: 10px;
   top: 10px;
}
.partyz .content-logo img{
   width: 100%;
}
.partyz a {

   color: #ccc;
}

.rc-datepicker {
  overflow: auto;
}

.rc-datepicker > .table-condensed {
   width: 100%;
}


.rc-datepicker > .table-condensed td {
   text-align: center;
   border: 1px solid #ededed;
   vertical-align: top;
}

.ow-wrap {
   padding: 5px;
}

.ow-wrap .no-mask {
    position: absolute;
    z-index: 9999999999;
    left: 50px;
    top: 30px;
}

.ow-locations {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 30px;
    cursor: pointer;
}
.ow-wrap.no-data {
    background-color: white;
}

.sw-product {
    font-size: 7pt;
    color: white;
    border-top: 2px solid #ededed;
    border-bottom: 2px solid #ededed;
    border-right: 1px solid #ededed;
    border-left: 1px solid #ededed;
}

.table.location-detail-table > thead > tr > th:first-child,
.table.location-detail-table > tbody > tr > td:first-child {
    padding-left: 0px;
}

.add-end-date {
    text-decoration: underline;
    cursor: pointer;
}

.ow-date {
    margin: 10px auto;
    padding: 7px;
    text-align: center;
    border: 1px solid #ededed;
    border-radius: 15px;
    height: 30px;
    width: 30px;
}

.ow-location {
    padding: 7px;
    text-align: center;
    font-size: 7pt;
    color: white;
    text-transform: uppercase;
    border: 1px solid #ededed;
    width: 100%;
}

.ow-location.booked {
    background-color: #F44336;
}

.ow-location.option {
    background-color: #FFC107;
}

.ow-location.available {
    background-color: #4CaF50;
}

/* --- Vehicle Timeline (vt-*) --- */

.vt-container {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 13px;
}

.occupancy-modal-detail .vt-container {
    padding-bottom: 40px;
}

.vt-time-axis {
    display: flex;
    flex-direction: row;
    border-bottom: 2px solid #ddd;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

.vt-lane {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #eee;
    min-height: 38px;
    align-items: stretch;
}

.vt-lane:hover {
    background: #fafafa;
}

.vt-lane--drag-over {
    background: #e3f2fd;
    outline: 2px dashed #2196F3;
    outline-offset: -2px;
}

.vt-handle-left,
.vt-handle-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 2;
}
.vt-handle-left { left: 0; }
.vt-handle-right { right: 0; }

.vt-handle-left:hover,
.vt-handle-right:hover {
    background: rgba(0,0,0,0.08);
    border-radius: 2px;
}

.vt-bar--dragging {
    opacity: 0.75;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 10;
}

.vt-container--dragging {
    user-select: none;
    -webkit-user-select: none;
}

.vt-lane-label {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 10px;
    border-right: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
}

.vt-lane-name {
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-lane-plate {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-lane-dimensions {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-lane-track {
    flex: 1;
    position: relative;
    min-height: 34px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.vt-hour-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid #ddd;
}

.vt-hour-label {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 10px;
    color: #888;
    white-space: nowrap;
}

.vt-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid #f0f0f0;
    pointer-events: none;
}

.vt-bar {
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    padding: 2px 6px;
    color: var(--cm-dark-gray);
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    min-height: 24px;
    transition: opacity 0.15s;
}

.vt-bar:hover {
    opacity: 0.85;
    color: var(--cm-dark-gray);
    text-decoration: none;
}

.vt-bar-ghost {
    position: absolute;
    top: 2px;
    bottom: 2px;
    height: calc(100% - 4px) !important;
    border: 1.5px dashed rgba(0,0,0,0.25);
    border-radius: 5px;
    pointer-events: none;
    z-index: 0;
}

/* vt-bar--status uses invoice-status-icon colors via the status class;
   override position/sizing so it stays inline as a bar */
.vt-bar.vt-bar--status {
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    padding: 2px 6px;
}

.vt-bar-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.2;
}

.vt-bar-driver {
    font-size: 10px;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-bar-driver .vt-driver-icon {
    margin-left: 0;
    margin-right: 3px;
    font-size: 10px;
}

.vt-conflict-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #F44336;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    flex-shrink: 0;
}

.vt-bar-driver-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 4px;
    min-width: 240px;
    margin-top: 2px;
}

.vt-bar-driver-dropdown select {
    font-size: 12px;
}

.vt-driver-icon {
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.7;
}

.vt-bar-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 1.2;
    min-width: 0;
}

.vt-bar-remove {
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding-left: 2px;
    cursor: pointer;
    opacity: 0.5;
    font-size: 11px;
    flex-shrink: 0;
    z-index: 2;
}

.vt-bar-remove:hover {
    opacity: 1;
}

.vt-bar:hover .vt-bar-remove {
    display: inline-flex;
}

.vt-lane-conflict-icon {
    color: #F44336;
    font-size: 14px;
    margin-top: 1px;
}

.vt-unassigned-section {
    margin-top: 12px;
    border-top: 1px solid #ddd;
    padding-top: 8px;
}

.vt-section-header {
    font-size: 13px;
    color: var(--cm-dark-gray);
    padding: 4px 10px 8px;
}

.vt-unassigned-row {
    cursor: grab;
}

.vt-unassigned-row:hover {
    background: #fff8e1;
}

.vt-popover {
    position: fixed;
    z-index: 10002;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 12px;
    min-width: 300px;
}

.vt-popover-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}

.vt-popover-title {
    min-width: 75px;
    max-width: 150px;
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-popover-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.vt-popover-row label {
    min-width: 75px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 0;
}

.vt-popover-row .select,
.vt-popover-row select {
    flex: 1;
    font-size: 12px;
}

.vt-popover-times {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.vt-popover-times input {
    width: 100px;
    font-size: 12px;
}

.vt-popover-times span {
    color: #999;
}

.vt-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
}

.vt-popover a {
    font-size: 12px;
}

.ow-location.ow-unassigned {
    background-color: #FF9800;
    color: #fff;
}

.fff  {
   background-image: url("../img/references/sff-bg.jpg");
   background-size: cover;
}
.fff-content {
    background-color: rgba(0,0,0,0.71);
    color: rgba(255, 255, 255, 0.71);
    padding: 40px;
    font-family: 'Josefin Slab', sans-serif;
    font-size: 20px;
    line-height: 1.5em;
}

.fff-content .title {
   font-size: 28px;
   font-family: 'Julius Sans One', sans-serif;
   color: #b38543;
}

.reference-button {
    margin-top: 10px;
    color: white !important;
    background-color: var(--cm-mid-gray);
    font-size: 22px;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 24px;
}


.reference-button:hover {
   background-color: #ccc;
}
.right {
   text-align: right;
}

.food-cost .table tr th:first-of-type,
.food-cost .table tr td:first-of-type {
   padding-left: 0px;
}


.section-head {
  border-bottom: 1px solid #ccc;
}

.checkout-field {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 5px;
}

th.right {
  padding-right: 5px !important;
}

.blocked-dates-grid td {
  padding-left: 0px;
}

.webshop-products-sections .dropped-element {
  border-bottom: 1px solid #ededed;
  padding-bottom: 10px;
  padding-top: 10px;
}


img.contact-us {
  border: 1px solid #ededed;
  padding: 5px;
}

.quil-display-area {

}

.cm-credits {
   text-align: center;
   width: 100%;
}

.cm-credits {
  font-size: 10pt;
  color: #ccc;

}


.sure-modal-body  .flex {
    justify-content: space-between;
}
.cm-credits  img {
  margin-right: 5px;
  width: 32px;
}


.estimate-view .floating-acceptance {
  position: fixed;
  flex-wrap: wrap;
  left: 0;
  top: 0;
  width: 100%;
  background-color: white;
  padding: 20px;
  border-radius: 3px;
  box-shadow: 9px 8px 13px 0 rgba(19, 29, 41, 0.3);
  z-index: 10;
}

@media screen and (max-width: 900px) {
    .estimate-view .estimate-editor > .canvas {
        padding-top: 0px !important;
    }
    .estimate-view .floating-acceptance {
        position: static !important;
        margin-top: 0px;
    }
}


.estimate-view .blijdorp-blue {
  background-color: #0072BC;
}

.pt-inner .pti-header {
    background-image: linear-gradient(-45deg, #FFC796 0%, #FF6B95 100%) !important;
}


.pt-inner.extra-box .pti-header {
    background-image: linear-gradient(-225deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%) !important;
}

.extra-box .pti-body .ptib-item {
    text-align: left !important;
}

.extra-box .ptib-item > span {
    display: flex;
    justify-content: space-between;
}


.extra-box .ptib-item > span > span:first-of-type {
    flex-grow: 3;
}

.extra-box .ptib-item > span > span:last-of-type {
    min-width: 120px;
    text-align: right;
    font-weight: bold;
}



.pt-inner .pti-header > h2 {
    font-size: 18pt !important;
    font-weight: normal !important;
}

.external-apps-home {
    background-color: #333;
    padding-top: 70px;
    padding-bottom: 70px;
}

.external-apps-home h1 {
    color: white;
}

.external-apps-home .text {
    color: #aaa;
    font-size: 12pt;
    margin-bottom: 20px;
}

.cash-admin-settings td {
    padding-bottom: 0.2em;
}

.cash-admin-settings td:first-child {
    padding-right: 10px;
}

.pricing-page, .external-apps-page {
    background-color: #efefef;
    padding-bottom: 30px;
}


.margin-positive {
    color: #4CaF50;
}

.margin-negative {
    color: red;
}

.checkbox-grid, display {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

}

.checkbox-grid .checkbox {
    margin-top: 0px !important;
}

/* ---------------------------------------------------------------------------
   Action modal — fixed action bar / scrolling body / fixed footer.
   Paired with cs2.components.widgets.action-modal.

   Everything here is scoped under .cm-action-modal on purpose: the base
   `.modal .modal-content` rule scrolls the whole panel (header included) and
   many modals rely on that, so this pattern opts out only for itself and is
   adopted panel by panel.
   --------------------------------------------------------------------------- */

/* The flex column below needs a definite height to pin the header and footer.
   The width variants that don't set one get it here — but NOT `.full`, which
   already supplies `height: 98vh` plus an `inset: 1vh 1vw` margin (fonts.css).
   `.modal-dialog.from-right.full` and `.modal-dialog.from-right.cm-action-modal`
   are both (0,3,0), so without the :not() the winner is decided by stylesheet
   source order alone, and this rule silently ate `.full`'s top and bottom
   margin. */
.modal-dialog.from-right.cm-action-modal:not(.full) {
    top: 0;
    height: 100vh;
    height: 100dvh; /* keeps the footer above mobile browser chrome */
}

.modal-dialog.from-right.cm-action-modal .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    /* Base rule is `overflow-y: auto !important` — only the body may scroll. */
    overflow-y: hidden !important;
}

/* Specificity note: `.modal-dialog.from-right .modal-header` (fonts.css) sets
   this padding for every right-hand drawer at (0,3,0), so a plain
   `.cm-action-modal .cm-modal-head` at (0,2,0) would silently lose. Matching
   the dialog classes takes it to (0,4,0) and lets the pattern own its own
   header spacing rather than inheriting whatever the shared drawer rule
   happens to say. Same value it resolves to today — pinned, not changed. */
.modal-dialog.from-right.cm-action-modal .cm-modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 24px 24px 14px;
    border-bottom: 1px solid var(--cm-lines-color);
}

.cm-action-modal .cm-modal-title {
    flex: 1 1 auto;
    margin: 0;
}

.cm-action-modal .cm-modal-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* The base .close is absolutely positioned in some skins; keep it in the row. */
.cm-action-modal .cm-modal-close {
    position: static;
    flex: 0 0 auto;
}

/* `.modal .modal-body` (app.1.min.css) zeroes the top padding, which left the
   body's first element flush against the action bar — two 1px borders touching
   when that element is a card. Give the scroll area room to breathe.
   Matches the header rule's (0,4,0) so it wins outright rather than by
   stylesheet source order. */
.modal-dialog.from-right.cm-action-modal .cm-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 20px;
}

.cm-action-modal .cm-modal-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--cm-lines-color);
    background-color: var(--cm-white);
    padding: 14px 20px;
}

.cm-modal-foot-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cm-modal-foot-note {
    flex: 1 1 auto;
    color: var(--cm-table-heading-color);
    font-size: 0.85rem;
}

.cm-modal-foot-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.cm-modal-foot-secondary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* A disabled primary in the pinned footer is a CTA waiting on the user, so it
   keeps full strength rather than Bootstrap's `.btn[disabled]` fade. Scoped at
   (0,4,0)+ to clear the base rules (docs/modal-patterns.md). */
.modal-dialog.from-right.cm-action-modal .cm-modal-foot .btn-primary:disabled,
.modal-dialog.from-right.cm-action-modal .cm-modal-foot .btn-primary[disabled] {
    opacity: 1;
}

/* Separates a panel's configuration from its selection — two different
   questions that otherwise read as one long run of controls. */
.cm-section-divider {
    border: 0;
    border-top: 1px solid var(--cm-lines-color);
    margin: 26px 0 6px;
}

@media screen and (max-width: 600px) {
    /* Footer actions stack full-width rather than wrapping a row of buttons.
       A single button with a long label (e.g. the order-overview primary,
       "Generate, share and open overview in a new screen" — longer still in
       Dutch, and a third button appears in production view) is wider than the
       panel, so the wrapped row still overflows and drags the whole modal into
       horizontal scroll — which is what puts the header × out of reach. Stacking
       + wrapping labels removes the overflow at the source. */
    .cm-modal-foot-inner {
        gap: 12px;
    }
    .cm-modal-foot-actions {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
    }
    .cm-modal-foot-secondary {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .cm-modal-foot-actions .btn,
    .cm-modal-foot-actions button {
        width: 100%;
        white-space: normal;
    }
    .cm-action-modal .cm-modal-foot {
        padding: 12px 14px;
    }

    /* Pin the × to the top-right corner. The header is a wrapping flex row, so
       when the action bar (saved-settings presets, etc.) wraps to its own line
       the close button gets pushed down below it and is no longer where a thumb
       reaches to dismiss the panel. Take it out of flow and anchor it; the
       action bar then drops to its own full-width row under the title. */
    .modal-dialog.from-right.cm-action-modal .cm-modal-head {
        position: relative;
        padding-right: 52px;
    }
    .cm-action-modal .cm-modal-close {
        position: absolute;
        top: 18px;
        right: 16px;
        margin: 0;
    }
    .cm-action-modal .cm-modal-head-actions {
        width: 100%;
    }
}

/* Order-overview settings: the sort select and the page-break checkbox sit side
   by side on desktop, but the select has a fixed 220px min-width and the
   checkbox label is long (longer still in Dutch: "Zet diverse onderdelen op
   losse pagina's"), so on a narrow screen they can't fit and the checkbox is
   pushed past the panel's right edge. Stack them on mobile and let the select
   go full-width. */
.oo-sort-select {
    min-width: 220px;
}
.oo-settings-bottom-row {
    align-items: flex-end;
}
@media screen and (max-width: 600px) {
    .oo-settings-bottom-row {
        flex-direction: column;
        align-items: stretch;
    }
    .oo-sort-select {
        min-width: 0;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Mobile navigation: at or below the app's small-screen cutoff
   (cs2.db/small-screen?, <= 900px) the fixed icon rail is hidden to reclaim its
   width, and the menu is reached through a floating burger that opens it
   full-width. Reuses the existing state: :nav/toggle flips move-in/move-out,
   and :nav/hide-if-mobile (already on every nav item) closes it on selection.
   Desktop is untouched — everything here is gated behind the max-width query.

   The cutoff covers tablet portrait, not just phones: below 1200px the expanded
   nav is a 268px overlay that sits ON TOP of the content, so an iPad in
   portrait (768px) lost a third of its width to a drawer it never asked for.
   900 keeps every iPad portrait width (744-834) on the burger while leaving
   iPad landscape and the 12.9" portrait (1024) on the rail.
   --------------------------------------------------------------------------- */
.mobile-nav-burger {
    display: none;
}

@media only screen and (max-width: 900px) {
    /* Reclaim the rail: slide the collapsed sidebar off-screen and drop the
       chevron ear (the burger replaces it). */
    .sidebar.move-out {
        transform: translate3d(-100%, 0, 0) !important;
    }
    .nav-toggle-wrap {
        display: none !important;
    }

    /* Expanded nav fills the screen. */
    .sidebar.move-in {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* `.sidebar .app-logo` is `width: 100%`, which against a 100vw nav renders
       the logo at the full width of the screen. Hold it to the width it has
       beside a desktop rail. */
    .sidebar.move-in img.app-logo {
        max-width: 240px;
    }

    /* The content no longer sits beside a 50px rail, so the 70px gutter that
       reserved room for it (and the 290px expanded-desktop variant) becomes
       dead whitespace — collapse both to a normal mobile inset. */
    #content .container-fluid,
    #content .container-fluid.container-margin-left {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Floating button. Closed: green ≡ pill, top-left, over the content.
       Open: plain × at the top-right, over the full-width nav, so it never
       collides with the logo in the panel's top-left. */
    .mobile-nav-burger {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 12;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background-color: var(--cm-green);
        color: #fff;
        font-size: 22px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        cursor: pointer;
    }
    .mobile-nav-burger.is-open {
        left: auto;
        right: 12px;
        background-color: transparent;
        box-shadow: none;
    }
}

/* Between the phone layout and the burger cutoff the page card keeps its
   desktop header row, so the fixed burger lands on the title instead of
   clearing it the way the centred phone header does. Give the burger a gutter
   of its own above the card rather than indenting a header whose depth below
   `.container-fluid` differs per panel. */
@media only screen and (min-width: 641px) and (max-width: 900px) {
    #content .container-fluid,
    #content .container-fluid.container-margin-left {
        padding-top: 44px;
    }
}

/* A card header is a title and an action row on one line, and on a tablet the
   two do not fit: the actions hold their width, so the title is squeezed to a
   word per line and the row still runs off the card's right edge. Let the header
   break — the title keeps its line and the actions take the next one. The phone
   layout stacks these deliberately below 640px; this only allows a break where
   one is needed. */
@media only screen and (min-width: 641px) and (max-width: 900px) {
    .card > .card-header {
        flex-wrap: wrap;
        gap: 8px 12px;
    }
    .card > .card-header > h3 {
        min-width: 0;
    }
    .card > .card-header .actions {
        flex-wrap: wrap;
    }
}

/* Tablet portrait keeps the weekview's one-row date navigation, but the range's
   410px floor leaves the week-number pill and the arrows fighting over what is
   left. Let the row wrap and the range shrink; "this week" takes a second line
   only when it has to. */
@media only screen and (min-width: 641px) and (max-width: 900px) {
    .calendar-weekview-header-wrap {
        flex-wrap: wrap;
        gap: 8px 12px;
    }
    .calendar-weekview-range {
        min-width: 0;
    }
}

/* Data grids (the shared re-datagrid tables, .bootgrid-table in a
   .table-responsive scroller) are wider than the burger layout, and a column
   simply ending at the screen edge reads as a broken table rather than a
   scrollable one. Auto-hiding scroll shadows, pure CSS via
   background-attachment:local, so the sideways scroll is visible. */
@media only screen and (max-width: 900px) {
    .table-responsive {
        background:
            linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat,
            linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat,
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.14), transparent) left center / 12px 100% no-repeat,
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.14), transparent) right center / 12px 100% no-repeat;
        background-attachment: local, local, scroll, scroll;
    }
}

/* Alphabetically sorted checkbox lists read top-to-bottom down each column
   rather than left-to-right across each row. Multi-column instead of grid:
   column-count balances the columns itself, so the flow survives the list
   being narrowed by a filter box without needing a row count computed up
   front. */
.checkbox-grid.checkbox-grid-vertical {
    display: block;
    /* Auto-fit columns to the container: as many as fit at >=170px each, so it
       shows ~4 in the wide download modal and ~2 in the narrow rule editor
       without labels overflowing into the next column. */
    column-width: 170px;
    column-gap: 16px;
}

.checkbox-grid.checkbox-grid-vertical .checkbox {
    break-inside: avoid;
}

.price-grid {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}

.price-box-wrap .card h2 small {
    display: inline !important;
    margin-top: 0px !important;
}

.ql-container .qlbt-selection-line.qlbt-selection-line-left::before {
  position: absolute;
  left: -2px;
  top: -2px;
  content: '';
  width: 5px;
  height: 5px;
  background-color: #0589f3;
  border-radius: 5px; }

.ql-container .qlbt-selection-line.qlbt-selection-line-right::before {
  position: absolute;
  right: -2px;
  bottom: -3px;
  content: '';
  width: 5px;
  height: 5px;
  background-color: #0589f3;
  border-radius: 5px; }

.quill-better-table-wrapper {
  overflow-x: auto; }

table.quill-better-table {
    table-layout: fixed;
    border-collapse: collapse;
}
table.quill-better-table td {
    border: 1px solid #000;
    padding: 2px 5px; }

.qlbt-operation-menu {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    z-index: 100;
    overflow: hidden; }
.qlbt-operation-menu .qlbt-operation-menu-dividing {
    height: 1px;
    background-color: #efefef; }
.qlbt-operation-menu .qlbt-operation-menu-subtitle {
    color: #999;
    font-size: 14px;
    padding: 5px 16px; }
.qlbt-operation-menu .qlbt-operation-color-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 16px 10px;
    background-color: #fff;
    overflow: hidden; }
.qlbt-operation-menu .qlbt-operation-color-picker .qlbt-operation-color-picker-item {
    width: 20px;
    height: 20px;
    border: 1px solid #595959;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer; }
.qlbt-operation-menu .qlbt-operation-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: #fff;
    cursor: pointer;
    color: #595959;
    overflow: hidden;
    text-overflow: ellipsis; }
.qlbt-operation-menu .qlbt-operation-menu-item:hover {
    background-color: #efefef; }
.qlbt-operation-menu .qlbt-operation-menu-item .qlbt-operation-menu-icon {
    margin-right: 8px;
    height: 20px;
    width: 20px;
    font-size: 0; }

.qlbt-col-tool {
    position: absolute;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    z-index: 99;
    height: 16px; }
.qlbt-col-tool .qlbt-col-tool-cell {
    position: relative;
    background-color: #fff;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000; }
.qlbt-col-tool .qlbt-col-tool-cell:first-child {
    border-left: 1px solid #000; }
.qlbt-col-tool .qlbt-col-tool-cell-holder {
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 1px;
    background-color: transparent;
    cursor: ew-resize; }
.qlbt-col-tool .qlbt-col-tool-cell-holder:hover {
    background-color: #0589f3; }
.qlbt-col-tool .qlbt-col-tool-cell-holder::before {
    content: "";
    position: absolute;
    top: 0;
    left: -6px;
    display: block;
    width: 8px;
    height: 100%; }
.qlbt-col-tool .qlbt-col-tool-cell-holder::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    display: block;
    width: 8px;
    height: 100%; }

.corona {
    background: #ccc;
    padding: 50px 0px;
    margin-bottom: 20px;
    border-bottom: 3px solid #333;
    border-top: 3px solid #333;
}
.corona h1 {
    color: #333 !important;
}

.new-order-panel {
    display: flex;
    padding: 8px 20px;
    color: #888;
    align-items: center;
    width: 100%;
    background-color: #e8e8e8;
    border: 0px solid #ccc;
    box-shadow: 3 3px 3px rgba(0, 0, 0, 0.15);
    border-radius: 8px 8px 0px 0px;
}

.select .form-control {
    background-color: inherit;
}

@keyframes change-background {
    from { background-color: inherit; }
    to { background-color: rgba(255, 255, 255, 1); }
}

.order-filter-panel {
    cursor: pointer;
    display: flex;
    padding: 5px 20px;
    color: #888;
    align-items: center;
    width: 100%;
    background-color: #f1f1f1;
    border-radius: 0px;
    border-bottom: 0px solid #edecec;
}

.order-filter-panel  .select::before {
    top: 0px !important;
}
/*
.order-filter-panel:hover {
    // background-color: rgba(255, 255, 255, 0.5);
    animation-name: change-background;
    animation-duration: 0.5s;
    background-color: rgba(255, 255, 255, 0.5);
}
*/

.pop-in {
    display: inline-block;
    animation: popIn 0.5s ease;
}

.pop-in2 {
    display: inline-block;
    animation: popIn2 0.75s ease-out;
}

.pop-in3 {
    display: inline-block;
    animation: popIn3 0.75s ease-in;
}

.pop-in4 {
    display: inline-block;
    animation: popIn4 0.75s ease-in;
}

.order-filter-panel .filter-panel-search .zmdi {
    font-size: 21px ;

}
.num-orders-span {
    cursor: pointer;
    color: var(--cm-table-heading-color) !important;
    font-size: 0.8rem;
}
.order-filter-panel .select {
    flex-grow: 0.2;
}

.create-order-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 20px;
}
.widget-text-editor {
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
    padding: 10px;

}

.checkout-widget,
.checkout-widget .items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.card .card-header {
    gap: 20px;
}

.flex-grow {
    flex-grow: 1;
}
.flex-wrap {
    flex-wrap: wrap;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.wide-button {
    width: 100%;
    max-width: 650px;
}

.payment-methods-boxes .checkbox  {
    margin-top: 0px;
}

.payment-methods-boxes .checkbox + .checkbox,
.weekday-boxes .checkbox + .checkbox {
    margin-top: 0px;
}

.weekday-boxes .checkbox {
    margin-top: 0px;
}

/* Seven day boxes in a row that cannot wrap set the min-content width of
   whatever holds them — in the customer editor that is a table cell, so the
   whole table grew past its pane and the drawer scrolled sideways. Wrapping
   costs nothing where the row already fits. */
.weekday-boxes {
    flex-wrap: wrap;
    row-gap: 10px;
}

.get-started-expl {
    font-size: 13pt;
}


.price-grid {
    display: grid;
    grid-row-gap: 2rem;
    grid-column-gap: 2rem;
    margin-bottom: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.price-box {
    border-radius: 6px;
    box-shadow: 0px 0px 8px #ccc;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
}
.price-box .header {
    text-align: center;
    margin-bottom: 2rem;
}

.price-box .header h2 {
    margin-bottom: 0;
}

.price-box .title {
    font-weight: bold;
    font-size: 1.8rem;
}

.price-box .item {
    padding-bottom: 1rem;
    padding-top: 1rem;
    display: flex;
    border-bottom: 1px solid #ededed;
    align-items: baseline;
}

.price-box .item .name {
    flex-grow: 1;
}

.price-box .item i.zmdi {
    margin-right: 1.5rem;
}

.card .card-header .price-box  h2 small {
    display: inline;
}

.widget-section .title {
    font-size: 16px;
    border-bottom: 1px solid #ededed;
    color: #aaa;
    padding-top: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.tab-nav:not([data-tab-color]) > li > a::after {
    background: var(--cm-green);

}

/* The vendor sheet gives tab labels and link-buttons their own greys; both
   take the heading grey, like every other caption. */
.tab-nav li > a,
.btn-link {
    color: var(--cm-table-heading-color);
}


.widget-section:first-of-type .title {
    margin-top: 0px;
    padding-top: 0px;
}

.widget-section .items {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}

.widget-section.general-section .items {
    grid-template-columns: 1fr 1fr;
}

.logistics-section  .delivery-cost-widget {
    grid-area: dw;
}
.logistics-section .delivery-cost-product {
    grid-area: de;
}

.logistics-section .zipcode-widget {
    grid-area: zi;
}

.logo-settings-section .items {
    grid-template-columns: 2fr 1fr;
}

.logistics-section .items {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-template-areas: "dw de"
                         "zi zi";
}
.product-widget {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-widget .widget-section.content-section .items {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-template-areas: "gpre gpost";
}

.widget-section.field-section .items,
.widget-section.products-section .items {
    display: block;
}


.widget-section.payment-section .items {
    grid-template-columns: 1fr;
}

.custom-event-date {
    grid-area: cd;
    display: flex;

}

.blocked-days-grid {
    display: flex;

}

.blocked-days-grid .selector {
    margin-right: 20px;
}

.blocked-days-grid .pickers {
    display: flex;
}

.blocked-days-grid .fallback-datepicker .datepicker.dp-dropdown {
    position: absolute;
}

.custom-event-date-box {
    margin-right: 20px;
}

.custom-event-date .checkbox {
    margin-top: 4px !important;
}
.num-days-setting {
    grid-area: nd;
}

.hide-time-widget {
    grid-area: ht;
}

.blocked-days-grid {
    grid-area: bd;
}
.time-slots-limiter {
    grid-area: ts;
}

.blocked-days-grid .commands button {
    padding: 2px 5px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    border-radius: 2px !important;
}

.blocked-days-grid .commands button.waves-circle {
    width: auto !important;
    height: auto !important;
}

/* The blocked-timeslot row is the blocked-date row plus a slot dropdown, so it
   takes the same layout. */
.blocked-timeslots-grid {
    grid-area: bt;
    display: flex;
}

.blocked-timeslots-grid .selector {
    margin-right: 20px;
}

.blocked-timeslots-grid .pickers {
    display: flex;
    align-items: flex-start;
}

.blocked-timeslots-grid .pickers .select {
    min-width: 180px;
}

.blocked-timeslots-grid .commands button {
    padding: 2px 5px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    border-radius: 2px !important;
}

.blocked-timeslots-grid .commands button.waves-circle {
    width: auto !important;
    height: auto !important;
}

.time-range {
    grid-area: tr;
}

.order-deadline-time {
    grid-area: dl;
}


.default-time-widget {
    grid-area: dft;
}

.product-name-item {
    grid-area: name;
}

.product-price-item {
    grid-area: price;
}

.product-incl-vat-item {
    grid-area: incl-vat;
}

.product-taxrate-item {
    grid-area: tax;
}

.product-short-desc-item {
    grid-area: shortdesc;
}

.type-chooser {
    grid-area: type;
}

/* CAT-1185: producttype-change warning banner (info-box, multi-line). The
   .type-chooser is a flex row holding the radios; let the warning wrap onto
   its own full-width row beneath them. */
.type-chooser {
    flex-wrap: wrap;
}

.type-chooser .alert.alert-info {
    flex: 0 0 100%;
    margin-top: 15px;
    margin-bottom: 0;
}

.type-chooser .alert.alert-info > i.zmdi {
    vertical-align: top;
}

.product-type-change-warning {
    display: inline-block;
    vertical-align: top;
}

.product-type-change-warning p {
    margin-bottom: 0;
}

.product-type-change-warning ul {
    margin: 10px 0;
    padding-left: 18px;
}

.product-type-change-warning li {
    margin-bottom: 5px;
}

.widget-section.time-section .items {
    grid-template-columns:  1fr 1fr 1fr;
    grid-template-areas: "nd tr dl"
                         "ht dft ."
                         "ts ts ts"
                         "cd cd cd"
                         "bd bd bd"
                         "bt bt bt"
                         "wd wd wd";
}

.product-incl-vat-item {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    margin-left: 20px;
}

.product-general-show-more {
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
}

.widget-section.product-name-section .tag-box-editor {
    grid-area: tags;

}
/* product settings */
/* Auto-placed in DOM order rather than into named rows. The two sync
   checkboxes are conditional, and a named row they do not fill is still a row:
   its gaps drew 40px of nothing between the price row and the description. */
.widget-section.product-name-section .items {
    grid-template-columns: 1fr 1fr 1fr;
}

.widget-section.product-name-section .product-name-item,
.widget-section.product-name-section .widget-price-sync-item,
.widget-section.product-name-section .template-sync-item,
.widget-section.product-name-section .product-short-desc-item,
.widget-section.product-name-section .tag-box-editor {
    grid-area: auto;
    grid-column: 1 / -1;
}

.widget-section.product-name-section .product-price-item,
.widget-section.product-name-section .product-taxrate-item,
.widget-section.product-name-section .product-incl-vat-item {
    grid-area: auto;
}

.widget-price-sync-item {
    grid-area: widget-price-sync;
}

.template-sync-item {
    grid-area: template-sync;
}

.product-price-category {grid-area: category;}
.product-price-revenue {grid-area: revenue;}
.product-price-suffix {grid-area: suffix;}
.product-price-archive {grid-area: archive;}
.product-price-autoadjust {grid-area: autoadjust;}
.product-price-long-desc {grid-area: long-desc;}
.product-price-order-desc {grid-area: order-desc;}
.product-price-deposit {grid-area: deposit;}
.product-price-ignore-pricelist {grid-area: ignore-pricelist;}
.product-price-discount {grid-area: discount;}
.product-price-custom-foodcost {grid-area: custom-foodcost;}
.product-packaging {grid-area: packaging;}


.widget-section.product-price-section .items {
    grid-template-columns:  1fr 1fr 1fr;
    grid-template-areas:
        "long-desc long-desc long-desc"
        "order-desc order-desc order-desc"
        "category revenue discount"
        "deposit suffix custom-foodcost"
        "autoadjust autoadjust autoadjust"
        "packaging . .";
}


.widget-section.product-estimate-section .items {
    grid-template-columns: 1fr;
    grid-row-gap: 0px;

}
.widget-section.product-estimate-section .items .checkbox {
    margin-top: 0px !important;
}


.widget-section.product-production-section .items {
    grid-template-columns: 1fr 1fr;
}

.widget-section.product-variations-section .items {
    grid-template-columns: 1fr;
}

.stock-settings {
    display: flex;
    grid-column: 1 / 3;

}

.stock-settings .checkbox {
    margin-top: 0px !important;
    margin-right: 20px;
}

.stock-settings .stock-input  input {
    width: 80px;
}

.product-name-section .items .type-chooser {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: baseline;
}
.product-name-section .items .type-chooser .radio:first-of-type {
}

.delivery-cost-widget, .delivery-cost-product {
}

.time-slots-limiter {
    display: flex;
}


.light-inline-button {
    display: inline-block;
    color: #999 !important;
    border: none;
    border-bottom: 1px dashed #ccc;
    background-color: white;
    text-transform: uppercase;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 9px;
    margin-left: 5px;
    margin-right: 5px;
}

/* The order list's settings line. It renders the same at rest as it does while
   a menu is open — every control is a portalled popover anchored to the token
   it edits, so nothing about the row's geometry depends on the pointer.

   What used to be here swapped the whole line for a row of native <select>s on
   hover and went `position: absolute; left: -150px`, which took the line out of
   flow: every row below jumped, the panel landed over the date column, and it
   could slide out from under the pointer and oscillate. There is deliberately
   no :hover rule in this block. */

.order-settings {
    display: flex;
    min-width: 300px;
}

.order-settings-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.order-settings-fact,
.order-settings-line > span {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
}

.order-settings-sep {
    color: var(--cm-mid-gray);
}

/* One editable fact standing alone in its own column, rather than inline on the
   composite settings line. Same widgets, so it needs no styling of its own
   beyond staying on one line — a pill broken across two would set the height of
   every row in the table. */
.quick-edit-cell {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* A fact with no value: its field name, recessive enough to scan past and
   solid enough to aim at. Dotted, because a value that is really there must
   not be mistaken for one that isn't. */
.quick-edit-unset {
    color: var(--cm-mid-gray);
    border-bottom: 1px dotted var(--cm-mid-gray);
}

.click-popover .quick-edit-value,
.click-popover .quick-edit-unset,
.click-popover .order-status {
    cursor: pointer;
}

.click-popover:hover .quick-edit-value,
.click-popover:hover .quick-edit-unset {
    color: var(--cm-font-color);
}

.click-popover:hover .order-status {
    filter: brightness(0.95);
}

/* The menu itself, inside the click-popover's portal. */
/* No max-height here on purpose: the popover around it is the scroller, and it
   knows how much room it actually has. A `60vh` here scrolled the wrong box —
   60% of the viewport measured from a trigger two-thirds down the screen still
   runs off the bottom, and the rows past the edge cannot be reached. */
.quick-edit-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
}

.quick-edit-option {
    display: block;
    width: 100%;
    padding: 5px 10px;
    border: none;
    border-radius: var(--cm-border-radius);
    background: none;
    color: var(--cm-font-color);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.quick-edit-option:hover {
    background-color: var(--cm-lines-color);
}

.quick-edit-option.is-selected {
    font-weight: 600;
}

/* The paid toggle rides in the payment-method menu — it is an action, not one
   of the values above it, so it is ruled off from them. */
.quick-edit-option.is-action {
    margin-top: 4px;
    padding-top: 7px;
    border-top: 1px solid var(--cm-lines-color);
    border-radius: 0;
    color: var(--cm-mid-gray);
}

/* A rule separates; above the first option it only draws a line under the
   popover's own top edge. Menus that are actions all the way down (the inline
   product editor's row menu) start with one. */
.quick-edit-menu .quick-edit-option.is-action:first-child {
    margin-top: 0;
    padding-top: 5px;
    border-top: 0;
}

.check-list .check-box  .bgm-green {
    background-color: var(--cm-green) !important;

}

/** dark mode! */
body.dark {
    background-color: #555;
    color: #eee;
}

body.dark .card,
body.dark table,
body.dark table th,
body.dark #sidebar{
    background-color: var(--cm-mid-gray);
    color: #eee;
}

body.dark input,
body.dark select,
body.dark textarea {
    background-color: var(--cm-mid-gray) !important;
    color: #eee !important;
    border: 1px solid #999;
}

body.dark .table > thead > tr > th, body.dark .table > tbody > tr > th, body.dark .table > tfoot > tr > th,
body.dark .table > thead > tr > td, body.dark .table > tbody > tr > td, body.dark .table > tfoot > tr > td {
    border-top: 1px solid #999;
}

body.dark .s-profile > a {
    background-color: var(--cm-mid-gray);
}

body.dark .s-profile > a .sp-info {
    color: #eee;
}

body.dark .card h1,
body.dark .card h2,
body.dark .card h3,
body.dark .card h4,
body.dark .card h5,
body.dark .card h6
body.dark .modal-content h1,
body.dark .modal-content h2,
body.dark .modal-content h3,
body.dark .modal-content h4,
body.dark .modal-content h5,
body.dark .modal-content h6,
body.dark label
{
    color: #eee !important;
}

body.dark .main-menu li a {
    color: #444;

}

body.dark .main-menu > li.active > a {
    background-color: #999;
}

body.dark .main-menu > li > a:hover {
    background-color: #999;
}


body.dark .block-header h1,
body.dark .block-header h2,
body.dark .block-header h3,
body.dark .block-header h4
{
    color: #999;
}

.logo-darkmode, body.dark .logo-lightmode {
    display: none;
}

body.dark .table > thead > tr > th {
    border-bottom: none;
}

body.dark .logo-darkmode {
    display: block;
}

body.dark .modal-content {
    background-color: var(--cm-mid-gray);
}

body.dark .order-filter-panel {
    background-color: var(--cm-mid-gray);
    color: #eee !important;
    border: 0px solid #999;
    border-radius: 0px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

html:not(.ie9) .select::before {
    background-color: transparent;
}

body.dark .estimate-sidebar {
    background-color: #888;
    padding-top: 10px;
}

body.dark .estimate-sidebar .table {
    background-color: #999;
}

body.dark .estimate-editor .canvas {
    background-color: var(--cm-mid-gray);
    padding-top: 0px;
}

body.dark a {
    color: #B1E7F2;
}

body.dark #header  a {
    color: #eee;
}

body.dark .application-box {
    background-color: transparent;
}

body.dark .order-status.estimate {
    color: #CF96D9;
}

body.dark .order-status.to-invoice,
body.dark .margin-negative {
    color: #e68f84;
}

body.dark .checkbox .input-helper::after {
    border-bottom: 2px solid #26ffeb;
    border-left: 2px solid #26ffeb;
}

body.dark .widget-section .title {
    color: inherit;
}

body.dark .margin-positive {
    color: #4CaF50;
}
body.dark .light-inline-button {
    background-color: transparent;
    color: #eee !important;
}


body.dark .product-row {
    border-bottom: 1px solid #999;
}

body.dark .customer-search-results, .product-search-results {
    background-color: #999;
    box-shadow: 3px 3px 3px #333;
    border: 0px;
}

body.dark .search-result-item.active, .search-result-item:hover {
    background-color: var(--cm-light-green-transparent);
}

body.dark .search-result-item {
    border-bottom: 1px solid #bbb;
}


body.dark .tab-nav li.active > a {
    color: #555;
}

.tab-nav li:first-of-type a {
    padding-left: 0px;
}

body.dark .tab-nav:not([data-tab-color]) > li > a::after {
    background: #666;
}
body.dark .tab-nav li > a {
    color: #eee;
}
body.dark .tab-nav {
    box-shadow: inset 0 -2px 0 0 #999;
}

.comments .comment-body {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ededed;
}

.comments .comment-body .date {
    align-self: flex-end;
    font-style: italic;
}

.team {
}

.team .member:first-of-type {
    border-top: 1px solid #ededed;
}

.general-block .table td {
    padding-left: 0px !important;
}
.team .member {
    display: flex;
    border-bottom: 1px solid #ededed;
    padding-top: 10px;
    padding-bottom: 10px;
}

.staff-modal .widget-section .items {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.text-preview {
    border: thin solid transparent;
    border-radius: 6px;
    min-height: 50px;
    cursor: text;
    position: relative;
}
.text-preview > .zmdi.zmdi-edit {
    position: absolute;
    top: 0px;
    right: 0px;
}

.text-preview:hover {
    cursor: pointer;
}

.text-preview:hover > .zmdi.zmdi-edit {
    color: var(--cm-yellow);
    cursor: pointer;
}

.weekday-selection-grid {
    grid-area: wd;
}


.weekday-selection-grid .weekdays .checkbox + .checkbox {
    margin-top: 10px;
}
.weekday-selection-grid .weekdays {
    display: flex;
}

.pricelist-products-panel .euro-field {
    display: inline;
}


.batch-update-widget > span > input,
.batch-update-widget > span > button,
.batch-update-widget > span > select {
    display: inline !important;
    width: 40px !important;
    margin-left: 5px;
    margin-right: 5px;
}
.batch-update-widget > span > button {
    width: auto !important;
}

.batch-update-widget > span > .euro-field {
    border: 1px solid #ccc;
    height: 20px;
    padding-left: 3px;
    padding-right: 3px;
    width: 40px;

}

.pricelist-customer-panel {
    position: relative;
}

.pricelist-customer-panel .search-results {
    position: absolute;
    top: 60px;
    left: 0px;
    background-color: white;
    width: 100%;
    style: cursor;
}

.product-discount-input-flex  {
    display: flex;
}

.invoice-buttons {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.invoice-buttons button {
    margin-top: 10px;
}

.invoice-editor-body {
    display: flex;
    padding-left: 5px;
}


.invoice-editor-body .estimate-template {
    margin-right: 20px;
}

.invoice-editor-body .invoice-sidebar {
    max-width: 540px;
}

/* The invoice/estimate editor is a fixed-width print preview (912px, the width
   the document actually prints at) beside a 540px action column — 1450px of
   nowrap flex, which under the burger cutoff simply ran off the modal with the
   action column entirely off-screen and nothing scrolling.

   The document keeps its exact width, because narrowing it would stop showing
   what prints; it scrolls sideways inside its own box instead, and the action
   column takes the row below. */
@media only screen and (max-width: 900px) {
    .invoice-editor-body {
        flex-wrap: wrap;
    }
    .invoice-editor-body .estimate-template {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-right: 0;
        overflow-x: auto;
        /* Auto-hiding scroll shadows, as on the data grids: the document's own
           white ground otherwise makes a cut-off column look like the edge of
           the paper. */
        background:
            linear-gradient(to right, #eee 30%, rgba(238, 238, 238, 0)) left center / 28px 100% no-repeat,
            linear-gradient(to left, #eee 30%, rgba(238, 238, 238, 0)) right center / 28px 100% no-repeat,
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.14), transparent) left center / 12px 100% no-repeat,
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.14), transparent) right center / 12px 100% no-repeat;
        background-attachment: local, local, scroll, scroll;
    }
    .invoice-editor-body .invoice-sidebar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 20px;
    }
}


.route-selector, .menu-cat-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.route-selector .checkbox {
    width: 130px;
    margin: 0px !important;
}

.menu-cat-selector .checkbox {
    margin: 0px !important;
}

dfn {
    font-style: normal !important;
    border-bottom: 1px dotted;
    cursor: help;
}

.searched-product-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}

.searched-product-labels .product-label {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-right: 5px;
}

/* meals/menus service */
.menus-products-panel .date-section,
.menus-menu-block .date-section

{
    border-top: 1px solid #ededed;
    display: flex;
    flex-direction: column;
}
.menus-menu-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menus-menu-block-wrap {
    overflow-x: auto;
}

.menus-menu-block-wrap .menus-menu-block {
}

.menus-menu-block .menus-product-row-wrap {
}

.menus-product-rows menus-product{

}
.menus-product-rows {
    flex-grow: 1;
    border-left: 1px solid #ccc;
}

.menus-product-row-wrap {
    display: flex;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding-top: 2px;
}


.date-section-header .menus-product-row-wrap {
    border-bottom: 0px;
    border-top: 1px solid #ccc;
}

.menus-product-row-wrap .qty {
    padding-left: 4px;
    padding-right: 4px;
    display: flex;
    width: 38px;

}

.menus-product-row-wrap .qty input {
    display: inline-block;
    width: 32px;
}

.menus-product-row-wrap .price {
    padding-left: 4px;
    padding-right: 4px;
    display: flex;
    width: 72px;
}


.menus-product-row-wrap .price input {
    display: inline-block;
    width: 48px;
}
.menus-single-product-section th {
    font-size: 9px;
    text-transform: inherit !important;
}
.menus-menu-block-wrap > .flex {
    gap: 20px;
}


.menus-product-row-wrap div.price > div.m-r-5:first-of-type {
    margin-top: 7px;
}
.menus-product-row {
    display: flex;
    border-right: 1px solid #ccc;
    width: 100%;
}



.menus-product {
    border-bottom: 0px solid #ededed;
    margin-right: 5px;
    flex-grow: 1;
}

.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(1),
.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(3),
.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(4),
.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(5) {
    width: 130px;
}

.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(2){
    width: 300px;
}

.menus-product, .menus-header{
    padding: 1px;
}

.menus-product-row-wrap .commands  {
    display: flex;
    align-items: center;
}

.menus-header {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.menus-single-product-section td,
.menus-single-product-section th {
    padding: 1px !important;
}

.menus-search-product {
    position: relative;
}
.menu-modal-wrap .modal-header {
    padding-bottom: 0px !important;
}

.menus-product .inner {
    display: flex;
    justify-content: space-between;
}

.menus-product .inner > div:first-of-type {
    flex-grow: 1;
}

.menus-product-row-cols-2 .menus-product {
    width: 50%;
}
.menus-product-row-cols-3 .menus-product {
    width: 33.333%;
}
.menus-product-row-cols-4 .menus-product {
    width: 25%;
}

.menus-filter-bar > * {
    margin-right: 20px;
}

.menus-filter-bar {
    display: flex;
    align-items: top;
}

.menus-filter-bar-wrap {
    border: 1px solid #ededed;
    padding: 10px;
    border-radius: 6px;
}

.cm-grid.menus-route-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.route-accordeon .route-accordeon-header {

}
.menu-customer-row {
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    border-bottom: 1px solid #ededed;
}

.menus-product .flag-icon {
    height: 9px;
    margin-top: 2px;
}


.menu-customer-row .customer-name {
    flex-grow: 1;
}

.menu-customer-row .customer_id {
    width: 50px;
}
.menu-customer-row .commands {
    width: 150px;
}


.menu-customer-checkbox-row {
    display: flex;
    align-items: baseline;
    border-bottom: 1px solid #ededed;
}

.menu-customer-checkbox-row .inactive {
    width: 120px;
}
.menu-customer-checkbox-row .checkbox {
    width: 230px;
}

.menu-customer-checkbox-row .customer-comment-box {
    flex-grow: 1;
    margin-left: 30px;
}

.labelname {
    width: 100px;
    padding-left: 2px;
    padding-right: 2px;
    border-right: 1px solid #ccc;
}

.menus-product-row-wrap .commands {
    width: 50px;
    display: flex;
    justify-content: center;
    gap: 5px;
}
.menus-product-row-wrap .commands > div {
    text-align: center;
}

.menus-product-th {
    border: none !important;
}


.image-text-widget-display .col-md-3 img,
.image-text-widget-display .col-md-4 img,
.image-text-widget-display .col-md-6 img {
    margin-top: 15px;
}

/* Width lives with the rest of the check-column sizing at the bottom of this
   file — see "Datagrid checkbox column". */

.table .table {
    background-color: white;
}

.bootgrid-table.components-grid td:first-of-type {
    width: 100px;
}



.bootgrid-table.components-grid td:nth-of-type(3) {
    width: 300px;
}

.table.bootgrid-table.components-grid th i {
    display: inline !important;
}

.new-entry-wrap {
    flex-grow: 1;
}

.quick-entry-widget {
    border: 1px solid #ededed;
    padding: 5px;
    border-radius: 6px;
    flex-wrap: wrap;
    padding-left: 10px;
}

.quick-entry-widget > * {
    margin-right: 20px;
}


.quick-entry-widget > .product-name-field {
    width: 80%;
    margin-bottom: 20px;
}

.quick-entry-widget > .select,
.quick-entry-widget > .price-field {
    flex-grow: 1;

}
.individuals-grid thead tr th:first-of-type,
.org-grid thead tr th:first-of-type {
    width: 320px;
}


.menu-invoice-error-report .error-row td:first-of-type {
    color: #F44336;
}

.menu-invoice-error-report .success-row td:first-of-type {
    color: #6fd273;
}


.cm-grid.ingredients-diet-grid {
    grid-template-columns: repeat(auto-fit, minmax(177px, 1fr)) !important;
}



/* estimate editor v2 */

.estimate-editor-v2 {
}


.menus-menu-block .date-section:nth-of-type(even) {
    background-color: #ededed;
}


.diet-chooser-grid {
    grid-template-columns: 1fr 1fr;
}


.order-filter-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
    container-type: inline-size;
    container-name: filter-modal;
}

.top-filters-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.date-pickers-row {
    align-items: flex-start !important;
}

.date-pickers-content {
    display: flex;
    gap: 20px;
    flex: 1;
}

.date-picker-col {
    flex: 1;
}

.order-filter-modal .content-more {
    flex-grow: 1;
}

.expand-toggle-btn {
    margin: 10px 0;
    font-size: 0.8rem;
}


.customer-orders-grid tr td:first-of-type {
    width: 210px;
}

.customer-orders-grid tr td:last-of-type {
    width: 130px;
}

.menus-product-row-wrap .label-name {
    width: 100px;
}

.avail-labels-grid  tr th:first-of-type,
.avail-labels-grid-extra-prods  tr th:first-of-type {
    width: 130px;
}


.avail-labels-grid  tr th:nth-of-type(3),
.avail-labels-grid-extra-prods  tr th:nth-of-type(3) {
    width: 80px;
}


.bulk-invoice-filter > div {
    margin-right: 20px;
}

.bulk-invoice-filter {
    /* Four filter groups — period, send method, payment method, route — that on
       one unwrappable row are wider than a tablet, taking the last two off the
       page entirely. */
    flex-wrap: wrap;
    row-gap: 16px;
    margin-bottom: 30px;
}

.flex-grow {
    flex-grow: 1;
}

.p-t-4 {
    padding-top: 4px ;
}

.cm-media-widget {
 /*   height: 380px; */
}
.cm-media-grid {
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}
.cm-media-grid.thumb-size-small {
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
}
.cm-media-grid.thumb-size-small .thumb-wrap {
    height: 120px;
}
.cm-media-grid.thumb-size-medium {
    grid-row-gap: 15px;
    grid-column-gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
}
.cm-media-grid.thumb-size-medium .thumb-wrap {
    height: 180px;
}
.cm-media-grid.thumb-size-large {
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
.cm-media-grid.thumb-size-large .thumb-wrap {
    height: 280px;
}

.font-chooser-grid {
    grid-row-gap: 0px;
    grid-column-gap: 0px;
}

.order-editor-grid .customer-box {
    grid-area: customer;
}

.order-editor-grid .location-box {
    grid-area: location;

}
.general-box table tr td {
    border-top: 0px solid black !important;
    padding: 4px;
}

.order-editor-grid .general-box {
    grid-area: general;

}

.order-editor-grid .margin-box {
    grid-area: margin;

}
.ds-form {
    min-width: 250px;
}
.ds-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-overview {
    flex-grow: 1;
}

.margin-box .table {
    flex-grow: 1;
}
.margin-box .table tr td:first-child {
    padding-left: 0px !important;
}
.margin-box .table tr td:last-child {
    padding-right: 0px !important;
}

.order-editor-grid .margin-box-large {
    grid-area: margin-l;
}


.order-editor-grid .products-box {
    grid-area: products;
}


.order-editor-grid .planning-box {
    grid-area: planning;
}

.order-editor-grid .staff-box {
    grid-area: staff;
}

/* No named grid-area: these panels only appear on the few orders that issued
   a voucher or carry partner-linked products, so they auto-place into a
   full-width row of their own at the end of the grid rather than claiming a
   slot in every breakpoint's grid-template-areas. Without the span they land
   one column wide in the first empty cell, near the top. */
.order-editor-grid .vouchers-box,
.order-editor-grid .partner-requests-box {
    grid-column: 1 / -1;
}

.order-editor-grid .files-box {
    grid-area: files;
}

.order-editor-grid .estimate-box {
    grid-area: estimates;
}

.order-editor-grid .sent-items-box {
    grid-area: sent-items;
}

.order-editor-grid .activity-log-box {
    grid-area: activitylog;
}

.order-editor-grid .invoice-box {
    grid-area: invoices;
}

.order-editor-grid .gks-order-card {
    grid-area: gks;
}

/* GKS order-detail card (expandable-card adds the outer card-padding) */
.gks-card-body { padding: 0; }
.gks-card-status-hint  { font-size: 12px; color: #777; margin-bottom: 8px; }

.gks-card-history-title { font-weight: 600; margin: 0 0 6px; font-size: 13px; color: #1f6f78; }
.gks-card-empty { color: #999; font-style: italic; padding: 6px 0; }
.gks-card-event {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid #eee;
}
.gks-card-event-label  { flex: 1; }
.gks-card-event-amount { font-variant-numeric: tabular-nums; color: #333; }
.gks-card-event-status { font-size: 11px; text-transform: uppercase; }
.gks-card-event-status.ok      { color: #2f7a37; }
.gks-card-event-status.failed  { color: #b0382c; }
.gks-card-event-status.pending { color: #8a6d1f; }

/* Register / reconcile section, below the history */
.gks-card-register {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 2px solid #eef1f1;
}
.gks-card-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #555;
}
.gks-card-delta { color: #b06a1f; }
.gks-card-fully { color: #2f7a37; font-weight: 600; }
.gks-card-register-btn { margin-top: 4px; }

.order-editor-grid .comments-box {
    grid-area: comments;
}

.order-editor-grid .view-estimate-box {
    grid-area: view-estimate;
}

.order-editor-grid .view-invoice-box {
    grid-area: view-invoice;
}

.order-editor-grid .internal-comments-box {
    grid-area: internal-comments;
}

.order-editor-grid .vehicle-box {
    grid-area: vehicle;
}

.order-editor-grid {
    width: 100%;
    display: grid;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
}

/* Tablet portrait: two columns instead of six, so the three cards on the top row
   stop trying to fit an address and a contact block into a sixth of the screen
   and spilling out of their own card.

   `!important` because `grid-template-areas` is written inline from
   `calc-grid-template-areas`, which a stylesheet rule cannot outrank. Dropping
   the template turns every `grid-area: <name>` into a failed line-name lookup,
   i.e. auto-placement — so each panel is put back on a full-width row here, and
   only customer/location opt out to share the first one. */
@media only screen and (min-width: 641px) and (max-width: 900px) {
    .order-editor-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas: none !important;
    }
    .order-editor-grid > * {
        /* `grid-area: <name>` also names a grid-ROW line, and with no template
           that name spawns an implicit track per panel — the grid ends up wider
           than the page with each card in a sliver of it. Reset the whole
           shorthand before spanning the columns. */
        grid-area: auto !important;
        grid-column: 1 / -1 !important;
    }
    .order-editor-grid .customer-box,
    .order-editor-grid .location-box {
        grid-column: auto !important;
    }
}

.card-body .table {
    margin-bottom: 5px;
}


 .items .checkbox {
     margin-top: 0px !important;
 }

 .internal-comment-row td {
     border-top: 1px dashed #ededed !important;
 }

 .modal-dialog.scrollable.process-modal {
     margin-top: 10px !important;
     height: 99% !important;
     z-index: 999999;
 }

 .modal-dialog.scrollable.process-modal .modal-content {
   height: 99% !important;
 }

 .event-files-grid thead tr {
     display: none;
 }
 .menu-customer-disabled {
     background-color: #fabecb;
 }

.items .use-price-incl-vat-checkbox {
    margin-bottom: 4px;
 }


.cm-grid.cm-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.estimate-editor-v2 {

}

.product-name-editor {
    gap: 20px;
    width: 100%;
    margin-right: 40px;
}

.product-name-editor .name-form {
    flex-grow: 1;
}




.modal-dialog.full .modal-content {
    background-color: var(--cm-white);
}

.modal-dialog.full .close {
    font-size: 29px;

}

.tiny .modal-dialog {
    width: 460px;
}

.estimate-page {
    border: 1px solid #ededed;
    display: flex;
    position: relative;
    background-color: white;
    flex-direction: column;
    margin-bottom: 30px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.estimate-page.composition-mode {
    cursor: crosshair;
}

.block-outline:hover:not(.selected) {
    border-color: rgba(59,130,246,0.8) !important;
}

/* Range input styling for composition properties panel (Firefox + WebKit) */
.block-properties input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    outline: none;
}

.block-properties input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cm-green);
    cursor: pointer;
}

.block-properties input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cm-green);
    border: none;
    cursor: pointer;
}

.block-properties input[type="range"]::-moz-range-track {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
}

.estimate-editor-v2 .estimate-page {
  margin-top: 30px;
}

.estimate-section-wrap:not(.viewer-only):hover {
  outline: 2px dashed rgba(32,32,32,0.15) !important;
  outline-offset: 2px;
}

.estimate-page .page-content {
    flex-grow: 1;
}
.estimate-wrap {
    margin-top: 20px;
    position: relative;
}

/* Responsive width/height for mobile-view */
.mobile-view {
    width: 100%;
    height: auto;
    .estimate-page {
        width: 100%;
        height: auto;
    }
}

/* Estimate editor looks similar to desktop-view */
.desktop-view .estimate-page.a4-portrait {
    width: 210mm;
    height: 297mm; /* sqrt(2) factor */
}
.estimate-editor-v2 .estimate-page.a4-portrait {
    width: 210mm;
    height: 297mm; /* sqrt(2) factor */
}

.desktop-view .estimate-page.a4-landscape {
    width: 297mm;
    height: 210mm; /* 1/sqrt(2) factor */
}
.estimate-editor-v2 .estimate-page.a4-landscape {
    width: 297mm;
    height: 210mm; /* 1/sqrt(2) factor */
}

.desktop-view .estimate-page.page-16-9 {
    width: 297mm;
    height: calc(297mm * 0.5625); /* 1/16/9 factor */
}
.estimate-editor-v2 .estimate-page.page-16-9 {
    width: 297mm;
    height: calc(297mm * 0.5625); /* 1/16/9 factor */
}

/* Page tools — Canva-style always-visible toolbar */
.page-tools-bar {
    position: absolute;
    top: -56px;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 2px;
    padding: 4px;
    font-family: var(--cm-ui-font-family);
    font-weight: 300;
    font-size: var(--cm-normal-font-size);
    color: var(--cm-font-color);
    line-height: normal;
}

.page-tools-bar .page-tool-btn {
    min-width: 44px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #555;
    font-size: 16px;
    transition: background 150ms, color 150ms;
}
.page-tools-bar .page-tool-btn .page-tool-label {
    font-size: 10px;
    line-height: 1;
    color: #6b7280;
    white-space: nowrap;
    pointer-events: none;
}
.page-tools-bar .page-tool-btn:hover {
    background: #f0f0f0;
    color: #333;
}
.page-tools-bar .page-tool-btn:hover .page-tool-label {
    color: #333;
}
.page-tools-bar .page-tool-btn.page-tool-delete:hover {
    background: #fdeaea;
    color: #d32f2f;
}
.page-tools-bar .page-tool-btn.page-tool-delete:hover .page-tool-label {
    color: #d32f2f;
}
.page-tools-bar .page-tool-sep {
    width: 1px;
    align-self: center;
    height: 28px;
    background: #d1d5db;
    margin: 0 6px;
}

.estimate-page .section-toolbar i.zmdi {
    font-size: 20px;
    color: #333;
    background-color: white;
    display: block;
    padding: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    style: cursor;
    border-radius: 20px;
    border: 1px solid #ededed;
}

.estimate-page .section-toolbar i.zmdi.transparent {
    background-color: transparent;
    border: none;
}

.estimate-page .section-toolbar i.zmdi {
    cursor: pointer;
    font-size: 16px;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    padding: 8px;
}

.table td.unmapped {
    color: #ccc;
    background-color: #f0f0f0;
}

.table .error-row  td {
    background-color: #ffbfbd;
    color: #fff;
}
.table .error-row  td.unmapped {

    color: #ededed;
}


.table .error-row  td:last-of-type {
    background-color: inherit;
}


.yuki-export-results tr.error td {
    background-color: #ffbfbd;
    color: fff;
}


.yuki-export-results tr.success td {
    background-color: #4CaF50;
    color: fff;
}


.pricelist-filter-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-row-gap: 5px;
}

.ed2-image-preview {
    max-width: 500px;
    position: relative;
}

.ed2-image-preview img {
    width: 100%;
}

.ed2-image-preview > .btn {
    position: absolute !important;
    right: 5px;
    top: 5px;
}

.ed2-image-preview > .btn.edit {
    left: 5px;
    top: 5px;
    right: auto;
}



.estimate-page-wrap .page-content {
    box-sizing: border-box;
}

.estimate2-toolbar {
    display: flex;
}


.save-status-indicator {
    position: fixed;
    right: 55px;
    top: 35px;
    z-index: 100000000000;
}
.save-status-indicator > div {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 6px;
}

.saving-popup {
    background-color: var(--cm-light-green);
    color: var(--cm-white);
}

.section-toolbar-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0.1;
    display: flex;
    transition: opacity 100ms ease-in-out;
    flex-direction: column;
    overflow: visible;
    transform: translateY(50%);
    z-index: 10;
}

.estimate-section:hover + .section-toolbar-wrap, .section-toolbar-wrap:hover {
    opacity: 1;
    box-shadow: 0 0 0 1px inset rgba(32,32,32,0.5);
}

.section-toolbar {
    background-color: rgba(0,0,0,0.3) !important;
    border: 1px solid black;
}


.section-toolbar .add-section-popover {
    position: static;
    /*    background-image: linear-gradient(220deg, rgb(53, 58, 101) 0%, rgb(53, 58, 101) 50%, rgb(53, 58, 101) 100%) ; */
    background-color: rgba(0,0,0,0.3) !important;
    color: white;
    left: 0;
    width: 300px;
    bottom: 40px;
    padding: 20px;
    box-sizing: border-box;

}


.section-toolbar-wrap .add-section-popover > b {
    text-align: center;
    display: block;
}


.add-section-wrap:hover .add-section-popover {
    display: flex;
}

.section-toolbar:hover {

}

.section-toolbar-wrap .add-section-popover .blocks {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 5px;
    box-sizing: border-box;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 5px;
}

.section-toolbar-wrap .add-section-popover .block {
    cursor: pointer;
    border: 1px solid #fff;
    background-color: #fff;
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
}



.section-toolbar-wrap .add-section-popover .block:hover {
    border: 1px solid var(--cm-yellow);
    color: var(--cm-yellow) !important;
}

.section-toolbar-wrap .add-section-popover .block.col-1 {
    grid-template-columns: 1fr;
}

.section-toolbar-wrap .add-section-popover .block.col-2 {
    grid-template-columns: 1fr 1fr;
}

.section-toolbar-wrap .add-section-popover .block.col-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.block .dummy-col {
    border: 1px solid #ededed;
    border-radius: 6px;
    font-size: 32px;
    line-height: 26px;
    padding-bottom: 4px;
    padding-left: 4px;
    padding-right: 4px;
}

.estimate-section-wrap {
    position: relative;
    box-sizing: border-box;
    min-height: 20px;
}



.estimate-page:hover  .section-toolbar-wrap,
.section-toolbar-wrap:hover {
    display: flex;
    box-sizing: border-box;
}
.estimate-section {
    display: flex;
}


.viewer-wrap .planning-panel-view {
    background: transparent;
}
.viewer-wrap { min-height: 20px; }
.section-close {
    cursor: pointer;
    z-index: 9999999999999;
}

.section-toolbar-wrap {

}

.section-toolbar {
    position: relative;
    display: flex;
    flex-direction: row;

    width: 100%;
    height: 44px;
    bottom: 0px;
    padding: 5px 5px;
    box-sizing: border-box;
    z-index: 10;
    justify-content: center;
    gap: 10px;
}



.estimate-section-wrap:hover  .estimate-section {

}


.estimate-column {
    min-height: 20px;
    position: relative;
    box-sizing: border-box;
}

.estimate-column.snap-source {
    outline: 2px solid var(--cm-blue, #2196F3) !important;
    outline-offset: -2px !important;
    border-radius: 2px;
    z-index: 5;
}


.estimate-section-wrap .ql-editor,
.estimate-section-wrap .ql-toolbar,
.estimate-section-wrap .planning-settings {
    background-color: var(--cm-white);
}

.estimate-editor-v2 .estimate-white-font .ql-editor{
    background-color: #999;
}

.view-only .product-planning-products .ql-editor {
    background-color: transparent !important;
}


.estimate-editor-v2 .estimate-section-wrap:hover .estimate-column {
    background-color: rgba(32,32,32,0.05);
}

.estimate-viewer .estimate-section-wrap:hover .estimate-column {
    border-left: none;
    border-right: none;
    border-top: none;
}

.content-editor-wrap {
    position: relative;
    margin-top: 1rem;
}

.content-editor-wrap .ql-toolbar {
    background-color: white;
}

.estimate-column-content {
    flex-grow: 1;
}
.estimate-column .drag-bar-wrap {
    width: 8px;
    height: 100%;
    position: absolute;
    z-index: 8;
    cursor: col-resize;
    box-sizing: border-box;
    --drag-bar-color: var(--cm-status-option-bg-secondary);
}

.estimate-column .drag-bar-wrap .drag-bar {
    position: absolute;
    width: 2px;
    height: 100%;
    background: var(--drag-bar-color);
    opacity: 0;
    transition: opacity 150ms 0s;
}

.estimate-column .drag-bar-wrap .drag-bar.left-resize {
    left: 0;
}

.estimate-column .drag-bar-wrap .drag-bar.right-resize {
    right: 0;
}

.estimate-column .drag-bar-wrap .drag-bar-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 32px;
    border-radius: 4px;
    background: white;
    border: 2px solid var(--drag-bar-color);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.estimate-column:hover .drag-bar-wrap .drag-bar {
    opacity: 1;
    transition-delay: 0.28s;
}

body.col-resizing .estimate-column .drag-bar-wrap .drag-bar {
    opacity: 1;
    transition-delay: 0s;
}

.estimate-column .drag-bar-wrap.right-resize {
    right: 0px;
    top: 0px;
}
.estimate-column .drag-bar-wrap.left-resize {
    left: 0px;
    top: 0px;
}

.drag-bar-wrap .left-margin,
.drag-bar-wrap .right-margin {
    user-select: none;
    position: absolute;
    padding: 4px 8px;
    top: calc(50% + 24px);
    border-radius: 4px;
    background: var(--drag-bar-color);
    color: white;
    font-family: Roboto;
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
}

.drag-bar-wrap .left-margin {
    left: 0;
    transform: translateX(-50%);
}

.drag-bar-wrap .right-margin {
    right: 0;
    transform: translateX(50%);
}

body.col-resizing .estimate-page {
    overflow: hidden;
}

.estimate-column .content-chooser {
    display: flex;
    justify-content: center;
}

.content-chooser-column {
    position: relative;
}

.estimate-column .content-chooser .zmdi {
    margin: 5px;
    font-size: 16px;
    display: block;
    background-color: white;
    padding: 8px 10px;
    border-radius: 17px;
    width: 34px;
    height: 34px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ededed;
}

.estimate-column-content .editor-wrap {
    background-color: white;
}


.estimate-column .column-toolbar-inner {
    display: none;
}

.estimate-column:hover .column-toolbar-inner {

}
.viewer-wrap {
    position: relative;
    user-select: none;
}
.viewer-wrap-bar {
    position: absolute;
    top: -30px;
    height: 30px;
    gap: 10px;
    z-index: 5;
    color: black !important;
    display: flex;
    align-items: center;
    background: white;
    padding: 0 10px;
    border-radius: 2rem;
    box-shadow: 0 0 3px 0 rgba(32,32,32,0.15);
}

.viewer-wrap-bar i:hover {
  background: #f0f0f0;
  color: #333;
}

.viewer-wrap-bar .zmdi {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #555;
  font-size: 0.75rem;
  transition: background 150ms, color 150ms;
}


.viewer-wrap .viewer-wrap-bar {
    display: none;
    cursor: pointer;
}

.viewer-wrap:hover .viewer-wrap-bar {
  display: flex;
}

.viewer-wrap img {
    width: 100%;
}

.viewer-wrap p {
    margin-bottom: 0px;
    margin-top: 0px;
    padding-left: 0px;
    padding-right: 8px;
    line-height: 1.54;
}


.estimate-editor-v2 .main-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}



.estimate-editor-v2 .button-toolbar .spacer {
    flex-grow: 1;
}

.estimate-editor-v2 .button-toolbar {
    border: 0px solid black;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.toolbar-modal .due-date {
    width: 140px;
}

.zipcode-row {
    justify-content: flex-start;
    width: 100%;
}
.zipcode-widget {
    margin-top: 10px;
}

.zipcode-widget input {
    width: 300px;
}

.zipcode-row > * {
    margin-right: 10px;
}


.zipcode-widget {
    flex-grow: 1;
}

.zipcode-row {
    border: 1px solid #ededed;
    padding: 10px;
}

.ignore-label {
    background-color: #ededed;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    margin-right: 5px;
}

.viewer-wrap .ql-align-center {
    text-align: center;
}

.viewer-wrap .ql-align-right {
    text-align: right;
}

.split-label {
    padding: 2px 5px;
    margin-right: 5px;
    border-radius: 5px;
    background-color: #ededed;
    border: 1px solid #ccc;
}


.custom-logo-wrap {
    position: relative;
    max-width: 320px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.custom-logo-wrap img {
    width: 100%;
}

.custom-logo-wrap .btn {
    position: absolute;
    top: 5px;
    right: 5px;
}

.estimate-page-wrap .ql-toolbar.ql-snow,
.estimate-page-wrap .ql-container {
    font-family: inherit !important;
}


.misc-settings > div:hover {
  background-color: rgba(32,32,32,0.02);
}

.misc-settings .toggle-switch, .reminders .toggle-switch {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    /* Group the slider + name on the left instead of pushing them apart. */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    /* Separator line between settings so individual options are distinct. */
    border-bottom: 1px solid rgba(32, 32, 32, 0.08);
}

/* Render the slider (.ts-helper) to the LEFT of the setting name (.ts-label)
   via flex `order` rather than reordering the markup, so the
   `input:checked + .ts-helper` adjacent-sibling selector keeps working. */
.misc-settings .toggle-switch .ts-helper, .reminders .toggle-switch .ts-helper {
    order: -1;
}

/* In the reordered row the label sits to the right of the slider, so the
   default right margin is no longer needed — the flex `gap` handles spacing. */
.misc-settings .toggle-switch .ts-label, .reminders .toggle-switch .ts-label {
    margin: 0;
}

.misc-settings .select {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.misc-settings .select > label {
    margin: 0;
}

.misc-settings .select select.form-control {
    width: 320px;
    margin-left: auto;
}

.misc-settings .misc-select-row {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.misc-settings .misc-select-row > label {
    margin: 0;
}

.misc-settings .misc-select-row .select {
    margin: 0;
}

.product_weight_sub {
    color: #aaa;
    width: 40px;
}


.customer-import-modal {
    overflow-x: auto;
}

.deadline-num-days {
    width: 48px;
}
.deadline-hour {
}
.deadline-num-days {
    flex-grow: 1;
    display: flex;
}
.deadline-num-days .form {
    align-items: center;
    margin-right: 10px;
}

.deadline-num-days .form input {
    width: 70px;
}
.deadline-flex {
    display: flex;
}


.internal-comment-row-inner {
    justify-content: space-between;

}


.internal-comment-row-inner .internal-comment-box {
    flex-grow: 1;
}

.internal-comment-row-inner .who {
    width: 200px;
}


.internal-comment-row-inner .where {
    width: 200px;
}

.ql-picker.ql-size .ql-picker-item[data-value]::before {
  font-size: max(attr(data-label px), 10px) !important;
}

.rsvp-user-block {
    border-bottom: 1px solid #ededed;
    padding-bottom: 10px;
}
.rsvp-user-header {
    display: flex;
    padding: 10px;
    gap: 10px;
}
.rsvp-user-header .name {
    font-weight: normal;
    width: 200px;
}
.rsvp-user-header .summary {
    flex-grow: 1;
}

.rsvp-user-header .summary dl {
    font-weight: normal;
    display: flex;
    text-align: right;
}
.rsvp-user-header .summary dt {
    font-weight: normal;
    margin-right: 5px;
}
.rsvp-user-header .summary dd {
    margin-right: 10px;
}
.rsvp-user-header .email,
.rsvp-user-header .phone {
    width: 40px;
}
.rsvp-invitation-row {
    display: flex;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ededed;
}

.rsvp-invitation-row .order-name {
    flex-grow: 1;
}
.rsvp-invitation-row .shift {
    text-align: right;
    margin-right: 30px;
}
.rsvp-invitation-row .rsvp {
    width: 100px;
}

.rsvp-first-col {
    border-left: 2px solid;
}

.rsvp-first-col.declined {
    border-left-color: #FFC107;
}

.rsvp-first-col.accepted {
    border-left-color: #4CaF50;
}

.rsvp-first-col.invited {
    border-left-color:  #a0d5f2;
}

.rsvp-overview-table tr td:nth-of-type(3) {
    width: 100px;

}

.staff-overview-row-time-edit {
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    width: 70px;
    align-items: center;
    border: 0px solid red;
}


.staff-overview-row-time-edit.editing  {
    width: 140px;
}

.staff-overview-row-time-edit .zmdi.zmdi-edit {
    display: none;
}

.staff-overview-row-time-edit:hover .zmdi.zmdi-edit {
    display: inline;
}

.view-options-setting .select {
    display: flex;
    width: 200px;
    align-items: center;
}

.view-options-setting .select label {
    margin-right: 10px;
    margin-top: 3px;
}

.production-overview-grid {

}

.production-progress-bar {
    display: flex;
    gap: 10px;
}

.progress-entry-wrap .progress-entry-hover {
    box-sizing: border-box;
}

.progress-entry {
    display: flex;

    align-items: center;
}


.progress-entry-wrap {
    position: relative;
    margin-left: 5px;
}

.progress-entry {
    align-items: center;
    text-align: center;
    padding: 5px;
    border: 1px solid #ededed;
    border-radius: 6px;
    background: white;
    white-space: nowrap;
    position: relative;
    height: 25px;
}


.progress-entry:hover  {
}

.progress-entry-hover .progress-entry {
    padding: 5px;
}


.progress-entry.checked {
    background-color: #6fd273;
    border: 0px solid #6fd273;
    color: white;
}

.progress-entry-wrap .progress-entry-hover {
    background-color: white;
    display: flex;
    min-width: 300px;
    flex-wrap: wrap;
    gap: 5px;
}



.production-overview-grid tbody td:nth-of-type(1),
.production-overview-grid tbody td:nth-of-type(2)
{
    width: 90px;
}


.production-overview-grid tbody td:nth-of-type(3),
.production-overview-grid tbody td:nth-of-type(4) {
    width: 200px;
}

.production-overview-grid tbody td:nth-of-type(5) {
}

.estimate-column-content .planning-settings  {
    padding: 10px;
    border: 1px solid #ededed;
}

.prep-list-header-filter {
    position: relative;
    margin-top: 10px;
}
.prep-list-header-filter .checkbox-wrap-footer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 5px;
}
.prep-list-header-filter .checkbox-wrap {
    position: absolute;
    display: flex;
    padding: 0px 10px;
    flex-direction: column;
    top: 24px;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 99;
    min-width: 250px;
    right: 0px;
}

.production-overview-grid thead th:last-of-type > span {
    display: none;
}

.production-overview-grid tr th:nth-of-type(5) {
    width: 100px;
}

.bootgrid-table thead th {
}

.image-viewer-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.ical-form {
    gap: 40px;
    width: 100%;
}

.ical-form .form-control {
    min-width: 200px;
}

.summary-report {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    margin-bottom: 10px;
    margin-top: 20px;
}

.ical-report .updated td:first-of-type,
.ical-report .created td:first-of-type {
    border-left: 2px solid green;
}

.ical-report .error td:first-of-type {
    border-left: 2px solid red;
}

.allowed-diets-widget .cm-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}

.planning-level-1 {

}
.planning-level-2 {
    margin-left: 20px;
}
.product-planning-header {
    border: 1px solid #ededed;
    padding: 10px;
    font-weight: bold;
}

.product-planning-body {
    border-left: 1px solid #ededed;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    padding: 10px;
}

.product-planning-products {
    border-left: 1px solid #ededed;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    padding: 10px;

}

.planning-product {
    margin-bottom: 10px;
    border-bottom: 1px solid #ededed;
    padding-bottom: 5px;

}

.planning-product-description {
    font-style: italic;
}

.planning-product-type-title {
    font-weight: bold;
}
.planning-product-title {
    display: flex;
    justify-content: space-between;
}
.planning-product .zmdi-close {

}

.planning-product-sub-product {
    margin-left: 10px;
}

.table.planning-panel-view  .product-planning-products {
    border: none;
    margin: 0px;
    padding: 0px;
}

.connected-location {
    padding-top: 5px;
    padding-bottom: 5px;
    justify-content: space-between;
}

.locations-selector {
    min-width: 120px;
    padding: 2px;
}
.locations-selector select {
    width: 120px;
}

.prep-list-modal-checkboxes {
    display: grid;
    /* auto-fill, not auto-fit: empty tracks must be kept so that a short block
       and a long one resolve to the same column widths and line up. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    margin-bottom: 20px;

}

.prep-list-modal-checkboxes .checkbox {
    margin: 0px; !important;
}

/* The radio/select option groups ride the same track grid as the checkbox
   blocks above, two tracks wide, so every group title starts on a column edge
   the checkboxes also use. */
.cm-grid.prep-list-modal-optiongroups {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-column-gap: 10px;
}

.cm-grid.prep-list-modal-optiongroups > * {
    grid-column: span 2;
}

.variation {
    gap: 10px;
}
.variation .radio {
    display: flex;
    flex-grow: 1;
    gap: 10px;
}
.variation-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.variation-options-list .variation-select-option {
    align-items: center;
    gap: 20px;
}

.variation-checkbox-option-price {
    max-width: 140px;
    margin-top: 10px;
}
.variation-wrap {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ededed;
}

.variation-wrap .variation-header {
    text-align: right;
}

.variations-selector {
    margin-top: 10px;
    flex-wrap: wrap;
}

.variations-selector.variations-grouped {
    flex-direction: column;
}

.variations-selector.variations-grouped div {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.allergen-grid {
    padding-right: 30px;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
}
.allergen {
    width: 64px;
    cursor: pointer;
}
.allergen img {
    width: 100%;
}
.allergen.allergen-selected  {
    border-bottom: 3px solid #353A65;
}

.selected-variations {
    display: flex;
    gap: 10px;
}

.webshop-product-expanded {
    display: flex;
    flex-direction: column;
    gap: 10px;


}

.tiered-prices-widget {
}

.order-product-comment textarea{
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    resize: none; /* Prevent user resizing */
    overflow: hidden; /* Hide scrollbars */
}

#app .plan-extra li > span{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

}

#app .plan-extra li > span .price {
    text-align: right;
    margin-right: 20px;
}

.zmdi-caret-down, .zmdi-caret-up {
  padding: 0 0.3em;
  background: rgba(32,32,32,0.05);
  border-radius: 20%;
}
.zmdi-caret-down:hover, .zmdi-caret-up:hover {
  background: rgba(32,32,32,0.07);
}

#app .plan-extra #menu-app-calculator > div > div  {
    display: flex;
    flex-direction: column;
    align-items: end;
}


#app .plan-extra #menu-app-calculator input  {
    width: 80px;
    margin-left: 20px;
    border: 1px solid #ccc;
    padding: 4px;
    text-align: right;
}

.expanded-filters-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 30px;
}

.filter-group-heading {
    font-weight: 600;
    font-size: 1rem;
    color: var(--cm-mid-gray);
    border-bottom: 1px solid var(--cm-lines-color);
    padding-bottom: 4px;
    margin-top: 10px;
    margin-bottom: 0;
}

.filter-group-heading:first-child {
    margin-top: 0;
}

.content-more .filter-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.filter-pills-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
}

.filter-pills-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
}

.filter-row-prefix {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 230px;
    min-width: 230px;
    flex-shrink: 0;
    margin-right: 10px;
}

@media screen and (max-width: 1590px) {
    .date-pickers-row .filter-row-prefix {
        display: none !important;
    }
}

.filter-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cm-mid-gray);
    white-space: nowrap;
}

.filter-pills-row .filter-label {
    margin-right: 2px;
}

.select-deselect-icons {
    display: flex;
    gap: 2px;
}

.btn-select-toggle {
    padding: 1px 5px !important;
    font-size: 0.7rem !important;
    line-height: 1.2;
    color: var(--cm-mid-gray) !important;
    border-color: var(--cm-lines-color) !important;
    background: transparent !important;
    opacity: 0.6;
}

.btn-select-toggle:hover {
    opacity: 1;
    color: var(--cm-text-color) !important;
}

.filter-pills-row .btn {
    font-size: 0.8rem;
    padding: 2px 8px;
}

.filter-pills-row .filter-button.order-status {
    padding: 2px 8px;
}

.order-filter-modal .tag-wrap .tag {
    font-size: 0.8rem;
    padding: 1px 10px;
    border-radius: 6px;
}

.order-filter-modal .tag-box {
    gap: 4px;
}

.order-filter-modal .pop-in4 {
    animation: none;
}

.filter-pills-row > .tag-box-wrap {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
}

.filter-pills-row:has(.tag-box-wrap),
.filter-pills-row:has(.filter-pills-content) {
    align-items: flex-start;
    padding-top: 2px;
}

.order-filter-modal .searched-product-labels {
    gap: 5px;
}

.order-filter-modal .product-label {
    font-size: 0.8rem;
    padding: 1px 10px;
    border: 1px solid var(--cm-lines-color);
    border-radius: 6px;
    background-color: #fff;
}


.filter-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.product-filter-widget-inner {
    display: flex;
    flex-direction: column;
}

.product-search-compact {
    position: relative;
}

.product-search-input {
    font-size: 0.8rem;
    padding: 2px 8px;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
    width: 160px;
    outline: none;
}

.product-search-input:focus {
    border-color: var(--cm-teal);
}

.content-more > a {
    display: block;
}

.menu-process-history .table tr td:nth-of-type(1),
.menu-process-history .table tr th:nth-of-type(1) {
    width: 180px;
    padding-left: 5px;
}

.menu-process-history .table tbody tr td:last-of-type {
    width: 16px;
    color: red;
    padding-right: 3px;
}

.menu-process-history-clickable:hover {
    background-color: #f5f5f5;
}

.menu-process-history-snapshot-meta {
    color: #999;
    font-size: 12px;
    margin-bottom: 15px;
}

.menu-process-history-snapshot-day {
    margin-bottom: 18px;
}

.menu-process-history-snapshot-date {
    margin: 0 0 6px;
    text-transform: capitalize;
}

.menu-process-history-snapshot-line {
    padding: 2px 0;
}

.menu-process-history-snapshot-qty {
    font-weight: 600;
}

.menu-process-history-snapshot-label,
.menu-process-history-snapshot-diets {
    color: #888;
}

.view-shop-as-menu-customer {
}

.cloudpos-report {
    display: flex;
    flex-direction: column;
}

.cloudpos-report .cloudpos-result {
    padding: 5px;
    border-bottom: 1px solid #ededed;
}
.cloudpos-report .cloudpos-error i.zmdi {
    color: red;
}

.cloudpos-report .cloudpos-success i.zmdi {
    color: green;
}

.type-filter-buttons {
    display: flex;
    gap: 10px;
}

.snelstart-config-box {
    border: 1px solid #ccc;
    padding: 0px 5px;
}
.tax-split-widget > .checkbox {
    padding-top: 10px;
}

.tax-split-row td:nth-of-type(2) input {
    width: 60px;
    margin-right: 3px;
}

.estimate-editor-v2 .page-content,
.estimate-viewer .page-content {
  overflow-y: auto;
  overflow-x: hidden;
}

/* --- Section gutter (fixed-position overlay, escapes overflow clipping) --- */
.section-gutter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    z-index: 10;
}
.gutter-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: background 150ms, color 150ms, border-color 150ms;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.gutter-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
    color: #333;
}
.gutter-btn.gutter-delete:hover {
    color: #d32f2f;
    border-color: #d32f2f;
}

/* --- Gap zone (insertion line between sections) --- */
.gap-zone {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.gap-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--cm-status-option-bg-secondary);
    opacity: 0;
    transition: all 150ms 0s;
}

.gap-zone:hover .gap-line,
.gap-zone.gap-locked .gap-line {
    opacity: 1;
    height: 4px;
    transition-delay: 0.28s;
}
.gap-zone.edge-gap .gap-line {
    transition-delay: 0s;
}
.gap-plus-button {
    position: relative;
    z-index: 6;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cm-status-option-bg-secondary);
    color: white;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms 0s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.gap-zone:hover .gap-plus-button,
.gap-zone.gap-locked .gap-plus-button {
    opacity: 1;
    transition-delay: 0.28s;
}
.gap-zone.edge-gap .gap-plus-button {
    transition-delay: 0s;
}

/* --- Section type picker (dropdown from gap + button) --- */
.section-type-picker {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 20;
    margin-top: 4px;
}
.section-type-picker .picker-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    color: #555;
    transition: border-color 150ms, color 150ms;
}
.section-type-picker .picker-option:hover {
    border-color: #2196F3;
    color: #2196F3;
}


.order-filter-panel .template-selector {
    width: 150px;
}

.order-filter-panel .template-selector select {
    max-width: 100%;
}

.invoice-address-edit-button{
    cursor: pointer;
    position: absolute;
    top: 0;
    left: -15px;
}

.customer-address-box  {
    margin-top: 100px;
    margin-left: 40px;
    position: relative;

}

.customer-address-box.no-margin-top {
    margin-top: 0;
}

.customer-address-box textarea {
    height: 100px;
    width: 100%;
}

.invoice-contact-picker {
    font-size: inherit;
    line-height: inherit;
    height: auto;
    min-height: 0;
    padding: 1px 4px;
    max-width: 240px;
    vertical-align: baseline;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

.invoice-contact-picker-toggle {
    cursor: pointer;
    margin-left: 4px;
    font-size: inherit;
    vertical-align: baseline;
}

.day-boxes {
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 10px;
}
.day-toggle-box {
    border: 1px solid #ededed;
    padding: 20px 10px;
    display: flex;
}

.day-toggle-box .toggle-switch label:first-of-type {
    width: 80px;
    display: inline-block;
}

.toggle-title {
    font-weight: bold;
}

.day-box-exclusions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

}

.day-box-exclusions .day-toggle-box .toggle-title{
    width: 110px;
}

.toggle-switch-block {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
}

.toggle-switch-block .btn {
    /* A floor, not a fixed width: both states stay the same size for short labels,
       while a longer localized one ("Je ne peux pas") grows the pill instead of
       spilling out of it. */
    min-width: 100px;
    white-space: nowrap;
}

.day-exclusion-group-days .day-toggle-box {
    padding: 5px 10px;
    box-sizing: border-box;
}

.day-exclusion-group {

}

.avail-unknown {
    color: #ccc;
}

.avail-available {
    color: green;
}

.avail-unavailable {
    color: red;
}

/* order show extra locations */

p.other-location {
    margin: 5px 0 0 0;
}

.no-margin-bottom {
    margin-bottom: 0;
}

ul li.other-loc {
    padding-bottom: 0;
}

.order-editor-grid .location-box.card .card-body.card-padding span.extra-location:before {
    content:"• ";
}

/* end order show extra locations */


.bgm-teal {
    background-color: #2e8c81 !important;
}

/* The order total's breakdown, in a tooltip. Two columns so the figures line up
   against their labels; the label column is the one that may wrap. */
.price-breakdown {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 14px;
    text-align: left;
}

.price-breakdown-row {
    display: contents;
}

.price-breakdown-value {
    text-align: right;
    white-space: nowrap;
}
.invoice-total-summary {
    margin-top: 20px;
}
.invoice-total-summary .totals {
    width: 120px;
}
/*.order-total-summary, .invoice-total-summary*/ .totals {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
/*.order-total-summary, .invoice-total-summary*/  .sum-by-status {
    width: 180px;
    display: inline-block;
}

@media (hover: hover) {
    td.commands .btn {
        background-color: transparent !important;
        color: black;
        box-shadow: none;

    }
    tr.editing td.commands .btn {
        background-color:  #2e8c81 !important;
        color: white;
        box-shadow: none;
    }

    .bootgrid-table tr.editing td.commands button .zmdi {
        color: white !important;
        visibility: visible !important;
    }

    td.commands .btn-danger:hover {
        color: var(--cm-color-danger) !important;
        background-color: var(--cm-color-danger-bg) !important;
    }

    td.commands .btn-info:hover {
        color: white !important;
        background-color: #40b2ca !important;
    }

    .bootgrid-table tr td.commands button.save {
        visibility: visible !important;
    }

    .bootgrid-table tr td.commands button .zmdi,
    .bootgrid-table tr td.commands button.delete,
    .bootgrid-table tr .extra-order-options-wrap {
        visibility: hidden;
    }

    .bootgrid-table tr:hover td.commands button .zmdi,
    .bootgrid-table tr:hover td.commands button,
    .bootgrid-table tr:hover .extra-order-options-wrap {
        visibility: visible;
    }


    .order-total-summary .total-incl-vat {
        display: none;
        animation: fadeOut 0.5s;
    }

    .order-total-summary:hover .total-incl-vat {
        display: inline;
        animation: fadeIn 0.5s;
    }

}

.cm-media-widget .cm-grid {
    max-height: 500px;
    overflow-y: scroll;
}

.progress-bar {
    background-color: #009688;
}

.bootgrid-table th {
    flex-direction: column;
    gap: 10px;
}

.invoice-action-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn {
    border-radius: 5px;
}

.btn-xs {
    border-radius: 3px;
}
.btn-lg {
    border-radius: 8px;
    text-transform: none;
}

.plan-name .starter {
    color: #91dce6;
}

.plan-name .fully-digital {
    color: #5f9299;
}

.plan-name .king-jungle {
    color: #e7be3d;
    font-weight: bold;
}

.plan-name .icon {
    font-size: 18px;
    margin-right: 10px;
}

/* google maps start */

#maps-modal {
    height: 400px;
}

.modal.google-maps .modal-header {
    padding: 5px 23px;
}

.modal-header .route-description {
    font-size: 0.8em;
    font-weight: 300;
    line-height: 1.3em;
}

.modal-header .route-description td:first-child {
    width: 8em;
}

.modal.google-maps div.modal-header > button > i.zmdi-close {
    padding-top: 10px;
}

/* google maps end */


.cm-label {
    margin-right: 20px;
    font-weight: bold;
    font-family: Panton-Regular;
    font-size: 18px;
    display: inline-block;
    min-width: 110px;
}
.cm-label.black {
    color: #888;

}
.cm-label.yellow {
    color: var(--cm-yellow);
}
.cm-label.green {
    color: var(--cm-green);

}

.orders-list > .card  {
    border-radius: 0px 0px 8px 8px;
}
.order-table-actions-wrap {
    border-bottom: 0px solid #edecec;
}

.orders-list > .card > .card-header {
    padding-left: 20px;
    border-bottom: 0px solid #edecec;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #f8f8f8;
    opacity: 0;
    animation: fadeOut 0.5s;
}

.container-fluid .block-header .actions {
    opacity: 0;
    animation: fadeOut 0.5s;
}

.orders-list:hover > .card > .card-header,
.container-fluid:hover .block-header .actions {
    visibility: visible;
    animation: fadeIn 0.5s;
    opacity: 1;
}

.orders-list > .card .card-header .actions {
    top: 7px;
}

.order-table-actions .filter-text {
    color: #888;
}

.tooltip-icon {
    position: relative;
}

.tooltip-icon:hover .zmdi,
li.dropdown:hover .zmdi{
    color: var(--cm-yellow);
}
.tooltip-icon:hover .zmdi-delete,
li.dropdown:hover .zmdi-delete,
.btn-secondary:hover .zmdi-delete {
    color: var(--cm-danger) !important;
}

.tooltip-icon .popup-tooltip {
    display: none;
    position: absolute;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31);
    z-index: 9999;
    min-width: 400px;
    left: -350px;
    padding: 10px 20px;
    top: 43px;
    font-size: 14px !important;
    color: #5e5e5e !important;

}

.day-column .tooltip-icon .popup-tooltip {
    top: auto !important;

}


.vertical-alignment-top {
    bottom: 43px !important;
    top: auto !important;
}

/* Variation on the tooltip popup for inline search results */
.popup-search-results {
    display: block;
    position: absolute;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31);
    z-index: 99;
    width: 400px;
    padding: 10px 20px;
    color: #333;
}

/* Material-calendar day preview popup (CAT-990).

   This is a floating hover tooltip (z-index 9999, shadowed) showing a
   product's Totaal/Verhuurd/Beschikbaar for one day. Two things broke it after
   the "modern" month-calendar redesign:

   1. The base `.tooltip-icon .popup-tooltip` sets `min-width: 400px`; reset it
      so this override's `width` actually wins (otherwise the popup renders
      400px wide and blankets the neighbouring day columns).
   2. The popup's inner <table> lives inside `.cm-calendar-modern.datepicker
      .table-condensed`, so the redesign's day-cell rule
      (`.table-condensed td { height: 92px; padding: 8px; border; border-radius }`)
      cascaded onto every popup <td> — making each of the 3-4 rows a 92px
      bordered box. The table ballooned to ~370px tall and spilled out of the
      fixed-height card with no background, smearing down over the rows below.
      The inner-cell reset below (`...popup-tooltip table td`) insulates the
      popup table from those day-cell rules.

   The popup is a floating tooltip, so it does not have to fit inside the
   ~100px day cell — it sizes to its content and is centred over the day so any
   overhang is small and symmetric. `overflow: hidden` keeps everything inside
   the rounded, shadowed card. */
.sw-products .tooltip-icon .popup-tooltip {
    box-sizing: border-box;
    width: 200px;
    min-width: 0;
    left: -100px;
    top: auto;
    bottom: calc(100% + 12px);
    height: auto;
    overflow: hidden;
    padding: 12px 16px;
}

/* Keep the inner table within the card: fixed layout at 100% width so a long
   product name wraps instead of stretching the table past the card edge (which,
   with `overflow: hidden`, would clip the Totaal/Verhuurd/Beschikbaar values). */
.sw-products .tooltip-icon .popup-tooltip table {
    width: 100%;
    table-layout: fixed;
}

/* Insulate the popup's inner table from the modern-calendar day-cell rules
   (which otherwise force each row to 92px tall with a border/radius). Keep the
   rows compact so the table fits the card. */
.sw-products .tooltip-icon .popup-tooltip table td {
    height: auto;
    padding: 1px 0;
    border: none;
    border-radius: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* The value column (second cell of each data row) stays narrow and
   right-aligned so the figures sit at the card's right edge. */
.sw-products .tooltip-icon .popup-tooltip table td:nth-child(2) {
    width: 3.5em;
    padding-left: 8px;
    text-align: right;
}

.create-webshop-button .popup-tooltip {
    left: 80px !important;
    top: 120px !important;
}

.datepicker .sw-products table {
    border: none;
}

.datepicker .sw-products table tbody tr td {
    border: none;
    text-align: left;
    font-size: 11px;
    padding-bottom: 0;
}

.datepicker .sw-products table tbody tr td:nth-child(2) {
    padding-left: 5px;
}

.tooltip-icon .popup-tooltip.alignment-left {
    left: -25px;
}

.content-column-icon.tooltip-icon .popup-tooltip {
    top: 51px;
}

.content-column-icon.tooltip-icon .popup-tooltip.alignment-left {
    left: -18px;
}
.content-column-icon.tooltip-icon .popup-tooltip.alignment-right {
    left: -343px;

}




.top-menu .popup-tooltip.alignment-right {
    left: -340px;
    top: 43px;
    color: black;
    text-align: left;
}


.top-menu .help-button-nav .popup-tooltip.alignment-right {
    left: -355px;

}


.column-tooltip .popup-tooltip.alignment-left {
    left: -28px;
    top: 34px;
}
.column-tooltip .popup-tooltip.alignment-right {
    left: -353px;
    top: 34px;
}

.tooltip-icon .arrow {
    left: 365px;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #cccccc;
    border-bottom-color: #ffffff;
    top: -19px;
    border-width: 10px;
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-bottom-color: white;
    border-style: solid;
}

.tooltip-icon .hitbox {
    left: 30px;
    margin-left: -11px;
    top: -19px;
    position: absolute;
    display: block;
}

.tooltip-icon .hitbox::after {
    position: absolute;
    display: block;
    content: " " ;
    top: -4px;
    width: 210px;
    height: 25px;
}
.tooltip-icon .alignment-left .hitbox::after {
    margin-left: -20px;
}
.tooltip-icon .alignment-right .hitbox::after {
    margin-left: 210px;
}

.tooltip-icon .arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-bottom-color: transparent;
    border-style: solid;
    content: " ";
    top: 1px;
    margin-left: -4px;
    border-top-width: 0;
    border-bottom-color: #ffffff;
}

.tooltip-icon .arrow.vertical-alignment-top {
    display: none !important;
}

.tooltip-icon .arrow.vertical-alignment-top::after {
    display: none !important;
}

/* The material-calendar popup is now a clean floating card centred above the
   day cell (see `.sw-products .tooltip-icon .popup-tooltip`). The little arrow
   triangle was anchored to point at the icon below the popup; with the popup
   floating above it has no target and, clipped by the card's `overflow:
   hidden`, only shows as a stray nub inside the card edge. Hide it (CAT-990). */
.sw-products .tooltip-icon .arrow {
    display: none;
}

.tooltip-icon .arrow.alignment-left {
    left: 40px;
}

.tooltip-icon .arrow.alignment-center {
    left: 190px;
}

.popup-tooltip {
}

.tooltip-icon:hover .popup-tooltip {
    display: block;
    opacity: 0;
    animation: fadeIn 0.15s ease-in 0.15s;
    animation-fill-mode: forwards;
}

.tooltip-icon.tooltip-delay:hover .popup-tooltip {
    animation-delay: 2s;
}

.tooltip-compact {
    position: fixed;
    /* Fixed positioning near the right viewport edge squeezes the auto width
       to the space between `left` and the edge, long before the translateX
       clamp pulls the box back on screen — leaving a one-word-wide column.
       Size to content instead; max-width still wraps long text. */
    width: max-content;
    z-index: 10001;
    background-color: white;
    color: #5e5e5e;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31);
    font-size: 13px;
    font-weight: normal;
    text-transform: none;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    /* Same 0.15s hover-intent delay as `.tooltip-icon:hover .popup-tooltip`, so
       the two tooltip families answer a hover at the same speed. Long enough
       that sweeping across a column does not trail tooltips behind the pointer,
       short enough that aiming at one feels like a response rather than a wait. */
    animation: fadeIn 0.15s ease-in 0.15s forwards;
}

.tooltip-compact::before {
    content: "";
    position: absolute;
    /* Arrow tracks the anchor point: negated translateX shift, clamped to stay inside tooltip.
       The tooltip's translateX = clamp(8px - A, -50%, 100vw - A - 100% - 8px) where A = --anchor-x.
       Negating: clamp(-(100vw - A - 100% - 8px), 50%, -(8px - A)) = clamp(A + 100% + 8px - 100vw, 50%, A - 8px).
       Outer clamp keeps the arrow at least 12px from tooltip edges. */
    left: clamp(12px, clamp(calc(var(--anchor-x) + 100% + 8px - 100vw), 50%, calc(var(--anchor-x) - 8px)), calc(100% - 12px));
    margin-left: -6px;
    border: 6px solid transparent;
}

.tooltip-compact.tooltip-compact-below::before {
    bottom: 100%;
    border-bottom-color: white;
}

.tooltip-compact.tooltip-compact-above::before {
    top: 100%;
    border-top-color: white;
}

/* Clickable variant (cs2.tooltip/click-popover): interactive and shown
   immediately, unlike the hover tooltip which is inert and fades in on a delay. */
.tooltip-compact.is-clickable {
    pointer-events: auto;
    opacity: 1;
    animation: none;
    padding: 6px;
    white-space: normal;
    /* THIS is the scrolling element — its max-height is measured at open time
       against the room on the side it opened to. `contain` stops the gesture
       chaining to the page when the list hits its end, which on a phone reads
       as "the menu doesn't scroll, the page does". */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* No arrow on a click menu, because this element is also the scroller: the
   arrow is absolutely positioned against it, and the `-above` variant sits at
   `top: 100%` — 12px past the bottom edge. Block-end overflow counts toward
   `scrollHeight`, so a menu with room to spare still renders a scrollbar, and
   every upward-opening menu got one. (`-below` puts the arrow above the top
   edge, which does not count, which is why only one direction showed it.)
   A menu anchored to a token reads as a menu without a tail; the tooltips that
   want one are not `.is-clickable`. */
.tooltip-compact.is-clickable::before {
    content: none;
}

/* The ingredient's "komt voor in" list inside a compact tooltip. A bare `ul`
   indents for body copy, which in a 13px popover pushes every name half the
   width in. */
.appears-in-list {
    margin: 0;
    padding-left: 16px;
    text-align: left;
}

/* One line, always. A wrapping list sets the height of the whole row, and on a
   table where most ingredients appear in several products that is every row —
   the full list is in the tooltip. */
/* Tags are the one cell allowed to CLIP rather than get a tooltip. They are a
   set with no natural order and no single value to name, so a third tag
   sliding off the edge costs less than every row growing a second line. */
.bootgrid-table td[class*="col-tags"],
.bootgrid-table td[class*="col-product-tags"] {
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
}

/* The tag editor's autocomplete drops out of the cell, and `overflow: hidden`
   clips a descendant whatever its z-index, so the cell must stop clipping
   while the list is open. The list is in the DOM only while it is open, so
   the clip returns by itself. */
.bootgrid-table td[class*="col-tags"]:has(.search-results-wrap, .no-results),
.bootgrid-table td[class*="col-product-tags"]:has(.search-results-wrap, .no-results) {
    overflow: visible;
}

/* A cell that holds free text: one line, clipped, with the whole of it in a
   tooltip. Wrapping text is what makes a table's rows different heights, and a
   description is the worst offender because its length is arbitrary. */
.cell-clip {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.appears-in-cell {
    display: inline-block;
    /* A real width, not 100%: the cell has no width of its own, so a percentage
       lets the column grow to the longest list instead of clipping it. */
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Date cells never wrap and never clip. A date split across two lines is
   unreadable, and a clipped one is worse than unreadable — "17-07-202" can be
   read as a date that does not exist. The floor is sized for the longest plain
   format (dd-mm-yyyy) plus the cell's own padding; the columns that render a
   weekday and a time grow past it on their own.

   Matched on the column class rather than listed per grid, so a date column
   added later is covered without anyone remembering this rule: `col-date`
   catches date / date_created / date_sent / date_due, `_date` catches
   invoice_date / order_date / start_date / end_date / snooze_date. */
.bootgrid-table td[class*="col-date"],
.bootgrid-table th[class*="col-date"],
.bootgrid-table td[class*="_date"],
.bootgrid-table th[class*="_date"] {
    min-width: 110px;
    white-space: nowrap;
}

/* Simple one-value cells do not wrap. A wrapped cell sets the height of the
   whole ROW, so one long supplier name costs every column beside it — and a
   name broken across two lines reads worse than one that is clipped.
   Deliberately per column: the composite cells on other grids stack several
   facts on purpose and must keep wrapping. */
.ingredients-overview-grid td.col-name,
.ingredients-overview-grid td.col-supplier_name,
.ingredients-overview-grid td.col-article_number,
.ingredients-overview-grid td.col-appears-in {
    white-space: nowrap;
}

/* Bootstrap's `.radio, .checkbox` are form-row controls: 10px of margin above
   and below, plus a block line-height taller than the 18px control itself.
   Inside a grid cell that is a ~26px floor under every row — the checkbox, not
   the content, decides how tall the table is. Same override `.listview
   .lv-item .checkbox` already makes for its own rows.

   Carries the `table` step so it outweighs a bare `table th.check .checkbox`:
   this is the only rule that should set the grid checkbox's margin. */
table td.check .checkbox,
table th.check .checkbox {
    margin: 0;
    line-height: 1;
}

.section-toolbar .zmdi:hover {
    color: var(--cm-yellow) !important;
    border-color: var(--cm-yellow) !important;
}

.template-selector select {
    max-width: 140px;
}

.section-toolbar .popup-tooltip {
    top: 60px !important;;
}

.error-box {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #000;
    z-index: 900000000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 8px;
}

.top-menu .zmdi-settings {
    color: var(--cm-yellow);
}

.blur {
    opacity: 0.5;
    filter: blur(3px);
    pointer-events: none;
}

.hover-opacity {
    opacity: 0.34;
    transition: opacity 0.15s;
}
.hover-opacity:hover {
    opacity: 1;
    transition: opacity 0.3s;
}

.color-preview {
    border: 1px solid var(--cm-very-light-gray);
    border-radius: 6px;
    color: var(--cm-mid-grey);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    text-transform: uppercase;
    cursor: pointer;
}
.emphasize-it {
    border-style: solid;
    border-width: thin;
    border-color: var(--cm-yellow);
    animation: emphasizeIt 2s ease-out, 2s ease-in-out 3s infinite alternate emphasizeGlowing;
}

.emphasize-completed {
    border-style: solid;
    border-width: thin;
    border-color: var(--cm-green);
    animation: emphasizeCompleted 2s ease-out;
}

.document-settings {
    gap: 20px;
    margin-top: 30px;
    padding: 10px;
    border: 1px solid var(--cm-very-light-gray);
    border-radius: 6px;
}

.quil-editor[style] .ql-editor * {
    font-family: var(--editor-default-font, inherit);
}
.estimate-document-settings {
    flex-direction: column;
}

.document-settings input {
    padding-left: 5px !important;
}

.viewer-wrap:hover .estimate-text-column-content {
    min-height: 0px;
}

.estimate-viewer .viewer-wrap:hover .estimate-text-column-content {
    min-height: 0px;
}
.estimate-view-wrap .estimate-viewer {
    margin-top: 140px;
}
@media screen and (max-width: 900px) {
    .estimate-view-wrap .estimate-viewer {
        margin-top: 20px;
    }
}
.estimate-editor-expl
{
    max-width: 50%;
}
.estimate-viewer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Customer comment form in public estimate viewer */
.estimate-comment-form {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}

.estimate-comment-form textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

.estimate-comment-form textarea:focus {
    border-color: var(--cm-green);
    outline: none;
}

/* Customer comment display in estimate editor */
.estimate-customer-comment-display {
    background: #f9f9f9;
    padding: 15px;
    border-left: 3px solid var(--cm-green);
    margin: 10px 0;
    border-radius: 0 4px 4px 0;
}

.estimate-customer-comment-display h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #333;
}

.estimate-customer-comment-display .comment-content {
    white-space: pre-wrap;
    color: #555;
    line-height: 1.5;
}

.estimate-customer-comment-display .comment-timestamp {
    margin-top: 10px;
    font-size: 12px;
}

/* Regarding cards with a cover image (background image) */
.card.cover-image {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
    cursor: pointer;

    opacity: 1;
    transition: 0.3s;
}

.cover-image .card-header {
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom-width: 0px;
}

.cover-image:hover {
    opacity: 0.8;
}

.cover-image:hover .card-header {
    border-bottom: medium solid var(--cm-green);
}

/* Regarding the overlay on the estimate-page-wrap in estimate preview */
.estimate-viewer:hover .overlay {
    display: flex;
    flex-direction: column;
}

.overlay {
    justify-content: flex-tart;
    align-items: center;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 2;
    cursor: pointer;
    background-color: rgba(0,0,0, 0.1);
    animation: fadeIn 0.3s;
}

.overlay .circle {
    height: 300px;
    width: 300px;
    top: 100px;
    position: absolute;
    background-color: var(--cm-green);
    color: white;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}

.upsell .explainer a {
    color: var(--cm-yellow);
}
.upsell .explainer h3 {
    color: var(--cm-white) !important;
}
.overlay h2 {
    position: absolute;
    top: 50%;
    width: 300px;
    text-align: center;
    margin: 0px;
    transform: translateY(-50%);
    color: white;
}

.signature-expl {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 30px;
}


/* Regarding estimate tooltips */
.estimate-document-settings {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.tooltip-icon.zmdi {
    color: #aaa;
    font-size: 12px;
}

.tooltip-icon.zmdi .popup-tooltip {
    color: rgb(94, 94, 94);
}

.help-button-nav {
    color: var(--cm-white);
    cursor: pointer;
    margin-top: 3px;
    font-size: 24px;
    margin-left: 100px;
    margin-right: 20px;
}

.help-button-nav:hover {
    border-color: var(--cm-yellow);
}

.view-estimate-box > .card-header {
}

.main-menu.starter .feature-ingredients a,
.main-menu.starter .feature-webshop a,
.main-menu.main-course .feature-webshop a
{
}

.upsell {
    gap: 20px;
    flex: 1;
    align-items: start;

}

.upsell .card {
    width: 800px;
    max-width: 50%;
}

.upsell.staff-upsell .card {
    width: 100% !important;
}

.shopping-list-preview img {
    border: 1px solid #eee;
    box-shadow: 3px 3px 3px #eee;

}

.upsell .explainer {
    background-color: var(--cm-green);
    color: var(--cm-white);
    padding: 25px;
}

.upsell .explainer h2 {
    color: var(--cm-white);
    font-size: 20px;
}

.upsell .explainer p {
    font-size: 15px;
    font-weight: 300;
}

.upsell .explainer button {
    background-color: var(--cm-yellow) !important;
    color: var(--cm-white) !important;
}

.upsell .videowrap {
    display: flex;
    gap: 30px;
    flex-direction: column;
    align-items: start;
    flex-grow: 1;
}


.upsell .videowrap .video {
    width: 100% !important;
    padding: 20px;
    border-radius: 8px;
    background-color: #000;
    height: 360px;
}

.required-input > input {
    background-color: var(--cm-danger-soft);
    animation: fadeIn 0.5s;
    border-radius: 8px;
}


.ql-snow .ql-editor h1,
.ql-snow .ql-editor h2,
.ql-snow .ql-editor h3,
.ql-snow .ql-editor h4,
.ql-snow .ql-editor h5,
.ql-snow .ql-editor h6
{
    margin-top: 9px;
    margin-bottom: 9px;
/*    font-size: inherit !important; */
}

.ql-editor {
    line-height: 1.54 !important;
}

.product-planning-products ul li {
    padding-left: 0px !important;
}

.product-planning-products .ql-indent-1 {
    padding-left: 10px !important;
}


.section-tabs {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.move-section-left,
.move-section-right{
    cursor: pointer;
}

.section-tab {
    display: flex;
    gap: 20px;
    padding: 10px 20px;
    border: 1px solid var(--cm-lines-color);
    border-radius: 20px;
    align-items: center;
}

.section-tabs > .tooltip-icon {
    font-size: 1.5em;
}

.section-tabs > .tooltip-icon,
.section-tab {
    cursor: pointer;
}

.section-tab.active {
    background-color: var(--cm-table-heading-bg-color);
    border: 1px solid var(--cm-green);
    color: var(--cm-table-heading-color);
}

.section-tab .zmdi.zmdi-edit:hover {
    color: var(--cm-yellow);
}

.section-tab .section-tab-title .unnamed {
}

.section-tab-title input {
    border: 1px solid var(--cm-yellow);
    background-color: inherit;
}

.section-tabs .section-tab:first-of-type .move-section-left,
.section-tabs .section-tab:last-of-type .move-section-right {
    display: none;
}

.move-section {
    background-color: #ededed;
    border-radius: 8px;
    width: 16px;
    height: 16px;
    text-align: center;
    color: black;
    line-height: 16px;
    padding-bottom: 8px;
}

.move-section:hover {
    background-color: #ccc;
}

.widget-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.general-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.widget-toolbar.toolbar-fixed {
    background-color: white;
    border-radius: 6px;
    position: fixed;
    top: 90px;
    right: 20px;
    padding: 5px;
    z-index: 99999;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
    flex-direction: column;
}

.widget-toolbar .spacer {
    flex-grow: 1;
}


.future-concept-order-group .collapsed {
    display: none;
}
.future-concept-order-group .expanded {
    display: block;
}
.future-concept-orders {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ccc;
}

.future-concept-orders .future-concept-order-group-header {
    margin-bottom: 5px;
    padding-left: 20px;
    border-bottom: #ededed;
}
.future-concept-orders .fc-order {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: #ededed;
    padding-left: 20px;
    padding-right: 20px;
}

.future-concept-orders .fc-order > span:first-of-type {
    width: 140px;
}

.future-concept-orders .fc-order > span:nth-of-type(2) {
    width: 100px;
}

.future-concept-orders .fc-order > span:nth-of-type(3) {
    flex-grow: 1;
}
/*
.materials-editor .modal-body td:nth-child(2) {
    padding-left: 2em;
}
*/
.materials-editor .submit-button {
    padding: 20px 0;
    text-align: right;
}

.materials-table tbody td {
    text-align: right;
    padding-right: 10px;
}

.materials-table td {
    padding-right: 10px;
}

.materials-table td.product-name {
    text-align: left;
}

.product-name-cell .materials-availability {
    position: relative;
    cursor: pointer;
}

.new-product .textarea textarea {
    border: 1px solid #ccc !important;
    padding: 5px;
}

.not-enough-orders-hint {
    flex-grow: 1;
    margin-left: 30px;
}

.ai-results .table-responsive {
    margin: 30px 20px 0 0;
}

.header-inner .ai-button {
    position: fixed;
    z-index: -1;
    width: 100%;
    text-align: center;
}

.header-inner {
    padding: 0px !important;
}

.ai-button .yellow {
    color: rgb(253, 191, 15);
}

.ai-button a .white {
    color: rgb(255,255,255);
}
.ai-results .buttons input {
    margin-right: 5px;
}

.new-day-divider {
    position: relative;
}

.new-day-divider > td:first-of-type {
    position: relative;
}


/* todo add day abbrevs for each language :-) */
.new-day-divider.ma td:first-of-type::before { content: "ma"; }
.new-day-divider.di td:first-of-type::before { content: "di"; }
.new-day-divider.wo td:first-of-type::before { content: "wo"; }
.new-day-divider.do td:first-of-type::before { content: "do"; }
.new-day-divider.vr td:first-of-type::before { content: "vr"; }
.new-day-divider.za td:first-of-type::before { content: "za"; color: #888; }
.new-day-divider.zo td:first-of-type::before { content: "zo"; color: #888; }

/* A day change is a different KIND of break, not a heavier one, so it is dashed
   at the same width as an ordinary row rule. On --cm-lines-color rather than
   the lighter row colour: the gaps already cost a dash its weight, so matching
   the row colour would leave it fainter than the lines it is meant to outrank. */
.new-day-divider td {
    border-top: 1px dashed var(--cm-lines-color) !important;
}

/* The dashed rule turns down and around the label instead of running past it,
   so the day and the line marking it read as one mark. Right and bottom only:
   the row's own border-top is the top edge and the table's edge is the left.
   No fill — the label sits on whatever the row is, so it follows hover and
   selection instead of holding a tint that stops matching. */
.new-day-divider td:first-of-type::before {
    position: absolute;
    top:  0px;
    left: 0px;
    /* Tight: the label shares the cell's top-left corner with the checkbox, and
       it is what has to give — since losing its fill it no longer hides what it
       overlaps. */
    padding: 0px 2px 0px;
    color: var(--cm-table-heading-color);
    border-right: 1px dashed var(--cm-lines-color);
    border-bottom: 1px dashed var(--cm-lines-color);
    border-radius: 0px 0px 6px 0px;
    font-size: 9px;
}

.new-day-divider.za td:first-of-type::before,
.new-day-divider.zo td:first-of-type::before {
}

.modal-color-picker-widget-modal .modal-dialog {
    width: 278px;
}

#webshop-preview-frame {
    min-height: 80vh;
    height: 900px;
    width: 100%;
    max-height: 100vh;
    border-radius: var(--cm-border-radius);
}

.border-type-button {
    background-color: #fff;
    height: 30px;
    width: 160px;
    color: white;
    position: relative;
    padding: 5px 5px 0px 0px !important;
    margin-right: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}
.border-type-button.active {
    border: 1px solid #333;
}

.border-type-button-inner {
    height: 26px;
    width: 150px;
    position: absolute;
    z-index: 1;
    left: 0px;
    bottom: 0px !important;
    background-color: var(--cm-mid-gray);
    border-radius: 0px 0px 0px 4px;
}
.border-type-button-inner.shadow {
    height: 23px;
    background-color: #aaa;
    width: 145px;
}

.border-type-button.active .border-type-text {
    color: #333;
}

.location-times-widget .inline-datepicker {
    font-size: 0.8rem;
}

.border-type-text {
    position: absolute;
    z-index: 2;
    top: 6px;
    left: 0px;
    width: 160px;
    text-align: center;
    color: white;
}

.gap-5 {
    gap: 5px;
}
.gap-10 {
    gap: 10px;
}
.gap-20 {
    gap: 20px;
}
.gap-30 {
    gap: 30px;
}
.gap-40 {
    gap: 40px;
}
.add-product-or-title-bar {
    gap: 20px;
}


.cm-hidden {
    visibility: hidden;
}

.menus-header:hover .buttons .zmdi-copy {
    visibility: visible !important;
}

.logout-hint {
    border-radius: 6px;
    margin-bottom: 10px;
}


.w-background-video {
    position: relative;
    overflow: hidden;
    color: white;
}

.bg-video-hero {
	  position: absolute;
	  left: 0px;
	  top: 0px;
	  right: 0px;
	  bottom: 0px;
	  display: block;
	  width: 100%;
	  height: 100%;
    z-index: -1;
}

.bg-video-hero video {
    width: 100%;
}

.login-content .lc-block {
    background-color: rgba(255,255,255,0.96);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

.login-content .lc-block .form-control {
    background-color: transparent;
}

.weekday-table .same-day,
.weekday-table .same-day select {
    color: #aaa;
}

.popup-tooltip {
    text-transform: none !important;
    font-weight: normal;
}

.extra-import-options {
   margin-top: 5px;
   font-size: 14pt;
   color: #777;
   width: 24px;
   cursor: pointer;
}
.extra-import-options-wrap {
   position: relative;
   width: 16px;
   text-align: center;
}
.extra-import-options-modal {
   position: absolute;
   width: 230px;
   z-index: 9999999 !important;
   right: 12px !important;
   top: 15px !important;
   left: inherit !important;
   display: block !important;
}

.flex-column {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    gap: 20px;
}
.flex-align-start {
    align-items: start;
    align-content: start;

}

.flex-row {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    gap: 20px;
}

.card-header .zmdi-info-outline {
    color: var(--cm-mid-gray);
}

.calendar-weekview {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

.day-category-row {
    display: grid;
    /* `minmax(0, 1fr)`, not `1fr`: a bare `1fr` track floors at its content's
       min-content width, so the seven day columns push the week wider than its
       card as soon as an order card cannot shrink further. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    padding: 3px;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid #ededed;
}
.calendar-weekview-range {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    min-width: 410px;
}
.calendar-weekview-header-wrap {
    display: flex;
    gap: 0px;
    align-items: center;
}

.calendar-weekview-header {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: center;
}

.calendar-weekview .day-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 5px;
}

.day-column.day-num-6,
.day-column.day-num-7 {
}

/* One full-width day per row on a narrow screen. An order card cannot shrink
   past its own header (time + type + pax), so seven side-by-side day tracks
   overflow their columns and the cards overlap long before a phone's width.
   The column header carries the date, so a stacked week still reads as a week
   and every day keeps its quick-create affordance. */
@media screen and (max-width: 900px) {
    .calendar-weekview {
        padding-left: 10px;
        padding-right: 10px;
    }

    .day-category-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .calendar-weekview .day-column {
        padding-right: 0;
    }

    /* Scoped to the week view so it outranks the unscoped `.day-col-header`
       further down this file, which centres the label. */
    .calendar-weekview .day-col-header {
        text-align: left;
        padding: 4px 10px;
    }

    /* Sized to keep seven columns' worth of header on one line; on a single
       column it is what pushes the page wider than the phone. */
    .calendar-weekview-range {
        min-width: 0;
    }
}

.calendar-weekview .weekday-order-card {
    border: 0px solid #ccc;
    position: relative;
    border-radius: 4px;
    cursor: pointer;
}
.order-card-body {
    padding: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--cm-lines-color);
    padding: 8px;
    align-items: center;
}


.weekday-order-card .order-card-time {
    font-size: 0.8rem;
    left: 0;
    top: 0;
    border-radius: 0px 0px 4px 0px;
    padding: 0px 4px;
    width: 48px;
}

.weekday-order-card .order-card-pax {
    font-size: 0.8rem;
    right: 0;
    top: 0;
    border-radius: 0px 0px 0px 4px;
    padding: 0px 4px;
    width: 48px;
    text-align: right;
}

.weekday-order-card .order-card-type {
    font-size: 0.8rem;
    width: 32px;
    left: calc(50% - 16px);
    top: 0;
    border-radius: 0px 0px 4px 4px;
    padding: 0px 4px;
    text-align: center;
}

.day-col-header {
    text-align: center;
    border-radius: 5px;
    background-color: var(--cm-table-heading-bg-color);
    padding: 2px 0px;
}

.order-status-bg.new {
    background-color: var(--cm-status-new-bg);
    border-bottom: 2px solid var(--cm-status-new-bg-secondary);
    color: var(--cm-status-new);
}
.order-status-bg.new .order-card-header {
    border-bottom: 1px solid var(--cm-status-new-bg-secondary);
}

.order-status-bg.concept {
    background-color: var(--cm-status-concept-bg);
    border-bottom: 2px solid var(--cm-status-concept-bg-secondary);
    color: var(--cm-status-concept);
}

.order-status-bg.concept .order-card-header {
    border-bottom: 1px solid var(--cm-status-concept-bg-secondary);
}


.order-status-bg.cancelled {
    background-color: var(--cm-status-cancelled-bg);
    border-bottom: 2px solid var(--cm-status-cancelled-bg-secondary);
    color: var(--cm-status-cancelled);
}

.order-status-bg.cancelled .order-card-header {
    border-bottom: 1px solid var(--cm-status-cancelled-bg-secondary);
}

.order-status-bg.awaiting-confirmation {
    background-color: var(--cm-status-awaiting-confirmation-bg);
    border-bottom: 2px solid var(--cm-status-awaiting-confirmation-bg-secondary);
    color: var(--cm-status-awaiting-confirmation);
}

.order-status-bg.awaiting-confirmation .order-card-header {
    border-bottom: 1px solid var(--cm-status-awaiting-confirmation-bg-secondary);
}

.order-status-bg.partial-invoiced {
    background-color: var(--cm-status-partial-invoiced-bg);
    border-bottom: 2px solid var(--cm-status-partial-invoiced-bg-secondary);
    color: var(--cm-status-partial-invoiced);
}

.order-status-bg.partial-invoiced .order-card-header {
    border-bottom: 1px solid var(--cm-status-partial-invoiced-bg-secondary);
}


.order-status-bg.invoiced {
    background-color: var(--cm-status-invoiced-bg);
    border-bottom: 2px solid var(--cm-status-invoiced-bg-secondary);
    color: var(--cm-status-invoiced);
}

.order-status-bg.invoiced .order-card-header {
    border-bottom: 1px solid var(--cm-status-invoiced-bg-secondary);
}


.order-status-bg.estimate {
    background-color: var(--cm-status-estimate-bg);
    border-bottom: 2px solid var(--cm-status-estimate-bg-secondary);
    color: var(--cm-status-estimate);
}
.order-status-bg.estimate .order-card-header {
    border-bottom: 1px solid var(--cm-status-estimate-bg-secondary);
}

.order-status-bg.confirmed {
    background-color: var(--cm-status-confirmed-bg);
    border-bottom: 2px solid var(--cm-status-confirmed-bg-secondary);
    color: var(--cm-status-confirmed);
}

.order-status-bg.confirmed .order-card-header {
    border-bottom: 1px solid var(--cm-status-confirmed-bg-secondary);
}



.order-status-bg.to-invoice {
    background-color: var(--cm-status-to-invoice-bg);
    border-bottom: 2px solid var(--cm-status-to-invoice-bg-secondary);
    color: var(--cm-status-to-invoice);
}

.order-status-bg.to-invoice .order-card-header {
    border-bottom: 1px solid var(--cm-status-to-invoice-bg-secondary);
}



.order-status-bg.completed {
    background-color: var(--cm-status-completed-bg);
    border-bottom: 2px solid var(--cm-status-completed-bg-secondary);
    color: var(--cm-status-completed);
}

.order-status-bg.completed .order-card-header {
    border-bottom: 1px solid var(--cm-status-completed-bg-secondary);
}



.order-status-bg.option {
    background-color: var(--cm-status-option-bg);
    border-bottom: 2px solid var(--cm-status-option-bg-secondary);
    color: var(--cm-status-option);
}

.order-status-bg.option .order-card-header {
    border-bottom: 1px solid var(--cm-status-option-bg-secondary);
}



.order-status-bg.prospect {
    background-color: var(--cm-status-prospect-bg);
    border-bottom: 2px solid var(--cm-status-prospect-bg-secondary);
    color: var(--cm-status-prospect);
}

.order-status-bg.prospect .order-card-header {
    border-bottom: 1px solid var(--cm-status-prospect-bg-secondary);
}


.weekday-order-card a {
    color: inherit;
}
.day-category-title {
    text-align: center;
}

.order-card-hover {
    display: none;
}


.calendar-loading {
    text-align: center;
}

.calendar-no-orders-found {
    text-align: center;
}

.tooltip-icon:hover .weekday-order-card .zmdi,
.weekday-order-card:hover .zmdi {
    color: unset !important;
}


.order-card-footer {
    padding: 5px 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.order-card-checkbox input[type="checkbox"] {
}

.order-card-footer input {
    background-color: transparent;
    border: 1px solid black;
}
.view-options-wrap {
    display: flex;
    justify-content: space-between;
}

.view-options-label {
    text-align: right;
}



@keyframes grow {
    0% { width: 0%; }
    100% { width: 100%; }
}

.view-options-wrap {
    margin-left: 20px;
    margin-right: 20px;
    border-bottom: 3px solid var(--cm-background-color);
    margin-bottom: 20px;
}
.view-options-settings {
    display: flex;
    align-items: center;
}
.view-option-button {
    cursor: pointer;
    display: flex;
    padding: 8px 20px;
    margin-bottom: -3px;
}
.view-option-button.active {
    border-bottom: 3px solid var(--cm-green);
    color: var(--cm-green);
}

/* One underline that travels to the active tab, instead of a border that blinks
   off one tab and on to the next. Shared by every tab strip that opts in — the
   agenda view switcher and the datagrid's saved-view tabs — so they move
   identically.

   Each strip positions its own bar, because the geometry can only be measured:
   tab widths are content- and locale-dependent, and a wrapping strip puts its
   rows at different offsets. This rule owns the look and the timing, which is
   the part that has to match. The offset is a `translate` of both axes so a
   wrapped strip travels between rows rather than jumping.

   Colour comes from `--cm-tab-underline-color`, so a strip whose active tab is
   a different green sets that one token rather than restating the rule. */
.cm-tab-underline {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    /* Hidden until a strip places it, so it never shows at the strip's origin
       on the frame before its first measurement. */
    opacity: 0;
    background-color: var(--cm-tab-underline-color, var(--cm-green));
    pointer-events: none;
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
                width 180ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 120ms ease;
}

/* The first placement is a jump, not a slide: the bar has nowhere to travel
   from, and animating it would sweep it in from the strip's left edge on every
   page load. Strips that place their bar imperatively add `is-placed` a frame
   after the first write. */
.cm-tab-underline:not(.is-placed) {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .cm-tab-underline {
        transition: none;
    }
}

/* The agenda view switcher. The active tab keeps its 3px border so the layout
   is identical, but transparent, so the border and the bar never both show. */
.view-options-settings--sliding {
    position: relative;
}
.view-options-settings--sliding .view-option-button {
    transition: color 160ms ease;
}
.view-options-settings--sliding .view-option-button.active {
    border-bottom-color: transparent;
}
.view-option-title {
    margin-left: 10px;
}
.view-option-button:hover .view-option-title {
}
.filter-macro {
    padding-right: 18px;
    color: var(--cm-font-color) !important;
}
.filter-macro::before {
    background-size: 12px 12px !important;
    top: -3px !important;
}

.filter-macro .form-control {
    border: none !important;
    color: var(--cm-font-color) !important;
    cursor: pointer !important;
}

.login-chooser {
    gap: 20px;
    display: flex;
}

.planning-first-row {
    border-top: 2px solid #ccc;
}

/* Card-based planning edit layout */
.planning-edit-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.planning-day-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.planning-day-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 2px solid #ccc;
    font-weight: bold;
}

.planning-day-header .datepicker-wrapper {
    position: relative;
}

.planning-day-header .datepicker-wrapper .dp-dropdown {
    position: absolute;
    z-index: 99999;
}

.planning-card {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.planning-card.active {
    background: var(--cm-table-heading-bg-color);
    border: 2px solid var(--cm-yellow);
}

.planning-card.active .planning-card-header {
    background: var(--cm-table-heading-bg-color);
}

.planning-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    border-radius: 4px 4px 0 0;
}

.planning-card-times {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.planning-card-times .datepicker-wrapper {
    position: relative;
}

.planning-card-times .datepicker-wrapper .dp-dropdown {
    position: absolute;
    z-index: 99999;
}

/* The row must be able to break: date, times, description and the row's own
   actions do not fit on one line at phone width, and a non-wrapping header
   pushed the description and both buttons outside the card. */
.planning-card-description {
    flex: 1 1 150px;
    min-width: 0;
}

.planning-card-description textarea {
    min-width: 150px;
    width: 100%;
}

.planning-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}

.planning-card-body {
    padding: 10px 12px;
}

/* Two deliberate lines on a phone — when the block runs, then what it is —
   instead of a wrap that lands differently per row on a few pixels of
   difference in the time field. */
@media (max-width: 600px) {
    .planning-card-header {
        gap: 8px;
    }

    .planning-card-times {
        flex-shrink: 1;
        min-width: 0;
    }

    .planning-card-description {
        flex: 1 1 55%;
    }

    .planning-card-actions {
        margin-left: auto;
    }
}

.planning-card-toggles {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 8px;
}

.planning-card-toggles .checkbox {
    margin: 0;
}

.planning-card-more-options {
    margin-bottom: 8px;
}

.planning-card-details {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.planning-card-detail {
    flex: 1;
}

.planning-card-detail textarea {
    width: 100%;
}

.planning-card-staff {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.planning-card-staff > div {
    flex: 0 0 calc(33.33% - 8px);
}

.planning-card-products {
    margin-top: 8px;
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
}

/* Save and add-row: two buttons that together are wider than a phone-width
   card, so the row wraps rather than pushing the second one outside it. */
.planning-edit-cards + .flex {
    margin-top: 16px;
    flex-wrap: wrap;
    row-gap: 10px;
}

.planning-card-delete:hover {
    color: #e53935;
}

.planning-card-row-date {
    flex-shrink: 0;
}

.planning-card-row-date .datepicker-wrapper {
    position: relative;
}

.planning-card-row-date .datepicker-wrapper .dp-dropdown {
    position: absolute;
    z-index: 99999;
}

/* Partner dot on an order line: same size and spot as the modified-order dot,
   so the row reads as one row of markers rather than two systems. Grey until
   an invite goes out, then the answer's own colour — a partner who declined is
   the one thing on this row somebody has to act on. */
.partner-dot {
    height: 10px;
    width: 10px;
    text-align: center;
    border-radius: 5px;
    background-color: var(--cm-color-muted-bg, #b9c2c0);
}

.partner-dot.is-pending {
    background-color: var(--cm-color-warning-bg);
}

.partner-dot.is-accepted {
    background-color: var(--cm-color-success-bg);
}

.partner-dot.is-declined {
    background-color: var(--cm-color-danger-bg);
}

.webshop-products-tab {
    margin-top: 10px;
    margin-bottom: 20px;
}

.webshop-products-tab > p:first-of-type {
    font-size: 1.1em;
}

.superuser-stats > div {
    margin-top: 10px;
    margin-bottom: 20px;
}

.application-box-box {
    position: relative;
}

.application-box .app-price {
    position: absolute;
    right: 0px;
    top: 0px;
    color: #999;
    background-color: #ddd;
    padding: 5px 10px;
    border-radius: 0px 6px 0px 6px;
}

.application-box .table-sm {
    border: none !important;
}

.application-box .table-sm > thead > tr > th,
.application-box .table-sm > tbody > tr > th,
.application-box .table-sm > tbody > tr > td {
    border: none !important;
    border-top: none !important;
    padding: 4px 8px;
    font-size: 0.9em;
}

.application-box .table-sm > thead > tr > th {
    border-bottom: 1px solid var(--cm-lines-color) !important;
    padding-bottom: 10px;
    font-size: 1em;
}

.application-box .table-sm > thead > tr > th:first-child,
.application-box .table-sm > tbody > tr > td:first-child {
    padding-left: 0 !important;
}

.application-box .table-sm > thead > tr > th:last-child,
.application-box .table-sm > tbody > tr > td:last-child {
    padding-right: 0 !important;
}

.menus-reference-field  {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}

.menus-reference-field input {
    background: transparent;
    border: 1px solid #ccc !important;
    padding-left: 3px !important;

}

/* claessens doesn't want this */
.catermonkey-tenant-308 .menus-reference-field,
.catermonkey-tenant-315 .menus-reference-field {
    display: none;
}

.catermonkey-tenant-308  .menus-menu-block .date-section,
.catermonkey-tenant-315 .menus-menu-block .date-section {
    flex-direction: row;
}
.catermonkey-tenant-308 .menus-header,
.catermonkey-tenant-315 .menus-header {
    font-size: 8pt;
    width: 70px
}

.catermonkey-tenant-308 .menus-menu-block,
.catermonkey-tenant-315 .menus-menu-block {
    gap: 0px;
}

.sales-block {
    background-color: var(--cm-white);
    padding: 20px;
    font-size: 15px;
    margin-bottom: 20px;
    margin-left: -22px;
    margin-right: -15px;
}
.sales-block .flex {
    align-items: start;
}
.sales-block .zmdi {
    font-size: 1.5rem;
    margin-top: 5px;
    float: left;
    color: var(--cm-lines-color);
}

.sales-block .btn {
    margin-top: 10px;
}

.calfeed-modal .modal-dialog {
    width: 1024px ;
}

.quick-dates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.quick-dates-period-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cm-mid-gray);
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.quick-date-btn {
    font-size: 0.8rem !important;
    padding: 2px 8px !important;
}


.calfeed-grid .zmdi {
    cursor: pointer;
}

.default-calfeed {
    background-color: var(--cm-very-light-gray);
    padding: 10px;
    margin-bottom: 20px;
}
.default-calfeed pre {
    overflow: hidden;
}
.calfeed-modal .calfeed-grid {
    margin-bottom: 250px;
}

.default-calfeed .flex {
    gap: 10px;
    width: 100%;
    align-items: baseline;
}

.mail-method {
   margin-top: 20px;
   width: 100%;
}

.mail-method td {
   height: 50px;
   vertical-align: top;
   padding-right: 20px;
   padding-bottom: 10px;
}

.mail-method tr.header td {
   height: 30px;
   font-weight: bold;
}

table.user-brand-email-options td {
   padding-right: 20px;
}

.personal-email-details .mail-cards .card-header {
    padding: 0px;
}

.mail-cards .card-header h3 {
    font-size: 14px;
    font-weight: normal;
}

.mail-cards .card {
    border: none;
}

.smtp-detail-form > div {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.smtp-detail-form > div > label {
    width: 200px;
    flex-shrink: 0;
}

.micro-stat {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 3px 8px;
}

.micro-stat.ok {
    background-color: var(--cm-green);
    color: #fff;
}

.micro-stat.warning {
    background-color: var(--cm-yellow);
}

.micro-stat.danger {
    background-color: var(--cm-danger);
    color: white;
}

.catermonkey-tenant-328 .cleanup-icon {
    display: none;
}

#tenant-map {
    height: 400px;
}

.leaflet-container {
		height: 100vh;
		width: 100%;
		max-width: 100%;
		max-height: 100%;
}

.auto-reminders td {
    padding-bottom: 1em;
}

.auto-reminders td:first-child {
    padding-right: 2em;
}

.reminders .checkbox label {
    padding-left: 20px;
    padding-right: 2em;
}

.reminders .checkbox {
    display: inline-block;
}

.form-control.inline {
    display: inline-block;
}

table.reminders {
    margin-top: 30px;
}

table.reminders td span.checkbox {
    position: relative;
    top: -10px;
}

table.reminders tr.header td {
    padding-bottom: 10px;
}

.reminder-card {
    background-color: #fff;
    border-radius: 6px;
    padding: 20px;
    margin: 20px 0;
}

.reminder-comment p:last-child {
   padding-bottom: 0;
   margin-bottom: 0;
}

.reminder-card .date {
   padding-right: 2em;
}

.reminder-card .checkbox {
   display: inline-block;
   float: left;
   margin-top: 5px;
}

.reminders .checkbox .input-helper {
   padding-right: 5px;
}
.individuals-grid  tbody tr td:first-of-type {
    width: 500px;
}
.catermonkey-tenant-412 .internal-comments-box .ql-editor,
.catermonkey-tenant-844 .internal-comments-box .ql-editor {
    color: black;
}

.estimate-viewer.estimate-viewer-474 .estimate-page.a4-portrait,
.estimate-viewer.estimate-viewer-412 .estimate-page.a4-portrait,
.estimate-viewer.estimate-viewer-919 .estimate-page.a4-portrait,
.estimate-viewer.estimate-viewer-844 .estimate-page.a4-portrait { /* cocktail agency , coeur*/
    height: auto !important;
    /* no in page scrolls */
    min-height: 297mm;
}

.estimate-viewer.estimate-viewer-474 .estimate-page.a4-portrait .page-content,
.estimate-viewer.estimate-viewer-412 .estimate-page.a4-portrait .page-content,
.estimate-viewer.estimate-viewer-919 .estimate-page.a4-portrait .page-content,
.estimate-viewer.estimate-viewer-844 .estimate-page.a4-portrait .page-content { /* cocktail agency , coeur*/
    max-height: auto !important;
}

.estimate-viewer.estimate-viewer-919 .estimate-page.a4-portrait{
    height: auto !important;
    min-height: auto;
}

.estimate-viewer.estimate-viewer-919 .estimate-page.a4-portrait .page-content {
    max-height: fit-content !important;
}

.estimate-viewer.estimate-viewer-556 ul {
    list-style-type: square; /* J&K */
}

.estimate-viewer.estimate-viewer-1174 h1,
.estimate-viewer.estimate-viewer-1174 h2,
.estimate-viewer.estimate-viewer-1174 h3,
.estimate-viewer.estimate-viewer-1174 h4,
.estimate-viewer.estimate-viewer-1174 h6 { /* tutta italia */
    font-family: 'Borderline' !important;
    margin: 20px 0px 0px 0px !important;
}

.estimate-viewer.estimate-viewer-1174 .estimate-text-column-content h5 + p,
.estimate-viewer.estimate-viewer-1174 .estimate-text-column-content h4 + p,
.estimate-viewer.estimate-viewer-1174 .estimate-text-column-content .food-sub-product
{
    font-family: 'Parasupreme' !important;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

.estimate-viewer.estimate-viewer-1174 .estimate-text-column-content h4 + p > i
{
    font-family: 'Poppins' !important;
    font-size: 11px;
    text-transform: initial;
    font-weight: normal;
}

.estimate-viewer.estimate-viewer-1174 h1 {

}
.estimate-viewer.estimate-viewer-1174 h2 {

}
.estimate-viewer.estimate-viewer-1174 h3 {

}
.estimate-viewer.estimate-viewer-1174 h4 {
    font-size: 18pt;
}
.estimate-viewer.estimate-viewer-1174 h5 {
    font-family: 'Borderline' !important;
    font-size: 17pt;
}
.estimate-viewer .planning-panel-view > tbody > tr > td:first-child {
    padding-left: 0px !important;
}
/*.estimate-viewer.estimate-viewer-1174 .product-row-inner > b {
    font-family: 'Borderline' !important;
    margin: 20px 0px 0px 0px !important;
    font-size: 14pt;
}*/

.estimate-viewer h1,
.estimate-viewer h2,
.estimate-viewer h3,
.estimate-viewer h4,
.estimate-viewer h5,
.estimate-viewer h6 {
    margin-top: 10px;
    margin-bottom: 0px;
}

.estimate-viewer.estimate-viewer-1214 .estimate-text-column-content h2,
.estimate-viewer.estimate-viewer-1214 .estimate-text-column-content h3,
.estimate-viewer.estimate-viewer-1214 .estimate-text-column-content h4,
.estimate-viewer.estimate-viewer-1214 .estimate-text-column-content h5 {
    color: rgb(150, 206, 0) !important;
}

.estimate-viewer.estimate-viewer-1214 .food-product-name {
    font-weight: bold;
}

.estimate-viewer.estimate-viewer-1062 .food-sub-product,
.catermonkey-tenant-1062 .estimate-editor-v2 .food-sub-product {
    font-weight: bold;
}

.product-quantity-lock {
    cursor: pointer;
}

.product-quantity-lock.zmdi-lock-open {
    visibility: hidden;
    color: var(--cm-light-gray);
}

.product-quantity-lock.zmdi-lock {
    visibility: visible;
    color: var(--cm-dark-gray);
}

.product-edit-row:hover  .product-quantity-lock {
    visibility: visible;
}


.subscription-status.unpaid,
.subscription-status.incomplete,
.subscription-status.incomplete_expired,
.subscription-status.past_due,
.subscription-status.canceled {
    color: var(--cm-danger-soft);
}

 .subscription-status.trialing {
     color: var(--cm-green);
 }

 .uppy-Dashboard .uppy-Dashboard-inner {
     min-height: 120px !important;
     width: 100% !important;
     border: 0px solid var(--cm-light-gray);
     background-color: var(--cm-table-heading-bg-color);
 }
 .uppy-Dashboard-dropFilesHereHint {
     height: 100%;
 }

 /* Cropper.js sizes itself from the height its parent reports at init, and Uppy
    un-hides the source <img> (max-height: 400px) just before that measurement.
    The flex chain below the panel defaults to min-height: auto, so a tall image
    inflates it to 400px inside a panel that is only as tall as the dashboard —
    the excess is then clipped by the panel's overflow: hidden and unreachable.
    Keep the chain shrinkable and the image bounded so the measured height is the
    panel's own. */
 .uppy-Dashboard .uppy-DashboardContent-panelBody,
 .uppy-Dashboard .uppy-ImageCropper {
     min-height: 0;
 }

 .uppy-Dashboard .uppy-ImageCropper-container {
     min-height: 0;
     overflow: hidden;
 }

 .uppy-Dashboard .uppy-ImageCropper-image {
     max-height: 100%;
 }

 .modal .upload-estimate-modal .modal-content {
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .modal .upload-estimate-modal .modal-body {
     flex-grow: 1;
 }

/* ---------------------------------------------------------------------------
   Setup tasks page (cs2.panels.onboarding.setup.views) — the non-linear
   onboarding checklist that replaced the wizard/fork/banner.
   --------------------------------------------------------------------------- */
.setup-page {
    max-width: 760px;
    margin: 24px auto 0;
    background: white;
    padding: 16px 48px 48px;
    border-radius: 12px;
}

/* "Best on a larger screen" notice — only shown on phones (see the 600px query). */
.setup-mobile-notice {
    display: none;
}

.setup-header h2 {
    margin-bottom: 6px;
}

.setup-header .text-muted {
    display: block;
    margin-bottom: 24px;
}

.setup-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
}

.setup-progress-track {
    width: 100%;
    height: 10px;
    background-color: var(--cm-light-gray);
    border-radius: 999px;
    overflow: hidden;
}

.setup-progress-fill {
    height: 100%;
    background-color: var(--cm-green);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.setup-progress-label {
    font-size: 0.9rem;
    color: var(--cm-mid-gray);
    font-weight: 600;
}

.setup-tasks {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.setup-task-card {
    display: flex;
    align-items: center;
    gap: 18px;
    transition: background-color 120ms linear;
    background-color: var(--cm-white);
    border: 1px solid var(--cm-lines-color);
    border-left: 4px solid var(--cm-lines-color);
    border-radius: var(--cm-card-border-radius);
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.setup-task-card:hover {
  background-color: var(--cm-table-heading-bg-color);
}

.setup-task-card:hover .btn {
  transition: transform 120ms ease-in-out;
}

.setup-task-card:hover .btn {
  transform: scale(1.05);
}


.setup-task-card.done {
    border-left-color: var(--cm-color-success);
    background-color: var(--cm-very-light-gray);
}

.setup-task-card.done h4, .setup-task-card.done p {
  color: var(--cm-nav-color);
  text-decoration-line: line-through;
}

.setup-task-card.done .setup-task-done {
  display: none;
}


.setup-task-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--cm-light-gray);
    color: var(--cm-green);
    font-size: 1.4rem;
}

.setup-task-card.done .setup-task-icon {
    background-color: var(--cm-color-success-bg);
    color: var(--cm-color-success);
}

/* Show the tenant's actual logo in the icon circle once the logo task is done. */
.setup-task-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 50%;
    background-color: var(--cm-white);
}

.setup-task-body {
    flex-grow: 1;
    min-width: 0;
}

.setup-task-title {
    margin: 0 0 2px;
    font-size: var(--cm-h4-font-size);
}

.setup-task-blurb {
    margin: 0;
    color: var(--cm-mid-gray);
    font-size: 0.92rem;
}

.setup-task-action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.setup-task-done {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cm-color-success);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media only screen and (max-width: 600px) {
    .setup-page {
        background: white;
        padding: 12px 12px;
        border-radius: 12px;
        margin: 12px -8px;
    }

    .setup-mobile-notice {
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: var(--cm-light-green-transparent);
        color: var(--cm-green);
        padding: 10px 14px;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 14px;
        line-height: 1.35;
    }
    .setup-mobile-notice .zmdi {
        font-size: 1.5rem;
        flex-shrink: 0;
    }
    .setup-task-card {
        flex-wrap: wrap;
        gap: 12px;
    }
    .setup-task-body {
        flex-basis: calc(100% - 62px);
    }
    .setup-task-action {
        flex-basis: 100%;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
}

/* Setup nudge banner (app-wide, while a trialing owner has tasks outstanding) */
.setup-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    background-color: var(--cm-pale-yellow);
    color: var(--cm-green);
    padding: 10px 20px;
    font-weight: 600;
    text-decoration: none;
}

/* The banner is an <a>; the app's global a:link / a:visited / a:hover rules
   (specificity 0,1,1) would otherwise win over .setup-banner (0,1,0), painting
   the text link-blue and hiding it on hover. Pin green across every link state
   with class+pseudo specificity (0,2,0); the child spans inherit it. */
.setup-banner:link,
.setup-banner:visited,
.setup-banner:hover,
.setup-banner:active {
    color: var(--cm-green);
    text-decoration: none;
}

.setup-banner:hover {
    background-color: var(--cm-yellow);
}

.setup-banner-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.setup-banner-text .zmdi {
    font-size: 1.2rem;
}

.setup-banner-progress {
    background-color: var(--cm-green);
    color: var(--cm-white);
    border-radius: 999px;
    padding: 1px 10px;
    font-size: 0.82rem;
}

.setup-banner-cta {
    color: var(--cm-green);
    text-decoration: underline;
    white-space: nowrap;
}

/* Email-verification nudge: sits in normal flow below the nav, exactly like
   .setup-banner (not sticky/overlapping like the old .demo-mode-banner). */
.email-verification-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    background-color: var(--cm-light-green-transparent);
    color: var(--cm-green);
    padding: 8px 20px;
    text-align: center;
}

/* CAT-1118 VAT gate: the decision an EU (non-NL) company without a VAT number
   makes before it can link a payment method. */
.vat-gate-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* `.btn` centres its label, so match its specificity to keep these left-aligned. */
.vat-gate-options .vat-gate-option.btn {
    border: 1px solid var(--cm-border-color, #d9d9d9);
    border-radius: 4px;
    background-color: var(--cm-white);
    padding: 12px 16px;
    text-align: left;
    white-space: normal;
}

.vat-gate-option:hover {
    border-color: var(--cm-green);
}

.vat-gate-option small {
    color: #6b6b6b;
}

.vat-gate-option-selected,
.vat-gate-option-selected:hover {
    border-color: var(--cm-green);
    box-shadow: inset 0 0 0 1px var(--cm-green);
}

/* CAT-1118a VAT-number nudge: same in-flow placement as .setup-banner /
   .email-verification-banner, in an attention-drawing pale yellow.
   Unlike those two, this banner's copy is long enough to fill the viewport, so
   it needs the same sidebar gutter as `#content .container-fluid`: the nav is
   `position: fixed` with a higher stacking order and would otherwise paint over
   the first words. Mirror that rule's two widths (70px collapsed rail, 290px
   expanded) rather than inventing a third. */
.vat-number-nudge-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    background-color: var(--cm-pale-yellow);
    color: var(--cm-green);
    padding: 10px 20px 10px 70px;
    text-align: center;
}

@media only screen and (min-width: 1200px) {
    .vat-number-nudge-banner.nav-expanded {
        padding-left: 290px;
    }
}

.vat-number-nudge-text {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    /* A flex item won't shrink below min-content, so without `min-width` the
       paragraph stays on one line and runs off the banner. `max-width` keeps the
       measure readable instead of one viewport-wide line. */
    min-width: 0;
    max-width: 820px;
}

.vat-number-nudge-text .zmdi {
    font-size: 1.2rem;
    /* Hold the icon on the first line once the text wraps, and keep it from
       being squeezed by the shrinking paragraph beside it. */
    flex: none;
    line-height: 1.5;
}

.vat-number-nudge-cta {
    color: var(--cm-green);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.vat-number-nudge-cta:link,
.vat-number-nudge-cta:visited,
.vat-number-nudge-cta:hover,
.vat-number-nudge-cta:active {
    color: var(--cm-green);
}

/* Below the burger breakpoint these full-bleed top banners sit under the fixed
   burger (44px @ left:8, right edge ~52), which lands on their first line.
   Inset the left so the burger sits in a clear gutter. Placed after the banners'
   own padding rules so it wins on source order (same specificity). */
@media only screen and (max-width: 900px) {
    .setup-banner,
    .email-verification-banner,
    .vat-number-nudge-banner {
        padding-left: 56px;
    }
}

/* Make the "Get started" nav item stand out from the rest of the sidebar */
.main-menu .nav-get-started a,
.main-menu .nav-get-started a .zmdi {
    color: var(--cm-yellow);
}

.main-menu .nav-get-started.active a,
.main-menu .nav-get-started.active a .zmdi {
    color: var(--cm-white);
}

/* Setup task modals (logo / locations / categories) */
.setup-modal-body {
    padding-bottom: 20px;
}

/* "You can always configure this further later" reassurance under the modal title */
.setup-modal-note {
    font-size: 13px;
    margin: 0 0 16px;
}

/* Expandable card per category kind in the categories modal */
.setup-collapse-card {
    border: 1px solid #e4e7e6;
    border-radius: 8px;
    margin-bottom: 14px;
    background: var(--cm-white);
}

.setup-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.setup-collapse-card.expanded .setup-collapse-header {
    border-bottom: 1px solid #eef1f0;
}

.setup-collapse-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cm-dark-gray, #2a3b35);
}

.setup-collapse-header .zmdi {
    font-size: 18px;
    color: #888;
}

.setup-collapse-body {
    padding: 12px 16px 16px;
}

.setup-collapse-text {
    font-size: 13px;
    margin: 0 0 4px;
}

/* The bulk-import page list scrolls inside a scrolling modal, so it shows it: a
   border and the house auto-hiding scroll shadows (as on the data grids),
   running vertically. */
.ob-import-pages {
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid var(--cm-lines-color);
    border-radius: 4px;
    background:
        linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) center top / 100% 28px no-repeat,
        linear-gradient(rgba(255, 255, 255, 0), #fff 70%) center bottom / 100% 28px no-repeat,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.14), transparent) center top / 100% 12px no-repeat,
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.14), transparent) center bottom / 100% 12px no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* A confirmation boolean: the house checkbox on a tinted, padded row, so the
   attestation reads as a deliberate step and is an easy tap target. */
.ob-import-ownership {
    margin-top: 15px;
    padding: 12px 14px;
    border: 1px solid var(--cm-lines-color);
    border-radius: 8px;
    background: var(--cm-table-heading-bg-color);
}

.ob-import-ownership .checkbox {
    margin: 0;
}

.ob-import-ownership .checkbox label {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--cm-font-color);
    cursor: pointer;
}

/* The house box's light-grey outline disappears on the tinted row; darken it
   until ticked, when the checked style takes over. */
.ob-import-ownership .checkbox input:not(:checked) + .input-helper:before {
    border-color: var(--cm-table-heading-color);
}

@media screen and (max-width: 900px) {
    /* Unfolded on a small screen, the list flows with the modal body rather than
       nesting a second scroller the thumb gets caught in. Same cutoff as
       `cs2.db/small-screen?`, which starts it folded. */
    .ob-import-pages {
        max-height: none;
        overflow-y: visible;
        background: none;
    }
}

/* Bulk-import overall progress bar: fill = terminal children fraction, with a
   left-to-right shimmer inside the filled part while the import is running */
.ob-import-progress-track {
    height: 8px;
    background: #eceeed;
    border-radius: 4px;
    overflow: hidden;
}

.ob-import-progress-fill {
    position: relative;
    height: 100%;
    background: var(--cm-green, #2a9d8f);
    border-radius: 4px;
    overflow: hidden;
    transition: width 0.4s ease;
}

.ob-import-progress-fill.active::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: ob-import-shimmer 1.6s infinite;
}

@keyframes ob-import-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.setup-modal-body .option-add-wrap {
    margin-top: 10px;
    max-width: 440px;
}

.setup-selectables {
    margin-bottom: 10px;
}

.setup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.setup-chip {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    background-color: var(--cm-light-gray);
    color: var(--cm-green);
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
}

.setup-chip:hover {
    background-color: var(--cm-pale-yellow);
}

.setup-chip.selected {
    background-color: var(--cm-green);
    color: var(--cm-white);
}

/* Read-only chip for a category/location the tenant already has. */
.setup-chip.is-existing,
.setup-chip.is-existing:hover {
    cursor: default;
    background-color: var(--cm-color-success-bg);
    color: var(--cm-color-success);
}

.setup-logo-preview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0;
}

.setup-logo-preview .logo {
    max-width: 240px;
    max-height: 120px;
}

 .onboarding-modal {
     display: flex;
     flex-direction: column;
     padding-bottom: 40px;
     gap: 20px;
     font-size: 14pt;
 }
 .onboarding-modal .modal-header h3 {
     width: 100%;
     text-align: center;
     font-size: var(--cm-h1-font-size);
 }

 .modal-header h3 {
     flex-grow: 1;
 }

 .onboarding-modal .expl {
 }

 .onboarding-modal .expl {
     display: flex;
     gap: 20px;
     flex-direction: column;
 }

 .onboarding-modal .zmdi-fast-rewind {
     cursor: pointer;
     font-size: 19.5px;
     color: var(--cm-mid-gray);
 }

 .jumbo-num {
     font-size: 34pt;
 }

 .btn-xl {
     font-size: 20pt;
 }

 .uppy-Dashboard-AddFiles-title {
 }

 .order-template-editor {
     list-style: none;
     border: 1px solid #0f6eaf;
     border-radius: 6px;
     padding: 20px;
     position: relative;
     background-color: #cadae6;
     margin-top: 5px;
 }
 .order-template-label {
     display: none;
     border-radius: 0px 0px 6px 6px !important;
     width: 200px;
     text-align: center;
     right: calc(50% - 100px) !important;
 }

 .order-template-editor .order-template-label,
 .editor-modal-v2 .order-template-label,
 .editor-modal-v2-template-mode .order-template-label
 {
     display: block;
     position: absolute;
     right: 0px;
     top: 0px;
     background-color: var(--cm-light-gray) !important;
     color: var( --cm-nav-color);
     padding: 5px 5px;
     border-radius: 0px 4px 0px 6px;
 }
 .editor-modal-v2 .close,
 .editor-modal-v2-template-mode .close {
     margin-top: 2px !important;
}
.add-spot-dropdown {
    width: 250px;
    margin-right: 5px;
}
 .order-template-label-gray {
     background-color: var(--cm-mid-gray) !important;
 }

 .order-template-editor .block-header .actions {
     display: none !important;
 }

 .order-editor-grid .card .actions .zmdi-edit {

 }

 .add-product-bar {
     gap: 10px;
     width: 100%;
     align-items: center;
     justify-content: space-between;
     padding-top: 5px;
     padding-bottom: 5px;
     background-color: var(--cm-table-heading-bg-color);
     margin-bottom: 15px;
 }
 .products-box .search-result-item .tag-box-wrap {
 }

 .quick-quantity-wrap {
     margin-left: 35px;
     width: 55px;
 }

 .search-product-wrap {
     flex-grow: 1;
 }
 .title-input-wrap {
     display: flex;
     justify-content: center;
 }

 .search-product-wrap .popup-tooltip,
 .title-input-wrap .popup-tooltip {
     top: 60px;
 }

 .template-label-inline {
     color: #268b96;
 }

 .files-listing > b {
     cursor: pointer;
 }

 .files-listing > b .zmdi {
     position: static !important;
 }
 .files-listing ul li {
     margin-left: 0px;
     padding-left: 0px;
     max-width: 280px;
     overflow-x: hidden;
 }

 .estimate-views-widget ul {
     padding-left: 15px;
 }


 .onboarding-buttons {
     display: flex;
 }

 .btn-onboarding-next {

 }

 .btn-skip-hidden {
     visibility: hidden;
 }
 .btn-skip {

 }

 .onboarding-panel {
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .onboarding-modal .modal-content {
     display: flex;
     flex-direction: column;
 }
 .onboarding-modal .modal-body {
     flex-grow: 1;
 }

 .onboarding-modal .modal-content {
     padding: 0 40px 10px;
 }


 .onboarding-panel-header {

 }
 .onboarding-panel-body {
     flex-grow: 1;
 }

 .onboarding-step-wrap {
     display: none;
     gap: 20px;
     flex-direction: column;
     height: 100%;
     padding-bottom: 40px;
 }
 .onboarding-step-wrap .onboarding-buttons {
 }

 .onboarding-step-wrap.step-active {
     display: flex;
     animation: fadeIn 0.5s;
 }


.onboarding-step-body {
     flex-grow: 1;
     display: flex;
     align-items: center;
     flex-direction: column;
 }


.onboarding-buttons {
    display: flex;
    gap: 100px;
    justify-content: center;
    align-items: center;
}


.onboarding-skip-link {
    cursor: pointer;
    font-size: 13pt;
}

.onboarding-step-wrap .expl {
    text-align: center;
    flex-direction: column;
}

/* When a fork card is selected it goes btn-primary (dark green). The title
   already inherits white, but .text-muted keeps its grey and turns illegible
   on the dark fill — lift it to a legible translucent white. */
.onboarding-fork-choices .btn-primary .text-muted {
    color: rgba(255, 255, 255, 0.8);
}

.onboarding-panel-body p {
    font-size: 1.6rem;
}

.onboarding-panel-body .option-add-wrap {
    justify-content: center;
}
.onboarding-panel-body .option-add-wrap input {
    max-width: 280px;
}

.onboarding-step-wrap .files ul,
.onboarding-step-wrap .selectables ul {
    text-align: left;
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    list-style-item: none;
    margin-left: 0px;
    padding-left: 0px;
}
.onboarding-step-wrap .files ul li,
.onboarding-step-wrap .selectables ul li {
    display: inline-block;
    background-color: var(--cm-light-gray);
    padding: 10px; 5px;
    list-style-item: none;
    border-radius: 12px;
}

.onboarding-step-wrap .selectables ul li {
    cursor: pointer;
}

.onboarding-step-wrap .selectables ul li:hover {
    background-color: var(--cm-yellow);
}

.onboarding-step-wrap .selectables.non-click ul li:hover {
    cursor: default;
    background-color: var(--cm-light-gray);
}

.onboarding-step-wrap  img.logo{
    max-width: 320px;
}

.intro-video-wrap {
    height: 90px;
}


.onboarding-step-wrap .selectables ul li.selected {
    color: var(--cm-white);
    background-color: var(--cm-green);
}
.onboarding-step-wrap .selectables-wrap {
    display: flex;
    flex-direction: column;
    max-width: 768px;
    margin: 0 auto;
}

.onboarding-step-wrap small {
    font-size: 11pt;
    color: var(--cm-grey);
}

.onboarding-step-wrap .selectables-wrap .input {
    max-width: 520px;
}

.onboarding-step-body .import-widget {
    font-size: 10px;
    overflow: auto;
    max-width: 90vw;
    max-height: 60vh;
}

.onboarding-step-body .import-widget .unmapped  {
    max-width: 120px;
    overflow: hidden;
}

.import-widget th label  {
    display: block;
    height: 30px;
    overflow: hidden;
}
.final-step p {
    text-align: left;
    font-size: 1.2rem;
}

.final-step .choice-box {
    display: flex;
    width: 100%;
    gap: 40px;
    justify-content: center;
}

.final-step .radio + .radio {
    margin-top: 0px;
}

.report-orders-grid table td:first-of-type {
    width: 220px;
}

.report-orders-grid table td:nth-of-type(2) {
    width: 300px;
    overflow-x: hidden;
}

.report-data-table table tbody td:first-of-type {
    width: 300px;
}

.onboarding-modal .locations-wrap {
    width: 100%;
}
.menu-general-section .items {
    grid-template-columns: 1fr;
    max-width: 600px;
}
.deadline-widget {
    max-width: 450px;
}

.oo-checkbox-grid {
    grid-row-gap: 0px;
}

.salutation-input {
    margin-right: 30px;

}
.salutation-input > .radio {
    display: flex;
}

.contact-name-box > div:nth-of-type(1),
.contact-name-box > div:nth-of-type(2) {
    flex-grow: 1;
}

.basic-company-details .field-invoice_city {
    flex-grow: 1;
}


@media only screen and (max-width: 814px) {
    .estimate-mobile-hidden .mobile-view {
        display: none !important;
    }
}

/* The changed-fields panel is a list of rows, so it reads as one: the card's
   own surface and border, and the datagrid's heading band and row rules for
   the table inside it. */
.diff-info-widget {
    margin: 30px 0;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-card-border-radius);
    background-color: var(--cm-white);
    padding: 16px 20px 20px;
}

.diff-info-widget > h4 {
    margin: 0 0 4px;
}

.product-diff-widget {
    margin-top: 16px;
}

.product-diff-table {
    margin-bottom: 0;
}

.product-diff-table thead tr {
    background-color: var(--cm-table-heading-bg-color);
}

.product-diff-table thead th {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cm-table-heading-color);
    white-space: nowrap;
    border-bottom: 1px solid var(--cm-lines-color) !important;
}

.product-diff-table th,
.product-diff-table td {
    padding: 10px 18px !important;
    border-top: 1px solid var(--cm-table-line-color) !important;
    vertical-align: middle;
}

.product-diff-table thead th {
    border-top: 0 !important;
}

/* The field name is the row's label; the arrow only separates old from new. */
.product-diff-table tbody td:first-of-type {
    max-width: 300px;
    color: var(--cm-table-heading-color);
}

.product-diff-table .product-diff-arrow {
    width: 1px;
    text-align: center;
    color: var(--cm-table-heading-color);
}

.product-diff-table .file-thumb {
    max-height: 40px;
    border-radius: var(--cm-border-radius);
}

.ql-snow .ql-picker.ql-expanded .ql-picker-option {
    z-index: 13;
}

.location-box .pmo-block {
    border-top: 1px dashed var(--cm-very-light-gray);
}

.location-box .pmo-block:first-of-type {
    border-top: none;
}

.ow-location ul {
    text-align: left;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    z-index: 20;
    max-height: 320px;
  overflow-y: scroll;
}

.allergen-no-image {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: var(--cm-mid-gray);
    font-size: 8pt;
}

.date-view {
    width: 100%;
    min-height: 32px;
    border: 0px solid red;
}
.past {
    color: var(--cm-danger-soft: rgba(244, 67, 102, 0.62));
}

.quick-switcher {
    width: 35px;
    font-size: 8pt;
}
.su-button {
    justify-content: center;
    gap: 20px;
}

span.tag.add-tag {
   padding: 0px 14px;
}

span.tag {
    color: #ffffff;
    padding: 0px 5px;
    border-radius: 8px;
    background-color: var(--cm-green);
    margin-right: 5px;
    display: inline-block;
    line-height: 1.6em;
}

/* cs2.components.widgets.input classes */
.text-input {
    position: relative;
    max-width: 100%;
}

.zmdi-long-arrow-return {
    margin-top: 7px;
}

.search-input input {
    border-radius: var(--cm-button-border-radius) !important;
    padding-left: 30px !important;
}

.tag.fake {
    opacity: 0.5;
}

.text-input .input-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.2rem;
    border: 0px solid grey;
}


.text-input .key-icon {
    cursor: pointer;
    position: absolute;
    right: 0px;
    padding: 2px 10px;
    min-width: 40px;
    border: 1px solid grey;
    border-radius: 3px;
    background-color: var(--cm-very-light-gray);
}

.text-input .eye-icon {
    right: -38px !important;
    top: 7px;
    cursor: pointer;
    position: absolute;
    right: 0px;
    padding: 2px 10px;
    min-width: 40px;
    z-index: 1;
}

.password-input-with-icons .eye-icon  {
    right: 25px;
}

.search-input .key-icon {
    right: 8px;
}

/* The in-field clear button. Centred against the input's own height rather
   than offset by a fixed `top`, so it stays put in the 26px toolbar band and
   in a full-height field alike. */
.text-input .clear-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--cm-mid-gray);
    opacity: 0.6;
}

.text-input .clear-icon:hover {
    opacity: 1;
}

/* Room for the × so a long query does not run underneath it. */
.text-input:has(.clear-icon) input {
    padding-right: 26px !important;
}



/* cs2.components.widgets.tag-box classes */

.tag-box-wrap {
    flex-grow: 1;
    width: 100%;
    align-items: center;

}

.tag-box {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tag-wrap .tag {
    background-color: #ededed;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: inline-block;
    padding: 2px 16px;
}

.bootgrid-table .tag-wrap .tag,
.table .tag-wrap .tag,
.location-file-listing .tag-wrap .tag,
.product-editor-wrap .search-results-wrap .tag-wrap .tag
{
    font-size: 0.7em;
    border-radius: 6px;
}

.search-results-wrap {
    max-width: 1000px;
}

.media-grid .tag-box-wrap {
    max-width: 300px;
    flex-direction: column;
    align-items: flex-start
}

.add-tags-to-upload .tag-box-wrap input {
    background-color: #fafafa;
}

.modal.context-bar {
    pointer-events: none;
}

.modal.context-bar .modal-dialog {
    width: 100%;
    margin-top: 70px;
    pointer-events: all;
    height: 80px;
}

.modal.context-bar .modal-content {
    max-height: fit-content;
}

.tag-editor-top  {
    display: flex;
    height: 80px;
    flex-direction: row;
    justify-content: space-between;
}

.tag-editor-top .left, .tag-editor-top .right, .tag-editor-top .center {
   display: flex;
   flex-direction: column;
}

.tag-editor-top .selected-files-nr {
   flex-grow: initial;
   margin-top: auto;
   font-size: 1.4em;
   padding-bottom: 15px;
}

.tag-editor-top .close-modal {
   font-size: 1.8em;
   padding-top: 20px;
}

.tag-editor-top .tag-box-wrap {
   flex-grow: initial;
   margin-top: auto;
}

.tag-editor-top .activate-tag-box {
   flex-grow: initial;
   margin-top: auto;
   margin-bottom: 15px;
}

.toggle-printed-overview-widget {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 25px;
}

.type-button-wrap {
    width: 33%;
}

.type-buttons {
    display: flex;
    gap: 0px;
}
.type-button-wrap {
    padding: 10px;
    border-right: 1px solid #ededed;
}

.type-buttons .type-button-wrap:last-of-type {
    border-right: 0px solid #ededed;
}

.type-button-icon {
    max-width: 210px;
    border-radius: var(--cm-border-radius);
    border: 1px solid var(--cm-background-color);
}

.type-button-suitable-for ul {
    margin-top: 5px;

}

.product-overview-table .col-cost_price {
    width: 100px;
}

.product-overview-table .col-cost_price,
.product-overview-table .col-price {
    width: 100px;
}
.green-jumbo-button {
    position: relative;
}

.green-jumbo-button .type-title {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    background-color: rgba(255,255,255,0.7);
}


.title-form input.form-control {
    font-size: 18px ;
    font-weight: bold;
}

.no-name-chosen .tab-nav,
.no-name-chosen .product-general-show-more {
    visibility: hidden;
}

.no-name-chosen .slide-down  {
    display: none;
}

.no-name-chosen .slide-down.customer-search-results  {
    display: block;
}

.tab-nav .empty-product-group a {
    color: var(--cm-yellow) !important;
}
.greyed-out-tab a {
    color: var(--cm-light-gray) !important;
}
textarea.form-control {
    border: 1px solid #e0e0e0 !important;
    padding: 5px !important;
}
.nodata {
    text-align: center;
}

/* The way out of an empty list, under the sentence explaining it. `text-align`
   on the cell does not centre a block-level button, so this centres itself. */
.dg-nodata-reset {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    padding-bottom: 8px;
}

.media-filter-panel {
    display: flex;
    justify-content: left;
    padding: 5px 20px;
    color: #888;
    align-items: center;
    width: 100%;
    background-color: #f1f1f1;
    border-radius: 0px;
    border-bottom: 0px solid #edecec;
}

.media-filter-panel .file-type {
    padding-right: 10em;
}

.media-filter-panel .tag-filter {
    display: flex;
}

.media-filter-panel .tag-filter .show-tags {
    line-height: 2.5em;
    padding-right: 1em;
}

.tag-filter .form-control {
    padding-left: 0.5em;
    background-color: #f1f1f1;
}

.tag-filter .tag-box {
    padding-left: 10px;
}

.tag-filter .tag-box-wrap {
    display: flex;
    flex-direction: row-reverse;
}

.tag-filter .arrowkeys .search-result-item:hover {
   background-color: transparent;
}

.tag-filter .mouse .search-result-item:hover {
   background-color: #ededed;
}

.tag-filter .search-result-item.active {
   background-color: #ededed;
}

.media-library .card {
    border-radius: 0px 0px 8px 8px;
    padding-bottom: 5px;
}
.tag-color-picker {
    cursor: auto;
}
.tag-color-picker ul {
    justify-content: flex-start;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.tag-color-picker .color {
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
}

.production-overview-panel .production-overview-toolbar{
    justify-content: flex-end;
    gap: 20px;

}
.production-sort-key-widget {
    justify-content: flex-end;
}


.onboarding-step-body .expl.final-step {
    gap: 0px !important;
}
.onboarding-step-body .intro-video-wrap {
    height: auto !important;
}


.estimate-editor-v2 .catermonkey-menu-marker hr {
    color: red;
    background-color: red;
}

.estimate-view .catermonkey-menu-marker ,
.estimate-editor-v2 .catermonkey-menu-marker {
    display: none;
}

/*.estimate-editor-v2 .estimate-text-column-content:hover .catermonkey-menu-marker,*/
.ql-editor .catermonkey-menu-marker {
    display: block;
}

.selected-ui-language .flag-icon-wrap {
    cursor: pointer;
    padding: 10px;
}



.selected-ui-language .flag-icon-wrap.active {
    cursor: pointer;
    border: 1px solid var(--cm-light-gray);
    background-color: var(--cm-very-light-gray);
    border-radius: 6px;
}

.section .product-edit-row {
    width: 100%;
    gap: 20px;

}
.product-edit-row .product-edit-row-name {
    flex-grow: 1;
}
.product-edit-row-vat {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 120px;
}

.product-edit-row-vat  .tax-rate-input label {
    display: none;
}
.calendar-weekview-header {
}
.my-account-panel {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;


}
calendar-weekview-header .pagination {
    margin: 0;
}
ul.pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}


ul.pagination li.disabled a {
    background-color: var(cm-nav-color);
    color: var(--cm-mid-gray);
    border: 0px solid var(--cm-mid-gray) !important;
}

ul.pagination li a {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-green);
    border: none !important;
}
ul.pagination li a:hover {
    background-color: var(--cm-green);
    color: var(--cm-white);
}

ul.pagination li.active a {
    background-color: var(--cm-green) !important;
}


.week-num-header {
    /* Shares a row with a .btn-secondary; same metrics and greys so the two
       pills read as one set. */
    background-color: var(--cm-white);
    border: 1px solid var(--cm-lines-color);
    color: var(--cm-table-heading-color);
    padding: 6px 16px;
    font-size: 13px;
    line-height: 1.42857143;
    border-radius: var(--cm-button-border-radius);
}

.close-image-editor-settings img {
    max-width: 768px;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}
.image-editor-toolbar > div {
    align-items: baseline;
}

.image-editor-toolbar {
    flex-direction: column;
    gap: 5px;}

.estimate-preview-tiles {
    margin-bottom: 20px;
    justify-content: space-between;
    gap: 40px;
}

.estimate-preview-tiles .estimate-preview-tile {
    width: 180px;
    height: 180px;
    border-radius: 6px;
    text-align: center;
    valign: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    background-color: var(--cm-green);
    color: var(--cm-white);
    font-weight: bold;
    font-size: 29px;
    background-size: cover;
}





.estimate-choice-completed .zmdi-email {
    font-size: 98px;
}

.estimate-preview-tiles .estimate-preview-tile:hover {
    color: var(--cm-pale-yellow);
}


.estimate-preview-tiles .tile-vintage {
    font-family: 'Courier new', monospace;
    background-image: url('../img/estimate_styles/vintage.png');
}
.estimate-preview-tiles .tile-classic {
    font-family: Georgia;
    background-image: url('../img/estimate_styles/classic.png');
}
.estimate-preview-tiles .tile-modern {
    background-image: url('../img/estimate_styles/modern.png');
}


.estimate-preview-tiles .estimate-preview-tile:hover {
    background-color: #2895a1 ;
}

.estimate-preview-tiles .estimate-preview-tile {

}

.sub-product-price-input input {
    max-width: 85px;
}




.align-right > .tooltip-icon > input,
.quantity-cell > input {
    text-align: right;
}
.popup-tooltip {
    text-align: left !important;
}


.blink {
  animation: blinker 1s linear infinite;

}


@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.signature-container {
    padding-bottom: 20px;
}

.sig-buttons {
    display: flex;
    gap: 10px;
}

.sig-canvas {
    padding-bottom: 20px;
    padding-top: 20px;
}

#sig-canvas {
    border: 1px dotted #cccccc;
    border-radius: 15px;
    cursor: crosshair;
}

.signature-settings {
    margin-top: 0;
}

.signature-settings .checkbox {
    padding-top: 0;
    margin-top: 0;
}

.dummy-section-wrap > .zmdi {
    font-size: 48px;
}


.cm-avatar-wrap {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.cm-avatar {
    background-color: var(--cm-pale-yellow);
    border-radius: 50%;
    display: flex;
    width: 32px;
    height: 32px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}
.cm-avatar img {
    width: 100%;
}

.cm-avatar .avatar-initials {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    color: var(--cm-dark-gray);
}
.cm-avatar.avatar-inverted {
    background-color: var(--cm-green);
}
.cm-avatar.avatar-inverted .avatar-initials {
    color: var(--cm-yellow);
}

.cm-avatar.avatar-small {
    width: 22px;
    height: 22px;
}
.avatar-small {
    font-size: 0.7rem;
}

.avatar-small .avatar-initials,
.cm-avatar-wrap.avatar-small {
    font-size: 0.7rem;
}

small {
    font-size: 0.8rem;
}


.avatars {
    align-items: center;



}
.search-input.normal-border-radius {
    border-radius: var(--cm-border-radius) !important;
}

.flex-column-10 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.flex-column-20 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
}

.trialing-period {
    color: var(--cm-nav-color)
}

.choose-payment-method-onboarding {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.choose-payment-method-onboarding > div {
    max-width: 450px;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
    padding: 10px;
}
.sepa-label {
    text-align: left !important;
}
#iban-element {
    border-radius: var(--cm-border-radius);
    border: 1px solid var(--cm-lines-color);
    padding: 6px 12px;
}
.product-tax-rate-cell {
    width: 70px;
}
.product-tax-rate-cell .popup-tooltip {
    top: 59px;
}
.product-discount-cell {
    width: 85px;
}

.product-discount-cell .popup-tooltip {
    top: 60px;
}

.product-price-cell {
    position: relative;
}

.mail-method tr td:nth-of-type(2) {
    width: 140px;
}

.product-price-cell .product-discount-small {
    position: absolute;
    right: -6px;
    top: -12px;
    z-index: 2;
    background-color: var(--cm-background-color);
    width: 32px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

.product-row-headers.product-edit-row-editing .product-edit-price,
.product-row-headers.product-edit-row-editing .product-edit-discount,
.product-row-headers.product-edit-row-editing .product-percentage-column,
.product-row-headers.product-edit-row-editing .product-edit-commands {
    display: none;
}

.login-form {
    min-width: 350px;
}

.login-panel-wrap .right-panel,
.forgot-password-panel-wrap .right-panel {
    justify-content: flex-start !important;
}

.upgrade-modal .btn {
    display: inline-block;
    margin-right: 10px;
}

.import-grid .card-header  {
    padding: 0px !important;
}
.import-grid .card-header h3 {
    font-size: var(--cm-font-size);
    padding: 0;
    margin: 0px !important;
}
table.import-grid tbody tr:hover td {
    background-color: var(--cm-white);
}
.import-grid .card-body {
    padding-left: 0px !important;
}
.import-grid tbody td:nth-of-type(2),
.import-grid tbody td:nth-of-type(3) {
    width: 150px;
}
.import-grid .card {
    padding: 0px;
    border: none;

}
.inline-date-edit-widget {
    display: flex;
    gap: 5px;
    align-items: baseline;
}

.inline-date-edit-widget .zmdi-edit {
    visibility: hidden;
}

.inline-date-edit-widget:hover .zmdi-edit {
    visibility: visible;
}

.inline-date-edit-widget .inline-date-view {
    cursor: pointer;
}
.inline-date-edit-widget {
}
.reminder-at-checkbox {
    margin-top: 2px;
}

.inline-date-edit-widget:hover .zmdi-edit {

}
.reminder-body:hover .inline-date-edit-widget .zmdi-edit {
    visibility: visible !important;

}
.reminder-body {
    padding-left: 20px;
    padding-right: 20px !important;
    padding-bottom: 10px !important;
}
.num-badge {
    position: absolute;
    right: -6px;
    top: -6px;
    background-color: var(--cm-danger);
    color: var(--cm-white);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;

}
.nav-item-text {
    position: relative;
}

/* A badge on a nav-item label must sit AFTER the text with spacing, not on top
   of it. The base .num-badge is absolutely positioned (right/top -6px) so it can
   hug the top-right corner of an icon (e.g. the footer notification bell); inside
   a text label that same positioning drops it over the last letters (CAT-1319).
   Scope an inline-flow override to labels only, leaving the footer icon badge as-is. */
.nav-item-text .num-badge {
    position: static;
    top: auto;
    right: auto;
    display: inline-flex;
    margin-left: 8px;
    vertical-align: middle;
}

.nav-item-text .popup-tooltip {
    min-width: auto !important;
    width: 220px !important;
}

.user-selector-wrap .cm-avatar-fullname:hover {
    color: var(--cm-yellow);
}

.user-selector-wrap {
    cursor: pointer;
}
.user-selector-wrap {
    display: inline-block;
}

.templates-grid .zmdi-pin {
    display: none;
}
.order-template-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.order-template-grid h3 {
    padding: 0px;
}
.order-template-grid > .card {
    cursor: pointer;
}
.order-template-grid > .card > .card-header {
    min-height: 0;
    padding: 0;
}
.order-template-grid > .card .card-body.card-padding {
    padding: 12px 15px;
}

/* One import option: what to bring over, and whether it is added or replaces.
   The pair keeps the row's right edge while the two fit; the drawer is a third
   of the viewport, so on a tablet they do not, and the pair takes the line below
   rather than hanging off the drawer's edge. */
.apply-template-import-row {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
}
.apply-template-import-row .checkbox {
    min-width: 0;
}

.template-hover-item,
.template-selected-item {
    transition: background-color 0.15s;
    cursor: pointer;
}
.template-hover-item:hover {
    background-color: #f5f5f5;
}
.template-selected-item {
    border-color: var(--cm-green) !important;
}

.memoize-expand-toggle.orders {
    grid-area: memoize-expand;
    text-align: right;
    margin-right: 5px;
}

@media screen and (max-width: 640px) {
    /* View switcher: a compact horizontal tab bar (icon over a short label,
       four across) instead of a tall vertical stack. */
    .view-options-settings {
        flex-direction: row;
        justify-content: space-between;
        gap: 4px;
        width: 100%;
    }
    .view-option-button {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 8px 2px;
        text-align: center;
    }
    .view-option-icon {
        font-size: 18px;
    }
    .view-option-title {
        margin-left: 0;
        font-size: 11px;
        line-height: 1.15;
    }
    .orders-list .select.filter-macro {
        display: none;

    }
    .calendar-weekview {
    }
    .order-editor-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .products-box > .card-body  {
        overflow-x: auto;
    }
    .products-box > .card-body > div {
        min-width: 800px;
    }

    /* Date navigation: one compact, left-aligned wrapping row
       (week · < range > · this-week) instead of a tall centered stack. The
       min-width reset is essential — the base 410px forces the range wider than
       a phone screen, which would inflate the mobile layout viewport. */
    .calendar-weekview-header-wrap {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px 12px;
        margin-top: 8px;
    }
    /* Week number and the "this week" button share the top row; the < range >
       drops to its own row below (reordered via flex order + a 100% basis). */
    .calendar-weekview-header-wrap > div:first-child {
        order: 0;
    }
    .calendar-weekview-header-wrap > div:last-child {
        order: 1;
    }
    .calendar-weekview-header-wrap .calendar-weekview-header {
        order: 2;
        flex-basis: 100%;
        flex-direction: row;
        flex-grow: 0;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 0;
    }
    .calendar-weekview-range {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
        gap: 4px;
        text-align: left;
        font-size: 13px;
        margin-bottom: 0;
    }
    /* Header: keep the title centered so it clears the top-left burger, and put
       the action buttons in a left-aligned wrapping row rather than a centered
       column. */
    .card .card-header {
        flex-direction: column;
        /* Keep align-items at the base 'center' — a blanket 'stretch' here also
           stretches auto-width header controls like the .card-expand-toggle
           chevron on collapsible cards (settings), blowing it out to full width.
           Only the action row opts into full width, via align-self below. */
        align-items: center;
        gap: 12px;
    }
    .card .card-header > h3 {
        text-align: center;
        margin: 0;
    }
    .card .card-header .actions {
        align-self: stretch;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        margin-left: 0;
    }
    /* Balance the "showing N orders" line: the .m-l-25 utility (an !important
       rule) indents it 25px on the left only, leaving it flush against the
       right content edge. Match that on the right so it reads as deliberate
       padding rather than fighting the utility with another !important. */
    .num-orders-span {
        margin-right: 25px;
    }
    /* Data grids (the shared re-datagrid tables, .bootgrid-table in a
       .table-responsive scroller) are wider than a phone even after the scroll
       shadows go on below the burger cutoff; tighten the cells so more fits
       before you have to scroll sideways. */
    .bootgrid-table > thead > tr > th,
    .bootgrid-table > tbody > tr > td {
        padding: 7px 8px !important;
        font-size: 12px !important;
    }

    /* Section cards keep a row header: the title on the left, the chevron
       hard against the right edge, and the actions wrapping onto a full-width
       row of their own below. The column layout above is for the page card
       only — its centred title clears the burger; a section card, whether
       nested in the page card or sitting in an editor modal, has no burger,
       and stacking its chevron under the title costs a line per card. */
    .card .card > .card-header,
    .modal-body .card > .card-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
    }
    .card .card > .card-header > h3,
    .modal-body .card > .card-header > h3 {
        flex: 1 1 0;
        min-width: 0;
        text-align: left;
    }
    .card .card > .card-header > :not(h3):not(.card-expand-toggle):not(.close),
    .modal-body .card > .card-header > :not(h3):not(.card-expand-toggle):not(.close) {
        order: 2;
        flex-basis: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
    }
    /* The icon-only actions list (the edit pencil) stays on the title row,
       in flow, between the title and the chevron: absolutely positioned it
       lands on top of the chevron, and on touch it is always visible. */
    .card .card > .card-header > ul.actions.actions,
    .modal-body .card > .card-header > ul.actions.actions {
        position: static;
        order: 0;
        flex: 0 0 auto;
        align-self: center;
        margin: 0;
    }
    /* Card bodies: a phone is narrower than any two-column layout. Only a
       table may scroll sideways; everything else stacks or wraps. */
    .margin-box .margin-layout {
        flex-direction: column;
        gap: 20px;
    }
    .margin-box .ds-form {
        min-width: 0;
    }
    .margin-box .stats-overview {
        overflow-x: auto;
    }
    .margin-box .stats-overview .table td {
        padding-left: 4px;
        padding-right: 4px;
    }
    /* The files grid scrolls on a phone; its tag dropdown loses the unclipped
       overflow it has on desktop, but a 560px table on a 320px card is
       worse. Doubled class to outrank that desktop rule. */
    .card.card.files-box .table-responsive {
        overflow-x: auto !important;
    }
    .sent-items-box table.table {
        table-layout: fixed;
        width: 100%;
    }
    .sent-items-box table.table td {
        overflow-wrap: anywhere;
    }
    .sent-items-box .sent-items-expanded {
        overflow-x: auto;
    }
    .sent-items-box table.table small.pull-right {
        float: none;
        display: block;
    }
    /* Fixed layout as well as wrapping cells: a mobile browser widens its
       layout viewport to an auto-layout table's preferred width and zooms
       the whole page out, wrapping or not. */
    .estimate-box .bootgrid-table,
    .invoice-box .bootgrid-table {
        table-layout: fixed;
        width: 100%;
    }
    .estimate-box .bootgrid-table > tbody > tr > td,
    .invoice-box .bootgrid-table > tbody > tr > td {
        white-space: normal;
    }
    .estimate-box .bootgrid-table > tbody > tr > td.commands,
    .invoice-box .bootgrid-table > tbody > tr > td.commands {
        width: 44px;
    }
    .comment-actions,
    .comment-row-header {
        flex-wrap: wrap;
    }
    .comment-row-tools > .m-l-20 {
        margin-left: 0 !important;
    }
}

.food-cost-card-hidden {
    display: none;
}

.food-cost-card {
    grid-area: ingredients;
}

.duplication-dates {
    display: flex;
    flex-direction: column;
    gap: 5px;

}
.duplication-dates-wrap {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.duplication-dates-wrap > button {
    margin-top: 2px;
}
.ingredients-overview-grid th.commands .commands-inner,
.invoices-overview-grid th.commands .commands-inner {
    display: none;
}

.invoices-overview-grid th:nth-of-type(7) > span {
    display: none;
}
.invoices-overview-grid .checkbox-wrap {
    position: absolute;
    background: white;
    padding: 10px;
    box-shadow: 3px 3px 3px #ccc;
    border: 1px solid #ccc;
}

.estimate-editor-v2 .estimate-page-hidden {
}

.estimate-editor-v2 .estimate-page-wrap .estimate-page {
    position: relative;
}

.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.hidden-page-hide-info {
    display: none;
}

.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask .hidden-page-icon {
    color: var(--cm-dark-green-transparent);
    font-size: 196px;
}

.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask:hover .hidden-page-icon {
    display: none;
}

.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask:hover .hidden-page-hide-info {
    display: block;
    color: white !important;
    padding: 40px;
    background-color: var(--cm-dark-green-transparent);
    border-radius: 16px;
    font-family: 'figtree';
    font-weight: 300;
    max-width: 70%;

}
.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask:hover .hidden-page-hide-info a {
    color: var(--cm-white);
    font-weight: bold;
}

.hidden-page-hide-info .title {
}

.hidden-page-hide-info .expl {

}

/* Margin guides — dashed lines showing top/bottom margin boundaries */
.margin-guide {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dotted rgba(0, 0, 0, 0.2);
    border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
    pointer-events: none;
    z-index: 1;
    opacity: 0.2;
    transition: opacity 0.2s ease;
}

.estimate-page:hover .margin-guide {
    opacity: 1;
}

.margin-guide-chevron {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.margin-guide-top .margin-guide-chevron {
    top: -16px;
}
.margin-guide-bottom .margin-guide-chevron {
    bottom: -16px;
}
.margin-guide-chevron-left {
    left: -20px;
}
.margin-guide-chevron-right {
    right: -20px;
}

.drilldown-modal .card {
    width: 100%;
}

.drilldown-modal .table tr:first-of-type td {
    padding-top: 0px;
}

.store-in-db-checkbox {
    display: flex;
    flex-direction: row-reverse;
}

.products-overview-grid .search-input .text-input {
}
.products-overview-grid .search-input .text-input input {
    border-radius: var(--cm-border-radius) !important;
}
.products-overview-grid .nodata {
    height: 500px;
}
.products-overview-grid th .commands-inner {
    display: none;
}

.product-overview-table {
    min-height: 500px;
}

.products-overview-grid th {
    vertical-align: top !important;
}
.prep-list-header-filter ul {
    margin-left: 0px;
    padding-left: 15px;
    margin-top: 0px;
}

.title-input-wrap .no-results {
    display: none;
}

.search-results-wrap .search-header {
    font-weight: bold;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;

}

.new-order-dot {
    height: 10px;
    width: 10px;
    text-align: center;
    border-radius: 5px;
    background-color: var(--cm-color-danger-bg);
}

.updated-order-dot {
    height: 10px;
    width: 10px;
    text-align: center;
    border-radius: 5px;
    background-color: var(--cm-color-info-bg);
}

.webshop-products-tab {
    min-height: 500px;
}

.final-step a {
    color: var(--cm-yellow);
}
.tag-grid .tag-color-picker h4,
.financial-status-grid .tag-color-picker h4 {
    display: none;
}

.financial-status-grid .tag-color-picker {
    padding-top: 4px;
}

.financial-status-grid .tag-color-picker ul {
    gap: 4px;
}

.wrap-peppol-id {
    display: flex;
    gap: 20px;
    align-items: center;
}

.peppol-search .crit {
    padding-top: 10px;
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
}

.peppol-search .crit label {
    flex: 0 0 150px;
}

.peppol-search .crit .value {
    flex: 1;
    width: 100%;
}

.peppol-edit-widget label {
    padding: 0 10px;
}

.peppol-search .search-results .result {
    display: flex;
    gap: 20px;
    align-items: center;
}

.peppol-search .search-results .result {
    padding: 5px 0;
}

.peppol-search .search-results .result.header {
    font-weight: bold;
}

.peppol-search .search-results .result div {
    flex: 0 0 150px;
}

.peppol-search .search-results .result div.id {
    text-align: right;
}

.popup-tooltip a {
    color: var(--cm-yellow);
}

.location-file-grid .tag-box-wrap {
    flex-direction: column;
    align-items: flex-start;
}

.floating-preview-button {
    position: fixed;
    right: -67px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    color: white;
    padding: 10px 20px;
    border-right: 1px solid var(--cm-light-gray);
    border-radius: 8px 8px 0px 0px;
    border-left: 1px solid var(--cm-light-gray);
    border-top: 1px solid var(--cm-light-gray);
    box-shadow: 0px 0px 0px 0px 6px var(--cm-mid-gray);
    border-bottom: none;
    cursor: pointer;
    z-index: 9999;
}


/** test estimate responsive view */

/* we make the viewer itself based on a fixed viewport */
/*.estimate-viewer  {
    container-type: inline-size;
}

@container (min-width: 1200px) {
    .fixed-section {
        width: 1200px;
    }
}
*/

.planning-panel-view .internal-comment-row .ql-editor {
    background-color: unset !important;
}
.brand-boxes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.brand-boxes > .card {
    width: 100%;
}

.order-card-tags {
    font-size: 0.6rem;
    margin-left: 5px;
}

.order-card-financial-status {
    font-size: 0.7rem;
    padding: 3px 8px;
    margin-top: 4px;
    border-radius: 0 0 4px 4px;
}

.order-card-financial-status {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: var(--cm-border-radius);
}

.link-mailbox {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: center;
}

.link-mailbox > div {
    padding: 10px;
}

.mailbox-details > div {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ipad things */
button, .btn {
    touch-action: manipulation;
}

.ontzorg-ordered {
    background-color: var(--cm-light-green);
    color: white;
    padding: 5px 10px;
    border-radius: var(--cm-border-radius);
}

.discount-not-ordered {
    background-color: var(--cm-yellow);
    padding: 10px;
    border-radius: var(--cm-border-radius);
    font-size: 9pt;
}

.css-editor {
    font-family: Courier new;
    height: 200px;
    width: 100%;
}

.version-changed {
    position: absolute;
    width: 100vw;
    z-index: 8;
    background-color: var(--cm-light-green);
    color: white;
    font-size: 15px;
    padding: 10px;
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: baseline;
}

.demo-mode {
    border: 3px solid var(--cm-light-green);
    min-height: 100vh;
    box-sizing: border-box;
}

.demo-mode-banner {
    position: sticky;
    top: 0;
    z-index: 1040;
    background-color: var(--cm-yellow);
    color: var(--cm-dark-green);
    padding: 6px 12px;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.demo-mode-banner-email-verification {
    position: sticky;
    top: 0;
    z-index: 1040;
    background-color: var(--cm-light-green-transparent);
    color: var(--cm-green);
    padding: 3px 10px;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    text-align: center;

}

/* The demo-data-removal confirm modal includes a phone-only warning that the
   app needs a larger screen to explore properly — hidden on desktop. */
.demo-mode-mobile-warning {
    display: none;
}

/* "Take one last look at a sample quote PDF" link inside the confirm modal.
   On mobile this is the only surface for quote preview since the banner's
   secondary CTA is hidden there; on desktop it's an extra last-chance offer. */
.demo-mode-preview-link-wrap {
    margin-top: 16px;
    margin-bottom: 0;
    text-align: center;
}
.demo-mode-preview-link {
    cursor: pointer;
    color: var(--cm-font-color);
    text-decoration: underline;
}
.demo-mode-preview-link:hover {
    color: var(--cm-dark-green);
}

/* The honest-CTA copy is long enough to overflow the confirm modal at every
   width — the modal opens at :third viewport width on desktop. Let the
   buttons row wrap and break long button labels at every viewport. */
.modal-body.demo-mode-confirm .flex.gap-20 {
    flex-wrap: wrap;
}
.modal-body.demo-mode-confirm .btn {
    white-space: normal;
    max-width: 100%;
}

/* Mobile fixes for demo banner + onboarding wizard.
   The demo banner squashes its message into a 1-word-per-line column without flex-wrap,
   and the wizard inherits huge desktop font sizes (14pt body, h1 title, 20pt buttons,
   100px button gap, 40px padding) that overflow viewport on phones. */
@media screen and (max-width: 600px) {
    .demo-mode-mobile-warning {
        display: block;
        margin-top: 16px;
        padding: 12px 16px;
        background-color: var(--cm-yellow);
        color: var(--cm-dark-green);
        border-radius: 8px;
        font-size: 1rem;
        line-height: 1.4;
    }
    .demo-mode-banner {
        flex-wrap: wrap;
        padding: 6px 10px;
        /* Clear the collapsed nav rail (now lifted above the banner) so the
           banner's centred content isn't clipped under it. */
        margin-left: 3rem;
    }
    .demo-mode-banner > span {
        flex-basis: 100%;
        text-align: center;
    }
    /* Long translated labels (pt, de) overflow the viewport without break */
    .demo-mode-banner .btn {
        white-space: normal;
        max-width: 100%;
    }
    /* The "preview your quote" CTA belongs on a roomier screen; on mobile
       we surface it inside the confirm modal as a last-look link instead. */
    .demo-mode-estimate-preview-cta {
        display: none;
    }

    /* The demo banner is sticky at top:0 with z-index 1040; the fixed sidebar
       sits at z-index 10 with its only close control — the .nav-toggle chevron
       — at the very top. On a phone the taller (wrapped) banner painted over
       that chevron, leaving the open nav drawer impossible to close. Lift the
       drawer above the banner so the chevron is tappable. The collapsed rail
       already overlays the main content here, so overlaying the banner too is
       consistent. */
    .demo-mode #sidebar {
        z-index: 1050;
    }

    .onboarding-modal {
        font-size: 1rem;
        gap: 12px;
        padding-bottom: 20px;
    }
    .onboarding-modal .modal-header h3 {
        font-size: 1.4rem;
    }
    .onboarding-modal .modal-content {
        padding: 0 16px 10px;
    }
    .onboarding-modal .expl {
        gap: 12px;
    }
    .onboarding-panel-body p {
        font-size: 1rem;
    }
    .onboarding-step-wrap {
        gap: 12px;
        padding-bottom: 20px;
    }
    .onboarding-buttons {
        flex-wrap: wrap;
        gap: 12px;
    }
    .onboarding-skip-link {
        font-size: 0.9rem;
    }
    .btn-xl {
        font-size: 1rem;
        padding: 8px 16px;
    }
    .onboarding-step-wrap img.logo {
        max-width: 100%;
    }
    /* prod-import step sets inline max-width:60ch on .expl which overflows the viewport */
    .onboarding-step-wrap .expl {
        max-width: 100% !important;
    }
    /* prod-import upload button has long single-line label */
    .onboarding-step-wrap .btn {
        white-space: normal;
        max-width: 100%;
    }
}

.prep-list-grid {
    display: grid;
    gap: 0px;
    overflow: auto;
}

.prep-list-grid .grid-cell {
    /* hack to avoid double borders */
    box-shadow: inset -1px -1px 0 var(--cm-lines-color);
    padding: 4px;
}
.prep-list-grid .grid-cell.first-cell {
    border-left: 1px solid var(--cm-lines-color);
}

.prep-list-grid .grid-cell.empty-row {
    border-left: none;
    box-shadow: none;
}
.prep-list-grid .grid-cell.first-row {
    border-top: 1px solid var(--cm-lines-color);
}
.prep-list-grid .grid-cell[colspan="2"] {
    grid-column: span 2;
}
.prep-list-grid .grid-cell[colspan="3"] {
    grid-column: span 3;
}
.prep-list-grid .grid-cell[colspan="4"] {
    grid-column: span 4;
}
.prep-list-grid .grid-cell[colspan="5"] {
    grid-column: span 5;
}
.prep-list-grid .grid-cell[colspan="6"] {
    grid-column: span 6;
}
.product-sub-total-header, .product-sub-total {
    background-color: var(--cm-table-heading-bg-color) !important;
    color: var(--cm-table-heading-color) !important;
    border-top: 1px solid var(--cm-lines-color);
}

.prep-list-grid .grid-cell-numeric {
    text-align: right;
}
.prep-list-grid .comment-wrap,
.prep-list-tree .comment-wrap {
    position: absolute;
    left: -2px;
    top: -6px;
}

/* Quantity / total cells: [checkbox] [value] — value flex-grows, right-aligned
   and never wraps so "584 gram" / "1000 gram" stay on one line on tablet. */
.prep-list-grid .product-quantity .grid-cell-contents,
.prep-list-grid .product-total .grid-cell-contents,
.prep-list-tree .product-quantity .grid-cell-contents,
.prep-list-tree .product-total .grid-cell-contents {
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
}
.prep-list-grid .product-quantity .grid-cell-contents .prep-list-cell-value,
.prep-list-grid .product-total .grid-cell-contents .prep-list-cell-value,
.prep-list-tree .product-quantity .grid-cell-contents .prep-list-cell-value,
.prep-list-tree .product-total .grid-cell-contents .prep-list-cell-value {
    flex: 1;
    text-align: right;
    white-space: nowrap;
}
.prep-list-grid .product-header-food .prep-list-cell-value {
    margin-bottom: 3px;
}
.prep-list-grid .product-quantity .grid-cell-contents.cell-checked,
.prep-list-tree .product-quantity .grid-cell-contents.cell-checked {
    opacity: 0.5;
}
/* Tappable cell value affordance — touch-friendly tap target. */
.prep-list-cell-value {
    padding: 2px 0;
    min-height: 24px;
    line-height: 1.2;
    /* The change pill positions against the number, so the number is what has
       to be the containing block. */
    position: relative;
}

/* Tappable cell discoverability: paint the whole cell (including the .grid-cell
   padding) on hover/active so it reads as one interactive surface, not a
   floating box. Slightly stronger wash than 'subtle' — visible enough on
   tablet that touch-down clearly confirms the tap. */
.prep-list-grid .grid-cell-contents.prep-list-tappable,
.prep-list-tree .grid-cell-contents.prep-list-tappable {
    cursor: pointer;
}
.prep-list-grid .grid-cell:has(.prep-list-tappable),
.prep-list-tree .grid-cell:has(.prep-list-tappable) {
    transition: background-color 80ms ease-out;
}
.prep-list-grid .grid-cell:has(.prep-list-tappable):hover,
.prep-list-tree .grid-cell:has(.prep-list-tappable):hover {
    background-color: rgba(0, 0, 0, 0.08);
}
.prep-list-grid .grid-cell:has(.prep-list-tappable:active),
.prep-list-grid .grid-cell:has(.prep-list-tappable):active,
.prep-list-tree .grid-cell:has(.prep-list-tappable:active),
.prep-list-tree .grid-cell:has(.prep-list-tappable):active {
    background-color: rgba(0, 0, 0, 0.14);
}

/* Tap-to-open cell menu (anchored popover + full-screen backdrop). */
.prep-list-cell-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1040;
}
.prep-list-cell-menu {
    position: fixed;
    z-index: 1041;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    max-height: 60vh;
    overflow-y: auto;
    background: var(--cm-card-bg-color, #fff);
    border: 1px solid var(--cm-lines-color);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 4px 0;
}
.prep-list-cell-menu-breakdown {
    padding: 8px 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--cm-lines-color);
    text-align: right;
}
.prep-list-cell-menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    min-height: 40px;
}
.prep-list-cell-menu-row:hover,
.prep-list-cell-menu-row:active,
.prep-list-cell-menu-row:focus {
    background: var(--cm-table-heading-bg-color, #f3f3f3);
    outline: none;
}
.prep-list-cell-menu-row .zmdi {
    color: var(--cm-lines-color);
    font-size: 18px;
    line-height: 1;
}
.prep-list-grid .product-spacer {
    border: none;
}
.preparation-list-wrap > .card {
    margin-bottom: 20px;
}

.grid-cell.product-total {
    text-align: right;
}

.prep-list-grid .grid-cell.prep-list-not-produced,
.prep-list-tree .grid-cell.prep-list-not-produced {
    color: var(--cm-light-gray);
    text-decoration: line-through;
}

.prep-list-grid .grid-cell.prep-list-not-produced-row {
    display: none;
}

/* One toolbar above the list: view switch, date filter, print. Everything in
   it is btn-sm and the row wraps, so a long set of dates pushes onto a second
   line instead of widening the page. */
/* Says the orders moved under a snapshot that is frozen by design. Warning
   colours, because the list in front of you is no longer what would be
   generated. */
.prep-list-changed-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: var(--cm-border-radius);
    background-color: var(--cm-color-warning-bg);
}
.prep-list-changed-banner .zmdi {
    font-size: 16px;
}
.prep-list-changed-summary {
    font-weight: 600;
}
.prep-list-changed-added {
    opacity: 0.85;
}

/* Cells the exact check found moved. Same classes in both views — the grid
   and the compact list render the same snapshot cells. */
/* The order-status palette: amber for a moved quantity, the soft red of a
   part-invoiced order for a line that is gone, confirmed green for one the
   orders have gained. Same vocabulary as a status pill, so the colours mean
   the same thing here as they do on an order. */
/* Tint only. Recolouring the text as well turned the order name and the
   customer amber too, which read as broken rather than as flagged. */
.prep-list-cell-changed,
.prep-tree-head.prep-list-cell-changed,
.prep-tree-row.prep-list-cell-changed > .grid-cell {
    background-color: var(--cm-status-cancelled-bg);
}
.prep-list-cell-removed,
.prep-tree-head.prep-list-cell-removed,
.prep-tree-row.prep-list-cell-removed > .grid-cell {
    background-color: var(--cm-status-partial-invoiced-bg);
}
.prep-list-cell-removed,
.prep-tree-row.prep-list-cell-removed > .grid-cell {
    text-decoration: line-through;
}
/* A row the frozen list never had, spliced in where the comparison says it
   belongs. Not struck through: it is the only one of the three that is not in
   the snapshot at all, so it has to read as an arrival rather than a note on
   an existing row. */
.prep-list-cell-added,
.prep-tree-head.prep-list-cell-added,
.prep-tree-row.prep-list-cell-added > .grid-cell {
    background-color: var(--cm-status-confirmed-bg);
}

/* How much it moved — superscript, no fill, and out of flow. In flow it
   pushed the quantity left, so a column of numbers jumped sideways wherever
   one of them had changed. It sits at the cell's left edge instead: the
   number is right-aligned, so that side is empty. */
.prep-list-cell-delta {
    position: absolute;
    top: 1px;
    right: -15px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--cm-status-cancelled);
}
/* The tree reserves its gutter in the quantity cell's padding; the grid has no
   spare width, so it only gives one up on a list that has changes to show.
   Totals share the columns with quantities and so must shift with them. */
.prep-list-grid.has-changes .product-quantity > .grid-cell-contents,
.prep-list-grid.has-changes .product-total > .grid-cell-contents {
    padding-right: 19px;
}

.prep-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 0 12px;
}
.prep-list-toolbar-end {
    margin-left: auto;
}
.prep-list-toolbar-sep {
    width: 1px;
    align-self: stretch;
    min-height: 22px;
    background-color: var(--cm-lines-color);
}
.prep-list-toolbar-label {
    font-size: 12px;
    opacity: 0.75;
    white-space: nowrap;
}
.prep-list-segmented {
    display: flex;
    gap: 4px;
}

.prep-list-date-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* === Prep list, tree layout ===
   One collapsed row per product, expanding downwards into a row per order, so
   the order axis grows down the page instead of off the right edge. Same cells
   as the grid — only the arrangement differs. */
.prep-list-tree {
    /* Shared by the product row and its expansion, so the checkbox, the
       quantity and the first text column sit on the same verticals whether a
       node is open or shut. */
    --prep-tree-lead: 74px;
    --prep-tree-qty: 104px;
}
.prep-list-tree .prep-tree-node {
    border: 1px solid var(--cm-lines-color);
    border-bottom: none;
}
.prep-list-tree .prep-tree-node:last-child {
    border-bottom: 1px solid var(--cm-lines-color);
}

/* Quantity first, then the name: "23x Aardappelpuree" is the order it is read
   in. Same leading tracks as the expansion below it. */
.prep-tree-head {
    display: grid;
    grid-template-columns: var(--prep-tree-lead) var(--prep-tree-qty) minmax(0, 1fr) auto;
    align-items: center;
    /* No gap, and the same cell padding as the expansion below: the tracks are
       shared, so the padding has to be too or everything shifts by the gap. */
    gap: 0;
    /* Same as an expansion row, so open and shut keep one rhythm. */
    min-height: 30px;
    padding: 0;
}
.prep-tree-head-lead {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
}
.prep-tree-head > .product-total {
    padding: 0 22px 0 6px;
}
.prep-tree-head > .product-header-food {
    min-width: 0;
    padding-left: 6px;
}
.prep-tree-head > .prep-tree-progress {
    margin: 0 6px 0 12px;
}

.prep-tree-caret {
    flex: 0 0 26px;
    margin-right: auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.prep-tree-caret .zmdi {
    font-size: 18px;
    line-height: 1;
}
/* Node checkbox: same column as the row checkboxes below it. */
.prep-tree-node-check {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.prep-tree-node-check .checkbox {
    margin: 0;
}

.prep-tree-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 0 1 auto;
}
.prep-tree-chip {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-heading-color);
    border-radius: 10px;
    padding: 1px 8px;
    white-space: nowrap;
}

.prep-tree-body {
    display: grid;
    border-top: 1px solid var(--cm-lines-color);
}
.prep-tree-body .grid-cell {
    min-width: 0;
}
/* The row is a keying/grouping wrapper only — its cells are the grid's. */
.prep-tree-row {
    display: contents;
}
.prep-tree-body .grid-cell {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 3px 6px;
    box-shadow: inset 0 -1px 0 var(--cm-lines-color);
}
/* The quieter half of a row: the split ahead of it is what the kitchen reads. */
.prep-tree-body .grid-cell.prep-tree-order-wrap {
    padding: 3px 6px;
    opacity: 0.8;
}
/* No rule after the number. The column reads as a column because the numbers
   line up; a border only boxed them in.

   The right padding is a gutter the delta lives in, kept whether or not there
   is one — that is what stops the number moving. The head reserves the same,
   so its total stays on the rows' right edge. */
.prep-tree-row > .product-quantity {
    padding-right: 22px;
}

/* The order, on one line: weekday chip, name, then badges. */
.prep-tree-order {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}
.prep-tree-order.prep-list-tappable {
    cursor: pointer;
}
/* A quiet marker, not a block: at full row height the coloured chip was the
   loudest thing in a row whose subject is a number and a name. */
.prep-tree-day {
    flex: 0 0 30px;
    text-align: center;
    padding: 0 3px;
    border-radius: 3px;
    font-size: 10px;
    line-height: 15px;
    font-weight: 600;
    text-transform: lowercase;
    background-color: var(--cm-table-heading-bg-color);
}
.prep-tree-day-monday    { background-color: var(--cm-color-credited-bg); }
.prep-tree-day-tuesday   { background-color: var(--cm-color-danger-bg); }
.prep-tree-day-wednesday { background-color: var(--cm-color-warning-bg); }
.prep-tree-day-thursday  { background-color: var(--cm-color-success-bg); }
.prep-tree-day-friday    { background-color: var(--cm-color-info-bg); }
.prep-tree-day-saturday  { background-color: #e4c4ff; }
.prep-tree-day-sunday    { background-color: var(--cm-color-success); }

.prep-tree-when {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.prep-tree-order-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prep-tree-customer {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.65;
}
.prep-tree-badge {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 10px;
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-heading-color);
    white-space: nowrap;
}

/* The split the row is made in — the first thing a chef reads, so it carries
   the row at full strength and the order beside it is the quieter half. */
.prep-tree-component {
    white-space: nowrap;
}

/* How far along: a filled pill with its own count. Sits at the far right of a
   product row, and again on the card for the whole list. */
/* One width for every bar, whatever it counts — a column of bars that all
   start and end together is the point. The count is there on hover. */
.prep-tree-progress {
    flex: 0 0 auto;
    width: 84px;
    position: relative;
    height: 16px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--cm-table-heading-bg-color);
}
/* Darker than the confirmed background tint it used to wear: the label only
   appears on hover, so at rest the fill is the whole signal and has to carry
   against the track on its own — a sliver at 8% has to be visible with no
   number on it. */
.prep-tree-progress-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: #9ee586;
    transition: width 120ms ease-out;
}
/* Done wears the confirmed order-status colours, so "settled" reads the same
   here as it does on an order. The fill is that green all along — a fuller bar
   is the progress; the label turning confirmed-green is the finish. */
.prep-tree-progress-label {
    position: relative;
    display: block;
    text-align: center;
    line-height: 16px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 80ms ease-out;
}
.prep-tree-progress:hover .prep-tree-progress-label {
    opacity: 1;
}
.prep-tree-progress.is-complete .prep-tree-progress-label {
    color: var(--cm-status-confirmed);
}

.prep-list-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
/* Right, so it sits over the column of per-product pills below it. */
.prep-list-card-header .prep-tree-progress {
    margin-left: auto;
}
/* Lines the row's box up under the product row's own checkbox, so the whole
   card is one column of boxes to run down. */
.prep-tree-check {
    justify-content: flex-end;
}
.prep-tree-check .checkbox {
    margin: 0;
}
/* The shared checkbox reserves 30px of label for text these never have, which
   is dead space between the box and the number it ticks off. */
.prep-tree-check .checkbox label,
.prep-tree-node-check .checkbox label {
    width: 17px;
    padding-left: 17px;
}

.prep-tree-row .product-quantity .grid-cell-contents,
.prep-tree-head > .product-total .grid-cell-contents {
    width: 100%;
    justify-content: flex-end;
}
.prep-tree-row .product-quantity .grid-cell-contents .prep-list-cell-value,
.prep-tree-head > .product-total .grid-cell-contents .prep-list-cell-value {
    flex: 0 0 auto;
    text-align: right;
}

.user-multi-selector-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    column-gap: var(--cm-grid-column-gap);
    row-gap: 0px;


}
.user-multi-selector-wrap .user-checkbox .checkbox {
    margin: 3px;
}
.disconnected-warn {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    padding: 10px;
    color: white;
    z-index: 999;
    background-color: var(--cm-danger);
}

.connected-users {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-bottom: 10px;
    align-items: baseline;
}

.connected-users .connected-user {
    background-color: var(--cm-lines-color);
    padding: 8px 16px;
    border-radius: 8px;
}
.grid-cell-contents {
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
}
.grid-cell-contents .checkbox {
    margin-top: 0px;
    margin-bottom: 0px;
}

.list-app-logo-wrap {
    padding: 10px 20px;
    background-color: var(--cm-green);
    border-radius: var(--cm-border-radius);
}

.production-card.cell {
    display: flex;
    gap: 10px;
    align-items: center;
}

.production-card.cell .checkbox {
    margin-top: 4px;
    margin-bottom: 0px;
}

.production-card.cell.qty {
}
.production-card.cell.product-group-cell,
.production-card.cell.title-cell
{
    font-weight: bold;
}
.table tr.row-product-group-cell td {
}

.top-genlist-bar {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    display: flex;
}
.row-title-cell td {
    padding-top: 20px;
}

.recipe-viewer  .ql-editor {
    padding: 0px !important;
}

.recipe-button {
    color: var(--cm-lines-color);
    cursor: pointer;
}

/* Label-print icons in the prep-list grid: same muted gray as the recipe icon. */
.prep-list-print-icon {
    color: var(--cm-lines-color);
}
@media screen and (max-width: 400px) {

    .top-genlist-bar {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .connected-users {
        flex-direction: column;
    }

    #generated-list .card-header {
        padding: 5px;
    }
    #generated-list .card-header {
        display: flex;
        flex-direction: row;
        padding: 0px 10px;
    }
    #generated-list .card-header h3 {
        font-size: 16px;
    }
    #generated-list .prep-list-title {
        font-size: 10px !important;
    }
}

.search-date-types {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    align-items: center;
}

.order-filter-modal .radio + .radio {
    margin-top: 0 !important;
}

.filter-pills-row .radio {
    margin: 0;
    padding: 0;
}

.top-filters-section .filter-pills-row:has(.radio) {
    margin-top: 8px;
}

.filter-pills-row .radio label {
    font-size: 1rem;
}

.coeur-table div.event-header {
    font-weight: bold;
}
.coeur-table .row-title {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-bg-color);
}
.coeur-table .row-empty {
    display: none;
}
.coeur-table td.quantity .quantity {
    flex-direction: row-reverse;
}

.coeur-cards {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    margin-bottom: 20px;
}

.shopping-list-tables {
    margin-top: 20px;
}

.shopping-list-tables .card {
    margin-bottom: 20px;
}

.shopping-list-tables .header-row td {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-headig-color);
}

.shopping-list-tables .quantity-chooser input {
    width: 60px;
    text-align: center;
}
.shopping-list-tables .card {
    overflow-x: auto;
}
.shopping-list-tables .supplier-row,
.shopping-list-tables .order-row
{
    display: none;
}

@media screen and (max-width: 400px) {
    .shopping-list-tables tr td:nth-of-type(2),
    .shopping-list-tables tr td:nth-of-type(3),
    .shopping-list-tables tr td:nth-of-type(5),
    .shopping-list-tables tr td:nth-of-type(8),
    .shopping-list-tables tr td:nth-of-type(9)
    {
        display: none;
    }

    .shopping-list-tables   .quantity-chooser > .flex {
        gap: 5px;
    }
    .shopping-list-tables .quantity-chooser input {
        width: 40px;
    }
    .shopping-list-tables .table > tbody > tr > td:first-child
    {
        padding-left: 2px !important;

    }
}

.product-header-product-group .grid-cell-contents,
.product-header-order .grid-cell-contents,
.product-group-total .grid-cell-contents {
    flex-direction: row-reverse;
    text-align: right;
}

.grid-cell .zmdi-alert-circle {
    color: var(--cm-danger);
}

.recipe-presentation img,
.recipe-body img,
.recipe-viewer > img {
    max-width: 500px;
}

.mat-list-appears-in-wrap h3 {
    margin-top: 5px;
    margin-bottom: 5px;
}


.material-list-ta {
    min-width: 325px;
    height: 150px;
}

.material-list-grid tr th:first-of-type {
    width: 75px;
}
.material-list-grid tr th:nth-of-type(2) {
    width: 100px;
}
.material-list-grid tr th:nth-of-type(3) {
    width: 300px;
}

.delivery-list-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    column-gap: 10px;
    row-gap: 10px;
    grid-template-areas:
        "delivery-date delivery-contents delivery-comments"
        "delivery-address delivery-contents delivery-comments" ;
    margin-bottom: 40px;
}

.delivery-list-cell {
    padding: 10px;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
}

.delivery-list-comments {

}
.delivery-list-comment {
    border-bottom: 1px solid var(--cm-lines-color);
    padding-bottom: 10px;
    padding-top: 10px;
}


@media screen and (max-width: 800px) {
    .delivery-card-header {
        flex-direction: column;
        justify-content: flex-start;

    }
    .delivery-list-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

.grid-cell.product-header-order {
    padding: 0px;
}
.grid-cell .order-link {
    padding: 4px;
}
.grid-cell-contents.product-header-order {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0px;

}
.grid-cell-contents .day-label {
    padding: 5px;
    text-align: center;
}
.day-label.day-label-monday  .day-label {
    background-color: var(--cm-color-credited-bg);
}

.day-label.day-label-tuesday .day-label {
    background-color: var(--cm-color-danger-bg);
}

.day-label.day-label-wednesday .day-label {
    background-color: var(--cm-color-warning-bg);
}
.day-label.day-label-thursday .day-label {
    background-color: var(--cm-color-success-bg);
}
.day-label.day-label-friday  .day-label {
    background-color: var(--cm-color-info-bg);
}
.day-label.day-label-saturday  .day-label {
    background-color: #e4c4ff;
}
.day-label.day-label-sunday .day-label {
    background-color: var(--cm-color-success);
}

.generated-list-tenant-1004 .prep-list-variation-total .grid-cell-contents div {
    display: none;
}

.grid-cell-contents .order-type {
    padding: 4px;
}
.sales-grid.table th {
    width: 80px;
}
.cm-downgrade {
    background-color: var(--cm-color-danger-bg);
}
.cm-upgrade {
    background-color: var(--cm-color-success-bg);
}
tr.cm-no-revenue-yet td {
    color: #bbb;
}
.cm-bonus-eligible {
    text-decoration: underline;
}
tr.bold-row td {
    font-weight: bold;
}

#estimate-editor {
    padding: 20px;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(11) {
    order: 4;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(6) {
    order: 3;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(1) {
    order: 1;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(2) {
    order: 2;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(3) {
    order: 5;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(4) {
    order: 6;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(5) {
    order: 7;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(7) {
    order: 8;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(8) {
    order: 9;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(9) {
    order: 10;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(10) {
    order: 11;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(n+12) {
    order: 12;
}

.select-deselect-buttons .btn {
    font-size: 0.7rem;
    padding: 3px 12px;
}

/* Monthly Calendar - Minimal Styles */
/* Lined up with the week calendar, which is what switching tabs compares this
   against — 20px on all four sides started the month view lower and inset it
   further than every other tab's content, so the switch jumped.

   The numbers account for the table's own `border-spacing: 10px`, which already
   draws a gutter on each outer edge: 13px left and right lands the first cell
   at the week view's 23px, no padding on top puts the month title on the week
   range's line, and 10px at the bottom closes at the week view's 20px. */
.monthly-calendar-view {
  padding: 0 13px 10px;
}

/* The month/year title is the same title the week calendar carries over its own
   range, so it is the same size — `.cm-calendar-modern`'s larger heading is
   sized for the occupancy calendars, which have no tab strip above them.

   The `.cm-calendar-modern` in the middle is not decoration: the rule it
   overrides has the same specificity and comes later in the file. */
.monthly-calendar-view .cm-calendar-modern .cm-cal-month,
.monthly-calendar-view .cm-calendar-modern .cm-cal-year-label {
    font-size: 15px;
    font-weight: bold;
}

.status-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 5px;
}

.monthly-day-detail {
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 10px;
  min-width: 250px;
  max-width: 300px;
  z-index: 1000;
}

.detail-order-card {
  padding: 6px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.detail-order-card:hover {
  background: #f5f5f5;
}

.monthly-orders-table .clickable-row:hover {
  background-color: #f9f9f9;
}
.status-badge {
    cursor: pointer;
}
.status-badge.invoice-status-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    width: 32px;
    height: 32px;
    border-radius: 16px;
}
.clickable-row {
    cursor: pointer;
}

th.day-enabled {
    width: 14.285714285%;
}
.datepicker table thead tr:last-child:not(:only-child) {
    background-color: var(--cm-light-green-transparent);
}
.datepicker table thead tr:first-child th {
    background-color: var(--cm-light-green);
}

.rc-border {
    border: none !important;
}
.available.off {
    color: var(--cm-nav-color);
    background-color: var(--cm-very-light-gray);
}
.spacer {
    flex-grow: 1;
}
.ReactVirtualized__Table__row {
    margin-bottom: 3px;
}


.estimate-comment-form-placeholder {
}

.estimate-wrap .estimate-comment-form-placeholder {
    border: 1px solid var(--cm-light-gray);
    height: 40px;
    padding: 10px;
}

/* ============================================================================
   Signup Wizard Styles
   ============================================================================ */

.signup-wizard-wrap {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    display: flex;
    flex-direction: column;
}

.signup-wizard-language-selector {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.signup-wizard-language-selector .language-select {
    background-color: #f5f7fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px 12px;
    min-width: 150px;
}

.signup-wizard-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
}

.signup-wizard-panel {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    max-width: 700px;
    width: 100%;
    padding: 40px;
}

/* Progress Indicator */
.signup-wizard-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
}

.signup-wizard-progress::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #e0e0e0;
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    flex: 1;
}

.progress-step .step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.progress-step .step-label {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
    text-align: center;
    transition: color 0.3s ease;
}

.progress-step.active .step-number {
    background: var(--cm-green, #009688);
    color: white;
}

.progress-step.active .step-label {
    color: var(--cm-green, #009688);
    font-weight: 600;
}

.progress-step.completed .step-number {
    background: var(--cm-green, #009688);
    color: white;
}

.progress-step.completed .step-label {
    color: #666;
}

/* Wizard Steps Content */
.wizard-step {
    min-height: 300px;
}

.wizard-step h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 600;
}

.wizard-step .step-description {
    color: #666;
    margin-bottom: 30px;
    font-size: 14px;
}

/* Form Fields */
.signup-wizard-field {
    margin-bottom: 15px;
}

.signup-wizard-field .input-group {
    margin-bottom: 5px;
}

.signup-wizard-field .form-control {
    background-color: #f8faf9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 14px;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.signup-wizard-field .form-control:focus {
    border-color: var(--cm-green, #009688);
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.1);
    outline: none;
}

.signup-wizard-field.has-error .form-control {
    border-color: #e74c3c;
}

.signup-wizard-field .field-error {
    font-size: 12px;
    margin-top: 4px;
}

.signup-wizard-field .input-group-addon {
    background: transparent;
    border: none;
    color: #999;
    padding-right: 10px;
}

/* Position only validation icons outside the form field */
.signup-wizard-panel .cm-input-group,
.wizard-step .cm-input-group,
.signup-wizard-panel .input-group.m-b-20,
.wizard-step .input-group.m-b-20 {
    position: relative;
}

.signup-wizard-panel .input-group-addon:has(.zmdi-alert-circle-o),
.signup-wizard-panel .input-group-addon:has(.zmdi-alert-circle),
.signup-wizard-panel .input-group-addon:has(.zmdi-check),
.wizard-step .input-group-addon:has(.zmdi-alert-circle-o),
.wizard-step .input-group-addon:has(.zmdi-alert-circle),
.wizard-step .input-group-addon:has(.zmdi-check) {
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
}

.signup-wizard-panel .input-group-addon:has(.zmdi-check) .zmdi-check,
.wizard-step .input-group-addon:has(.zmdi-check) .zmdi-check {
    margin-left: 0;
}

.signup-wizard-field .select {
    position: relative;
}

.signup-wizard-field .select select {
    appearance: none;
    background-color: #f8faf9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 15px;
    padding-right: 35px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
}

.signup-wizard-field .select::after {
    content: '\f2f9';
    font-family: 'Material-Design-Iconic-Font';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
}

/* Error states for form validation */
.signup-wizard-panel .form-control.error,
.signup-wizard-panel .error .form-control,
.signup-wizard-panel .select.error select,
.wizard-step .form-control.error,
.wizard-step .error .form-control,
.wizard-step .select.error select {
    border-color: var(--cm-danger) !important;
    background-color: #fdf2f2;
}

.signup-wizard-panel .form-control.error:focus,
.signup-wizard-panel .error .form-control:focus,
.wizard-step .form-control.error:focus,
.wizard-step .error .form-control:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-danger) 15%, transparent);
}

.signup-wizard-panel .form-control.success,
.signup-wizard-panel .success .form-control,
.wizard-step .form-control.success,
.wizard-step .success .form-control {
    border-color: var(--cm-green, #009688);
}

/* Checkbox Group */
.signup-wizard-panel .checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.signup-wizard-panel .checkbox-group .checkbox {
    background: #f8faf9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    margin: 0;
    transition: all 0.1s ease;
}

.signup-wizard-panel .checkbox-group .checkbox:hover {
    border-color: var(--cm-green, #009688);
    background: #f0f7f6;
}

.signup-wizard-panel .checkbox-group .checkbox label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    font-size: 14px;
}

.signup-wizard-panel .checkbox-group .checkbox input[type="checkbox"] {
    margin-right: 10px;
}

.checkbox-group .checkbox input[type="checkbox"]:checked + .input-helper + span,
.checkbox-group .checkbox input[type="checkbox"]:checked ~ span {
    color: var(--cm-green, #009688);
    font-weight: 500;
}

/* Other Input Wrapper */
.other-input-wrapper {
    grid-column: 1 / -1;
    padding-top: 5px;
}

.other-input-wrapper .fg-line {
    margin-bottom: 0;
}

.other-input-wrapper input {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 12px;
}

.other-input-wrapper input:focus {
    border-color: var(--cm-green, #009688);
}

/* Navigation Buttons */
.wizard-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.wizard-navigation .flex-spacer {
    flex: 1;
}

.wizard-navigation .btn {
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.1s ease;
}

.wizard-navigation .btn-default {
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
}

.wizard-navigation .btn-default:hover {
    background: #eee;
}

.wizard-navigation .btn-primary {
    background: var(--cm-btn-primary, #009688);
    border: none;
    color: white;
}

.wizard-navigation .btn-primary:hover {
    background: var(--cm-btn-primary-hover, #00796b);
}

.wizard-navigation .btn-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.wizard-navigation .btn-lg {
    padding: 14px 32px;
    font-size: 16px;
}

/* Success Panel */
.wizard-success {
    padding: 60px 20px;
}

.wizard-success .zmdi.jumbo {
    font-size: 80px;
    display: block;
}

.wizard-success h3 {
    margin-top: 20px;
    font-size: 28px;
}

.wizard-success p {
    color: #666;
    font-size: 16px;
}

/* Error Display */
.signup-wizard-panel .warning-box,
.signup-wizard-panel .info-box {
    margin-top: 15px;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .signup-wizard-container {
        padding: 20px 15px;
    }

    .signup-wizard-panel {
        padding: 25px 20px;
    }

    .signup-wizard-progress {
        margin-bottom: 25px;
    }

    .progress-step .step-number {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .progress-step .step-label {
        font-size: 10px;
    }

    .wizard-step h3 {
        font-size: 20px;
    }

    .checkbox-group {
        grid-template-columns: 1fr;
    }

    .wizard-navigation {
        flex-wrap: wrap;
        gap: 10px;
    }

    .wizard-navigation .btn {
        flex: 1;
        min-width: 120px;
    }
}

@media screen and (max-width: 480px) {
    .signup-wizard-language-selector {
        min-width: 120px;
    }

    .signup-wizard-progress::before {
        display: none;
    }

    .progress-step .step-label {
        display: none;
    }
}

/* Signup page body styles */
body.signup-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    min-height: 100vh;
}
.card.files-box .table-responsive,
.location-files .table-responsive,
.customer-files .table-responsive {
    overflow: visible !important;
}

i.file-placeholder {
    width: 32px;
    height: 32px;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: var(--cm-mid-gray);
}
img.file-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--cm-lines-color);
    cursor: pointer;
}
.spacer {
    flex-grow: 1;
}

/* RULES HERE */

.upgrade-modal .upgrade-plan ul {
    list-style: none;
    padding-left: 0;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upgrade-modal .upgrade-plan li {
    display: flex;
    border: 1px solid var(--cm-background-color);
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 40ch;
    cursor: default;
    transition: background 0.1s ease;
}

.upgrade-modal .upgrade-plan li:hover {
    background: var(--cm-yellow);
    color: black;
}

.upgrade-modal .upgrade-plan li i.zmdi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cm-background-color);
    color: var(--cm-green);
    font-size: 1em;
    flex-shrink: 0;
    transition: background 0.1s ease, color 0.1s ease;
}

.upgrade-modal .upgrade-plan li:hover i.zmdi {
    background: var(--cm-green);
    color: var(--cm-yellow);
}

/* Skeleton loading animation */
.skeleton-loading { padding: 8px 25px; }
.skeleton-line {
    height: 14px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.w-100 {
    width: 100% !important;
    align-items: stretch;
    align-content: stretch;
}

/* V3 template editor — modal body fills available height */
.modal-dialog.from-right.editor-modal-v3 .modal-content {
    display: flex;
    flex-direction: column;
}
.modal-dialog.from-right.editor-modal-v3 .modal-body {
    flex: 1;
    min-height: 0;
}


/* V3 TipTap Styles */

.tiptap-inline-editor .tiptap-base {
  width: 100%;
  min-height: 100%;
  box-shadow: 0 0 0 2px dodgerblue;
  background: transparent;
  cursor: text;
}

.tiptap-base a {
  color: inherit !important;
  text-decoration: none;
}
.tiptap-base a * {
  text-decoration: underline;
}

/* Bulleted list — visual indent must match the SVG renderer
   (cs2.text.measure/bullet-indent-px = 20). Use list-style-position:
   outside so the bullet sits in the indent gutter. */
.tiptap-base ul {
  list-style: disc outside;
  padding-left: 20px;
  margin: 0;
}
.tiptap-base ul li {
  margin: 0;
  padding: 0;
}
.tiptap-base ul li > p {
  margin: 0;
}

.variable-chip {
  display: inline;
  padding: 1px 4px;
  margin: 0 1px;
  background: rgba(59,130,246,0.1);
  border-radius: 2px;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  user-select: none;
  transition: background 0.1s ease, box-shadow 0.1s ease;
}
.variable-chip:hover {
  background: rgba(59,130,246,0.2);
  cursor: pointer;
}
.variable-chip.ProseMirror-selectednode {
  background: rgba(59,130,246,0.25);
  box-shadow: 0 0 0 2px #3b82f6;
}
.tiptap-inline-editor .ProseMirror {
  outline: none;
  min-height: 100%;
}

.tiptap-inline-editor .ProseMirror > *:first-child {
  /* Align TipTap first-line baseline with SVG rendering.
     --baseline-offset is a per-font em-ratio computed from canvas
     fontBoundingBoxAscent/Descent (set on .tiptap-base container). */
  margin-top: calc(var(--baseline-offset) * 1em);
}

.tiptap-inline-editor .ProseMirror * {
  text-rendering: geometricPrecision;
  margin: 0;
  /* Inherit from .tiptap-base container — overrides global p { font-size } rule */
  font-size: inherit;
  /* Match the SVG compositor line-height multiplier */
  line-height: calc(var(--sv-lh) * 1em);
  xletter-spacing: -0.01em;
}

/* V3 template editor — inline name input.
   The field has a persistent border + pen icon so it reads as editable
   at rest. The pen fades out while the input has focus. */
.ed3-template-name-field {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0 6px 0 0;
    background: white;
    transition: border-color 0.15s;
    cursor: text;
}
.ed3-template-name-field:hover {
    border-color: #d1d5db;
}
.ed3-template-name-field:focus-within {
    border-color: #6366f1;
}
.ed3-template-name-input {
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    border: none;
    border-radius: 4px;
    padding: 2px 6px;
    background: transparent;
    outline: none;
    width: 30ch;
}
.ed3-template-name-edit-icon {
    color: #9ca3af;
    font-size: 13px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.15s;
}
.ed3-template-name-field:focus-within .ed3-template-name-edit-icon {
    opacity: 0;
}

/* ---------------------------------------------------------------------------
   V3 Gallery — Ken Burns effect for .cm-gallery image blocks
   Images are stacked SVG <image> elements. JS cycles the active class.
   CSS handles the crossfade transition and subtle zoom animation.
   --------------------------------------------------------------------------- */

/* V3 Gallery — Ken Burns with crossfade
   Two composed animations: linear zoom/pan + eased fade in/out.
   JS adds .cm-gallery-active at staggered intervals for crossfade overlap. */

.cm-gallery-img {
    --kb-tx: -0.8%;
    --kb-ty: -0.6%;
    --kb-scale: 1.38;
    /* Centre origin gives an even buffer on every side when scaled, so
       the small Ken Burns translate never reveals a gap on any axis. */
    transform-origin: 50% 50%;
    opacity: 0;
}

.cm-gallery-img.cm-gallery-active {
    animation: cm-kb-move 7s linear forwards,
               cm-kb-fade 7s ease-in-out forwards;
}

/* Zoom/pan: linear throughout — always in motion. Scale anchor and
   magnitude are per-image (corner-locked images anchor scale to the
   locked edge to avoid revealing a gap as the image animates). */
@keyframes cm-kb-move {
    0%   { transform: scale(1.0) translate(0, 0); }
    100% { transform: scale(var(--kb-scale)) translate(var(--kb-tx), var(--kb-ty)); }
}

/* Fade: in during first 15%, hold, out during last 20% */
@keyframes cm-kb-fade {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   V3 Gallery — static mode (dots, arrows, fullscreen)
   --------------------------------------------------------------------------- */

.cm-v3-gallery-overlay {
    position: absolute;
    z-index: 3;
    overflow: hidden;
}
.cm-v3-gallery {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Arrows */
.cm-v3-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: background 0.15s;
}
.cm-v3-gallery__arrow:hover { background: #fff; }
.cm-v3-gallery__arrow--prev { left: 8px; }
.cm-v3-gallery__arrow--next { right: 8px; }
.cm-v3-gallery__arrow i { font-size: 18px; color: #333; }

/* Dots */
.cm-v3-gallery__dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.cm-v3-gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.1s;
}
.cm-v3-gallery__dot.active {
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.cm-v3-gallery__dot:hover { background: rgba(255,255,255,0.8); }

/* Fullscreen modal */
.cm-v3-fullscreen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000000;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cm-v3-fullscreen__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cm-v3-fullscreen__close:hover { background: rgba(255,255,255,0.4); }
.cm-v3-fullscreen__content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cm-v3-fullscreen .cm-v3-gallery__arrow {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.25);
}
.cm-v3-fullscreen .cm-v3-gallery__arrow:hover { background: rgba(255,255,255,0.4); }
.cm-v3-fullscreen .cm-v3-gallery__arrow i { font-size: 24px; color: #fff; }
.cm-v3-fullscreen .cm-v3-gallery__dot {
    width: 10px;
    height: 10px;
}
.cm-v3-fullscreen .cm-v3-gallery__dots { bottom: 16px; }

.product-grouped-view > p,
.product-grouped-view >  .card {
    margin-right: 20px;
    margin-left: 20px;
}
.product-grouped-view > .card:last-of-type {
    margin-bottom: 20px;
}

/* V3 customer view: pages scale to fit container width on narrow viewports.
   Native pinch-zoom remains available via the device-width viewport. */
.estimate-view--v3 svg {
    max-width: 100%;
    height: auto;
}
/* Clear the position:fixed floating-acceptance bar on desktop only.
   Below 900px the bar becomes position:static, so no spacer is needed. */
.estimate-view--v3__pages {
    margin-top: 140px;
}
@media screen and (max-width: 900px) {
    .estimate-view--v3__pages {
        margin-top: 16px;
    }
}

/* ---------------------------------------------------------------------------
   Brand-aligned button styles.
   Bootstrap 3.3.6 ships .btn-primary as blue and doesn't define
   .btn-secondary at all. Override globally so the buttons/* CLJS wrappers
   render the Catermonkey palette: brand green for primary CTAs, outlined
   neutral for secondary.
   --------------------------------------------------------------------------- */

.btn-primary {
    background-color: var(--cm-btn-primary);
    /* Brand green as the border: a hair darker than the fill keeps the edge crisp. */
    border-color:     var(--cm-green);
    color:            #fff;
    background-image: linear-gradient(to bottom, rgba(255,255,255,.07), transparent);
    box-shadow:       0 1px 2px rgba(13,46,50,.3);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--cm-btn-primary-hover);
    border-color:     var(--cm-green);
    color:            #fff;
}
.btn-primary:disabled,
.btn-primary[disabled] {
    background-color: #9ca3af;
    border-color:     #9ca3af;
    color:            #fff;
    cursor:           not-allowed;
    background-image: none;
    box-shadow:       none;
}

/* Defined once, here: a second definition in fonts.css lost the cascade and
   only confused reading. Palette greys, so a secondary button, a label and a
   column heading share one grey. */
.btn-secondary {
    background-color: var(--cm-white);
    border:           1px solid var(--cm-lines-color);
    color:            var(--cm-table-heading-color);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--cm-table-heading-bg-color);
    border-color:     var(--cm-nav-color);
    color:            var(--cm-font-color);
}
.btn-secondary:disabled,
.btn-secondary[disabled] {
    color:  #9ca3af;
    cursor: not-allowed;
}

/* A disabled row is wrapped in cs2.tooltip's inline <span> trigger; the rows
   must stay full-width blocks either way. */
.add-block-menu > span {
    display: block;
}
.add-block-option {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     6px 12px;
    font-size:   12px;
    color:       #374151;
    cursor:      pointer;
    white-space: nowrap;
    transition:  background 120ms;
}
.add-block-option:hover {
    background: #f3f4f6;
}
.add-block-option .add-block-option-icon {
    width:           16px;
    font-size:       16px;
    color:           #6b7280;
    text-align:      center;
    flex-shrink:     0;
}
.add-block-option:hover .add-block-option-icon {
    color: #374151;
}
.add-block-option.is-disabled,
.add-block-option.is-disabled:hover {
    background: transparent;
    color:      #d1d5db;
    cursor:     default;
}
.add-block-option.is-disabled .add-block-option-icon {
    color: #e5e7eb;
}

/* Template library modal cards (cs2.panels.estimates.editor3.template-library) */
.cm-tlib-card {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    gap:            8px;
    padding:        12px;
    border:         1px solid #e5e7eb;
    border-radius:  8px;
    background:     #fff;
    cursor:         pointer;
    transition:     border-color 120ms ease,
                    box-shadow   120ms ease,
                    transform    120ms ease;
}
.cm-tlib-card:hover {
    border-color: var(--cm-green, #22c55e);
    box-shadow:   0 4px 14px rgba(15, 23, 42, 0.10);
    transform:    translateY(-1px);
}
.cm-tlib-card__label {
    font-size:   13px;
    font-weight: 500;
    color:       #374151;
    display:     flex;
    align-items: center;
}
.cm-tlib-card:hover .cm-tlib-card__label {
    color: #111827;
}

/* ============================================================================
   Modern monthly calendar (Mariska / Canva design study)
   Spacious month-overview look: floating rounded day blocks, an airy
   full-width navigation bar with a "this month" shortcut, and rounded green
   weekday pills. Enabled per calendar via :modern? true and scoped to
   .cm-calendar-modern so the compact form date-pickers stay untouched.
   ============================================================================ */

.cm-calendar-modern.datepicker {
    font-size: 14px !important;
}

.cm-calendar-modern.datepicker .table-condensed {
    border-collapse: separate;
    border-spacing: 10px;
    width: 100%;
}

/* --- Navigation bar (month name, year stepper, prev/next, this-month) --- */
/* The global `table thead tr` rule tints every header row; the nav bar must
   stay on the plain white calendar background, so clear it on the row itself
   (clearing only the th lets the row colour bleed through). */
.cm-calendar-modern table thead tr:first-child {
    background-color: transparent;
}

.cm-calendar-modern table thead tr:first-child th.cm-cal-navbar {
    background-color: transparent;
    border: none;
    padding: 0 0 6px 0;
    cursor: default;
}

.cm-calendar-modern .cm-cal-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.cm-calendar-modern .cm-cal-nav-left {
    display: flex;
    align-items: center;
    justify-self: start;
}

.cm-calendar-modern .cm-cal-nav-center {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: center;
}

.cm-calendar-modern .cm-cal-nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
}

/* Reuse the weekview's circular pagination arrows for prev/next month; drop
   bootstrap's default vertical margin so they sit centered in the nav bar. */
.cm-calendar-modern .cm-cal-nav .pagination {
    margin: 0;
}

.cm-calendar-modern .cm-cal-month {
    font-size: 22px;
    font-weight: 600;
    color: var(--cm-font-color);
}

.cm-calendar-modern .cm-cal-year {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cm-calendar-modern .cm-cal-year-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--cm-font-color);
    min-width: 3ch;
    text-align: center;
}


.cm-calendar-modern .cm-cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-green);
    line-height: 1;
    appearance: none;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.cm-calendar-modern .cm-cal-nav-btn:hover:not(:disabled) {
    background-color: var(--cm-green);
    color: var(--cm-white);
}

.cm-calendar-modern .cm-cal-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.cm-calendar-modern .cm-cal-nav-btn .zmdi {
    font-size: 22px;
    line-height: 1;
}

.cm-calendar-modern .cm-cal-year .cm-cal-nav-btn {
    width: 30px;
    height: 30px;
}

.cm-calendar-modern .cm-cal-year .cm-cal-nav-btn .zmdi {
    font-size: 16px;
}

/* --- Weekday header pills --- */
.cm-calendar-modern table thead tr:last-child:not(:only-child) {
    background-color: transparent;
}

.cm-calendar-modern th.day-enabled {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-heading-color);
    border: none;
    border-radius: 8px;
    padding: 10px 4px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    cursor: default;
}

.cm-calendar-modern th.cm-cal-week-head {
    background-color: transparent;
    border: none;
}

/* --- Day cells --- */
/* A cell's ring colour is a variable, not a border declaration, because the
   first row has to restore its top border with `!important` (see below). A
   state that set `border-color` directly would lose that one edge and colour
   only three sides of every cell in the top row. */
.cm-calendar-modern.datepicker .table-condensed td {
    --cm-cal-cell-border: var(--cm-lines-color);
    border: 1px solid var(--cm-cal-cell-border);
    border-radius: 8px;
    background-color: #fff;
    vertical-align: top;
    height: 92px;
    padding: 8px;
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

/* The base table CSS strips the top border off the first row with
   `border-top: medium !important`; restore it so the top row of day blocks
   has a full rounded border like every other row. Reading the variable is what
   keeps this in step with the state rules despite the `!important`. */
.cm-calendar-modern.datepicker .table-condensed tbody tr:first-of-type td {
    border-top: 1px solid var(--cm-cal-cell-border) !important;
}

.cm-calendar-modern.datepicker .table-condensed td.available:not(.off):hover {
    --cm-cal-cell-border: var(--cm-light-green);
    box-shadow: 0 2px 8px rgba(19, 60, 65, 0.08);
}

.cm-calendar-modern.datepicker .table-condensed td.off,
.cm-calendar-modern.datepicker .table-condensed td.available.off {
    --cm-cal-cell-border: #efefef;
    background-color: var(--cm-very-light-gray);
    color: var(--cm-nav-color);
}

/* Today draws ONE ring. The border and an `inset 0 0 0 1px` of the same colour
   stack into a 2px edge that a fractional device-pixel-ratio smears into a
   halo, so the ring is the border and the fill is what marks the day. */
.cm-calendar-modern.datepicker .table-condensed td.today {
    --cm-cal-cell-border: var(--cm-light-green);
    background-color: #f4f9f8;
}

/* Week-number column cells */
.cm-calendar-modern.datepicker .table-condensed td.week {
    width: 28px;
    height: auto;
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--cm-nav-color);
    font-size: 11px;
    vertical-align: middle;
}

/* --- Day-cell content --- */
.cm-calendar-modern .day-cell-wrapper {
    height: 100%;
}

.cm-calendar-modern .monthly-day-cell .day-number,
.cm-calendar-modern .ow-date {
    font-weight: 600;
    color: var(--cm-font-color);
}

/* Plain, compact day number for the occupancy calendars (drop the bordered
   circle so it matches the airy month-overview look). */
.cm-calendar-modern .ow-date {
    width: auto;
    height: auto;
    margin: 0 0 4px 0;
    padding: 0;
    border: none;
    text-align: center;
}

.cm-calendar-modern .ow-wrap {
    padding: 0;
}

.cm-calendar-modern .ow-location {
    border-radius: 4px;
}

/* ===== Customer CRM pipeline board ===== */
.pipeline-board { width: 100%; padding: 4px 16px 16px; }

.pipeline-upsell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 40px 24px;
}
.pipeline-upsell-text { flex: 1 1 280px; max-width: 460px; }
.pipeline-upsell-text h4 { margin-top: 0; }
.pipeline-upsell-text p { color: #607d8b; margin-bottom: 16px; }
.pipeline-upsell-img {
    flex: 1 1 360px;
    max-width: 560px;
    width: 100%;
    height: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.pipeline-board-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.pipeline-board-header .flex-grow { flex: 1; }
.pipeline-pipeline-select select.form-control { min-width: 220px; }
.pipeline-switcher-trigger {
    display: inline-flex;
    align-items: center;
    min-width: 220px;
    justify-content: space-between;
    font-weight: 600;
}
.pipeline-switcher-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Scrollable list of pipelines — large click rows, can't be clipped (portaled). */
.pipeline-switcher-menu {
    display: flex;
    flex-direction: column;
    min-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
}
.pipeline-switcher-option {
    border: none;
    background: transparent;
    text-align: left;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #37474f;
    white-space: nowrap;
}
.pipeline-switcher-option:hover { background: #eceff1; }
.pipeline-switcher-option.is-active { background: #e8eaf6; font-weight: 600; }

.pipeline-empty {
    background: #fff;
    border: 1px dashed #cfd8dc;
    border-radius: 6px;
    text-align: center;
}

.pipeline-lanes {
    display: flex;
    gap: 12px;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: 12px;
}

.pipeline-lane {
    flex: 0 0 272px;
    width: 272px;
    background: #eceff1;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    /* Dragging a card starts a native text selection (re-dnd's mousedown doesn't
       preventDefault), and the browser auto-scrolls .pipeline-lanes toward the
       selection anchor — so the board jumps the moment you start dragging. With
       nothing selectable there's no selection to chase. */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    /* Always fill down to (near) the bottom of the viewport so the board
       reads as full-height swimlanes; the lane body scrolls internally. */
    height: calc(100vh - 270px);
    min-height: 320px;
}
.pipeline-lane.is-unassigned { background: #e8eaf6; }

.pipeline-lane-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    font-weight: 600;
    color: #37474f;
    border-bottom: 1px solid #dde3e6;
}
.pipeline-lane-header .pipeline-lane-name { flex: 1 1 auto; }
.pipeline-lane-collapse { cursor: pointer; color: #90a4ae; }
.pipeline-lane-collapse:hover { color: #37474f; }

/* Collapsed lane: thin vertical strip with the name rotated 90° */
.pipeline-lane.is-collapsed {
    flex: 0 0 34px;
    width: 34px;
    cursor: pointer;
    align-items: center;
    padding: 10px 0;
    gap: 10px;
}
.pipeline-lane.is-collapsed:hover { background: #e2e6e9; }
.pipeline-lane.is-collapsed.is-unassigned:hover { background: #dfe2f1; }
.pipeline-lane-expand { color: #90a4ae; }
.pipeline-lane-collapsed-name {
    writing-mode: vertical-rl;
    font-weight: 600;
    color: #37474f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(100% - 56px);
}
.pipeline-lane-count {
    background: #cfd8dc;
    color: #37474f;
    border-radius: 10px;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 600;
}
/* In a collapsed lane the strip is only 34px wide, so a 2+ digit count
   (10, 100, 100+) would spill outside it. Shrink the badge to fit. */
.pipeline-lane.is-collapsed .pipeline-lane-count {
    max-width: 32px;
    box-sizing: border-box;
    padding: 1px 4px;
    font-size: 10px;
    text-align: center;
}

.pipeline-lane-body { flex: 1 1 auto; padding: 8px; overflow-y: auto; }
/* the drop-zone fills the lane body so the whole lane is a drop target */
.pipeline-lane-body .drop-zone {
    min-height: 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pipeline-lane-dropfill { min-height: 40px; flex: 1 1 auto; }

/* Neutralise re-dnd's bootstrap row/col layout inside a narrow lane */
.pipeline-lane .dropped-element.row { display: flex; margin: 0 0 8px 0; }
.pipeline-lane .dropped-element .drag-handle.col-md-1 {
    width: auto;
    min-width: 22px;
    padding: 0;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: #90a4ae;
}
.pipeline-lane .dropped-element .dropped-element-body.col-md-11 {
    width: auto;
    flex: 1;
    padding: 0;
    float: none;
}
.pipeline-card-grip { font-size: 18px; line-height: 1; }

.pipeline-card {
    background: #fff;
    border-radius: 5px;
    border-left: 4px solid #b0bec5;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
    padding: 9px 11px;
}
.pipeline-card.status-won  { border-left-color: #43a047; }
.pipeline-card.status-lost { border-left-color: #e53935; }

.pipeline-card-title { font-weight: 600; color: #263238; }
.pipeline-card-sub { font-size: 12px; color: #607d8b; }
.pipeline-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #78909c;
    margin-top: 3px;
}
.pipeline-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

/* Compact customer tags on a card (reuses tag-box rendering) */
.pipeline-card-tags { margin-top: 6px; }
.pipeline-card-tags .tag-box-wrap { margin: 0; padding: 0; min-height: 0; border: none; }
.pipeline-card-tags .tag-box { display: flex; flex-wrap: wrap; gap: 3px; }
.pipeline-card-tags .tag-wrap { margin: 0; }
.pipeline-card-tags .tag {
    font-size: 10px;
    line-height: 1.4;
    padding: 1px 7px;
    margin: 0;
}

.pipeline-lane-more {
    font-size: 11px;
    color: #90a4ae;
    text-align: center;
    padding: 6px 4px 2px;
}

.pipeline-status-badge {
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    padding: 1px 7px;
    background: #eceff1;
    color: #546e7a;
}
.pipeline-status-badge.is-won  { background: #e8f5e9; color: #2e7d32; }
.pipeline-status-badge.is-lost { background: #ffebee; color: #c62828; }

.pipeline-card-actions { display: flex; gap: 4px; }
.pipeline-card-action {
    border: none;
    background: transparent;
    color: #90a4ae;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
}
.pipeline-card-action:hover { background: #eceff1; }
.pipeline-card-action.is-won:hover        { color: #2e7d32; }
.pipeline-card-action.is-lost:hover       { color: #c62828; }
.pipeline-card-action.is-remove:hover     { color: #c62828; }
.pipeline-card-action.is-move-stage:hover { color: #3949ab; }

/* Click-to-move stage menu (inside a click-popover) */
/* Cap the menu height and let the stage list scroll: for a card near the bottom
   of a tall column, a pipeline with many stages produced a menu taller than the
   viewport whose off-screen options were unreachable (CAT-1345). The popover
   already flips above/below and clamps horizontally; this keeps every stage
   reachable regardless of the card's position. Scoped to this class so no other
   click-popover (pipeline switcher, tooltips) is affected. */
.pipeline-card-move-menu { display: flex; flex-direction: column; min-width: 160px;
    max-height: 60vh; overflow-y: auto; }
.pipeline-card-move-title {
    font-size: 11px;
    color: #90a4ae;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 8px 5px;
}
.pipeline-card-move-option {
    border: none;
    background: transparent;
    text-align: left;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #37474f;
    white-space: nowrap;
}
.pipeline-card-move-option:hover { background: #eceff1; }

.pipeline-card-marker {
    height: 3px;
    background: #5c6bc0;
    border-radius: 2px;
    margin: 0 0 8px 0;
}

.pipeline-manage-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.pipeline-manage-row.is-active .form-control { border-color: #5c6bc0; }
.pipeline-manage-stages { margin-top: 6px; }

.pipeline-filter-bar { display: inline-flex; align-items: center; }
.pipeline-qb { max-width: 100%; }
.pipeline-qb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 10px;
}
.pipeline-qb-row > .select { flex: 0 0 auto; width: 170px; }
.pipeline-qb-value { flex: 1 1 240px; min-width: 0; }
.pipeline-qb-value > .form-control,
.pipeline-qb-value > .select { width: 100%; }
.pipeline-qb-value .tag-box-wrap { display: flex; flex-wrap: wrap; gap: 4px; }
.pipeline-qb-save { flex-wrap: wrap; align-items: center; }
.pipeline-qb-save .form-control { flex: 1 1 200px; min-width: 0; }
.pipeline-qb-or { color: #90a4ae; white-space: nowrap; }
.pipeline-card-age { margin-left: auto; color: #b0bec5; }

/* Customer-editor pipeline panel: keep the pipeline/stage selects wide enough
   that names like "Leads" aren't truncated. Two 180px selects plus a "move here"
   button is wider than the editor pane on a tablet, and the status row carries
   up to four buttons, so both rows wrap rather than running past the card. */
.pipeline-editor-controls,
.pipeline-editor-status { flex-wrap: wrap; }
.pipeline-editor-controls > .select { flex: 0 0 auto; min-width: 180px; }
.pipeline-editor-controls > .select > .form-control { width: 100%; }

.pipeline-qb-view-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
}

/* Meal-service menu template: "Copy day" helper. One button per weekday that
   has rows; clicking opens an inline popover with checkboxes for the other
   weekdays to duplicate that day's rows onto. */
.menu-copy-day {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 4px 30px;
}
.menu-copy-day__item {
    position: relative;
}
.menu-copy-day__popover {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    padding: 12px 14px;
    background: var(--cm-white);
    border: 1px solid var(--cm-light-gray);
    border-radius: var(--cm-border-radius);
    box-shadow: 0 4px 14px rgba(13, 46, 50, 0.18);
}
.menu-copy-day__popover-title {
    font-weight: 600;
    color: var(--cm-font-color);
    margin-bottom: 8px;
}
.menu-copy-day__days {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.menu-copy-day__day {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}
.menu-copy-day__day input { margin: 0; }
.menu-copy-day__actions {
    display: flex;
    gap: 8px;
}

/* ===========================================================================
   Editor left-nav layout shell (`cm-editor-*`), gated per-tenant.
   Introduced for the customer editor (CAT-1476) and shared with the product
   editor: one section at a time, nav down the left, content beside it. The
   `cm-` classes are the layout; anything specific to one editor keeps its own
   class (`.customer-notes-panel`, `.customer-editor-merged-section-title`, …).
   The editor takes a three-fourths drawer and shows ONE section at a time: the
   section nav runs down the left, the selected section's content fills the
   rest. It is wider than the classic editor's two-thirds because the nav strip
   is fixed overhead that the content pane does not get back. Layout only — the nav entries, the section content and the
   footer controls are the same components the classic editor uses.
   Every rule is scoped to .cm-editor-nav-layout so it never affects the
   classic single-column editor or any other modal.
   =========================================================================== */

/* The drawer's base rules scroll the whole panel, header included. This layout
   scrolls its two panes instead, so the panel itself must not scroll: the body
   would then be sized to the panel's full height *below* the header, and the
   overhang — which carries the save/copy footer — falls past the viewport with
   no way to reach it. Lay the panel out as a column so the body takes exactly
   what the header leaves.
   Scoped through :has() on this layout's own class, at (0,4,0), so every other
   drawer keeps the base rules untouched — see docs/modal-patterns.md. */
.modal-dialog.from-right:has(.cm-editor-nav-layout) .modal-content {
    display: flex;
    flex-direction: column;
    overflow-y: hidden !important;
}

.modal-dialog.from-right:has(.cm-editor-nav-layout) .modal-header {
    flex: 0 0 auto;
}

/* Host a flex row so the two panes scroll independently. */
.modal-body:has(.cm-editor-nav-layout) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.cm-editor-nav-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

/* LEFT — the section nav, scrolls on its own so it stays put while a long
   section scrolls beside it. */
.cm-editor-nav-pane {
    flex: 0 0 160px;
    max-width: 160px;
    min-height: 0;
    padding: 16px 0 20px 22px;
    overflow-y: auto;
}

/* The section dropdown replaces this nav below the breakpoint. */
.cm-editor-nav-select {
    display: none;
}

/* Turn the shared horizontal tab strip into a vertical list: one entry per row,
   each separated by a divider, the selected one marked by the strip's existing
   green underline (.tab-nav li.active > a::after). */
.cm-editor-nav-pane .cm-editor-tab-nav {
    white-space: normal;
    overflow: visible;
    box-shadow: none;
}

.cm-editor-nav-pane .cm-editor-tab-nav > li {
    display: block;
    width: 100%;
}

.cm-editor-nav-pane .cm-editor-tab-nav > li > a {
    display: block;
    padding: 11px 12px 11px 0;
    border-bottom: 1px solid var(--cm-lines-color);
    /* In a narrow column the entries read as section headings, not as a compact
       strip of tabs: sentence case, and free to wrap. */
    text-transform: none;
    font-size: 15px;
    white-space: normal;
}

.cm-editor-nav-pane .cm-editor-tab-nav > li.active > a {
    color: var(--cm-font-color);
    font-weight: 600;
}

/* RIGHT — the selected section, fills the remaining width. */
.cm-editor-content-pane {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 26px 20px;
}

/* FOOTER — the panel's third flex row, so Cancel/Save stay put while the
   section scrolls. Same values as `.cm-action-modal .cm-modal-foot`: this bar is
   built by `action-modal/footer`, so it should read identically to the
   order-overview one. Scoped to this layout — no other `modal-box-fixed-right`
   passes a :footer, and the base rules stay untouched. */
.modal-dialog.from-right:has(.cm-editor-nav-layout) .cm-modal-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--cm-lines-color);
    background-color: var(--cm-white);
    padding: 14px 20px;
}

/* CAT-1219: section heading inside a merged section (Documents = Notes+Files,
   Dietary = Allergens+Diets). Keeps it clear which sub-section is which. */
.cm-editor-content-pane .customer-editor-merged-section-title {
    margin: 8px 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cm-font-color);
}

/* --- Narrow screens: a fixed nav column beside the content leaves too little of
   either, so the panes stack and the nav becomes a dropdown. A horizontal strip
   was the earlier fallback, but at this width it pushes the later sections off
   the right-hand edge, where they read as if they don't exist.

   900, matching `cs2.components.editor-layout/narrow-max-width` and the app's
   burger cutoff: no iPad has the width for a nav column beside a content pane in
   portrait, and the ones above 768 (810, 820, 834) were getting the two-column
   layout with the pane off the right edge. --- */
@media screen and (max-width: 900px) {
    .modal-body:has(.cm-editor-nav-layout) {
        overflow-y: auto;
    }
    /* Give the title the header's full width: at this size it wraps to four
       lines around the save button. Dropping the button here costs nothing —
       the pinned footer carries the same action a thumb's reach away. */
    .customer-editor-title-save {
        display: none;
    }
    .cm-editor-nav-layout {
        flex-direction: column;
    }
    .cm-editor-nav-pane {
        flex: 0 0 auto;
        max-width: none;
        padding: 14px 12px 0;
        overflow: visible;
    }
    /* The list and the dropdown are the same sections; show exactly one. */
    .cm-editor-nav-pane .cm-editor-tab-nav {
        display: none;
    }
    .cm-editor-nav-select {
        display: block;
    }
    .cm-editor-content-pane {
        overflow: visible;
        padding: 16px 12px 20px;
    }
    /* Reflow any two-column <table> form inside the section (the classic
       customer-table, used for a company's sub-contacts) so nothing falls off a
       narrow screen. A table won't shrink below its intrinsic width, so the
       input column gets pushed past the viewport and is clipped. Collapse it to
       a stacked block layout: the label sits above its input, and every field
       spans the pane width and wraps. Scoped to the content pane so the classic
       editor (every other tenant) is untouched.

       A data grid (`.bootgrid-table`) is a table of records, not a form: its
       header row is what makes the columns legible, and stacked it becomes a
       column of unlabelled cells with an empty commands cell per row. Those
       keep their rows and get their own treatment below. */
    .cm-editor-content-pane table.table:not(.bootgrid-table),
    .cm-editor-content-pane table.table:not(.bootgrid-table) > tbody,
    .cm-editor-content-pane table.table:not(.bootgrid-table) > tbody > tr {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .cm-editor-content-pane table.table:not(.bootgrid-table) > tbody > tr > td {
        display: block;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    /* The label cell (first td, .p-t-20) now stacks above its input cell; trim
       its top padding so each label/input pair reads as one tight group. */
    .cm-editor-content-pane table.table:not(.bootgrid-table) > tbody > tr > td.p-t-20 {
        padding-top: 14px;
        padding-bottom: 2px;
    }
    /* Keep every control inside the pane — inputs, selects, textareas and
       rich-text editors all cap at full width. Not `.row`: its negative
       margins are the counterpart of its columns' padding, and capping it
       leaves every paired field 30px short of its single-column siblings. */
    .cm-editor-content-pane input,
    .cm-editor-content-pane select,
    .cm-editor-content-pane textarea,
    .cm-editor-content-pane .form-control {
        max-width: 100%;
    }
    /* The orders grid has three text columns and a commands column, so it
       fits the pane once its cells may wrap; fixed layout as well, or a
       mobile browser sizes its layout viewport to the table's preferred
       width and zooms the page out. The invoices grid reuses the invoice
       overview's full column set and scrolls sideways instead, inside
       `.table-responsive`, which already paints scroll shadows at 640px. */
    .cm-editor-content-pane .customer-orders-grid .bootgrid-table {
        table-layout: fixed;
    }
    .cm-editor-content-pane .customer-orders-grid .bootgrid-table > tbody > tr > td {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    /* Header cells keep bootgrid's nowrap and paint over their neighbour
       once a fixed column is narrower than its title. */
    .cm-editor-content-pane .customer-orders-grid .bootgrid-table > thead > tr > th {
        white-space: normal;
    }
    .cm-editor-content-pane .customer-orders-grid .bootgrid-table > thead > tr > th.commands,
    .cm-editor-content-pane .customer-orders-grid .bootgrid-table > tbody > tr > td.commands {
        width: 44px;
    }
    .cm-editor-content-pane .customer-invoices-grid .table-responsive {
        overflow-x: auto;
    }
    /* The datagrid toolbar is pinned over the header band's right end, where
       the last column reserves room for it. Once the table scrolls sideways
       that column is off-screen and the buttons float over whichever title
       happens to be under them, so here the toolbar takes a row of its own
       above the table and the header band gives its reserved room back. */
    .cm-editor-content-pane .customer-invoices-grid .dg-toolbar {
        position: static;
        justify-content: flex-end;
        height: auto;
        padding: 0 0 8px;
    }
    .cm-editor-content-pane .customer-invoices-grid .dg-grid-wrap.has-toolbar thead th {
        height: auto;
    }
    .cm-editor-content-pane .customer-invoices-grid .dg-grid-wrap.has-toolbar table thead tr th:last-child {
        padding-right: 30px !important;
    }
    /* An activity entry floats its who-and-when to the right of the
       description; once the description wraps, the last line runs into it.
       On a phone the meta gets a line of its own under the text. */
    .cm-editor-content-pane .activity-log-table small.pull-right {
        float: none !important;
        display: block;
        margin-top: 4px;
    }
    /* Flex field groups (salutation + first/last name, spouse, SEPA actions…)
       wrap onto the next line instead of overflowing horizontally. */
    .cm-editor-content-pane .flex {
        flex-wrap: wrap;
    }
}

/* --- Location editor -------------------------------------------------------
   A two-column label/input table. A table won't shrink below its intrinsic
   width, so below the tablet breakpoint the input column is pushed past the
   viewport; it stacks instead — label above input, every field the modal's
   width — the same reflow the customer editor's classic table gets above. */
@media screen and (max-width: 900px) {
    .location-editor table.table,
    .location-editor table.table > tbody,
    .location-editor table.table > tbody > tr {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .location-editor table.table > tbody > tr > td {
        display: block;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .location-editor table.table > tbody > tr > td.p-t-20 {
        padding-top: 14px;
        padding-bottom: 2px;
    }
    /* The rule between rows stays on the row's first cell only; on the input
       cell it would draw a line between a label and its own input. */
    .location-editor table.table > tbody > tr > td + td {
        border-top: 0;
    }
    /* Paired fields (zipcode + city, phone + mobile) stack; keep the gap the
       single fields have between them. */
    .location-editor .row > [class*="col-"] + [class*="col-"] {
        margin-top: 10px;
    }
    .location-editor .form-control {
        max-width: 100%;
    }
}

/* ===========================================================================
   CAT-1220 — General pane re-bucketed into 4 collapsible cards (redesign,
   gated per-tenant). The cards themselves are plain `expandable-card`s now, so
   only the field layout inside them lives here — label above control. Scoped to
   .customer-editor-cards so no other screen is affected.
   =========================================================================== */

.customer-editor-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The notes panel indents its own body by 30px, which suits the classic Notes
   tab. In the redesign it sits under a section title that has no such indent —
   and beside the Files panel, which has none either — so the body hung to the
   right of its own heading. Scoped to the notes panel so nothing else that uses
   the padding utility is touched. */
.cm-editor-content-pane .customer-notes-panel > .p-l-30.p-r-30 {
    /* !important because the p-l-30 / p-r-30 utilities are themselves
       !important (app.1.min.css), so specificity alone cannot win. */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Panels carry their own vertical margins from the days they were stacked in a
   column. In a pane they only push the first card down by an amount that
   differs per panel, which is what makes one tab look misaligned against the
   next. The pane owns the spacing; its first child starts at the top. */
.cm-editor-content-pane > *:first-child,
.cm-editor-content-pane > *:first-child > *:first-child,
.customer-editor-cards > .m-t-20,
.customer-editor-cards > .m-b-20 {
    margin-top: 0;
}

/* Inside its card the pipeline panel's own heading would repeat the card title,
   and its top margin doubles the card's padding. The classic editor's Pipeline
   tab has no card, so it keeps both. */
.cm-editor-content-pane .card-body .pipeline-editor-panel {
    margin-top: 0;
}

.cm-editor-content-pane .card-body .pipeline-editor-panel > h5 {
    display: none;
}

/* --- Form rhythm ----------------------------------------------------------
   One shape for every form in an editor pane: label above control, fields
   stacked by the container's `gap` rather than by margins of their own. The
   container owning the spacing is what makes it consistent — two adjacent
   fields cannot double or collapse a margin neither of them sets, and a card
   that stacks its fields in a wrapper div inherits the same step.
   --------------------------------------------------------------------------- */
.cm-editor-content-pane .card-body,
.cm-editor-content-pane .card-body > .m-t-20 {
    display: flex;
    flex-direction: column;
    gap: var(--cm-form-field-gap);
}

/* The wrapper's own top margin would sit on top of the card's padding. */
.cm-editor-content-pane .card-body > .m-t-20 {
    margin-top: 0 !important;
}

/* Field layout inside the re-bucketed General cards: label above control. */
.rb-field {
    padding: 0;
}

.rb-field-inline {
    display: flex;
    align-items: center;
    /* CAT-1220 addendum (Mariska): left-align the option boxes (type
       person/company, salutation, newsletter, review-mail, meal service) right
       after their label, instead of pushing them to the far right. */
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.rb-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
}

.rb-grow {
    flex: 1 1 0;
    min-width: 0;
}

/* Customer account card: stack the "provide login details" button below the
   widget dropdown (CAT-1220), instead of the classic side-by-side row. */
.rb-account .login-chooser {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* ===========================================================================
   CAT-1221 — Contacts tab (redesign, company customers). A header row with the
   section title + "Add contact", a search box, then one collapsible card per
   contact person. Expanding a card reveals the nested .customer-editor-cards
   sub-editor. Scoped to .rb-contacts so no other screen is affected.
   =========================================================================== */

.rb-contacts {
    padding-top: 4px;
}

.rb-contacts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rb-contacts-title {
    margin: 0;
    font-size: var(--cm-h4-font-size);
    font-weight: 600;
    color: var(--cm-font-color);
}

.rb-contacts-search {
    margin: 12px 0 16px;
}

.rb-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rb-contact-item {
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-card-border-radius);
    background: var(--cm-white);
    overflow: hidden;
}

.rb-contact-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
}

.rb-contact-item-name {
    font-size: var(--cm-h4-font-size);
    font-weight: 600;
    color: var(--cm-font-color);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-contact-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.rb-contact-item-delete {
    padding: 0;
    color: var(--cm-mid-gray);
}

.rb-contact-item-delete:hover,
.rb-contact-item-delete:focus {
    color: var(--cm-danger);
}

.rb-contact-item-body {
    padding: 4px 16px 16px;
}

/* The nested sub-editor already has its own vertical rhythm; drop the extra
   top padding so it tucks under the contact header cleanly. */
.rb-contact-item-body .customer-editor-cards {
    padding-top: 0;
}

/* Order-level charges editor (CAT-1011) — the block between the discount
   editor and the totals in the order edit grid. US tenants only. The rows
   live in their own drop-zone and reuse the product-edit-row cell layout,
   so the columns line up with the product lines above. */
.order-charges-editor {
    margin: 10px 0;
}

.order-charges-editor .charges-title {
    margin: 0 0 6px 50px;
}

.order-charges-editor .charge-row {
    margin-bottom: 4px;
}

.order-charges-editor .select {
    margin: 0;
}

.order-charges-editor .select select.form-control {
    width: 100%;
}

/* compact selects in the qty ("%"/"$"/"p.p.") and tax ("No tax") columns —
   trim the theme's select padding so the labels fit the narrow cells */
.order-charges-editor .charge-row .quantity-cell select.form-control,
.order-charges-editor .charge-row .product-tax-rate-cell select.form-control {
    padding-left: 5px;
    padding-right: 14px;
    text-overflow: ellipsis;
}

.order-charges-editor .add-charge-row {
    margin: 4px 0 0 89px;
    width: 200px;
}

/* Hint under a datagrid header filter that is too short to search on
   (see cs2.panels.invoices.handlers/search-min-chars). */
.table-header-filter .header-filter-hint,
.header-filter-hint {
    display: block;
    margin-top: 4px;
    line-height: 1.3;
    color: #888;
    font-style: italic;
}

/* ---------------------------------------------------------------------------
   Quotes list
   --------------------------------------------------------------------------- */
.quotes-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Status reads as a badge rather than a word in a column of words, so a run of
   rows can be scanned by colour. */

.quote-status-sent     { background: var(--cm-status-reminded-bg); color: var(--cm-status-reminded); }
.quote-status-accepted { background: #d8efdd; color: #2c7a44; }
.quote-status-concept  { background: #eceff1; color: #6a747c; }
/* Filed, not failed — a quote nobody answered is closed rather than deleted, so
   it reads as settled-and-done rather than as an error. */
.quote-status-declined { background: #f2e6e6; color: #8f5252; }
/* A quote sent and unanswered for a fortnight is the one worth chasing — the
   whole point of the column. */
.quote-stale {
    color: var(--cm-orange, #e8833a);
    font-weight: 600;
}
/* Whether the customer ever opened the quote. Never-opened is the cue that
   earns a nudge, so it is the one that carries colour. */
.quote-unopened {
    color: var(--cm-orange, #e8833a);
    font-weight: 600;
    white-space: nowrap;
}
.quote-opened {
    white-space: nowrap;
}
.quote-opened .text-muted {
    color: #999;
}

/* View tabs. A filter shortcut strip, not page navigation — styled flat so it
   reads as part of the table rather than competing with the card header. */
.cm-view-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--cm-lines-color, #e0e0e0);
    margin-bottom: 12px;
    /* The travelling underline is absolute against the strip. */
    position: relative;
    --cm-tab-underline-color: var(--cm-dark-green);
}

/* The strip's tabs carry a 2px marker, not the switcher's 3px. */
.cm-view-tabs .cm-tab-underline {
    height: 2px;
}
.cm-view-tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    /* The button register (13px): a tab is a control, not a heading. */
    font-size: 13px;
    color: var(--cm-table-heading-color);
    cursor: pointer;
}
.cm-view-tab:hover {
    color: var(--cm-font-color);
}
/* `--cm-primary-color` is not a token this app defines, so this rendered its
   fallback: an off-brand blue. The active tab takes the same dark green as the
   count pill it sits beside. */
/* The border stays transparent: the travelling `.cm-tab-underline` draws the
   marker now, and both showing would double it. */
.cm-view-tab.is-active {
    color: var(--cm-dark-green);
    font-weight: 600;
}
/* Secondary to the label — the tab is the thing you click, the count only
   tells you how much is behind it. */
.cm-view-tab-count {
    margin-left: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--cm-table-heading-color);
    /* A pill, so the number reads as a badge on the tab rather than as a second
       word in its label. min-width keeps 1- and 4-digit counts the same shape.

       Filled with a neutral grey, not `--cm-table-heading-bg-color`: the strip
       sits on a white card, and that token is ~3% off white — a pill nobody can
       see. */
    display: inline-block;
    min-width: 1.9em;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: var(--cm-neutral-gray);
    text-align: center;
    line-height: 1.5;
}

/* The active tab's pill fills rather than fading: on the one tab that already
   carries the most weight in the strip, a paler count reads as disabled. */
.cm-view-tab.is-active .cm-view-tab-count {
    background-color: var(--cm-dark-green, #133C41);
    color: var(--cm-background-color, #fff);
    opacity: 1;
}

/* Sits under the tab strip and narrows the list by issue date. Inline and
   compact — it qualifies the open tab rather than filtering a column, so it
   must not read as another header filter row. */
/* The row of list-scoping filters under the tab strip. Wraps on narrow screens
   rather than squeezing the selects. */
.invoice-list-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    /* left margin matches .cm-view-tab's padding, so the row lines up with the
       tab labels it qualifies rather than with the strip's edge */
    margin: 0 0 12px 14px;
}

/* Period and brand are invoices' SCOPE, and they ride the toolbar row like
   orders' date range. There they are one line among the other controls, not a
   block under the tabs: no wrapping, no bottom margin, and the same 26px band
   as the icons beside them. */
.dg-toolbar-slots .invoice-list-filters {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
}
.dg-toolbar-slots .invoice-list-filters label {
    display: none;
}
.dg-toolbar-slots .invoice-list-filters select,
.dg-toolbar-slots .invoice-amount-filter {
    height: 26px !important;
    font-size: 13px;
    padding-top: 0;
    padding-bottom: 0;
}
.dg-toolbar-slots .invoice-amount-filter {
    width: 120px;
}

.invoice-period-filter,
.invoice-brand-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}
.invoice-period-filter label,
.invoice-brand-filter label {
    margin: 0;
    font-size: 13px;
    color: var(--cm-table-heading-color);
    white-space: nowrap;
}
.invoice-period-filter .select,
.invoice-brand-filter .select {
    width: auto;
    min-width: 190px;
}

/* Appears only with a selection, between the tabs and the grid, so the row it
   acts on stays visible. */
.quotes-bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #f5f8fb;
    border: 1px solid #dbe9f5;
    border-radius: 4px;
}
.quotes-bulk-count {
    font-weight: 600;
    white-space: nowrap;
}
.quotes-bulk-select {
    width: auto;
    min-width: 200px;
}

/* Matches the invoice overview's payment-status header filter. */
.quote-status-filter .summary {
    display: flex;
    align-items: center;
    font-weight: 400;
}
.quote-status-filter .checkbox-wrap {
    position: absolute;
    z-index: 20;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    padding: 10px 14px;
    min-width: 190px;
}

/* Shiftbase export block in the order staff card. The export writes to another
   system, so it carries a label, a state and a reason when unavailable — an
   unlabelled icon in the header's action row carries none of those. */
.planning-export {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: var(--cm-table-heading-bg-color, #f7f9f9);
}
.planning-export__body {
    flex: 1 1 auto;
    min-width: 0;
}
.planning-export__status {
    font-weight: 600;
}
.planning-export__check {
    color: #4caf50;
    margin-right: 4px;
}
.planning-export__detail {
    margin: 2px 0 0;
    color: #6a747c;
}
.planning-export .btn {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Datagrid toolbar — the filter and view-options icons that sit at the right
   end of a grid's header band. Paired with re-datagrid.toolbar.

   Scoped entirely under .dg-*. The existing .view-options-wrap is a DIFFERENT
   control — the list/board/grouped view-mode switcher on the customers, orders
   and products overviews — so this pattern keeps its own class namespace rather
   than extending that one.
   --------------------------------------------------------------------------- */

/* The positioning context for the toolbar. It wraps .table-responsive rather
   than living inside it: that element scrolls horizontally, and a toolbar
   within it would slide out of view along with the columns.

   The 20px side inset stops the row separators running into the edge of the
   card the grid sits in, and lines the table up with the list/board tab strip
   above it (`.view-options-wrap`, same 20px) — so the tabs, the saved-view tabs
   and the table all share one left edge instead of three.

   Scoped to .dg-grid-wrap on purpose: only grids that opted into the toolbar
   get this, so the many small grids elsewhere keep the edge-to-edge look they
   were built for. */
.dg-grid-wrap {
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
}

/* Pinned to the top-right of the wrapper, which starts at the header band. The
   buttons overlay the band rather than occupying a column, so column titles
   must stay short — the right-most one is the only one they can collide with. */
.dg-toolbar {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Matches the shorter of the two rows the toolbar can float over — the
       group title row (~39px) rather than the header band (~48px). At 48 the
       32px buttons bottomed out exactly on the group row's border. */
    height: var(--cm-datagrid-header-height, 40px);
    padding-right: 14px;
    pointer-events: none; /* the band stays clickable between the buttons */
}

/* The toolbar overlays the header band rather than occupying a column, so the
   band must be at least as tall as the toolbar or the 32px buttons overhang the
   first data row. Driven by the same var as `.dg-toolbar`, so the two cannot
   drift apart. On a table cell `height` is a minimum, which is what is wanted:
   a band with taller content still grows.

   Scoped to `.has-toolbar`: a grid whose toolbar rides the saved-view tab strip
   has nothing floating over its header, so it must not pay for the room. */
.dg-grid-wrap.has-toolbar thead th {
    height: var(--cm-datagrid-header-height, 40px);
}

/* ...and the last header cell has to keep clear of it horizontally, or a long
   right-most column title reads underneath the buttons. Three 32px buttons plus
   their gaps and the bar's own padding. Only the HEADER reserves the space; the
   cells below still use the full width.

   The theme sets `padding-right: 30px !important` on `.table > thead > tr >
   th:last-child`. `!important` alone does not win that — between two important
   declarations specificity still decides — so this selector has to carry more
   element steps than the theme's. */
.dg-grid-wrap.has-toolbar table thead tr th:last-child {
    padding-right: 126px !important;
}

.dg-toolbar-button {
    pointer-events: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--cm-lines-color, #e0e5e5);
    border-radius: 50%;
    background: #fff;
    color: var(--cm-text-color, #2d3b3b);
    cursor: pointer;
}

.dg-toolbar-button:hover,
.dg-toolbar-button.active {
    background: var(--cm-table-heading-bg-color, #f7f9f9);
}

.dg-toolbar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--cm-primary-color, #00966c);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

/* --- View options panel --------------------------------------------------- */

.dg-view-options-section + .dg-view-options-section {
    margin-top: 24px;
}

.dg-view-options-section h4 {
    margin: 0 0 8px;
}

.dg-view-options-bulk {
    margin-bottom: 12px;
}

.dg-view-options-bulk a {
    cursor: pointer;
}

.dg-view-options-column {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--cm-lines-color, #f0f0f0);
}

/* The available rows use the app's standard `.checkbox > label > input +
   .input-helper`, styled globally — only the row spacing lives here. */
.dg-view-options-column .checkbox {
    margin: 0;
    flex: 1 1 auto;
}

/* A column name reads the same whether it is already shown or still available.
   Only the available rows carry a <label>, which the theme sets heavier than
   the `.dg-view-options-name` span the shown rows use. */
.dg-view-options-column .checkbox label {
    font-weight: inherit;
}

.dg-view-options-move {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

/* --- Datagrid group rows -------------------------------------------------- */
/* Paired with re-datagrid.grouping. A group header is a real <tr> inside the
   same <tbody> as the rows it heads, so the table keeps one column grid and the
   groups read as part of the dataset rather than as separate tables. */

/* The group title is a divider, not a band: giving it the same green as the
   column header directly beneath merged the two into one block and the header
   stopped reading as a header. White with a rule above separates the groups and
   leaves the green band to mean one thing.

   Same 1px rule as the tab strip above, so the page uses one divider weight
   rather than two. */
.dg-group-row {
    cursor: pointer;
    background: #fff;
    border-top: 1px solid var(--cm-lines-color, #d2d7d0);
}

/* The tab strip immediately above already draws this line — a second one here
   reads as a double rule. */
.dg-grid-wrap tbody tr.dg-group-row:first-child {
    border-top: none;
}

/* No trailing rule under the last row: the table should end, not be underlined. */
.dg-grid-wrap tbody tr:last-child > td,
.dg-grid-wrap tbody tr:last-child > th {
    border-bottom: none;
}

.dg-group-row:hover {
    background: var(--cm-table-heading-bg-color, #f7f9f9);
}

/* The toolbar floats over this row's right end, so keep the count clear of it. */
.dg-group-row .dg-group-cell {
    padding-right: 120px !important;
}

/* Medium, not bold: the group title only has to outrank the rows under it, and
   the rows are 400. Bold made a collapsed list read as a wall of headings. */
.dg-group-cell {
    padding: 8px 12px !important;
    font-weight: 500;
}

.dg-group-caret {
    display: inline-block;
    width: 18px;
    color: var(--cm-muted-text-color, #6a747c);
}

.dg-group-label {
    margin-right: 8px;
}

/* The same pill the view tabs give their counts, so a count reads the same
   wherever it appears. */
.dg-group-count {
    display: inline-block;
    min-width: 1.9em;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: var(--cm-neutral-gray);
    color: var(--cm-table-heading-color);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

/* --- Datagrid filter builder ---------------------------------------------- */
/* Rows of field / operator / value, ANDed. Paired with
   re-datagrid.filter-builder. The three controls share the row so a long field
   name cannot push the value box out of reach; the value column is the one that
   absorbs the remaining width, since it holds the free text. */

/* Wraps, and the pickers keep a floor: a value control with a large intrinsic
   width (the tag picker) otherwise squeezed the field and operator selects down
   to unreadable slivers rather than taking a line of its own. */
.dg-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

/* All three share the line and shrink together, so the remove button stays
   beside them instead of wrapping to a line of its own. Fixed percentages plus
   a 180px value column overflowed a third-width modal, which is what pushed it
   down. */
.dg-filter-row .dg-filter-field,
.dg-filter-row .dg-filter-op,
.dg-filter-row .dg-filter-value {
    flex: 1 1 0;
    min-width: 0;
}

/* Always its own full line, so the row keeps one shape whether the search
   matched one tag or ninety. */
.dg-filter-row .dg-filter-value.is-block {
    flex: 1 0 100%;
    order: 1;
}

/* ...and the remove button stays up on the field/operator line rather than
   being pushed below the panel. */
.dg-filter-row .dg-filter-remove {
    order: 0;
}

/* The product photo drawer. Capped and centred: the panel keeps its width, the
   image stops growing — bigger is not more legible, it is just further to move
   your eyes. */
.image-box {
    display: flex;
    justify-content: center;
}

.image-box img {
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    object-fit: contain;
}

/* Multi-value filters: checkboxes, not a native <select multiple>. Capped and
   scrollable so a 12-status list does not push the footer off the panel, but
   tall enough that several options are visible without scrolling. */
.dg-filter-checklist-items {
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--cm-lines-color);
    border-radius: 4px;
    padding: 4px 0;
}

.dg-filter-checklist-search {
    margin-bottom: 6px;
}

/* Only the row padding and hover live here — the checkbox itself is the app's
   standard `.checkbox > label > input + .input-helper`, styled globally. */
.dg-filter-checklist-item {
    padding: 2px 10px;
}

.dg-filter-checklist-item .checkbox {
    margin: 0;
}

.dg-filter-checklist-item:hover {
    background-color: var(--cm-table-heading-bg-color);
}

.dg-filter-checklist-empty {
    margin: 0;
    padding: 8px 10px;
}

/* Type-ahead, not a wall of chips: matches appear only while you type, and the
   chosen tags sit above the box as removable pills. */
.dg-tag-picker-chosen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dg-tag-picker-chosen:not(:empty) {
    margin-bottom: 6px;
}

/* Sits inside the pill, so it inherits the tag's own text colour whatever the
   tag's background happens to be. */
.dg-tag-picker-remove,
.dg-tag-picker-remove:hover,
.dg-tag-picker-remove:focus {
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    margin-left: 6px;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}

.dg-tag-picker-remove:hover {
    opacity: 1;
}

.dg-tag-picker-results {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
    margin-top: 6px;
}

/* Product filter: the same type-ahead shape as the tag picker, but product
   names are sentences rather than short labels, so the matches stack one per
   line instead of wrapping as chips. */
.dg-product-picker-chosen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dg-product-picker-chosen:not(:empty) {
    margin-bottom: 6px;
}

.dg-product-picker-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    padding: 1px 10px;
    border: 1px solid var(--cm-lines-color);
    border-radius: 6px;
    background-color: #fff;
}

.dg-product-picker-remove,
.dg-product-picker-remove:hover,
.dg-product-picker-remove:focus {
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    margin-left: 6px;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}

.dg-product-picker-remove:hover {
    opacity: 1;
}

.dg-product-picker-results {
    max-height: 180px;
    overflow-y: auto;
    margin-top: 6px;
    border: 1px solid var(--cm-lines-color);
    border-radius: 4px;
}

.dg-product-picker-result {
    padding: 4px 10px;
    cursor: pointer;
}

.dg-product-picker-result:hover {
    background-color: var(--cm-table-heading-bg-color);
}

.dg-filter-row .dg-filter-remove {
    flex: 0 0 auto;
}

/* A between-filter's two bounds sit side by side inside the value column. */
.dg-filter-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dg-filter-actions {
    display: flex;
    /* The drawer is a third of the viewport, so on a tablet the two buttons do
       not fit on one line and "clear filter" hangs off its right edge. */
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* Shown-columns rows carry no checkbox: the × removes them, and the arrows
   order them. Only the shown set is orderable, so the name takes the space the
   checkbox would have. */
.dg-view-options-name {
    flex: 1 1 auto;
    min-width: 0;
}

.dg-view-options-search {
    margin-bottom: 8px;
}

/* --- Saved views ---------------------------------------------------------- */

/* Tab strip for switching views. Reuses the invoices tab classes so it reads as
   the same control there; the side margins match the list/board strip above and
   the table below, so all three line up. */
.dg-view-tabs {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
}

/* Tabs and toolbar share one row: both are grid-wide controls, and giving the
   toolbar a fixed seat here is what keeps it off the header band, where it
   overlaid the right-most column title. `flex-end` sits the buttons on the same
   baseline as the tabs; the underline is carried by the row so it spans past
   the last tab rather than stopping under it. */
.dg-view-tabs-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--cm-lines-color, #e0e0e0);
}

.dg-view-tabs-row .dg-view-tabs {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    border-bottom: 0;
}

/* Back into normal flow — the absolute placement only makes sense against the
   header band it used to float over. Smaller too: 32px was sized to be legible
   floating over a table header; sitting beside tab labels it only has to match
   their weight. */
.dg-view-tabs-row .dg-toolbar {
    position: static;
    flex: 0 0 auto;
    height: auto;
    gap: 6px;
    padding-right: 0;
    padding-bottom: 6px;
}

.dg-view-tabs-row .dg-toolbar-button {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.dg-view-tabs-row .dg-toolbar-badge {
    top: -5px;
    right: -5px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    font-size: 9px;
    line-height: 14px;
}

/* Rows in the manage-views panel. Without an explicit row layout the delete
   button wraps under the name. */
.dg-saved-view {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--cm-lines-color, #f0f0f0);
}

.dg-saved-view-name {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dg-saved-view.active .dg-saved-view-name {
    font-weight: 600;
}

.dg-saved-view-badge {
    color: var(--cm-muted-text-color, #6a747c);
}

/* Separates "overwrite the active view" from "save a new one". Both are saves,
   so spacing alone left them reading as one set of controls. */
.dg-save-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: var(--cm-muted-text-color, #6a747c);
}

.dg-save-divider::before,
.dg-save-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid var(--cm-lines-color, #f0f0f0);
}

/* The rename input takes the space the name had, so the confirm/cancel buttons
   stay where the row's other buttons sit and the row does not jump. */
.dg-saved-view-rename {
    flex: 1 1 auto;
    min-width: 0;
}

.dg-saved-view-save {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

/* The control itself is the app's standard `.checkbox > label > input +
   .input-helper`, styled globally — only the row spacing lives here. */
.dg-saved-view-shared .checkbox {
    margin: 0;
}

.dg-saved-view-shared .checkbox label {
    font-weight: 400;
}

/* Column headers repeated inside each open group.
   The band colour sits on the <tr>, matching `.bootgrid-table thead tr` — the
   <th> itself is transparent there, so styling the cell instead produced a
   header that did not read as a band. */
.dg-group-columns {
    background: var(--cm-table-heading-bg-color, #f7f9f9);
}
.dg-group-columns th {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    vertical-align: middle;
    /* Same two rules the table's own header band carries: a label never wraps,
       and the band needs a bottom edge of its own — the first row inside a
       group clears its border-top. */
    white-space: nowrap;
    border-bottom: 1px solid var(--cm-lines-color);
}

/* The filter icon for orders' calendar / monthly / production modes, which have
   no grid to hang the datagrid toolbar on. `.dg-toolbar` is absolutely
   positioned against a grid wrapper by default; here it sits in normal flow. */
.orders-panel-filter {
    display: flex;
    justify-content: flex-end;
    margin: 0 20px 10px;
}
.orders-panel-filter .dg-toolbar {
    position: static;
    height: auto;
    padding-right: 0;
}

/* ---------------------------------------------------------------------------
   Orders scope picker — the mandatory date range, in the panel header.

   A button carrying the range in words, opening a panel with the presets, the
   two bounds and the date-column choice. Replaces the `.filter-macro` select,
   which set a status set AND a relative range from one control; the status
   halves are seeded saved views now.
   --------------------------------------------------------------------------- */
.cm-scope-picker {
    position: relative;
}
.cm-scope-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    background: none;
    border: 1px solid var(--cm-lines-color, #e0e0e0);
    padding: 0 8px;
    border-radius: 4px;
    color: var(--cm-font-color);
    cursor: pointer;
    white-space: nowrap;
    font-size: 13px;
}
.cm-scope-summary:hover {
    background: var(--cm-table-heading-bg-color, #f7f9f9);
}
.cm-scope-summary-label {
    font-variant-numeric: tabular-nums;
}
.cm-scope-panel {
    position: absolute;
    right: 0;
    z-index: 20;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    padding: 14px;
    /* Wide enough for the day row's four cells to hold "Overmorgen" without
       clipping, across the panel's full width. */
    min-width: 480px;
}
.cm-scope-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* The whole-range shortcuts, ruled off below the range being built. */
.cm-scope-jump {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--cm-lines-color);
}

.cm-scope-jump-label {
    font-size: 0.75rem;
    color: var(--cm-mid-gray);
    margin-bottom: 6px;
}
.cm-scope-bounds {
    display: flex;
    gap: 20px;
}
.cm-scope-bound {
    flex: 1 1 0;
    min-width: 0;
}
.cm-scope-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cm-mid-gray);
    margin-bottom: 4px;
}
/* The relative shortcuts under whichever bound is being edited. A matrix
   rather than a list of sentences: the row says which period and the bound
   above says which end, so a cell only has to say `deze`. The old modal spelled
   out "Begin deze week" on all thirteen buttons per bound, which is why it
   needed a full-width modal to hold it. */
.cm-quick-dates {
    margin-top: 10px;
}

.cm-quick-dates-days {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

/* The end the next shortcut click will set. A border rather than a focus ring:
   it has to stay readable while the pointer is down in the grid, and the field
   is not focused then.

   Yellow, and !important on both. `--cm-green` is rgb(19,60,65) — the SAME
   colour these inputs already carry, so tinting the border with it marked
   nothing at all, and the box-shadow lost to a `.form-control` rule. A marker
   that has to survive an existing border and an existing shadow cannot be a
   polite one. */
.cm-scope-bound.is-target input.date-picker-native {
    border-color: var(--cm-yellow) !important;
    box-shadow: 0 0 0 3px rgba(252, 178, 20, 0.25) !important;
}

/* The words, because colour says "special", not "your next click lands here". */
.cm-scope-next-click {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background-color: var(--cm-yellow);
    color: var(--cm-font-color);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: none;
    vertical-align: middle;
}

/* Unit last, so the row reads as one phrase: `vorige | deze | volgende week`. */
.cm-quick-dates-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 3.6rem;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
}

.cm-quick-dates-label {
    font-size: 0.75rem;
    color: var(--cm-mid-gray);
    padding-left: 2px;
}

/* The grid cells size themselves; the shared rule's horizontal padding would
   push three of them past the column and clip the labels. */
.cm-quick-dates .quick-date-btn {
    padding: 2px 4px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-scope-date-type {
    margin-top: 12px;
}
.cm-scope-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* What is narrowing the grid, in words, between the toolbar and the rows.
   Replaces the old "Toon N opdrachten" line — the count is per-tab now, and
   this says the thing nothing else does: which filters are on. The toolbar
   badge above it can only count them.

   Wraps rather than truncates. The sentence grows with the number of active
   filters, and eliding it would hide exactly the clause the reader is looking
   for; two lines of 0.8rem text cost less than a filter nobody can find. */
.dg-filter-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
    /* Left-aligned with the view tabs above it, not with the grid's outer box:
       the line belongs to that chrome, and a few pixels adrift of the tab it
       sits under reads as a stray element. */
    margin: 0 0 10px 24px;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--cm-mid-gray);
}
.dg-filter-summary-icon {
    /* Baseline alignment puts the glyph a shade high against the text. */
    position: relative;
    top: 1px;
    margin-right: -3px;
}
.dg-filter-summary-text {
    /* Shrinkable so the reset stays on the first line while the sentence wraps
       beneath it — the way out must not scroll off with the explanation. */
    min-width: 0;
}
/* A link, not a button: the row is a sentence, and a filled control in it would
   outweigh the primary actions above. Underlined on hover only, so it reads as
   quiet until looked for. */
.dg-filter-summary-reset {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
    color: var(--cm-green);
    cursor: pointer;
}
.dg-filter-summary-reset:hover,
.dg-filter-summary-reset:focus {
    text-decoration: underline;
}

/* The search box on the datagrid's toolbar row. Wide enough for its placeholder
   — on an operational list the box is the most-used control, so what it searches
   has to be readable before you click it. */
.dg-toolbar-search {
    display: flex;
    align-items: center;
}
.dg-toolbar-search .search-input,
.dg-toolbar-search .search-input input {
    min-width: 190px;
}
.dg-toolbar-search .search-input input {
    height: 26px !important;
    font-size: 13px;
}
/* The magnifier is absolutely positioned against a full-height input; in this
   26px band a fixed `top` leaves it sitting low. Centre it instead of guessing
   an offset, so it stays centred if the band ever changes height. */
.dg-toolbar-search .input-icon {
    top: 0 !important;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 1rem;
}
.dg-toolbar-slots {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-bottom: 6px;
}
.dg-toolbar-slots .dg-toolbar {
    padding-bottom: 0;
}
/* A button in the prefix slot joins the 26px band the search box and the toolbar
   icons already sit in; the app's default `.btn` is taller and would set the
   height of the whole row on its own. Its own class rather than
   `.dg-toolbar-slots .btn`, which would also reach the buttons inside a slot's
   dropdown panel (the scope picker's quick-date grid). */
.dg-slot-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 1;
}
.dg-slot-btn .zmdi {
    margin: 0;
    font-size: 15px;
}
/* The tab strip yields before the chrome does: tabs can scroll or wrap, but the
   date range and the search box must stay legible — they are what the list is
   operated with. */
/* The tab strip never wraps and never scrolls: what does not fit is measured out
   into the overflow menu instead. `overflow` stays visible so the menu's panel
   is not clipped by its own strip. */
.dg-view-tabs-row .dg-view-tabs {
    min-width: 0;
    flex-wrap: nowrap;
    overflow: visible;
}
/* Tabs keep their natural width. As shrinkable flex items they compress to fit,
   which makes them LOOK like they fit while the text is clipped — and the
   overflow measurement, reading those compressed widths, agrees and rolls
   nothing away. */
.dg-view-tabs-row .cm-view-tab {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Tabs that did not fit on the row. The Firefox bookmarks-toolbar behaviour:
   keep what fits and roll the rest up, rather than wrapping to a second line —
   wrapping pushes the table down, and it does so at a different view count on
   every screen width. */
.dg-view-tabs-more {
    position: relative;
    flex: 0 0 auto;
}
.dg-view-tabs-more-btn {
    font-variant-numeric: tabular-nums;
}
.dg-view-tabs-more-panel {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 180px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--cm-lines-color, #e0e0e0);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.dg-view-tabs-more-panel .cm-view-tab {
    text-align: left;
    border-bottom: 0;
}

/* ---------------------------------------------------------------------------
   The grid's toolbar row on a phone.

   One line cannot hold the tab strip AND the scope picker AND the search box
   AND three icons — measured at the burger cutoff the chrome wants ~685px of
   the ~650px on offer, so on one row the tabs are squeezed until their overflow
   chevron renders against the scope picker. Stack instead: tabs keep the top
   line and the controls take the one below, full width.

   The overflow menu still does its job on the tab line; it just has the whole
   width to work with rather than the ~40px left over.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {
    .dg-view-tabs-row {
        flex-wrap: wrap;
        margin-left: 10px;
        margin-right: 10px;
    }
    .dg-view-tabs-row .dg-view-tabs {
        flex: 1 1 100%;
    }
    .dg-toolbar-slots {
        flex: 1 1 100%;
        padding-bottom: 8px;
        /* Without this the row cannot break, so the `flex-basis: 100%` below
           only makes the scope button GROW rather than take a line of its own —
           and the search box, last in a row that cannot wrap, is squeezed to an
           icon. The intent below was always two lines; this is what allows it. */
        flex-wrap: wrap;
        row-gap: 8px;
    }
    /* The search box takes the room the icons and the scope button leave, rather
       than holding a 190px floor that forces the row wider than the screen. */
    .dg-toolbar-search {
        flex: 1 1 auto;
        min-width: 0;
    }
    .dg-toolbar-search .search-input,
    .dg-toolbar-search .search-input input {
        min-width: 0;
        width: 100%;
    }
    /* The panel's 480px floor is wider than the button it hangs off, and the base
       rule anchors it by its RIGHT edge — so under the burger cutoff it opens
       leftwards off the screen. Anchor it by the left edge instead, and cap it
       to the viewport. */
    .cm-scope-panel {
        left: 0;
        right: auto;
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - 40px);
        max-height: 80vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Phone only. A tablet's second toolbar row still holds the date range, the
   search box and the icons side by side, and its panel still fits beside the
   button — both of these turn the picker into a full-width band, which on a
   tablet reads as a broken field and buries the row underneath it. */
@media only screen and (max-width: 640px) {
    /* The date range is the widest single control here. Its own line, so it can
       say what it says without squeezing the search box out. */
    .cm-scope-picker {
        flex: 1 1 100%;
    }
    .cm-scope-summary {
        width: 100%;
        justify-content: flex-start;
    }
    /* Pinned to the VIEWPORT, not to the button: at this width even a
       left-anchored panel is wider than the screen. `fixed` with both insets set
       is the only positioning that cannot leave the screen whatever the trigger
       is doing. Tall, too: on a phone the panel is most of the height, so it
       scrolls itself rather than growing past the bottom. */
    .cm-scope-panel {
        position: fixed;
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
    }
}

/* Conversion dashboard — the revenue identity below the grid. Was four
   column-spanning <tfoot> rows; a grid has no way to express those. */
.conversion-reconciliation {
    display: table;
    margin-left: auto;
    font-style: italic;
}

.conversion-reconciliation > div {
    display: table-row;
}

.conversion-reconciliation dt,
.conversion-reconciliation dd {
    display: table-cell;
    padding: 2px 0 2px 20px;
}

.conversion-reconciliation dd {
    text-align: right;
    white-space: nowrap;
}

/* Ingredient packaging card ------------------------------------------------
   Three nested things live in this card: the container you order, the pack
   inside it, and how that pack is used in a recipe. Grouping them that way puts
   the container price directly above the unit price derived from it, so the
   arithmetic is visible instead of spread over four rows. */
.cm-packaging-group + .cm-packaging-group {
    margin-top: 24px;
}

.cm-packaging-group-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cm-mid-gray);
    margin: 0 0 8px;
}

/* Restates the card as one equation, so a wrong pack size is visible as a
   number that does not match the product in the operator's hand. */
.cm-packaging-summary {
    margin-top: 24px;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--cm-very-light-gray);
    border: 1px solid var(--cm-lines-color);
    color: var(--cm-dark-gray);
}

.cm-field-hint {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--cm-mid-gray);
}

/* Recipe cost breakdown ----------------------------------------------------
   Pie plus list, side by side: the pie carries the shape of the cost, the list
   carries what each slice is and what it costs. Neither is sufficient alone --
   a pie cannot be read for amounts, and a list does not show that one
   ingredient is most of the dish. */
.cm-cost-breakdown__body {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.cm-cost-breakdown__chart {
    flex: 0 0 220px;
    width: 220px;
}

.cm-cost-breakdown__legend {
    flex: 1 1 260px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.cm-cost-breakdown__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--cm-table-line-color);
}

.cm-cost-breakdown__row:last-child {
    border-bottom: 0;
}

.cm-cost-breakdown__swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    /* Baseline-aligned text next to a block: nudge the block onto the text. */
    transform: translateY(1px);
}

.cm-cost-breakdown__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-cost-breakdown__amount {
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cm-cost-breakdown__share {
    flex: 0 0 44px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--cm-mid-gray);
    font-size: 0.85rem;
}

/* "What moved" panel --------------------------------------------------------
   One row per recipe line whose contribution changed over the window. The
   money is the point, not the supplier's percentage: a 20% rise on a garnish
   and the same rise on the protein are different news. */
.cm-cost-movers__periods {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.cm-cost-period {
    border: 1px solid var(--cm-lines-color);
    background: transparent;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 0.8rem;
    color: var(--cm-mid-gray);
    cursor: pointer;
}

.cm-cost-period.is-active {
    background: var(--cm-green);
    border-color: var(--cm-green);
    color: var(--cm-white);
}

.cm-cost-movers {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cm-cost-mover {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--cm-table-line-color);
}

.cm-cost-mover:last-child {
    border-bottom: 0;
}

.cm-cost-mover__name {
    flex: 1 1 auto;
    min-width: 0;
}

.cm-cost-mover__from,
.cm-cost-mover__to {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.cm-cost-mover__from {
    color: var(--cm-mid-gray);
}

.cm-cost-mover__arrow {
    flex: 0 0 auto;
    color: var(--cm-mid-gray);
}

.cm-cost-mover__pct {
    flex: 0 0 62px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Cost-intelligence upsell — shown in place of the panel below Main Course. */
.cm-cost-intel-upsell h4 {
    margin-top: 0;
}

.cm-cost-intel-upsell p {
    max-width: 62ch;
    color: var(--cm-dark-gray);
}

/* The three panels are cards inside a card. Drop their outer chrome so the
   group reads as one thing with three sections rather than a stack of boxes. */
.cost-intel .card {
    box-shadow: none;
    border: 1px solid var(--cm-lines-color);
    margin-bottom: 12px;
}

.cost-intel .card:last-child {
    margin-bottom: 0;
}

/* The formula behind the suggested price. Monospaced so the two lines line up
   as an equation rather than as prose. */
.cm-advice-formula__rule {
    white-space: pre-line;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
}

.cm-advice-formula__sum {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
}

/* Compare food costs ---------------------------------------------------------
   The products overview's comparison modal: a summary table, then one section
   per product with the editor's breakdown figure and a cost timeline. Laid
   out to be printed as-is, so nothing here depends on the modal's viewport. */
.cm-cost-compare__intro {
    color: var(--cm-mid-gray);
}

.cm-cost-compare__summary td,
.cm-cost-compare__summary th {
    font-variant-numeric: tabular-nums;
}

.cm-cost-compare__product {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--cm-lines-color);
    break-inside: avoid;
}

.cm-cost-compare__name {
    margin: 0 0 10px;
}

.cm-cost-compare__kpis {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin: 0 0 14px;
}

.cm-cost-compare__kpis dt {
    color: var(--cm-mid-gray);
    font-size: 0.8rem;
    font-weight: normal;
}

.cm-cost-compare__kpis dd {
    margin: 0;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* Breakdown left, cost over time right. One column only where two would
   squeeze the pie's legend below readable. */
.cm-cost-compare__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

@media screen and (max-width: 900px) {
    .cm-cost-compare__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cm-cost-compare__label {
    margin: 0 0 10px;
}

@media print {
    /* The modal is a portal under #modal-root, a direct child of <body>. With
       the comparison open, hide every other top-level node and every other
       modal, and flatten the drawer into the page flow so it paginates. */
    body:has(.cm-cost-compare-modal) > *:not(#modal-root) { display: none !important; }
    #modal-root .modal:not(:has(.cm-cost-compare-modal)) { display: none !important; }
    #modal-root .modal:has(.cm-cost-compare-modal) {
        position: static !important;
        /* The drawer sizes itself in viewport units; in the page flow that is
           the page width plus a scrollbar, and the last column falls off. */
        width: auto !important;
        overflow: visible !important;
        background: none !important;
    }
    #modal-root .modal:has(.cm-cost-compare-modal) .modal-dialog {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
        box-shadow: none !important;
    }
    #modal-root .modal:has(.cm-cost-compare-modal) .modal-content {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
        border: 0 !important;
    }
    #modal-root .modal:has(.cm-cost-compare-modal) .cm-modal-head .cm-modal-head-actions,
    #modal-root .modal:has(.cm-cost-compare-modal) .cm-modal-close,
    #modal-root .modal:has(.cm-cost-compare-modal) .cm-modal-foot { display: none !important; }
    #modal-root .modal:has(.cm-cost-compare-modal) .cm-modal-body {
        overflow: visible !important;
        height: auto !important;
        padding: 12px 24px !important;
    }
    .cm-cost-compare__product { page-break-inside: avoid; }
    /* Highcharts fixes its SVG at the on-screen width; the page column is
       narrower, so scale the drawing (it carries a viewBox) to the column. */
    .cm-cost-compare__timeline .highcharts-container {
        width: 100% !important;
        height: auto !important;
    }
    .cm-cost-compare__timeline .highcharts-root {
        width: 100% !important;
        height: auto !important;
    }
    /* A page column is half an A4 wide, so the legend drops under the pie;
       a smaller pie keeps a product on one page. */
    .cm-cost-compare .cm-cost-breakdown__chart {
        flex-basis: 150px;
        width: 150px;
    }
    .cm-cost-compare .cm-cost-pie .highcharts-container,
    .cm-cost-compare .cm-cost-pie .highcharts-root {
        width: 150px !important;
        height: 150px !important;
    }
}

/* The location card shows only a lead-in of the description: the stored value is
   Quill HTML averaging a couple of thousand characters, so the full text lives
   in the location popup, which the truncated preview opens. */
.pmo-contact li.location-description {
    align-items: flex-start;
}

.location-description-preview {
    cursor: pointer;
}

/* Calm column headers: smaller, uppercase and muted, so the labels name the
   columns without competing with the rows for attention. The same treatment
   covers `.dg-group-columns`, the header row repeated inside each open group —
   it is built from the same cells, so it has to read the same.

   The two overrides are not decoration. `th` is bold in the browser's own
   stylesheet, and the sortable header is an <a>, so its label takes the link
   colour — left alone, uppercase would land bold and dark-teal, i.e. louder
   than what it replaced. */
.bootgrid-table > thead > tr > th,
.bootgrid-table > tbody > tr.dg-group-columns > th {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cm-table-heading-color);
}

.bootgrid-table > thead > tr > th .column-header-anchor,
.bootgrid-table > thead > tr > th .text,
.bootgrid-table > tbody > tr.dg-group-columns > th .column-header-anchor,
.bootgrid-table > tbody > tr.dg-group-columns > th .text {
    color: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

/* A cell states its value on one line. A column squeezed below its natural
   width otherwise breaks mid-value — `Food / drinks` over three lines — which
   is harder to scan than either a truncated value or a sideways scroll, and it
   sets the height of every other cell in the row. */
.bootgrid-table > tbody > tr > td {
    white-space: nowrap;
}

/* Truncation needs a cap to truncate against, and `overflow: hidden` clips
   anything a cell deliberately pops out of itself. Both are therefore separate
   from the nowrap above, and both are lifted for the cells that own a popover,
   a control, or an inline editor. */
.bootgrid-table > tbody > tr > td {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bootgrid-table > tbody > tr > td.check,
.bootgrid-table > tbody > tr > td.commands,
.bootgrid-table > tbody > tr > td[class*="col-tags"],
.bootgrid-table > tbody > tr > td[class*="col-product-tags"],
.bootgrid-table > tbody > tr.editing > td,
/* A tooltip that is not portalled renders inside its cell, so clipping the cell
   clips the tooltip. Such a cell holds an icon rather than a long value, so it
   has nothing to truncate and loses nothing by opting out. */
.bootgrid-table > tbody > tr > td:has(.popup-tooltip) {
    max-width: none;
    overflow: visible;
}

/* ---------------------------------------------------------------------------
   Fitted columns  (re-datagrid.column-fit)

   `auto` layout sizes a column to its content, and the nowrap + max-width above
   make that content width the column's MINIMUM. So the ellipsis those rules set
   up never engages below 320px: the table cannot compress, and it scrolls
   sideways instead. `fixed` layout is what lets a column be narrower than its
   text, which is what turns those two rules into the truncation they were
   written to be.

   Applied only when the grid measured itself as overflowing — a table that
   already fits gets neither this class nor a <colgroup>, so nothing about a
   currently-fitting grid changes. The widths come from the colgroup; `width`
   here only stops `fixed` layout from sizing to the first row.
   --------------------------------------------------------------------------- */
.bootgrid-table.dg-fitted {
    table-layout: fixed;
    width: 100%;
}

/* Under `fixed` a cell no longer grows to its content, so anything that opted
   OUT of clipping now spills over its neighbour instead of stretching the
   column. The opt-outs still stand for what they were for — a popover or an
   inline editor must be able to leave its cell VERTICALLY — so the clip moves
   inward to a wrapper around the cell's own content rather than being put back
   on the cell. */
.bootgrid-table.dg-fitted > tbody > tr > td {
    max-width: none;
}

.bootgrid-table.dg-fitted > tbody > tr > td > .dg-cell,
.bootgrid-table.dg-fitted > tbody > tr > td > a,
.bootgrid-table.dg-fitted > tbody > tr > td > span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* A header is nowrap by design (see the note on the padding rule above), which
   under `fixed` means a long label runs across the column beside it. Clipped
   rather than wrapped: wrapping is what made the band's height depend on the
   narrowest column, and once columns are sized there is no width to be won by
   letting it wrap. */
.bootgrid-table.dg-fitted > thead > tr > th,
.bootgrid-table.dg-fitted > tbody > tr.dg-group-columns > th {
    overflow: hidden;
}

.bootgrid-table.dg-fitted > thead > tr > th .text,
.bootgrid-table.dg-fitted > tbody > tr.dg-group-columns > th .text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* --- Totals pane -----------------------------------------------------------
   The summary that closes the orders and invoices list pages. Both render
   cs2.components.widgets.totals-pane, so there is one rule set here, not one
   per panel.

   It is a white card on the page, not a tinted block: the previous version
   painted --cm-background-color onto every cell with !important (to beat
   Bootstrap's `table { background-color: #fff }`) while leaving the wrapper
   transparent, which framed a green slab in a white gutter. Transparent cells
   over a card background need no !important at all.

   Numbers carry the meaning here, so they get tabular figures and a shared
   right edge; the row labels are the only left-aligned column. */

/* Surface, radius and elevation all come from `.card` (see the markup) — this
   rule owns only where the pane sits, and clips to the card's corners.

   The clip is what rounds the BOTTOM of the pane. The last row's rule draws a
   full-bleed background and border to the pane's edges; a border-radius on an
   ancestor does not clip a descendant unless that ancestor establishes it, so
   without this the table's square bottom corners sit over the card's rounded
   ones. Safe here because the pane pops nothing out of itself — its widest
   content scrolls inside `.cm-totals__scroll`. */
.cm-totals {
    margin-top: 20px;
    overflow: hidden;
}

/* One rhythm down the page: the list card, then each totals pane, all spaced
   the same. The two panes used to sit 8px apart so they read as a single pair,
   which worked while they were flat outlined boxes inside one visual group.
   As separate raised cards that gap crowds them and overlaps their shadows, so
   the pairing now comes from their titles rather than from proximity. */
.cm-totals + .cm-totals {
    margin-top: 20px;
}

.cm-totals__title {
    margin: 0;
    /* Same horizontal padding as a cell, so the title, the column heading and
       the row labels all start on one vertical line. */
    padding: 11px 18px;
    border-bottom: 1px solid var(--cm-table-line-color);
}

/* The column count grows with the number of non-empty statuses. Scroll the
   table, never the card. */
.cm-totals__scroll {
    overflow-x: auto;
}

.cm-totals__table {
    width: 100%;
    border-collapse: collapse;
}

/* Bootstrap's `.table > tbody > tr > td` outranks a single class, so the
   padding is scoped the same way or the body rows fall back to its 10px. */
.cm-totals__table > tbody > tr > th,
.cm-totals__table > tbody > tr > td,
.cm-totals__table th,
.cm-totals__table td {
    padding: 10px 18px;
    text-align: right;
    /* Labels used to wrap onto two lines, which gave the two panes different
       row heights. Overflow is handled by scrolling instead. */
    white-space: nowrap;
    border: 0;
    background-color: transparent;
}

/* The header band. Typography belongs to what sits inside the cell — a
   .cm-totals__head or a status pill — not to the cell. */
.cm-totals__table thead th {
    background-color: var(--cm-table-heading-bg-color);
    border-bottom: 1px solid var(--cm-lines-color);
}

/* The one left-aligned column. Pinned, so the labels stay readable while a
   wide table scrolls under them — it needs an opaque background of its own to
   cover the cells passing beneath.

   Scoped through .cm-totals__table on purpose: the shared th/td rule above is
   (0,1,1), so a bare .cm-totals__label would lose to it and the labels would
   stay right-aligned and transparent. Colour and weight are deliberately left
   to the row rules below, so a label matches the emphasis of its own row. */
.cm-totals__table .cm-totals__label {
    position: sticky;
    left: 0;
    text-align: left;
    background-color: var(--cm-white);
}

.cm-totals__table thead .cm-totals__label {
    background-color: var(--cm-table-heading-bg-color);
}

/* fonts.css tints any tbody row on hover. This pane is a summary, not a
   clickable list, and the tint stopped at the sticky label — which has an
   opaque background of its own — so a hovered row visibly split in two. */
.cm-totals__table tbody tr:hover td {
    background-color: transparent;
}

/* Digits only line up column-wise at a fixed width. */
.cm-totals__table td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Incl. VAT is the figure people act on; excl. VAT is context. The old styling
   had this the other way round. */
.cm-totals__row--excl th,
.cm-totals__row--excl td {
    color: var(--cm-mid-gray);
}

.cm-totals__row--incl th,
.cm-totals__row--incl td {
    color: var(--cm-font-color);
    border-top: 1px solid var(--cm-table-line-color);
}

/* fonts.css carries two global rules that reach into any thead and have to be
   answered here, or the header row silently stops lining up with the figures
   under it:

     table thead tr th   { padding: 5px 10px !important; }
     table thead th > span { display: flex; }

   The first can only be beaten by !important. The second turns a header's span
   into a full-width flex box, which parks its content on the left however the
   cell is aligned — so headers must be put back to inline-block and left to
   the cell's own text-align. */
.cm-totals__table thead th {
    padding: 10px 18px !important;
}

/* A status column is headed by the same pill the list above it uses, so the two
   read as one vocabulary. It sits right, over its own column of figures. */
.cm-totals__pill,
.cm-totals__head {
    display: inline-block;
}

/* Plain-text column headings, pane titles and the calendar's day/row headings
   take the datagrid's heading treatment, so a heading looks like a heading
   everywhere in the app. Applied by class rather than to `thead th`, because a
   status pill lives in a th too and keeps its own casing and colour. */
.cm-totals__head,
.cm-totals__title,
.day-col-header,
.day-category-title,
.card .planning-view-group-title td {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cm-table-heading-color);
}

/* The title names the whole pane, so it carries a little more weight than the
   column headings under it. */
.cm-totals__title,
.day-category-title,
.card .planning-view-group-title td {
    font-weight: 600;
}


/* The vendor sheet gives the footer its own grey; take the app's muted one. */
#footer {
    color: var(--cm-mid-gray);
}

/* An empty-state or placeholder hint ("no files yet", a nameless order) takes
   the muted register, upright: italics were carrying "hint" while also
   meaning emphasis in comments. Opacity rather than a fixed grey so the same
   class reads on a coloured calendar card. */
.cm-hint {
    font-style: normal;
    opacity: 0.65;
}

/* --- Status pills ----------------------------------------------------------
   One pill, three vocabularies. Orders, invoices and quotes each keep their own
   colour rules; the shape, size and weight are defined once, here. They had
   drifted — orders was a 4px-radius sentence-case chip at 2px/4px padding while
   invoices and quotes were uppercase badges — which made one idea read as three
   components. Invoices' treatment is the one they converge on.

   The fixed `width: 100px` invoices used is dropped rather than shared: it
   cannot hold a long order status such as "Nog niet getekend", and forcing it
   on the orders grid widened the status column enough to push it out of view.
   Pills hug their own text instead; the shape, casing and weight are what make
   them read as one component.

   `.filter-button` is excluded on purpose — those are controls in a filter row,
   not status badges, and they carry their own sizing. */
.table .order-status:not(.filter-button),
.global-search-hit .order-status,
.invoice-status,
.quote-status {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 24px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}


/* --- Card header typography ------------------------------------------------
   EXPERIMENT (CAT-1476 follow-up): give `layout/card` / `expandable-card`
   headers the same treatment as the customer editor's `rb-card` — the smaller,
   less shouty title people preferred there.

   A top-level card header's h3 inherited the global h3 (~22px/700), while a
   nested card's was already stepped down to --cm-h4-font-size (fonts.css:334,
   commented "make smaller"). This applies that same step to the top level, so
   a card title reads at one size wherever it appears.

   Appended at the end so it beats the h3 sizing in fonts.css / app.1.min.css
   without needing !important. */
.card > .card-header h3 {
    font-size: var(--cm-h4-font-size);
    /* 500, not 600. A card draws a border, a surface and a shadow around its
       own contents, so the boundary is already marked — the heading only has to
       name what is inside it. At 600 the type was restating the card, which is
       two signals for one distinction and is what made stacked sections read as
       busy.

       Checked before applying: every card heading in the app sits on a card
       that paints a visible surface (16/16 on the order editor, 23/23 on
       Instellingen), so the weight is never the only thing marking a section.

       This is why the drawer title stays at 600 — it has no card around it, so
       there the weight IS the marker. The rule is "don't restate in type what
       the layout already says", not "headings are 500". */
    font-weight: 500;
    color: var(--cm-font-color);
}

/* A nested card's header paints a background (fonts.css gives it the table
   heading grey), so it has to follow the card's own 8px radius or its square
   corners show the card's white and its border through: at the top two corners
   when open, and at all four while collapsed, where the header IS the card.
   7px rather than 8px because the header sits inside the card's 1px border. */
.modal-body .card .card .card-header,
.card .card .card .card-header {
    border-radius: 7px 7px 0 0;
}

.modal-body .card .card.card-collapsed > .card-header,
.card .card .card.card-collapsed > .card-header {
    border-radius: 7px;
}

/* The rule under the title, as on an rb-card. Two cases earn it:

     - a collapsible card, where the line says "a body hangs off this, and it
       can come and go" — but not while collapsed, where the header is all
       there is and its border would double the card's own;
     - a nested card (`.card .card`), which is a real section inside a page and
       wants its title separated from its content.

   What it deliberately leaves out is the outermost card. On the order editor
   that card is the page shell — its header is the page title and the panels
   below are its body — so a line there rules off the page, not a section. */
.card.card-expandable:not(.card-collapsed) > .card-header,
.card .card:not(.card-expandable) > .card-header {
    border-bottom: 1px solid var(--cm-lines-color);
}

/* The theme zeroes a card body's top padding when it directly follows a header
   (app.1.min.css:11189) — right when the header had nothing under it, but with
   the rule above the content butted straight against the line. Scoped to match
   that rule exactly, so a card with no line keeps the theme's tight spacing.
   Applies to a bare .card-body too, so a card without .card-padding clears it. */
.card.card-expandable:not(.card-collapsed) > .card-header + .card-body,
.card .card:not(.card-expandable) > .card-header + .card-body {
    padding-top: 16px;
}

/* The collapse chevron becomes rb-card's bordered button rather than a bare
   2rem glyph. Sized in em so it tracks the icon, and the icon is scaled back to
   the size it would be in an rb-card. */
.card.card-expandable > .card-header .card-expand-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
    background: var(--cm-white);
    color: var(--cm-font-color);
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}


/* --- Product editor left-nav ------------------------------------------------
   Shares the `cm-editor-*` shell with the customer editor; only the nav's own
   footer is specific to it. */

/* The view-options button sits under the section list, because it edits that
   list: which sections exist and in what order. It reuses the datagrid
   toolbar's icon button — same job there, same control here — rather than the
   labelled `.btn-secondary` it was, which at the foot of a narrow nav column
   read as a page-level action. */
/* A wider nav than the customer editor's 160px: these section names are whole
   phrases ("Maaklijst categorie koppelen", "Wijzigingsgeschiedenis") rather
   than single words, so at that width they broke over three lines and the
   longest one was clipped into a sideways scroll. */
.product-editor-nav-layout > .cm-editor-nav-pane {
    flex: 0 0 260px;
    max-width: 260px;
    overflow-x: hidden;
}

/* A group's cards, stacked. Not the `.flex.flex-column` utilities: those centre
   their children, so a collapsed card shrank to the width of its own title
   while the open one beside it ran full width. */
/* SETTINGS — the editors' left-nav layout on a page rather than in a drawer.
   The drawer version scrolls its two panes against a fixed panel height; a page
   has no such height, so `overflow-y: auto` on a pane would simply never
   scroll and the section would be cut off at the fold. Here the page scrolls
   and the nav sticks instead. */
.cm-settings-nav-layout {
    align-items: flex-start;
}

.cm-settings-nav-layout .cm-editor-nav-pane {
    /* Wider than the drawer's 160px: a page has the room, and at 160 half these
       labels wrap to two lines. */
    flex: 0 0 200px;
    max-width: 200px;
    position: sticky;
    top: 16px;
    padding: 0 20px 0 0;
    overflow: visible;
}

/* The rule the nav column stands against, so the two panes read as two columns
   rather than as a list that happens to sit left of some cards. */
.cm-settings-nav-layout .cm-editor-content-pane {
    padding: 0 0 0 26px;
    border-left: 1px solid var(--cm-lines-color);
    overflow: visible;
}

/* Same 20px column as the product editor's sections: the spacing is a property
   of the list, not of how many cards a group happens to own. */
.cm-settings-section-cards {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

/* Below the breakpoint the nav becomes the dropdown (style.css hides the list),
   and a sticky column beside nothing is just a gap. */
@media screen and (max-width: 900px) {
    .cm-settings-nav-layout .cm-editor-nav-pane {
        /* The layout turns into a column here, so the 200px basis above stops
           being a width and becomes a HEIGHT — a section dropdown with 150px of
           blank under it. Both halves have to go back to auto. */
        flex: 0 0 auto;
        max-width: none;
        position: static;
        padding: 0 0 4px;
    }
    .cm-settings-nav-layout .cm-editor-content-pane {
        padding: 8px 0 0;
        border-left: none;
    }
}

.product-editor-section-cards {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

/* `product-editor` renders the nav layout inside this wrapper, so the wrapper
   sits between the flex modal body and a layout that wants to fill it. Left as
   a plain block it took its content's full height — 1698px inside a 641px body
   that clips — and everything below the fold became unreachable. */
.product-editor-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Fields in these sections are label-then-input repeated, with nothing between
   one field's input and the next field's label. */
.product-editor-nav-layout .cm-editor-content-pane .card-body > * + * {
    margin-top: 16px;
}

/* --- Ingredient editor left-nav ---------------------------------------------
   Shares the `cm-editor-*` shell with the two editors above. */

/* These section names are whole phrases ("Wijzigingsgeschiedenis"), like the
   product editor's, rather than the customer editor's single words. */
.ingredient-editor-nav-layout > .cm-editor-nav-pane {
    flex: 0 0 220px;
    max-width: 220px;
    overflow-x: hidden;
}

/* At tablet width and below the title wraps around the save button; the pinned
   footer carries the same action a thumb's reach away. */
@media screen and (max-width: 900px) {
    .ingredient-editor-title-save {
        display: none;
    }
    /* Stacked, the wider nav column's basis would become a 220-260px row
       height under the section dropdown. Sits after both width rules so it
       outranks them at equal specificity. */
    .product-editor-nav-layout > .cm-editor-nav-pane,
    .ingredient-editor-nav-layout > .cm-editor-nav-pane {
        flex: 0 0 auto;
        max-width: none;
    }
}

/* The photo card: main photo, then extra photos. Each half is titled, so the
   two pickers can be told apart — before, both were labelled with the card's
   own title. */
.product-photos__section + .product-photos__section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--cm-table-line-color);
}

.product-photos__title {
    margin: 0 0 12px;
    font-size: var(--cm-h5-font-size);
    font-weight: 600;
    color: var(--cm-font-color);
}

/* The contact row's chevron. `.card-expand-toggle` styles it, but that rule is
   scoped to a real card header, so the box is repeated here. */
.rb-contact-item-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
    background: var(--cm-white);
    color: var(--cm-font-color);
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

/* A pane whose whole content is one plain card still wants the rule under its
   header — the app-wide rule draws it only for a collapsible or a nested card,
   and this is neither. */
.cm-editor-content-pane > .card:not(.card-collapsed) > .card-header,
.cm-editor-content-pane > div > .card:not(.card-collapsed) > .card-header {
    border-bottom: 1px solid var(--cm-lines-color);
}

/* Not while collapsed: the body's track is 0fr then, but padding still
   renders, and 16px of it shows as an empty strip under the header. */
.cm-editor-content-pane > .card:not(.card-collapsed) > .card-header + .card-body,
.cm-editor-content-pane > div > .card:not(.card-collapsed) > .card-header + .card-body {
    padding-top: 16px;
}

/* --- Datagrid outer columns ------------------------------------------------
   The theme used to pad every `.table`'s first and last column by 30px,
   `!important`, app-wide (app.1.min.css). `.dg-grid-wrap` already insets a grid
   by 20px, so that doubled the gutter: a grid sat further in than the form
   above it, and in a card it ran past its own container. The wrapper's inset is
   the gutter now, and the cells only separate columns. */

.cm-editor-content-pane .customer-orders-grid table,
.cm-editor-content-pane .customer-invoices-grid table {
    width: 100%;
}

/* `.dg-grid-wrap.has-toolbar` indents itself 20px to clear the toolbar it sits
   under on a full page. In a card there is no toolbar: the indent only pushed
   the grid out of line with the form cards and cost the table the 20px it
   needed, which is what put a scrollbar under Facturen. */
.cm-editor-content-pane .customer-orders-grid .dg-grid-wrap,
.cm-editor-content-pane .customer-invoices-grid .dg-grid-wrap {
    margin-left: 0;
    margin-right: 0;
}

/* --- Datagrid checkbox column ----------------------------------------------
   A grid's select column holds a checkbox and nothing else, but the material
   checkbox is built for a labelled control: the label reserves 30px for the box
   it draws in its own padding, and `.checkbox` reserves 50px for label text
   that never follows. That made the column 70px wide for a 20px control, on
   every grid in the app.

   Scoped to `.check` cells so a checkbox in a form — where the label IS the
   point — keeps its width. */
.bootgrid-table th.check .checkbox,
.bootgrid-table td.check .checkbox {
    width: 30px;
}

.bootgrid-table th.check,
.bootgrid-table td.check {
    /* 10px gutter + the 30px the box needs. The 70px this used to be left 30px
       of empty cell between the checkbox and the first column. */
    width: 40px;
    padding-right: 0;
}

/* --- Website widgets grid --------------------------------------------------
   Status and the three action cells hold one control each, so they take only
   the room that control needs and the widget-name column absorbs the rest —
   which also pulls the buttons together into one block at the right-hand end
   instead of spreading them across the row.

   `width: 1%` is the auto-layout table idiom for shrink-to-content: the
   browser cannot honour it, so it gives the cell its minimum and grows the
   remaining auto column to fill the row. */
.webshops-grido th.col-is_live,
.webshops-grido td.col-is_live,
.webshops-grido th.col-stats,
.webshops-grido td.col-stats,
.webshops-grido th.col-share,
.webshops-grido td.col-share,
.webshops-grido th.col-duplicate,
.webshops-grido td.col-duplicate {
    width: 1%;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Surfaces — depth and light
   ===========================

   The app read flat because the card carried NEITHER a shadow NOR a border: a
   white rectangle butted straight against the grey, so it looked like a hole in
   the background rather than a surface above it. That, not the background
   colour, is what the eye reads as unfinished — the gradients below are a
   whisper next to it.

   Measured pixel budget at 1440x900, so the effort goes where the pixels are:
   on a grid page the card's own background is 21% and the table paints its own
   white over 47%; on a card page (home) the card is 74%. The body background is
   6% on both — a thin frame, which is why it can only ever be a whisper.
   --------------------------------------------------------------------------- */

/* Light rather than colour, and anchored so `--cm-background-color` stays the
   mid-tone the token claims to be.

   `fixed` is not optional: a gradient maps to its element, and this one runs to
   131,185px on a long list — over that distance every stop flattens into one
   colour and scrolling moves through it imperceptibly. Fixed maps it to the
   viewport instead; `min-height` is what then guarantees a box to paint it in
   when the page is shorter than the screen. Radial rather than linear because
   the bands curve, and a curve hides the banding a near-flat gradient would
   otherwise show as stripes.

   On `.app-root`, NOT on `body`. `background-image` paints over
   `background-color`, so a `body` rule silently covers every page that sets a
   background of its own — and several do, through `:body-class`: `login-page`
   and `registration-page` are the brand green, `site-body` is white. This
   element is rendered only by the SPA (`cs2.panels.app`), so the gradient
   reaches the app and nothing else, without a `:not()` list that the next
   `:body-class` page would have to be remembered in. */
.app-root {
    min-height: 100vh;
    background-image: radial-gradient(1200px 640px at 50% -12%, #f4f4f2 0%, #e8e8e6 62%);
    background-attachment: fixed;
}

body.dark .app-root {
    background-image: none;
}

/* The change that carries the look. Two shadows, not one: a 1px contact shadow
   that gives the edge definition a border would, and a wide, offset, very low
   alpha one for the lift. A single mid-opacity shadow reads as a drop shadow;
   these two read as elevation.

   The gradient's stop is a LENGTH, not a percentage: a grid card runs to
   thousands of pixels and a settings card to a few hundred, and a percentage
   would turn the tall one into a wash while the short one barely moved. A fixed
   300px gives both the same lift at the top. */
.card {
    background-image: linear-gradient(180deg, #ffffff 0px, #fcfcfa 300px);
    border-radius: 8px;
    box-shadow:
        0 1px 2px rgba(16, 24, 32, 0.05),
        0 10px 28px -8px rgba(16, 24, 32, 0.10);
}

/* The table paints its own white across ~47% of a grid page, sitting ON TOP of
   the card — without this the card's gradient is hidden exactly where the app is
   used most. The rows draw their own backgrounds (hover, selection, status), so
   only the table element itself gives way. */
.bootgrid-table {
    background-color: transparent;
}

/* The sidebar's own shadow is `rgba(51,51,51,.38) 0 0 10px` — tight, dark and
   centred, which is the detail that dates the whole frame. Replaced by a hairline
   of light on the edge itself plus a wide, weak cast in the brand's own green, so
   the shadow belongs to the palette instead of being neutral grey.
   `#sidebar` is carried so this outranks the id-specificity rule it replaces. */
.sidebar,
#sidebar {
    background-image: linear-gradient(180deg, #17474d 0%, #0d2e32 72%);
    box-shadow:
        1px 0 0 rgba(255, 255, 255, 0.05),
        10px 0 40px rgba(13, 46, 50, 0.14);
}

/* A field's label names it; the value is what anyone came to read. Bold on the
   label put the weight on the half that never changes, so every value read as
   secondary to its own caption. Quiet label, dark value — the pair now reads in
   the order it is used. */
.cm-field-label {
    font-weight: 400;
    color: var(--cm-table-heading-color);
}

/* A collapsed sidebar shows the avatar and nothing else.
   `.nav-footer` turns column when collapsed, so the four action icons stack
   under the avatar and run the rail past the viewport — which is where the
   scrollbar came from, not from the menu itself. They are all reachable again
   the moment the rail is opened, and the avatar is what identifies the session.

   Wide screens only: at or below the 900px cutoff this same rail IS the mobile
   navigation, and its footer is the only way to reach settings or log out. */
@media (min-width: 901px) {
    .sidebar.move-out .nav-footer .nav-footer-icon {
        display: none;
    }
}

/* The production grid's toolbar prefix: the date range, then how the rows are
   ordered within it.

   `toggle-sort-dir` reuses `.view-options-wrap`, which is the page-level tab
   strip — 40px tall with its own 20px margins. Dropped into a 26px toolbar row
   it stacked under the scope picker and took the whole row to 92px, so it is
   compacted to the row's height here rather than given a second markup. */
.production-scope {
    display: flex;
    align-items: center;
    gap: 14px;
}

.production-scope .view-options-wrap {
    margin: 0;
}

.production-scope .view-options-settings {
    border-bottom: none;
}

.production-scope .view-option-button {
    padding: 0 10px;
    min-height: 26px;
}

.production-scope .view-option-title {
    font-size: 13px;
    white-space: nowrap;
}

/* The production view's own three controls, in a popover off the toolbar.
   Each was built as a standalone panel widget, so they carry their own block
   layout; the popover gives them a column and a separator rather than
   restyling three widgets that are fine where they came from. */
.production-options {
    display: flex;
    flex-direction: column;
    /* Wide enough that `Op volgorde van leverdatum` stays on one line — the
       sort pair is two labels side by side and wraps below this. */
    min-width: 340px;
}

.production-options__group {
    padding: 10px 4px;
}

.production-options__group + .production-options__group {
    border-top: 1px solid var(--cm-table-line-color);
}

/* These carry page-level chrome — margins and a tab-strip underline sized for a
   full-width row. Inside a popover they only need to stack. */
.production-options .view-options-wrap,
.production-options .toggle-printed-overview-widget {
    margin: 0;
}

.production-options .view-options-settings {
    border-bottom: none;
}

/* The sort choice inside the production options popover. Bootstrap's `.radio`
   carries form-row margins sized for a stacked form; in a popover group the
   pair only needs to sit under the label above them. */
.production-sort .radio {
    margin: 0;
}

.production-sort .radio + .radio {
    margin-top: 6px;
}

/* The prep-list list is the panel here, not a menu opening over one, so it
   drops the absolute positioning and the frame it needs when it floats. */
.production-options .prep-list-header-filter.is-open .checkbox-wrap {
    position: static;
    border: none;
    box-shadow: none;
    padding: 0;
    width: auto;
    min-width: 0;
}

.production-options .prep-list-header-filter.is-open .checkbox-wrap-body {
    max-height: 220px;
    overflow-y: auto;
}

/* The production chips and prep-list pills take the status pill's shape and
   palette (see `.table .order-status:not(.filter-button), .invoice-status`), so
   a production sheet speaks the same visual language as every other status in
   the app. They were white-with-a-border boxes and a flat #6fd273 fill, which
   read as a third vocabulary on a screen that already has two.

   Unchecked is `--cm-neutral-gray`, not `--cm-light-gray`: the latter is green
   despite its name, and a green "not done yet" against a green "done" leaves
   the one distinction these chips exist to make resting on saturation alone. */
.production-progress-bar {
    /* Not `stretch` (the flex default): the pills wrap to a second line on a row
       with several prep lists, and the two icon chips beside them were stretching
       to that height — a chip's size would then depend on how many lists the
       order happens to touch. */
    align-items: flex-start;
}

.production-progress-bar .progress-entry {
    padding: 7px 10px;
    border-radius: 24px;
    height: auto;
    border: none;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background-color: var(--cm-neutral-gray);
    color: var(--cm-mid-gray);
}

/* The pill's own font-size would shrink the glyph to 0.7rem with it. */
.production-progress-bar .progress-entry .zmdi {
    font-size: 14px;
    line-height: 1;
}

/* Same pair as `.invoice-status.paid` — done is done, whatever the surface. */
.production-progress-bar .progress-entry.checked {
    background-color: var(--cm-status-confirmed-bg);
    color: var(--cm-status-confirmed);
    border: none;
}

/* One rhythm down the editor pane, whatever a section contributes.

   `.product-editor-section-cards` is a 20px-gapped column, but its children are
   the SECTIONS, not the cards — and a section renders however many cards it
   owns. So a section contributing one card sat 20px from its neighbours while
   the two inside `Overig`'s history section touched, with no margin anywhere to
   explain it. Giving each section the same column gap makes the spacing a
   property of the list rather than of how a section happens to be grouped. */
.product-editor-section-cards > * {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Datagrid header checkbox: partial selection ---------------------------
   A header checkbox governs one scope of rows — the page, or one group — and
   the selection can span several of them, so "some of these are selected" is a
   state it has to be able to show. Without it a half-selected page reads as
   fully unselected, and the click that follows is expected to select and in
   fact deselects.

   `indeterminate` is a DOM property, not an attribute, so the grid sets it on
   the node; this only draws it. The tick's `:after` box is reused as a dash:
   the `:before` outline stays (only `:checked` scales it away), and the dash
   sits inside it. */
.bootgrid-table .checkbox input:indeterminate + .input-helper:after {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    top: 8px;
    left: 3px;
    width: 11px;
    height: 0;
    border-left: 0;
    border-bottom: 2px solid #009688;
    border-bottom-left-radius: 0;
}

/* Parallel dev session badge (scripts/dev-session.bb).

   Rendered only when the page carries #dev-session-name, which the backend
   emits solely for a dev session — so this never appears in production or in
   the primary dev env. Several instances of the same app are otherwise
   indistinguishable on screen, and nobody reads the port in the URL bar. */
.dev-session-pill {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 10px;
  background: #009688;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .02em;
  vertical-align: middle;
  cursor: default;
}

/* Menu engineering: the explanatory banners above the scatter sat flush
   against the chart and the coverage strip. `:has` scopes this to the
   container that also holds the chart, so alerts elsewhere are untouched. */
div:has(> .cm-me-chart) > .alert-info {
  margin: 14px 0 18px;
}

/* Cost-movers window picker: the two spans as primary/secondary buttons, so
   the selected one reads the same way a selection does everywhere else.
   Ranged right in the card header, hard against the collapse chevron. */
.cm-me-movers-window {
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.cm-me-movers-window .btn {
  margin: 0;
}

/* ── GKS (Belgian fiscal black-box) order worklist ─────────────────────── */
/* The :gks orders view — order-level registration transparency. State
   colours are intentionally distinct from the event-status row colours so
   the two systems never read as the same thing. */

.gks-worklist {
    padding: 0 25px 40px;
}

.gks-worklist-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 10px 0 20px;
    color: #555;
}

.gks-worklist-intro p { margin: 0; max-width: 70ch; }

.gks-loading, .gks-empty {
    padding: 30px;
    color: #888;
    font-style: italic;
}

/* State colour tokens — Catermonkey palette (no off-brand blue) */
.gks-worklist {
    --gks-to-register: #c77d11;            /* CM amber/accent */
    --gks-error:       var(--cm-danger);   /* CM danger red */
    --gks-pending:     #8a8f94;            /* neutral grey (in-flight) */
    --gks-pre:         var(--cm-green);     /* CM dark teal — advance/pre-registered */
    --gks-registered:  #2f7a37;            /* success green */
    --gks-awaiting:    #9aa0a6;            /* neutral grey */
}

.gks-group {
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    margin-bottom: 14px;
    overflow: hidden;
}

.gks-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-weight: 600;
    border-left: 5px solid #ccc;
    background: #fafafa;
}

.gks-group-header .zmdi { font-size: 18px; }
.gks-group-count { color: #888; font-weight: 400; }
.gks-group-hint  { color: #999; font-weight: 400; font-size: 12px; margin-left: auto; }

.gks-group.to-register    .gks-group-header { border-left-color: var(--gks-to-register); }
.gks-group.error          .gks-group-header { border-left-color: var(--gks-error); }
.gks-group.pending        .gks-group-header { border-left-color: var(--gks-pending); }
.gks-group.pre-registered .gks-group-header { border-left-color: var(--gks-pre); }
.gks-group.registered     .gks-group-header { border-left-color: var(--gks-registered); }
.gks-group.awaiting       .gks-group-header { border-left-color: var(--gks-awaiting); }

.gks-group.to-register .gks-group-header .zmdi { color: var(--gks-to-register); }
.gks-group.error       .gks-group-header .zmdi { color: var(--gks-error); }

.gks-group-rows { background: #fff; }

.gks-row {
    /* Grid (not flex) so date / amount / action line up into columns across
       rows regardless of order-name length. The order column flexes; the rest
       are fixed tracks. */
    display: grid;
    /* order/name column flexes and gets a generous minimum so event names stay
       readable; the rest are tightened fixed tracks. */
    grid-template-columns: 22px 24px minmax(260px, 1fr) 148px 62px 96px 150px;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid #f0f0f0;
}
.gks-row:first-child { border-top: none; }
.gks-row-check { display: flex; align-items: center; justify-content: center; }

.gks-bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 8px 14px;
    background: rgba(132, 175, 176, 0.16); /* --cm-light-green tint */
    border: 1px solid var(--cm-light-green);
    border-radius: 6px;
}
.gks-bulk-count { font-weight: 600; color: var(--cm-green); }

/* Select-all header above the flat list */
.gks-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 2px 2px 2px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cm-green);
    cursor: pointer;
    user-select: none;
}
.gks-select-all input { cursor: pointer; }

/* Coloured code pill */
.gks-pill {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background: var(--gks-awaiting);
}
.gks-pill.to-register    { background: var(--gks-to-register); }
.gks-pill.error          { background: var(--gks-error); }
.gks-pill.pending        { background: var(--gks-pending); }
.gks-pill.pre-registered { background: var(--gks-pre); }
.gks-pill.registered     { background: var(--gks-registered); }
.gks-pill.out-of-scope,
.gks-pill.awaiting       { background: var(--gks-awaiting); }

.gks-row-order      { display: flex; flex-direction: column; overflow: hidden; }
.gks-row-order-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gks-row-subline    { font-size: 11px; color: #888; }
/* Pro forma badge — always the same green ✓, as a row's own status or a footnote */
.gks-row-subline.gks-row-prereg { font-size: 12px; font-weight: 600; color: #2f7a37; }

/* Per-row status label (replaces grouping headers) */
.gks-row-status { font-size: 11px; font-weight: 600; }
.gks-row-status.to-register       { color: var(--gks-to-register); }
.gks-row-status.to-invoice        { color: var(--gks-to-invoice); }
.gks-row-status.awaiting-invoice  { color: var(--gks-to-invoice); }
.gks-row-status.partially-invoiced{ color: var(--gks-partial); }
.gks-row-status.error             { color: var(--gks-error); }
.gks-row-status.pending           { color: var(--gks-pending); }
.gks-row-status.pre-registered    { color: var(--gks-pre); }
.gks-row-status.registered        { color: var(--gks-registered); }
.gks-row-status.awaiting          { color: var(--gks-awaiting); }
.gks-row-substatus { color: #888; font-weight: 400; }

/* Flat row list (no grouping headers) */
.gks-rows-flat {
    border: 1px solid #e6e9ea;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.gks-row-name    { color: #666; }
.gks-row-date    { color: #555; }
.gks-row-persons { color: #888; }
.gks-row-amount  { font-variant-numeric: tabular-nums; text-align: right; }
.gks-row-correctable { color: var(--gks-registered); font-size: 12px; }
.gks-row-action  { display: flex; justify-content: flex-end; align-items: center; }
/* Next-step hint for invoice-flow rows (no manual Register button) */
.gks-row-next    { font-size: 12px; font-weight: 600; color: var(--gks-to-invoice); white-space: nowrap; }

.gks-worklist .gks-filter {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
}

/* ── GKS row click + fiscal detail modal ──────────────────────────────── */
.gks-row-clickable { cursor: pointer; }
.gks-row-clickable:hover { background: #f6faf6; }

.gks-detail { padding: 4px 2px; }

.gks-record {
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.gks-record.failed { border-color: #e2b6b1; background: #fdf3f2; }
.gks-record-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.gks-record-label { font-weight: 600; }
.gks-record-status {
    font-size: 11px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eee;
    color: #555;
}
.gks-record-status.ok      { background: #e3f4e4; color: #2f7a37; }
.gks-record-status.failed  { background: #f7dcd9; color: #b0382c; }
.gks-record-status.pending { background: #e7ebef; color: #5a6b7b; }
.gks-record-error { color: #b0382c; margin-bottom: 8px; font-size: 13px; }

.gks-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 13px;
    border-bottom: 1px dotted #eee;
}
.gks-kv-label { color: #888; }
.gks-kv-value { font-variant-numeric: tabular-nums; text-align: right; word-break: break-all; }
.gks-record-verify { margin: 10px 0; font-size: 12px; word-break: break-all; }
.gks-record-verify .gks-qr { display: block; margin-top: 8px; }
.gks-record-verify .gks-qr img { width: 120px; height: 120px; }
.gks-print-btn { margin-top: 10px; }

/* ── Kasticket (printable VAT receipt) ────────────────────────────────── */
.gks-kasticket-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 0;
    overflow: auto;
    z-index: 4000;
}
.gks-kasticket-toolbar { margin-bottom: 14px; display: flex; gap: 8px; }

.gks-kasticket-note {
    max-width: 340px;
    margin-bottom: 14px;
    padding: 8px 10px;
    background: #fff8e1;
    border-left: 3px solid #f0ad4e;
    color: #6b5900;
    font-size: 12px;
    line-height: 1.4;
}

.gks-kasticket {
    background: #fff;
    width: 340px;
    padding: 18px 20px;
    font-family: "Courier New", monospace;
    font-size: 12px;
    color: #111;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.gks-kasticket hr { border: none; border-top: 1px dashed #999; margin: 8px 0; }
.kt-header { text-align: center; line-height: 1.5; }
.kt-title { font-weight: 700; font-size: 14px; letter-spacing: 1px; margin-bottom: 4px; }
.kt-line, .kt-total, .kt-vat-row, .kt-pay-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    line-height: 1.6;
}
.kt-line-name { flex: 1; }
.kt-line-qty  { color: #555; }
.kt-line-amt  { font-variant-numeric: tabular-nums; }
.kt-total { font-weight: 700; }
.kt-vat { margin-top: 6px; }
.kt-vat-row span { flex: 1; text-align: right; }
.kt-vat-row span:first-child { text-align: left; }
.kt-vat-head { color: #555; border-bottom: 1px solid #ddd; }
.kt-control { line-height: 1.6; word-break: break-all; }
.kt-footer { text-align: center; margin-top: 8px; color: #444; }
.kt-qr { text-align: center; margin-top: 10px; }
.kt-qr img { width: 130px; height: 130px; }

@media print {
    /* The kasticket renders into #gks-print-root (a direct child of <body>).
       Hide every other top-level node so only the ticket prints — otherwise
       the order/worklist page behind it paginates into blank pages. */
    body > *:not(#gks-print-root) { display: none !important; }
    #gks-print-root .gks-kasticket-overlay {
        position: static !important;
        background: none !important;
        padding: 0 !important;
        overflow: visible !important;
        display: block !important;
        z-index: auto !important;
    }
    #gks-print-root .gks-kasticket-toolbar,
    #gks-print-root .gks-kasticket-note { display: none !important; }
    #gks-print-root .gks-kasticket {
        box-shadow: none !important;
        width: 100% !important;
        margin: 0 auto !important;
        page-break-inside: avoid;
    }
}

/* GKS coverage states added with the invoice-coverage model */
.gks-worklist {
    --gks-to-invoice: #c77d11;
    --gks-partial:    #8a6d3b;
}
.gks-group.to-invoice         .gks-group-header { border-left-color: var(--gks-to-invoice); }
.gks-group.partially-invoiced .gks-group-header { border-left-color: var(--gks-partial); }
.gks-group.to-invoice         .gks-group-header .zmdi { color: var(--gks-to-invoice); }
.gks-pill.to-invoice          { background: var(--gks-to-invoice); }
.gks-pill.partially-invoiced  { background: var(--gks-partial); }

/* GKS awaiting-invoice (on-invoice order, event passed, no invoice yet) */
.gks-worklist { --gks-awaiting-invoice: #b5651d; }
.gks-group.awaiting-invoice .gks-group-header { border-left-color: var(--gks-awaiting-invoice); }
.gks-group.awaiting-invoice .gks-group-header .zmdi { color: var(--gks-awaiting-invoice); }
.gks-pill.awaiting-invoice { background: var(--gks-awaiting-invoice); }

/* ── GKS settings panel ───────────────────────────────────────────────── */
.gks-settings .gks-config-form { max-width: 520px; }
.gks-settings .gks-conn p { color: #555; max-width: 60ch; }
.gks-conn-result { margin-top: 12px; padding: 10px 14px; border-radius: 6px; }
.gks-conn-result.ok  { background: #e3f4e4; border: 1px solid #bfe3c2; }
.gks-conn-result.err { background: #fdf3f2; border: 1px solid #e2b6b1; }
.gks-conn-status { font-weight: 600; margin: 0 0 6px; }
.gks-conn-result ul { margin: 0; padding-left: 18px; }

/* GKS certification cases: our payload beside the FPS reference */
.gks-cases-row:hover { background: #f5f5f5; }
.gks-cases-detail { padding: 8px 4px 4px; }
.gks-cases-order { margin-bottom: 14px; }
.gks-cases-step { border-top: 1px solid #eee; padding: 8px 0; }
.gks-cases-step:first-of-type { border-top: 0; }
.gks-cases-step-head { margin-bottom: 4px; }
.gks-cases-json {
    background: #f7f7f8;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.4;
    margin: 0;
    max-height: 320px;
    overflow: auto;
    padding: 6px 8px;
    white-space: pre;
}
.gks-cases-diff td { vertical-align: top; }
.gks-cases-diff td:first-child { font-family: monospace; white-space: nowrap; }
.gks-cases-json-toggle > summary {
    color: #337ab7;
    cursor: pointer;
    display: list-item;
    margin: 4px 0;
    user-select: none;
}
.gks-cases-json-toggle > summary:hover { text-decoration: underline; }
.gks-cases-payloads { margin: 8px 0 4px; }
.gks-cases-payloads h6 {
    color: #666;
    font-size: 11px;
    letter-spacing: .04em;
    margin: 0 0 4px;
    text-transform: uppercase;
}
.gks-cases-payload-head { color: #666; font-size: 11px; margin-bottom: 2px; }

/* Annotated payload: the JSON, with a verdict in the margin */
.gks-cases-annotated { max-height: none; white-space: normal; }
.gks-json-line { display: flex; align-items: baseline; white-space: pre; }
.gks-json-mark {
    display: inline-block;
    flex: 0 0 1.4em;
    font-weight: 700;
    text-align: center;
}
.gks-json-text { flex: 1 1 auto; }
.gks-json-line.is-ok .gks-json-mark { color: #1a7f37; }
.gks-json-line.is-diff { background: #fdecea; }
.gks-json-line.is-diff .gks-json-mark { color: #b42318; }
.gks-json-line.is-diff .gks-json-text { color: #b42318; font-weight: 600; }
.gks-json-line.is-ignored .gks-json-text,
.gks-json-line.is-uncompared .gks-json-text { color: #999; }
.gks-json-expected { color: #b42318; font-style: italic; }
.gks-verdict { font-size: 12px; padding: 3px 8px; }
.gks-verdict-mark { font-size: 15px; vertical-align: -1px; }
.gks-verdict-mark.is-ok { color: #1a7f37; }
.gks-verdict-mark.is-bad { color: #b42318; }
.gks-testcase-title { font-weight: 600; margin: 6px 0 2px; }
.gks-testcase-divergence {
    background: #fff8e6;
    border-left: 3px solid #e0b34d;
    color: #5c4813;
    font-size: 12.5px;
    margin: 4px 0 10px;
    padding: 6px 10px;
    white-space: pre-line;
}
.gks-testcase-scenario-text {
    background: #f7f7f8;
    border: 0;
    border-left: 3px solid #d6d6d6;
    border-radius: 0;
    color: #333;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.45;
    margin: 4px 0 8px;
    padding: 6px 10px;
    white-space: pre-wrap;
}
.gks-testcase-scenario {
    color: #666;
    font-size: 12px;
    margin: 0 0 10px;
    padding-left: 20px;
}
.gks-testcase-scenario > li { margin: 1px 0; }
.gks-testcase-scenario code {
    background: none;
    color: #337ab7;
    font-size: 12px;
    padding: 0;
}
.gks-testcase-section > details > summary {
    font-family: monospace;
    font-size: 12px;
}

/* A value change awaiting the caterer's go-ahead */
.gks-card-pending {
    background: #fffaf0;
    border: 1px solid #e6d3a3;
    border-radius: 6px;
    margin: 12px 0;
    padding: 10px 14px;
}
.gks-card-pending h5 { margin: 0 0 4px; font-weight: 600; }
.gks-card-pending-lines { margin: 8px 0; background: #fff; }
.gks-card-pending-lines td { padding: 3px 6px; font-size: 12px; }

/* Certification-case comparison inside the order card */
.gks-testcase-section {
    border-top: 1px solid #e2e2e2;
    margin-top: 14px;
    padding-top: 12px;
}
.gks-testcase-section h5 { margin: 0 0 6px; }

/* GKS ticket stamp (PRO FORMA / not-a-valid-VAT-receipt legend) */
.gks-kasticket .kt-stamp {
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
    border: 1px dashed #999;
    padding: 4px;
    margin: 8px 0;
    text-transform: uppercase;
}
.gks-detail-open-order {
    display: inline-block;
    margin: 0 0 14px;
    font-weight: 600;
    color: #1f6f78;
    cursor: pointer;
}
.gks-detail-open-order:hover { text-decoration: underline; }
.kt-issuer-name { font-weight: 600; }
.kt-device { font-size: 10px; word-break: break-all; color: #555; }

/* GKS fiscal control block on the on-screen invoice. Mirrors the PDF block
   (invoices/gks-invoice-pdf-block): the same lines, in the same order, at the
   foot of the document — screen and print are the same fiscal document. */
.gks-invoice-control {
    margin-top: 24px;
    padding-top: 10px;
    border-top: 1px solid #e3e3e3;
    font-size: 11px;
    line-height: 1.45;
    color: #555;
}
.gks-invoice-control-line { white-space: pre; font-family: "SF Mono", Menlo, monospace; }
.gks-invoice-control-ref  { margin-top: 6px; }

/* --- Global search palette (CAT-1629) --------------------------------------
   Hits are plain anchors; order/invoice pills reuse the shared status-pill
   shape (see the `.table .order-status` rule, which includes
   `.global-search-hit .order-status`).

   A centred palette rather than the from-right modal the rest of the app uses:
   search is entered from the left nav or from `/` anywhere, so a panel on the
   far right sent the eye across the whole viewport to read the answer. */
.global-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    justify-content: center;
    /* Held near the top rather than centred vertically: the palette grows
       downwards as results arrive, and a vertically centred one would slide the
       field the reader is typing into. */
    align-items: flex-start;
    padding: 12vh 20px 20px;
    background: rgba(13, 46, 50, 0.45);
    /* A scroll container that contains its overscroll, so a wheel over the
       scrim does not scroll the page behind the palette. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.global-search-palette {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    /* Whatever is left under the 12vh inset, so a long result list scrolls
       inside the palette instead of running off the screen. */
    max-height: 76vh;
    border-radius: 12px;
    background: var(--cm-white);
    box-shadow:
        0 1px 2px rgba(16, 24, 32, 0.06),
        0 24px 60px -12px rgba(16, 24, 32, 0.30);
    overflow: hidden;
}

/* The field is the palette's header — it does not scroll with the results. */
.global-search-palette-field {
    flex: 0 0 auto;
    padding: 14px;
    border-bottom: 1px solid var(--cm-lines-color);
}

.global-search-palette-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

.global-search-no-results {
    color: var(--cm-table-heading-color);
}

/* The way out when the palette fills the screen. Hidden elsewhere: on a desktop
   the scrim and Esc both close it, and a third affordance beside the field's own
   clear button would read as a second clear. */
.global-search-close {
    display: none;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cm-font-color);
    font-size: 20px;
}

/* iOS zooms the page whenever it focuses an input set below 16px, and
   `.form-control` is 13px. Overridden here rather than app-wide: 16px is right
   for the palette's one prominent field, and raising every input in the product
   is a change of a different size. The rule is not `pointer: coarse` — Safari
   applies the zoom by font size alone. */
@media (max-width: 600px) {
    .global-search-palette input.form-control {
        font-size: 16px;
    }
}

/* On a phone the palette is the screen. */
@media (max-width: 600px) {
    .global-search-overlay {
        padding: 0;
    }
    .global-search-palette {
        max-width: none;
        max-height: none;
        height: 100%;
        border-radius: 0;
    }
    .global-search-palette-field {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    /* The field takes the room the close button leaves. */
    .global-search-palette-field > .text-input,
    .global-search-palette-field > div {
        flex: 1 1 auto;
        min-width: 0;
    }
    .global-search-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: 2;
    }
}

/* Hit rows are cards, matching the search-preview.svg attract illustration:
   light ground, hairline border, title left with the status pill right. */
.global-search-hit {
    display: block;
    padding: 10px 14px;
    margin-bottom: 8px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    background: #fafafa;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.global-search-hit:hover,
.global-search-hit:focus {
    background: #f3f3f0;
    border-color: #e3e3e0;
    color: inherit;
    text-decoration: none;
}
/* The keyboard's cursor. Focus stays in the field while the arrows walk the
   list, so the selected row cannot be styled with :focus — it needs a mark of
   its own.

   Neutral, and only a step past hover: at row size an accent — a ring, a fill
   or a leading edge — reads as a warning rather than a cursor, and hovering
   moves the selection anyway, so the two never need to be told apart. */
.global-search-hit.selected {
    background: #eeedea;
    border-color: var(--cm-lines-color);
}
.global-search-hit-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.global-search-hit-title {
    font-weight: 500;
    min-width: 0;
}
.global-search-hit-meta {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 2px;
}
.global-search-hit-kind {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
    margin-right: 6px;
}
/* Why a record matched when the answer is not in its title or meta line: the
   note or comment the query hit. One line, clipped — it is an explanation, not
   the content, and a long comment must not push the next hit off the palette. */
.global-search-hit-snippet {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.global-search-hit-snippet mark {
    background: #fdf0c8;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* Listing-mode switch: a quiet segmented control on a track, not bootstrap
   buttons — the active segment is the filled one. */
.global-search-mode {
    display: inline-flex;
    background: #efefec;
    border-radius: 16px;
    padding: 2px;
}
.global-search-mode button {
    border: none;
    background: transparent;
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.4;
    color: #666;
    cursor: pointer;
}
.global-search-mode button.active {
    background: #fff;
    color: #333;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Attract mode: shown before the first keystroke.

   Ranged left, like every other panel in the app. Centred copy under a
   left-aligned search field gave the panel two axes and read as a marketing
   splash rather than as part of the product.

   Palette from the tokens, not from hardcoded greys: the lead is the app's own
   text colour so it leads, and the two hints take the muted heading colour
   rather than an opacity that also fades the glyphs. */
/* Sits directly under the field now, so it needs no gap of its own beyond the
   palette body's padding. */
.global-search-attract {
    color: var(--cm-font-color);
}
/* No max-width: the panel is already a narrow column, so a measure inside it
   only made the copy a second, narrower column inside the first. */
.global-search-attract p {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.5;
}
.global-search-attract p:first-child {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
}
.global-search-attract-hint {
    color: var(--cm-table-heading-color);
}

/* The `/` shortcut means nothing on a touch device. */
@media (pointer: coarse) {
    .global-search-attract-tip { display: none; }
}


/* --- Editor title rows on a phone -------------------------------------------
   The customer, product and ingredient editors all head their drawer with one
   flex row: title, then the layout toggle and the save/cancel buttons. At phone
   width the title has no room to wrap into, so the row overran the viewport and
   took the buttons off the right-hand edge with it — reachable only by scrolling
   the page sideways.

   The row wraps instead, and the actions drop onto their own line under the
   title. `min-width: 0` on the title is what actually lets it wrap: a flex item
   defaults to `min-width: auto`, so a long unbroken customer name keeps the row
   wider than the screen however the row is told to behave.

   900px, matching the breakpoint the left-nav editor layout already stacks at,
   so a drawer changes shape once rather than twice. */
@media screen and (max-width: 900px) {
    .cm-editor-title-row {
        flex-wrap: wrap;
    }
    .cm-editor-title-row .cm-editor-title-text {
        flex: 1 1 100%;
        min-width: 0;
    }
    /* The section select follows the title directly here; the heading's
       desktop margin and the nav pane's padding otherwise stack into 36px of
       nothing between them. */
    .cm-editor-title-row h3 {
        min-width: 0;
        overflow-wrap: anywhere;
        margin-bottom: 4px;
    }
    /* The spacer only exists to push the actions right on a wide row; on a
       wrapped one it would claim a line of its own. */
    .cm-editor-title-row > .flex-grow {
        display: none;
    }
    /* Actions sit together on the second line, and each takes the full width so
       they stack rather than crowd. */
    .cm-editor-title-row > *:not(.cm-editor-title-text) {
        flex: 1 1 100%;
        margin-right: 0 !important;
    }
    .cm-editor-title-row .btn {
        width: 100%;
    }
    /* A wrapper whose control rendered nothing (the layout toggle on a phone)
       still claims a wrapped line's worth of row gap. */
    .cm-editor-title-row > *:not(.cm-editor-title-text):empty {
        display: none;
    }
}


/* Table headings take their weight from the browser, which uses full bold. 600
   is the top of our ladder, and a heading row does not need to outweigh a page
   title to read as a heading. Scoped to our own tables so third-party markup
   keeps whatever it came with. */
.table th,
.bootgrid-table th,
.cm-totals__table th {
    font-weight: 600;
}


/* Headings state their own weight instead of taking the browser's.

   Nothing in our CSS set one, so every `<h1>`–`<h6>` in the app was on the UA
   stylesheet's `bold` — which nobody chose, and which was invisible while the
   only Figtree face on the page was Regular and every weight resolved to the
   same smear. With real cuts loaded, that default renders as full Bold: about a
   third more ink than the app carried before.

   600 is the ceiling. Card titles were already there (CAT-1476 stepped them
   down deliberately), so this brings drawer and modal titles into line with
   them and leaves hierarchy to size. 700 stays for badges, pills and initials,
   which are small enough to need it.

   `.site-*` pages set their own heading weight and are untouched. */
.app-root h1,
.app-root h2,
.app-root h3,
.app-root h4,
.app-root h5,
.app-root h6,
.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6 {
    font-weight: 600;
}

/* Bulk invoice send — the per-row send outcome, and the card holding the
   invoices that have no recipient to send to. */
.cm-send-batch-table > tbody > tr > td {
    vertical-align: middle;
}

.cm-send-batch-table .select select {
    min-width: 215px;
    padding-right: 24px;
    /* .input-sm pairs a 30px height with a 30px line-height, so the line box is
       taller than the content box and descenders are clipped. */
    line-height: normal;
}

.cm-send-batch-ok {
    color: #4caf50;
}

.cm-send-batch-error {
    color: #f44336;
}

.cm-send-batch-skipped {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
}

.cm-send-batch-skipped ul {
    padding-left: 18px;
}

/* A three-up field grid on a phone gives each label a third of 390px, so every
   label breaks into single-word lines above a field too narrow to read. The
   product and webshop editors' sections stack instead. */
@media (max-width: 600px) {
    .widget-section .items {
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
    }

    .widget-section .items > * {
        grid-column: 1 / -1 !important;
    }

    .product-incl-vat-item {
        margin-top: 0;
        margin-left: 0;
    }
}
/* --- Widget editor on a phone ----------------------------------------------
   Its cards are rows of controls — weekday checkboxes, column-count radios,
   payment methods, a product tile beside its drag handle — laid out as flex
   rows that do not wrap. At 390px they ran up to 380px past their card and
   the page itself scrolled to 813px. They wrap, and their children may shrink:
   a flex child's automatic minimum is its own content, so one long product
   name held its tile at 586px inside a 238px row.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .widget-editor .flex,
    .widget-editor .row,
    .widget-editor .weekdays,
    .widget-editor .zipcode-row,
    .widget-editor .dropped-element,
    .widget-editor .blocked-days-grid,
    .widget-editor .blocked-timeslots-grid,
    .widget-editor .pickers,
    .widget-editor .payment-methods-boxes,
    .widget-editor .tag-box-wrap {
        flex-wrap: wrap;
    }

    .widget-editor .flex > *,
    .widget-editor .row > *,
    .widget-editor .dropped-element > *,
    .widget-editor .blocked-days-grid > *,
    .widget-editor .blocked-timeslots-grid > *,
    .widget-editor .pickers > *,
    .widget-editor .payment-methods-boxes > *,
    .widget-editor .tag-box-wrap > * {
        min-width: 0;
    }

    /* Fields given a fixed pixel width for a desktop column. */
    .widget-editor .form-control,
    .widget-editor input[type="text"],
    .widget-editor input[type="number"] {
        max-width: 100%;
    }

    /* A button whose label is a sentence: it wraps rather than setting the
       card's width from its own line. */
    .widget-editor .btn {
        max-width: 100%;
        white-space: normal;
    }

    /* The checkbox pattern hides a 300px-wide input behind its label to widen
       the hit area; on a phone that area reached past the card, so a tap
       beside the card toggled the box. */
    .widget-editor label > input[type="checkbox"],
    .widget-editor label > input[type="radio"] {
        max-width: 100%;
    }
}

/* The pricelist's meal-service settings are a two-column form, not a grid: a
   label on the left and a paragraph of explanation plus its control on the
   right. Without a floor the label column collapses to the narrowest word and
   wraps every heading over three lines, because the explanations claim all the
   width an auto table will give them. */
.pricelist-menu-settings > tbody > tr > td:first-child {
    width: 220px;
    min-width: 220px;
}

/* ── Booking Experts order card (CAT-1569) ─────────────────────────────── */
.order-editor-grid .bookingexperts-order-card { grid-column: 1 / -1; }
.be-card-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.be-card-booking { border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; }
.be-card-booking-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; background: #f7f8fa; }
.be-card-booking-nr { font-weight: 600; font-size: 13px; color: #1f6f78; }
.be-card-unit { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 8px 10px; border-top: 1px solid #eef0f2; }
.be-card-unit-main { display: flex; flex-direction: column; gap: 2px; }
.be-card-unit-name { font-weight: 600; }
.be-card-unit-guest { font-weight: 400; color: #6b7280; }
.be-card-unit-dates, .be-card-unit-party { font-size: 12px; color: #6b7280; }
.be-card-unit-meta { display: flex; align-items: center; gap: 10px; }
.be-card-unit-price { font-weight: 600; }
.be-card-unit-state { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 10px; background: #e5e7eb; color: #374151; }
.be-card-unit-state.confirmed { background: #d1fae5; color: #065f46; }
.be-card-unit-state.temporary, .be-card-unit-state.option { background: #fef3c7; color: #92400e; }
.be-card-unit-state.cancelled { background: #f3f4f6; color: #9ca3af; }
.be-card-unit-state.failed { background: #fee2e2; color: #991b1b; }
.be-card-unit-changed { font-size: 11px; color: #9ca3af; }
.be-card-unit-expiry { font-size: 11px; color: #92400e; }
.be-card-unit-error { flex-basis: 100%; font-size: 12px; color: #991b1b; }
.be-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.be-card-settled { font-size: 12px; color: #6b7280; }

/* ---- Rostering (#/roster) ------------------------------------------------ */
.ros-body { padding: 12px 16px 20px; }
.ros-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.ros-toolbar .ros-location { width: auto; max-width: 240px; display: inline-block; }
.ros-weeknav { display: inline-flex; align-items: center; gap: 4px; }
.ros-weeknav .btn { padding: 4px 10px; }
.ros-weeklabel { padding: 0 8px; font-weight: 600; white-space: nowrap; }
.ros-toggle { font-weight: 400; margin: 0; cursor: pointer; }
.ros-total { color: #6b7280; font-variant-numeric: tabular-nums; }
.ros-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.ros-gridwrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 6px; }
.ros-grid { display: grid; grid-template-columns: 170px repeat(7, minmax(120px, 1fr)); min-width: 1010px; font-size: 12px; }
.ros-grid > div { border-bottom: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; min-height: 56px; padding: 5px 6px; }
.ros-grid > div:nth-child(8n) { border-right: 0; }
.ros-hd { min-height: 0 !important; background: #f7f8fa; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; font-weight: 600; padding: 7px 8px !important; }
.ros-hd.ros-today { color: #1f6f78; }
.ros-who { background: #f7f8fa; cursor: pointer; }
.ros-who b { display: block; font-size: 13px; }
.ros-who span { color: #6b7280; font-variant-numeric: tabular-nums; }
.ros-who span.ros-over { color: #b45309; }
.ros-openrow { cursor: default; }
.ros-grouphd { background: #eef2f6; font-weight: 600; color: #374151; min-height: 0 !important; padding: 5px 8px !important; }
.ros-cell { cursor: pointer; }
.ros-cell:hover { background: #f9fafb; }
.ros-cell.ros-today { background: #f5fbfb; }
.ros-cell.ros-unavailable { background: repeating-linear-gradient(135deg, #eceff1 0 6px, #f7f8fa 6px 9px); }
.ros-hint { display: block; color: #9ca3af; font-style: italic; font-size: 11px; margin-top: 2px; }
.ros-shift { border-radius: 4px; padding: 4px 6px 4px 8px; border-left: 4px solid #1f6f78; background: #dcefee; line-height: 1.25; margin-bottom: 4px; position: relative; }
.ros-shift b { display: block; font-variant-numeric: tabular-nums; }
.ros-shift .ros-role { display: block; color: #374151; }
.ros-shift .ros-note { display: block; color: #6b7280; font-size: 11px; }
.ros-shift.ros-draft { border-left-color: #b45309; background: repeating-linear-gradient(135deg, #fdf1d6 0 5px, #fff 5px 8px); }
.ros-shift.ros-cancelled { border-left-color: #9ca3af; background: #f3f4f6; color: #9ca3af; text-decoration: line-through; }
.ros-shift .ros-tag { font-style: normal; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #b45309; }
.ros-shift.ros-cancelled .ros-tag { color: #9ca3af; }
.ros-shift.ros-conflict { box-shadow: inset 0 0 0 1px #dc2626; }
.ros-shift .ros-tag.ros-dimona { display: block; color: #6b7280; }
.ros-shift .ros-tag.ros-dimona-accepted, .ros-shift .ros-tag.ros-dimona-warning { color: #065f46; }
.ros-shift .ros-tag.ros-dimona-rejected, .ros-shift .ros-tag.ros-dimona-failed, .ros-shift .ros-tag.ros-dimona-stalled { color: #b91c1c; font-weight: 700; }
.ros-dimona-refused { background: #fee2e2; color: #991b1b; }
.ros-dimona-undeclared { border: 1px solid #fecaca; border-radius: 6px; padding: 8px 12px; margin-bottom: 14px; background: #fff7f7; }
.ros-dimona-undeclared h4 { margin: 4px 0 8px; font-size: 14px; color: #991b1b; }
.ros-dimona-body { font-size: 11px; white-space: pre-wrap; word-break: break-all; margin: 6px 0; }
.ros-tablewrap { overflow-x: auto; }
.ros-dimona .ros-status { white-space: nowrap; }
.ros-shift .ros-warn { position: absolute; top: 2px; right: 5px; color: #dc2626; font-size: 12px; }
.ros-openrow ~ .ros-cell .ros-shift, .ros-grid .ros-cell .ros-shift.ros-open { border-left-color: #b4433a; }
.ros-editor .ros-times { display: flex; gap: 10px; }
.ros-editor .ros-times .form-group { flex: 1; }
.ros-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ros-editor-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.ros-danger { color: #b91c1c; }
.ros-tabactions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.ros-table td, .ros-table th { vertical-align: middle; }
.ros-myshifts .ros-myshift { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eef0f2; align-items: baseline; }
.ros-myshifts .ros-myshift b { min-width: 110px; }
.ros-myshifts .ros-myshift .ros-when { font-variant-numeric: tabular-nums; }
.ros-myshifts .ros-myshift .ros-where { color: #6b7280; }
@media (max-width: 767px) {
  .ros-grid { grid-template-columns: 130px repeat(7, minmax(110px, 1fr)); }
  .ros-actions { margin-left: 0; }
}
/* rostering phase 2: approvals, availability, portal self-service */
.ros-requests h4 { margin: 14px 0 8px; font-size: 14px; }
.ros-reqgroup { border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; background: #fff; }
.ros-reqshift { display: block; margin-bottom: 6px; }
.ros-reqrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid #eef0f2; flex-wrap: wrap; }
.ros-reqname .ros-note { color: #6b7280; }
.ros-reqactions { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.ros-setting { display: block; margin: 8px 0; }
.ros-cell .ros-window { display: block; font-size: 12px; }
.ros-cell.ros-unknown { background: #fafafa; }
.ros-myshifts .ros-myshift { flex-wrap: wrap; }
.ros-myshifts .ros-offerbtn { margin-left: auto; }
.ros-myshifts .ros-tagged { margin-left: auto; color: #1f6f78; font-weight: 600; font-size: 12px; }
.ros-offer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0 12px; }
.ros-offer .form-control { width: auto; max-width: 240px; display: inline-block; }
.ros-finelayer { margin-top: 18px; }
.ros-finelayer > b { display: block; margin: 10px 0 6px; }
.ros-windowrow, .ros-blockrow { display: flex; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.ros-windowday { min-width: 90px; }
.ros-blocknew .form-control { width: auto; display: inline-block; max-width: 200px; }
/* rostering phase 3: hours, kiosk settings, portal tiles */
.ros-hours .ros-entries-row td { background: #f7f8fa; padding: 6px 14px; }
.ros-entry { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #eef0f2; flex-wrap: wrap; font-size: 13px; }
.ros-entry b { min-width: 120px; }
.ros-entry .ros-when { font-variant-numeric: tabular-nums; min-width: 110px; }
.ros-entry .ros-where { color: #6b7280; }
.ros-entry .ros-worked { font-weight: 600; margin-left: auto; }
.ros-status { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 10px; background: #e5e7eb; color: #374151; }
.ros-status-open { background: #fef3c7; color: #92400e; }
.ros-status-approved { background: #d1fae5; color: #065f46; }
.ros-pinrow { display: flex; gap: 8px; align-items: center; }
.ros-pinrow .form-control { max-width: 140px; }
.ros-kiosks { margin-top: 20px; }
.ros-kioskrow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.ros-kiosklink { font-family: monospace; font-size: 12px; }
.ros-hourtiles { display: flex; gap: 16px; flex-wrap: wrap; }
.ros-hourtile { border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 16px; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.ros-hourtile b { font-size: 22px; font-variant-numeric: tabular-nums; }
.ros-hourtile-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
/* ---- kiosk page ---- */
body.kiosk-body { background: #111614; margin: 0; }
.kiosk { min-height: 100vh; background: #111614; color: #e7ece8; font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif; padding: 24px; box-sizing: border-box; -webkit-user-select: none; user-select: none; }
.kiosk-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.kiosk-venue { font-size: 20px; font-weight: 600; }
.kiosk-clock { font-size: 40px; font-variant-numeric: tabular-nums; font-weight: 700; }
.kiosk-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.kiosk-name { position: relative; background: #1d2521; border: 0; border-radius: 12px; padding: 18px 10px 14px; color: #e7ece8; font-size: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.kiosk-name:active { background: #2c3630; }
.kiosk-avatar { width: 48px; height: 48px; border-radius: 50%; background: #2c3630; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.kiosk-name.kiosk-in .kiosk-avatar { box-shadow: 0 0 0 3px #111614, 0 0 0 6px #5cc3a2; }
.kiosk-name.kiosk-break .kiosk-avatar { box-shadow: 0 0 0 3px #111614, 0 0 0 6px #e0b457; }
.kiosk-dot { position: absolute; top: 10px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: #5cc3a2; }
.kiosk-hint { color: #6f7a73; font-size: 13px; margin-top: 18px; }
.kiosk-pad { max-width: 420px; margin: 0 auto; }
.kiosk-pad-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 18px; }
.kiosk-pad-head .kiosk-shift { color: #9aa59e; font-size: 14px; }
.kiosk-back { margin-left: auto; background: #1d2521; border: 0; color: #e7ece8; font-size: 22px; width: 44px; height: 44px; border-radius: 50%; }
.kiosk-dots { text-align: center; margin: 10px 0 16px; }
.kiosk-dotpin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin: 0 6px; background: #2c3630; }
.kiosk-dotpin.filled { background: #5cc3a2; }
.kiosk-digits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kiosk-digit { background: #1d2521; border: 0; border-radius: 12px; color: #e7ece8; font-size: 28px; padding: 18px 0; font-variant-numeric: tabular-nums; }
.kiosk-digit:active { background: #2c3630; }
.kiosk-digit.kiosk-soft { color: #9aa59e; }
.kiosk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.kiosk-action { border: 0; border-radius: 12px; padding: 18px 0; font-size: 17px; font-weight: 700; letter-spacing: .04em; background: #2c3630; color: #e7ece8; }
.kiosk-action:disabled { opacity: .4; }
.kiosk-action.kiosk-primary { background: #5cc3a2; color: #0f1a16; grid-column: 1 / -1; }
.kiosk-action.kiosk-out { background: #e27a70; color: #1a0f0e; }
.kiosk-message { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); padding: 12px 20px; border-radius: 10px; font-weight: 600; z-index: 5; }
.kiosk-message.ok { background: #5cc3a2; color: #0f1a16; }
.kiosk-message.error { background: #e27a70; color: #1a0f0e; }
.kiosk-offline { text-align: center; color: #e0b457; font-size: 13px; margin-bottom: 10px; }
/* rostering phase 4/5: leave, components */
.ros-hint.ros-leave { color: #1f6f78; font-style: normal; font-weight: 600; }
.ros-hours .ros-comp { font-size: 12px; color: #6b7280; }
.ros-components { margin-top: 20px; }
.ros-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; margin-bottom: 12px; }
.ros-coderow { display: flex; align-items: center; gap: 8px; }
.ros-coderow span { min-width: 90px; }
.ros-coderow .form-control { max-width: 120px; }
.ros-status-pending { background: #fef3c7; color: #92400e; }
.ros-status-rejected, .ros-status-withdrawn { background: #f3f4f6; color: #9ca3af; }
/* kiosk: fob tap card */
.kiosk-card { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 6; background: rgba(17,22,20,.96); }
.kiosk-card.ok .kiosk-card-name { color: #5cc3a2; }
.kiosk-card.error .kiosk-card-name { color: #e27a70; }
.kiosk-card-name { font-size: 48px; font-weight: 700; }
.kiosk-card-result { font-size: 26px; color: #e7ece8; }
.kiosk-card-shift { font-size: 18px; color: #9aa59e; }
/* ── Inline order product editor (.cm-ipe) ──────────────────────────────────
   The products card as one read-styled table: rows, paddings, borders and
   column widths equal the classic read table (.product-row). Edit controls
   sit OUTSIDE the row box (gutter left, menu right, absolutely positioned in
   the card padding), are always in the DOM and are revealed with opacity on
   row hover or focus — never with display — so nothing moves when the
   pointer arrives. Touch devices show them permanently.
   `.cm-ipe-row:hover:not(:has(.cm-ipe-row:hover, .cm-ipe-package:hover))` is "this row is hovered and
   no row nested inside it (package contents) is": the parent stays calm while
   the pointer is on one of its package lines. */
.cm-ipe { position: relative; }
.cm-ipe.is-saving { pointer-events: none; opacity: 0.6; }
.cm-ipe-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-bottom: 10px; min-height: 28px; }
.cm-ipe-table { display: flex; flex-direction: column; }
/* one rhythm: columns are --cm-ipe-gap apart, every cell outline pulls
   --cm-ipe-pull into that gap on both sides, so neighbouring outlines are always
   gap - 2*pull (= 4px) apart */
.cm-ipe { --cm-ipe-gap: 12px; --cm-ipe-pull: 4px; --cm-ipe-menu-w: 48px; }
/* right padding holds the menu column (the '...' plus the delete X) */
.cm-ipe-body { padding: 0 58px 30px 42px; width: 100%; }
/* --cm-ipe-ctl-h is the height of the row's FIRST line box (padding + cell):
   the gutter and the menu centre on that rather than on the row, so an
   expanded package does not drag them down to its middle. */
.cm-ipe-row { display: flex; align-items: baseline; gap: var(--cm-ipe-gap); padding: 10px 0; border-bottom: 1px solid #ededed; position: relative; --cm-ipe-ctl-h: 44px; }
.cm-ipe-row.cm-ipe-header { font-weight: bold; border-bottom: 0; }
.cm-ipe-row.hidden-product .cm-ipe-name, .cm-ipe-row.hidden-product .cm-ipe-qty { color: #bbb; }

/* columns — same widths as .product-row-non-edit-row */
.cm-ipe-qty { width: 50px; flex: 0 0 50px; }
.cm-ipe-name { flex: 1 1 auto; min-width: 0; }
.cm-ipe-name-line { display: flex; align-items: baseline; gap: 6px; }
.cm-ipe-name-text { flex: 1 1 auto; min-width: 0; }
/* price, VAT and discount share one width */
.cm-ipe-price, .cm-ipe-tax, .cm-ipe-disc { width: 100px; flex: 0 0 100px; text-align: right; }
.cm-ipe-tax { position: relative; }
.cm-ipe-total { width: 150px; flex: 0 0 150px; text-align: right; }
.cm-ipe-margin { width: 120px; flex: 0 0 120px; text-align: right; }
/* an empty cell has no text baseline and would stretch the row; give it one */
/* A row aligns its columns on the baseline, and an empty cell has none — flex
   then aligns it by its bottom edge and the box sits a few pixels off from
   its neighbours, which is visible the moment hover draws the borders. A
   blank keeps the baseline. Every column: a price or total can be empty too. */
.cm-ipe-cell:empty::after { content: "\00a0"; }

/* controls outside the row box */
.cm-ipe-gutter { position: absolute; left: -36px; top: 0; height: var(--cm-ipe-ctl-h); width: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 120ms ease; color: var(--cm-mid-gray); }
.cm-ipe-row:hover:not(:has(.cm-ipe-row:hover, .cm-ipe-package:hover)) > .cm-ipe-gutter, .cm-ipe-row:focus-within:not(:has(.cm-ipe-row:focus-within)) > .cm-ipe-gutter { opacity: 1; }
.cm-ipe-arrow { border: 0; background: transparent; padding: 0; cursor: pointer; color: inherit; line-height: 10px; height: 10px; font-size: 12px; }
.cm-ipe-arrow:hover { color: var(--cm-font-color); }
.cm-ipe-handle { cursor: grab; line-height: 14px; height: 14px; touch-action: none; }
.cm-ipe-menu { position: absolute; right: calc(-6px - var(--cm-ipe-menu-w)); top: 0; height: var(--cm-ipe-ctl-h); width: var(--cm-ipe-menu-w); display: flex; align-items: center; justify-content: center; gap: 2px; }
.cm-ipe-menu-trigger, .cm-ipe-delete { opacity: 0; transition: opacity 120ms ease; }
.cm-ipe-row:hover:not(:has(.cm-ipe-row:hover, .cm-ipe-package:hover)) > .cm-ipe-menu .cm-ipe-menu-trigger, .cm-ipe-row:focus-within:not(:has(.cm-ipe-row:focus-within)) > .cm-ipe-menu .cm-ipe-menu-trigger, .cm-ipe-menu-trigger:focus-within { opacity: 1; }
/* delete beside the '...', not inside it */
.cm-ipe-delete { border: 0; background: transparent; padding: 0; width: 20px; line-height: 20px; font-size: 16px; cursor: pointer; color: var(--cm-mid-gray); }
.cm-ipe-delete:hover, .cm-ipe-delete:focus { color: #b42318; outline: none; }
.cm-ipe-row:hover:not(:has(.cm-ipe-row:hover, .cm-ipe-package:hover)) > .cm-ipe-menu .cm-ipe-delete, .cm-ipe-row:focus-within:not(:has(.cm-ipe-row:focus-within)) > .cm-ipe-menu .cm-ipe-delete { opacity: 1; }
.cm-ipe-card-menu { display: inline-block; }

/* cells: text at rest, an outline on row hover, an input when active. The
   1px border is always there (transparent at rest) so the outline never
   changes the box. */
.cm-ipe-cell { display: block; border: 1px solid transparent; border-radius: 3px; padding: 0 calc(var(--cm-ipe-pull) - 1px); margin: 0 calc(-1 * var(--cm-ipe-pull)); line-height: 22px; min-height: 24px; box-sizing: border-box; }
.cm-ipe-comment .cm-ipe-cell { display: inline-block; max-width: 100%; }
.cm-ipe-comment .cm-ipe-cell.is-active { display: block; }
.cm-ipe-title-text { flex: 1 1 auto; min-width: 0; }
.cm-ipe-cell.cm-ipe-editable { cursor: text; }
.cm-ipe-row:hover:not(:has(.cm-ipe-row:hover, .cm-ipe-package:hover)) .cm-ipe-cell.cm-ipe-editable:not(.cm-ipe-row:not(:hover) *), .cm-ipe-cell.cm-ipe-editable:focus { border-color: #e3e3e3; outline: none; }
.cm-ipe-cell.cm-ipe-editable:hover { border-color: var(--cm-mid-gray); }
.cm-ipe-cell.is-active { padding: 0; border-color: transparent; }
.cm-ipe-input.form-control { height: 22px; padding: 0 calc(var(--cm-ipe-pull) - 1px); font: inherit; line-height: 20px; box-shadow: none; width: 100%; min-width: 40px; border-radius: 3px; border-color: var(--cm-mid-gray); }
.cm-ipe-price .cm-ipe-input, .cm-ipe-disc .cm-ipe-input { text-align: right; }
.cm-ipe-textarea.form-control { height: auto; min-height: 44px; resize: vertical; line-height: 1.4; }
.cm-ipe-placeholder { color: var(--cm-mid-gray); font-style: italic; opacity: 0; }
.cm-ipe-row:hover:not(:has(.cm-ipe-row:hover, .cm-ipe-package:hover)) .cm-ipe-placeholder:not(.cm-ipe-row:not(:hover) *), .cm-ipe-cell:focus .cm-ipe-placeholder { opacity: 1; }
.cm-ipe-comment { margin-top: 2px; }
.cm-ipe-aux small { display: block; }

/* the tax select sits invisibly over its text so a click opens the list */
.cm-ipe-tax .cm-ipe-cell { position: relative; }
.cm-ipe-tax .cm-ipe-select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
/* A product with no VAT renders an empty face. The cell then holds only the
   invisible select and has no text baseline, and the row — which aligns on the
   baseline — drops every other cell a few pixels. A blank keeps the baseline.
   `.cm-ipe-cell:empty::after` cannot do it: the cell has children. */
.cm-ipe-tax .cm-ipe-select-face { pointer-events: none; }
.cm-ipe-tax .cm-ipe-select-face:empty::after { content: "\00a0"; }

.cm-ipe-caret { border: 0; background: transparent; padding: 0 2px; cursor: pointer; color: var(--cm-mid-gray); }
.cm-ipe-icon { cursor: pointer; margin-left: 4px; }
.cm-ipe-package { margin: 6px 0 0 0; padding-left: 8px; border-left: 2px solid #ededed; }
.cm-ipe-package.is-editable { margin-top: 8px; padding-left: 0; border-left: 0; }
.cm-ipe-pkg-table { display: flex; flex-direction: column; border-left: 2px solid #ededed; padding-left: 8px; }
.cm-ipe-pkg-row.cm-ipe-row { padding: 4px 0; font-size: 13px; border-bottom: 1px dotted #ededed; --cm-ipe-ctl-h: 32px; }
.cm-ipe-pkg-row.cm-ipe-title-row { padding-top: 8px; --cm-ipe-ctl-h: 36px; }
.cm-ipe-pkg-row .cm-ipe-gutter { left: -44px; }
.cm-ipe-pkg-qty { width: 72px; flex: 0 0 72px; display: flex; align-items: baseline; gap: 10px; }
.cm-ipe-pkg-qty .cm-ipe-qty { width: 44px; flex: 0 0 44px; margin-right: 0; }
.cm-ipe-lock { cursor: pointer; color: var(--cm-lines-color); font-size: 12px; opacity: 0; transition: opacity 120ms ease; }
.cm-ipe-lock.is-locked, .cm-ipe-pkg-row:hover .cm-ipe-lock { opacity: 1; }
.cm-ipe-lock.is-locked { color: var(--cm-font-color); }
.cm-ipe-one-off { cursor: pointer; color: var(--cm-font-color); font-size: 12px; }
/* said while the field is open, not on hover: this is the moment it applies */
.cm-ipe-edit-hint { margin-top: 4px; font-size: 12px; color: var(--cm-dark-gray); background: var(--cm-pale-yellow); border-radius: 4px; padding: 3px 8px; display: inline-block; }
.cm-ipe-pkg-weight { width: 70px; flex: 0 0 70px; text-align: right; color: var(--cm-mid-gray); font-size: 12px; }
.cm-ipe-pkg-weight.is-total { align-self: center; color: var(--cm-font-color); }
/* the package's own weight, ruled off under the column its lines add up in */
.cm-ipe-pkg-row.cm-ipe-pkg-total { border-bottom: 0; border-top: 1px solid #ededed; padding-top: 6px; }
.cm-ipe-pkg-new { padding: 8px 10px; }
.cm-ipe-pkg-bulk { margin-top: 8px; padding: 10px 12px; border: 1px solid #ededed; border-radius: 6px; background: #fff; font-size: 13px; }
.cm-ipe-pkg-bulk textarea { font-size: 13px; }
.cm-ipe-pkg-new .type label { margin: 0 4px 0 10px; font-weight: normal; }

.cm-ipe-below { margin-top: 10px; }
.cm-ipe-discount-row { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 8px 62px; }
.cm-ipe-discount-input .cm-ipe-input { width: 70px; text-align: right; }

.cm-ipe-save-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 12px; margin: 12px -12px 0; background: #fff; border-top: 1px solid #ededed; box-shadow: 0 -6px 16px -12px rgba(0,0,0,.35); z-index: 2; }
/* UNSAVED — the card is always in edit mode, so nothing else tells you an edit
   is still only in the browser. The old editor had a mode to leave; this has to
   say it. The whole block is ringed, not just the bar: on a long order that bar
   is below the fold, and the bar alone was being missed. */
.card.cm-ipe-card-dirty {
    box-shadow:
        0 0 0 2px var(--cm-yellow),
        0 1px 2px rgba(16, 24, 32, 0.05),
        0 10px 28px -8px rgba(16, 24, 32, 0.10);
}

.cm-ipe-card-dirty .cm-ipe-save-bar {
    background: var(--cm-pale-yellow);
    border-top-color: var(--cm-yellow);
}

.cm-ipe-unsaved { color: var(--cm-dark-gray); margin-right: auto; font-size: 13px; font-weight: 600; }

.cm-ipe-undo { display: flex; justify-content: flex-end; margin-top: 8px; }
.cm-ipe-options { margin-top: 18px; }
/* In the card header now, so it aligns with the other header actions rather
   than sitting under the table as a last row of the editing surface. */
.cm-ipe-layout-toggle { display: flex; align-items: center; margin-right: 10px; }
.cm-ipe-layout-toggle .btn { font-size: 12px; color: var(--cm-mid-gray); padding: 0; }
.cm-ipe-options-toggle { cursor: pointer; }
.cm-ipe-options-heading { margin: 12px 0 4px; }
.cm-ipe-muted { color: var(--cm-mid-gray); }
.cm-ipe-settings-pricelist { padding: 8px 10px; border-top: 1px solid #ededed; min-width: 260px; }
.cm-ipe-settings-pricelist label { display: block; font-weight: normal; margin-bottom: 4px; }

/* drag and drop: a zero-height slot between rows carries the drop line, so
   showing it never moves anything; the ghost is a fixed clone-sized card */
.cm-ipe-drop-slot { height: 0; position: relative; }
.cm-ipe-drop-line { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--cm-btn-primary-hover, #1f6f78); border-radius: 1px; z-index: 1; pointer-events: none; }
.cm-ipe-drop-line::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--cm-btn-primary-hover, #1f6f78); }
.cm-ipe-ghost { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 2000; display: flex; align-items: center; padding: 0 12px; background: #fff; border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: 0 10px 28px -10px rgba(0,0,0,.35); opacity: .96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; will-change: transform; }
.cm-ipe-row.is-dragging { opacity: .35; }
.cm-ipe-row.is-dragging .cm-ipe-gutter, .cm-ipe-row.is-dragging .cm-ipe-menu-trigger, .cm-ipe-row.is-dragging .cm-ipe-delete { opacity: 0; }
body.cm-ipe-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.cm-ipe-dragging .cm-ipe-handle { cursor: grabbing; }
.cm-ipe-handle:focus { outline: none; color: var(--cm-font-color); }

/* insertion: the add bar (classic look), and the seam between rows */
.cm-ipe-add { position: relative; }
.cm-ipe-add-bar { margin-bottom: 10px; }
.cm-ipe-add-bar .quick-quantity-wrap { margin-left: 10px; }
.cm-ipe-gap { height: 0; position: relative; }
.cm-ipe-gap-hit { position: absolute; left: -36px; right: calc(-6px - var(--cm-ipe-menu-w)); top: -11px; height: 22px; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 120ms ease; z-index: 3; }
.cm-ipe-gap-hit:hover, .cm-ipe-gap-hit:focus-within { opacity: 1; }
.cm-ipe-gap-hit::before { content: ""; position: absolute; left: 36px; right: calc(6px + var(--cm-ipe-menu-w)); top: 10px; height: 2px; background: var(--cm-btn-primary-hover, #1f6f78); opacity: .35; pointer-events: none; }
.cm-ipe-gap-pill { position: relative; display: flex; align-items: center; gap: 2px; background: #fff; border: 1px solid #e3e3e3; border-radius: 14px; padding: 0 4px; box-shadow: 0 2px 8px -4px rgba(0,0,0,.3); }
.cm-ipe-gap-btn { border: 0; background: transparent; font-size: 12px; line-height: 26px; padding: 0 10px; cursor: pointer; color: var(--cm-font-color); border-radius: 13px; white-space: nowrap; }
.cm-ipe-gap-btn:hover { background: var(--cm-table-heading-bg-color, #f3f4f6); }
.cm-ipe-cursor-line { position: absolute; left: 0; right: 0; top: -1px; height: 0; border-top: 2px dashed var(--cm-btn-primary-hover, #1f6f78); z-index: 2; pointer-events: none; }
.cm-ipe-cursor-label { position: absolute; right: 8px; top: -10px; font-size: 11px; line-height: 16px; padding: 0 6px; background: #fff; color: var(--cm-btn-primary-hover, #1f6f78); pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; }
body.cm-ipe-dragging .cm-ipe-gap-hit { display: none; }

/* The seam opens: the search lands under the line that marks the spot, so the
   gap stops being zero-height and the rows move apart on purpose. */
.cm-ipe-gap.is-inserting { height: auto; }
/* an empty zone has nothing to hover, so its one seam shows its pill */
/* an empty list keeps its pill visible: it is the only thing naming what the
   seam does, and there is no row to hover to find it. The seam takes real
   height so the pill does not sit on the header row. */
.cm-ipe-gap.is-empty { height: 42px; }
.cm-ipe-gap.is-empty .cm-ipe-gap-hit { opacity: 1; top: 10px; }
.cm-ipe-insert-box { position: relative; margin: 12px 0 14px; z-index: 4; }
.cm-ipe-insert-box .cm-ipe-add-bar { margin-bottom: 0; }
.cm-ipe-insert-box .search-results-wrap { position: absolute; left: 0; right: 0; z-index: 5; }
/* the two icon-only buttons in the insert box sit in the same button row as
   Bladeren, so they are the same button with a glyph instead of a word */
.cm-ipe-insert-cancel .zmdi, .cm-ipe-bulk-btn .zmdi { font-size: 16px; line-height: 1; }
/* inside a package the seam spans the package table, not the row gutters */
.cm-ipe-pkg-gap .cm-ipe-gap-hit { left: 0; right: 0; }
.cm-ipe-pkg-gap .cm-ipe-gap-hit::before { left: 0; right: 0; }

@media (hover: none) {
  .cm-ipe-gutter, .cm-ipe-menu-trigger, .cm-ipe-delete, .cm-ipe-placeholder { opacity: 1; }
  .cm-ipe-cell.cm-ipe-editable { border-color: #e3e3e3; }
}

/* ── Inline product editor on phones ─────────────────────────────────────────
   No hover on touch, so the controls stay visible: the row menu moves into
   the row's first line and the reorder gutter is dropped (the menu carries
   move up/down). Each line wraps to two rows: quantity + name, then the
   money cells right-aligned. The desktop column widths are released. */
@media screen and (max-width: 768px) {
  /* the classic card scrolls sideways at an 800px minimum; the inline card
     wraps instead, so it opts out of that minimum */
  .products-box > .card-body > .cm-ipe-body { min-width: 0; padding: 0 12px 16px 12px; }
  .cm-ipe { --cm-ipe-gap: 8px; }
  .cm-ipe-row { flex-wrap: wrap; row-gap: 2px; padding: 8px 0; }
  .cm-ipe-row.cm-ipe-header { display: none; }
  .cm-ipe-qty { width: 44px; flex: 0 0 44px; }
  /* the name claims the rest of the first line, so the money cells wrap under it */
  .cm-ipe-name { flex: 1 0 calc(100% - 44px - var(--cm-ipe-menu-w) - 2 * var(--cm-ipe-gap)); min-width: 0; }
  .cm-ipe-menu { position: static; height: auto; width: var(--cm-ipe-menu-w); flex: 0 0 var(--cm-ipe-menu-w); order: 3; }
  .cm-ipe-menu-trigger, .cm-ipe-delete { opacity: 1; }
  .cm-ipe-gutter { display: none; }
  .cm-ipe-gap-hit { display: none; }
  /* money line: after the name, pushed right, in reading order */
  .cm-ipe-price, .cm-ipe-tax, .cm-ipe-disc, .cm-ipe-total, .cm-ipe-margin {
    width: auto; flex: 0 0 auto; order: 5; font-size: 13px; color: var(--cm-mid-gray); }
  .cm-ipe-price { margin-left: 44px; }
  .cm-ipe-total { margin-left: auto; color: var(--cm-font-color); }
  .cm-ipe-price .cm-ipe-cell, .cm-ipe-disc .cm-ipe-cell, .cm-ipe-tax .cm-ipe-cell { display: inline-block; min-height: 20px; line-height: 18px; }
  .cm-ipe-cell.cm-ipe-editable { border-color: #ececec; }
  .cm-ipe-placeholder { opacity: 1; }
  .cm-ipe-title-row .cm-ipe-name { flex-basis: calc(100% - var(--cm-ipe-menu-w) - var(--cm-ipe-gap)); }
  /* the add bar wraps: quantity + search, then the buttons */
  .cm-ipe-add-bar.add-product-bar { flex-wrap: wrap; row-gap: 8px; margin: 0 -12px 10px; padding: 8px 12px; width: auto; }
  .cm-ipe-add-bar .quick-quantity-wrap { margin-left: 0; width: 56px; }
  .cm-ipe-add-bar .search-product-wrap { flex: 1 0 calc(100% - 56px - 10px); min-width: 0; }
  .cm-ipe-add-bar .add-spot-dropdown { width: 100%; margin: 0; order: 9; }
  .cm-ipe-add-bar > div:not(.quick-quantity-wrap):not(.search-product-wrap):not(.add-spot-dropdown) { flex: 0 0 auto; }
  .cm-ipe-cursor-label { right: 0; }
  .cm-ipe-discount-row { margin-left: 0; }
  .cm-ipe-save-bar { margin: 12px -12px 0; padding: 10px 12px; flex-wrap: wrap; }
  .cm-ipe-unsaved { flex-basis: 100%; }
  /* packages: the block breaks out of the name column to use the row's full
     width; compact rows, controls inline like the parent, lock always shown */
  .cm-ipe-package.is-editable { margin-left: calc(-44px - var(--cm-ipe-gap)); }
  .cm-ipe-pkg-table { padding-left: 6px; }
  .cm-ipe-pkg-row .cm-ipe-gutter { display: none; }
  .cm-ipe-pkg-qty { width: 72px; flex: 0 0 72px; }
  .cm-ipe-pkg-row .cm-ipe-name { flex-basis: calc(100% - 72px - var(--cm-ipe-menu-w) - 2 * var(--cm-ipe-gap)); }
  .cm-ipe-pkg-row.cm-ipe-title-row .cm-ipe-name { flex-basis: calc(100% - var(--cm-ipe-menu-w) - var(--cm-ipe-gap)); }
  .cm-ipe-lock { opacity: 1; }
  .cm-ipe-pkg-weight { order: 5; width: auto; flex: 0 0 auto; margin-left: auto; }
  .cm-ipe-layout-toggle { margin-top: 6px; }
  .cm-ipe-undo .btn { white-space: normal; text-align: right; }
  /* the classic totals rows keep desktop column widths and squeeze their
     label; here the label takes the line and the amount sizes to content */
  .cm-ipe-below .product-total-row { gap: 6px; }
  .cm-ipe-below .product-total-row .quantity-cell { display: none; }
  .cm-ipe-below .product-total-row .product-name-cell { flex: 1 1 auto; white-space: nowrap; }
  .cm-ipe-below .product-total-row .product-edit-price,
  .cm-ipe-below .product-total-row .product-edit-discount,
  .cm-ipe-below .product-total-row .product-edit-commands { width: auto; flex: 0 0 auto; }
}
/* ---------------------------------------------------------------------------
   HACCP locations tab

   The location list is the settings screen's nav layout (cm-editor-nav-layout),
   so only the detail pane's own pieces are styled here.
   --------------------------------------------------------------------------- */
/* The switch sits beside the name it acts on, not pushed to the far edge of a
   full-width row where it reads as unrelated to anything. */
.haccp-detail__header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* The heading's own top margin is inside the box flex centres, so leaving it
   drops the name half a margin below the button beside it. */
.haccp-detail__header h4 {
    margin: 0;
}

/* The agenda's column headers, for the panel's own plain tables. The global
   `thead > tr > th` treatment is overridden for `.table` further down the
   cascade, so it is restated here at a specificity that survives. */
.haccp-table > thead > tr > th {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cm-table-heading-color);
    background-color: var(--cm-table-heading-bg-color);
}

/* HACCP appliance editor — a short form, so it sits inline under the list
   rather than in a modal. */
.haccp-equipment-form {
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-card-border-radius);
    background-color: var(--cm-very-light-gray);
    padding: 18px 20px;
    margin-top: 15px;
}

.haccp-equipment-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 15px;
}

.haccp-equipment-form__grid label {
    display: block;
    margin: 0;
    font-size: 12px;
    color: var(--cm-mid-gray);
}

.haccp-equipment-form__grid label > .form-control,
.haccp-equipment-form__grid label > .select {
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   HACCP registration — the form a check is recorded in.
   --------------------------------------------------------------------------- */
.haccp-board__row {
    cursor: pointer;
}

.haccp-board__row:hover {
    background-color: var(--cm-very-light-gray);
}

.haccp-registration__instruction {
    background-color: var(--cm-table-heading-bg-color);
    border-radius: var(--cm-card-border-radius);
    padding: 12px 15px;
    margin-bottom: 20px;
    font-size: 14px;
}

.haccp-registration__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.haccp-registration__field label {
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--cm-mid-gray);
}

.haccp-registration__check {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: var(--cm-font-color);
    cursor: pointer;
}

/* HACCP history — what was recorded, read rather than filled in. */
.haccp-history__entry {
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-card-border-radius);
    padding: 14px 16px;
    margin-bottom: 12px;
}

.haccp-history__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.haccp-history__reading {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   HACCP status pills

   The same shape and palette as the order-status pills, so a status means the
   same thing wherever it is read. `open` borrows `concept`: nothing has happened
   to it yet. `overdue` borrows the invoice `late` fill, which exists for exactly
   this — loud without reading as an error banner.
   --------------------------------------------------------------------------- */
.haccp-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.haccp-status.open {
    color: var(--cm-status-concept);
    background-color: var(--cm-status-concept-bg);
}

.haccp-status.ok {
    color: var(--cm-status-confirmed);
    background-color: var(--cm-status-confirmed-bg);
}

.haccp-status.not-ok {
    color: var(--cm-color-danger);
    background-color: var(--cm-color-danger-bg);
}

.haccp-status.not-done {
    color: var(--cm-status-cancelled);
    background-color: var(--cm-status-cancelled-bg);
}

.haccp-status.overdue {
    color: var(--cm-color-danger);
    background-color: var(--cm-status-late-bg);
}

/* ---------------------------------------------------------------------------
   HACCP floor page — a tablet on the kitchen wall.

   Read from across the room, so the type is large and the palette is the same
   status palette the office panel uses. Only one thing moves: the line marking
   the current time.
   --------------------------------------------------------------------------- */
.haccp-floor {
    padding: 24px 28px 40px;
    font-size: 18px;
}

.haccp-floor__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 24px;
}

.haccp-floor__head h1 {
    margin: 0;
    font-size: 24px;
}

.haccp-floor__date {
    color: var(--cm-mid-gray);
    font-size: 20px;
}

.haccp-floor__hours {
    position: relative;
    height: 22px;
    border-bottom: 1px solid var(--cm-lines-color);
}

.haccp-floor__hour {
    position: absolute;
    transform: translateX(-50%);
    font-size: 13px;
    color: var(--cm-mid-gray);
}

.haccp-floor__rows {
    position: relative;
}

.haccp-floor__row {
    display: flex;
    align-items: center;
    height: 46px;
    border-bottom: 1px solid var(--cm-table-line-color);
}

.haccp-floor__track {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    overflow: hidden;
}

.haccp-floor__bar {
    position: absolute;
    top: 8px;
    bottom: 8px;
    border-radius: 4px;
    border-left: 5px solid var(--cm-lines-color);
    display: flex;
    align-items: center;
    padding: 0 10px;
    /* Visible, not hidden: a 30-minute window is a few percent of a kitchen day,
       and clipping to the bar would leave those checks nameless now that the
       label column is gone. There is exactly one bar per row, so a name that
       runs past its bar runs over empty track and collides with nothing. */
    overflow: visible;
}

.haccp-floor__bar.whole-day {
    opacity: 0.55;
}

.haccp-floor__bar-name {
    font-size: 16px;
    white-space: nowrap;
}

/* Bars late in the day: the name goes to the left, where the track still has
   room. The bar is the containing block, so this anchors to the bar's edge. */
.haccp-floor__bar.name-left .haccp-floor__bar-name {
    position: absolute;
    right: calc(100% + 10px);
    text-align: right;
}

.haccp-floor__bar.status-open     { background-color: var(--cm-status-concept-bg); color: var(--cm-status-concept); }
.haccp-floor__bar.status-ok       { background-color: var(--cm-status-confirmed-bg); color: var(--cm-status-confirmed); }
.haccp-floor__bar.status-not_ok   { background-color: var(--cm-color-danger-bg); color: var(--cm-color-danger); }
.haccp-floor__bar.status-not_done { background-color: var(--cm-status-cancelled-bg); color: var(--cm-status-cancelled); }

/* The only moving part. */
/* `left` is a calc() from the view, measured across the track rather than the
   whole row. A percentage here would resolve against the row — label column
   included — and land the line about two hours to the right of the truth. */
.haccp-floor__now {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--cm-yellow);
    pointer-events: none;
}

.haccp-floor__now::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--cm-yellow);
}

.haccp-floor__empty {
    color: var(--cm-mid-gray);
    font-size: 20px;
    padding: 40px 0;
}

/* One popup, however many checks fall due together. */
.haccp-floor__popup {
    position: fixed;
    inset: 0;
    background-color: var(--cm-dark-green-transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.haccp-floor__popup-box {
    background-color: var(--cm-white);
    border-radius: var(--cm-card-border-radius);
    padding: 32px 36px;
    max-width: 560px;
    text-align: center;
}

.haccp-floor__popup-box h2 { margin: 0 0 16px; font-size: 20px; }
.haccp-floor__popup-box ul { text-align: left; font-size: 20px; }

.haccp-floor__popup-ok {
    margin-top: 20px;
    padding: 14px 40px;
    font-size: 20px;
    border: 0;
    border-radius: var(--cm-button-border-radius);
    background-color: var(--cm-green);
    color: var(--cm-white);
    cursor: pointer;
}

/* The check form on the floor page — thumb-sized, because it is filled in
   standing up with one hand. */
.haccp-floor__row { cursor: pointer; }
.haccp-floor__row:hover { background-color: var(--cm-very-light-gray); }

.haccp-floor__check-box {
    background-color: var(--cm-white);
    border-radius: var(--cm-card-border-radius);
    padding: 28px 32px;
    width: 620px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
}

.haccp-floor__check-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.haccp-floor__check-head h2 { margin: 0; font-size: 20px; flex: 1 1 auto; }

.haccp-floor__close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--cm-mid-gray);
    font-size: 24px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
}

.haccp-floor__close:hover { color: var(--cm-font-color); }

.haccp-floor__instruction {
    background-color: var(--cm-table-heading-bg-color);
    border-radius: var(--cm-border-radius);
    padding: 12px 14px;
    font-size: 16px;
    margin: 0 0 16px;
}

.haccp-floor__errors {
    background-color: var(--cm-color-danger-bg);
    color: var(--cm-color-danger);
    border-radius: var(--cm-border-radius);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 16px;
}

.haccp-floor__recorded {
    font-size: 15px;
    color: var(--cm-mid-gray);
    margin-bottom: 16px;
}

.haccp-floor__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.haccp-floor__field { margin-bottom: 14px; }

.haccp-floor__field label {
    display: block;
    font-size: 15px;
    color: var(--cm-mid-gray);
    margin-bottom: 6px;
}

.haccp-floor__range { color: var(--cm-font-color); }

.haccp-floor__input {
    width: 100%;
    font-size: 24px;
    padding: 12px 14px;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
}

/* Specific enough to beat `.haccp-floor__field label`, which sets display:block
   and would otherwise collapse the gap and the centring. */
.haccp-floor__field label.haccp-floor__tick {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    font-size: 20px;
    color: var(--cm-font-color);
}

.haccp-floor__tick input {
    width: 26px;
    height: 26px;
    margin: 0;
    flex: 0 0 auto;
}

.haccp-floor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.haccp-floor__actions button {
    flex: 1 1 auto;
    padding: 16px 18px;
    font-size: 18px;
    border: 0;
    border-radius: var(--cm-button-border-radius);
    cursor: pointer;
}

.haccp-floor__ok      { background-color: var(--cm-green); color: var(--cm-white); }
.haccp-floor__notok   { background-color: var(--cm-color-danger-bg); color: var(--cm-color-danger); }
.haccp-floor__notdone { background-color: var(--cm-status-cancelled-bg); color: var(--cm-status-cancelled); }

/* HACCP floor page — who is at the screen.
   Sized to be read and hit from across a kitchen: the chip is a touch target,
   not a label. */
.haccp-floor__head-right {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.haccp-floor__who {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 18px;
    border: 1px solid var(--cm-light-gray);
    border-radius: var(--cm-button-border-radius);
    background-color: var(--cm-white);
    font-size: 20px;
    cursor: pointer;
}

.haccp-floor__who-name {
    font-weight: 600;
}

.haccp-floor__who-change {
    color: var(--cm-mid-gray);
    font-size: 16px;
}

.haccp-floor__who-expl {
    margin: 0 0 16px;
    color: var(--cm-mid-gray);
    font-size: 16px;
}

.haccp-floor__popup-ok[disabled] {
    opacity: .5;
    cursor: default;
}

/* The tapped row, while its check is being fetched. The modal deliberately does
   not open until it can open complete, so the acknowledgement lives here. */
.haccp-floor__row.is-opening {
    background-color: var(--cm-very-light-gray);
}

/* HACCP floor page — the list view.
   Sized for a phone held at arm's length or a tablet across the room: rows are
   touch targets, not table cells. */
.haccp-floor__views {
    display: inline-flex;
    border: 1px solid var(--cm-light-gray);
    border-radius: var(--cm-button-border-radius);
    overflow: hidden;
}

.haccp-floor__view {
    padding: 8px 18px;
    border: 0;
    background-color: var(--cm-white);
    font-size: 16px;
    cursor: pointer;
}

.haccp-floor__view.is-active {
    background-color: var(--cm-green);
    color: var(--cm-white);
}

.haccp-floor__list {
    display: flex;
    flex-direction: column;
}

.haccp-floor__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--cm-table-line-color);
    cursor: pointer;
}

.haccp-floor__item.is-opening {
    background-color: var(--cm-very-light-gray);
}

/* Due now and overdue are the two states a list cannot show by position the way
   the timeline shows them against its now-line, so they are said in the row. */
.haccp-floor__item.is-now .haccp-floor__item-when {
    font-weight: 700;
}

.haccp-floor__item.is-overdue .haccp-floor__item-when {
    font-weight: 700;
    color: var(--cm-color-danger);
}

.haccp-floor__item-when {
    flex: 0 0 150px;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.haccp-floor__item-name {
    flex: 1 1 auto;
    padding-left: 12px;
    border-left: 5px solid var(--cm-lines-color);
    font-size: 20px;
}

.haccp-floor__item-status {
    flex: 0 0 auto;
}

.haccp-floor__item-status .haccp-status {
    font-size: 14px;
    padding: 5px 14px;
}

@media (max-width: 640px) {
    /* The kiosk is sized for a tablet on a wall; on a phone the same type and
       gutters leave no room for the content. Everything here only trims, so a
       wall screen is untouched. */
    .haccp-floor {
        padding: 16px 14px 28px;
    }

    .haccp-floor__head h1 {
        font-size: 20px;
    }

    .haccp-floor__date {
        width: 100%;
        font-size: 15px;
    }

    .haccp-floor__who,
    .haccp-floor__view {
        padding: 6px 12px;
        font-size: 15px;
    }

    .haccp-floor__bar-name {
        font-size: 14px;
    }

    .haccp-floor__item-when {
        font-size: 16px;
    }

    .haccp-floor__item-name {
        font-size: 16px;
    }
}

@media (max-width: 520px) {
    /* A phone has no room for a fixed time column beside a name; stack them and
       let the status sit against the time. */
    .haccp-floor__item {
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    .haccp-floor__item-when {
        flex: 0 0 auto;
    }

    .haccp-floor__item-name {
        flex: 1 0 100%;
        order: 3;
    }
}

/* Settings > Brands > Email design */
.email-design-body {
    padding-top: 10px;
}
.email-design {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.email-design-controls {
    flex: 0 0 380px;
    max-width: 100%;
}
.email-design-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 12px;
}
.email-design-row > label {
    margin: 0;
    font-weight: normal;
    color: #555;
}
.email-design-row .checkbox {
    margin: 0;
}
.email-design-color {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.email-design-swatch {
    width: 36px;
    height: 28px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
}
.email-design-color-value {
    font-family: monospace;
}
.email-design-reset {
    font-size: 11px;
}
.email-design-color-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
}
.email-design-color-popup {
    position: absolute;
    top: 34px;
    left: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 8px;
}
.email-design-row-stacked {
    display: block;
}
.email-design-row-stacked > label {
    display: block;
    margin-bottom: 6px;
}
/* The brand editor is a card inside a card, where the global rule hides a
   Quill toolbar until hover. This footer is a normal field, so it keeps its
   toolbar. */
.email-design .ql-toolbar {
    visibility: visible !important;
}
.email-design-hint {
    font-size: 12px;
    margin-top: 4px;
}
.email-design-actions {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.email-design-status {
    margin-top: 16px;
}
.email-design-status .alert {
    padding: 14px 18px;
    line-height: 1.5;
    margin-bottom: 0;
}
.email-design-custom {
    margin-top: 20px;
    font-size: 12px;
}
.email-design-custom textarea {
    font-family: monospace;
    font-size: 12px;
}
.email-design-preview {
    flex: 1;
    min-width: 0;
}
.email-design-preview-label {
    font-size: 12px;
    margin-bottom: 6px;
}
.email-design-preview iframe {
    width: 100%;
    height: 620px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background: #f3f3f3;
}
@media (max-width: 1100px) {
    .email-design {
        flex-direction: column;
    }
    .email-design-controls {
        flex-basis: auto;
        width: 100%;
    }
    .email-design-preview {
        width: 100%;
    }
}