/*
 * This stylesheet contains all of the visual rules originally defined
 * inline in the index.html.  It is separated into its own file so
 * that Cloudflare Pages and other static hosting providers can cache
 * it effectively.  The variables defined on :root allow light/dark
 * theming and are used throughout the layout.  Additional styles for
 * the authentication forms are appended at the end.
 */

:root{
  --font-system:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --bg-body:#f0f0f0; --bg-window:rgba(255,255,255,.85);
  --bg-control:#e8e8e8; --bg-control-hover:#ddd;
  --bg-drop-area:rgba(0,0,0,.03); --bg-drop-area-hover:rgba(0,0,0,.06);
  --text-primary:#1d1d1f; --text-secondary:#6e6e73; --text-on-accent:#fff;
  --border-color:#d1d1d6; --accent-color:#007aff;
  --success-color:#34c759; --error-color:#ff3b30; --warning-color:#ff9500;
  --shadow-color:rgba(0,0,0,.12);
  --radius-large:18px; --radius-medium:12px; --radius-small:8px;
}
html.dark-theme{
  --bg-body:#1d1d1f; --bg-window:rgba(45,45,45,.8);
  --bg-control:#3a3a3c; --bg-control-hover:#4f4f52;
  --bg-drop-area:rgba(255,255,255,.05); --bg-drop-area-hover:rgba(255,255,255,.1);
  --text-primary:#f5f5f7; --text-secondary:#8e8e93;
  --border-color:#545458; --shadow-color:rgba(0,0,0,.3);
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-system);
  background-color:var(--bg-body);
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:2rem;transition:background-color .3s;
}
@keyframes window-entry{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}

.app-window{
  width:100%;max-width:800px;background-color:var(--bg-window);
  border-radius:var(--radius-large);border:1px solid var(--border-color);
  box-shadow:0 10px 30px var(--shadow-color);
  backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
  padding:28px;display:flex;flex-direction:column;gap:20px;color:var(--text-primary);
  transition:all .3s;position:relative;animation:window-entry .5s cubic-bezier(.4,0,.2,1) forwards;
  isolation:isolate; 
  z-index:2;
}



.theme-switcher{position:absolute;top:20px;right:20px;display:flex;align-items:center;background:var(--bg-control);border-radius:var(--radius-small);padding:4px}
.theme-switcher button{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:6px}
.theme-switcher button.active{background-color:var(--bg-window)}
.theme-switcher svg{width:18px;height:18px;color:var(--text-secondary)}
.theme-switcher button.active svg{color:var(--text-primary)}

.app-header{text-align:center}
.app-header h1{font-size:1.5rem;font-weight:600;margin-bottom:16px}
.app-header h1 span{font-weight:400;color:var(--text-secondary)}

.control-panel{display:flex;justify-content:center;align-items:center}
.segmented-control{display:inline-flex;background:var(--bg-control);border-radius:var(--radius-small);padding:4px;position:relative;align-items:center}
.segmented-control .highlight{position:absolute;top:4px;bottom:4px;background:var(--accent-color);border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.1);transition:left .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}
.segmented-control input{display:none}
.segmented-control label{padding:6px 16px;font-size:.9rem;font-weight:500;cursor:pointer;z-index:1;color:var(--text-secondary);transition:color .2s;user-select:none}
.segmented-control input:checked + label{color:var(--text-on-accent)}
.segmented-control #resetBtn{background:none;border:none;border-left:1px solid var(--border-color);margin-left:8px;padding:6px 12px;height:auto;line-height:1;cursor:pointer;display:flex;z-index:1;border-radius:0}
.segmented-control #resetBtn:hover svg{color:var(--text-primary)}
.segmented-control #resetBtn svg{width:16px;height:16px;color:var(--text-secondary);transition:color .2s}

.hint-container{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;margin-bottom: 12px;}
.hint-container svg{width:16px;height:16px;color:var(--accent-color);flex-shrink:0}
.contextual-hint{font-size:.8rem;color:var(--text-secondary);min-height:1.2em;transition:opacity .3s}
.contextual-hint.fade-out{opacity:0}

