/* ── Certificate Panel ───────────────────────────────────────
   areas/certificate/
   ─────────────────────────────────────────────────────────── */

/* ── Kontener strony ── */
.k2-cert-panel {
  max-width: 100%;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT 2-KOLUMNOWY
   ══════════════════════════════════════════════════════════ */
.k2-cert-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.k2-cert-form-col {
  flex: 0 0 40%;
  min-width: 0;
}

.k2-cert-log-col {
  flex: 1 1 0;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════
   NAGŁÓWEK KARTY
   ══════════════════════════════════════════════════════════ */
#k2PanelCert .k2-set-card-head {
  flex-wrap: wrap;
  gap: 8px;
}

/* ══════════════════════════════════════════════════════════
   POLA FORMULARZA
   ══════════════════════════════════════════════════════════ */
#k2PanelCert .k2-field {
  width: 100%;
}
#k2PanelCert .k2-field-inp {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   PRZYCISKI AKCJI
   ══════════════════════════════════════════════════════════ */
#k2PanelCert .k2-set-actions--inline {
  flex-wrap: wrap;
  gap: 8px;
}

/* ══════════════════════════════════════════════════════════
   FILE DROP
   ══════════════════════════════════════════════════════════ */
.k2-file-drop {
  border: 2px dashed var(--card-border, #e2e8f0);
  border-radius: var(--r-inner, 8px);
  padding: 16px 20px;
  text-align: center;
  cursor: pointer;
  font-size: .84rem;
  color: var(--tx-mid, #64748b);
  transition: border-color .15s, background .15s;
  user-select: none;
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.k2-file-drop:hover,
.k2-file-drop.drag-over {
  border-color: var(--brand, #3b82f6);
  background: var(--brand-pale, #eff6ff);
  color: var(--brand, #3b82f6);
}
.k2-file-drop.has-file {
  border-color: #10b981;
  background: #f0fdf4;
  color: #065f46;
}
.k2--dark .k2-file-drop.has-file {
  background: #052e16;
  color: #6ee7b7;
  border-color: #059669;
}

/* ══════════════════════════════════════════════════════════
   NOTICE
   ══════════════════════════════════════════════════════════ */
.k2-cert-notice {
  background: var(--brand-pale, #eff6ff);
  border: 1px solid var(--brand-lite, #bfdbfe);
  border-radius: var(--r-inner, 8px);
  padding: 10px 14px;
  font-size: .82rem;
  color: var(--tx-mid, #475569);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   PRZYCISK OUTLINE-BRAND
   ══════════════════════════════════════════════════════════ */
.k2-btn-outline-brand {
  background: transparent;
  border: 1.5px solid var(--brand, #3b82f6);
  color: var(--brand, #3b82f6);
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--r-btn, 8px);
  cursor: pointer;
  font-size: .84rem;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.k2-btn-outline-brand:hover:not(:disabled) {
  background: var(--brand-pale, #eff6ff);
}
.k2-btn-outline-brand:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.k2--dark .k2-btn-outline-brand {
  border-color: #60a5fa;
  color: #60a5fa;
}
.k2--dark .k2-btn-outline-brand:hover:not(:disabled) {
  background: rgba(96,165,250,.1);
}

/* ══════════════════════════════════════════════════════════
   PANEL LOGÓW
   ══════════════════════════════════════════════════════════ */
.k2-cert-log-panel {
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--card-border, #e2e8f0);
  border-radius: var(--r-card, 12px);
  padding: 20px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.k2-cert-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.k2-cert-log-title {
  font-weight: 700;
  font-size: .9rem;
  color: var(--tx-main, #0f172a);
}
.k2-cert-log-hint {
  font-size: .75rem;
  color: var(--tx-mid, #64748b);
  font-style: italic;
}

/* Krok logu */
.k2-cert-log-step {
  border-radius: var(--r-inner, 8px);
  overflow: hidden;
  border: 1.5px solid var(--card-border, #e2e8f0);
  transition: border-color .2s;
}
.k2-cert-log-step.is-ok  { border-color: #10b981; }
.k2-cert-log-step.is-err { border-color: #ef4444; }
.k2-cert-log-step.is-run { border-color: #f59e0b; }

.k2-cert-log-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--sidebar-bg, #f8fafc);
  font-size: .84rem;
  font-weight: 600;
  color: var(--tx-main, #0f172a);
}
.k2-cert-log-step.is-ok  .k2-cert-log-step-head { background: #f0fdf4; }
.k2-cert-log-step.is-err .k2-cert-log-step-head { background: #fff1f2; }
.k2-cert-log-step.is-run .k2-cert-log-step-head { background: #fffbeb; }

.k2-cert-log-step-indicator { font-size: 1.1rem; flex-shrink: 0; line-height: 1; }
.k2-cert-log-step-label     { flex: 1; }
.k2-cert-log-step-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.k2-cert-log-step.is-ok  .k2-cert-log-step-badge { background: #d1fae5; color: #065f46; }
.k2-cert-log-step.is-err .k2-cert-log-step-badge { background: #fee2e2; color: #991b1b; }
.k2-cert-log-step.is-run .k2-cert-log-step-badge { background: #fef3c7; color: #92400e; }

.k2-cert-log-step-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Linie logu */
.k2-cert-log-line {
  font-size: .78rem;
  font-family: 'Consolas', 'Fira Mono', monospace;
  padding: 3px 0;
  color: var(--tx-mid, #475569);
  line-height: 1.5;
  word-break: break-word;
}
.k2-cert-log-line--idle  { color: var(--tx-muted, #94a3b8); font-style: italic; font-family: inherit; }
.k2-cert-log-line--info  { color: var(--tx-mid, #475569); }
.k2-cert-log-line--ok    { color: #059669; font-weight: 600; }
.k2-cert-log-line--err   { color: #dc2626; font-weight: 600; }
.k2-cert-log-line--run   { color: #d97706; }

.k2-cert-log-line--ok::before   { content: '✔ '; }
.k2-cert-log-line--err::before  { content: '✖ '; }
.k2-cert-log-line--info::before { content: '→ '; }
.k2-cert-log-line--run::before  { content: '⏳ '; }

/* Wynik końcowy */
.k2-cert-log-result {
  border-radius: var(--r-inner, 8px);
  padding: 14px 16px;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-word;
}
.k2-cert-log-result.is-ok  { background: #f0fdf4; border: 1.5px solid #10b981; color: #065f46; }
.k2-cert-log-result.is-err { background: #fff1f2; border: 1.5px solid #ef4444; color: #991b1b; }

/* ══════════════════════════════════════════════════════════
   LISTA CERTYFIKATÓW (wiele certyfikatów per użytkownik)
   ══════════════════════════════════════════════════════════ */
.k2-cert-list { display: flex; flex-direction: column; gap: 8px; }
.k2-cert-list-empty {
  padding: 16px; text-align: center; font-size: .82rem; color: var(--tx-mid, #64748b);
  border: 1.5px dashed var(--card-border, #e2e8f0); border-radius: var(--r-inner, 8px);
}
.k2-cert-item {
  border: 1.5px solid var(--card-border, #e2e8f0); border-radius: var(--r-inner, 8px);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s;
}
.k2-cert-item.is-active { border-color: #10b981; background: #f0fdf4; }
.k2--dark .k2-cert-item.is-active { background: #052e16; border-color: #059669; }
.k2-cert-item-row { display: flex; align-items: center; gap: 10px; }
.k2-cert-item-info { flex: 1; min-width: 0; }
.k2-cert-item-name { font-weight: 700; font-size: .86rem; color: var(--tx-main, #0f172a); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.k2-cert-item-files { font-size: .74rem; color: var(--tx-mid, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k2-cert-badge-active {
  font-size: .66rem; font-weight: 800; padding: 2px 8px; border-radius: 99px;
  background: #d1fae5; color: #065f46; white-space: nowrap;
}
.k2--dark .k2-cert-badge-active { background: #052e16; color: #6ee7b7; }
.k2-cert-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.k2-cert-item-actions .k2-btn { padding: 4px 10px; font-size: .74rem; }
.k2-cert-pwd-edit { display: flex; gap: 6px; align-items: center; }
.k2-cert-pwd-edit input {
  flex: 1; min-width: 0; padding: 6px 9px; font-size: .8rem;
  border: 1.5px solid var(--card-border, #e2e8f0); border-radius: 6px;
  background: var(--card-bg, #fff); color: var(--tx-main, #0f172a);
}

/* ══════════════════════════════════════════════════════════
   DOT STATUS
   ══════════════════════════════════════════════════════════ */
.k2-cert-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}
.k2-cert-dot--ok  { background: #10b981; box-shadow: 0 0 0 2px #d1fae5; }
.k2-cert-dot--err { background: #ef4444; box-shadow: 0 0 0 2px #fee2e2; }
.k2-cert-dot--sm  { width: 6px; height: 6px; margin-left: 4px; }

.k2-cert-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-inner, 8px);
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--card-border, #e2e8f0);
  font-size: .84rem;
}
.k2-cert-status__icon { font-size: 1.4rem; flex-shrink: 0; }
.k2-cert-status__name { font-weight: 700; color: var(--tx-main, #0f172a); }
.k2-cert-status__sub  { font-size: .76rem; color: var(--tx-mid, #64748b); }

/* ══════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════ */
.k2--dark .k2-cert-log-panel {
  background: var(--card-bg, #1e293b);
  border-color: var(--card-border, #334155);
}
.k2--dark .k2-cert-log-step-head                       { background: var(--sidebar-bg, #0f172a); }
.k2--dark .k2-cert-log-step.is-ok  .k2-cert-log-step-head { background: #052e16; }
.k2--dark .k2-cert-log-step.is-err .k2-cert-log-step-head { background: #450a0a; }
.k2--dark .k2-cert-log-step.is-run .k2-cert-log-step-head { background: #3a1f00; }
.k2--dark .k2-cert-log-step.is-ok  .k2-cert-log-step-badge { background: #052e16; color: #6ee7b7; }
.k2--dark .k2-cert-log-step.is-err .k2-cert-log-step-badge { background: #450a0a; color: #fca5a5; }
.k2--dark .k2-cert-log-step.is-run .k2-cert-log-step-badge { background: #3a1f00; color: #fcd34d; }
.k2--dark .k2-cert-log-result.is-ok  { background: #052e16; border-color: #059669; color: #6ee7b7; }
.k2--dark .k2-cert-log-result.is-err { background: #450a0a; border-color: #dc2626; color: #fca5a5; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* 860px — kolumna formularza zwęża się, logi się kurczą */
@media (max-width: 860px) {
  .k2-cert-panel { max-width: 100%; }
  .k2-cert-form-col { flex: 0 0 44%; }
}

/* 700px — layout pionowy: formularz na górze, logi pod spodem */
@media (max-width: 700px) {
  .k2-cert-layout {
    flex-direction: column;
    gap: 16px;
  }
  .k2-cert-form-col,
  .k2-cert-log-col {
    flex: none;
    width: 100%;
  }
}

/* 600px — nagłówek strony i karty w kolumnie */
@media (max-width: 600px) {
  #k2PanelCert .k2-set-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  #k2PanelCert .k2-set-header .k2-btn {
    align-self: flex-start;
  }
  #k2PanelCert .k2-set-card-head {
    flex-direction: column;
    align-items: flex-start;
  }
  #k2PanelCert .k2-set-card-head .k2-btn {
    margin-left: 0 !important;
  }
}

/* 480px — przyciski akcji każdy w osobnej linii */
@media (max-width: 480px) {
  #k2PanelCert .k2-set-actions--inline {
    flex-direction: column;
    gap: 8px;
  }
  #k2PanelCert .k2-set-actions--inline .k2-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}