.po-app{
    --bg:#202020;
    --surface:#272727;
    --surface-raised:#313131;
    --border:#3d3d3d;
    --text-hi:#f1f0ee;
    --text-lo:#8f8f8f;
    --brand-orange:#f08708;
    --brand-orange-dim:#6b4c1f;
    --brand-orange-hover:#ff9c2e;
    --brand-grey:#858686;
    --signal-green:#4caf7a;
    --signal-green-dim:#294a3a;
    --signal-amber:#d8b400;
    --signal-red:#d85c4d;
    --signal-red-dim:#5c322c;
    --radius:6px;
    font-size:16px;
  }
  .po-app, .po-app *{box-sizing:border-box;}
  @media (prefers-reduced-motion: reduce){ .po-app *{animation:none !important; transition:none !important;} }
  .po-app{ background:var(--bg); color:var(--text-hi); font-family:"IBM Plex Sans", system-ui, sans-serif; }
  #planning-opseg-app{ max-width:1400px; margin:0 auto; padding:28px 20px 60px; }

  .po-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; border-bottom:1px solid var(--border); padding-bottom:18px; margin-bottom:18px; flex-wrap:wrap; }
  .po-header__eyebrow{ font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-orange); margin:0 0 6px; }
  .po-header__title{ font-family:"IBM Plex Sans Condensed", sans-serif; font-weight:700; font-size:26px; letter-spacing:.01em; margin:0; }
  .po-header__sub{ color:var(--text-lo); font-size:14px; margin:6px 0 0; }
  .po-header__mark{ font-family:"IBM Plex Sans Condensed", sans-serif; font-weight:700; font-size:15px; letter-spacing:.06em; color:var(--text-lo); border:1px solid var(--border); border-radius:var(--radius); padding:6px 12px; }
  .po-header__mark b{ color:var(--brand-orange); }
  .po-header__logo{ height:42px; width:auto; flex:none; display:block; }

  .po-legend{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; margin-bottom:18px; padding:12px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); font-size:12.5px; color:var(--text-lo); }
  .po-legend__item{ display:flex; align-items:center; gap:7px; }
  .po-legend__swatch{ width:14px; height:14px; border-radius:3px; flex:none; display:inline-block; }

  .po-board-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px; flex-wrap:wrap; }
  .po-board-toolbar__label{ font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-lo); }

  .po-btn{ border-radius:var(--radius); border:1px solid var(--border); background:var(--surface-raised); color:var(--text-hi); font-size:12.5px; font-weight:500; padding:8px 14px; cursor:pointer; font-family:"IBM Plex Sans", sans-serif; transition:background .15s, border-color .15s; }
  .po-btn:hover{ border-color:var(--brand-orange-dim); }
  .po-btn-primary{ background:var(--brand-orange); border-color:var(--brand-orange); color:#201400; font-weight:600; }
  .po-btn-primary:hover{ background:var(--brand-orange-hover); }

  .po-board{ border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow-x:auto; overflow-y:visible; }

  table{ border-collapse:separate; border-spacing:0; font-family:"IBM Plex Mono", monospace; }
  thead th{ position:sticky; top:0; background:var(--surface-raised); color:var(--text-lo); border-bottom:1px solid var(--border); border-right:1px solid var(--border); font-weight:500; z-index:3; }
  thead tr.po-month-row th{ top:0; font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:5px 2px; }
  thead tr.po-date-row th{ top:24px; font-size:9.5px; font-weight:400; padding:2px 0; color:var(--text-hi); }
  thead tr.po-week-row th{ top:41px; font-size:8px; font-weight:500; padding:2px 0; color:var(--brand-orange); font-family:"IBM Plex Mono", monospace; letter-spacing:.02em; border-bottom:1px solid var(--border); }
  thead tr.po-dow-row th{ top:57px; font-size:8.5px; font-weight:600; padding:2px 0; color:var(--text-lo); border-bottom:2px solid var(--border); }

  th.po-corner{ position:sticky; left:0; top:0; z-index:5; background:var(--surface-raised); text-align:left; padding:8px 12px; font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-lo); border-right:1px solid var(--border); border-bottom:1px solid var(--border); min-width:150px; vertical-align:bottom; }

  td.po-promo{ position:sticky; left:0; z-index:2; background:var(--surface-raised); font-weight:600; font-size:12.5px; padding:0 12px; height:38px; white-space:nowrap; border-right:1px solid var(--border); border-bottom:1px solid var(--border); font-family:"IBM Plex Sans", sans-serif; }
  td.po-d{ width:19px; min-width:19px; max-width:19px; height:38px; padding:0; text-align:center; font-size:8px; border-right:1px solid rgba(255,255,255,.04); border-bottom:1px solid var(--border); color:var(--text-hi); white-space:nowrap; overflow:hidden; }
  .po-halfstack{ display:flex; flex-direction:column; width:100%; height:100%; }
  .po-halfstack .po-half{ flex:1 1 50%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .po-halfstack .po-half-am{ border-bottom:1px solid rgba(0,0,0,.35); }

  td.po-d[data-module].po-module-off .po-half{ opacity:.12; filter:grayscale(1); }
  tbody tr:nth-child(odd) td.po-promo{ background:var(--surface-raised); }
  tbody tr:nth-child(even) td.po-promo{ background:#2b2b2b; }

  .po-half.po-tp-ab{ background:var(--signal-green); color:#0d1f16; font-weight:700; }
  .po-half.po-tp-ab-dim{ background:var(--signal-green-dim); color:#a9d9c1; }
  .po-half.po-tp-cg{ background:var(--brand-orange); color:#201400; font-weight:700; }
  .po-half.po-tp-cg-dim{ background:var(--brand-orange-dim); color:#f0c98a; }
  .po-half.po-neutral{ background:var(--surface); color:var(--text-lo); }
  .po-half.po-ferie{ background:var(--signal-red-dim) !important; color:#f0b6ab !important; }
  .po-half.po-null-cell{ background:var(--surface); }

  .po-week-sep{ border-left:2px solid var(--border) !important; }
  .po-month-sep{ border-left:2px solid var(--brand-orange-dim) !important; }

  .po-board::-webkit-scrollbar{ height:11px; width:11px; }
  .po-board::-webkit-scrollbar-track{ background:var(--surface); }
  .po-board::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }
  .po-board::-webkit-scrollbar-thumb:hover{ background:var(--brand-orange-dim); }

  .po-footnote{ margin-top:12px; font-size:11.5px; color:var(--text-lo); }

  .po-filters{ display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start; margin-bottom:18px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
  .po-filters__group{ display:flex; flex-direction:column; gap:8px; }
  .po-filters__label{ font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-lo); }
  .po-filters__actions{ display:flex; gap:8px; }
  .po-filters__actions button, .po-filters__weeks button{ border-radius:var(--radius); border:1px solid var(--border); background:var(--surface-raised); color:var(--text-hi); font-size:11.5px; font-weight:500; padding:4px 10px; cursor:pointer; font-family:"IBM Plex Sans", sans-serif; }
  .po-filters__actions button:hover, .po-filters__weeks button:hover{ border-color:var(--brand-orange-dim); color:var(--brand-orange); }
  .po-filters__checks{ display:flex; flex-wrap:wrap; gap:6px 12px; max-width:640px; }
  .po-filters__checks label{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-hi); cursor:pointer; white-space:nowrap; }
  .po-filters__checks input[type=checkbox]{ accent-color:var(--brand-orange); cursor:pointer; }
  .po-filters__weeks{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-lo); }
  .po-filters__weeks select{ background:var(--surface-raised); color:var(--text-hi); border:1px solid var(--border); border-radius:var(--radius); font-family:"IBM Plex Mono", monospace; font-size:12px; padding:4px 6px; }

  .po-dropdown{ position:relative; }
  .po-dropdown__trigger{ display:flex; align-items:center; gap:8px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface-raised); color:var(--text-hi); font-size:12.5px; font-weight:500; padding:7px 12px; cursor:pointer; font-family:"IBM Plex Sans", sans-serif; min-width:190px; justify-content:space-between; }
  .po-dropdown__trigger:hover{ border-color:var(--brand-orange-dim); }
  .po-dropdown__trigger .po-chev{ color:var(--text-lo); font-size:10px; transition:transform .15s; }
  .po-dropdown.po-open .po-dropdown__trigger .po-chev{ transform:rotate(180deg); }
  .po-dropdown__panel{ position:absolute; top:calc(100% + 6px); left:0; z-index:10; background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius); padding:10px; width:300px; max-height:280px; overflow:auto; box-shadow:0 10px 30px rgba(0,0,0,.45); }
  .po-dropdown__panel[hidden]{ display:none; }
  .po-dropdown__panel .po-filters__checks{ flex-direction:column; flex-wrap:nowrap; max-width:none; gap:5px; margin-top:8px; }
  .po-dropdown__panel .po-filters__checks label{ padding:3px 4px; border-radius:4px; }
  .po-dropdown__panel .po-filters__checks label:hover{ background:var(--surface); }