/* =========================
   Base + Layout
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:-apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background:#f6f7f9;
  color:#111;
}

body.public-start-page{
  --public-header-max-width:1320px;
}

body.public-tenant-page{
  --public-header-max-width:1200px;
}

.page-hero-banner{
  width:100vw;
  max-width:100vw;
  margin:0 0 14px 0;
  line-height:0;
  overflow:hidden;
}

.page-hero-banner picture,
.page-hero-banner img{
  display:block;
  width:100%;
}

.page-hero-banner img{
  height:auto;
}

.container{ max-width:980px; margin:14px auto; padding:0 12px; }

.card{
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius:14px;
  border:1px solid #d6deea;
  padding:14px;
  margin-bottom:12px;
  box-shadow:0 14px 34px rgba(15,23,42,.10);
  overflow:hidden;
}

.order-create-card{
  border-color:#bfd5ef;
  background:linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
  box-shadow:0 18px 40px rgba(43,89,145,.10);
}

h2,h3{ margin:0 0 10px 0; }
.muted{ font-size:13px; opacity:.75; line-height:1.4; }

.app-footer{
  margin-top:10px;
  padding:0 4px;
  font-size:12px;
  line-height:1.4;
  color:rgba(17,17,17,.68);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px 18px;
  flex-wrap:wrap;
  text-align:center;
}

.app-footer__links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 14px;
}

.app-footer__link{
  color:inherit;
  text-decoration:none;
  text-underline-offset:2px;
}

.app-footer__link:hover{
  text-decoration:underline;
}

.app-footer__copy{
  white-space:nowrap;
}

@media (max-width:760px){
  .app-footer{
    flex-direction:column;
    gap:6px;
  }

  .app-footer__links{
    order:1;
  }

  .app-footer__copy{
    order:2;
    white-space:normal;
  }
}

.surface-panel{
  padding:16px;
  border:1px solid #cfd9e6;
  border-radius:16px;
  background:linear-gradient(180deg, #ffffff 0%, #f3f7fc 100%);
}

.surface-panel--stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.import-shell{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.import-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}

.import-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.import-panel--full{
  grid-column:1 / -1;
}

.import-panel .billing-toolbar{
  margin-top:auto;
  padding-top:12px;
}

.import-panel .billing-toolbar__item > a{
  align-items:center;
}

.import-panel .billing-toolbar__item > form{
  align-items:stretch;
}

.import-panel .billing-toolbar__item .billing-action{
  min-height:48px;
  height:100%;
  padding:10px 14px !important;
  line-height:1.25;
  white-space:normal;
  text-align:center;
  overflow-wrap:anywhere;
}

.import-panel h3{
  margin-bottom:2px;
}

.import-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.import-row-form{
  margin-top:10px;
}

.import-form.is-disabled{
  opacity:.65;
}

.import-map{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.import-map-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid #dbe3ee;
  background:#f8fafc;
  color:#475569;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
}

.import-map-item strong{
  color:#1f2937;
}

.import-toolbar{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0, 1fr);
  gap:10px;
  align-items:stretch;
  margin-top:14px;
}

.import-toolbar__item{
  min-width:0;
  display:flex;
  align-items:stretch;
}

.import-toolbar__item > a,
.import-toolbar__item > button,
.import-toolbar__item > form{
  width:100%;
  min-width:0;
  display:flex;
  align-items:stretch;
  margin:0;
}

.import-toolbar__item > .billing-action{
  width:100% !important;
  min-width:0;
  height:100%;
}

.import-toolbar > a,
.import-toolbar > button,
.import-toolbar > form{
  min-width:0;
  margin:0;
}

.import-toolbar > form{
  display:flex;
  align-items:stretch;
}

.import-toolbar .billing-action{
  width:100% !important;
  min-width:0;
  min-height:42px;
  height:42px;
}

.import-toolbar a.billing-action--neutral:hover,
.import-toolbar button.billing-action--neutral:hover{
  background:#abc7e4 !important;
  border-color:#5f88b4 !important;
  color:#102942 !important;
  box-shadow:0 18px 32px rgba(30,64,115,.22);
  transform:translateY(-2px);
}

.import-toolbar a.billing-action--success:hover,
.import-toolbar button.billing-action--success:hover{
  background:#99cfb0 !important;
  border-color:#4f936e !important;
  color:#0f3c24 !important;
  box-shadow:0 18px 32px rgba(25,88,54,.22);
  transform:translateY(-2px);
}

.import-toolbar a.billing-action--danger:hover,
.import-toolbar button.billing-action--danger:hover{
  background:#e9a7bb !important;
  border-color:#b95d7c !important;
  color:#65142e !important;
  box-shadow:0 18px 32px rgba(120,32,72,.22);
  transform:translateY(-2px);
}

.import-table-wrap{
  overflow:auto;
  border:1px solid #dbe4ef;
  border-radius:14px;
  background:#fff;
}

@media (max-width: 760px){
  .import-toolbar{
    grid-auto-flow:row;
    grid-auto-columns:auto;
    grid-template-columns:1fr;
  }
}

.import-table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  font-size:14px;
}

.import-table th,
.import-table td{
  padding:10px 12px;
  text-align:left;
}

.import-table thead th{
  border-bottom:1px solid #dbe4ef;
  background:#f5f8fc;
  color:#475569;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.import-table tbody td{
  border-top:1px solid #edf2f7;
}

.import-table tbody tr:first-child td{
  border-top:none;
}

.import-note{
  margin-top:6px;
  font-size:12px;
  color:#64748b;
}

.import-empty{
  padding:14px;
  border:1px dashed #d4ddeb;
  border-radius:14px;
  background:#f8fbff;
}

.import-badge-warning{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #f7d082;
  background:#fff8e1;
  color:#8a5a00;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
}

.rental-step-card,
.rental-subpanel{
  backdrop-filter:saturate(110%);
}

.rental-step-card{
  background:linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%) !important;
  border:1px solid #d7e1ec !important;
  box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
}

.rental-subpanel{
  background:linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
  border:1px solid #dde6f0 !important;
}

.rental-static-box{
  padding:10px 12px;
  border:1px solid #e6e7eb;
  border-radius:12px;
  background:#fff;
}

.customer-lookup-panel{
  background:linear-gradient(180deg, #fffdf4 0%, #fff6d8 100%) !important;
  border:1px solid #f3cf74 !important;
  box-shadow:0 14px 30px rgba(202,138,4,.14) !important;
}

.customer-lookup-panel label{
  color:#8a5a00;
  font-weight:700;
}

.customer-lookup-panel .muted{
  color:#8a5a00;
}

.customer-lookup-panel #customer_lookup{
  border-color:#e4b84e;
  background:#fffef9;
  box-shadow:0 0 0 3px rgba(250,204,21,.14);
}

.rental-machine-grid .mrow{
  background:#fdfefe !important;
  border-color:#d9e2ec !important;
}

.machine-category-list{
  display:flex !important;
  flex-direction:column;
  gap:10px;
}

.machine-category-box{
  border:1px solid #d9e2ec;
  border-radius:14px;
  background:linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  overflow:hidden;
}

.machine-category-summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  cursor:pointer;
  color:#24415f;
  font-weight:800;
  line-height:1.2;
}

.machine-category-summary::-webkit-details-marker{
  display:none;
}

.machine-category-summary::marker{
  content:'';
}

.machine-category-summary::after{
  content:'▾';
  margin-left:auto;
  color:#64748b;
  font-size:13px;
  transition:transform .18s ease;
}

.machine-category-box[open] .machine-category-summary::after{
  transform:rotate(180deg);
}

.machine-category-title{
  min-width:0;
}

.machine-category-count{
  color:#64748b;
  font-size:12px;
  font-weight:700;
}

.machine-category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:8px;
  align-items:start;
  padding:0 10px 10px;
}

.branding-media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}

.branding-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border:1px solid #cfd9e6;
  border-radius:16px;
  background:linear-gradient(180deg, #ffffff 0%, #f3f7fc 100%);
}

.branding-card__header{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.branding-card__title{
  margin:0;
  font-size:14px;
  font-weight:700;
}

.branding-card__preview{
  min-height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #cfd9e6;
  border-radius:14px;
  background:#fff;
  padding:14px;
}

.branding-card__preview img{
  display:block;
  max-width:100%;
  height:auto;
}

.branding-card__actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.signature-pad-shell{
  border:1px solid #cfd9e6;
  border-radius:14px;
  background:linear-gradient(180deg, #fff8dc 0%, #fff3bf 100%);
  padding:8px;
}

.signature-pad-hint{
  margin-top:6px;
  font-size:12px;
  color:#7a5d1a;
  font-weight:600;
}

.branding-slot{
  display:flex;
  flex-direction:column;
  gap:8px;
  height:100%;
}

.branding-preview-box{
  margin-top:8px;
  min-height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #cfd9e6;
  border-radius:14px;
  background:#fff;
  padding:14px;
}

.branding-preview-box img{
  display:block;
  max-width:100%;
  width:auto;
  height:auto;
}

.signature-preview-box{
  position:relative;
  overflow:hidden;
  border-color:#d8c48e;
  background:
    linear-gradient(180deg, rgba(255,252,241,.98) 0%, rgba(255,245,208,.96) 100%),
    linear-gradient(90deg, rgba(215,189,120,.08) 0, rgba(215,189,120,.08) 1px, transparent 1px, transparent 18px),
    linear-gradient(0deg, rgba(215,189,120,.08) 0, rgba(215,189,120,.08) 1px, transparent 1px, transparent 18px);
  background-size:auto, 18px 18px, 18px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 12px 24px rgba(176,145,73,.10);
}

.signature-preview-box img{
  position:relative;
  z-index:1;
}

.signature-preview-badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 9px;
  border:1px solid rgba(176,145,73,.22);
  border-radius:999px;
  background:rgba(255,252,241,.94);
  color:#7a5d1a;
  font-size:11px;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 6px 14px rgba(176,145,73,.10);
}

.signature-existing-note{
  margin-top:8px;
  margin-bottom:10px;
  padding:9px 12px;
  border:1px solid #d8c48e;
  border-radius:12px;
  background:linear-gradient(180deg, #fffbee 0%, #fff4cf 100%);
  color:#7a5d1a;
  font-size:13px;
  font-weight:600;
}

.branding-pad-box{
  margin-top:8px;
}

.branding-upload-box{
  margin-top:8px;
  min-height:132px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
  padding:12px;
  border:1px solid #cfd9e6;
  border-radius:14px;
  background:#fff;
}

.import-upload-box{
  margin-top:8px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border:1px solid #cfd9e6;
  border-radius:14px;
  background:#fff;
}

.upload-input{
  width:100%;
  max-width:100%;
  padding:8px;
  border:1px dashed #b6c4d8;
  border-radius:12px;
  background:linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  font-size:14px;
  line-height:1.35;
}

.upload-input::file-selector-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:10px;
  padding:8px 12px;
  border:1px solid #c8d5e6;
  border-radius:10px;
  background:#fff;
  color:#111;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
}

.upload-input::-webkit-file-upload-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:10px;
  padding:8px 12px;
  border:1px solid #c8d5e6;
  border-radius:10px;
  background:#fff;
  color:#111;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
}

/* =========================
   Top navigation
   ========================= */
.public-shell{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
}

.top-logo-strip{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:12px 0 8px;
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,247,249,.92) 100%);
  border-bottom:1px solid rgba(17,17,17,.08);
  transition:max-height .28s ease, padding .28s ease, opacity .2s ease, transform .28s ease, border-color .28s ease;
  max-height:112px;
  opacity:1;
  overflow:hidden;
}

.top-logo-link{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  text-decoration:none;
  position:relative;
  width:min(var(--public-header-max-width, 1320px), calc(100% - 24px));
  margin:0 auto;
  padding-left:clamp(56px, 8vw, 100px);
}

.top-logo-link img{
  display:block;
  width:auto;
  height:clamp(44px, 7.8vw, 84px);
  max-width:min(68vw, 420px);
}

