/* Skjalakerfi (APP_MODE=skjol) - byggir á main.css, hér er aðeins það sem bætist við. */

.breadcrumb { margin: 0 0 4px; color: var(--muted); font-size: 0.9rem; }

label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
label.check input[type="checkbox"] { width: auto; margin: 0; }

.chip {
  display: inline-block;
  padding: 1px 8px;
  margin: 1px 4px 1px 0;
  border-radius: 999px;
  background: var(--blue-wash);
  color: var(--blue-dark);
  font-size: 0.82rem;
  font-weight: 600;
}

.badge.danger { background: var(--danger-wash); color: var(--danger); }

table.list tr.row-dim td { color: var(--muted); }

.btn.danger { background: var(--surface); color: var(--danger); border-color: #f0cbc7; }
.btn.danger:hover { background: var(--danger-wash); border-color: var(--danger); }
.danger-zone { max-width: 640px; margin-top: 8px; display: flex; justify-content: flex-end; }

.empty-state { max-width: 560px; text-align: center; padding: 40px 32px; }
.empty-state h2 { margin: 8px 0 6px; font-size: 1.2rem; }
.empty-state-icon { font-size: 2.4rem; line-height: 1; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.stat-grid .card { margin-bottom: 0; }
.stat-label { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.stat-value { font-size: 1.6rem; font-weight: 700; margin: 4px 0 2px; }

dl.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }

td.audit-details { max-width: 520px; overflow-wrap: anywhere; font-size: 0.86rem; }

/* ---------- Skráasafnið ---------- */

.browser-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.browser-head h1 { margin: 0; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; }
.crumbs .crumb { color: var(--muted); border-radius: var(--radius-sm); padding: 2px 6px; }
.crumbs a.crumb:hover { color: var(--blue); background: var(--blue-wash); text-decoration: none; }
.crumbs .crumb.current { color: var(--ink); }
.crumb-sep { color: var(--line-strong); }
.crumbs-small { font-size: 0.95rem; font-weight: 600; margin-bottom: 10px; }
.crumbs-small a { padding: 2px 4px; }
.search-box input { width: 280px; max-width: 100%; }

.toolbar, .selection-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; min-height: 40px; }
.toolbar-note { margin: 0 auto 0 0; }
.selection-bar { background: var(--blue-wash); border: 1px solid #cdd8f0; border-radius: var(--radius); padding: 6px 10px; }
.selection-count { font-weight: 700; color: var(--blue-dark); margin-right: 8px; }
.selection-clear { margin-left: auto; background: none; border: none; font-size: 1.1rem; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.btn[hidden], .toolbar[hidden], .selection-bar[hidden], .row-popup[hidden] { display: none; }

table.files { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table.files th { text-align: left; font-size: 0.82rem; font-weight: 600; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.files td { padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.files tbody tr:last-child td { border-bottom: none; }
table.files tr.file-row { cursor: default; user-select: none; }
table.files tr.file-row:hover td { background: #f8f9fc; }
table.files tr.file-row.selected td { background: var(--blue-wash); }
table.files tr.drop-hover td { background: #dfe8fb; box-shadow: inset 0 2px 0 var(--blue), inset 0 -2px 0 var(--blue); }
.crumb.drop-hover { background: #dfe8fb; outline: 2px solid var(--blue); }
th a.sort { color: var(--muted); }
th a.sort.active { color: var(--ink); }
.col-check { width: 36px; }
.col-check input { width: auto; margin: 0; }
.col-name { min-width: 0; }
.col-name .file-icon { display: inline-block; width: 1.6em; text-align: center; }
.col-name .file-name { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.col-name a.file-name:hover { color: var(--blue); }
tr.is-dir .file-name { font-weight: 600; }
.col-size, .col-date { white-space: nowrap; color: var(--ink); font-size: 0.9rem; }
.col-size { width: 160px; }
.col-date { width: 190px; }
.col-loc { font-size: 0.88rem; max-width: 280px; overflow-wrap: anywhere; }
.col-star, .col-menu { width: 36px; text-align: center; padding-left: 0 !important; padding-right: 4px !important; }
.star, .row-menu { background: none; border: none; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 4px 6px; border-radius: 6px; color: var(--line-strong); }
.star:hover { color: #e3a008; background: var(--paper); }
.star.on { color: #e3a008; }
.row-menu { color: var(--muted); font-weight: 700; }
.row-menu:hover { background: var(--paper); color: var(--ink); }

.row-popup { position: fixed; z-index: 60; min-width: 180px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(21, 32, 59, 0.16); padding: 6px; }
.row-popup button { display: block; width: 100%; text-align: left; background: none; border: none; font: inherit; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.row-popup button:hover, .row-popup button:focus { background: var(--blue-wash); outline: none; }
.row-popup button.danger { color: var(--danger); }
.row-popup button.danger:hover { background: var(--danger-wash); }

.drop-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(42, 79, 163, 0.12); display: flex; align-items: center; justify-content: center; pointer-events: none; border: 3px dashed var(--blue); }
.drop-overlay[hidden] { display: none; }
.drop-overlay-inner { background: var(--surface); padding: 18px 28px; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(21, 32, 59, 0.2); font-size: 1.1rem; }

.upload-panel { position: fixed; right: 20px; bottom: 20px; z-index: 65; width: 400px; max-width: calc(100vw - 32px); max-height: 60vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 14px 40px rgba(21, 32, 59, 0.22); }
.upload-panel[hidden] { display: none; }
.upload-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 6px; }
.upload-toggle { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1rem; }
.upload-total { padding: 0 14px 10px; border-bottom: 1px solid var(--line); }
.upload-total .muted { display: block; margin-top: 4px; }
.upload-bar { height: 6px; background: var(--paper); border-radius: 3px; overflow: hidden; }
.upload-bar span { display: block; height: 100%; width: 0; background: var(--blue); transition: width 0.2s; }
.upload-list { list-style: none; margin: 0; padding: 6px 14px 12px; overflow-y: auto; }
.upload-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.upload-list li:last-child { border-bottom: none; }
.upload-list li .upload-bar { grid-column: 1 / -1; height: 4px; }
.upload-list li.up-done .upload-bar span { background: var(--ok); }
.up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-state { white-space: nowrap; }
.up-state.ok { color: var(--ok); font-weight: 600; }
.up-state.warn { color: var(--warn); }
.up-state.danger { color: var(--danger); white-space: normal; }

dialog.dlg { border: none; border-radius: var(--radius); padding: 22px 24px; width: 420px; max-width: calc(100vw - 32px); box-shadow: 0 20px 50px rgba(21, 32, 59, 0.3); color: var(--ink); }
dialog.dlg-wide { width: 560px; }
dialog.dlg::backdrop { background: rgba(21, 32, 59, 0.35); }
dialog.dlg h2 { margin: 0 0 14px; font-size: 1.2rem; }
.folder-pick { list-style: none; margin: 0 0 12px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 320px; overflow-y: auto; }
.folder-pick li { padding: 0; }
.folder-pick li.muted { padding: 8px; }
.folder-pick button { width: 100%; text-align: left; background: none; border: none; font: inherit; padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.folder-pick button:hover { background: var(--blue-wash); }
table.versions td { font-size: 0.9rem; }
.link-btn { background: none; border: none; color: var(--blue); font: inherit; cursor: pointer; padding: 0; }
.link-btn:hover { text-decoration: underline; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(21, 32, 59, 0.3); max-width: calc(100vw - 32px); }
.toast[hidden] { display: none; }
.toast.toast-error { background: var(--danger); }

@media (max-width: 760px) {
  .col-size, .col-date, .col-loc, th.col-size, th.col-date, th.col-loc { display: none; }
  .crumbs { font-size: 1.2rem; }
  .search-box, .search-box input { width: 100%; }
}

/* ---------- Smámyndir og reitir ---------- */

.head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.view-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.view-toggle button { background: none; border: none; padding: 7px 11px; cursor: pointer; font-size: 1rem; color: var(--muted); }
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle button.active { background: var(--blue-wash); color: var(--blue-dark); }

.col-name .file-icon.has-thumb { width: 1.6em; height: 1.6em; vertical-align: middle; }
.col-name .file-icon.has-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }

table.files.grid, table.files.grid tbody { display: block; }
table.files.grid { background: none; border: none; }
table.files.grid thead { display: none; }
table.files.grid tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
table.files.grid tr.file-row { display: flex; flex-direction: column; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.files.grid tr.file-row td { display: block; border: none; padding: 0; background: none !important; }
table.files.grid tr.file-row.selected { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
table.files.grid tr.file-row td.col-check { position: absolute; top: 8px; left: 8px; z-index: 2; }
table.files.grid tr.file-row td.col-star { position: absolute; top: 4px; right: 34px; z-index: 2; width: auto; }
table.files.grid tr.file-row td.col-menu { position: absolute; top: 4px; right: 4px; z-index: 2; width: auto; }
table.files.grid .star, table.files.grid .row-menu { background: rgba(255, 255, 255, 0.85); }
table.files.grid td.col-name { order: -1; }
table.files.grid .col-name .file-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 130px; font-size: 3rem; background: var(--paper); }
table.files.grid .col-name .file-icon.has-thumb img { border-radius: 0; }
table.files.grid .col-name .file-name { display: block; padding: 8px 10px 0; font-size: 0.88rem; line-height: 1.3; max-height: 3.5em; overflow: hidden; }
table.files.grid tr.file-row td.col-size { padding: 2px 10px 0; font-size: 0.78rem; color: var(--muted); width: auto; }
table.files.grid tr.file-row td.col-date { padding: 0 10px 8px; font-size: 0.78rem; color: var(--muted); width: auto; }
table.files.grid tr.file-row td.col-loc { display: none; }

/* ---------- Skoðari ---------- */

.viewer { display: flex; flex-direction: column; min-height: calc(100vh - 64px); }
.viewer-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.viewer-back { font-size: 1.4rem; line-height: 1; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.viewer-back:hover { background: var(--blue-wash); text-decoration: none; }
.viewer-title { flex: 1; min-width: 240px; }
.viewer-title .crumbs-small { margin-bottom: 2px; }
.viewer-title h1 { margin: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.viewer-meta { margin: 4px 0 0; }
.viewer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.viewer-actions .btn.disabled { opacity: 0.4; pointer-events: none; }
.viewer-pos { min-width: 52px; text-align: center; }
.viewer-body { flex: 1; display: flex; align-items: center; justify-content: center; background: #1b2236; border-radius: var(--radius); min-height: 420px; overflow: hidden; }
.viewer-pdf { width: 100%; height: calc(100vh - 190px); min-height: 480px; border: none; background: #fff; align-self: stretch; }
.viewer-body.viewer-pdf { background: #fff; }
/* Element-veljarar: rammanum (.viewer-body) er líka gefinn klasinn viewer-<tegund> */
img.viewer-image { max-width: 100%; max-height: calc(100vh - 200px); object-fit: contain; display: block; }
video.viewer-video { max-width: 100%; max-height: calc(100vh - 200px); background: #000; display: block; }
.viewer-body.viewer-text, .viewer-body.viewer-none, .viewer-body.viewer-audio { background: var(--surface); border: 1px solid var(--line); align-items: stretch; }
.viewer-placeholder { text-align: center; padding: 48px 24px; max-width: 520px; margin: auto; color: inherit; }
.viewer-body:not(.viewer-text):not(.viewer-none):not(.viewer-audio) .viewer-placeholder { color: #e8ecf5; }
.viewer-body:not(.viewer-text):not(.viewer-none):not(.viewer-audio) .viewer-placeholder .muted,
.viewer-body:not(.viewer-text):not(.viewer-none):not(.viewer-audio) .viewer-placeholder a { color: #b9c4dc; }
.viewer-placeholder h2 { margin: 12px 0 6px; font-size: 1.2rem; overflow-wrap: anywhere; }
.viewer-big-icon { font-size: 4rem; line-height: 1; }
.viewer-wait-thumb { max-width: 320px; max-height: 200px; border-radius: var(--radius-sm); opacity: 0.6; }
.media-bar { max-width: 320px; margin: 14px auto; background: rgba(255, 255, 255, 0.15); }
.viewer-placeholder audio { width: 100%; margin-top: 18px; }
.text-view { margin: 0; padding: 18px 20px; width: 100%; overflow: auto; max-height: calc(100vh - 200px); font-size: 0.86rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.text-editor { display: flex; flex-direction: column; width: 100%; padding: 12px; gap: 6px; }
.text-editor textarea { flex: 1; min-height: calc(100vh - 280px); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.86rem; line-height: 1.5; tab-size: 4; resize: vertical; }
.text-editor .actions-row { margin-top: 4px; align-items: center; }

@media (max-width: 760px) {
  .viewer-body { min-height: 260px; }
  .viewer-pdf { height: calc(100vh - 230px); }
  table.files.grid tbody { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  table.files.grid .col-name .file-icon { height: 110px; }
}

/* ---------- Deiling ---------- */

.mark { font-size: 0.85rem; margin-left: 6px; opacity: 0.75; }
.danger-text { color: var(--danger) !important; }
.share-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.share-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; margin-bottom: -1px; }
.share-tab.active { color: var(--blue-dark); border-bottom-color: var(--blue); }
.share-add { display: flex; gap: 8px; position: relative; margin-bottom: 10px; }
.share-add input[type="search"] { flex: 1; }
.share-add select { width: auto; }
.share-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; list-style: none; margin: 4px 0 0; padding: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(21, 32, 59, 0.16); max-height: 260px; overflow-y: auto; }
.share-suggest[hidden] { display: none; }
.share-suggest li.muted { padding: 8px; }
.share-suggest button { width: 100%; text-align: left; background: none; border: none; font: inherit; padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.share-suggest button:hover { background: var(--blue-wash); }
.share-list { list-style: none; margin: 0; padding: 0; }
.share-list li.muted { padding: 8px 0; }
.share-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.share-item select { width: auto; }
.share-who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.share-icon { width: 1.4em; text-align: center; }
.share-inherited .share-item { font-size: 0.88rem; }
.link-form { background: var(--paper); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; }
.link-modes { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.link-modes label[hidden] { display: none; }
.link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.link-grid .field { margin-bottom: 10px; }
.link-list { list-style: none; margin: 0; padding: 0; }
.link-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.link-item.link-dead { opacity: 0.6; }
.link-head { font-size: 0.92rem; margin-bottom: 4px; }
.link-url { display: flex; gap: 6px; margin-top: 6px; }
.link-url input { flex: 1; font-size: 0.85rem; }
.link-actions { margin-top: 6px; font-size: 0.88rem; display: flex; gap: 14px; }
.locked-card { border-left: 4px solid var(--danger); background: var(--danger-wash); }

/* ---------- Opinberir tenglar ---------- */

.public-page { background: var(--paper); }
.public-head { display: flex; justify-content: center; padding: 22px 16px 6px; }
.public-head .brand-logo { background: #fff; border-radius: 8px; padding: 8px 12px; box-shadow: 0 1px 3px rgba(21, 32, 59, 0.08); }
.public-head .brand-logo img { height: 30px; display: block; }
.public-main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.public-card { max-width: 480px; margin: 24px auto; text-align: center; padding: 32px 28px; }
.public-card h1 { font-size: 1.35rem; margin: 10px 0 8px; }
.public-card .field { margin: 14px 0; }
.upload-card { max-width: 560px; }
.public-wide { max-width: 1100px; margin: 0 auto; }
.public-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 14px; }
.public-title h1 { margin: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.public-viewer { min-height: 360px; }
.public-foot { text-align: center; padding: 24px 16px; }
.public-page table.files td.col-menu a.row-menu { text-decoration: none; }
.sent-list { list-style: none; margin: 16px 0 0; padding: 0; text-align: left; font-size: 0.9rem; color: var(--ok); }
@media (max-width: 760px) {
  .link-grid { grid-template-columns: 1fr; }
}