/* Raport obsługi — formularz 8 kroków (dark UI, design language 1:1 z Audytem sklepu).
 * Scoped pod #tab-raport-obslugi — nie kolidować z innymi zakładkami.
 * GOTCHA (handover 4i #15): NIE ustawiać `display` na #tab-raport-obslugi{} — bije
 *   globalne .tab-content{display:none}.
 */

#tab-raport-obslugi {
  --ro-bg:#121418;
  --ro-surface:#1A1D24;
  --ro-surface-2:#22262F;
  --ro-surface-3:#2B3038;
  --ro-text:#F4F4F5;
  --ro-text-2:#B3B7BE;
  --ro-text-3:#7C8089;
  --ro-rule:rgba(255,255,255,.06);
  --ro-rule-2:rgba(255,255,255,.10);
  --ro-vr:#E6332A;
  --ro-vr-2:#B5261F;
  --ro-vr-bg:rgba(230,51,42,.12);
  --ro-green:#1A6B3C;
  --ro-green-bg:rgba(26,107,60,.15);
  --ro-amber:#B56B00;
  --ro-amber-bg:rgba(181,107,0,.15);
  --ro-font:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  font-family:var(--ro-font);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'tnum' 1;
  background:var(--ro-bg);
  color:var(--ro-text);
  min-height:100vh;
}
#tab-raport-obslugi *{box-sizing:border-box;}
#tab-raport-obslugi :focus-visible{outline:2px solid var(--ro-vr);outline-offset:2px;border-radius:4px;}

#tab-raport-obslugi .ro-wrap{display:flex;justify-content:center;padding:30px 20px 80px;}
#tab-raport-obslugi .ro-card{width:100%;max-width:760px;background:var(--ro-surface);border:1px solid var(--ro-rule-2);border-radius:14px;padding:40px 44px 34px;}
#tab-raport-obslugi .ro-eyebrow{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--ro-vr);}
#tab-raport-obslugi .ro-card h1{font-weight:800;font-size:32px;letter-spacing:-.025em;line-height:1.1;margin:12px 0 0;color:var(--ro-text);}
#tab-raport-obslugi .ro-card h1 em{font-style:normal;color:var(--ro-vr);}
#tab-raport-obslugi .ro-sub{color:var(--ro-text-2);font-size:13px;line-height:1.6;margin-top:12px;max-width:62ch;}

#tab-raport-obslugi .ro-step{margin-top:28px;}
#tab-raport-obslugi .ro-step-lbl{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ro-text-3);margin-bottom:11px;}
#tab-raport-obslugi .ro-step-lbl .n{width:20px;height:20px;border-radius:6px;background:var(--ro-vr-bg);color:var(--ro-vr);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none;}
#tab-raport-obslugi .ro-step-lbl .opt{margin-left:auto;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ro-text-3);font-size:11px;}

#tab-raport-obslugi .ro-input,#tab-raport-obslugi .ro-textarea,#tab-raport-obslugi .ro-select{width:100%;background:var(--ro-surface-2);border:1px solid var(--ro-rule-2);border-radius:8px;color:var(--ro-text);font-family:var(--ro-font);font-size:14px;padding:11px 14px;transition:border-color .16s,box-shadow .16s;}
#tab-raport-obslugi .ro-input:focus,#tab-raport-obslugi .ro-textarea:focus,#tab-raport-obslugi .ro-select:focus{outline:none;border-color:var(--ro-vr);box-shadow:0 0 0 3px var(--ro-vr-bg);}
#tab-raport-obslugi .ro-input::placeholder,#tab-raport-obslugi .ro-textarea::placeholder{color:var(--ro-text-3);}
#tab-raport-obslugi .ro-textarea{resize:vertical;min-height:96px;line-height:1.55;}
#tab-raport-obslugi .ro-textarea.mono{font-family:'JetBrains Mono',Consolas,monospace;font-size:12.5px;}
#tab-raport-obslugi .ro-select{appearance:auto;cursor:pointer;}
#tab-raport-obslugi .ro-select option{background:var(--ro-surface-2);color:var(--ro-text);}

#tab-raport-obslugi .ro-hint{font-size:11.5px;color:var(--ro-text-3);margin-top:8px;line-height:1.5;}
#tab-raport-obslugi .ro-hint.warn{color:#f0b429;}
#tab-raport-obslugi .ro-hint.err{color:var(--ro-vr);}
#tab-raport-obslugi .ro-hint.ok{color:#4ade80;}

/* toggle klient spoza panelu */
#tab-raport-obslugi .ro-toggle{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:12.5px;color:var(--ro-text-2);cursor:pointer;user-select:none;}
#tab-raport-obslugi .ro-toggle input{accent-color:var(--ro-vr);width:15px;height:15px;cursor:pointer;}

