:root{
    --hunt: #6fa84a;
    --hunt-border: #4f7d33;
    --closed: #ffffff;
    --grid: #e2e0d6;
    --ink: #2b2b26;
    --muted: #6b6b62;
    --paper: #f3f1ea;
    --card: #ffffff;
    --accent: #8a5a2b;
    --amber: #b5730a;
    --amber-bg: #fbf1de;
    --green-bg: #eef6e7;
    --grey-bg: #f1f0eb;
    --radius: 14px;
    --shadow: 0 1px 3px rgba(30,30,20,0.08), 0 1px 2px rgba(30,30,20,0.06);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }
  *{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
  html{ -webkit-text-size-adjust:100%; }
  body{
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    padding-bottom: calc(28px + var(--safe-bottom));
    -webkit-font-smoothing: antialiased;
  }
  button{ font-family: inherit; }
  .app{ max-width: 560px; margin: 0 auto; background: var(--paper); min-height: 100vh; }

    .top-sticky{
    position: sticky; top: 0; z-index: 30;
    background: var(--paper);
    border-bottom: 1px solid var(--grid);
    box-shadow: var(--shadow);
  }

    .appbar{
    position:relative;
    background: var(--card);
    padding-top: var(--safe-top);
  }
  .appbar-row{
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    padding: 10px 12px;
  }
  .appbar-title{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:9px; }
  .appbar-wappen{ flex:none; }
  .appbar-title-text{ min-width:0; }
    .appbar-icons{
    display:flex; align-items:center; gap:6px;
    flex:0 0 auto; margin-left:auto;
  }
  .appbar-icons.search-open{
    flex:1 1 100%; justify-content:flex-end;
    margin-left:0; margin-top:4px;
  }
  .appbar-title h1{
    margin:0; font-size: 17px; font-weight:700; letter-spacing:0.1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .appbar-sub{
    margin: 1px 0 0; font-size: 11.5px; color: var(--muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .icon-btn{
    position:relative;
    width:40px; height:40px; flex:none;
    display:flex; align-items:center; justify-content:center;
    border:none; background: transparent; color: var(--ink);
    border-radius: 50%; cursor:pointer;
  }
  .icon-btn:active{ background: var(--paper); }
  .icon-btn svg{ width:21px; height:21px; }
  .icon-dot{
    position:absolute; top:7px; right:7px;
    width:8px; height:8px; border-radius:50%;
    background: var(--hunt-border);
    border: 1.5px solid var(--card);
  }
    .search-row{
    display:flex; align-items:center; gap:4px;
    flex:1 1 auto; min-width:0;
  }
  .search-row[hidden]{ display:none; }
  .search-row input{
    flex:1; min-width:0;
    padding: 7px 10px;
    border: 1px solid #d8d6ca;
    border-radius: 10px;
    font-size: 14px;
    background: var(--paper);
    color: var(--ink);
  }
  .search-row input:focus{ outline:2px solid var(--hunt-border); outline-offset:1px; }
  .search-row .text-btn{ flex:none; padding:4px 5px; font-size:16px; line-height:1; }
  .text-btn{
    border:none; background:none; color: var(--hunt-border);
    font-size: 13.5px; font-weight:600; padding:6px 4px; cursor:pointer; flex:none;
  }

    .date-chip-bar{
    display:flex; flex-direction:column; gap:8px;
    padding: 8px 12px;
    background: var(--paper);
  }
  .date-chip-row{ display:flex; align-items:center; gap:8px; }
  .date-slider-row{ padding: 2px 3px 0; }
  .date-slider-row .date-range{ width:100%; margin:0; accent-color: var(--hunt-border); }
  .filter-mode-row{
    display:flex; flex-direction:column; align-items:stretch; gap:8px;
  }
  .date-chip{
    display:flex; align-items:center; gap:7px;
    border: 1px solid var(--hunt-border);
    background: var(--green-bg);
    color: var(--hunt-border);
    font-size: 13.5px; font-weight:700;
    padding: 8px 13px;
    border-radius: 999px;
    cursor:pointer;
    flex: 0 1 auto; min-width: 0;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
  }
  .date-chip svg{ width:15px; height:15px; flex:none; }
  .date-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .date-chip.inactive{
    border-color:#d8d6ca; background: var(--card); color: var(--muted);
  }
    .date-chip.today-chip{
    border-color:#d8d6ca; background: var(--card); color: var(--ink);
    flex: none;
  }
  .date-chip.today-chip:active{ background: var(--paper); }
  .date-chip.today-chip.active{
    border-color: var(--hunt-border); background: var(--green-bg); color: var(--hunt-border);
  }

    .date-chip.dept-filter-chip{
    border-color:#d8d6ca; background: var(--card); color: var(--muted);
    flex: none;
  }
    .date-chip.dept-filter-chip{
    margin-left: auto;
  }
  .date-chip.dept-filter-chip.active{
    border-color: var(--hunt-border); background: var(--green-bg); color: var(--hunt-border);
  }
  .dept.dept-empty, .dept.dept-force-hidden{
    max-height: 0; opacity: 0; margin: 0; pointer-events: none;
  }
  .mode-toggle.compact{
    width: 100%;
  }
  .mode-toggle.compact .mode-btn{
    font-size: 12.5px; padding: 9px 8px;
    line-height: 1.25; white-space: normal;
  }

    .list{ padding: 4px 12px 8px; }
  details.dept{
    margin: 10px 0 14px;
    max-height: 6000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height .5s ease, opacity .4s ease, margin .5s ease;
  }
  details.dept > summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; flex-wrap: wrap; gap:8px;
    padding: 6px 2px 8px;
    border-bottom: 2px solid var(--ink);
    font-size: 15.5px; font-weight:700;
  }
  details.dept > summary::-webkit-details-marker{ display:none; }
  .dept-title{ flex:1; min-width:0; }
  .dept-count{
    font-size: 12px; font-weight:600; color: var(--muted);
    background: var(--card); border:1px solid var(--grid);
    padding: 2px 8px; border-radius: 999px;
  }
  details.dept .chevron{ width:16px; height:16px; transition: transform .2s ease; flex:none; color: var(--muted); }
  details.dept[open] > summary .chevron{ transform: rotate(180deg); }
  .dept-info-btn{
    width:20px; height:20px; flex:none;
    display:flex; align-items:center; justify-content:center;
    border:none; border-radius:50%; background: var(--paper); color: var(--muted);
    cursor:pointer; padding:0;
  }
  .dept-info-btn svg{ width:14px; height:14px; }
  .dept-info-btn:active{ background: var(--grid); }
  .dept-info-btn.hidden{ display:none; }
  .dept-sort-btn{
    flex:none;
    border:1px solid #d8d6ca; border-radius:999px; background: var(--paper); color: var(--muted);
    cursor:pointer; padding:4px 10px; font-size:11px; font-weight:600;
  }
  .dept-sort-btn:active{ background: var(--grid); }
  .dept-sort-btn.active{ border-color: var(--hunt-border); background: var(--green-bg); color: var(--hunt-border); }
    .dept-list{ display:flex; flex-direction:column; margin-top:8px; }

    details.card{
    background: var(--card);
    border: 1px solid var(--grid);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
    margin-bottom: 9px;
    max-height: 2000px;
    opacity: 1;
    transition: max-height .5s ease, opacity .4s ease, margin .5s ease, border-color .4s ease, border-width .4s ease, box-shadow .4s ease;
  }
  details.card:last-child{ margin-bottom: 0; }
  details.card.is-hidden{
    max-height: 0;
    opacity: 0;
    margin: 0;
    border-width: 0;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
  }
  details.card > summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; gap:10px;
    padding: 10px 12px;
  }
  details.card > summary::-webkit-details-marker{ display:none; }
  details.card > summary img{
    width:30px; height:30px; object-fit:contain; flex:none;
    filter: brightness(0) saturate(100%); opacity:0.78;
  }
  .card-title{ flex:1; min-width:0; }
  .card-name-row{ display:flex; align-items:center; gap:7px; }
  .card-name{ display:block; font-size: 14.5px; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .card-hint{ display:block; font-size: 10.5px; color: var(--muted); margin-top:1px; line-height:1.3; }

  .mini-switch{
    position:relative; display:inline-block; flex:none;
    width:30px; height:17px;
  }
  .mini-switch[hidden]{ display:none; }
  .mini-switch input{
    position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
  }
  .mini-switch .slider{
    position:absolute; inset:0;
    background: #d8d6ca; border-radius: 999px;
    transition: background-color .2s ease;
    pointer-events:none;
  }
  .mini-switch .slider::before{
    content:''; position:absolute; left:2px; top:2px;
    width:13px; height:13px; border-radius:50%;
    background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform .2s ease;
  }
  .mini-switch input:checked + .slider{ background: var(--hunt-border); }
  .mini-switch input:checked + .slider::before{ transform: translateX(13px); }
  .status-pill{
    flex:none;
    font-size: 11px; font-weight:700;
    padding: 4px 9px; border-radius:999px;
    white-space:nowrap;
    transition: background-color .3s ease, color .3s ease;
  }
  .status-pill[data-state="open"]{ background: var(--green-bg); color: var(--hunt-border); }
  .status-pill[data-state="closed"]{ background: var(--grey-bg); color: var(--muted); }
  .status-pill[data-state="mixed"]{ background: var(--amber-bg); color: var(--amber); }
  details.card .chevron{ width:16px; height:16px; transition: transform .2s ease; flex:none; color: var(--muted); }
  details.card[open] > summary .chevron{ transform: rotate(180deg); }

  .card-body{ padding: 2px 12px 12px; border-top: 1px solid var(--grid); }
  .card-note{
    font-size: 11px; color: var(--muted); line-height:1.4;
    padding: 8px 0 2px;
  }
  .months-row{
    display:grid; grid-template-columns: repeat(12, 1fr);
    font-size: 8.6px; color: var(--muted);
    border-bottom: 1px solid var(--grid);
    padding: 8px 0 3px;
    margin-bottom: 4px;
  }
  .months-row .m{ text-align:center; border-left: 1px solid var(--grid); }
  .months-row .m:first-child{ border-left:none; }

  .row{
    padding: 6px 0;
    border-bottom: 1px dashed var(--grid);
    max-height: 200px;
    opacity: 1;
    overflow: hidden;
    transition: max-height .5s ease, opacity .4s ease, padding .4s ease, border-color .4s ease, border-bottom-width .4s ease;
  }
  .row:last-child{ border-bottom:none; }
  .row-label{
    font-size: 12.5px; font-weight:600; margin-bottom:4px;
    display:flex; align-items:center; gap:6px;
    transition: color .25s ease;
  }
  .row-label .tag{ font-size:9.5px; font-weight:400; color: var(--muted); }
  .track{
    position:relative; height: 16px;
    background: repeating-linear-gradient(
      to right, transparent, transparent calc(100%/12 - 1px),
      var(--grid) calc(100%/12 - 1px), var(--grid) calc(100%/12)
    );
    border: 1px solid var(--grid); border-radius: 4px;
  }
  .bar{
    position:absolute; top:1.5px; bottom:1.5px;
    background: var(--hunt); border:1px solid var(--hunt-border);
    border-radius: 3px;
    transition: background-color .25s ease, border-color .25s ease;
  }
  .today-line{
    position:absolute; top:-3px; bottom:-3px; width:0;
    border-left: 2px dashed #c0392b; z-index:5;
  }
  .cursor-line{
    position:absolute; top:-3px; bottom:-3px; width:0;
    border-left: 2px solid #888883; z-index:6; display:none; pointer-events:none;
    transition: left .15s linear;
  }
  .row.date-greyed .bar{ background:#cdcbc0; border-color:#adaba0; }
  .row.date-greyed .row-label, .row.date-greyed .row-dates{ color:#adaba0; }
  .row.date-hidden{
    max-height: 0;
    opacity: 0;
    padding-top: 0; padding-bottom: 0;
    border-bottom-width: 0;
    border-bottom-color: transparent;
    pointer-events: none;
  }
  .row-dates{
    font-size: 11px; color: var(--ink); margin-top:4px;
    max-height: 40px; opacity: 1; overflow:hidden;
    transition: color .25s ease, max-height .3s ease, opacity .25s ease, margin-top .3s ease;
  }
  body.compact-dates .row-dates{ max-height:0; opacity:0; margin-top:0; }

    .native-tooltip{
    position: fixed; z-index: 60;
    background: #fffef2; color:#1a1a1a;
    border: 1px solid rgba(0,0,0,0.25);
    border-radius: 4px;
    font-size: 12.5px; font-weight: 400; white-space:normal;
    line-height: 1.35;
    padding: 4px 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    max-width: 240px;
    opacity:0; pointer-events:none;
    transform: translateY(3px);
    transition: opacity .12s ease, transform .12s ease;
  }
  .native-tooltip.show{ opacity:1; transform: translateY(0); }
  body.compact-dates .track{ cursor:pointer; }

    .legend-card{
    display:flex; gap:16px; flex-wrap:wrap;
    background: var(--card); border:1px solid var(--grid);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 9px 14px; margin: 0 12px 10px; font-size: 12px; color: var(--muted);
  }
  .legend-card span{ display:flex; align-items:center; gap:6px; }
  .legend-card .sw{ width:14px; height:11px; border-radius:2px; border:1px solid rgba(0,0,0,0.15); }
  .legend-card .sw.hunt{ background: var(--hunt); }
  .legend-card .sw.closed{ background: var(--closed); }
  .legend-card .sw.today{ width:0; height:12px; border-radius:0; border-left:2px dashed #c0392b; }

  .info-details summary{
    cursor:pointer; list-style:none;
    font-size: 13px; font-weight:700; color: var(--ink);
  }
  .info-details summary::-webkit-details-marker{ display:none; }
  .info-details p{ font-size: 11.5px; color: var(--muted); line-height:1.55; margin: 8px 0 0; }

  .empty-state{
    text-align:center; color: var(--muted); font-size: 13.5px;
    padding: 40px 20px;
  }
  .empty-state.hidden{ display:none; }

    .sheet-backdrop{
    position:fixed; inset:0; background: rgba(20,20,15,0.4);
    z-index: 40; opacity:0; transition: opacity .25s ease;
  }
  .sheet-backdrop.show{ opacity:1; }
  .sheet-backdrop[hidden]{ display:none; }
  .sheet{
    position:fixed; left:50%; top:50%; z-index: 41;
    width: min(calc(100% - 32px), 560px);
    max-width: 560px;
    background: var(--card);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    padding: 18px;
    transform: translate(-50%, 100%);
    transition: transform .28s ease;
    max-height: 88vh; overflow-y:auto;
  }
  .sheet.show{ transform: translate(-50%, -50%); }
  .sheet[hidden]{ display:none; }
  .sheet-handle{
    width:36px; height:4px; border-radius:2px; background:#d8d6ca;
    margin: 6px auto 12px;
  }
  .sheet h2{ margin: 2px 0 14px; font-size: 16px; }
  .sheet-section{ margin-bottom: 18px; }
  .info-section{ margin-top: 14px; margin-bottom: 0; }
  .sheet-divider{ border:none; border-top:1px solid var(--grid); margin: 0 0 18px; }
  .sheet-label{ display:block; font-size: 12.5px; font-weight:700; color: var(--muted); margin-bottom:8px; }
  .date-inputs{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .date-part{
    flex:1; padding: 9px 8px; border:1px solid #d8d6ca; border-radius:8px;
    font-size: 14px; font-family:inherit; color: var(--ink); background: var(--paper);
  }
  .date-range{ width:100%; margin:2px 0 0; accent-color: var(--hunt-border); }
  .mode-toggle{ display:flex; border:1px solid #d8d6ca; border-radius:9px; overflow:hidden; }
  .mode-btn{
    flex:1; font-size:13px; padding:9px 6px; border:none; background:#fff; color:var(--ink); cursor:pointer;
  }
  .mode-btn + .mode-btn{ border-left:1px solid #d8d6ca; }
  .mode-btn.active{ background: var(--hunt-border); color:#fff; }
  .switch-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    font-size: 13.5px;
  }
  .switch-row input{ width:20px; height:20px; accent-color: var(--hunt-border); flex:none; }
  .reset-btn.full{
    width:100%; padding:11px; border:1px solid #d8d6ca; border-radius:9px;
    background:#fff; color:var(--ink); font-size:13.5px; cursor:pointer;
  }
  .sheet-close-btn{
    width:100%; padding:12px; border-radius:9px; border:none;
    background: var(--hunt-border); color:#fff; font-size:14.5px; font-weight:700; cursor:pointer;
    margin-top: 4px;
  }

  @media (min-width: 560px){
    .app{ margin-top: 18px; margin-bottom: 18px; border-radius: 20px; overflow:hidden; box-shadow: 0 6px 30px rgba(0,0,0,0.12); min-height:0; }
  }