/* dotSell – układ VECTOR. Port 1:1 z docs/design/src/panel.css (od `#ds-vector{`)
   i docs/design/src/formularze.css (od `#ds-forms{`).

   Zmiany względem makiet – wyłącznie:
   - zakres: `#ds-vector` → `.v-app` (body panelu właściciela), `#ds-forms` → `.f-app`
     (body panelu klienta / widoku publicznego / logowania; w panelu właściciela wrapper
     treści formularzowej). Blok .f-app stoi po .v-app, więc w zagnieżdżeniu wygrywa.
   - fonty: jak w makiecie – 'DM Sans' → var(--font-family), 'Space Grotesk' → var(--font-display),
     wagi bez zmian (450/550/650 obsługuje font zmienny DM Sans).
   - kolory: 1:1 z makiet (decyzja właściciela przy odbiorze) – wartości tokenów --v-*/--f-* w tokens.css,
     sztywne heksy makiet bez zmian. Tabela mapowania kolorów z PROMPT-B1b nie obowiązuje.
   - ramka makiety (body padding 1rem, obrys 1px, promień 8px, overflow:hidden) zachowana:
     body ma 16px odstępu, a .v-app / .f-app to div-ramka w body (jak #ds-vector w makiecie).
   Reguły dodane poza makietą są oznaczone „[+]". Kolejność reguł jak w makietach. */

/* =====================================================================
   VECTOR · panel właściciela (panel.css #ds-vector → .v-app)
   ===================================================================== */

html,body{margin:0}body{box-sizing:border-box;padding:1rem;background:#fff;font-family:var(--font-family);-webkit-font-smoothing:antialiased} /* jak strona makiety: body{padding:1rem} */
.v-app{font:14px/1.5 var(--font-family);color:var(--v-ink);color-scheme:light;background:#fff;border:1px solid #dce6ed;border-radius:8px;width:100%;position:relative;isolation:isolate;overflow:hidden;text-align:left}
.v-app *{box-sizing:border-box}
.v-app button,.v-app input,.v-app select,.v-app textarea{font:inherit;color:inherit}
.v-app button{cursor:pointer;touch-action:manipulation}
.v-app button:disabled{cursor:default;opacity:.5}
.v-app button:focus-visible,.v-app input:focus-visible,.v-app select:focus-visible,.v-app textarea:focus-visible,.v-app a:focus-visible{outline:3px solid #55b7ff;outline-offset:4px}
.v-app button{border:0}
.v-app svg{width:17px;height:17px;flex-shrink:0;stroke-width:1.7}
.v-app h1,.v-app h2,.v-app h3,.v-app p{margin:0}
.v-app [hidden]{display:none!important}
.v-app a{color:inherit;text-decoration:none} /* [+] makieta nie ma linków – u nas zadania, zakładki i usługi są <a> */
.v-app .v-link{color:var(--v-blue);text-decoration:underline} /* [+] link w treści */
.v-app .v-font{font-family:var(--font-display)}
.v-app .v-micro{font-size:11px;line-height:1.5;letter-spacing:1.6px;text-transform:uppercase;font-weight:600}
.v-app .v-top{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 32px;border-bottom:1px solid var(--v-line);background:#fff}
.v-app .v-brand{font-size:28px;font-weight:700;letter-spacing:-1.9px;display:flex;align-items:center;gap:6px;line-height:1}
.v-app .v-brand b{display:block;width:9px;height:9px;border-radius:2px;background:var(--v-mint);margin-top:13px}
.v-app .v-top-name{font-size:12px;color:var(--v-muted);border-left:1px solid var(--v-line);padding-left:20px;margin-left:3px;flex:1}
.v-app .v-nav{display:flex;align-items:center;gap:18px;font-size:12px;color:var(--v-muted)} /* [+] nawigacja główna (Dashboard · Klienci · Uwagi) – makieta jej nie ma */
.v-app .v-nav a.is-active{color:var(--v-ink);font-weight:600}
.v-app .v-nav .v-nav-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:5px;border-radius:3px;background:var(--v-mint);color:#023b25;font-size:10px;font-weight:600} /* [+] licznik nowych uwag (B9) */
.v-app .v-top-actions{display:flex;align-items:center;gap:18px}
.v-app .v-preview{background:#f1f6fa;border:1px solid #e1e9f0;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:5px;font-size:12px;font-weight:550}
.v-app .v-preview[aria-pressed=true]{background:var(--v-ink);color:#fff;border-color:var(--v-ink)}
.v-app .v-avatar{display:grid;place-items:center;width:35px;height:35px;border:1px solid #becfdd;border-radius:50%;font-size:12px;font-weight:600;background:#fff}
.v-app .v-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:32px 32px 34px;position:relative;background:#f7fafd;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#004c86,#5bb8ff 35%,#cbdaf4 63%,#13ec7e) 1}
.v-app .v-hero:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--v-glow);background:radial-gradient(ellipse at 55% 180%,#b4d8f3 0,transparent 55%),radial-gradient(ellipse at 105% -80%,#b5f9d9 0,transparent 62%)}
.v-app .v-hero>*{position:relative}
.v-app .v-eyebrow{display:flex;gap:10px;align-items:center;color:#557087;margin-bottom:10px}
.v-app .v-eyebrow span:first-child{color:var(--v-blue)}
.v-app h1{font:500 clamp(42px,7.6vw,79px)/.98 var(--font-display);letter-spacing:-5px}
.v-app h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.4px var(--v-ink);letter-spacing:-4.5px}
.v-app h1 .v-title-dot{color:#0bc36d}
.v-app .v-site{display:flex;gap:8px;align-items:center;color:#527086;margin-top:15px;font-size:12px}
.v-app .v-period{align-self:center;min-width:214px;padding:0 0 0 27px;border-left:1px solid #cbdde9}
.v-app .v-period .v-micro{color:#557087;letter-spacing:1px}
.v-app .v-period-dates{display:flex;align-items:baseline;gap:12px;margin:7px 0 5px;font:500 30px/1.2 var(--font-display);letter-spacing:-1.5px}
.v-app .v-period-dates span:nth-child(2){font-size:18px;color:#8a9ead;letter-spacing:0}
.v-app .v-period small{color:#627b8f;font-size:11px;display:block}
.v-app .v-period-line{display:grid;grid-template-columns:repeat(30,1fr);gap:3px;margin-top:15px;height:13px}
.v-app .v-period-line i{background:#d0e0eb;border-radius:1px}
.v-app .v-period-line i:first-child{background:var(--v-blue)}
.v-app .v-period-line i:nth-child(2){background:var(--v-mint)}
.v-app .v-content{padding:24px 32px 0}
.v-app .v-bleed{margin-left:-32px;margin-right:-32px} /* [+] blok na całą szerokość w .v-content (np. .f-app z formularzem w panelu właściciela); breakpointy jak .v-content */
.v-app .v-services-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}
.v-app .v-services-head .v-micro{color:var(--v-muted)}
.v-app .v-all{background:transparent;font-size:12px;padding:4px 0;border-bottom:1px solid currentColor;display:flex;align-items:center;gap:5px}
.v-app .v-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--v-line);border-bottom:1px solid var(--v-line)}
.v-app .v-service{min-width:0;padding:22px 16px 20px 67px;text-align:left;background:#fff;border-right:1px solid #e2eaf1;border-radius:0;position:relative;overflow:hidden}
.v-app .v-service:last-child{border-right:0}
.v-app .v-service[aria-pressed=true]{border-color:var(--v-ink);background:var(--v-ink);color:#fff}
.v-app .v-service-number{font:400 36px/1 var(--font-display);letter-spacing:-2px;color:#a2bece;position:absolute;left:13px;top:22px;display:block}
.v-app .v-service-number svg{display:none}
.v-app .v-service[aria-pressed=true] .v-service-number{color:var(--v-mint)}
.v-app .v-service-name{font:500 20px/1.2 var(--font-display);letter-spacing:-.7px;display:block}
.v-app .v-service-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:#657b8f}
.v-app .v-service[aria-pressed=true] .v-service-bottom{color:#c0d8eb}
.v-app .v-service-progress{display:flex;gap:3px}
.v-app .v-service-progress i{width:13px;height:4px;background:#ccdbe7}
.v-app .v-service-progress i.v-done{background:#04a353}
.v-app .v-service[aria-pressed=true] .v-service-progress i.v-done{background:var(--v-mint)}
.v-app .v-workbar{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:29px 0 18px;flex-wrap:wrap}
.v-app .v-tabs{display:flex;gap:24px;align-self:stretch}
.v-app .v-tab{padding:7px 0 9px;background:transparent;color:#708295;position:relative;font-size:15px;font-weight:500}
.v-app .v-tab[aria-pressed=true]{color:var(--v-ink)}
.v-app .v-tab[aria-pressed=true]:after{content:'';height:3px;background:var(--v-ink);position:absolute;bottom:0;left:0;right:0}
.v-app .v-tab-count{font:400 11px var(--font-display);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:5px;background:#ecf3f8;color:#4d6980;border-radius:3px}
.v-app .v-new{display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--v-mint);border-radius:4px;color:#023b25;font-size:12px;font-weight:600}
.v-app .v-work{display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:25px;align-items:start}
.v-app .v-list-top{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-bottom:14px;color:var(--v-muted);font-size:11px}
.v-app .v-list-top .v-micro{letter-spacing:.7px}
.v-app .v-task-list{display:flex;flex-direction:column;gap:0}
.v-app .v-task{display:grid;grid-template-columns:49px minmax(0,1fr) 24px;gap:14px;align-items:center;width:100%;padding:15px 12px 15px 0;background:#fff;text-align:left;border-top:1px solid var(--v-line);position:relative;border-radius:0;min-height:77px}
.v-app .v-task:after{content:'';position:absolute;left:0;bottom:0;top:0;width:3px;background:transparent}
.v-app .v-task[aria-pressed=true]{padding-left:12px;background:var(--v-mint);border-top-color:var(--v-mint)}
.v-app .v-task[aria-pressed=true]:after{background:var(--v-ink)}
.v-app .v-task[aria-pressed=true] .v-task-meta,.v-app .v-task[aria-pressed=true] .v-task-date{color:#145c43}
.v-app .v-task-date{display:flex;flex-direction:column;text-align:center;gap:1px;color:#6e8394;font:400 10px var(--font-display)}
.v-app .v-task-date b{font-size:34px;line-height:1;font-weight:400;letter-spacing:-2px;color:var(--v-ink)}
.v-app .v-task-title{font-weight:550;font-size:15px;line-height:1.4;display:block}
.v-app .v-task-meta{display:flex;gap:8px;align-items:center;margin-top:4px;color:#6b8191;font-size:11px;flex-wrap:wrap}
.v-app .v-task-meta svg{width:11px;height:11px;stroke-width:2}
.v-app .v-task-end{width:24px;height:24px;border:1px solid #d9e5ed;border-radius:50%;display:grid;place-items:center}
.v-app .v-task-end svg{width:13px;height:13px}
.v-app .v-task[aria-pressed=true] .v-task-end{background:var(--v-ink);border-color:var(--v-ink);color:#fff}
.v-app .v-task.v-completed .v-task-end{background:#ddf6e9;border-color:#ddf6e9;color:#03894b}
.v-app .v-task.v-completed .v-task-title{color:#5f7a8c}
.v-app .v-focus{background:radial-gradient(ellipse at 120% 10%,#5bb8ff40,transparent 65%),var(--v-blue);border-radius:4px var(--v-cut) 4px var(--v-cut);position:relative;color:#fff;overflow:hidden;box-shadow:0 18px 32px -25px #002b5f70}
.v-app .v-focus-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px 0;color:#badaf3}
.v-app .v-focus-head .v-micro{font-size:10px;letter-spacing:1.4px}
.v-app .v-focus-head svg{color:var(--v-mint);width:21px;height:21px}
.v-app .v-focus-body{padding:21px 22px 22px;position:relative}
.v-app .v-focus h2{font:500 30px/1.12 var(--font-display);letter-spacing:-1.2px;max-width:100%;overflow-wrap:anywhere;margin-bottom:15px;color:#fff}
.v-app .v-focus-desc{font-size:12px;line-height:1.7;color:#d0e4f4;margin-bottom:23px}
.v-app .v-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px}
.v-app .v-detail-grid .v-micro{font-size:10px;letter-spacing:1px;color:#c2def1;display:block;margin-bottom:6px}
.v-app .v-detail-date{height:34px;width:100%;min-width:0;padding:5px 7px;border:1px solid #75a9d0;background:#ecf7ff;color:#03355c;border-radius:3px;font-size:12px;max-width:100%}
.v-app .v-detail-person{display:flex;gap:7px;align-items:center;font-size:12px;min-height:34px}
.v-app .v-detail-person b{font-size:10px;font-weight:500;display:grid;place-items:center;background:#1a679e;width:25px;height:25px;border-radius:50%}
.v-app .v-checks{display:grid;gap:12px;padding:18px 0;border-top:1px solid #ffffff30;border-bottom:1px solid #ffffff30;margin-bottom:20px}
.v-app .v-option{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.v-app .v-option input{accent-color:var(--v-mint);width:16px;height:16px;flex:0 0 16px;margin:2px 0 0}
.v-app .v-option strong{font-size:12px;font-weight:500;display:block}
.v-app .v-option small{display:block;font-size:11px;color:#b8d5eb;margin-top:1px;line-height:1.4}
.v-app .v-finish{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--v-mint);color:#003820;padding:13px 15px;border-radius:3px;font-size:12px;font-weight:650}
.v-app .v-finish svg{width:16px;height:16px}
.v-app .v-recorded{font-size:11px;color:#d3e9f8;display:flex;align-items:flex-start;gap:9px;padding:10px 0;line-height:1.6}
.v-app .v-recorded svg{color:var(--v-mint);margin-top:2px}
.v-app .v-focus-tail{height:30px;background:linear-gradient(105deg,#5bb8ff,#99d5ff 30%,#a7f5d4 75%,#13ec7e);display:flex;justify-content:flex-end;align-items:center;padding:0 22px;gap:5px}
.v-app .v-focus-tail i{width:1px;height:12px;background:#004c8650}
.v-app .v-note{margin:19px 0 0;padding:17px 0 0;border-top:1px solid #dce6ed;display:flex;gap:11px;align-items:flex-start;font-size:12px;color:#5c7488}
.v-app .v-note svg{color:#004c86;width:17px;height:17px;margin-top:2px}
.v-app .v-note strong{display:block;font-size:12px;font-weight:550;color:var(--v-ink);margin-bottom:3px}
.v-app .v-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:25px 32px 0;padding:16px 0;border-top:1px solid var(--v-line);font-size:10px;color:#6f8495}
.v-app .v-footer span:last-child{letter-spacing:1px;font:400 10px var(--font-display)}
.v-app .v-log{display:grid;gap:0}
.v-app .v-log-row{padding:17px 0;border-top:1px solid var(--v-line);display:grid;grid-template-columns:65px minmax(0,1fr);gap:12px}
.v-app .v-log-date{font:400 14px/1.3 var(--font-display);color:var(--v-blue)}
.v-app .v-log-date small{font:400 10px/1.5 var(--font-family);color:#728698;display:block;margin-top:3px}
.v-app .v-log-title{font-size:14px;line-height:1.4;font-weight:550}
.v-app .v-log-meta{font-size:11px;color:#6a8194;margin-top:4px;line-height:1.7}
.v-app .v-key-label{color:#047b46;display:inline-flex;gap:4px;align-items:center;font-size:11px;margin-top:6px}
.v-app .v-key-label svg{width:12px;height:12px}
.v-app .v-empty{padding:30px 0;color:#698195;font-size:13px}
.v-app .v-edit-label{display:block;font-size:12px;margin:17px 0 5px;color:#d5e9f8}
.v-app .v-edit-control{display:block;width:100%;border:1px solid #8cb9db;background:#f5fbff;border-radius:3px;padding:10px 11px;color:#03355c;font-size:13px;min-width:0}
.v-app textarea.v-edit-control{resize:vertical;min-height:80px}
.v-app .v-edit-buttons{display:flex;gap:10px;margin-top:24px}
.v-app .v-cancel{padding:10px;background:#ffffff17;color:#fff;border:1px solid #ffffff50;border-radius:3px;font-size:12px}
.v-app .v-edit-buttons .v-finish{flex:1}
.v-app .v-status{font-size:11px;color:#06723f;min-height:0;margin:0;line-height:1.5}
.v-app .v-status:not(:empty){padding-top:13px}
@media(min-width:1100px){.v-app h1{font-size:79px}}
@media(max-width:850px) and (min-width:681px){.v-app .v-service{padding-left:53px!important}.v-app .v-service-number{font-size:29px!important;left:8px;top:14px}.v-app .v-service-bottom{display:block}.v-app .v-service-progress{margin-top:7px}}
@media(max-width:850px){.v-app .v-bleed{margin-left:-24px;margin-right:-24px}.v-app .v-work{grid-template-columns:minmax(0,1fr) 300px;gap:18px}.v-app .v-top,.v-app .v-hero{padding-left:24px;padding-right:24px}.v-app .v-content{padding-left:24px;padding-right:24px}.v-app .v-footer{margin-left:24px;margin-right:24px}.v-app h1{font-size:59px;letter-spacing:-3.5px}.v-app .v-period{min-width:187px;padding-left:20px}.v-app .v-period-dates{font-size:27px}.v-app .v-task{grid-template-columns:34px minmax(0,1fr) 22px;gap:9px}.v-app .v-task-date b{font-size:25px}.v-app .v-task-title{font-size:13px}.v-app .v-service-name{font-size:18px}.v-app .v-service{padding:13px}}
@media(max-width:680px){.v-app .v-bleed{margin-left:-18px;margin-right:-18px}.v-app .v-top-name{display:none}.v-app .v-top{min-height:68px;padding:14px 18px}.v-app .v-nav{gap:12px;order:3;width:100%}.v-app .v-top-actions{gap:10px}.v-app .v-brand{font-size:25px}.v-app .v-avatar{width:30px;height:30px;font-size:10px}.v-app .v-hero{padding:25px 18px;grid-template-columns:1fr;gap:23px}.v-app h1{font-size:66px;letter-spacing:-4px}.v-app .v-period{border-left:0;border-top:1px solid #cadae5;padding:14px 0 0;display:grid;grid-template-columns:1fr auto;gap:0 15px;width:100%;min-width:0}.v-app .v-period .v-micro{font-size:10px;grid-column:1;align-self:end}.v-app .v-period-dates{grid-column:2;grid-row:1 / span 2;font-size:27px;margin:0;align-self:center}.v-app .v-period small{grid-column:1;align-self:start;font-size:10px}.v-app .v-period-line{grid-column:1 / -1;height:8px;margin-top:12px}.v-app .v-content{padding:21px 18px 0}.v-app .v-work{grid-template-columns:minmax(0,1fr)}.v-app .v-focus h2{font-size:34px}.v-app .v-services{gap:7px}.v-app .v-service{padding:11px 9px}.v-app .v-service-name{font-size:15px;letter-spacing:-.5px}.v-app .v-service-number{margin-bottom:12px;font-size:10px}.v-app .v-service-bottom{display:block;font-size:10px}.v-app .v-service-progress{margin-top:8px}.v-app .v-service-progress i{width:12px}.v-app .v-workbar{gap:10px;margin-top:23px}.v-app .v-tabs{gap:18px}.v-app .v-tab{font-size:14px}.v-app .v-tab-count{display:none}.v-app .v-new{font-size:11px;padding:10px;gap:5px}.v-app .v-task{grid-template-columns:40px minmax(0,1fr) 24px;gap:12px;min-height:76px}.v-app .v-task-title{font-size:14px}.v-app .v-footer{margin:24px 18px 0;flex-wrap:wrap;font-size:10px}.v-app .v-edit-control,.v-app .v-detail-date{font-size:16px;min-height:40px}.v-app .v-detail-person{min-height:40px}}
@media(max-width:680px){.v-app .v-services{gap:0}.v-app .v-service{padding:14px 10px}.v-app .v-service-number{position:static;font-size:28px;margin-bottom:13px;letter-spacing:-1px}.v-app h1 em{letter-spacing:inherit}}
@media(max-width:370px){.v-app h1{font-size:56px;letter-spacing:-3px}.v-app .v-avatar{display:none}.v-app .v-preview{font-size:11px;padding:8px}.v-app .v-period{grid-template-columns:1fr}.v-app .v-period-dates{grid-row:auto;grid-column:1;margin-top:8px;order:3}.v-app .v-period small{order:2}.v-app .v-period-line{order:4}.v-app .v-workbar{align-items:center}.v-app .v-new{padding:9px 7px;font-size:10px}.v-app .v-new svg{width:13px}.v-app .v-tabs{gap:12px}.v-app .v-tab{font-size:13px}.v-app .v-focus-body{padding-left:19px;padding-right:19px}.v-app .v-focus-head{padding-left:19px;padding-right:19px}.v-app .v-focus h2{font-size:29px}}
@media(pointer:coarse){.v-app .v-tab,.v-app .v-new,.v-app .v-preview,.v-app .v-all{min-height:44px}.v-app .v-option{min-height:44px;align-items:center}.v-app .v-option input{width:20px;height:20px;flex-basis:20px}}

/* =====================================================================
   VECTOR · formularze (formularze.css #ds-forms → .f-app)
   ===================================================================== */

.f-app{font:14px/1.5 var(--font-family);color:var(--f-ink);background:#fff;border:1px solid var(--f-line);border-radius:8px;width:100%;position:relative;isolation:isolate;overflow:hidden;color-scheme:light;text-align:left}
.v-app .f-app{border:0;border-radius:0;overflow:visible} /* [+] .f-app zagnieżdżony w panelu właściciela nie jest osobną ramką */
.f-app *{box-sizing:border-box}
.f-app h1,.f-app h2,.f-app h3,.f-app p{margin:0}
.f-app button,.f-app input,.f-app select,.f-app textarea{font:inherit;color:inherit;max-width:100%}
.f-app button{cursor:pointer;touch-action:manipulation;border:0}
.f-app button:focus-visible,.f-app input:focus-visible,.f-app select:focus-visible,.f-app textarea:focus-visible,.f-app a:focus-visible{outline:3px solid #5bb8ff;outline-offset:3px}
.f-app svg{width:17px;height:17px;stroke-width:1.7;flex-shrink:0}
.f-app [hidden]{display:none!important}
.f-app a{color:inherit;text-decoration:none} /* [+] jak w .v-app */
.f-app .f-link{color:var(--f-blue);text-decoration:underline} /* [+] link w treści */
.f-app .f-micro{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}
.f-app .f-top{padding:19px 30px;min-height:76px;display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--f-line)}
.f-app .f-brand{font:700 28px/1 var(--font-display);letter-spacing:-1.7px;display:flex;align-items:center;gap:5px}
.f-app .f-brand b{width:8px;height:8px;border-radius:1px;background:var(--f-green);margin-top:14px}
.f-app .f-breadcrumb{font-size:12px;color:var(--f-muted);border-left:1px solid var(--f-line);padding-left:22px;flex:1}
.f-app .f-avatar{display:grid;place-items:center;border:1px solid #c7d7e3;border-radius:50%;width:34px;height:34px;font-size:11px}
.f-app .f-top form,.v-app .v-top-actions form{display:contents} /* [+] formularz „Wyloguj” nie ma być pudełkiem w flexie paska */
.f-app .f-preview-button{padding:9px 12px;display:flex;align-items:center;gap:7px;background:#f1f6fa;border:1px solid #dce6ed;border-radius:4px;font-size:12px}
.f-app .f-nav{display:flex;align-items:center;gap:25px;padding:0 30px;border-bottom:1px solid var(--f-line)}
.f-app .f-nav button,.f-app .f-nav a{padding:16px 0;background:transparent;color:#6b8093;border-bottom:3px solid transparent;display:flex;align-items:center;gap:8px;font-size:13px}
.f-app .f-nav button[aria-pressed=true],.f-app .f-nav a[aria-pressed=true]{color:var(--f-ink);border-bottom-color:var(--f-green)}
.f-app .f-nav button span,.f-app .f-nav a span{font:400 11px var(--font-display);color:#7794ab}
.f-app .f-hero{padding:26px 30px 28px;background:radial-gradient(ellipse at 92% 0,#dffbea,transparent 55%),radial-gradient(ellipse at 60% 180%,#d3e6fa,transparent 65%),#f7fafd;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#004c86,#5bb8ff 35%,#d6dff8 67%,#13ec7e) 1}
.f-app .f-hero .f-micro{color:#58738a;display:flex;gap:9px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.f-app h1{font:500 57px/1.08 var(--font-display);letter-spacing:-3.6px}
.f-app h1 em{font-style:normal;-webkit-text-stroke:1.15px var(--f-ink);color:transparent}
.f-app .f-hero-context{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:15px;color:#537087;font-size:12px}
.f-app .f-layout{display:grid;grid-template-columns:minmax(0,1fr) 291px;gap:32px;padding:27px 30px 0;align-items:start}
.f-app .f-section{padding-bottom:25px;margin-bottom:25px;border-bottom:1px solid var(--f-line)}
.f-app .f-section:last-child{border-bottom:0;padding-bottom:0}
.f-app .f-section-head{display:flex;gap:13px;align-items:baseline;margin-bottom:19px}
.f-app .f-section-head>span{font:400 22px var(--font-display);letter-spacing:-1px;color:#95b1c4}
.f-app h2{font:500 20px/1.2 var(--font-display);letter-spacing:-.6px}
.f-app .f-field{margin-top:var(--f-gap)}
.f-app .f-field:first-child{margin-top:0}
.f-app .f-label{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:550;align-items:center;margin-bottom:7px;flex-wrap:wrap}
.f-app .f-label small{font-size:11px;font-weight:400;color:#6c8496}
.f-app .f-input{display:block;width:100%;min-width:0;border:1px solid #bdcfdc;border-radius:4px;padding:11px 12px;background:#fff;font-size:14px;line-height:1.5}
.f-app .f-input:disabled{background:#f5f8fb;color:#526e81;opacity:1}
.f-app .f-input[aria-invalid=true]{border-color:#a12c37} /* [+] pole z błędem walidacji */
.f-app textarea.f-input{min-height:var(--f-area);resize:vertical;line-height:1.7}
.f-app .f-help{color:#6c8193;font-size:11px;margin-top:6px!important;line-height:1.6}
.f-app .f-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-app .f-two .f-field{margin-top:0}
.f-app .f-frequency{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.f-app .f-choice{display:flex;align-items:flex-start;gap:10px;background:#f7fafd;border:1px solid var(--f-line);border-radius:4px;padding:13px 12px;cursor:pointer;font-size:13px}
.f-app .f-choice:has(input:checked){border-color:var(--f-ink);background:#eef5fa}
.f-app .f-choice input{margin:3px 0 0;accent-color:var(--f-blue);width:15px;height:15px;flex:0 0 15px}
.f-app .f-choice strong{font-weight:550;font-size:13px;display:block}
.f-app .f-choice small{display:block;font-size:11px;color:#617b8e;margin-top:2px}
.f-app .f-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.f-app .f-day{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 0;gap:5px;background:#f5f8fb;border:1px solid var(--f-line);border-radius:4px;cursor:pointer;font-size:12px;min-width:0}
.f-app .f-day:has(input:checked){background:var(--f-ink);border-color:var(--f-ink);color:#fff}
.f-app .f-day input{width:13px;height:13px;margin:0;accent-color:var(--f-green)}
.f-app .f-check{display:flex;align-items:flex-start;gap:11px;margin-top:15px;cursor:pointer;font-size:13px}
.f-app .f-check input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--f-blue);flex:0 0 17px}
.f-app .f-check strong{display:block;font-weight:550;font-size:13px}
.f-app .f-check small{display:block;font-size:11px;color:#6a8193;margin-top:3px;line-height:1.6}
.f-app .f-fixed-fields{margin-top:22px;display:flex;gap:14px;align-items:flex-start;padding:15px 0 0;border-top:1px solid #e4ecf2;font-size:12px;color:#556f84}
.f-app .f-fixed-fields svg{color:var(--f-blue);margin-top:2px}
.f-app .f-fixed-fields strong{font-weight:550;color:var(--f-ink)}
.f-app .f-side-panel{border-radius:4px 30px 4px 30px;overflow:hidden;background:radial-gradient(ellipse at 130% 0,#5bb8ff40,transparent 65%),var(--f-blue);color:#fff}
.f-app .f-side-body{padding:23px}
.f-app .f-side-panel .f-micro{color:#bddbf0}
.f-app .f-side-panel h3{font:500 23px/1.25 var(--font-display);letter-spacing:-.6px;margin:13px 0;color:#fff;overflow-wrap:anywhere}
.f-app .f-side-meta{font-size:11px;color:#c7e0f4;line-height:1.8}
.f-app .f-bigcount{display:flex;align-items:baseline;gap:10px;margin:22px 0 5px}
.f-app .f-bigcount strong{font:400 66px/.95 var(--font-display);letter-spacing:-4px;color:#fff}
.f-app .f-bigcount span{font-size:12px;color:#c3dff2}
.f-app .f-side-rule{padding-top:16px;margin-top:20px;border-top:1px solid #ffffff30;font-size:12px;line-height:1.6;color:#d2e6f5}
.f-app .f-side-rule small{display:block;color:#aacde7;font-size:11px;margin-top:6px}
.f-app .f-side-tail{height:14px;background:linear-gradient(110deg,#5bb8ff,#a3d9ff 34%,#b0ecd8 67%,#13ec7e)}
.f-app .f-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:20px}
.f-app .f-cal span{font-size:10px;text-align:center;line-height:25px;color:#accbe3}
.f-app .f-cal .f-cal-day{border-radius:2px;background:#ffffff10;color:#bfd7ea}
.f-app .f-cal .f-cal-day.on{background:#e4f4ff;color:#034879}
.f-app .f-cal .f-cal-day.first{background:var(--f-green);color:#033f26}
.f-app .f-side-legend{display:flex;align-items:center;gap:6px;color:#d2e7f5;font-size:10px;margin-top:11px}
.f-app .f-side-legend i{width:7px;height:7px;background:#e4f4ff;border-radius:1px}
.f-app .f-aside-note{display:flex;gap:10px;font-size:11px;color:#688193;margin:20px 0;line-height:1.8}
.f-app .f-aside-note svg{margin-top:2px;color:var(--f-blue)}
.f-app .f-aside-note strong{font-weight:550;color:var(--f-ink)}
.f-app .f-footer-actions{padding:19px 0 0;border-top:1px solid var(--f-line);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.f-app .f-primary{display:inline-flex;justify-content:center;align-items:center;gap:13px;padding:13px 18px;background:var(--f-green);color:#023b25;font-weight:650;font-size:13px;border-radius:4px;min-height:44px}
.f-app .f-primary:disabled{background:#e1f4e9;color:#41745b;cursor:default}
.f-app .f-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 12px;background:#f0f5f9;border:1px solid var(--f-line);border-radius:4px;font-size:12px}
.f-app .f-status{font-size:12px;color:#08734b;margin-top:14px!important;line-height:1.7}
.f-app .f-status:empty{display:none}
.f-app .f-error{font-size:12px;color:#a12c37;margin-top:14px!important;line-height:1.7}
.f-app .f-error:empty{display:none}
.f-app .f-field .f-error,.f-app .f-check+.f-error{margin-top:6px!important} /* [+] błąd pod polem – odstęp jak .f-help */
.f-app .f-footer{border-top:1px solid var(--f-line);margin:26px 30px 0;padding:15px 0;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#758b9a;flex-wrap:wrap}
.f-app .f-entry-title{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--f-line)}
.f-app .f-entry-title h2{font-size:24px;margin-bottom:7px}
.f-app .f-entry-title span{font-size:12px;color:#6c8598}
.f-app .f-notebox{padding:19px 0 0;margin-top:24px;border-top:1px solid var(--f-line)}
.f-app .f-notebox .f-label{margin-bottom:9px}
.f-app .f-label-name{display:flex;gap:8px;align-items:center}
.f-app .f-badge{font-size:10px;font-weight:500;padding:4px 7px;background:#e4f9ee;color:#076740;border-radius:3px;white-space:nowrap}
.f-app .f-private{padding:18px;background:#eff5fa;border-left:3px solid #004c86;border-radius:0 5px 5px 0;margin-top:23px}
.f-app .f-private .f-badge{background:#dceaf5;color:#164a72}
.f-app .f-private textarea{border-color:#acbfd0;background:#fff}
.f-app .f-private .f-help{color:#526f86}
.f-app .f-result{margin-top:22px}
.f-app .f-result .f-choice{padding:10px}
.f-app .f-result .f-choice strong{font-size:12px}
.f-app .f-entry-bottom{margin-top:23px;margin-bottom:24px}
.f-app .f-daylist{margin-top:20px;border-top:1px solid #ffffff30}
.f-app .f-dayitem{display:flex;align-items:center;justify-content:space-between;gap:10px;background:transparent;color:#d6e9f7;padding:12px 0;border-bottom:1px solid #ffffff25;width:100%;text-align:left;font-size:12px}
.f-app .f-dayitem[aria-pressed=true]{color:var(--f-green)}
.f-app .f-dayitem>span{display:flex;align-items:baseline;gap:9px}
.f-app .f-dayitem b{font:400 25px var(--font-display);letter-spacing:-1px}
.f-app .f-dayitem small{font-size:10px;color:#b6d4eb}
.f-app .f-history{margin-top:24px}
.f-app .f-history h3{font:500 16px var(--font-display);letter-spacing:-.3px;margin-bottom:12px}
.f-app .f-history-item{padding:12px 0;border-top:1px solid var(--f-line);font-size:11px;line-height:1.7}
.f-app .f-history-item b{font-weight:550;font-size:12px;color:var(--f-ink)}
.f-app .f-history-item>span{display:block;color:#70889b}
.f-app .f-history-item button,.f-app .f-history-item a{background:transparent;padding:0;text-align:left;font-size:11px;color:#446a89;display:flex;gap:6px;align-items:center;margin-top:3px}
.f-app .f-history-item svg{width:12px;height:12px}
.f-app .f-client-layout{padding:28px 30px}
.f-app .f-client-heading{display:flex;justify-content:space-between;align-items:baseline;gap:15px;flex-wrap:wrap;margin-bottom:20px}
.f-app .f-client-heading h2{font-size:26px}
.f-app .f-client-heading span{font-size:12px;color:#6e879a}
.f-app .f-public-row{display:grid;grid-template-columns:100px minmax(0,1fr);gap:24px;border-top:1px solid var(--f-line);padding:24px 0}
.f-app .f-public-date{font:400 31px/1 var(--font-display);letter-spacing:-1px}
.f-app .f-public-date small{font:400 11px/1.6 var(--font-family);color:#728b9d;display:block;letter-spacing:0;margin-top:7px}
.f-app .f-public-row h3{font:500 18px var(--font-display);margin-bottom:10px}
.f-app .f-public-row p{font-size:14px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;color:#425e74}
.f-app .f-public-row .f-public-author{font-size:11px;color:#768c9c;margin-top:12px}
.f-app .f-public-banner{background:#e6fbef;color:#05643d;padding:11px 15px;font-size:12px;margin-bottom:25px;display:flex;align-items:center;gap:9px}
.f-app .f-empty{padding:30px 0;color:#6b8294;font-size:13px}
@media(max-width:850px){.f-app .f-layout{grid-template-columns:minmax(0,1fr) 255px;gap:22px;padding-left:24px;padding-right:24px}.f-app .f-top,.f-app .f-hero,.f-app .f-client-layout{padding-left:24px;padding-right:24px}.f-app .f-nav{padding-left:24px;padding-right:24px}.f-app .f-side-body{padding:20px}.f-app h1{font-size:49px;letter-spacing:-3px}.f-app .f-choice{padding:11px 9px;gap:7px}.f-app .f-choice small{font-size:10px}}
@media(max-width:700px){.f-app .f-top{padding:17px 18px;gap:12px;min-height:67px}.f-app .f-brand{font-size:25px}.f-app .f-breadcrumb{display:none}.f-app .f-avatar{display:none}.f-app .f-preview-button{margin-left:auto;font-size:11px;padding:8px 10px}.f-app .f-nav{padding:0 18px;gap:24px}.f-app .f-nav button,.f-app .f-nav a{font-size:12px}.f-app .f-hero{padding:23px 18px}.f-app h1{font-size:43px;letter-spacing:-2.5px}.f-app .f-layout{grid-template-columns:minmax(0,1fr);gap:27px;padding:24px 18px 0}.f-app .f-section-head{gap:11px}.f-app .f-section-head h2{font-size:20px}.f-app .f-side-panel{max-width:none}.f-app .f-side-body{padding:23px}.f-app .f-input{font-size:16px}.f-app .f-footer{margin-left:18px;margin-right:18px}.f-app .f-private{padding:15px 12px}.f-app .f-client-layout{padding:23px 18px}.f-app .f-public-row{grid-template-columns:66px minmax(0,1fr);gap:17px}.f-app .f-public-date{font-size:24px}.f-app .f-public-row h3{font-size:17px}.f-app .f-days{gap:4px}.f-app .f-frequency{gap:7px}.f-app .f-choice{padding:11px 8px}.f-app .f-choice strong{font-size:12px}.f-app .f-day{font-size:11px}.f-app .f-label small{font-size:10px}}
@media(max-width:365px){.f-app h1{font-size:38px;letter-spacing:-2px}.f-app .f-top{gap:8px}.f-app .f-preview-button{font-size:10px;padding:8px}.f-app .f-preview-button svg{width:14px}.f-app .f-two{grid-template-columns:1fr}.f-app .f-frequency{grid-template-columns:1fr}.f-app .f-nav{gap:18px}.f-app .f-nav button,.f-app .f-nav a{font-size:11px}.f-app .f-primary{width:100%;font-size:12px}.f-app .f-footer-actions .f-secondary{width:100%}}
@media(pointer:coarse){.f-app .f-day,.f-app .f-check,.f-app .f-choice,.f-app .f-preview-button{min-height:44px}.f-app .f-check{align-items:center}}

/* =====================================================================
   Poza makietami (zostaje z B1 – makiety tego nie mają)
   ===================================================================== */

/* Logowanie: wąska kolumna formularza w .f-layout (makieta formularzy ma dwie kolumny; logowanie ma jedną) */
.f-app .f-auth{max-width:420px;padding-bottom:40px}
.f-app .f-auth>.f-error{margin:0 0 20px!important}
.f-app .f-auth .f-footer-actions{margin-top:24px}

/* Strona błędu 403/404/419/429/500/503 (layout public) */
.f-app .error-page{max-width:420px;margin:64px auto 0;padding:0 18px;text-align:center}
.f-app .error-page__code{font:400 66px/.95 var(--font-display);letter-spacing:-4px;color:var(--f-blue)}
.f-app .error-page__title{margin-top:12px;font-size:26px;letter-spacing:-.6px}
.f-app .error-page__text{margin-top:8px;color:#6b8294}
.f-app .error-page__action{margin-top:24px;display:flex;justify-content:center}

/* Ukryta etykieta dla czytników */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* B2 · Lista klientów i karta klienta – reguły [+] (makiety nie mają listy z filtrem, panelu kontaktów ani formularza w .v-focus) */
.v-app .v-bleed.f-app{width:auto} /* [+] .f-app ma width:100%, a .v-bleed ujemne marginesy – bez width:auto blok kończy się 64px przed prawą krawędzią */
.v-app .v-filters{flex-wrap:wrap;row-gap:2px} /* [+] pięć zakładek filtra listy klientów łamie się na wąskim ekranie (makieta ma dwie) */
.v-app .v-search{display:flex;gap:8px;align-items:center;flex:1 1 260px;max-width:380px;min-width:0} /* [+] wyszukiwarka w .v-workbar obok zakładek filtra */
.v-app .v-search input{flex:1;min-width:0;border:1px solid #bdcfdc;border-radius:4px;padding:9px 11px;background:#fff;font-size:13px} /* [+] pole jak .f-input, w skali panelu */
.v-app .v-empty .v-new{display:inline-flex;margin-top:14px} /* [+] przycisk w stanie pustym listy */
.v-app .v-services>.v-empty{grid-column:1/-1} /* [+] stan pusty siatki usług na całą szerokość */
.v-app .v-contacts{display:flex;flex-direction:column;margin-bottom:20px} /* [+] lista kontaktów w panelu */
.v-app .v-contact{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px solid #ffffff30;font-size:12px;line-height:1.6;color:#d0e4f4;overflow-wrap:anywhere}
.v-app .v-contact:first-child{border-top:0;padding-top:0}
.v-app .v-contact svg{width:14px;height:14px;color:var(--v-mint);margin-top:4px}
.v-app .v-contact strong{display:block;color:#fff;font-weight:550;font-size:13px}
.v-app .v-contact a{text-decoration:underline;text-decoration-color:#ffffff50;text-underline-offset:2px}
.v-app .v-contact .v-contact-edit{display:inline-block;margin-top:2px;font-size:11px;color:#b8d5eb}
.v-app .v-contact-form{padding:14px 0 18px;border-top:1px solid #ffffff30} /* [+] formularz kontaktu (ukryty, otwierany na miejscu) pod wierszem kontaktu */
.v-app .v-contact-form .v-micro{font-size:10px;letter-spacing:1.4px;color:#badaf3}
.v-app .v-finish+.v-contact-form{margin-top:18px;border-top:0} /* [+] formularz nowego kontaktu pod przyciskiem „Dodaj kontakt" */
.v-app [aria-expanded=false] .v-when-open,.v-app [aria-expanded=true] .v-when-closed{display:none} /* [+] przycisk data-toggle: plus gdy zwinięte, minus gdy rozwinięte */
.v-app .v-edit-error{margin-top:5px;font-size:11px;color:#ffc6cc} /* [+] błąd walidacji pod polem w panelu .v-focus */
.v-app .v-edit-control[aria-invalid=true]{border-color:#ff9aa5}
.v-app .v-edit-option{margin-top:18px} /* [+] .v-option pod polami (makieta: style="margin-top:18px") */
.v-app .v-focus-body form+form{margin-top:12px} /* [+] „Usuń kontakt" pod formularzem edycji */
@media(max-width:680px){.v-app .v-top,.v-app .v-top-actions{flex-wrap:wrap}} /* [+] pasek na telefonie: nawigacja (order:3;width:100% z B1b) i dwa przyciski akcji karty łamią się zamiast wychodzić poza ramkę */

/* B2 · stany hover i „aktywny" jak .v-task[aria-pressed=true] z makiety (makieta nie ma :hover – dodane jako łagodniejszy wariant) */
@media(hover:hover){
.v-app .v-task,.v-app .v-task:after,.v-app .v-task-end,.v-app .v-task-meta,.v-app .v-task-date{transition:background-color .18s ease,border-color .18s ease,color .18s ease,padding-left .18s ease} /* [+] płynne wejście/zejście hovera; tylko przy myszy, bez animacji przy prefers-reduced-motion */
.v-app .v-tab{transition:color .15s ease}
.v-app .v-task:not([aria-pressed=true]):hover{padding-left:12px;background:var(--v-mint);border-top-color:var(--v-mint)} /* [+] wiersz listy pod kursorem: jak .v-task[aria-pressed=true] z makiety (mint #13ec7e) */
.v-app .v-task:not([aria-pressed=true]):hover:after{background:var(--v-ink)}
.v-app .v-task:not([aria-pressed=true]):hover .v-task-end{background:var(--v-ink);border-color:var(--v-ink);color:#fff}
.v-app .v-task:not([aria-pressed=true]):hover .v-task-meta,.v-app .v-task:not([aria-pressed=true]):hover .v-task-date{color:#145c43}
.v-app .v-tab:not([aria-pressed=true]):hover{color:var(--v-ink)} /* [+] zakładka pod kursorem */
.v-app .v-contact-edit:hover,.v-app .v-contact a:hover{color:#fff;text-decoration-color:var(--v-mint)} /* [+] linki w panelu kontaktów */
}
.v-app .v-contact[aria-current=true]{margin:0 -22px;padding:12px 22px 12px 19px;background:var(--v-mint);border-top-color:var(--v-mint);border-left:3px solid var(--v-ink);color:#145c43} /* [+] kontakt z otwartym formularzem – jak .v-task[aria-pressed=true]: mięta, granatowy pasek po lewej, na całą szerokość panelu */
.v-app .v-contact[aria-current=true] strong,.v-app .v-contact[aria-current=true] svg{color:var(--v-ink)}
.v-app .v-contact[aria-current=true] a{color:var(--v-ink);text-decoration-color:#03355c66}
.v-app .v-contact[aria-current=true]+.v-contact-form{border-top:0}
@media(prefers-reduced-motion:reduce){.v-app .v-task,.v-app .v-task:after,.v-app .v-task-end,.v-app .v-task-meta,.v-app .v-task-date,.v-app .v-tab{transition:none}}

/* B3 · Usługi klienta i okresy – reguły [+] (makiety nie mają listy okresów z formularzem inline, zwiniętej listy zakończonych ani formularza wieloetapowego) */
.v-app .v-period-line[style]{grid-template-columns:repeat(var(--v-period-days,30),1fr)} /* [+] kolumny linii okresu = liczba dni okresu (komponent x-v.period ustawia --v-period-days, gdy days ≠ 30) */
.v-app .v-service[data-status=paused]{opacity:.6} /* [+] kafelek usługi wstrzymanej */
.v-app .v-ended{margin-top:14px;font-size:12px;color:var(--v-muted)} /* [+] zwinięta lista usług zakończonych pod kafelkami (<details>, bez JS) */
.v-app .v-ended summary{cursor:pointer;font-size:11px;letter-spacing:.7px;text-transform:uppercase;font-weight:600;color:#557087;padding:6px 0}
.v-app .v-ended ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.v-app .v-ended li{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.v-app .v-ended li a{color:var(--v-ink);font-weight:550;text-decoration:underline;text-decoration-color:#03355c40;text-underline-offset:2px}
.v-app .v-workbar>form{margin-left:auto} /* [+] przycisk „Utwórz następny okres" po prawej stronie paska zakładek */
.v-app .v-task[aria-current=true]{padding-left:12px;background:var(--v-mint);border-top-color:var(--v-mint)} /* [+] wiersz okresu z otwartym formularzem (app.js data-active-for) – jak .v-task[aria-pressed=true] z makiety */
.v-app .v-task[aria-current=true]:after{background:var(--v-ink)}
.v-app .v-task[aria-current=true] .v-task-meta,.v-app .v-task[aria-current=true] .v-task-date{color:#145c43}
.v-app .v-task[aria-current=true] .v-task-end{background:var(--v-ink);border-color:var(--v-ink);color:#fff}
.v-app .v-period-form{padding:18px 0 22px;border-top:1px solid var(--v-line)} /* [+] formularz zakresu okresu pod wierszem okresu (ukryty, otwierany na miejscu); zakres .f-app na jasnym tle listy */
.v-app .v-period-form.f-app{font-size:13px}
.v-app .v-period-form-head{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.v-app .v-period-form-head .f-micro{color:#58738a}
.v-app .v-period-form .f-footer-actions{margin-top:18px;padding-top:16px}
.f-app .v-scope-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:var(--f-gap)} /* [+] siatka pól liczbowych zakresu (posty, rolki, kampanie…) */
.f-app .v-scope-grid .f-field{margin-top:0}
.f-app .v-scope-grid>.f-error{grid-column:1/-1}
.f-app .v-picked{font-size:14px;line-height:1.7;color:var(--f-ink);display:flex;gap:10px;flex-wrap:wrap;align-items:baseline} /* [+] wybrana usługa i pakiet w kroku 2 formularza (tekst zamiast pola, link „Zmień") */
.v-app .v-detail-grid strong{display:block;font-size:12px;font-weight:550;color:#fff;overflow-wrap:anywhere} /* [+] wartość w siatce danych usługi (makieta ma tam datę/osobę) */
.v-app .v-service-notes{white-space:pre-wrap} /* [+] notatki wewnętrzne w panelu usługi */
.v-app .v-end-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px} /* [+] „Zakończ usługę" pod „Wstrzymaj/Wznów" – link data-toggle jako pełny przycisk panelu */
.v-app .v-end-toggle svg{width:14px;height:14px}
.v-app .v-end-toggle+.v-contact-form{margin-top:14px} /* [+] formularz zakończenia pod przyciskiem (klasy .v-contact-form z B2 – ten sam wygląd formularza w .v-focus) */
@media(max-width:680px){.v-app .v-workbar>form{width:100%;margin-left:0}.v-app .v-workbar>form .v-new{width:100%;justify-content:center}} /* [+] „Utwórz następny okres" na telefonie na całą szerokość pod zakładkami */

/* B4 · Dziennik działań – reguły [+] (makiety nie mają filtru listy, panelu wpisu z jasną wstawką formularza ani przycisków w pasku obok formularza okresu) */
.v-app .v-journal-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0} /* [+] filtr dziennika w .v-list-top (usługa, od, do) */
.v-app .v-journal-filter select,.v-app .v-journal-filter input{min-width:0;max-width:170px;border:1px solid #bdcfdc;border-radius:4px;padding:7px 9px;background:#fff;font-size:12px;color:var(--v-ink)} /* [+] pola filtru jak .v-search input, w skali .v-list-top */
.v-app .v-journal-summary{padding-top:0;margin-top:-4px;flex-wrap:wrap} /* [+] druga linia .v-list-top: zakres, liczba wpisów, liczniki typów, czas */
.v-app .v-task-flag{display:inline-flex;align-items:center;gap:4px;color:#047b46} /* [+] oznaczenie „widoczne dla klienta" w meta wiersza (ikona eye) */
.v-app .v-activity-panel{margin-bottom:20px} /* [+] panel wpisu / przeglądu nad panelem „Kontakty" / „Usługa" w <aside> */
.v-app .v-entry-inset{margin-top:18px;padding:0 16px 16px;border-radius:4px} /* [+] jasna wstawka .f-app z <x-f.entry> (informacja dla klienta + notatka własna) w granatowym panelu */
.v-app .v-entry-inset .f-notebox{margin-top:0;border-top:0;padding-top:16px}
.v-app .v-entry-inset .f-private{margin-top:16px}
.v-app .v-entry-inset-top{padding-top:16px}
.v-app .v-entry-inset-top .f-result{margin-top:0}
.v-app .v-entry-inset-top .f-notebox{margin-top:18px;border-top:1px solid var(--f-line);padding-top:16px}
.v-app .v-edit-grid{margin:18px 0 0} /* [+] siatka .v-detail-grid z polami (czas, obiekt / data, czas) w formularzu panelu */
.v-app .v-edit-grid .v-micro{font-size:10px;letter-spacing:1px;color:#c2def1;display:block;margin-bottom:6px}
.v-app textarea.v-edit-control.v-edit-control{min-height:64px}
.v-app .v-delete-button{width:100%;margin-top:12px} /* [+] „Usuń wpis" pod checkboxem potwierdzenia */
.v-app .v-workbar-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center} /* [+] „+ Wpis" i „Przegląd dziś" w pasku zakładek (obok formularza okresu) */
@media(max-width:680px){.v-app .v-workbar-actions{width:100%}.v-app .v-workbar-actions .v-new{flex:1;justify-content:center}.v-app .v-journal-top{flex-wrap:wrap}.v-app .v-journal-filter{width:100%}.v-app .v-journal-filter label{flex:1 1 120px;display:flex}.v-app .v-journal-filter label:nth-of-type(1){flex-basis:100%}.v-app .v-journal-filter select,.v-app .v-journal-filter input{max-width:none;width:100%}} /* [+] telefon: przyciski i filtr na całą szerokość (usługa w jednej linii, daty obok siebie) */

/* B4b · Zadania planowane – reguły [+] (makiety nie mają bloku „Najbliższe" nad zakładkami ani wiersza zaległego zadania) */
.v-app .v-upcoming{margin-top:26px} /* [+] blok „Najbliższe" między kafelkami usług a paskiem zakładek */
.v-app .v-upcoming-head{align-items:center} /* [+] nagłówek bloku jak .v-services-head, z akcjami po prawej */
.v-app .v-upcoming-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.v-app .v-upcoming-empty{padding:14px 0 6px;border-top:1px solid var(--v-line)} /* [+] „Nic nie czeka" pod nagłówkiem */
.v-app .v-upcoming-more{padding:12px 0 0;font-size:12px;color:var(--v-muted)} /* [+] „+N więcej →" pod skróconą listą */
.v-app .v-task--overdue .v-task-date b{color:#b3261e} /* [+] zaległe zadanie: czerwony numer dnia (jak przeterminowane w makiecie) */
.v-app .v-task--overdue .v-task-end{border-color:#b3261e;color:#b3261e} /* [+] czerwona obwódka kółka zaległego zadania */
.v-app .v-task-overdue{color:#b3261e;font-weight:550} /* [+] tekst „zaległe" w meta wiersza */
.v-app .v-task-flag--note svg{width:12px;height:12px} /* [+] ikona notatki w meta wiersza */
.v-app .v-task-readonly{margin-bottom:0;color:#fff} /* [+] tytuł przeglądu tylko do odczytu w panelu zadania */
.v-app .v-focus-body .v-task-done{margin-top:18px;text-decoration:none} /* [+] „Zrobione" pod formularzem zadania (link albo przycisk .v-finish) */
@media(max-width:680px){.v-app .v-upcoming-head{flex-wrap:wrap;gap:10px}.v-app .v-upcoming-actions{width:100%;justify-content:space-between}} /* [+] telefon: akcje bloku „Najbliższe" pod nagłówkiem */

/* B5 · Raport okresu – reguły [+] (makiety nie mają raportu z czterema liczbami, panelu raportu z linkiem ani listy wykonanych w panelu) */
.f-app .f-report-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:34px} /* [+] cztery liczby raportu (Wydane · Zapytania · Koszt zapytania · MER) */
.f-app .f-report-stat{border-top:2px solid var(--f-ink);padding-top:14px;min-width:0}
.f-app .f-report-stat .f-micro{color:#58738a;display:block;margin-bottom:12px}
.f-app .f-report-stat strong{display:block;font:400 clamp(34px,4vw,56px)/1 var(--font-display);letter-spacing:-2.5px;color:var(--f-ink);overflow-wrap:anywhere} /* [+] duże cyfry jak .f-bigcount strong z makiety, na jasnym tle */
.f-app .f-report-stat[data-empty] strong{color:#a2bece}
.f-app .f-report-stat small{display:block;margin-top:10px;font-size:12px;line-height:1.6;color:#6e879a}
.f-app .f-report-scope{display:flex;flex-wrap:wrap;gap:6px 18px;margin:-8px 0 18px;font-size:13px;color:#425e74} /* [+] liczniki zakresu pod nagłówkiem „Co zrobiłem w tym okresie" */
.f-app .f-report-scope span{font-weight:550;color:var(--f-ink)}
.f-app .f-report-text{font-size:15px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;color:#425e74;margin-bottom:34px;max-width:720px} /* [+] podsumowanie / co testowałem / co zmieniam */
.f-app .f-client-heading+.f-public-row{border-top:0} /* [+] pierwszy wiersz listy bez górnej kreski pod nagłówkiem */
.f-app .f-report-footer{margin-top:40px;padding-top:24px;border-top:1px solid var(--f-line);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px;color:#425e74} /* [+] stopka raportu: kontakt + „Zaloguj się do panelu" */
.v-app .v-report-link{color:#b8d5eb;text-decoration:underline;text-decoration-color:#ffffff50;text-underline-offset:2px} /* [+] „Zobacz cały raport" w panelu raportu */
.v-app .v-report-share{margin-top:18px;padding-top:16px;border-top:1px solid #ffffff30} /* [+] blok linku po udostępnieniu: pole, Kopiuj / Otwórz / Wyślij, unieważnienie */
.v-app .v-report-share-actions{flex-wrap:wrap}
.v-app .v-report-share-actions [disabled]{opacity:.5;cursor:not-allowed}
.v-app .v-report-hint{margin-top:8px;font-size:11px;color:#b8d5eb}
.v-app .v-report-auto{margin-top:18px;padding-top:16px;border-top:1px solid #ffffff30} /* [+] podgląd auto-sekcji z dziennika w panelu raportu (tylko odczyt) */
.v-app .v-report-auto>.v-micro{display:block;color:#badaf3;margin-bottom:6px}
.v-app .v-report-auto .v-detail-grid{margin:8px 0 14px}
.v-app .v-report-entries{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.5;color:#d0e4f4}
.v-app .v-report-entries b{color:#fff;font-weight:550;margin-right:4px}
.v-app .v-report-entries span{color:#badaf3;margin-right:4px}
.v-app .v-focus-body .v-report-auto+form{margin-top:12px}
.v-app [data-copy][data-copied]{background:var(--v-mint);color:var(--v-ink)} /* [+] „Kopiuj" po skopiowaniu linku (app.js) */
@media(max-width:850px){.f-app .f-report-stats{grid-template-columns:repeat(2,minmax(0,1fr))}} /* [+] telefon i wąski ekran: liczby w dwóch kolumnach */
@media(max-width:700px){.f-app .f-report-stats{gap:14px;margin-bottom:26px}.f-app .f-report-stat strong{font-size:32px;letter-spacing:-1.5px}.f-app .f-report-footer{flex-direction:column;align-items:flex-start}.f-app .f-report-footer .f-secondary{width:100%}}
.v-app .v-report-field-label{display:block;color:#badaf3;margin-top:14px} /* [+] etykieta wartości tylko do odczytu w panelu raportu udostępnionego */
.v-app .v-report-value{white-space:pre-wrap;margin-top:4px} /* [+] wartość tekstowa raportu (podsumowanie, co testowałem…) w trybie tylko do odczytu */
.v-app .v-report-share form+form{margin-top:16px;padding-top:14px;border-top:1px solid #ffffff30} /* [+] „Cofnij udostępnienie" pod „Unieważnij link" / „Udostępnij ponownie" */

/* B5 · Blok „Najbliższe" w dwóch kolumnach – reguły [+] (decyzja właściciela 2026-09-17: blok B4b spychał zakładki za nisko).
   ≥1200 px: siatka 2 × N czytana wierszami (1-2 / 3-4 – zaległe zostają na górze), wiersze zwarte: mniejszy numer dnia, tytuł
   i meta w jednej linii; poniżej 1200 px jedna kolumna jak dotąd. Obie karty (klienta i usługi) używają tego samego partiala. */
@media(min-width:1200px){
.v-app .v-upcoming .v-task-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px} /* [+] dwie kolumny, kolejność wierszami */
.v-app .v-upcoming .v-task{grid-template-columns:34px minmax(0,1fr) 20px;gap:10px;min-height:0;padding:8px 8px 8px 0} /* [+] zwarty wiersz */
.v-app .v-upcoming .v-task-date b{font-size:22px;letter-spacing:-1px}
.v-app .v-upcoming .v-task-date span{font-size:9px}
.v-app .v-upcoming .v-task-title{font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-app .v-upcoming .v-task-meta{margin-top:1px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;font-size:10px}
.v-app .v-upcoming .v-task-meta>span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.v-app .v-upcoming .v-task-end{width:20px;height:20px}
.v-app .v-upcoming .v-task-end svg{width:11px;height:11px}
.v-app .v-upcoming .v-task:not([aria-pressed=true]):hover{padding-left:10px}
.v-app .v-upcoming .v-task[aria-current=true]{padding-left:10px}
.v-app .v-upcoming-more{padding-top:8px}
}

/* B5 · Panel raportu pod wierszem – reguły [+] (decyzja właściciela 2026-09-17: nie w <aside>, tylko rozwinięcie w liście) */
.v-app .v-task-list .v-report-inline{margin:0 0 6px} /* [+] granatowy panel raportu na całą szerokość kolumny głównej, pod klikniętym wierszem */
.v-app .v-task-list .v-report-inline:not([hidden])+.v-task{border-top:0}
.v-app .v-report-inline .v-edit-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} /* [+] liczby raportu w jednym rzędzie na szerokim ekranie (2 kolumny na wąskim) */
.v-app .v-report-inline .v-report-auto .v-detail-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.v-app .v-report-inline .v-report-share-actions{flex-wrap:wrap}

/* B5b · Załączniki do wpisów i odhaczenie w panelu zadania – reguły [+] (makiety nie mają miniatur przy wpisach, pola plików w panelu, listy załączników ani sekcji „Zrobione" w panelu zadania) */
.f-app .f-attachments{display:grid;grid-template-columns:repeat(auto-fill,96px);gap:8px;margin-top:14px} /* [+] siatka miniatur przy wpisie raportu: kwadratowe kafelki 96 px */
.f-app .f-attachment{display:block;width:96px;height:96px;border:1px solid var(--f-line);border-radius:4px;overflow:hidden;background:#fff;color:var(--f-ink);text-decoration:none}
.f-app .f-attachment img{width:100%;height:100%;object-fit:cover;display:block}
.f-app .f-attachment-doc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;padding:8px;text-align:center} /* [+] kafelek PDF: ikona + nazwa */
.f-app .f-attachment-doc svg{width:24px;height:24px;color:#58738a}
.f-app .f-attachment-doc small{font-size:10px;line-height:1.3;color:#425e74;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
@media(hover:hover){.f-app .f-attachment:hover{border-color:var(--f-ink)}}
@media(max-width:700px){.f-app .f-attachments{grid-template-columns:repeat(3,minmax(0,1fr))}.f-app .f-attachment{width:auto;height:auto;aspect-ratio:1}} /* [+] telefon: 3 kafelki w rzędzie */
.v-app .v-task-flag--files{color:#6b8191} /* [+] spinacz + liczba załączników w meta wiersza dziennika */
.v-app .v-files-field{margin-top:16px} /* [+] pole plików (.f-input) w jasnej wstawce pod <x-f.entry> */
.v-app .v-files-field .f-input{padding:8px 10px;font-size:12px}
.v-app .v-attachments{margin-top:18px;padding-top:14px;border-top:1px solid #ffffff30} /* [+] lista załączników w panelu edycji wpisu (miniatura, nazwa, rozmiar, Usuń) */
.v-app .v-attachments>.v-micro{display:block;color:#badaf3;margin-bottom:8px}
.v-app .v-attachment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.v-app .v-attachment{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center}
.v-app .v-attachment-thumb{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;width:48px;height:48px;border-radius:3px;overflow:hidden;background:#ffffff17;color:#fff}
.v-app .v-attachment-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.v-app .v-attachment-thumb small{font-size:8px;letter-spacing:.5px}
.v-app .v-attachment-name{min-width:0;font-size:12px;line-height:1.4;color:#fff;display:flex;flex-direction:column}
.v-app .v-attachment-name a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-app .v-attachment-name small{font-size:10px;color:#badaf3}
.v-app .v-attachment-delete{padding:6px 10px;font-size:11px}
.v-app .v-entry-files{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle} /* [+] małe miniatury przy wpisie w podglądzie auto-sekcji raportu */
.v-app .v-entry-file{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:3px;overflow:hidden;background:#ffffff17;color:#fff}
.v-app .v-entry-file img{width:100%;height:100%;object-fit:cover;display:block}
.v-app .v-entry-file svg{width:14px;height:14px}
.v-app .v-task-done-section{margin-top:0} /* [+] sekcja wykonania „Zrobione" – zastępuje widok zadania w tym samym panelu (typ, data, informacja, pliki, czas) */
.v-app .v-task-done-main{margin-top:14px;margin-bottom:18px} /* [+] „Zrobione" jako główna akcja nad formularzem edycji zadania */
.v-app .v-focus:has(.v-task-done-section:not([hidden])) .v-head-view,.v-app .v-focus:not(:has(.v-task-done-section:not([hidden]))) .v-head-done{display:none} /* [+] nagłówek panelu: „Zadanie / …" albo „Zrobione / {tytuł}" wg widocznej sekcji (bez JS) */
.v-app .v-task-done-alt{margin-top:10px}
.v-app .v-status--error{color:#b3261e} /* [+] komunikat błędu poza formularzem (np. za duże pliki – żądanie odrzucone przed walidacją) */

/* B5b · Panel zadania jako drawer – reguły [+] (decyzja właściciela po odbiorze: panel otwierany z bloku „Najbliższe" nad zakładkami lądował w <aside> poza ekranem).
   Klasę .v-drawer nadaje app.js po otwarciu panelu [data-drawer] (zadanie, „Przegląd dziś"); bez JS panel stoi w <aside> jak dotąd. */
.v-app .v-drawer{position:fixed;top:0;right:0;bottom:0;height:100dvh;width:min(440px,100vw);z-index:60;margin:0;border-radius:0;display:flex;flex-direction:column;box-shadow:-24px 0 64px #03355c60;outline:none} /* [+] panel przy prawej krawędzi, cała wysokość */
.v-app .v-drawer .v-focus-head{flex-shrink:0;padding-bottom:16px;border-bottom:1px solid #ffffff20} /* [+] nagłówek zawsze widoczny */
.v-app .v-drawer .v-focus-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain} /* [+] treść przewija się wewnątrz */
.v-app .v-drawer .v-focus-tail{flex-shrink:0}
.v-drawer-backdrop{position:fixed;inset:0;z-index:55;background:rgba(3,53,92,.55)} /* [+] tło pod drawerem (granatowe, półprzezroczyste), klik zamyka */
.v-drawer-backdrop[hidden]{display:none}
body.v-drawer-open{overflow:hidden} /* [+] strona pod drawerem nie przewija się */
@media(max-width:680px){.v-app .v-drawer{width:100vw}}
.v-app .v-drawer .v-task-done-section .v-edit-buttons{position:sticky;bottom:-22px;margin-bottom:-22px;padding:12px 0 22px;background:var(--v-blue);z-index:1} /* [+] „Wstecz" / „Zapisz i odhacz" zawsze widoczne na dole drawera (treść przewija się nad nimi) */

/* B4c · Szablony i plan okresu (timeline) – reguły [+] (makiety nie mają osi dni na jasnym tle; typografia dnia wzorowana na .f-dayitem z makiety formularzy: numer Space Grotesk 25 px + mały podpis „WRZ · Śr") */
.v-app .v-plan-bar-text{display:flex;flex-direction:column;gap:3px;color:var(--v-muted);font-size:11px;min-width:0} /* [+] pasek nad osią: „Plan okresu · daty" + liczniki zakresu z planu */
.v-app .v-plan-bar-text .v-micro{letter-spacing:.7px}
.v-app .v-plan-bar-scope{font-size:13px;color:var(--v-ink);font-weight:550}
.v-app .v-plan-empty{margin-bottom:14px}
.v-app .v-plan{display:flex;flex-direction:column} /* [+] oś dni okresu pon–sob */
.v-app .v-plan-week{padding:18px 0 6px;color:var(--v-muted);font-size:10px;letter-spacing:1.4px} /* [+] podpis tygodnia nad poniedziałkiem */
.v-app .v-plan-day{display:grid;grid-template-columns:78px minmax(0,1fr);gap:0 14px;align-items:start;border-top:1px solid var(--v-line);padding:10px 0 10px 8px;min-height:58px} /* [+] wiersz dnia: data | prace; „+ dodaj" pod datą */
.v-app .v-plan-day--today{background:#f7fafd;box-shadow:inset 3px 0 0 var(--v-mint)} /* [+] dziś: miętowy pasek z lewej, jasne tło */
.v-app .v-plan-date{display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding-top:2px}
.v-app .v-plan-date-num{display:flex;align-items:baseline;gap:6px;color:#6e8394;font:400 10px var(--font-display)}
.v-app .v-plan-date-num b{font:400 25px var(--font-display);letter-spacing:-1px;color:var(--v-ink);line-height:1}
.v-app .v-plan-date-num small{font-size:10px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.v-app .v-plan-today{font-size:9px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#03894b}
.v-app .v-plan-add-btn{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--v-muted);margin-top:2px;padding:2px 0} /* [+] „+ dodaj" przy dniu */
.v-app .v-plan-add-btn svg{width:11px;height:11px;stroke-width:2}
.v-app .v-plan-add-btn[aria-expanded=true]{color:var(--v-ink)}
.v-app .v-plan-items{display:flex;flex-direction:column;gap:4px;min-width:0}
.v-app .v-plan-item{display:grid;grid-template-columns:22px minmax(0,1fr) 20px;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--v-line);border-radius:4px;background:#fff;color:inherit;position:relative;min-width:0} /* [+] praca na osi (link → panel zadania jako drawer) */
.v-app .v-plan-item-icon{width:22px;height:22px;display:grid;place-items:center;border-radius:3px;background:#ecf3f8;color:var(--v-blue);flex-shrink:0}
.v-app .v-plan-item-icon svg{width:12px;height:12px;stroke-width:2}
.v-app .v-plan-item-body{min-width:0}
.v-app .v-plan-item-title{font-weight:550;font-size:13px;line-height:1.35;display:block;overflow-wrap:anywhere}
.v-app .v-plan-item-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:10px;color:#6b8191;margin-top:2px}
.v-app .v-plan-item-end{width:20px;height:20px;border:1px solid #d9e5ed;border-radius:50%;display:grid;place-items:center;color:var(--v-ink)}
.v-app .v-plan-item-end svg{width:11px;height:11px}
.v-app .v-plan-item[aria-current=true]{background:var(--v-mint);border-color:var(--v-mint)} /* [+] praca z otwartym panelem – jak .v-task[aria-pressed=true] */
.v-app .v-plan-item[aria-current=true] .v-plan-item-icon{background:var(--v-ink);color:#fff}
.v-app .v-plan-item[aria-current=true] .v-plan-item-end{background:var(--v-ink);border-color:var(--v-ink);color:#fff}
.v-app .v-plan-item[aria-current=true] .v-plan-item-meta{color:#145c43}
.v-app .v-plan-item--check{padding:4px 10px;grid-template-columns:18px minmax(0,1fr) 16px;background:#f7fafd;border-style:dashed} /* [+] przegląd konta: jedna linia, mniejszy */
.v-app .v-plan-item--check .v-plan-item-icon{width:18px;height:18px;background:transparent;color:#6b8191}
.v-app .v-plan-item--check .v-plan-item-body{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.v-app .v-plan-item--check .v-plan-item-title{font-weight:450;font-size:11px}
.v-app .v-plan-item--check .v-plan-item-meta{margin-top:0}
.v-app .v-plan-item--check .v-plan-item-end{width:16px;height:16px}
.v-app .v-plan-item--check .v-plan-item-end svg{width:9px;height:9px}
.v-app .v-plan-item--done .v-plan-item-title{color:#5f7a8c} /* [+] zrobione: zielony ptaszek jak .v-completed */
.v-app .v-plan-item--done .v-plan-item-end{background:#ddf6e9;border-color:#ddf6e9;color:#03894b}
.v-app .v-plan-item--cancelled{opacity:.62} /* [+] anulowane: wyszarzone, przekreślone, zostaje na osi (panel ma „Przywróć") */
.v-app .v-plan-item--cancelled .v-plan-item-title{text-decoration:line-through;color:#5f7a8c}
.v-app .v-plan-item--overdue .v-plan-item-icon{background:#fbe9e7;color:#b3261e} /* [+] zaległe: czerwona ikona i etykieta (.v-task-overdue z B4b) */
.v-app .v-plan-outside{margin-bottom:12px}
.v-app .v-plan-add{grid-column:1/-1;margin-top:8px;padding:12px 0 4px;border-top:1px dashed var(--v-line)} /* [+] formularz „+ dodaj" pod dniem (ukryty, jeden naraz), zakres .f-app */
.v-app .v-plan-add.f-app{font-size:13px}
.f-app .v-plan-add-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px} /* [+] siatka pól typ / tytuł / notatka (timeline i pozycja szablonu) */
.f-app .v-plan-add-grid .f-field{margin-top:0}
.f-app .v-plan-add-grid .f-input{padding:9px 11px;font-size:13px}
.f-app .v-plan-add-notes{grid-column:1/-1}
.v-app .v-plan-add .f-footer-actions{margin-top:12px;padding-top:12px}
.v-app .v-plan-add .f-footer-actions .f-primary,.v-app .v-item-form .f-footer-actions .f-primary{padding:10px 16px;font-size:12px}
.v-app .v-plan-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;margin-top:6px} /* [+] linki w panelu „Okres" (karta usługi, poprzedni/następny okres, szablony) */
.v-app .v-focus .v-plan-links .v-link{color:#d5e9f8}
.v-app .v-period-action{margin-top:12px;color:var(--v-ink);width:max-content} /* [+] „Plan okresu →" pod linią okresu w hero */
.v-app .v-period-action svg{width:12px;height:12px}
.v-app .v-period-plan-link{display:flex;justify-content:flex-end;padding:0 12px 8px 0;font-size:11px} /* [+] link do timeline pod wierszem okresu na liście okresów */
.v-app .v-period-plan-link .v-all{color:var(--v-muted);font-size:11px;padding:2px 0}
.v-app .v-period-plan-link .v-all svg{width:11px;height:11px}
.v-app .v-task-move{margin-top:12px} /* [+] „Przenieś na następny okres" w panelu zadania na timeline */
.v-app .v-templates-top{padding-bottom:0;flex-direction:column;align-items:flex-start;gap:2px;min-width:0} /* [+] pasek listy/edytora szablonów: licznik + „zmiana nie zmienia istniejących okresów" */
.v-app .v-templates-group{margin:22px 0 6px}
.v-app .v-templates-group:first-child{margin-top:0}
.v-app .v-item-form{border-top:0;padding-top:0;margin-bottom:16px} /* [+] inline „+ Dodaj pozycję" w edytorze szablonu (jak formularz zakresu okresu) */
.v-app .v-item-form .f-result,.v-app .v-item-inset .f-result{margin-top:14px}
.f-app .v-item-schedule{margin-top:12px}
.v-app .v-item-inset .f-check{margin-top:12px}
.v-app .v-item-inset .f-footer-actions{margin-top:14px;padding-top:12px}
.v-app .v-item-inset .f-footer-actions .f-primary{padding:10px 14px;font-size:12px}
.v-app .v-item-inset .f-frequency{grid-template-columns:1fr}
.v-app .v-item-inset .v-plan-add-grid{grid-template-columns:1fr}
@media(hover:hover){.v-app .v-plan-item:not([aria-current=true]):hover{background:var(--v-mint);border-color:var(--v-mint);transition:background .18s ease,border-color .18s ease}.v-app .v-plan-item:not([aria-current=true]):hover .v-plan-item-end{background:var(--v-ink);border-color:var(--v-ink);color:#fff}.v-app .v-plan-add-btn:hover{color:var(--v-ink)}} /* [+] hover = stan aktywny z makiety (konwencja B2) */
@media(prefers-reduced-motion:reduce){.v-app .v-plan-item{transition:none}}
@media(max-width:680px){.v-app .v-plan-day{grid-template-columns:1fr;gap:6px;padding-left:6px}.v-app .v-plan-date{flex-direction:row;align-items:baseline;gap:10px}.v-app .v-plan-add-btn{margin-left:auto}.v-app .v-plan-bar .v-workbar-actions{width:100%}.v-app .v-plan-bar .v-workbar-actions>*{flex:1 1 auto;justify-content:center}} /* [+] telefon: data nad pracami, „+ dodaj" po prawej, przyciski paska na całą szerokość */

/* B4c · Drag & drop prac między dniami – reguły [+] (poprawka po odbiorze) */
.v-app .v-plan-item[draggable=true]{cursor:grab} /* [+] otwarta praca manual da się przeciągnąć na inny dzień */
.v-app .v-plan-item--dragging{opacity:.45} /* [+] przeciągana praca */
.v-app .v-plan-day--drop{background:#e4f8ee;box-shadow:inset 3px 0 0 var(--v-ink);outline:1px dashed var(--v-ink);outline-offset:-1px} /* [+] dzień pod kursorem podczas przeciągania */
.v-app .v-plan-day--drop .v-plan-items{min-height:24px}
@media(pointer:coarse){.v-app .v-plan-item[draggable=true]{cursor:pointer}} /* [+] telefon: bez DnD, data w drawerze */

/* B6 · Poczta i log wysyłek – reguły [+] */
.v-app .v-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* [+] „Poczta" w stopce obok wersji (wejście do /mail bez pozycji w nawigacji) */
.v-app .v-report-send{margin-top:14px;padding-top:14px;border-top:1px dashed #ffffff30} /* [+] formularz wysyłki linku pod przyciskami linku (ukryty do kliknięcia „Wyślij do klienta") */
.v-app .v-report-send .v-edit-label:first-child{margin-top:0}
.v-app .v-report-mails{margin-top:18px;padding-top:14px;border-top:1px solid #ffffff30} /* [+] lista „Wysłane" (ostatnie 5 z mail_log) w panelu raportu */
.v-app .v-mail-failed{color:#b3261e;font-weight:550} /* [+] status „nieudany" w meta wiersza /mail – jak .v-task-overdue z B4b */
.v-app .v-focus .v-mail-failed,.v-app .v-focus .v-report-entries span.v-mail-failed{color:#ffb4ab} /* [+] ten sam status na granatowym panelu raportu – jaśniejsza czerwień */

/* B7 · Aktywa i pliki klienta – reguły [+] (makiety nie mają rejestru z ikonami typów, badge'a właściciela, inline formularza na jasnym tle listy ani panelu edycji aktywa) */
.v-app .v-list-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:flex-end} /* [+] prawa strona .v-list-top: eksport CSV, filtr usługi, „+ Aktywo" / „+ Plik" */
.v-app .v-list-actions .v-all svg{width:13px;height:13px}
.v-app .v-inline-form{padding:18px 0 22px;border-top:1px solid var(--v-line);border-bottom:1px solid var(--v-line);margin-bottom:-1px} /* [+] inline formularz „+ Aktywo" / „+ Plik" pod .v-list-top (ukryty, otwierany na miejscu); zakres .f-app na jasnym tle listy – jak .v-period-form z B3 */
.v-app .v-inline-form.f-app{font-size:13px}
.v-app .v-inline-form>.f-micro{color:#58738a;display:block;margin-bottom:4px}
.v-app .v-inline-form .f-field.f-two>.f-field{margin-top:0}
.v-app .v-inline-form .f-footer-actions{margin-top:18px;padding-top:16px}
.v-app .v-inline-form .f-frequency{grid-template-columns:repeat(3,1fr)} /* [+] właściciel: trzy opcje w jednym rzędzie */
.v-app .v-asset-group{padding:18px 0 8px;color:var(--v-muted);letter-spacing:.7px} /* [+] nagłówek grupy aktywów (Meta / Google / Strona i domena / Inne) */
.v-app .v-asset-group span{color:#9fb2c1;font-weight:400}
.v-app .v-asset-group+.v-task{border-top-color:transparent}
.v-app .v-asset .v-asset-icon svg{width:26px;height:26px;stroke-width:1.5;color:var(--v-blue)} /* [+] ikona typu aktywa w kolumnie daty wiersza */
.v-app .v-asset .v-asset-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;max-width:100%;overflow-wrap:anywhere} /* [+] identyfikator / nazwa jako link zewnętrzny – nad rozciągniętym linkiem edycji */
.v-app .v-asset .v-asset-link svg{width:12px;height:12px;flex:none;color:var(--v-muted)}
.v-app .v-asset .v-asset-open::before{content:'';position:absolute;inset:0;z-index:0} /* [+] strzałka edycji rozciągnięta na cały wiersz: klik gdziekolwiek (poza linkiem zewnętrznym) otwiera panel */
.v-app .v-asset .v-asset-open{position:static}
.v-app .v-asset-badge{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;line-height:1.6} /* [+] badge właściciela aktywa */
.v-app .v-asset-badge--client{background:#ddf6e9;color:#03894b}
.v-app .v-asset-badge--dotsell{background:var(--v-ink);color:#fff}
.v-app .v-asset-badge--other{background:#e6edf2;color:#4d6577}
.v-app .v-task[aria-current=true] .v-asset-badge--client,.v-app .v-task:not([aria-pressed=true]):hover .v-asset-badge--client{background:#fff}
.v-app .v-asset-expires--soon{color:#b3261e;font-weight:600} /* [+] „wygasa dd.mm.rrrr" ≤ 30 dni lub po terminie – jak .v-task-overdue z B4b */
.v-app .v-asset-flag svg{width:11px;height:11px;color:#9fb2c1} /* [+] kłódka: aktywo ma notatkę wewnętrzną */
.v-app .v-asset-owner-options{display:grid;gap:8px;margin-top:6px} /* [+] właściciel w panelu edycji: trzy .v-option pod sobą */
.v-app .v-asset-owner-options .v-option small{display:block;font-weight:400;color:#c2def1}
.v-app .v-only-you{display:inline-flex;align-items:center;gap:4px;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#9fb2c1} /* [+] badge „Tylko Ty" przy notatce wewnętrznej */
.v-app .v-only-you svg{width:11px;height:11px}
.v-app .v-focus .v-only-you{color:#badaf3;margin-left:8px}
.v-app .v-no-passwords{display:flex;gap:6px;align-items:flex-start;margin-top:14px} /* [+] stały dopisek „Nie wpisuj tu haseł ani loginów" pod formularzem aktywa */
.v-app .v-no-passwords svg{width:13px;height:13px;flex:none;margin-top:2px}
.v-app .v-focus .v-no-passwords{color:#badaf3}
.v-app .v-asset-panel .v-focus-desc{overflow-wrap:anywhere}
.v-app .v-asset-panel .v-edit-grid .v-edit-control{font-size:12px}
.v-app .v-asset-panel-link{display:inline-flex;align-items:center;gap:4px;text-decoration:underline;text-decoration-color:#ffffff50;text-underline-offset:2px} /* [+] „Otwórz plik" w nagłówku panelu pliku */
.v-app .v-asset-panel-link svg{width:11px;height:11px}
.v-app .v-hero-aside{display:flex;flex-direction:column;gap:12px;align-self:center} /* [+] hero karty usługi: okres + link „Pliki tej usługi (N)" w jednej komórce siatki */
.v-app .v-service-files{align-self:flex-start;margin-left:27px}
.v-app .v-inline-form textarea.f-input{min-height:72px} /* [+] uwagi / notatka w inline formularzu aktywa – niższe niż domyślne --f-area */
@media(max-width:850px){.v-app .v-service-files{margin-left:20px}}
@media(max-width:680px){.v-app .v-hero-aside{width:100%}.v-app .v-service-files{margin-left:0}.v-app .v-list-actions{width:100%;justify-content:flex-start}.v-app .v-list-actions .v-new{margin-left:auto}.v-app .v-inline-form .f-frequency,.v-app .v-inline-form .f-two{grid-template-columns:1fr}} /* [+] telefon: akcje listy na całą szerokość, właściciel i pary pól pod sobą */

/* B8a · Konto klienta i szkielet panelu klienta – reguły [+] (makiety mają .f-nav jako zakładki formularza i podgląd klienta bez nawigacji ani list) */
.f-shell .f-app .f-client-layout{max-width:940px;margin-left:auto;margin-right:auto} /* [+] treść 880 px + 2×30 px padding, wyśrodkowana (B1b zostawił max-width B8) */
.f-shell .f-app .f-hero>*{max-width:880px;margin-left:auto;margin-right:auto} /* [+] hero zostaje pełnej szerokości (gradient), tekst w kolumnie treści */
.f-shell .f-app .f-nav{padding-left:max(30px,calc((100% - 880px)/2))} /* [+] nawigacja wyrównana do kolumny treści */
.f-app .f-nav a{white-space:nowrap;flex:none} /* [+] pozycje nawigacji nie łamią się */
.f-app .f-nav a[aria-current=page]{color:var(--f-ink);border-bottom-color:var(--f-green)} /* [+] aktywna strona jak [aria-pressed=true] z makiety */
@media(hover:hover){.f-app .f-nav a:hover{color:var(--f-ink)}}
@media(max-width:700px){.f-app .f-nav{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.f-app .f-nav::-webkit-scrollbar{display:none}} /* [+] telefon: nav przewijany poziomo */
.f-app .f-rows{border-top:1px solid var(--f-line)} /* [+] lista usług / raportów w panelu klienta – wiersze-linki */
.f-app .f-row{display:grid;grid-template-columns:minmax(0,1fr) auto 17px;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--f-line)}
.f-app .f-row-main strong{display:block;font:500 17px var(--font-display);letter-spacing:-.3px}
.f-app .f-row-main>span{display:block;font-size:12px;color:#6e879a;margin-top:2px}
.f-app .f-row-meta{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;font-size:12px;color:#537087;text-align:right}
.f-app .f-row>svg{color:#7794ab}
.f-app .f-badge--paused{background:#fff3d6;color:#8a5a00} /* [+] status usługi wstrzymanej */
.f-app .f-badge--ended{background:#e6edf2;color:#4d6577} /* [+] status usługi zakończonej */
@media(hover:hover){.f-app .f-row:hover .f-row-main strong{color:var(--f-blue)}.f-app .f-row:hover>svg{color:var(--f-ink)}}
@media(max-width:700px){.f-app .f-row{grid-template-columns:minmax(0,1fr) 17px;gap:8px 16px}.f-app .f-row>svg{grid-row:1;grid-column:2}.f-app .f-row-meta{grid-column:1/-1;justify-content:flex-start;text-align:left}} /* [+] telefon: strzałka przy nazwie, meta pod spodem */
.f-app .f-heading-gap{margin-top:36px} /* [+] odstęp między sekcjami strony /panel */
.f-app .f-account{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;font-size:13px;margin-bottom:12px} /* [+] dane konta w ustawieniach */
.f-app .f-account dt{color:#6e879a}
.f-app .f-account dd{margin:0;font-weight:550;overflow-wrap:anywhere}
.f-app .f-report-back{margin-top:24px} /* [+] powrót do listy raportów pod raportem */
.f-app .f-footer-actions .f-link{font-size:12px} /* [+] „Nie pamiętam hasła" / „Wróć do logowania" w stopce formularza */
.v-app .v-contact-key{display:inline-block;margin-left:6px;vertical-align:-1px} /* [+] ikona key-round przy kontakcie z aktywnym kontem w panelu */
.v-app .v-contact-key svg{width:12px;height:12px;margin-top:0}
.v-app .v-contact-access{margin-top:6px;font-size:11px;color:#c2def1} /* [+] sekcja „Dostęp do panelu" (status) pod kontaktem */
.v-app .v-contact-access .v-micro{font-size:9px;letter-spacing:1.2px;color:#9fb2c1}
.v-app .v-contact[aria-current=true] .v-contact-access,.v-app .v-contact[aria-current=true] .v-contact-access .v-micro,.v-app .v-contact[aria-current=true] .v-contact-key svg{color:var(--v-ink)} /* [+] na miętowym wierszu (otwarty formularz) status i klucz w kolorze ink */
.v-app .v-contact form{display:inline}
.v-app .v-contact button.v-contact-edit{background:transparent;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:#ffffff50;text-underline-offset:2px} /* [+] „Wyślij link ponownie" jako przycisk w stylu linku */


/* B8b · Panel klienta: usługa, dziennik, raporty, aktywa, pliki – reguły [+] (makieta „podgląd klienta" ma tylko wiersze wpisów; pasek postępu wzorowany na .v-service-progress z makiety panelu, kolory makiet) */
.f-app .f-progress{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px;font-size:11px;color:#657b8f} /* [+] „wykonane 5 / 11" + pasek kresek na kafelku usługi i w sekcji „Zakres i postęp" */
.f-app .f-progress-line{display:flex;flex-wrap:wrap;gap:3px}
.f-app .f-progress-line i{width:13px;height:4px;background:#ccdbe7} /* [+] kreska = jedna pozycja zakresu (jak .v-service-progress i) */
.f-app .f-progress-line i.f-done{background:#04a353} /* [+] wykonane – zieleń z makiety panelu */
.f-app .f-row-main .f-progress{margin-top:6px}
.f-app .f-scope{margin-bottom:22px} /* [+] sekcja „Zakres i postęp" na karcie usługi */
.f-app .f-scope .f-progress{margin-top:0;font:500 15px var(--font-display);color:var(--f-ink);letter-spacing:-.2px}
.f-app .f-scope-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:13px;color:#425e74} /* [+] pozycje zakresu z licznikami („6 / 8 postów · sesja ✓") */
.f-app .f-scope-list li{font-weight:550;color:var(--f-ink)}
.f-app .f-scope-note{font-size:13px;color:#425e74;margin:0 0 22px} /* [+] „Przeglądy konta: N z M dni roboczych" / usługa bez zakresu liczbowego */
.f-app .f-scope+.f-scope-note{margin-top:-12px}
.f-app .f-period-filter{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap} /* [+] select okresu (dziennik usługi) / usługi (pliki) + „Pokaż" – bez JS */
.f-app .f-period-filter .f-label{margin:0}
.f-app .f-period-filter .f-input{width:auto;max-width:100%;padding:8px 10px;font-size:13px}
.f-app .f-period-filter .f-secondary{padding:8px 14px;font-size:12px}
.f-app .f-period-filter+.f-public-row{border-top:1px solid var(--f-line)} /* [+] pierwszy wiersz pod filtrem ma kreskę (nagłówek jest wyżej) */
.f-app .f-entry-service{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:12px} /* [+] „Ostatnio wykonane" na starcie: link do usługi pod wpisem */
.f-app .f-entry-service svg{width:12px;height:12px}
.f-app .f-page-nav{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:24px;font-size:13px} /* [+] „← Raporty" / „Usługa →" nad i pod raportem w panelu klienta */
.f-app .f-page-nav a{display:inline-flex;align-items:center;gap:5px}
.f-app .f-page-nav svg{width:13px;height:13px}
.f-app .f-page-nav--bottom{margin:28px 0 0}
.f-app .f-nav a span{margin-left:-2px} /* [+] licznik raportów w nawigacji – odstęp jak w makiecie (.f-nav a ma gap 8px) */
.f-app .f-asset-group{font:600 10px var(--font-family);letter-spacing:1.5px;text-transform:uppercase;color:#58738a;padding:18px 0 8px;border-bottom:1px solid var(--f-line)} /* [+] nagłówek grupy aktywów (Meta / Google / Strona i domena / Inne) */
.f-app .f-asset{display:grid;grid-template-columns:36px minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid var(--f-line)} /* [+] wiersz aktywa: ikona typu | treść */
.f-app .f-asset-icon svg{width:26px;height:26px;stroke-width:1.5;color:var(--f-blue);margin-top:2px}
.f-app .f-asset-body{min-width:0}
.f-app .f-asset-body h4{font:500 17px var(--font-display);letter-spacing:-.3px;margin-bottom:4px}
.f-app .f-asset-id{font-size:13px;color:#425e74;overflow-wrap:anywhere} /* [+] identyfikator (URL jako link) */
.f-app .f-asset-id a{display:inline-flex;align-items:center;gap:4px;max-width:100%}
.f-app .f-asset-id svg{width:12px;height:12px;flex:none}
.f-app .f-asset-meta{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:12px;color:#6e879a} /* [+] „Twoje" · „dotSell ma dostęp: admin" · „wygasa dd.mm.rrrr" – informacja, bez czerwieni */
.f-app .f-asset-meta li:first-child{font-weight:600;color:var(--f-ink)}
.f-app .f-asset-note{margin-top:8px;font-size:13px;line-height:1.7;color:#425e74;white-space:pre-wrap;overflow-wrap:anywhere} /* [+] uwagi dla klienta */
.f-app .f-file h3 a{display:inline-flex;align-items:center;gap:6px;max-width:100%;overflow-wrap:anywhere} /* [+] nazwa pliku jako link (nowa karta) */
.f-app .f-file h3 svg{width:14px;height:14px;flex:none;color:#7794ab}
.f-app .f-file .f-public-author{display:flex;flex-wrap:wrap;gap:4px 14px} /* [+] host · usługa · okres pod nazwą pliku */
.f-app .f-file p{margin-bottom:0}
@media(hover:hover){.f-app .f-file h3 a:hover,.f-app .f-asset-id a:hover{color:var(--f-blue)}.f-app .f-page-nav a:hover{color:var(--f-ink)}}
@media(max-width:700px){.f-app .f-asset{grid-template-columns:28px minmax(0,1fr);gap:12px;padding:14px 0}.f-app .f-asset-icon svg{width:22px;height:22px}.f-app .f-period-filter{align-items:stretch;flex-direction:column;gap:8px}.f-app .f-period-filter .f-input{width:100%}.f-app .f-scope .f-progress{font-size:14px}} /* [+] telefon: mniejsza ikona aktywa, filtr w kolumnie */


/* B9 · Uwagi od klienta z odpowiedzią – reguły [+] (klient: w stylu .f-aside-note z makiety formularzy; właściciel: jak .v-report-mails / .v-task-flag; kolory makiet) */
.f-app .f-notes{margin-top:14px} /* [+] blok uwag pod wpisem / raportem: lista uwag + „Mam uwagę" + formularz */
.f-app .f-notes--list{margin-top:0}
.f-app .f-note{padding:12px 14px;margin:10px 0;background:#f7fafd;border-left:3px solid var(--f-line);font-size:13px;line-height:1.7;color:#425e74} /* [+] jedna uwaga klienta (jasne tło, kreska jak .f-aside-note) */
.f-app .f-note-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:11px;color:#688193} /* [+] „Twoja uwaga · dd.mm.rrrr" / kontekst na /panel/notes */
.f-app .f-note-head strong{font-weight:550;color:var(--f-ink)}
.f-app .f-note-head .f-link{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:11px}
.f-app .f-note-head .f-link svg{width:12px;height:12px}
.f-app .f-note-body,.f-app .f-public-row p.f-note-body{margin:4px 0 0;font-size:13px;line-height:1.7;white-space:normal;overflow-wrap:anywhere;color:var(--f-ink)} /* [+] treść uwagi / odpowiedzi (nl2br, bez pre-wrap z .f-public-row p) */
.f-app .f-note-reply{display:flex;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--f-line)} /* [+] odpowiedź właściciela pod uwagą (ikona jak .f-aside-note, kreska mięta) */
.f-app .f-note-reply svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--f-blue)}
.f-app .f-note-reply>div{min-width:0;flex:1}
.f-app .f-note-waiting{margin:6px 0 0;font-size:11px;color:#688193;font-style:italic} /* [+] „czeka na odpowiedź" / „Załatwione · dd.mm" */
.f-app .f-note-open{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;font-weight:550} /* [+] link „Mam uwagę" (data-toggle) */
.f-app .f-note-open svg{width:14px;height:14px}
.f-app .f-note-open[aria-expanded=true]{color:var(--f-ink)}
.f-app .f-note-form{margin-top:10px;padding:14px;background:#f7fafd;border:1px solid var(--f-line);border-radius:6px} /* [+] rozwijany formularz uwagi ([hidden] gdy zwinięty) */
.f-app .f-note-form .f-field{margin-bottom:0}
.f-app .f-note-form .f-input{font-size:14px}
.f-app .f-note-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px} /* [+] „Anuluj" · „Wyślij" pod textarea */
.f-app .f-note-actions .f-link{font-size:12px}
.f-app .f-note-actions .f-primary{padding:10px 18px;font-size:13px}
.f-app .f-public-row .f-notes{margin-top:12px}
.f-app .f-public-row .f-notes+.f-public-author,.f-app .f-public-row .f-notes~.f-public-author{margin-top:12px}
.v-app .v-task-flag--notes{color:#6b8191} /* [+] dymek + liczba uwag klienta w meta wiersza dziennika / raportu */
.v-app .v-task-flag--notes-new{color:#b3261e;font-weight:550} /* [+] nowa uwaga (czeka na odpowiedź) – czerwień jak .v-task-overdue z B4b */
.v-app .v-task[aria-current=true] .v-task-flag--notes-new,.v-app .v-task[aria-pressed=true] .v-task-flag--notes-new{color:#7a1a12}
.v-app .v-notes{margin-top:18px;padding-top:14px;border-top:1px dashed #ffffff30} /* [+] sekcja „Uwagi klienta (N)" w panelu wpisu / raportu / uwagi */
.v-app .v-cnote{margin-top:10px;padding:12px 14px;background:#ffffff0f;border-radius:6px;font-size:12px;line-height:1.7;color:#c2def1} /* [+] jedna uwaga klienta na granatowym panelu */
.v-app .v-cnote-head{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:11px;color:#9fb2c1}
.v-app .v-cnote-head strong{font-weight:600;color:#ffffff}
.v-app .v-cnote-new{color:#ffb4ab;font-weight:550} /* [+] „czeka na odpowiedź" na granatowym panelu – jak .v-focus .v-mail-failed z B6 */
.v-app .v-cnote-body{margin:4px 0 0;color:#ffffff;overflow-wrap:anywhere}
.v-app .v-cnote-reply{margin-top:10px;padding:10px 12px;background:#ffffff14;border-left:3px solid var(--v-mint);border-radius:0 4px 4px 0} /* [+] odpowiedź właściciela pod uwagą (kreska mięta) */
.v-app .v-cnote-reply .v-micro{color:#9fb2c1}
.v-app .v-cnote form{margin-top:10px}
.v-app .v-cnote form+form{margin-top:8px;padding-top:8px;border-top:1px solid #ffffff1a} /* [+] „Oznacz jako załatwione" pod formularzem odpowiedzi */
.v-app .v-cnote .v-edit-label small{display:block;font-weight:400;text-transform:none;letter-spacing:0;font-size:10px;color:#9fb2c1;margin-top:2px}
.v-app .v-cnote textarea.v-edit-control{min-height:64px}
.v-app .v-cnote-panel .v-focus-desc a{color:#ffffff;text-decoration:underline;text-underline-offset:2px} /* [+] „Otwórz w karcie" w panelu uwagi na /notes */
@media(max-width:700px){.f-app .f-note-actions{flex-direction:column-reverse;align-items:stretch}.f-app .f-note-actions .f-primary{width:100%;justify-content:center}.f-app .f-note-head .f-link{margin-left:0}} /* [+] telefon: „Wyślij" na całą szerokość */
/* B10 · Dashboard właściciela – reguły [+] (makieta panelu nie ma ekranu zbiorczego: sekcje jako natywne <details>, siatka 2 kolumn ≥ 1200 px, tabela godzin; kolory makiet) */
.v-app .v-dash{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 24px;align-items:start} /* [+] siatka sekcji: jedna kolumna, ≥ 1200 px dwie (lewa 1–3, prawa 4–8) */
@media(min-width:1200px){.v-app .v-dash{grid-template-columns:repeat(2,minmax(0,1fr))}}
.v-app .v-dash-col{min-width:0;display:grid;gap:18px} /* [+] kolumna = stos osobnych bloków */
.v-app .v-dash-section{border:1px solid var(--v-line);border-radius:8px;background:#fff;padding:0 18px} /* [+] sekcja = <details> jako osobny obramowany blok (ramka jak .v-app); open gdy licznik > 0 (bez JS) */
.v-app .v-dash-section>summary{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 -18px;padding:14px 18px;cursor:pointer;list-style:none;font-size:12px;color:var(--v-muted);background:var(--v-paper);border-radius:7px;box-shadow:inset 3px 0 0 var(--v-mint)} /* [+] nagłówek bloku wyróżniony: tło --v-paper na całą szerokość, miętowy pasek z lewej (jak .v-hero-bar), etykieta w ink */
.v-app .v-dash-section[open]>summary{border-radius:7px 7px 0 0;border-bottom:1px solid var(--v-line)}
.v-app .v-dash-section>summary::-webkit-details-marker{display:none}
.v-app .v-dash-section>summary .v-micro{font-size:12px;letter-spacing:1.4px;color:var(--v-ink);font-weight:700}
.v-app .v-dash-section>summary::after{content:"+";font-family:var(--font-display);font-size:20px;line-height:1;color:var(--v-blue);margin-left:auto} /* [+] plus / minus zamiast strzałki przeglądarki */
.v-app .v-dash-section[open]>summary::after{content:"–"}
.v-app .v-dash-section>summary .v-dash-count{white-space:nowrap;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--v-blue)}
.v-app .v-dash-section:not([open])>summary .v-dash-count{color:var(--v-muted);font-weight:500}
.v-app .v-dash-body{padding:2px 0 14px}
.v-app .v-dash-body>.v-task-list>.v-task:first-child{border-top:0} /* [+] pierwszy wiersz bez kreski – ma ją nagłówek sekcji */
.v-app .v-dash-body .v-empty{padding:0 0 6px}
.v-app .v-dash-body .v-task{min-height:64px} /* [+] wiersze zwarte jak w bloku „Najbliższe" (B5) */
.v-app .v-dash-note{margin:12px 0 0;font-size:12px;color:var(--v-muted)} /* [+] zdanie pod listą / tabelą, link „Wszystkie →" */
.v-app .v-dash-sub{margin-top:18px;padding-bottom:10px} /* [+] podtytuł drugiej listy w sekcji (Poczta: „Ostatnio otwarte") */
.v-app .v-dash-table{width:100%;border-collapse:collapse;font-size:13px} /* [+] tabela godzin firma × „16,5 / 16 h" (makiety nie mają tabeli) */
.v-app .v-dash-table th{text-align:left;font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:var(--v-muted);padding:0 0 8px;border-bottom:1px solid var(--v-line)}
.v-app .v-dash-table td{padding:10px 0;border-bottom:1px solid var(--v-line);vertical-align:middle}
.v-app .v-dash-table td a{color:var(--v-ink);text-decoration:none;font-weight:550}
.v-app .v-dash-table td a:hover{text-decoration:underline}
.v-app .v-dash-table .is-num{text-align:right;font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.v-app .v-dash-table tfoot td{border-bottom:0;font-weight:600;color:var(--v-ink)}
.v-app .v-dash-table .v-dash-over .is-num{color:#b3261e} /* [+] przekroczenie pakietu o > 10 % – sygnał do rozmowy o cenie (czerwień jak .v-task-overdue) */
@media(max-width:680px){.v-app .v-dash{gap:12px}.v-app .v-dash-col{gap:12px}.v-app .v-dash-section{padding:0 12px}.v-app .v-dash-section>summary{margin:0 -12px;padding:12px 12px}.v-app .v-dash-section>summary{flex-wrap:wrap}.v-app .v-dash-body .v-task{min-height:60px}}

/* B11 · Eksport CSV dziennika – reguły [+] */
.v-app .v-journal-export .f-frequency{grid-template-columns:repeat(2,1fr)} /* [+] „Dla mnie" / „Dla klienta" – dwie opcje w rzędzie (inline formularz aktywa z B7 ma trzy) */
@media(max-width:680px){.v-app .v-journal-export .f-frequency{grid-template-columns:1fr}} /* [+] telefon: opcje pod sobą */