/* Dokumenthanteraren — trepanels-layout (träd | fil-lista | preview) */

@layer components {

.doc-manager {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
    /* Bounda höjden mot viewport så virtual scrolling inne i fil-listan
       får en faktisk viewport att scrolla i — annars sizar panelen till
       tabellens fulla höjd och fönstret scrollar istället. 220px är
       header + projekttab-rader + breathing room.
       PRE-EXISTERANDE TEKNISK SKULD: viewport-räkning är fragil mot
       layoutändringar i projekt-detaljsidan. Korrekt fix är flex-kedja
       hela vägen från .app-main, men det kräver refaktor av projekt-
       detaljsidans struktur. Standalone-mode nedan visar rätt mönster. */
    height: calc(100vh - 220px);
    min-height: 640px;
}

/* Standalone-mode (dokumentbiblioteket): hela kedjan är flex-column
   från .app-main → .doc-library-shell → .doc-manager. Override:ar
   viewport-räkningen ovan med ett rent flex-mönster — panelen tar
   exakt det utrymme som finns kvar i föräldern, ingen pixel-
   matematik mot okända komponenthöjder. */
.doc-manager-standalone {
    flex: 1;
    min-height: 0;
    height: auto;
}

/* Flex-shell för standalone-sidan. Lever inuti .app-main (flex-column)
   och låter .doc-manager nedan ärva tillgänglig höjd. */
.doc-library-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.doc-manager-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin: var(--space-sm) var(--space-md);
}

/* ---- Breadcrumb ---- */

.doc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--bg-primary);
    font-size: 0.85rem;
    overflow-x: auto;
    white-space: nowrap;
}

.doc-breadcrumb-segment {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: inherit;
    transition: background 0.1s, color 0.1s;
}
.doc-breadcrumb-segment:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.doc-breadcrumb-segment.current {
    color: var(--text-primary);
    font-weight: 500;
}
.doc-breadcrumb-segment.root {
    color: var(--accent-blue);
}
.doc-breadcrumb-sep {
    color: var(--text-muted);
    user-select: none;
}

/* ---- Body grid ---- */

.doc-manager-body {
    display: grid;
    grid-template-columns: 260px 1fr 320px;
    /* `minmax(0, 1fr)` på raden tillåter cellinnehållet att krympa under
       min-content — krävs för att flex-children inuti (scroll-divens
       `flex: 1; min-height: 0`) ska kunna scrolla istället för att växa. */
    grid-template-rows: minmax(0, 1fr);
    flex: 1;
    min-height: 0;
}

@media (max-width: 1200px) {
    .doc-manager-body {
        grid-template-columns: 240px 1fr 280px;
    }
}
@media (max-width: 980px) {
    .doc-manager-body {
        grid-template-columns: 220px 1fr;
    }
    .doc-preview-panel {
        display: none;
    }
}

/* ---- Tree ---- */

.doc-tree {
    border-right: 1px solid var(--bg-tertiary);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.doc-tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--bg-tertiary);
    background: var(--bg-tertiary);
}
.doc-tree-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.doc-tree-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
}

.doc-tree-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    cursor: pointer;
    user-select: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: background 0.08s;
    position: relative;
}
.doc-tree-row:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.doc-tree-row.selected {
    background: rgba(45, 114, 210, 0.18);
    color: var(--text-primary);
}
.doc-tree-row.selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-blue);
}

.doc-tree-chevron {
    width: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    line-height: 1;
}
.doc-tree-spacer {
    width: 12px;
    display: inline-block;
}
.doc-tree-icon {
    flex-shrink: 0;
    color: var(--accent-blue);
}
.doc-tree-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-tree-lock {
    color: var(--text-muted);
    flex-shrink: 0;
}
.doc-tree-actions {
    display: none;
    gap: 0;
    align-items: center;
    flex-shrink: 0;
}
.doc-tree-row:hover .doc-tree-actions {
    display: inline-flex;
}
.doc-tree-iconbtn {
    padding: 2px 4px !important;
    min-height: 0 !important;
    line-height: 1;
}

/* ---- File list ---- */

.doc-filelist-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    position: relative;
    min-width: 0;
    /* min-height: 0 krävs för att `.doc-filelist-scroll` (flex:1) ska
       kunna krympa istället för att låta innehållet trycka panelen
       förbi grid-cellens höjd. */
    min-height: 0;
    overflow: hidden;
}

.doc-filelist-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--bg-tertiary);
    background: var(--bg-secondary);
}
.doc-filelist-folder {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}
.doc-filelist-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

/* Sökfält i toolbaren (fas 7). Flexar mellan folder-namn vänster och
   actions höger. Width håller den från att bli löjligt stor på breda
   skärmar utan att vara så smal att placeholder-texten klipps. */