.top-logo-link picture{
  display:block;
}

.theme-logo--dark{
  display:none;
}

body.site-scrolled .top-logo-strip{
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  transform:translateY(-14px);
  border-bottom-color:transparent;
}

.top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:12px 0;
  background:rgba(17,17,17,.94);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.top-meta{
  justify-self:start;
  min-width:0;
  max-width:240px;
  font-size:14px;
  line-height:1.2;
  color:rgba(255,255,255,.82);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.public-nav--desktop{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  justify-self:center;
  min-width:0;
  flex-wrap:wrap;
}

.nav-toggle{
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:10px;
  min-height:38px;
  padding:0 12px;
  font-size:14px;
  font-weight:700;
  line-height:1.1;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.nav-mobile{
  display:none;
  position:relative;
  justify-self:start;
}

.nav-toggle:hover{
  background:rgba(255,255,255,.14);
}

.nav-toggle:focus-visible{
  outline:2px solid rgba(255,255,255,.6);
  outline-offset:2px;
}

.nav-toggle-icon{
  font-size:16px;
  line-height:1;
}

.public-nav-drawer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  min-width:0;
}

.nav-group{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.nav-group--center{
  max-width:100%;
}

.nav-side{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-side--desktop{
  justify-self:end;
  min-width:0;
}

.nav-separator{
  display:inline-block;
  width:1px;
  height:16px;
  background:rgba(255,255,255,.3);
  margin:0 2px;
}

.nav-divider{
  display:none;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.16);
}

.link{ color:#fff; text-decoration:none; font-size:14px; opacity:.9; }
.link:hover{ opacity:1; }
.link.link--master{
  color:#ffd447;
  font-weight:800;
  opacity:1;
}
.link.link--master:hover{
  color:#ffe06f;
}
.link.active{
  opacity:1;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:6px;
}

.public-nav--split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  grid-column:1 / -1;
  width:min(var(--public-header-max-width, 1320px), calc(100% - 24px));
  margin:0 auto;
}

.public-nav--split .nav-group--left{
  justify-content:flex-start;
  flex:1 1 auto;
  padding-left:clamp(56px, 8vw, 100px);
}

.public-nav--split .nav-group--right{
  justify-content:flex-end;
  margin-left:auto;
  padding-right:clamp(56px, 8vw, 100px);
}

.link-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.10);
  color:#fff !important;
  opacity:1;
  font-weight:800;
  line-height:1;
  text-decoration:none !important;
}

.link-pill:hover{
  background:rgba(255,255,255,.20);
}