/* godziny per miesiąc (miesiące auto z kalendarza — tylko odczyt) */
#tab-raport-obslugi .ro-hours-row{display:flex;gap:10px;margin-bottom:8px;align-items:center;}
#tab-raport-obslugi .ro-month-lbl{flex:2;font-size:13.5px;font-weight:600;color:var(--ro-text-2);padding:0 2px;}
#tab-raport-obslugi .ro-hours-row .ro-input.h{flex:1;max-width:150px;}
#tab-raport-obslugi .ro-hours-row .ro-input.h.empty{border-color:rgba(230,51,42,.4);}
#tab-raport-obslugi .ro-row-x{flex:none;background:none;border:0;color:var(--ro-text-3);cursor:pointer;padding:7px;border-radius:6px;display:flex;}
#tab-raport-obslugi .ro-row-x:hover{color:var(--ro-vr);background:var(--ro-vr-bg);}
#tab-raport-obslugi .ro-add-btn{display:inline-flex;align-items:center;gap:7px;background:var(--ro-surface-2);border:1px solid var(--ro-rule-2);border-radius:8px;color:var(--ro-text-2);font-family:var(--ro-font);font-size:12.5px;font-weight:600;padding:8px 14px;cursor:pointer;transition:border-color .16s,color .16s;}
#tab-raport-obslugi .ro-add-btn:hover{border-color:var(--ro-vr);color:var(--ro-text);}
#tab-raport-obslugi .ro-suma{margin-top:10px;font-size:13px;color:var(--ro-text-2);}
#tab-raport-obslugi .ro-suma b{color:var(--ro-text);font-weight:800;}

/* checklista zadań pakietu (zakres prac) */
#tab-raport-obslugi .ro-checks{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
#tab-raport-obslugi .ro-check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.4;color:var(--ro-text-2);cursor:pointer;padding:9px 11px;background:var(--ro-surface-2);border:1px solid var(--ro-rule-2);border-radius:8px;user-select:none;transition:border-color .14s,background .14s;}
#tab-raport-obslugi .ro-check:hover{border-color:var(--ro-vr);}
#tab-raport-obslugi .ro-check.on{border-color:rgba(230,51,42,.45);background:var(--ro-vr-bg);color:var(--ro-text);}
#tab-raport-obslugi .ro-check input{accent-color:var(--ro-vr);width:14px;height:14px;margin-top:2px;flex:none;cursor:pointer;}
#tab-raport-obslugi .ro-check b{font-weight:700;}
#tab-raport-obslugi .ro-check .d{color:var(--ro-text-3);font-size:11.5px;}

/* etykiety slotów PRZED/PO w przykładzie oferty */
#tab-raport-obslugi .ro-slot-lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ro-text-3);margin:12px 0 6px;}
#tab-raport-obslugi .ro-slot-lbl.po{color:var(--ro-vr);}

/* przycisk weryfikacji ID */
#tab-raport-obslugi .ro-fetch-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ro-vr-bg);border:1px solid rgba(230,51,42,.3);border-radius:8px;color:var(--ro-text);font-family:var(--ro-font);font-size:12.5px;font-weight:700;padding:9px 15px;cursor:pointer;margin-bottom:10px;transition:background .16s;}
#tab-raport-obslugi .ro-fetch-btn:hover:not(:disabled){background:rgba(230,51,42,.22);}
#tab-raport-obslugi .ro-fetch-btn:disabled{opacity:.45;cursor:default;}
#tab-raport-obslugi .ro-spin{width:13px;height:13px;border:2px solid var(--ro-surface-3);border-top-color:var(--ro-vr);border-radius:50%;animation:rospin .7s linear infinite;flex:none;}
@keyframes rospin{to{transform:rotate(360deg);}}