.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.drop-area{
  background:var(--bg-drop-area);border:2px solid var(--border-color);
  border-radius:var(--radius-medium);padding:1rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-height:200px;position:relative;
}

.drop-area.loaded{border-color:var(--accent-color);box-shadow:0 0 8px rgba(0,122,255,.25)}
.drop-area.valid{border-color:var(--success-color)}
.drop-area.warning{border-color:var(--warning-color)}
.drop-area.error{border-color:var(--error-color)}
.drop-area .reset-file-btn{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--bg-control);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:2;transition:background-color .2s}
.drop-area .reset-file-btn:hover{background:var(--bg-control-hover)}
.drop-area .reset-file-btn svg{width:14px;height:14px;color:var(--text-secondary)}
.drop-area.loaded .reset-file-btn{display:flex}
.drop-area:hover{transform:scale(1.02);background:var(--bg-drop-area-hover)}
.drop-area.dragover{transform:scale(1.03);border-color:var(--accent-color);background:rgba(0,122,255,.1);box-shadow:0 0 0 4px rgba(0,122,255,.2)}
.drop-icon-wrapper{position:relative;width:48px;height:48px;margin-bottom:12px}
.drop-icon{position:absolute;top:0;left:0;width:48px;height:48px;color:var(--text-secondary);transition:all .25s ease-out}
.drop-icon.check-icon{transform:scale(.5);opacity:0;color:var(--success-color)}
.drop-area.loaded .upload-icon{transform:scale(.5);opacity:0}
.drop-area.loaded .check-icon{transform:scale(1);opacity:1}
.drop-area-title{font-weight:600;font-size:1rem}
.drop-area-text{font-size:.8rem;color:var(--text-secondary);margin-top:4px;word-break:break-all}
.drop-area.loaded .drop-area-title{color:var(--success-color)}

.file-details{margin-top:10px;width:90%;font-size:.75rem;color:var(--text-secondary)}
.file-details select{width:100%;padding:4px;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-control);color:var(--text-primary);margin-top:4px}
.last-used-info{display:flex;flex-direction:column;align-items:center;gap:4px}
.last-used-info button{background:none;border:none;color:var(--accent-color);cursor:pointer;padding:0;text-decoration:underline}

.actions{display:none;justify-content:center;flex-direction:column;align-items:center;gap:10px}
.actions.visible{display:flex}
.actions{ gap:10px; margin-bottom: 6px; }

.progress-bar{width:100%;max-width:450px;height:4px;background:var(--bg-control);border-radius:2px;overflow:hidden;display:none}
.progress-bar.visible{display:block}
.progress-bar-inner{width:100%;height:100%;background:var(--accent-color);transform-origin:left;animation:progress-indeterminate 1.5s infinite cubic-bezier(.4,0,.2,1)}
@keyframes progress-indeterminate{0%{transform:translateX(-100%) scaleX(.1)}50%{transform:translateX(0) scaleX(.8)}100%{transform:translateX(100%) scaleX(.1)}}

.btn{padding:12px 20px;border-radius:var(--radius-small);font-size:1rem;font-weight:600;border:none;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.btn-primary{flex-grow:1;max-width:450px;width:100%;background:var(--accent-color);color:var(--text-on-accent)}
.btn-primary:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,122,255,.3)}
.btn-primary:disabled{background:var(--bg-control);color:var(--text-secondary);cursor:not-allowed;box-shadow:none;transform:none}
@keyframes pulse-attention{0%{transform:scale(1);box-shadow:0 4px 12px rgba(0,122,255,.3)}50%{transform:scale(1.03);box-shadow:0 6px 16px rgba(0,122,255,.4)}100%{transform:scale(1);box-shadow:0 4px 12px rgba(0,122,255,.3)}}
.btn-primary.attention{animation:pulse-attention 1.5s infinite cubic-bezier(.4,0,.2,1)}

.results-area{
  background:var(--bg-control);
  border-radius:var(--radius-medium);
  padding:12px 16px;
  font-family:var(--font-mono);
  font-size:.8rem;
  max-height:200px;
  overflow-y:auto;
  display:none;

  /* NOWE: spacing */
  margin-top: 14px;      /* odstęp od przycisku "Wygeneruj" */
  margin-bottom: 14px;   /* odstęp od stopki */
}
.results-area.visible{ display:block; }

