/* MERZI Service-App UI v15.5 -- additive, responsive and backend-neutral */
:root{--mz-navy:#072c4f;--mz-deep:#031f3c;--mz-blue:#039efa;--mz-blue2:#0078cd;--mz-bg:#f1f7fc;--mz-ink:#102d4f;--mz-muted:#647e97;--mz-edge:#dceaf5;--mz-soft:#e7f5ff;--mz-shadow:0 8px 26px rgba(8,50,90,.07);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif!important;background:var(--mz-bg)!important;color:var(--mz-ink)!important}
html{scroll-behavior:smooth}body{background:radial-gradient(ellipse 120% 60% at 50% 0,#e8f5ff 0,#f3f8fc 68%) fixed!important;color:var(--mz-ink)!important;min-height:100vh}
header{background:linear-gradient(115deg,#041e3b,#073760 70%,#083151)!important;border-bottom:1px solid #15486e;min-height:76px;box-shadow:0 5px 24px #06284720!important;position:relative;z-index:20}
header .brand{display:inline-flex;gap:12px;align-items:center;font-size:1.14rem;letter-spacing:.045em;font-weight:800;color:#fff!important}
header .brand-logo{width:47px!important;height:47px!important;object-fit:contain;background:#e3f5ff;padding:5px;border:1px solid #b9e4ff;border-radius:12px;box-shadow:0 3px 10px #0003}
header nav a{padding:10px 14px!important;font-weight:600;color:#e5f5ff!important;border-radius:10px!important;white-space:nowrap}
header nav a:hover,header nav a.mz-active{background:#007ed1!important;color:#fff!important}
header nav button{min-height:40px!important;color:#f4faff!important;background:#ffffff19!important;border:1px solid #ffffff33!important}
.wrap{max-width:1450px!important;margin:0 auto!important;padding:26px 25px 45px!important}
.wrap h1{font-size:clamp(1.35rem,2.5vw,1.9rem);letter-spacing:-.035em;margin:3px 0 16px;color:var(--mz-deep)!important}
.wrap h2{font-size:1.16rem;letter-spacing:-.015em;color:var(--mz-deep)!important}
.wrap article,.wrap .panel,.wrap .item{background:#fff!important;border:1px solid var(--mz-edge)!important;box-shadow:var(--mz-shadow)!important}
.wrap article,.wrap .panel{padding:21px!important;border-radius:17px!important;margin-bottom:16px!important}
.wrap .item{border-radius:12px!important;transition:.16s ease}
.wrap .item:hover{background:#edf8ff!important;border-color:#9ed9ff!important;transform:translateY(-1px)}
.wrap a{color:var(--mz-blue2)}
.wrap button,.wrap .btn{background:linear-gradient(180deg,#0da5ff,#0089e7)!important;color:white!important;font-weight:700!important;border-radius:10px!important;box-shadow:0 3px 9px #0095f020;min-height:43px}
.wrap button:hover,.wrap .btn:hover{filter:brightness(.95)}
.wrap button.secondary,.wrap .btn.secondary{background:#e9f5fe!important;color:#0a3d69!important;box-shadow:none!important}
.wrap button.secondary:hover,.wrap .btn.secondary:hover{background:#dbeefe!important}
.wrap label{color:#183958;font-size:.93rem}
.wrap input:not([type=checkbox]):not([type=radio]),.wrap select,.wrap textarea{border:1px solid #cadfee!important;border-radius:10px!important;background:#fff!important;color:#183b5d!important}
.wrap :is(input,select,textarea):focus{outline:2px solid #7ecaff!important;outline-offset:1px}
.wrap .muted,.wrap small{color:var(--mz-muted)!important}
.wrap .flash{background:#fff9e8;border-color:#f4d490;color:#694b10}
.wrap .taskentry{border-left:4px solid #119fff!important}
.wrap .task-entry-muted{opacity:.78;border-left-color:#54b49b!important}
.wrap .task-pill{background:#dff2ff!important;color:#056baf!important;border-radius:999px;padding:4px 9px;display:inline-block}
.wrap .task-label{background:#e9f6ff!important;color:#126298!important;border-radius:999px;padding:3px 9px;display:inline-block;margin:2px}
.wrap .quick-capture{background:linear-gradient(135deg,#fff,#f7fbff)!important}
.wrap .quick-capture h2::before{content:'✦';color:var(--mz-blue);margin-right:8px}
.wrap .input-suggestions{position:relative;z-index:5;background:white;border:1px solid #bddef8;border-radius:9px;box-shadow:0 12px 24px #133e6220}
.wrap .input-suggestions button{display:block;width:100%;background:white!important;color:#123c61!important;text-align:left;justify-content:start;box-shadow:none!important}
.wrap .input-suggestions button:hover{background:#eaf7ff!important}
.mz-shell{display:grid;grid-template-columns:minmax(230px,265px) minmax(0,1fr);gap:20px;align-items:start}
.mz-sidebar{position:sticky;top:14px;min-width:0;background:#fff;border:1px solid var(--mz-edge);border-radius:17px;padding:19px;box-shadow:var(--mz-shadow);max-height:calc(100vh - 30px);overflow-y:auto}
.mz-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.mz-side-head h2{font-size:1.15rem;margin:0}.mz-side-search{width:100%;padding:12px 13px!important;border-radius:10px;margin-bottom:12px}
.mz-side-link{display:flex!important;align-items:center;gap:10px;padding:11px!important;background:#edf7ff!important;border:1px solid #cfe8fa!important;color:#075a95!important;border-radius:10px;text-decoration:none;font-weight:700;margin-bottom:12px}
.mz-customer{display:flex;align-items:center;gap:10px;padding:10px 8px;color:#15385b!important;border-bottom:1px solid #edf2f8;text-decoration:none!important;font-weight:550;font-size:.94rem}
.mz-customer:hover,.mz-customer.mz-selected{background:#e7f5ff;border-left:3px solid #0c9df7;border-radius:8px;padding-left:5px}
.mz-customer-icon{width:28px;height:28px;display:grid;place-items:center;background:#e9f5ff;border-radius:8px;color:#007aca;flex-shrink:0}
.mz-main{min-width:0}.mz-topline{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.mz-back{font-weight:700;font-size:.9rem}.mz-kicker{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#6391b6;font-weight:800}
.mz-hero{background:linear-gradient(145deg,#fff,#fafdff)!important;border-top:3px solid #1aaaff!important}
.mz-tabs{display:flex;flex-wrap:wrap;gap:6px;background:#fff;border:1px solid var(--mz-edge);border-radius:14px;padding:7px;margin:10px 0 16px;box-shadow:var(--mz-shadow)}
.mz-tab{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:115px;border:0;border-radius:9px;background:transparent!important;color:#245174!important;cursor:pointer;font-weight:700;font-size:.88rem;padding:12px 9px;min-height:43px;box-shadow:none!important}
.mz-tab:hover{background:#eaf5ff!important}.mz-tab.mz-current{background:#e3f4ff!important;color:#007ccc!important;box-shadow:inset 0 -3px #009cff!important}
.mz-tabpanel[hidden]{display:none!important}.mz-tabpanel>article:first-child{margin-top:0}
.mz-feature-card{border:1px solid var(--mz-edge);border-radius:16px;padding:20px;background:#fff;box-shadow:var(--mz-shadow);margin-bottom:16px}
.mz-feature-head{font-weight:800;color:#113b60;font-size:1.08rem;margin:0 0 9px}.mz-feature-text{color:#5c7690;margin:0 0 16px;line-height:1.6}
.mz-shortcut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:15px 0}
.mz-shortcut{background:#fff;border:1px solid var(--mz-edge);border-radius:15px;padding:16px;box-shadow:var(--mz-shadow);text-decoration:none!important;color:#153956!important;display:flex;gap:12px;align-items:flex-start}
.mz-shortcut:hover{border-color:#76c6fc;background:#f9fdff}.mz-shortcut-icon{font-size:1.45rem}.mz-shortcut strong{display:block;margin-bottom:5px}.mz-shortcut small{display:block;line-height:1.5;color:#688099}
.mz-progress-strip{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.mz-stage{font-size:.77rem;border:1px solid #cee7f9;border-radius:25px;padding:6px 9px;background:#f4faff;color:#315877;font-weight:650}
.mz-section-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:18px 0 12px}
.mz-section-heading h2{margin:0}.mz-section-heading a{font-weight:700}
.mz-dim{color:#658099;font-size:.88rem}.mz-empty{text-align:center;padding:28px 16px;color:#728aa0;border:1px dashed #bddded;border-radius:12px;background:#f7fbfe}
.mz-brand-title{display:flex;align-items:center;gap:8px}.mz-brand-mark{font-size:1.2rem;color:#0f9aff}
@media(max-width:1040px){.wrap{padding:20px 16px 35px!important}.mz-shell{grid-template-columns:220px minmax(0,1fr);gap:14px}.mz-sidebar{padding:13px}}
@media(max-width:760px){header{padding:11px 14px!important;flex-wrap:wrap}.brand-logo{width:39px!important;height:39px!important}.navtoggle{display:inline-flex!important}.wrap{padding:13px 11px 88px!important}.mz-shell{display:block}.mz-sidebar{position:static;max-height:none;margin-bottom:14px;padding:13px}.mz-sidebar.mz-compact .mz-customer-list{display:none}.mz-sidebar .mz-side-head h2{font-size:1.02rem}.mz-mobile-toggle{display:inline-flex;border:0;cursor:pointer;background:#e6f5ff;border-radius:8px;padding:8px;color:#075f98}.mz-tabs{overflow-x:auto;flex-wrap:nowrap;justify-content:start}.mz-tab{white-space:nowrap;min-width:136px;flex:none}.wrap article,.wrap .panel{padding:14px!important}.mz-shortcut-grid{grid-template-columns:1fr 1fr;gap:8px}.mz-shortcut{padding:12px;gap:7px}.mz-shortcut small{font-size:.75rem}.mz-stage{font-size:.7rem}.mz-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;background:#fff;border-top:1px solid #d2e6f6;box-shadow:0 -5px 20px #092f541a;justify-content:space-around;padding:8px 4px max(10px,env(safe-area-inset-bottom))}.mz-bottom-nav a{flex:1;text-align:center;color:#255477;text-decoration:none;font-size:.72rem;font-weight:750;display:grid;gap:3px}.mz-bottom-nav a span{font-size:1.3rem}.mz-bottom-nav a.mz-active{color:#008de9}}
@media(min-width:761px){.mz-mobile-toggle,.mz-bottom-nav{display:none!important}}

.wrap button.mz-tab{background:transparent!important;color:#245174!important;box-shadow:none!important}.wrap button.mz-tab:hover{background:#eaf5ff!important}.wrap button.mz-tab.mz-current{background:#e3f4ff!important;color:#007ccc!important;box-shadow:inset 0 -3px #009cff!important}

/* iOS Safari: prevent date inputs from increasing the intrinsic grid width */
.wrap, .wrap article, .wrap form, .wrap .grid, .wrap .grid > div {min-width:0;max-width:100%;}
.wrap input, .wrap select, .wrap textarea {box-sizing:border-box;min-width:0;max-width:100%;}
.wrap input[type="date"], .wrap input[type="datetime-local"], .wrap input[type="time"] {display:block;width:100%;min-width:0;max-width:100%;-webkit-min-logical-width:0;}
@media(max-width:760px){.wrap .grid{grid-template-columns:minmax(0,1fr)!important;} .wrap input[type="date"], .wrap input[type="datetime-local"]{width:100%;}}

/* v16.4: telephone capture first, sidebar after quick capture */
.mz-task-shell{display:block!important;min-width:0}
.mz-task-shell .mz-main{min-width:0;width:100%}
.mz-task-shell .mz-sidebar{position:static;max-height:none;margin:0 0 18px;width:100%;padding:15px}
.mz-task-shell .mz-vikunja-after-quick{display:flex;justify-content:flex-end;margin:-3px 0 14px}
.mz-task-shell .mz-sidebar.mz-compact .mz-customer-list{display:none}
/* iOS Safari: intrinsic date-edit controls must shrink within form grid */
html,body,.wrap,.mz-shell,.mz-main,.wrap article,.wrap form,.wrap .grid,.wrap .grid>div{min-inline-size:0;box-sizing:border-box}
.wrap .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wrap input[type=date],.wrap input[type=datetime-local],.wrap input[type=time]{display:block;inline-size:100%;min-inline-size:0;max-inline-size:100%;box-sizing:border-box;font-size:16px;overflow:hidden}
.wrap input[type=date]::-webkit-date-and-time-value,.wrap input[type=datetime-local]::-webkit-date-and-time-value{min-inline-size:0;max-inline-size:100%;text-align:left}
.wrap input[type=date]::-webkit-datetime-edit,.wrap input[type=datetime-local]::-webkit-datetime-edit{min-inline-size:0;max-inline-size:100%;padding:0}
@media(max-width:760px){.wrap .grid{grid-template-columns:minmax(0,1fr)!important}.mz-task-shell .mz-vikunja-after-quick{justify-content:stretch}.mz-task-shell .mz-vikunja-after-quick .btn{width:100%}.wrap input[type=date],.wrap input[type=datetime-local]{inline-size:100%!important;min-inline-size:0!important;max-inline-size:100%!important}}

/* v16.7: full-width native Safari calendar input, matching all other fields. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 760px) {
    .wrap input[type="date"],
    .wrap input[type="datetime-local"] {
      -webkit-appearance: auto;
      appearance: auto;
      display: block;
      box-sizing: border-box !important;
      inline-size: 100% !important;
      width: 100% !important;
      min-inline-size: 0 !important;
      min-width: 0 !important;
      max-inline-size: 100% !important;
      max-width: 100% !important;
      font-size: 16px !important;
      overflow: hidden;
    }
    .wrap input[type="date"]::-webkit-datetime-edit,
    .wrap input[type="datetime-local"]::-webkit-datetime-edit {
      min-width: 0 !important;
      max-width: 100% !important;
      padding: 0;
    }
    .wrap input[type="date"]::-webkit-calendar-picker-indicator,
    .wrap input[type="datetime-local"]::-webkit-calendar-picker-indicator {
      flex: 0 0 auto;
      margin: 0;
    }
  }
}

/* v16.8: native iOS calendar in a full-width visual field. The date input
   stays in the form and receives taps; only its Safari painting is hidden. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 760px) {
    .wrap .mz-native-date-shell {
      position: relative!important;
      display: flex!important;
      align-items: center!important;
      justify-content: space-between!important;
      width: 100%!important;
      min-width: 0!important;
      max-width: 100%!important;
      height: 46px;
      min-height: 44px;
      padding: 0 12px;
      border: 1px solid #c9d4de;
      border-radius: 9px;
      background: #fff;
      color: #263039;
      font-size: 16px;
      box-sizing: border-box!important;
      overflow: hidden;
    }
    .wrap .mz-native-date-label { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none; }
    .wrap .mz-native-date-shell:not(.mz-has-date) .mz-native-date-label { color:#677683; }
    .wrap .mz-native-date-icon {flex:none;margin-left:12px;color:#17659a;font-size:23px;line-height:1;pointer-events:none}
    .wrap .mz-native-date-shell > input[type="date"].mz-native-date-control {
      position: absolute!important;
      inset: 0!important;
      width: 100%!important;
      height: 100%!important;
      min-width: 0!important;
      max-width: 100%!important;
      min-height: 0!important;
      margin: 0!important;
      padding: 0!important;
      border: 0!important;
      border-radius: 0!important;
      opacity: 0.001!important;
      appearance: auto!important;
      -webkit-appearance: auto!important;
      cursor: pointer;
      z-index: 1;
    }
    .wrap .mz-native-date-shell:focus-within {outline:2px solid #17659a;outline-offset:1px}
  }
}