.link-pill--cta{
  border-color:#f2d36b;
  background:linear-gradient(135deg, #ffe08a 0%, #d9a441 100%);
  color:#111 !important;
}

.link-pill--cta:hover{
  background:linear-gradient(135deg, #ffd96a 0%, #cc962f 100%);
}

.link-pill--neutral{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
  color:#fff !important;
}

.link-pill--neutral:hover{
  background:rgba(255,255,255,.18);
}

@media (max-width: 1024px){
  .top{
    display:flex;
    justify-content:space-between;
    position:relative;
    gap:10px;
  }

  .top-meta{
    order:2;
    flex:1 1 auto;
    max-width:calc(100% - 124px);
    text-align:right;
    margin-left:auto;
  }

  .public-nav--desktop,
  .nav-side--desktop{
    display:none !important;
  }

  .nav-mobile{
    order:1;
    display:flex;
    align-items:center;
    flex:0 0 auto;
    position:relative;
  }

  .nav-toggle{
    display:inline-flex;
  }

  .public-nav-drawer{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:auto;
    width:min(460px, calc(100vw - 20px));
    max-width:calc(100vw - 20px);
    box-sizing:border-box;
    display:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
    padding:10px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(17,17,17,.98);
    box-shadow:0 16px 30px rgba(0,0,0,.28);
    z-index:70;
  }

  .public-nav-drawer.is-open{
    display:flex;
  }

  .nav-divider{
    display:block;
  }

  .public-nav-drawer .nav-drawer-group,
  .public-nav-drawer .nav-group,
  .public-nav-drawer .nav-group--center,
  .public-nav-drawer .nav-side,
  .public-nav-drawer .nav-side--right{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
    flex-wrap:nowrap;
  }

  .public-nav-drawer .nav-drawer-group > .link,
  .public-nav-drawer .nav-group > .link,
  .public-nav-drawer .nav-side > .link{
    display:flex;
    width:100%;
    box-sizing:border-box;
    align-items:center;
    justify-content:flex-start;
    min-height:38px;
    padding:0 12px;
    border-radius:10px;
    background:rgba(255,255,255,.08);
  }

  .public-nav-drawer .link-pill{
    justify-content:center;
    min-height:40px;
    border-radius:12px;
  }
}

@media (max-width: 760px){
  .top-logo-link img{
    height:clamp(56px, 10.2vw, 102px);
    max-width:min(78vw, 460px);
  }

  .top{
    padding:10px;
    gap:8px;
  }

  .top-meta{
    max-width:calc(100% - 112px);
    font-size:13px;
  }

  .nav-toggle{
    min-height:36px;
    padding:0 11px;
    font-size:13px;
  }

  .public-nav-drawer{
    padding:9px;
    width:min(420px, calc(100vw - 16px));
    max-width:calc(100vw - 16px);
  }

  .public-nav-drawer .nav-drawer-group > .link,
  .public-nav-drawer .nav-group > .link,
  .public-nav-drawer .nav-side > .link{
    min-height:36px;
    font-size:13px;
  }

  .container{
    margin:8px auto;
    padding:0 8px;
  }

  .card{
    padding:10px;
    margin-bottom:8px;
    border-radius:12px;
  }

  .surface-panel,
  .branding-card,
  .branding-upload-box,
  .import-upload-box{
    padding:10px;
    border-radius:12px;
  }

  .branding-preview-box,
  .signature-pad-shell{
    padding:10px;
    border-radius:12px;
  }

  .branding-preview-box,
  .branding-upload-box{
    min-height:96px;
  }

  .branding-slot{
    gap:6px;
  }

  .branding-pad-box{
    margin-top:6px;
  }

  .grid{
    gap:8px;
  }

  .rental-step-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .rental-step-card{
    padding:11px !important;
    border-radius:13px !important;
  }

  .rental-subpanel{
    margin-top:10px !important;
    padding:10px !important;
    border-radius:12px !important;
  }

  .rental-date-box{
    flex:1 1 100% !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden;
  }

  .rental-machine-grid{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  .machine-category-summary{
    padding:11px 12px;
  }

  .machine-category-grid{
    grid-template-columns:1fr;
    gap:7px;
    padding:0 8px 8px;
  }

  .rental-machine-grid .mrow{
    padding:8px 9px !important;
    border-radius:10px !important;
  }

  .rental-summary-box{
    margin-top:10px !important;
  }

  .rental-submit-row{
    margin-top:10px !important;
    flex-direction:column;
    align-items:stretch !important;
  }

  .rental-submit-row .muted{
    font-size:12px;
  }

  .row,
  .rowhead{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .row{
    padding:10px 0;
  }

  .row > *,
  .rowhead > *{
    width:100%;
    min-width:0 !important;
  }

  .dt-row{
    width:100% !important;
    min-width:0 !important;
    flex-direction:row !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:8px;
  }

  .dt-row input[type="date"]{
    flex:1 1 auto !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
  }

  .dt-row select,
  .dt-row input[type="time"]{
    flex:0 0 106px !important;
    width:106px !important;
    min-width:106px !important;
    max-width:106px !important;
    height:var(--dt-height) !important;
    min-height:var(--dt-height) !important;
    max-height:var(--dt-height) !important;
    padding:0 10px !important;
    border-radius:12px !important;
    font-size:16px !important;
    font-weight:500 !important;
    line-height:normal !important;
  }

  .dt-row .date-picker-input{
    height:var(--dt-height) !important;
    min-height:var(--dt-height) !important;
    max-height:var(--dt-height) !important;
    padding:0 10px !important;
    border-color:#d8e2ee !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#111827 !important;
    box-shadow:none !important;
    font-size:16px !important;
    font-weight:500 !important;
    letter-spacing:0;
    line-height:normal !important;
  }

  .dt-row .date-picker-input:hover{
    border-color:#cdd9e7 !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  .dt-row .date-picker-input:focus,
  .dt-row .date-picker-input:focus-visible{
    border-color:#8fb4da !important;
    background:#fff !important;
    box-shadow:0 0 0 3px rgba(59,130,246,.14) !important;
    transform:none;
  }

  .dt-row .date-picker-input::-webkit-calendar-picker-indicator{
    height:18px;
    width:18px;
    margin-left:4px !important;
  }

  .dt-row .date-picker-input::-webkit-datetime-edit,
  .dt-row .date-picker-input::-webkit-datetime-edit-fields-wrapper{
    display:flex;
    align-items:center;
    min-height:var(--dt-height);
    font-weight:500 !important;
  }

  .date-picker-input:focus,
  .date-picker-input:focus-visible{
    transform:none;
  }

  .pricebox{
    padding:8px;
    border-radius:10px;
  }

  .pricebox .total{
    font-size:16px;
  }

  .dayhdr{
    margin-top:8px;
    margin-bottom:8px;
    padding-top:8px;
    font-size:14px;
  }

  .customerlist{
    gap:8px;
    margin-top:8px;
  }

  .customeritem{
    padding:10px;
    border-radius:12px;
  }

  .customeritem .listtitle{
    font-size:14px;
    line-height:1.35;
  }

  .customeritem .listsub{
    font-size:12px;
    line-height:1.45;
  }

  .cal-actions{
    margin-top:10px;
    gap:6px;
  }

  .cal-actions .pill,
  .cal-actions button.pill{
    white-space:normal;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  button{
    padding:9px;
    font-size:16px;
    border-radius:9px;
  }

  .upload-input{
    padding:6px;
  }

  .upload-input::file-selector-button,
  .upload-input::-webkit-file-upload-button{
    padding:7px 10px;
    border-radius:9px;
  }

  .mm-banner{
    margin:8px 0 10px;
    padding:9px 10px;
    border-radius:12px;
  }
}

@media (prefers-color-scheme: dark) and (max-width:760px){
  .dt-row .date-picker-input{
    border-color:#334159 !important;
    background:#11151b !important;
    color:#e9eef5 !important;
    box-shadow:none !important;
  }

  .dt-row .date-picker-input:hover{
    border-color:#44556d !important;
    background:#11151b !important;
    box-shadow:none !important;
  }

  .dt-row .date-picker-input:focus,
  .dt-row .date-picker-input:focus-visible{
    border-color:#5f88b3 !important;
    background:#11151b !important;
    box-shadow:0 0 0 3px rgba(102,163,224,.14) !important;
  }

  .dt-row .date-picker-input::-webkit-calendar-picker-indicator{
    filter:invert(1) brightness(1.12);
  }
}


/* ===== Subscription banner ===== */
.mm-banner{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.mm-banner--neutral{
  background: rgba(0,0,0,.05);
}
.mm-banner--warn{
  background: rgba(255, 166, 0, .14);
}
.mm-banner--danger{
  background: rgba(176,0,32,.12);
}

/* =========================
   Forms / Inputs
   ========================= */
label{
  display:block;
  font-size:12px;
  opacity:.8;
  margin:0 0 4px 0;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
button{
  width:100%;
  padding:10px;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:16px;
  background:#fff;
  color:#111;
}

textarea{ min-height:110px; resize:vertical; }

button[type="submit"]{
  padding:12px;
  border-radius:12px;
  border:0;
  background:#111;
  color:#fff;
  cursor:pointer;
}
form button[type="submit"]{ margin-top:14px; }

/* Checkbox / Radio */
input[type="checkbox"],
input[type="radio"]{
  width:auto;
  border:1px solid #bbb;
  border-radius:4px;
  background:#fff;
  vertical-align:middle;
}

/* =========================
   Grid
   ========================= */
.grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}
.grid > *{ min-width:0; }
.grid .full{ grid-column:1/-1; }

@media(max-width:980px){
  .grid{ grid-template-columns:1fr; }
}

/* =========================
   Alerts
   ========================= */
.error{ background:#ffe3e3; padding:10px; border-radius:10px; }
.notice{ background:#e8f5e9; padding:10px; border-radius:10px; }

/* =========================
   Row helpers
   ========================= */
.rowwrap{ display:flex; gap:8px; flex-wrap:wrap; }

/* =========================
   Pills (a + button unified)
   ========================= */
.pill{
  -webkit-appearance:none;
  appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  width:auto;
  max-width:100%;
  padding:7px 11px;
  border-radius:999px;

  border:1px solid #ddd;
  background:#fff;
  color:#111;

  font-size:13px;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.pill:hover{ background:#f3f4f6; }

/* Primary – Mint (Link + Button) */
.pill.primary{
  background:#f0f7f4;
  border-color:#bfe3d0;
  color:#14532d;
}
.pill.primary:hover{
  background:#dcf1e8;
}

/* Danger */
.pill.danger{
  border-color:#f0b4b4;
  background:#fff;
}
.pill.danger:hover{ background:#ffecec; }

/* ABGESAGT: rot, nicht klickbar */
.pill.cancelled{
  border-color:#f0b4b4;
  background:#ffecec;
  color:#b00020;
  pointer-events:none;
  cursor:default;
}

/* IMPORTANT: button.pill must not be full width */
button.pill{
  width:auto !important;
  padding:7px 11px !important;
  border-radius:999px !important;

  border:1px solid #ddd;
  background:#fff;
  color:#111;

  font-size:13px !important;
  line-height:1 !important;
  margin:0 !important;

  -webkit-appearance:none;
  appearance:none;
}

/* button primary = mint (wie .pill.primary) */
button.pill.primary{
  background:#f0f7f4 !important;
  border-color:#bfe3d0 !important;
  color:#14532d !important;
}
button.pill.primary:hover{
  background:#dcf1e8 !important;
  border-color:#bfe3d0 !important;
  color:#14532d !important;
  filter:none !important;
}

/* button danger */
button.pill.danger{
  border-color:#f0b4b4 !important;
  background:#fff !important;
}
button.pill.danger:hover{ background:#ffecec !important; }

/* =========================
   Lookup
   ========================= */
.lookup{
  margin-top:8px;
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.lookup-item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:0;
  border-top:1px solid #f1f1f1;
  background:#fff;
  cursor:pointer;
}
.lookup-item:first-child{ border-top:0; }
.lookup-item:hover{ background:#f6f7f9; }
.lookup-phone{ margin-left:8px; opacity:.7; font-size:13px; }
.lookup-empty{ padding:10px 12px; opacity:.7; font-size:14px; }

/* =========================
   Price box
   ========================= */
.pricebox{
  border:1px dashed #e5e7eb;
  border-radius:12px;
  padding:10px;
  background:#fafafa;
}
.pricebox .total{ margin-top:6px; font-size:18px; font-weight:800; }

.billing-list{
  display:grid;
  gap:12px;
}

.billing-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.billing-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:stretch;
}

.billing-actions > a,
.billing-actions > form{
  flex:1 1 0;
  min-width:0;
}

.billing-actions form{
  display:flex;
  align-items:stretch;
  margin:0;
}

.billing-pill{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  max-width:100%;
  padding:8px 13px !important;
  border-radius:999px !important;
  border:1px solid #d8e1ec;
  background:#f8fafc;
  color:#1f2937;
  font-size:13px;
  font-weight:700;
  line-height:1.1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:none;
}

button.billing-pill{
  width:auto !important;
}

.billing-pill:hover{
  text-decoration:none;
  filter:none;
}

.billing-pill--upgrade{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#166534;
}

.billing-pill--users{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1d4ed8;
}

.billing-pill--danger{
  background:#fff1f2;
  border-color:#fecdd3;
  color:#be123c;
}

.billing-pill--success{
  background:#f0fdf4;
  border-color:#bbf7d0;
  color:#166534;
}

.billing-pill--tenant{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#9a3412;
}

.billing-pill--plan{
  background:#f5f3ff;
  border-color:#ddd6fe;
  color:#6d28d9;
}

.billing-pill--status{
  background:#f8fafc;
  border-color:#cbd5e1;
  color:#334155;
}

.billing-pill--period{
  background:#fefce8;
  border-color:#fde68a;
  color:#92400e;
}

.billing-pill--warning{
  background:#fffbeb;
  border-color:#fde68a;
  color:#b45309;
}

.billing-pill--neutral{
  background:#f8fafc;
  border-color:#dbe3ee;
  color:#475569;
}

.billing-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  row-gap:10px;
}

.billing-toolbar{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0, 1fr);
  gap:10px;
  align-items:stretch;
  margin-top:14px;
}

.billing-toolbar__item{
  min-width:0;
  display:flex;
  align-items:stretch;
}

.billing-toolbar__item > a,
.billing-toolbar__item > form{
  width:100%;
  min-width:0;
  display:flex;
  align-items:stretch;
}

.billing-toolbar__item > form{
  margin:0;
}

.billing-toolbar__item > button{
  width:100%;
  min-width:0;
  margin:0;
}

.billing-action{
  -webkit-appearance:none;
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  height:42px;
  padding:0 14px !important;
  border-radius:12px;
  border:1px solid #d8e1ec;
  background:#fff;
  color:#1f2937;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-sizing:border-box;
  box-shadow:0 6px 14px rgba(15,23,42,.05);
  transition:background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.billing-toolbar__item .billing-action{
  width:100% !important;
  min-width:0;
}

.billing-action--neutral{
  background:#fff;
  border-color:#d8e1ec;
  color:#1f2937;
}

.billing-action--success{
  background:#eef8f2;
  border-color:#c9e8d4;
  color:#14532d;
}

.billing-action--danger{
  background:#fff4f5;
  border-color:#f3c6cc;
  color:#b4233b;
}

.billing-action:hover{
  text-decoration:none;
  filter:none;
}

a.billing-action--neutral:hover,
button.billing-action--neutral:hover{
  background:#abc7e4 !important;
  border-color:#5f88b4 !important;
  color:#102942 !important;
  box-shadow:0 18px 32px rgba(30,64,115,.22);
  transform:translateY(-2px);
}

a.billing-action--success:hover,
button.billing-action--success:hover{
  background:#99cfb0 !important;
  border-color:#4f936e !important;
  color:#0f3c24 !important;
  box-shadow:0 18px 32px rgba(25,88,54,.22);
  transform:translateY(-2px);
}

a.billing-action--danger:hover,
button.billing-action--danger:hover{
  background:#e9a7bb !important;
  border-color:#b95d7c !important;
  color:#65142e !important;
  box-shadow:0 18px 32px rgba(120,32,72,.22);
  transform:translateY(-2px);
}

.billing-card{
  border:1px solid #d6deea;
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.billing-card__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.billing-card__title{
  font-size:15px;
  font-weight:800;
}

.billing-card__amount{
  margin-top:10px;
  font-size:22px;
  font-weight:900;
}

.billing-status{
  margin-left:0;
  padding:5px 10px;
  border-radius:999px;
  font-weight:800;
}

.billing-status--paid{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}

.billing-status--open,
.billing-status--draft{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1d4ed8;
}

.billing-status--void,
.billing-status--uncollectible{
  background:#fff1f2;
  border-color:#fecdd3;
  color:#be123c;
}

.customer-rental-card{
  margin-top:12px;
  border-radius:16px;
  padding:14px;
  border:1px solid #d7e1ec;
  background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.customer-rental-card:first-of-type{
  margin-top:0;
}

.customer-rental-card.is-cancelled{
  opacity:1;
  border-color:#e3b8bf;
  background-color:#fff7f8;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(176,0,32,0.06) 0px,
      rgba(176,0,32,0.06) 8px,
      rgba(255,255,255,0) 8px,
      rgba(255,255,255,0) 16px
    );
}

.customeritem.is-cancelled{
  opacity:1;
  border-color:#e3b8bf;
  background-color:#fff7f8;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(176,0,32,0.06) 0px,
      rgba(176,0,32,0.06) 8px,
      rgba(255,255,255,0) 8px,
      rgba(255,255,255,0) 16px
    );
}

/* =========================
   Date + Time – height sync + iOS safe
   ========================= */
:root{ --dt-height: 42px; }

.dt-row{
  display:flex;
  gap:8px;
  align-items:stretch !important;
}
.dt-row input[type="date"]{ flex:1; min-width:0; }
.dt-row select,
.dt-row input[type="time"]{ width:110px; min-width:110px; }

.dt-row input[type="date"],
.dt-row input[type="time"],
.dt-row select{
  height:var(--dt-height) !important;
  min-height:var(--dt-height) !important;
  max-height:var(--dt-height) !important;

  padding:0 10px !important;
  line-height:var(--dt-height) !important;

  font-family:-apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size:16px !important;
  box-sizing:border-box !important;
}

/* Safari/iOS date quirks */
.dt-row input[type="date"]{
  -webkit-appearance:auto !important;
  appearance:auto !important;
  position:static;
  padding-right:10px !important;
}
.dt-row input[type="date"]::-webkit-datetime-edit{
  padding:0 !important;
  line-height:var(--dt-height) !important;
}
.dt-row input[type="date"]::-webkit-calendar-picker-indicator{
  position:static;
  transform:none;
  margin:0 !important;
  padding:0 !important;
  height:18px;
  width:18px;
  opacity:1;
  cursor:pointer;
}

.date-picker-input{
  border:1px solid rgba(40,95,146,.22) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg, rgba(248,252,255,.98) 0%, rgba(235,244,255,1) 100%) !important;
  color:#12324d !important;
  padding:0 14px !important;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 22px rgba(31,77,124,.08) !important;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    transform .16s ease;
}

.date-picker-input:hover{
  border-color:rgba(39,107,171,.34) !important;
  background:linear-gradient(180deg, rgba(252,254,255,1) 0%, rgba(229,241,255,1) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 26px rgba(37,86,137,.12) !important;
}

.date-picker-input:focus,
.date-picker-input:focus-visible{
  outline:none;
  border-color:#2c6ea9 !important;
  background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(223,238,255,1) 100%) !important;
  box-shadow:
    0 0 0 4px rgba(59,130,246,.18),
    0 16px 34px rgba(29,74,117,.18) !important;
  transform:translateY(-1px) scale(1.012);
}

.date-picker-input::-webkit-calendar-picker-indicator{
  height:20px;
  width:20px;
  opacity:.92;
}

.date-picker-input:focus::-webkit-calendar-picker-indicator,
.date-picker-input:focus-visible::-webkit-calendar-picker-indicator{
  transform:scale(1.16);
}

.rental-date-box{
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    transform .16s ease;
}

.rental-date-box:focus-within{
  border-color:rgba(67,126,186,.34) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(226,239,255,.08) 100%) !important;
  box-shadow:0 14px 28px rgba(34,82,132,.12) !important;
  transform:translateY(-1px);
}

/* =========================
   Calendar list (index.php)
   ========================= */
.dayhdr{
  margin-top:10px;
  margin-bottom:10px;
  padding-top:10px;
  border-top:1px solid #eee;
  font-weight:800;
}

.calrow{
  display:flex;
  gap:10px;
  padding:10px 0;
  border-top:1px dashed #eee;
}
.calleft{ width:230px; opacity:.9; min-width:0; }
.calright{ flex:1; min-width:0; }

@media(max-width:760px){
  .calrow{ flex-direction:column; }
  .calleft{ width:auto; }
}

.cal-actions{
  margin-top:8px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.cal-actions form{
  display:inline-flex;
  align-items:center;
  margin:0 !important;
  padding:0 !important;
}
.cal-actions .push-right{ margin-left:auto !important; }

.upcoming-machine-name{
  color:#475569;
}

.upcoming-customer-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  margin-left:2px;
  border-radius:999px;
  border:1px solid #c7dcf5;
  background:linear-gradient(180deg, #eef6ff 0%, #dbeafe 100%);
  color:#0f3f77 !important;
  font-weight:800;
  text-decoration:none;
  text-underline-offset:2px;
  box-shadow:0 8px 18px rgba(59,130,246,.10);
}

.upcoming-customer-link:hover{
  background:linear-gradient(180deg, #e0efff 0%, #c8e0ff 100%);
  border-color:#9fc5f8;
  color:#0b3a70 !important;
}

/* Cancelled calendar rows */
.is-cancelled{ opacity:.82; }
.is-cancelled .calleft,
.is-cancelled .calright > *:not(.cal-actions){
  text-decoration:line-through;
}
.is-cancelled .cal-actions,
.is-cancelled .cal-actions *{
  text-decoration:none !important;
}

/* =========================
   Calendar Gantt
   ========================= */
.gantt-wrap{
  display:grid;
  gap:12px;
  overflow:visible;
}

.card.gantt-wrap{
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  overflow: visible;
  max-width: 100%;
}

.gantt-view-wrap{
  min-width:0;
}

.gantt-back-row{
  display:flex;
  justify-content:flex-start;
  margin-bottom:14px;
}

.gantt-toolbar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.gantt-nav-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.gantt-nav-row--bottom{
  margin-top:12px;
}

.gantt-nav-row__edge{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
}

.gantt-nav-row__edge--right{
  justify-content:flex-end;
}

.gantt-nav-row__center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.gantt-toolbar .left,
.gantt-toolbar .right{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.gantt-toolbar .right form{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin:0;
}

.gantt-range-label{
  margin-top:8px;
  color:#64748b;
  font-size:13px;
  font-weight:700;
}

.gantt-legend{
  margin-top:8px;
  display:flex;
  gap:10px 16px;
  flex-wrap:wrap;
  color:#64748b;
  font-size:12px;
  font-weight:700;
}

.gantt-legend__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.gantt-legend__swatch{
  width:20px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
}

.gantt-legend__swatch.is-rental{
  border:1px solid #97a3b3;
  background:linear-gradient(180deg, #b0bbc9 0%, #9aa7b8 100%);
}

.gantt-legend__swatch.is-maintenance{
  border:1px solid #cda55c;
  background:linear-gradient(180deg, #ecd28a 0%, #dcb55d 100%);
}

.gantt-legend__swatch.is-inactive{
  border:1px solid #dd7d8b;
  background:linear-gradient(180deg, #ffdfe5 0%, #ffd0d8 100%);
}

.gantt-legend__swatch.is-partial-rental{
  border:1px solid #d7dee8;
  background:
    repeating-linear-gradient(
      135deg,
      #9aa7b8 0px,
      #9aa7b8 7px,
      #e6edf5 7px,
      #e6edf5 14px
    );
}

.gantt-legend__swatch.is-partial-maintenance{
  border:1px solid #cda55c;
  background:
    repeating-linear-gradient(
      135deg,
      #e7c870 0px,
      #e7c870 7px,
      #f4e2aa 7px,
      #f4e2aa 14px
    );
}

.gantt-shell{
  margin-top:12px;
  min-width:0;
}

.gantt-board{
  width:100%;
}

.gantt-scale{
  position:relative;
  padding-top:0;
  background:transparent;
}

.gantt-scale--sticky{
  position:sticky;
  top:0;
  z-index:30;
  padding-top:2px;
  background:linear-gradient(180deg, rgba(248,251,255,.98) 0%, rgba(248,251,255,.92) 78%, rgba(248,251,255,0) 100%);
}

.gantt-scale__spacer{
  min-height:54px;
}

.gantt-scale,
.gantt-row{
  display:grid;
  grid-template-columns:168px minmax(0, 1fr);
  gap:12px;
  align-items:stretch;
  margin-bottom:12px;
  width:100%;
  max-width:100%;
  min-width:0;
}

.gantt-category-row{
  display:grid;
  grid-template-columns:168px minmax(0, 1fr);
  gap:12px;
  align-items:center;
  margin:8px 0 10px;
  width:100%;
  max-width:100%;
  min-width:0;
}

.gantt-category-row__label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  color:#4f6175;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.gantt-category-row__line{
  height:1px;
  background:linear-gradient(90deg, #d7e1ee 0%, rgba(215,225,238,0) 100%);
}

.gantt-scale__label,
.gantt-machine{
  min-height:54px;
}

.gantt-scale__label{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:10px 12px;
  border:1px solid #d7e1ee;
  border-radius:14px;
  background:linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  color:#24415f;
  font-weight:800;
  min-width:0;
}

.gantt-scale__days{
  display:grid;
  grid-template-columns:repeat(14, minmax(0, 1fr));
  gap:0;
  border:1px solid #d7e1ee;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  min-width:0;
  box-shadow:0 10px 22px rgba(15,23,42,.14);
}

.gantt-scale__day{
  min-height:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border-left:1px solid #d7e1ee;
  background:transparent;
  color:#37516d;
}

.gantt-scale__day:first-child{
  border-left:none;
}

.gantt-scale__day strong{
  font-size:13px;
  line-height:1;
}

.gantt-scale__day span{
  font-size:10px;
  font-weight:700;
  opacity:.74;
}

.gantt-scale__day.is-weekend{
  background:rgba(148,163,184,.08);
}

.gantt-scale__day.is-today{
  background:rgba(59,130,246,.10);
}

.gantt-machine{
  display:flex;
  align-items:center;
  padding:8px 12px;
  border:1px solid #d7e1ee;
  border-radius:14px;
  background:linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.gantt-machine.is-inactive{
  border-color:#dd7d8b;
  background:linear-gradient(180deg, #ffdfe5 0%, #ffd0d8 100%);
}

.gantt-machine.is-maintenance{
  border-color:#cda55c;
  background:linear-gradient(180deg, #f6e2ae 0%, #edd08a 100%);
}

.gantt-machine__title{
  color:#16324b;
  font-weight:800;
  line-height:1.3;
  font-size:13px;
}

.gantt-machine.is-inactive .gantt-machine__title{
  color:#981524;
}

.gantt-machine.is-maintenance .gantt-machine__title{
  color:#6f4d08;
}

.gantt-track{
  position:relative;
  min-height:54px;
  border:1px solid #d7e1ee;
  border-radius:14px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  overflow:hidden;
  min-width:0;
}

.gantt-track__grid{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(14, minmax(0, 1fr));
  z-index:0;
}

.gantt-track__cell{
  border-left:1px solid #edf2f8;
}

.gantt-track__cell:first-child{
  border-left:none;
}

.gantt-track__cell.is-inactive{
  background:rgba(220,38,38,.28);
}

.gantt-track__overlay{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(14, minmax(0, 1fr));
  z-index:3;
  pointer-events:none;
}

.gantt-track__overlay-cell{
  background:transparent;
}

.gantt-track__overlay-cell.is-weekend{
  background:rgba(148,163,184,.12);
}

.gantt-track__overlay-cell.is-today{
  background:rgba(59,130,246,.12);
}

.gantt-bar{
  position:absolute;
  top:0;
  bottom:0;
  z-index:1;
  border-radius:13px;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}

.gantt-bar--rental{
  border:1px solid #97a3b3;
  background:linear-gradient(180deg, #b0bbc9 0%, #9aa7b8 100%);
}

.gantt-bar--maintenance{
  border:1px solid #cda55c;
  background-image:
    linear-gradient(to right, rgba(146,104,30,.18) 0, rgba(146,104,30,.18) 1px, transparent 1px),
    linear-gradient(180deg, #ecd28a 0%, #dcb55d 100%);
  background-size:calc(100% / var(--gantt-days, 1)) 100%, 100% 100%;
  background-repeat:repeat, no-repeat;
}

.gantt-bar--partial-rental{
  border:1px solid #d7dee8;
  background:
    repeating-linear-gradient(
      135deg,
      #9aa7b8 0px,
      #9aa7b8 7px,
      #e6edf5 7px,
      #e6edf5 14px
    );
}

.gantt-bar--partial-maintenance{
  border:1px solid #cda55c;
  background-image:
    linear-gradient(to right, rgba(146,104,30,.18) 0, rgba(146,104,30,.18) 1px, transparent 1px),
    repeating-linear-gradient(
      135deg,
      #e7c870 0px,
      #e7c870 7px,
      #f4e2aa 7px,
      #f4e2aa 14px
    );
  background-size:calc(100% / var(--gantt-days, 1)) 100%, auto;
  background-repeat:repeat, repeat;
}

@media(max-width:760px){
  .gantt-view-wrap{
    padding-left: calc(10px + env(safe-area-inset-left));
    padding-right: calc(10px + env(safe-area-inset-right));
  }

  .gantt-view-wrap .calendar-toolbar-box{
    padding:10px;
  }

  .gantt-view-wrap .gantt-toolbar,
  .gantt-view-wrap .gantt-toolbar .left,
  .gantt-view-wrap .gantt-toolbar .right,
  .gantt-view-wrap .gantt-toolbar .right form,
  .gantt-view-wrap .filterbar{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .gantt-view-wrap .gantt-toolbar .right form{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    align-items:stretch;
    justify-content:stretch;
  }

  .gantt-view-wrap .filterbar .muted{
    width:100%;
  }

  .gantt-view-wrap .filterbar select,
  .gantt-view-wrap .filterbar .pill{
    width:100%;
    max-width:100%;
  }

  .gantt-view-wrap .gantt-nav-row{
    gap:8px;
  }

  .gantt-view-wrap .gantt-nav-row .pill{
    width:100%;
    max-width:100%;
  }

  .gantt-view-wrap .gantt-machine__title{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .gantt-nav-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .gantt-nav-row__edge,
  .gantt-nav-row__edge--right,
  .gantt-nav-row__center{
    justify-content:flex-start;
  }

  .gantt-toolbar .right{
    width:100%;
  }

  .gantt-toolbar .right form{
    width:100%;
    justify-content:flex-start;
  }

  .gantt-scale,
  .gantt-row,
  .gantt-category-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .gantt-scale__spacer{
    display:none;
  }

  .gantt-scale__label,
  .gantt-machine{
    min-height:46px;
  }

  .gantt-scale__day{
    min-height:38px;
  }

  .gantt-scale__day strong{
    font-size:10px;
  }

  .gantt-scale__day span{
    font-size:9px;
  }

  .gantt-scale__label{
    padding:8px 10px;
  }

  .gantt-back-row{
    margin-bottom:10px;
  }

  .gantt-category-row{
    margin:4px 0 8px;
  }

  .gantt-category-row__line{
    display:none;
  }

  .gantt-track{
    min-height:38px;
  }
}

/* =========================
   Badges (base)
   ========================= */
.badge{
  display:inline-flex;
  align-items:center;

  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  line-height:1;

  border-radius:999px;
  border:1px solid #ddd;

  white-space:nowrap;
  margin-left:8px;
}

/* ONLY pickup/delivery badge right aligned */
.badge.pickup,
.badge.delivery,
.badge.abholung,
.badge.lieferung{
  float:right;
  margin-left:12px;
  margin-top:2px;
}
.badge.right-float{
  float:right;
  margin-left:8px;
  margin-top:2px;
}
.calright::after,
.listtitle::after,
.ev::after{
  content:"";
  display:block;
  clear:both;
}

/* Pickup = green */
.badge.pickup,
.badge.abholung{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}

/* Delivery = yellow */
.badge.delivery,
.badge.lieferung{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#92400e;
}

/* Inaktiv = red */
.badge.inaktiv{
  background:#ffecec;
  border-color:#f0b4b4;
  color:#b00020;
  font-weight:800;
}

/* Cancelled badge */
.badge.cancelled{
  background:#ffecec;
  border-color:#f0b4b4;
  color:#b00020;
  font-weight:800;
}

.badge.running{
  background:#ecfdf5;
  border-color:#86efac;
  color:#166534;
  font-weight:800;
}

/* If cancelled -> force pickup/delivery badge red (strike stays allowed) */
.is-cancelled .badge.pickup,
.is-cancelled .badge.abholung,
.is-cancelled .badge.delivery,
.is-cancelled .badge.lieferung{
  background:#ffecec !important;
  border-color:#f0b4b4 !important;
  color:#b00020 !important;
  text-decoration:line-through;
}

.customeritem.is-running,
.listrow.is-running,
.is-running.ev,
.is-running .ev{
  border-color:#73d69b !important;
  background-color:#f3fff7 !important;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(22,163,74,0.12) 0px,
      rgba(22,163,74,0.12) 8px,
      rgba(0,0,0,0.00) 8px,
      rgba(0,0,0,0.00) 16px
    ) !important;
  box-shadow:0 10px 24px rgba(16,185,129,.14) !important;
}

/* =========================
   MACHINE LIST (INDEX)
   ========================= */
.machinebox{ margin-top:8px; }
.machinehdr .rowwrap{ margin-top:16px; }

.machineplain{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.machineplain .catsep{
  margin-top:24px;
  margin-bottom:14px;
  font-weight:700;
  opacity:.85;
}

/* Row: checkbox + text */
.machineplain label.mrow{
  display:grid !important;
  grid-template-columns:26px minmax(0,1fr) !important;
  gap:14px;

  align-items:center !important;

  padding:14px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;

  font-size:16px;
  line-height:1.35;
  opacity:1;
}

.machineplain label.mrow input.mcheck{
  align-self:center !important;
  margin:0 !important;
}

/* Wrap long names (nicht "anywhere", sonst iPhone Buchstaben-Wrap) */
.machineplain .mtext{
  overflow-wrap:break-word;
  word-break:break-word;
}
.machineplain .mprice{ opacity:.75; font-size:13px; }

/* Checkbox: Standard eher klein (Desktop) */
.machineplain input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Touch-Geräte: Checkbox größer (iPhone/iPad) */
@media (hover: none) and (pointer: coarse){
  .machineplain input[type="checkbox"]{
    width:22px !important;
    height:22px !important;
    transform:scale(1.25) !important;
    transform-origin:center;
  }
}

/* iOS/Safari Touch: noch minimal größer */
@supports (-webkit-touch-callout: none){
  @media (hover: none) and (pointer: coarse){
    .machineplain input[type="checkbox"]{
      transform:scale(1.35) !important;
    }
  }
}

/* Desktop / iPad quer: 2 Spalten */
@media (min-width: 980px){
  .machineplain{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:14px;
  }
  .machineplain .catsep{
    grid-column: 1 / -1;
    margin-top:18px;
    margin-bottom:8px;
  }
  .machineplain label.mrow{ margin:0; }
}

/* iPad (optional): auch 2 Spalten */
@media (min-width: 760px) and (max-width: 979px){
  .machineplain{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:14px;
  }
  .machineplain .catsep{ grid-column:1/-1; }
}

/* =========================
   INVENTORY spacing
   ========================= */
.row{ padding:18px 0; }
.rowhead{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.row-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.row-sub{
  margin:10px 0 14px;
  font-size:13px;
  opacity:.85;
  line-height:1.35;
}

/* =========================
   Customers list (nice cards per customer)
   ========================= */
.customerlist{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}
.customeritem{
  border:1px solid #eee;
  border-radius:14px;
  background:#fff;
  padding:14px;
}
.customeritem .listtitle{
  font-weight:800;
  line-height:1.25;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0;
}
.customeritem .listsub{
  margin-top:6px;
  font-size:13px;
  opacity:.85;
  line-height:1.35;
}
.customeritem .listsub + .listsub{ margin-top:6px; }
.customeritem .actions{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.customeritem .actions .push-right{ margin-left:auto; }

/* =========================
   Star rating (fix: no full-width buttons)
   ========================= */
.stars{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:6px 10px;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  width:fit-content;
}
.stars .star{
  -webkit-appearance:none;
  appearance:none;

  width:auto !important;
  min-width:0 !important;
  max-width:none !important;

  padding:2px 4px !important;
  border:0 !important;
  border-radius:8px;

  background:transparent !important;

  font-size:22px;
  line-height:1;
  cursor:pointer;

  opacity:.35;
  color:#111;
}
.stars .star:hover{ opacity:.9; }

.stars[data-value="1"] .star[data-star="1"]{ opacity:1; }
.stars[data-value="2"] .star[data-star="1"],
.stars[data-value="2"] .star[data-star="2"]{ opacity:1; }
.stars[data-value="3"] .star[data-star="1"],
.stars[data-value="3"] .star[data-star="2"],
.stars[data-value="3"] .star[data-star="3"]{ opacity:1; }
.stars[data-value="4"] .star[data-star="1"],
.stars[data-value="4"] .star[data-star="2"],
.stars[data-value="4"] .star[data-star="3"],
.stars[data-value="4"] .star[data-star="4"]{ opacity:1; }
.stars[data-value="5"] .star[data-star="1"],
.stars[data-value="5"] .star[data-star="2"],
.stars[data-value="5"] .star[data-star="3"],
.stars[data-value="5"] .star[data-star="4"],
.stars[data-value="5"] .star[data-star="5"]{ opacity:1; }

.stars[data-value="1"] .star{ color:#b00020; }
.stars[data-value="2"] .star{ color:#b85c00; }
.stars[data-value="3"] .star{ color:#7a6b00; }
.stars[data-value="4"] .star{ color:#0a5a22; }
.stars[data-value="5"] .star{ color:#0a5a22; }

.stars .star-clear{
  font-size:18px;
  opacity:.6;
  margin-left:4px;
}
.stars .star-clear:hover{ opacity:1; }

/* =========================
   DELIVERY TYPE SELECT – badge colors
   (du setzt am <select> je nach Zustand:
   class="delivery-pickup" oder class="delivery-delivery")
   ========================= */
select.delivery-pickup,
select.delivery-delivery{
  font-weight:600;
  border-width:1px;
}

select.delivery-pickup{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}

select.delivery-delivery{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#92400e;
}

select.delivery-pickup:focus,
select.delivery-delivery:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(0,0,0,0.04);
}

/* =========================
   MOBILE FIX: Kalender als 1-Spalten Agenda
   (verhindert "Buchstaben untereinander")
   ========================= */
@media (max-width: 900px){
  .calgrid{
    grid-template-columns: 1fr !important;
    gap:10px !important;
  }

  .calgrid .dow{ display:none !important; }
  .calgrid .day.is-empty{ display:none !important; }

  .day{
    min-height:auto !important;
    padding:10px !important;
  }

  .ev{
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:6px !important;
  }

  .ev-left{ width:100% !important; min-width:0 !important; }

  /* Text normal umbrechen */
  .ev-title,
  .ev-sub{
    word-break:normal !important;
    overflow-wrap:break-word !important;
    white-space:normal !important;
  }

  /* Buttons kompakter */
  .ev-actions{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    justify-content:flex-start !important;
  }
  .ev-actions .pill{
    width:auto !important;
    padding:6px 10px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
}
/* =========================
   Kalender: Desktop = Buttons untereinander
   Mobile (1-Spalte) = Buttons dürfen nebeneinander
   + Text Overflow Fix
   ========================= */

/* Grundsätzlich: nichts darf aus der Event-Card rauslaufen */
.ev{
  max-width:100% !important;
  overflow:hidden !important;
  align-items:stretch !important;
}
.ev-left{
  min-width:0 !important;
  max-width:100% !important;
}

/* Text: normal umbrechen (kein "Buchstaben-Stacking") */
.ev-title,
.ev-sub{
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
}

/* Desktop / iPad / alles > 760px:
   Buttons untereinander, damit rechts nix abgeschnitten wird */
@media (min-width: 901px){
  .ev{
    flex-direction:column !important;
    justify-content:flex-start !important;
    gap:6px !important;
  }

  .ev-actions{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
  }

  .ev-actions .pill{
    width:auto !important;
    max-width:100% !important;
    white-space:nowrap !important;
  }
}

/* Mobile 1-Spalte (dein Agenda-Mode):
   Buttons dürfen nebeneinander + umbrechen */
@media (max-width: 900px){
  .ev{
    flex-direction:column !important;
    gap:6px !important;
  }

  .ev-actions{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    justify-content:flex-start !important;
    align-items:center !important;
  }

  .ev-actions .pill{
    width:auto !important;
    max-width:100% !important;
    padding:6px 10px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
}

/* =========================
   Autofill (Safari/Chrome) – blau/gelb entfernen
   ========================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:#111 !important;
  -webkit-box-shadow:0 0 0px 1000px #fff inset !important;
  box-shadow:0 0 0px 1000px #fff inset !important;
  transition: background-color 999999s ease-in-out 0s;
}

/* Account – Admin User Actions */
.user-admin-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top:14px;
}

.user-admin-box{
  border:1px dashed #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fafafa;
}

.user-admin-box h4{
  margin:0 0 8px 0;
  font-size:14px;
  font-weight:800;
}

@media(max-width:760px){
  .billing-header{
    align-items:stretch;
  }

  .billing-toolbar{
    width:100%;
    grid-auto-flow:row;
    grid-auto-columns:1fr;
    align-items:stretch;
  }

  .billing-toolbar__item{
    width:100%;
  }

  .billing-toolbar__item > a,
  .billing-toolbar__item > form{
    width:100%;
  }

  .billing-toolbar__item > button{
    width:100%;
  }

  .billing-toolbar__item .billing-action{
    width:100% !important;
    min-width:0;
  }

  .user-admin-grid{
    grid-template-columns:1fr;
  }
}

/* ===== account.php (ausgelagert aus <style>) ===== */

/* Autofill: blau/gelb entfernen */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:#111 !important;
  -webkit-box-shadow:0 0 0px 1000px #fff inset !important;
  box-shadow:0 0 0px 1000px #fff inset !important;
  transition: background-color 999999s ease-in-out 0s;
}

.acc-sep{ margin-top:10px; border-top:1px solid #eee; padding-top:10px; }

.acc-actions{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.acc-actions .push-right{ margin-left:auto; }

.account-section-save{
  margin-top:10px;
  margin-bottom:6px;
  padding-bottom:10px;
  border-bottom:1px dashed #d7d7d7;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.account-section-save--full{
  grid-column:1 / -1;
}

.account-section-save .pill.primary{
  min-width:144px;
  justify-content:center;
}

.account-multi-input-list{
  display:grid;
  gap:8px;
  margin-top:6px;
}

.account-multi-input-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}

.account-multi-input-remove{
  min-width:40px;
  padding-left:10px;
  padding-right:10px;
  justify-content:center;
}

.account-multi-input-remove.is-hidden{
  visibility:hidden;
  pointer-events:none;
}

.account-multi-input-actions{
  margin-top:8px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.user-admin-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.user-admin-box{
  border:1px dashed #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fafafa;
}
@media(max-width:760px){
  .user-admin-grid{ grid-template-columns:1fr; }

  .account-section-save .pill.primary{
    width:100%;
    min-width:0;
  }

  .account-multi-input-actions .pill{
    width:100%;
  }
}

/* Inline live validation UI */
.field-ok{ border-color:#a7f3d0 !important; background:#ecfdf5 !important; }
.field-bad{ border-color:#f0b4b4 !important; background:#ffecec !important; }
.hint{ margin-top:6px; font-size:13px; opacity:.85; line-height:1.35; }

/* ===== Rolle: Betrachter Badge rot (Farbton wie danger) ===== */
.badge.role-viewer{
  background:#fff5f5;
  border:1px solid #f0b4b4;
  color:#b00;
}
/* ===== Rollen-Badges ===== */

/* Viewer = rot (wie danger) */
.badge.role-viewer{
  background:#fff5f5;
  border:1px solid #f0b4b4;
  color:#b00;
}

/* Staff = gelb */
.badge.role-staff{
  background:#fff7cc;
  border:1px solid #f2d36b;
  color:#7a5a00;
}

/* =========================================================
   CALENDER_VIEW (Month Grid) – GLOBAL STYLES
   (diese Klassen fehlen dir aktuell in style.css)
   ========================================================= */

/* Wrapper */
.calwrap{ display:grid; gap:12px; }

/* iPhone Safe-Area: verhindert "rechts abgeschnitten" durch Notch/Insets */
.card.calwrap{
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  overflow-x: hidden;
  max-width: 100%;
}

.calendar-view-wrap{
  min-width:0;
}

.calendar-toolbar-box{
  padding:12px 14px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(248,251,255,.78) 0%, rgba(239,246,255,.64) 100%);
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}

.calendar-toolbar-box .gantt-toolbar,
.calendar-toolbar-box .gantt-nav-row{
  margin-bottom:0;
}

/* Top bar (Prev/Today/Next + Filter) */
.calnav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  min-width:0;
}
.calnav .left,
.calnav .right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  min-width:0;
}

/* Filterbar */
.filterbar form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin:0;
  min-width:0;
  max-width:100%;
}
.filterbar .muted{ margin:0; }
.filterbar select,
.filterbar a.pill,
.filterbar button.pill{
  height:40px;
  line-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  width:auto;
  margin:0;
  vertical-align:middle;
  min-width:0;
  max-width:100%;
}
.filterbar select{
  line-height:normal; /* iOS */
  padding:0 10px;
  max-width: 100%;
}

/* Month grid */
.calgrid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap:10px;
  width:100%;
  max-width:100%;
  min-width:0;
}
.dow{
  font-size:12px;
  opacity:.75;
  font-weight:800;
  padding:0 2px;
  text-align:center;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Day cell */
.day{
  border:1px solid #eee;
  border-radius:14px;
  padding:10px;
  background:#fff;
  min-height:110px;
  overflow:hidden;
  min-width:0;
}
.day.is-empty{ background:#fafafa; }
.day.is-today{ border:2px solid #d11; }

.daynum{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px;
  margin-bottom:6px;
  font-weight:800;
  min-width:0;
}
.daynum > div{ min-width:0; }
.daynum small{
  font-weight:700;
  opacity:.65;
  flex:0 0 auto;
  white-space:nowrap;
}

/* Event card inside day */
.ev{
  border:1px solid #eee;
  border-radius:12px;
  padding:8px 10px;
  margin-top:8px;
  background:#fff;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  min-width:0;
}
.ev-left{
  min-width:0;
  max-width:100%;
  flex:1 1 auto;
}
.ev-title{ font-weight:800; line-height:1.2; }
.ev-sub{ font-size:12px; opacity:.8; line-height:1.25; margin-top:2px; }

/* Actions area (Buttons) */
.ev-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
  margin-left:auto;
}
.ev-actions .pill{ white-space:nowrap; width:auto; }

/* smaller devices */
@media (max-width: 760px){
  .calendar-view-wrap .calendar-toolbar-box{
    padding:10px;
  }

  .calendar-view-wrap .filterbar,
  .calendar-view-wrap .filterbar form{
    width:100%;
    max-width:100%;
  }

  .calendar-view-wrap .filterbar form{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    align-items:stretch;
  }

  .calendar-view-wrap .filterbar .muted{
    width:100%;
  }

  .calendar-view-wrap .filterbar select,
  .calendar-view-wrap .filterbar .pill{
    width:100%;
    max-width:100%;
  }

  .calendar-view-wrap .calnav .left,
  .calendar-view-wrap .calnav .right{
    width:100%;
  }

  .calendar-view-wrap .calnav .right{
    justify-content:flex-start !important;
  }

  .calendar-view-wrap .ev-title,
  .calendar-view-wrap .ev-sub{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .calgrid{ gap:8px; }
  .day{ min-height:95px; padding:9px; }
  .ev{ padding:8px; }
}
@media (max-width: 430px){
  .calgrid{ gap:6px; }
  .day{ padding:7px; min-height:88px; border-radius:12px; }
  .dow{ font-size:11px; }
  .daynum{ margin-bottom:5px; }
  .daynum small{ font-size:11px; }
  .ev{ padding:7px; border-radius:10px; }
  .ev-title{ font-size:12px; }
  .ev-sub{ font-size:11px; }
  .ev-actions .pill{ height:34px; line-height:34px; }
}
@media (max-width: 360px){
  .calgrid{ gap:5px; }
  .day{ padding:6px; }
  .dow{ font-size:10px; }
  .daynum small{ font-size:10px; }
  .ev-actions .pill{ height:32px; line-height:32px; }
}
/* =========================================================
   DARK MODE (minimal-invasiv)
   Auto via OS setting: prefers-color-scheme: dark
   -> DIESEN BLOCK ans ENDE deiner style.css kopieren
   ========================================================= */

@media (prefers-color-scheme: dark){

  .theme-logo--light{
    display:none;
  }

  .theme-logo--dark{
    display:block;
  }

  /* Base */
  body{
    background:#0b0d10;
    color:#e9eef5;
  }

  /* Top nav bleibt dunkel, aber etwas “ruhiger” */
  .top-logo-strip{
    background:linear-gradient(180deg, rgba(11,15,21,.98) 0%, rgba(6,9,14,.96) 100%);
    border-bottom-color:rgba(255,255,255,.08);
  }
  .top{
    background:#070a0f;
    color:#e9eef5;
  }
  .link{ color:#e9eef5; opacity:.92; }
  .link:hover{ opacity:1; }

  /* Cards / surfaces */
  .card,
  .day,
  .ev,
  .customeritem,
  .lookup,
  .lookup-item,
  .stars,
  .pricebox,
  .user-admin-box,
  .machineplain label.mrow{
    background:#11151b;
    color:#e9eef5;
    border-color:#263041;
    box-shadow:0 10px 24px rgba(0,0,0,.45);
  }

  .order-create-card{
    background:#11151b;
    border-color:#263041;
    box-shadow:0 10px 24px rgba(0,0,0,.45);
  }

  .surface-panel,
  .branding-card{
    background:linear-gradient(180deg, #151b24 0%, #11151b 100%);
    border-color:#263041;
  }

  .rental-step-card{
    background:linear-gradient(180deg, #151b24 0%, #11151b 100%) !important;
    border-color:#263041 !important;
    box-shadow:0 10px 24px rgba(0,0,0,.45) !important;
  }

  .rental-subpanel{
    background:linear-gradient(180deg, #0f1319 0%, #121821 100%) !important;
    border-color:#263041 !important;
  }

  .rental-static-box{
    background:linear-gradient(180deg, #0d1218 0%, #131a23 100%) !important;
    border-color:#334155 !important;
    color:#e5edf7 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  }

  .rental-static-box .muted{
    color:#b4c0d2 !important;
  }

  .date-picker-input{
    border-color:#334a66 !important;
    background:linear-gradient(180deg, #121924 0%, #0f1722 100%) !important;
    color:#eef4fb !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 10px 22px rgba(0,0,0,.22) !important;
  }

  .date-picker-input:hover{
    border-color:#43658d !important;
    background:linear-gradient(180deg, #162130 0%, #101a26 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 12px 26px rgba(0,0,0,.28) !important;
  }

  .date-picker-input:focus,
  .date-picker-input:focus-visible{
    border-color:#66a3e0 !important;
    background:linear-gradient(180deg, #1a2736 0%, #132131 100%) !important;
    box-shadow:
      0 0 0 4px rgba(102,163,224,.18),
      0 16px 34px rgba(0,0,0,.34) !important;
  }

  .date-picker-input::-webkit-calendar-picker-indicator{
    filter:invert(1) brightness(1.14);
  }

  .rental-date-box:focus-within{
    border-color:#3f5f85 !important;
    background:linear-gradient(180deg, #152030 0%, #121a26 100%) !important;
    box-shadow:0 16px 30px rgba(0,0,0,.28) !important;
  }

  .customer-lookup-panel{
    background:linear-gradient(180deg, #231c0f 0%, #1a150d 100%) !important;
    border-color:#7c5e1f !important;
    box-shadow:0 12px 26px rgba(0,0,0,.34) !important;
  }

  .customer-lookup-panel label,
  .customer-lookup-panel .muted{
    color:#f2d48b !important;
  }

  .customer-lookup-panel #customer_lookup{
    border-color:#8f6e29;
    background:#16120d;
    box-shadow:0 0 0 3px rgba(146,110,41,.18);
    color:#f8fafc;
  }

  .rental-machine-grid .mrow{
    background:#0f1319 !important;
    border-color:#334159 !important;
    box-shadow:0 8px 18px rgba(0,0,0,.22);
  }

  .machine-category-box{
    border-color:#334159;
    background:linear-gradient(180deg, #141a22 0%, #10161d 100%);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
  }

  .machine-category-summary{
    color:#e9eef5;
  }

  .machine-category-summary::after,
  .machine-category-count{
    color:#b4c0d2;
  }

  .gantt-range-label,
  .gantt-legend,
  .gantt-category-row__label{
    color:#b4c0d2;
  }

  .gantt-scale--sticky{
    background:linear-gradient(180deg, rgba(17,21,27,.98) 0%, rgba(17,21,27,.92) 78%, rgba(17,21,27,0) 100%);
  }

  .gantt-scale__label,
  .gantt-machine{
    border-color:#263041;
    background:linear-gradient(180deg, #151b24 0%, #11151b 100%);
    color:#e9eef5;
    box-shadow:0 10px 24px rgba(0,0,0,.28);
  }

  .gantt-category-row__line{
    background:linear-gradient(90deg, #263041 0%, rgba(38,48,65,0) 100%);
  }

  .calendar-toolbar-box{
    border-color:#263041;
    background:linear-gradient(180deg, rgba(21,27,36,.92) 0%, rgba(17,21,27,.88) 100%);
    box-shadow:0 10px 24px rgba(0,0,0,.22);
  }

  .gantt-machine__title{
    color:#eef4fb;
  }

  .gantt-machine.is-inactive{
    border-color:#b45463;
    background:linear-gradient(180deg, #43161f 0%, #361119 100%);
  }

  .gantt-machine.is-maintenance{
    border-color:#b69350;
    background:linear-gradient(180deg, #4a3514 0%, #3a2810 100%);
  }

  .gantt-machine.is-inactive .gantt-machine__title{
    color:#ffc4cc;
  }

  .gantt-machine.is-maintenance .gantt-machine__title{
    color:#f3d694;
  }

  .gantt-scale__day{
    border-left-color:#263041;
    background:transparent;
    color:#d8e2ef;
  }

  .gantt-scale__days{
    border-color:#263041;
    background:linear-gradient(180deg, #151b24 0%, #11151b 100%);
    box-shadow:0 10px 22px rgba(0,0,0,.32);
  }

  .gantt-scale__day.is-weekend{
    background:rgba(71,85,105,.18);
  }

  .gantt-scale__day.is-today{
    background:rgba(59,130,246,.16);
  }

  .gantt-track{
    border-color:#263041;
    background:linear-gradient(180deg, #0f1319 0%, #121821 100%);
    box-shadow:0 6px 14px rgba(0,0,0,.24);
  }

  .gantt-track__cell{
    border-left-color:#1d2735;
  }

  .gantt-track__cell.is-inactive{
    background:rgba(180,84,99,.44);
  }

  .gantt-track__overlay-cell.is-weekend{
    background:rgba(71,85,105,.24);
  }

  .gantt-track__overlay-cell.is-today{
    background:rgba(59,130,246,.18);
  }

  .gantt-bar{
    box-shadow:0 6px 14px rgba(0,0,0,.24);
  }

  .gantt-bar--rental{
    border-color:#5b6778;
    background:linear-gradient(180deg, #f8fafc 0%, #dbe3ee 100%);
  }

  .gantt-bar--maintenance{
    border-color:#b69350;
    background-image:
      linear-gradient(to right, rgba(55,36,8,.26) 0, rgba(55,36,8,.26) 1px, transparent 1px),
      linear-gradient(180deg, #c9a55b 0%, #9a742c 100%);
    background-size:calc(100% / var(--gantt-days, 1)) 100%, 100% 100%;
    background-repeat:repeat, no-repeat;
  }

  .gantt-bar--partial-rental{
    border-color:#8b97a9;
    background:
      repeating-linear-gradient(
        135deg,
        #ffffff 0px,
        #ffffff 7px,
        #dbe3ee 7px,
        #dbe3ee 14px
      );
  }

  .gantt-bar--partial-maintenance{
    border-color:#b69350;
    background-image:
      linear-gradient(to right, rgba(55,36,8,.26) 0, rgba(55,36,8,.26) 1px, transparent 1px),
      repeating-linear-gradient(
        135deg,
        #c19d54 0px,
        #c19d54 7px,
        #d9bf7f 7px,
        #d9bf7f 14px
      );
    background-size:calc(100% / var(--gantt-days, 1)) 100%, auto;
    background-repeat:repeat, repeat;
  }

  .gantt-legend__swatch.is-rental{
    border-color:#5b6778;
    background:linear-gradient(180deg, #f8fafc 0%, #dbe3ee 100%);
  }

  .gantt-legend__swatch.is-maintenance{
    border-color:#b69350;
    background:linear-gradient(180deg, #c9a55b 0%, #9a742c 100%);
  }

  .gantt-legend__swatch.is-inactive{
    border-color:#b45463;
    background:linear-gradient(180deg, #cc6c7b 0%, #a74152 100%);
  }

  .gantt-legend__swatch.is-partial-rental{
    border-color:#8b97a9;
    background:
      repeating-linear-gradient(
        135deg,
        #ffffff 0px,
        #ffffff 7px,
        #dbe3ee 7px,
        #dbe3ee 14px
      );
  }

  .gantt-legend__swatch.is-partial-maintenance{
    border-color:#b69350;
    background:
      repeating-linear-gradient(
        135deg,
        #c19d54 0px,
        #c19d54 7px,
        #d9bf7f 7px,
        #d9bf7f 14px
      );
  }

  .billing-card{
    background:linear-gradient(180deg, #151b24 0%, #11151b 100%);
    border-color:#263041;
    box-shadow:0 10px 24px rgba(0,0,0,.45);
  }

  .import-map-item{
    border-color:#3f4d61;
    background:#18212b;
    color:#b9c3d3;
  }

  .import-map-item strong{
    color:#e5edf7;
  }

  .import-table-wrap{
    border-color:#263041;
    background:#0f1319;
  }

  .import-table thead th{
    border-bottom-color:#263041;
    background:#151b24;
    color:#b9c3d3;
  }

  .import-table tbody td{
    border-top-color:#263041;
  }

  .import-note{
    color:#97a6ba;
  }

  .import-empty{
    border-color:#334159;
    background:#141a22;
  }

  .import-badge-warning{
    border-color:#8a6a20;
    background:#33270f;
    color:#fcd34d;
  }

  .import-toolbar a.billing-action--neutral:hover,
  .import-toolbar button.billing-action--neutral:hover{
    background:#395267 !important;
    border-color:#9ec7ea !important;
    box-shadow:0 18px 34px rgba(0,0,0,.40);
    transform:translateY(-2px);
  }

  .import-toolbar a.billing-action--success:hover,
  .import-toolbar button.billing-action--success:hover{
    background:#365842 !important;
    border-color:#89c5a1 !important;
    box-shadow:0 18px 34px rgba(0,0,0,.40);
    transform:translateY(-2px);
  }

  .import-toolbar a.billing-action--danger:hover,
  .import-toolbar button.billing-action--danger:hover{
    background:#623c4a !important;
    border-color:#d29ab0 !important;
    box-shadow:0 18px 34px rgba(0,0,0,.40);
    transform:translateY(-2px);
  }

  .billing-pill{
    border-color:#334159;
    color:#e5edf7;
  }

  .billing-action{
    border-color:#334159;
    background:#141a22;
    color:#e5edf7;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
  }

  .billing-action--neutral{
    background:#141a22;
    border-color:#334159;
    color:#e5edf7;
  }

  .billing-action--success{
    background:#18251d;
    border-color:#345d43;
    color:#b7efc9;
  }

  .billing-action--danger{
    background:#271821;
    border-color:#6e3246;
    color:#f6c3d1;
  }

  .billing-pill--upgrade{
    background:#12261f;
    border-color:#255b46;
    color:#a7f3d0;
  }

  .billing-pill--users{
    background:#142338;
    border-color:#31558f;
    color:#bfdbfe;
  }

  .billing-pill--danger{
    background:#311620;
    border-color:#7f1d3f;
    color:#fecdd3;
  }

  .billing-pill--success{
    background:#16271c;
    border-color:#2d6a3f;
    color:#bbf7d0;
  }

  .billing-pill--tenant{
    background:#322114;
    border-color:#8f5a28;
    color:#fed7aa;
  }

  .billing-pill--plan{
    background:#241d3a;
    border-color:#5a4aa0;
    color:#ddd6fe;
  }

  .billing-pill--status{
    background:#1b2431;
    border-color:#42536c;
    color:#cbd5e1;
  }

  .billing-pill--period{
    background:#322610;
    border-color:#8a6a20;
    color:#fde68a;
  }

  .billing-pill--warning{
    background:#33270f;
    border-color:#8a6a20;
    color:#fcd34d;
  }

  .billing-pill--neutral{
    background:#18212b;
    border-color:#3f4d61;
    color:#b9c3d3;
  }

  a.billing-pill--upgrade:hover,
  button.billing-pill--upgrade:hover{
    background:#173128;
    border-color:#31745a;
  }

  a.billing-pill--users:hover,
  button.billing-pill--users:hover{
    background:#1a2d46;
    border-color:#4d74b4;
  }

  a.billing-action--neutral:hover,
  button.billing-action--neutral:hover{
    background:#395267 !important;
    border-color:#9ec7ea !important;
    box-shadow:0 18px 34px rgba(0,0,0,.40);
    transform:translateY(-2px);
  }

  a.billing-action--success:hover,
  button.billing-action--success:hover{
    background:#365842 !important;
    border-color:#89c5a1 !important;
    box-shadow:0 18px 34px rgba(0,0,0,.40);
    transform:translateY(-2px);
  }

  a.billing-action--danger:hover,
  button.billing-action--danger:hover{
    background:#623c4a !important;
    border-color:#d29ab0 !important;
    box-shadow:0 18px 34px rgba(0,0,0,.40);
    transform:translateY(-2px);
  }

  .branding-card__preview,
  .signature-pad-shell{
    border-color:#263041;
  }

  .signature-pad-shell{
    background:linear-gradient(180deg, #2b2413 0%, #1f1a10 100%);
  }

  .signature-pad-hint{
    color:#e9d48a;
  }

  .branding-preview-box{
    border-color:#263041;
    background:#0f1319;
  }

  .signature-preview-box{
    border-color:#8a7440;
    background:
      linear-gradient(180deg, rgba(255,250,233,.98) 0%, rgba(255,239,185,.95) 100%),
      linear-gradient(90deg, rgba(138,116,64,.12) 0, rgba(138,116,64,.12) 1px, transparent 1px, transparent 18px),
      linear-gradient(0deg, rgba(138,116,64,.12) 0, rgba(138,116,64,.12) 1px, transparent 1px, transparent 18px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      0 12px 24px rgba(0,0,0,.22);
  }

  .signature-preview-badge{
    border-color:rgba(138,116,64,.28);
    background:rgba(255,249,225,.96);
    color:#6e5317;
    box-shadow:0 6px 14px rgba(0,0,0,.12);
  }

  .signature-existing-note{
    border-color:#8a7440;
    background:linear-gradient(180deg, rgba(255,248,221,.96) 0%, rgba(255,236,174,.92) 100%);
    color:#6e5317;
  }

  .branding-upload-box,
  .import-upload-box{
    border-color:#263041;
    background:#0f1319;
  }

  .upload-input{
    background:linear-gradient(180deg, #141a22 0%, #0f1319 100%);
    border-color:#334159;
    color:#e9eef5;
  }

  .upload-input::file-selector-button,
  .upload-input::-webkit-file-upload-button{
    border-color:#334159;
    background:#11151b;
    color:#e9eef5;
  }
  /* Stars in Dark Mode: deutlich heller (auch bei value=0) */
  .stars{ border-color:#2b364a !important; }
  .stars .star{
    color:#e9eef5 !important;   /* leere Sterne sichtbar */
    opacity:.55;
  }
  .stars .star:hover{ opacity:1; }
  .stars[data-value="0"] .star{ opacity:.65; }
  .stars .star-clear{ color:#e9eef5 !important; opacity:.75; }

  /* Bewertungsfarben im Dark Mode etwas “knalliger” */
  .stars[data-value="1"] .star{ color:#ff6b7a !important; }
  .stars[data-value="2"] .star{ color:#ffb14a !important; }
  .stars[data-value="3"] .star{ color:#ffe27a !important; }
  .stars[data-value="4"] .star,
  .stars[data-value="5"] .star{ color:#7ef0a7 !important; }
  /* Subtle surfaces */
  .day.is-empty,
  .pricebox,
  .user-admin-box{
    background:#0f1319;
  }

  /* Headings + muted text: lieber echte Farbe statt opacity */
  .muted,
  label,
  .row-sub,
  .lookup-phone,
  .lookup-empty,
  .dow,
  .ev-sub,
  .calleft{
    color:#b9c3d3 !important;
    opacity:1 !important;
  }

  /* Separators / borders */
  .dayhdr,
  .calrow,
  .lookup,
  .lookup-item,
  .customeritem,
  .machineplain label.mrow,
  .day:not(.is-today),
.ev{
  border-color:#263041 !important;
}

  /* Inputs */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{
    background:#0f1319;
    color:#e9eef5;
    border-color:#2b364a;
  }
  input::placeholder,
  textarea::placeholder{
    color:#93a0b5;
  }

  /* Checkbox / Radio */
  input[type="checkbox"],
  input[type="radio"]{
    background:#0f1319;
    border-color:#2b364a;
  }

  /* Submit button */
  button[type="submit"]{
    background:#e9eef5;
    color:#0b0d10;
  }

  /* Pills */
  .pill,
  button.pill{
    background:#0f1319 !important;
    color:#e9eef5 !important;
    border-color:#2b364a !important;
  }
  .pill:hover,
  button.pill:hover{
    background:#141a22 !important;
  }

  /* Primary pill (mint) */
  .pill.primary,
  button.pill.primary{
    background:#0f241a !important;
    border-color:#1f5a3c !important;
    color:#bff0d5 !important;
  }
  .pill.primary:hover,
  button.pill.primary:hover{
    background:#133021 !important;
  }

  /* Danger pill */
  .pill.danger,
  button.pill.danger{
    border-color:#6a2a2a !important;
    background:#161014 !important;
    color:#ffd6d6 !important;
  }
  .pill.danger:hover,
  button.pill.danger:hover{
    background:#1d1217 !important;
  }

  /* Cancelled pill/badge (deutlich dunkler) */
  .pill.cancelled,
  .badge.cancelled{
    background:#1a0b0e !important;
    border-color:#6b2a33 !important;
    color:#ffd6d6 !important;
  }

  /* Alerts */
  .error{
    background:#2a1416;
    color:#ffd6d6;
  }
  .notice{
    background:#13261a;
    color:#c9f3da;
  }

  /* Badges base */
  .badge{
    background:#0f1319;
    border-color:#2b364a;
    color:#e9eef5;
  }

  /* Pickup / Delivery badges */
  .badge.pickup,
  .badge.abholung{
    background:#0f241a;
    border-color:#1f5a3c;
    color:#bff0d5;
  }
  .badge.delivery,
  .badge.lieferung{
    background:#2a200f;
    border-color:#6b4a19;
    color:#ffe2b8;
  }

  /* Inaktiv badge */
  .badge.inaktiv{
    background:#1a0b0e;
    border-color:#6b2a33;
    color:#ffd6d6;
  }

  .badge.running{
    background:#0f241a;
    border-color:#1f5a3c;
    color:#bff0d5;
  }

  /* Calendar today border */
  .day.is-today{
    border-color:#ff4d4d;
  }

  /* Lookup hover */
  .lookup-item:hover{
    background:#141a22;
  }

  /* Select delivery color variants */
  select.delivery-pickup{
    background:#0f241a;
    border-color:#1f5a3c;
    color:#bff0d5;
  }
  select.delivery-delivery{
    background:#2a200f;
    border-color:#6b4a19;
    color:#ffe2b8;
  }
  select.delivery-pickup:focus,
  select.delivery-delivery:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(255,255,255,0.06);
  }

  .upcoming-machine-name{
    color:#c6d0de;
  }

  .upcoming-customer-link{
    background:linear-gradient(180deg, #11233b 0%, #16304f 100%) !important;
    border-color:#295887 !important;
    color:#d9ebff !important;
    box-shadow:0 10px 24px rgba(8,24,45,.34);
  }

  .upcoming-customer-link:hover{
    background:linear-gradient(180deg, #153055 0%, #1a3d67 100%) !important;
    border-color:#3a74ad !important;
    color:#eef6ff !important;
  }

  /* ===== CANCELLED / ABGESAGT: ganze Box dunkler + Text klar ===== */

  /* komplette abgesagte Event-Box (Month view) */
  .is-cancelled.ev,
  .is-cancelled .ev{
    background:#06090f !important;
    border-color:#55242a !important;
    box-shadow:0 12px 28px rgba(0,0,0,.55) !important;
  }

  /* NICHT per opacity “ausgrauen” – macht Text unlesbar */
  .is-cancelled{ opacity:1 !important; }

  .is-cancelled .calleft,
  .is-cancelled .calright,
  .is-cancelled .ev-title,
  .is-cancelled .ev-sub{
    color:#e6edf7 !important;
    opacity:1 !important;
  }

  /* Strike-through sichtbar, aber nicht matschig */
  .is-cancelled .calleft,
  .is-cancelled .calright > *:not(.cal-actions),
  .is-cancelled .ev-title,
  .is-cancelled .ev-sub{
    text-decoration-color:#93a0b5 !important;
  }

  /* cancelled pickup/delivery (du forcest die ja rot) -> dunkelrot */
  .is-cancelled .badge.pickup,
  .is-cancelled .badge.abholung,
  .is-cancelled .badge.delivery,
  .is-cancelled .badge.lieferung{
    background:#1a0b0e !important;
    border-color:#6b2a33 !important;
    color:#ffd6d6 !important;
    text-decoration-color:#93a0b5 !important;
  }

  /* Autofill in dark (sonst bleibt weiß) */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  select:-webkit-autofill{
    -webkit-text-fill-color:#e9eef5 !important;
    -webkit-box-shadow:0 0 0px 1000px #0f1319 inset !important;
    box-shadow:0 0 0px 1000px #0f1319 inset !important;
    transition: background-color 999999s ease-in-out 0s;
  }


    /* =========================================================
     CANCELLED / ABGESAGT: schraffiert (wirkt heller, bleibt dark)
     gilt für: customeritem, listrow, month-view ev
     ========================================================= */

  /* listrow soll wie eine kleine Card wirken (nur wenn du es willst) */
  .listrow{
    border-radius:12px;
    padding:12px;
    border:1px solid #263041;
    background:#11151b;
  }

  /* Schraffur: 2 Layer (Basis + diagonale Streifen) */
  .customeritem.is-cancelled,
  .listrow.is-cancelled,
  .is-cancelled.ev,
  .is-cancelled .ev{
    border-color:#55242a !important;

    /* Basis etwas heller als #04060a, aber nicht “hell” */
    background-color:#0f141c !important;

    /* Diagonale Streifen: sehr subtil */
    background-image:
      repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.06) 0px,
        rgba(255,255,255,0.06) 8px,
        rgba(0,0,0,0.00) 8px,
        rgba(0,0,0,0.00) 16px
      ) !important;

    box-shadow:0 12px 28px rgba(0,0,0,.55) !important;
  }

  .customeritem.is-running,
  .listrow.is-running,
  .is-running.ev,
  .is-running .ev{
    border-color:#1f5a3c !important;
    background-color:#0f1713 !important;
    background-image:
      repeating-linear-gradient(
        135deg,
        rgba(134,239,172,0.15) 0px,
        rgba(134,239,172,0.15) 8px,
        rgba(0,0,0,0.00) 8px,
        rgba(0,0,0,0.00) 16px
      ) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.45) !important;
  }

  /* Text in cancelled: nicht ausgrauen */
  .customeritem.is-cancelled,
  .listrow.is-cancelled,
  .is-cancelled{
    opacity:1 !important;
  }

  .customeritem.is-cancelled .muted,
  .listrow.is-cancelled .muted,
  .customeritem.is-cancelled .listsub,
  .listrow.is-cancelled .listsub,
  .is-cancelled .ev-sub{
    color:#c6d0de !important;
    opacity:1 !important;
  }

  .customeritem.is-cancelled .listtitle,
  .listrow.is-cancelled .listtitle,
  .is-cancelled .ev-title{
    color:#eef3fb !important;
  }

  /* Strike-through sichtbar */
  .is-cancelled .calleft,
  .is-cancelled .calright > *:not(.cal-actions),
  .is-cancelled .ev-title,
  .is-cancelled .ev-sub{
    text-decoration-color:#93a0b5 !important;
  }
}

/* =========================
   DARK MODE – Inputs dunkler + Placeholder kontrastreicher
   (ans ENDE der style.css)
   ========================= */
@media (prefers-color-scheme: dark){

  /* Inputs: Hintergrund dunkler, Border etwas klarer */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{
    background:#0a0e13 !important;   /* dunkler als #0f1319 */
    border-color:#334159 !important; /* etwas mehr Kontrast */
    color:#e9eef5 !important;
  }

  /* Placeholder: sichtbar, aber nicht grell */
  input::placeholder,
  textarea::placeholder{
    color:#aab6c9 !important;        /* deutlich lesbarer */
    opacity:1 !important;            /* wichtig für iOS/Safari */
  }
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder{
    color:#aab6c9 !important;
    opacity:1 !important;
  }

  /* Select (iOS): Text/Arrow wirkt sonst manchmal "washed" */
  select{
    color:#e9eef5 !important;
  }

  /* Focus: etwas klarer, ohne "Neon" */
  input:focus,
  select:focus,
  textarea:focus{
    outline:none !important;
    border-color:#465a7a !important;
    box-shadow:0 0 0 2px rgba(255,255,255,0.06) !important;
  }

  /* Autofill in Dark: darf NICHT wieder hell werden */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  select:-webkit-autofill{
    -webkit-text-fill-color:#e9eef5 !important;
    -webkit-box-shadow:0 0 0px 1000px #0a0e13 inset !important;
    box-shadow:0 0 0px 1000px #0a0e13 inset !important;
  }

  .app-footer{
    color:rgba(233,238,245,.68);
  }
}

/* Maintenance checklist: checkbox rechts */
.maint-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.maint-row .maint-title{
  flex:1;
  min-width:0;
}
.maint-row .maint-done{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

/* =========================
   Public Contrast Pass
   ========================= */
.public-start-page,
.public-tenant-page,
.market-shell,
.tenant-shell{
  background:#eef2f7;
  color:#0b1220;
}

.public-start-page .muted,
.public-tenant-page .muted,
.market-shell .muted,
.tenant-shell .muted{
  color:#334155;
  opacity:1;
}

.public-start-page .market-card,
.public-start-page .market-item,
.public-start-page .market-sidebar .card,
.public-tenant-page .tenant-hero,
.public-tenant-page .tenant-tab-card,
.public-tenant-page .tenant-article-card,
.market-card,
.market-item,
.market-sidebar .card,
.tenant-hero,
.tenant-tab-card,
.tenant-article-card{
  border-color:#b8c7da !important;
  box-shadow:0 14px 30px rgba(2,6,23,.10) !important;
}

.public-start-page .pill,
.public-tenant-page .pill,
.market-shell .pill,
.tenant-shell .pill{
  border-color:#94a3b8;
  background:#fff;
  color:#0f172a;
}

.public-start-page .pill:hover,
.public-tenant-page .pill:hover,
.market-shell .pill:hover,
.tenant-shell .pill:hover{
  background:#eaf0f8;
}

.public-start-page .pill.primary,
.public-tenant-page .pill.primary,
.market-shell .pill.primary,
.tenant-shell .pill.primary{
  background:#166534;
  border-color:#166534;
  color:#fff;
}

.public-start-page .pill.primary:hover,
.public-tenant-page .pill.primary:hover,
.market-shell .pill.primary:hover,
.tenant-shell .pill.primary:hover{
  background:#14532d;
  border-color:#14532d;
  color:#fff;
}

@media (prefers-color-scheme: dark){
  .public-start-page,
  .public-tenant-page,
  .market-shell,
  .tenant-shell{
    background:#070b12 !important;
    color:#f8fafc !important;
  }

  .public-start-page .muted,
  .public-tenant-page .muted,
  .market-shell .muted,
  .tenant-shell .muted{
    color:#d1d9e6 !important;
    opacity:1 !important;
  }

  .public-start-page .top,
  .public-tenant-page .top,
  .public-shell .top{
    background:#0b111a !important;
    border-bottom-color:#334155 !important;
  }

  .public-start-page .link,
  .public-tenant-page .link,
  .public-shell .top .link{
    color:#f8fafc !important;
    opacity:1 !important;
  }

  .public-start-page .link-pill--neutral,
  .public-tenant-page .link-pill--neutral,
  .public-shell .top .link-pill--neutral{
    background:#1e293b !important;
    border-color:#475569 !important;
    color:#f8fafc !important;
  }

  .public-start-page .market-card,
  .public-start-page .market-item,
  .public-start-page .market-sidebar .card,
  .public-tenant-page .tenant-hero,
  .public-tenant-page .tenant-tab-card,
  .public-tenant-page .tenant-article-card,
  .public-tenant-page .tenant-booking-form,
  .market-card,
  .market-item,
  .market-sidebar .card,
  .tenant-hero,
  .tenant-tab-card,
  .tenant-article-card,
  .tenant-booking-form{
    background:#0f1622 !important;
    border-color:#3b4a5f !important;
    box-shadow:0 16px 34px rgba(0,0,0,.40) !important;
  }

  .market-shell input:not([type="checkbox"]):not([type="radio"]),
  .market-shell select,
  .market-shell textarea,
  .tenant-shell input:not([type="checkbox"]):not([type="radio"]),
  .tenant-shell select,
  .tenant-shell textarea{
    background:#0f1622 !important;
    border-color:#475569 !important;
    color:#f8fafc !important;
  }

  .market-shell input::placeholder,
  .market-shell textarea::placeholder,
  .tenant-shell input::placeholder,
  .tenant-shell textarea::placeholder{
    color:#a7b7ce !important;
    opacity:1 !important;
  }

  .public-start-page .pill,
  .public-tenant-page .pill,
  .market-shell .pill,
  .tenant-shell .pill{
    background:#111a27 !important;
    border-color:#566982 !important;
    color:#f8fafc !important;
  }

  .public-start-page .pill:hover,
  .public-tenant-page .pill:hover,
  .market-shell .pill:hover,
  .tenant-shell .pill:hover{
    background:#172335 !important;
    border-color:#6b7f9a !important;
    color:#fff !important;
  }

  .public-start-page .pill.primary,
  .public-tenant-page .pill.primary,
  .market-shell .pill.primary,
  .tenant-shell .pill.primary{
    background:#22c55e !important;
    border-color:#22c55e !important;
    color:#06220f !important;
  }

  .public-start-page .pill.primary:hover,
  .public-tenant-page .pill.primary:hover,
  .market-shell .pill.primary:hover,
  .tenant-shell .pill.primary:hover{
    background:#16a34a !important;
    border-color:#16a34a !important;
    color:#04140a !important;
  }
}