@keyframes slide-in-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.log-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:8px 0;animation:slide-in-fade .3s ease-out;border-bottom:1px solid var(--border-color)}
.log-item:last-child{border-bottom:none}
.log-header{display:flex;align-items:center;gap:8px}
.log-ts{opacity:.5}
.log-icon{font-size:1.1em}
.log-actions{margin-top:8px;display:flex;gap:8px}
.log-btn{font-size:.75rem;padding:4px 10px;border-radius:var(--radius-small);background:var(--bg-control-hover);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;transition:background-color .2s}
.log-btn:hover{background:var(--bg-window)}

.app-footer{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--text-secondary)}
.stats{display:flex;gap:16px}

#toast-container{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;gap:12px;pointer-events:none}
.toast{pointer-events:auto;padding:12px 16px;border-radius:var(--radius-medium);font-size:.9rem;background:var(--bg-window);color:var(--text-primary);border:1px solid var(--border-color);box-shadow:var(--shadow-color);opacity:0;transform:translateY(-20px);animation:toast-in .3s cubic-bezier(.25,1,.5,1) forwards;display:flex;align-items:center;gap:10px;min-width:250px}
.toast::before{content:'';width:4px;height:24px;border-radius:2px}
.toast.success::before{background:var(--success-color)}
.toast.error::before{background:var(--error-color)}
.toast.info::before{background:var(--accent-color)}
.toast.warning::before{background:var(--warning-color)}
@keyframes toast-in{to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{to{opacity:0;transform:translateY(-20px)}}

/* Panel list/konfliktów */
#missingPanelOverlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:9999;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(5px)}
#missingPanel{width:min(560px,90vw);background:var(--bg-window);color:var(--text-primary);border-radius:var(--radius-large);padding:20px;box-shadow:0 10px 30px var(--shadow-color);border:1px solid var(--border-color);animation:window-entry .3s cubic-bezier(.4,0,.2,1) forwards}
#missingPanel h3{margin:0 0 8px 0;font-size:1.1rem;font-weight:600}
#missingPanel p{opacity:.85;margin:0 0 12px 0;font-size:.9rem}
#missingTextarea{width:100%;height:160px;border-radius:var(--radius-medium);border:1px solid var(--border-color);padding:10px;background:var(--bg-drop-area);color:inherit;resize:vertical;font-family:var(--font-mono)}
#missingPanel .row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
#missingPanel button{padding:8px 14px;border:none;border-radius:var(--radius-small);cursor:pointer;font-weight:600;transition:all .2s}
#missingPanel button:hover{transform:translateY(-1px);filter:brightness(1.1)}
#btnCopy{background:var(--accent-color);color:var(--text-on-accent)}
#btnDownload{background:var(--bg-control-hover);color:var(--text-primary)}
#btnClose{background:transparent;color:inherit;border:1px solid var(--border-color)}

#stageProgress{
  position:absolute;
  top:-3px;
  right:28px;
  left:28px;
  height:2px;
  border-radius:999px;
  background:var(--bg-control);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  transition:opacity .25s ease;
  opacity:0;
  z-index:3;
}
#stageProgress.visible{ opacity:1; }
#stageProgress .bar{
  width:100%; height:100%;
  border-radius:inherit;
  background: linear-gradient(to right, var(--accent-color), rgba(0,122,255,.6));
  box-shadow: 0 0 8px rgba(0,122,255,.35);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .35s ease;
}

/* ===================== AUTH STYLES ===================== */

.auth-window{ max-width:420px; margin:0 auto; }

.auth-container{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; margin-bottom:1rem; width:100%;
}

/* Zakładki auth – taki sam „pill” jak CETAR/CIM/SMGS */
.auth-tabs{
  margin: 6px auto 18px;
}

/* ukryj ewentualny niebieski "fill" jeśli masz .highlight w HTML */
.auth-tabs .highlight{ display:none; }

.auth-tabs label{
  padding: 8px 18px;
  border-radius: 8px;
  position: relative;
  transition: color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* AKTYWNA zakładka: niebieska ramka (outline), tło pozostaje szare) */
