/* ============================================================
   Dokumenter (fasens dokumentområde), pdoc-* klasser.
   docs/custom-phase-design.md, afsnit 2. Bygger på k-* komponenterne
   (k-page-header, k-kpi-grid, k-toolbar, k-table, k-modal).
   ============================================================ */

.pdoc-page {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.pdoc-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pdoc-actions .k-btn,
.pdoc-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pdoc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.pdoc-toolbar .k-search { flex: 1 1 260px; }

/* ---------- tabel ---------- */

.pdoc-grp td {
    background: var(--k-bg-alt);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--k-ink-soft);
    padding: 0.55rem 1rem;
}

.pdoc-grp-count {
    color: var(--k-muted);
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.pdoc-grp-off {
    color: var(--k-muted);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin-left: 0.35rem;
}

.pdoc-doc {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.pdoc-doc-title {
    font-weight: 600;
    color: var(--k-ink);
    text-decoration: none;
}

.pdoc-doc-title:hover { color: var(--k-accent-strong); }

.pdoc-file {
    width: 32px;
    height: 38px;
    border-radius: 6px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    box-sizing: border-box;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex: none;
    border: 1px solid var(--k-line);
    background: var(--k-fill);
    color: var(--k-ink-soft);
}

.pdoc-file--word  { background: var(--k-accent-tint); color: var(--k-accent-strong); border-color: var(--k-accent-border); }
.pdoc-file--sheet { background: var(--k-success-bg);  color: var(--k-success);       border-color: var(--k-success-border); }
.pdoc-file--pdf   { background: var(--k-danger-bg);   color: var(--k-danger);        border-color: var(--k-danger-border); }

.pdoc-sub {
    font-size: 0.76rem;
    color: var(--k-muted);
}

.pdoc-sub--lock { color: var(--k-warning); }

.pdoc-who {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    color: var(--k-ink-soft);
    white-space: nowrap;
}

.pdoc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.6rem;
    border-radius: var(--k-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--k-line);
    background: var(--k-fill);
    color: var(--k-ink-soft);
}

.pdoc-pill--review   { background: var(--k-warning-bg); color: var(--k-warning); border-color: var(--k-warning-border); }
.pdoc-pill--approval { background: var(--k-accent-tint); color: var(--k-accent-strong); border-color: var(--k-accent-border); }
.pdoc-pill--approved { background: var(--k-success-bg); color: var(--k-success); border-color: var(--k-success-border); }

.pdoc-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
}

.pdoc-icon-btn {
    border: none;
    background: transparent;
    color: var(--k-muted);
    width: 30px;
    height: 30px;
    border-radius: var(--k-radius-sm, 6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.pdoc-icon-btn:hover:not(:disabled) { background: var(--k-fill); color: var(--k-ink); }
.pdoc-icon-btn--danger:hover:not(:disabled) { color: var(--k-danger); }
.pdoc-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.pdoc-none {
    padding: 1.4rem 1rem;
    text-align: center;
    color: var(--k-muted);
    font-size: 0.86rem;
}

/* ---------- træk og slip ---------- */

.pdoc-drop {
    position: relative;
    border: 1px dashed var(--k-line);
    border-radius: var(--k-radius-lg);
    padding: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--k-muted);
    font-size: 0.86rem;
    background: var(--k-surface);
    transition: border-color 120ms, background 120ms;
}

.pdoc-drop--big { padding: 2.4rem 1rem; flex-direction: column; }
.pdoc-drop--big .bi { font-size: 1.6rem; }

.pdoc-drop:hover,
.pdoc-drop--over {
    border-color: var(--k-accent);
    background: var(--k-accent-tint);
    color: var(--k-accent-strong);
}

.pdoc-drop-link { color: var(--k-accent); font-weight: 600; }

/* Selve filfeltet dækker hele zonen, så både klik og slip rammer det */
.pdoc-drop input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ---------- modaler ---------- */

.pdoc-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
.pdoc-field label { font-size: 0.8rem; font-weight: 600; color: var(--k-ink-soft); }
.pdoc-hint { font-size: 0.76rem; color: var(--k-muted); }

.pdoc-files {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pdoc-files li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-md, 8px);
    background: var(--k-surface);
}

.pdoc-files .form-control { flex: 1 1 auto; }
.pdoc-files .pdoc-sub { white-space: nowrap; }

.pdoc-tpl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-md, 8px);
}

.pdoc-tpl {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid var(--k-line);
    cursor: pointer;
}

.pdoc-tpl:last-child { border-bottom: none; }
.pdoc-tpl:hover { background: var(--k-fill); }
.pdoc-tpl--on { background: var(--k-accent-tint); }
.pdoc-tpl input { margin-top: 0.25rem; }
.pdoc-tpl-name { font-weight: 600; color: var(--k-ink); }

.pdoc-cats {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pdoc-cat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-md, 8px);
    background: var(--k-surface);
}

.pdoc-cat--off { background: var(--k-fill); }
.pdoc-cat--off .pdoc-cat-name { color: var(--k-muted); text-decoration: line-through; }
.pdoc-cat-name { flex: 1 1 auto; font-weight: 600; color: var(--k-ink); }
.pdoc-cat .form-control { flex: 1 1 auto; }

.pdoc-add {
    display: flex;
    gap: 0.5rem;
}