/* grupy screenów */
#tab-raport-obslugi .ro-group{background:var(--ro-surface-2);border:1px solid var(--ro-rule-2);border-radius:10px;padding:16px;margin-bottom:12px;}
#tab-raport-obslugi .ro-group-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
#tab-raport-obslugi .ro-group-hd .t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ro-text-3);}
#tab-raport-obslugi .ro-group-hd .x{margin-left:auto;}
#tab-raport-obslugi .ro-group .ro-input{margin-bottom:8px;font-size:13px;padding:9px 12px;}
#tab-raport-obslugi .ro-group-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#tab-raport-obslugi .ro-drop{display:block;border:1.5px dashed var(--ro-rule-2);border-radius:8px;padding:16px;text-align:center;cursor:pointer;transition:border-color .16s,background .16s;margin-top:4px;}
#tab-raport-obslugi .ro-drop:hover,#tab-raport-obslugi .ro-drop.drag{border-color:var(--ro-vr);background:var(--ro-vr-bg);}
#tab-raport-obslugi .ro-drop .t{font-size:12.5px;color:var(--ro-text-2);}
#tab-raport-obslugi .ro-drop .t b{font-weight:700;color:var(--ro-text);}
#tab-raport-obslugi .ro-files{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
#tab-raport-obslugi .ro-filechip{display:inline-flex;align-items:center;gap:8px;background:var(--ro-green-bg);border:1px solid rgba(26,107,60,.4);border-radius:999px;padding:4px 6px 4px 11px;font-size:11.5px;color:var(--ro-text);max-width:100%;}
#tab-raport-obslugi .ro-filechip .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
#tab-raport-obslugi .ro-filechip .sz{color:var(--ro-text-3);flex:none;}
#tab-raport-obslugi .ro-filechip .x{display:flex;width:16px;height:16px;border-radius:50%;background:rgba(230,51,42,.18);color:var(--ro-vr);border:0;cursor:pointer;align-items:center;justify-content:center;flex:none;}
#tab-raport-obslugi .ro-filechip .x:hover{background:var(--ro-vr);color:#fff;}

/* CTA + błędy */
#tab-raport-obslugi .ro-cta{width:100%;margin-top:26px;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--ro-font);font-size:15px;font-weight:700;border:0;border-radius:9px;cursor:pointer;padding:14px;background:var(--ro-vr);color:#fff;transition:background .16s,transform 80ms;}
#tab-raport-obslugi .ro-cta:hover:not(:disabled){background:var(--ro-vr-2);}
#tab-raport-obslugi .ro-cta:active:not(:disabled){transform:scale(.99);}
#tab-raport-obslugi .ro-cta:disabled{opacity:.4;cursor:default;}
#tab-raport-obslugi .ro-note{font-size:11px;color:var(--ro-text-3);text-align:center;margin-top:16px;line-height:1.5;}
#tab-raport-obslugi .ro-errbox{margin-top:18px;background:var(--ro-vr-bg);border:1px solid rgba(230,51,42,.35);border-radius:10px;padding:14px 16px;}
#tab-raport-obslugi .ro-errbox .t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ro-vr);margin-bottom:8px;}
#tab-raport-obslugi .ro-errbox ul{margin:0;padding-left:18px;}
#tab-raport-obslugi .ro-errbox li{font-size:12.5px;color:var(--ro-text);margin-bottom:4px;line-height:1.45;}
#tab-raport-obslugi .ro-okbox{margin-top:18px;background:var(--ro-green-bg);border:1px solid rgba(26,107,60,.4);border-radius:10px;padding:14px 16px;font-size:13px;color:var(--ro-text);}

/* panel „czego brakuje do wygenerowania" */
#tab-raport-obslugi .ro-braki{margin-top:22px;background:var(--ro-amber-bg);border:1px solid rgba(181,107,0,.45);border-radius:10px;padding:14px 16px;}
#tab-raport-obslugi .ro-braki .t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#f0b429;margin-bottom:8px;}
#tab-raport-obslugi .ro-braki ul{margin:0;padding-left:18px;}
#tab-raport-obslugi .ro-braki li{font-size:12.5px;color:var(--ro-text);margin-bottom:4px;line-height:1.45;}

/* animowany pasek „coś się dzieje w tle" (render PDF / draft) */
#tab-raport-obslugi .ro-progress{height:4px;border-radius:999px;background:var(--ro-surface-3);overflow:hidden;margin-top:12px;position:relative;}
#tab-raport-obslugi .ro-progress::before{content:'';position:absolute;top:0;bottom:0;left:-40%;width:40%;background:var(--ro-vr);border-radius:999px;animation:roIndet 1.1s ease-in-out infinite;}
@keyframes roIndet{0%{left:-40%}50%{left:55%}100%{left:100%}}

/* sekcja wysyłki draftu Gmail */
#tab-raport-obslugi .ro-send{margin-top:22px;padding-top:20px;border-top:1px solid var(--ro-rule-2);}
#tab-raport-obslugi .ro-send-lbl{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ro-text-3);margin-bottom:11px;}
#tab-raport-obslugi .ro-send-lbl .opt{margin-left:auto;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ro-text-3);font-size:11px;}
#tab-raport-obslugi .ro-send-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;}
#tab-raport-obslugi .ro-send-row .ro-input{flex:1;min-width:220px;}
#tab-raport-obslugi .ro-cta.ghost{width:auto;margin-top:0;padding:0 22px;background:transparent;border:1.5px solid var(--ro-vr);color:var(--ro-vr);white-space:nowrap;}
#tab-raport-obslugi .ro-cta.ghost:hover:not(:disabled){background:var(--ro-vr-bg);}
#tab-raport-obslugi .ro-cta.ghost .ro-spin{border-top-color:var(--ro-vr);}