.doc-filelist-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 360px;
    margin: 0 var(--space-md);
}
.doc-filelist-search-icon {
    position: absolute;
    left: 10px;
    color: var(--text-muted);
    pointer-events: none;
}
.doc-filelist-search-input {
    width: 100%;
    padding: 6px 30px 6px 30px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.1s, background 0.1s;
}
.doc-filelist-search-input::placeholder {
    color: var(--text-muted);
}
.doc-filelist-search-input:focus {
    border-color: var(--accent);
    background: var(--bg-primary);
}
.doc-filelist-search-clear {
    position: absolute;
    right: 6px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.9rem;
}
.doc-filelist-search-clear:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.doc-filelist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.doc-filelist-table thead th {
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-bottom: 1px solid var(--bg-tertiary);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}
.doc-filelist-table tbody tr {
    border-bottom: 1px solid var(--bg-secondary);
    transition: background 0.08s;
    cursor: default;
}
.doc-filelist-table tbody tr:hover {
    background: var(--bg-hover);
}
.doc-filelist-table tbody tr.selected {
    background: rgba(45, 114, 210, 0.18);
}
.doc-filelist-table td {
    padding: 6px 12px;
    vertical-align: middle;
}
.doc-filelist-table tfoot td {
    padding: var(--space-sm) 12px;
    border-top: 1px solid var(--bg-tertiary);
    background: var(--bg-secondary);
}

.doc-row {
    cursor: pointer;
}
.doc-row-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.doc-row-name-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.doc-row-filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
/* Mapp-sökväg under filnamnet i sök-resultat (fas 7).
   "Ritningar / Konstruktion" — muted, mindre text, ellipsis vid trångt. */
.doc-row-folder-path {
    color: var(--text-muted);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-row-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
}
.doc-row-icon.text-danger { color: var(--accent-red); font-weight: 700; }
.doc-row-icon.text-success { color: var(--accent-green); font-weight: 700; }
.doc-row-actions {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

/* Uppladdnings-rad — lite ljusare bakgrund så den syns */
.doc-row-uploading {
    background: rgba(45, 114, 210, 0.06);
}

.doc-progress {
    height: 3px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
    width: 100%;
}
.doc-progress-bar {
    height: 100%;
    background: var(--accent-blue);
    transition: width 0.12s ease-out;
}
.doc-error-msg {
    color: var(--accent-red);
    font-size: 0.75rem;
    margin-top: 4px;
}

.doc-empty {
    padding: var(--space-xl);
    text-align: center;
}

/* ---- Drop overlay ---- */

.doc-drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(45, 114, 210, 0.12);
    border: 2px dashed var(--accent-blue);
    border-radius: 4px;
    margin: 6px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.doc-drop-overlay-inner {
    text-align: center;
    color: var(--text-primary);
}
.doc-drop-text {
    margin-top: var(--space-md);
    font-size: 0.95rem;
}

/* ---- Preview pane ---- */

.doc-preview-panel {
    border-left: 1px solid var(--bg-tertiary);
    background: var(--bg-secondary);
    overflow-y: auto;
    padding: var(--space-md);
}
.doc-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    gap: var(--space-sm);
    color: var(--text-muted);
}
.doc-preview-title {
    margin: 0 0 var(--space-md);
    font-size: 1rem;
    color: var(--text-primary);
    word-break: break-word;
}
.doc-preview-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px var(--space-md);
    margin: 0 0 var(--space-md);
    font-size: 0.82rem;
}
.doc-preview-meta dt {
    color: var(--text-muted);
    font-weight: 500;
}
.doc-preview-meta dd {
    color: var(--text-primary);
    margin: 0;
    word-break: break-word;
}
.doc-preview-actions {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

/* ---- Inline preview-frame (fas 4) ---- */

/* Container för iframe/img/video. Använder A4-format (210:297) så att
   en vanlig A4-PDF visas i sin helhet utan scroll inuti iframe:n. Höjden
   härleds matematiskt från bredden. `max-height` förhindrar att ramen
   trycker metadata offskärm på korta viewports. Video får 16:9-modifier. */
.doc-preview-frame {
    width: 100%;
    /* 210/330 ≈ A4 + ~10% extra höjd för browser:s PDF-toolbar (top
       bar med download/print/menu tar ~40px). Med ren 210/297 trycks
       innehållet ihop och kräver scroll. */
    aspect-ratio: 210 / 330;
    max-height: 65vh;
    border: 1px solid var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-primary);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.doc-preview-frame.frame-video {
    aspect-ratio: 16 / 9;
}
.doc-preview-iframe,
.doc-preview-video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: var(--bg-primary);
}
.doc-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.doc-preview-loading {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Placeholder-ikon för icke-renderbar typ (Office, CAD). Liknar
   tom-state-pane men inom preview-content (med metadata under). */
.doc-preview-icon-area {
    width: 100%;
    height: 140px;
    border: 1px dashed var(--bg-tertiary);
    border-radius: 4px;
    background: var(--bg-primary);
    margin-bottom: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--space-sm);
    text-align: center;
}
.doc-preview-icon-label {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 500;
}
.doc-preview-section {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--bg-tertiary);
}
.doc-preview-section h4 {
    margin: 0 0 var(--space-xs);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}