.pdoc-add .form-control { flex: 1 1 auto; }

/* ============================================================
   Dokumentets side (pdd-*), C5
   ============================================================ */

.pdoc-checkin { position: relative; overflow: hidden; }

.pdoc-checkin input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ---------- forløb ---------- */

.pdd-steps {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.pdd-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 160px;
    min-width: 0;
}

.pdd-step--last { flex: 0 0 auto; }

.pdd-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex: none;
    border: 1.5px solid var(--k-line);
    background: var(--k-surface);
    color: var(--k-muted);
}

.pdd-dot--done { background: var(--k-success); border-color: var(--k-success); color: #fff; }
.pdd-dot--now  { background: var(--k-accent-tint); border-color: var(--k-accent); color: var(--k-accent-strong); }

.pdd-step-text { min-width: 0; }
.pdd-step-name { font-size: 0.86rem; font-weight: 600; color: var(--k-ink); }
.pdd-step-meta { font-size: 0.74rem; color: var(--k-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pdd-line {
    flex: 1;
    height: 2px;
    min-width: 18px;
    border-radius: 2px;
    background: var(--k-line);
}

.pdd-line--done { background: var(--k-success); }

/* ---------- kolonner ---------- */

.pdd-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    align-items: flex-start;
}

.pdd-main {
    flex: 999 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.pdd-side {
    flex: 1 1 280px;
    max-width: 360px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

@media (max-width: 860px) {
    .pdd-side { max-width: none; }
}

.pdd-card { padding: 1.1rem 1.25rem; }

.pdd-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.pdd-card-head .k-card-title { margin: 0; }

.pdd-empty { margin: 0.4rem 0 0; }
.pdd-note { margin: 0.6rem 0 0; }

/* ---------- handlingspanel ---------- */

.pdd-panel {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.pdd-panel--accent  { border-color: var(--k-accent-border); }
.pdd-panel--warn    { border-color: var(--k-warning-border); }
.pdd-panel--success { border-color: var(--k-success-border); }

.pdd-panel-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.pdd-panel-head .k-card-title { margin: 0; }

.pdd-panel-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--k-radius-md);
    background: var(--k-accent-tint);
    color: var(--k-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pdd-panel--warn .pdd-panel-icon    { background: var(--k-warning-bg); color: var(--k-warning); }
.pdd-panel--success .pdd-panel-icon { background: var(--k-success-bg); color: var(--k-success); }

.pdd-panel-sub { font-size: 0.82rem; color: var(--k-ink-soft); }
.pdd-panel .k-field { margin: 0; }

.pdd-panel-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.pdd-waiting {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    border: 1px dashed var(--k-line);
    border-radius: var(--k-radius-lg);
    background: var(--k-surface);
    color: var(--k-ink-soft);
    font-size: 0.86rem;
}

/* ---------- versioner og kommentarer ---------- */

.pdd-ver {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--k-line);
}

.pdd-ver:last-child { border-bottom: 0; }
.pdd-ver-text { flex: 1; min-width: 0; }
.pdd-ver-name { font-size: 0.88rem; font-weight: 500; color: var(--k-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pdd-link { font-size: 0.82rem; color: var(--k-accent); text-decoration: none; white-space: nowrap; }
.pdd-link:hover { color: var(--k-accent-strong); }

.pdd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: var(--k-radius-pill);
    font-size: 0.68rem;
    font-weight: 600;
    border: 1px solid var(--k-line);
    background: var(--k-fill);
    color: var(--k-ink-soft);
    white-space: nowrap;
}

.pdd-badge--accent  { background: var(--k-accent-tint); color: var(--k-accent-strong); border-color: var(--k-accent-border); }
.pdd-badge--success { background: var(--k-success-bg); color: var(--k-success); border-color: var(--k-success-border); }
.pdd-badge--warn    { background: var(--k-warning-bg); color: var(--k-warning); border-color: var(--k-warning-border); }

.pdd-cmt {
    display: flex;
    gap: 0.7rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--k-line);
}

.pdd-cmt-body { flex: 1; min-width: 0; }
.pdd-cmt-head { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.pdd-cmt-who { font-weight: 600; font-size: 0.86rem; color: var(--k-ink); }
.pdd-cmt-text { margin: 0.25rem 0 0; font-size: 0.86rem; color: var(--k-ink-soft); white-space: pre-line; overflow-wrap: anywhere; }

.pdd-cmt-new {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.8rem;
}

/* ---------- roller og detaljer ---------- */

.pdd-role {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--k-line);
}

.pdd-role-name { flex: 1; font-size: 0.86rem; color: var(--k-ink); }

.pdd-desc { font-size: 0.86rem; color: var(--k-ink-soft); margin: 0 0 0.6rem; white-space: pre-line; }

.pdd-kv { margin: 0; }

.pdd-kv > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.84rem;
    padding: 0.4rem 0;
}

.pdd-kv dt { color: var(--k-muted); font-weight: 400; }
.pdd-kv dt label { font-weight: 400; margin: 0; }
.pdd-kv dd { margin: 0; color: var(--k-ink); text-align: right; min-width: 0; }
.pdd-kv dd .form-select { max-width: 200px; }
.pdd-overdue { color: var(--k-danger) !important; font-weight: 600; }