.auth-tabs input:checked + label{
  color: var(--text-on-accent);
  background: var(--accent-color);
  box-shadow: none;
}

/* lepszy feedback na hoverze/focusie */
.auth-tabs label:hover{
  box-shadow: inset 0 0 0 2px rgba(0,122,255,.35);
}
.auth-tabs input:focus-visible + label{
  box-shadow: inset 0 0 0 2px var(--accent-color), 0 0 0 3px rgba(0,122,255,.2);
}


/* Formularze jako panele */
.auth-form{ display:flex; flex-direction:column; gap:12px; }

/* Floating labels */
.input-group{ position:relative; }
.input-group input{
  width:100%; height:48px; padding:14px 42px 14px 12px;
  border-radius:var(--radius-small); border:1px solid var(--border-color);
  background:var(--bg-window); color:var(--text-primary);
  font-family:var(--font-system); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.input-group:focus-within input{
  border-color:var(--accent-color);
  box-shadow:0 0 0 3px rgba(0,122,255,.15);
  background:var(--bg-window);
}
.input-group label{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--text-secondary); pointer-events:none; transition:all .15s ease;
  padding:0 4px; background:transparent;
}
.input-group input::placeholder{ color:transparent; }
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label{
  top:-8px; font-size:.75rem; background:var(--bg-window);
  color:var(--text-primary); border-radius:4px;
}

/* Pokaż/ukryj hasło – SVG, light/dark */
.input-group.with-toggle .pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; border-radius:8px;
  background:var(--bg-control); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.input-group.with-toggle .pw-toggle::before{
  content:""; width:18px; height:18px; background-repeat:no-repeat; background-position:center; background-size:18px 18px;
  /* eye (light) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
html.dark-theme .input-group.with-toggle .pw-toggle::before{
  /* eye (dark) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.input-group.with-toggle .pw-toggle.active::before{
  /* eye-off (light) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E");
}
html.dark-theme .input-group.with-toggle .pw-toggle.active::before{
  /* eye-off (dark) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E");
}

/* Minimalny fallback */
.auth-container form{
  background:var(--bg-window);
  padding:16px;
  border-radius:var(--radius-medium);
  border:1px solid var(--border-color);
  width:100%;
  max-width:360px;
}
.auth-container input{
  height:46px; padding:12px;
  border:1px solid var(--border-color); border-radius:var(--radius-small);
  background:var(--bg-control); color:var(--text-primary);
  font-family:var(--font-system);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.auth-container input:focus{
  border-color:var(--accent-color);
  box-shadow:0 0 0 3px rgba(0,122,255,.15);
  background:var(--bg-window);
}
.auth-container button{
  height:46px; border-radius:var(--radius-small); border:none;
  background:var(--accent-color); color:var(--text-on-accent);
  cursor:pointer; font-weight:600;
  transition:filter .2s ease, transform .1s ease, box-shadow .2s ease;
}
.auth-container button:hover{ filter:brightness(1.06); }
.auth-container button:active{ transform:translateY(1px); }

.auth-error{ color:var(--error-color); font-size:.9rem; min-height:1.2em; }

.auth-row{ display:flex; justify-content:flex-end; }
.auth-row a{ font-size:.9rem; color:var(--accent-color); text-decoration:underline; }

@media (max-width: 720px){
  .app-window{ min-height: 520px; padding-bottom: 16px; }
  .results-area{ margin-top: 12px; margin-bottom: 12px; }
}

/* Jedno okno naraz */
body.authenticated #auth-container{ display:none !important; }
body.authenticated #appWindow{ display:block !important; }
body:not(.authenticated) #auth-container{ display:flex !important; }
body:not(.authenticated) #appWindow{ display:none !important; }

/* Szanuj hidden */
[hidden]{ display:none !important; }


.content-grid{
  margin-bottom: 20px;  /* Zwiększenie odstępu między drop zone a kontrolkami (Sesja, Ogółem) */
}
/* === Przestrzeń od końca kontenera do stopki === */
.app-window{
  padding-bottom: 30px;   /* Większy odstęp na dole, by nie było za ciasno */
}