.doc-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ---- Fas 5: versionshistorik-modal + secondary preview-actions ---- */

/* Sekundär actions-rad (Ny version / Versionshistorik) under huvud-knapparna
   i preview-panen. Tunnare visuell vikt — det är åtgärder man inte gör i
   varje session. */
.doc-preview-actions-secondary {
    margin-top: calc(var(--space-sm) * -1 + 2px);
    margin-bottom: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--bg-tertiary);
}
/* <label> som "Ny version"-knapp — matchar btn .btn-sm-padding så att den
   visuellt är likställd med syskon-knapparna. */
.doc-preview-actions-secondary label.btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Versionshistorik-modal: bredare än vanlig (lista kan vara lång), max
   80vh så scroll sker inom .modal-body istället för att sidan skrollar. */
.doc-version-modal {
    width: min(640px, 92vw);
    max-width: 640px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}
.doc-version-modal .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

.doc-version-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.doc-version-row {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--bg-tertiary);
}
.doc-version-row:last-child {
    border-bottom: none;
}
.doc-version-row.is-current {
    background: rgba(45, 114, 210, 0.04);
    margin-inline: calc(var(--space-sm) * -1);
    padding-inline: var(--space-sm);
    border-radius: 4px;
}

/* Timeline-dot till vänster om varje version. Aktuell version får accent. */
.doc-version-marker {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
}
.doc-version-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: inline-block;
}
.doc-version-dot-current {
    background: var(--accent-primary, #2D72D2);
    box-shadow: 0 0 0 3px rgba(45, 114, 210, 0.18);
}

.doc-version-main {
    min-width: 0;
}
.doc-version-line1 {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.doc-version-num {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.82rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.doc-version-filename {
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-word;
}
.doc-version-badge-current {
    font-size: 0.7rem;
    color: var(--accent-primary, #2D72D2);
    background: rgba(45, 114, 210, 0.12);
    padding: 1px 8px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.doc-version-line2 {
    margin-top: 2px;
}
.doc-version-note {
    margin-top: 4px;
    color: var(--text-secondary);
    word-break: break-word;
}
.doc-version-note-empty {
    font-style: italic;
}
.doc-version-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    justify-content: flex-start;
    padding-top: 2px;
}
@media (min-width: 540px) {
    .doc-version-actions {
        flex-direction: row;
        align-items: center;
    }
}

/* "v3"-pill i file_list-tabellen — synlig signal att det finns historik. */
.doc-version-pill {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.78rem;
    color: var(--accent-primary, #2D72D2);
    background: rgba(45, 114, 210, 0.10);
    padding: 1px 7px;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---- Konflikt-modal ---- */

.conflict-bulk-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0 var(--space-md);
    border-bottom: 1px solid var(--bg-tertiary);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}
.conflict-table th,
.conflict-table td {
    padding: 8px 12px;
}
.conflict-choices {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.conflict-choice {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.conflict-choice input[type="radio"] {
    margin: 0;
}
.conflict-choice:hover {
    color: var(--text-primary);
}

/* ---- Fas 3: keyboard-nav + inline rename + virtual scroll ---- */

/* Panel:erna är fokus-zoner. Outline:n syns bara med :focus-visible
   (tangent-fokus) — inte vid klick — och är subtil för att inte slåss
   med den blå selected-bakgrunden. */
.doc-filelist-panel:focus,
.doc-tree:focus {
    outline: none;
}
.doc-filelist-panel:focus-visible,
.doc-tree:focus-visible {
    outline: 1px solid var(--accent-blue);
    outline-offset: -1px;
}

/* Scroll-container för filelist — sitter mellan toolbar och tabellens
   sticky header. `overflow-y: auto` aktiverar virtual scrolling-måttet. */
.doc-filelist-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    position: relative;
}

/* Totalsumma-rad — ALLTID synlig under scroll-containern (inte i
   tfoot som skulle scrolla offskärm vid virtual scrolling). */
.doc-filelist-footer {
    padding: var(--space-sm) 12px;
    border-top: 1px solid var(--bg-tertiary);
    background: var(--bg-secondary);
}

/* Virtual-scroll spacer-rader. Inga hover, inga borders — bara höjd. */
.doc-row-spacer,
.doc-row-spacer:hover {
    background: transparent !important;
    border-bottom: none !important;
    pointer-events: none;
    cursor: default;
}
.doc-row-spacer td {
    padding: 0 !important;
}

/* Fast radhöjd — MÅSTE matcha ROW_HEIGHT_PX i file_list.rs. Virtual
   scrolling beräknar offsets matematiskt utifrån denna konstant. */
.doc-filelist-table tbody tr.doc-row {
    height: 36px;
}
/* I sök-resultat har raden ett extra folder-path-element under namnet,
   så vi släpper på fast höjd och låter raden växa naturligt. Virtual
   scrolling är inaktiverat i sök-läge (file_list.rs) så variabel höjd
   är säker här. */
.doc-filelist-table tbody tr.doc-row:has(.doc-row-folder-path) {
    height: auto;
    min-height: 36px;
}

/* Edit-mode: subtil ram så det syns vilken rad som renames. */
.doc-row.editing,
.doc-tree-row.editing {
    background: var(--bg-hover);
    box-shadow: inset 0 0 0 1px var(--accent-blue);
}

/* Inline rename-input — växer i raden, ärver typografin från cellen. */
.doc-row-rename,
.doc-tree-rename {
    flex: 1;
    min-width: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--accent-blue);
    border-radius: 3px;
    padding: 2px 6px;
    font: inherit;
    font-size: 0.85rem;
    outline: none;
}
.doc-row-rename:focus,
.doc-tree-rename:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(45, 114, 210, 0.25);
}

/* ============================================================
   Share modal (fas 9) — extern delning
   ============================================================ */

.modal-content-lg {
    max-width: 720px;
}

.modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-primary);
    padding: 0 var(--space-lg);
}

.modal-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
}

.modal-tab:hover {
    color: var(--text-primary);
}

.modal-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-blue);
}

.share-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.share-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.share-form .form-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.share-form .form-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

.share-created {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.share-url-row {
    display: flex;
    gap: var(--space-sm);
}

.share-url-row .form-input {
    flex: 1;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
}

.share-summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px var(--space-md);
    font-size: 0.85rem;
}

.share-summary dt {
    color: var(--text-muted);
}

.share-summary dd {
    margin: 0;
    color: var(--text-primary);
}

.share-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.share-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--border-primary);
}

.share-row-main {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.share-row-label {
    font-weight: 500;
    color: var(--text-primary);
}

.share-row-meta {
    font-size: 0.8rem;
}

.share-row-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: 4px;
}

.share-log {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.badge-muted {
    background: var(--bg-quaternary, #3a3f47);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
}

/* ============================================================
   Public share page (fas 9) — /s/:token
   ============================================================ */

.public-share-page {
    min-height: 100vh;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.public-share-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 520px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.public-share-header h1 {
    margin: 0 0 4px 0;
    font-size: 1.5rem;
}

.public-share-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.public-share-title {
    margin: 0;
    font-size: 1.25rem;
    word-break: break-word;
}

.public-share-label {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0;
}

.public-share-info {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px var(--space-md);
    font-size: 0.85rem;
    margin: 0;
}

.public-share-info dt {
    color: var(--text-muted);
}

.public-share-info dd {
    margin: 0;
}

.public-share-password form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.public-share-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.public-share-error {
    text-align: center;
    padding: var(--space-lg) 0;
}

.public-share-error h2 {
    margin: 0 0 var(--space-sm) 0;
}

.public-share-footer {
    text-align: center;
    border-top: 1px solid var(--border-primary);
    padding-top: var(--space-md);
}

.public-share-footer a {
    color: var(--accent-blue);
    text-decoration: none;
}

/* Mobile-responsiv: smala skärmar får bli full-width och kompaktare. Public-
   share-card använder max-width 520px på desktop; under 640px tar vi bort den
   och låter card:et fylla viewport-bredden minus en liten gutter. ShareModal
   får också bli full-width på mobil. */
@media (max-width: 640px) {
    .public-share-page {
        padding: var(--space-sm);
        align-items: flex-start;
    }
    .public-share-card {
        max-width: 100%;
        padding: var(--space-md);
        gap: var(--space-md);
    }
    .public-share-title {
        font-size: 1.1rem;
    }
    .public-share-info {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .public-share-info dt {
        margin-top: 4px;
    }

    /* ShareModal: full-skärm på mobil. Tab-knapparna får mindre padding så
       de inte wrapper. */
    .modal-content-lg {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .modal-tabs {
        padding: 0 var(--space-sm);
    }
    .modal-tab {
        padding: var(--space-sm);
        font-size: 0.85rem;
    }
    .share-url-row {
        flex-direction: column;
    }
    .share-url-row .form-input {
        font-size: 0.75rem;
    }
    .share-row-actions {
        flex-wrap: wrap;
    }
    .share-summary {
        grid-template-columns: 1fr;
    }
}

}