:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #1f2933;
  --muted: #6b7684;
  --primary: #1f4e8c;
  --primary-dark: #163a68;
  --danger: #b3261e;
  --border: #dfe3e8;
  --radius: 8px;
  --sidebar-bg: #d4d9df;
  --header-height: 132px;
}

* { box-sizing: border-box; }

/* input[type=file] below sets display:block with higher specificity than the
   browser's built-in "[hidden] { display: none }" rule, which would otherwise
   silently un-hide any hidden file input (like the dropzone's chooser
   inputs). This restores the normal meaning of the hidden attribute. */
[hidden] {
  display: none !important;
}

.shared-banner-text {
  color: #1a7f37;
  font-weight: 700;
  font-size: 28px;
  text-align: center;
  margin: 0 0 8px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  background-image: url('/images/white-bg.png');
  background-repeat: repeat;
  color: var(--text);
}

.container {
  max-width: 1152px;
  margin: 0;
  padding: 24px;
}

.narrow {
  max-width: 480px;
}

.card-wide {
  max-width: 640px;
}

.brand-logo {
  height: 108px;
  display: block;
}

.login-logo {
  max-width: 520px;
  width: 100%;
  height: auto;
}

.card.login-card {
  background: var(--primary-dark);
}

.login-card label,
.login-card p.subtle {
  color: #ffffff;
}

.login-card .btn {
  background: #62bc47;
}

.login-card .btn:hover {
  background: var(--primary);
}

.login-card .login-btn {
  display: block;
  width: 25%;
  margin-left: 0%;
  text-align: center;
  font-weight: 700;
}

.login-extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  margin-bottom: 0;
}

.checkbox-label input[type=checkbox] {
  width: auto;
  margin: 0;
}

.checkbox-highlight-box {
  background: #eefaf0;
  border: 1px solid #bfe8c6;
  border-radius: 6px;
  padding: 10px 14px;
}

.checkbox-highlight-box .checkbox-label {
  margin-bottom: 0;
}

.forgot-link {
  color: #dce7f5;
  font-size: 0.85rem;
  text-decoration: none;
}

.forgot-link:hover {
  text-decoration: underline;
}




.topheader {
  background: var(--primary-dark);
  color: white;
  padding: 12px 24px;
  box-shadow: 0 4px 10px rgba(15, 23, 33, 0.3);
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: var(--header-height);
}

.topheader-brand {
  display: flex;
  align-items: center;
}

.topheader-logo {
  height: 108px;
  display: block;
}

.topheader-right {
  position: relative;
  flex: 1;
  align-self: stretch;
}

.topheader-tagline {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  color: #dce7f5;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.tagline-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.topheader-session-info {
  position: absolute;
  bottom: 0;
  right: 0;
  font-style: italic;
  color: #dce7f5;
  font-size: 1rem;
  line-height: 1.4;
  text-align: right;
}

.session-info-line {
  margin: 0;
}

.topheader-logout {
  margin: 0;
}

.topheader button.link-btn {
  background: none;
  border: none;
  color: #dce7f5;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0;
}

.topheader button.link-btn:hover {
  color: white;
}

.app-shell {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - var(--header-height));
}

.sidebar {
  width: 220px;
  flex-shrink: 0;
  min-height: calc(100vh - var(--header-height));
  background: var(--sidebar-bg);
  color: var(--primary);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  position: sticky;
  top: 0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
  text-decoration: none;
  padding: 12px 20px;
  font-size: 0.92rem;
  border-left: 3px solid transparent;
}

.sidebar-nav .nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-nav a:hover {
  background: rgba(31, 78, 140, 0.08);
  color: var(--primary-dark);
}

.sidebar-nav a.active {
  background: rgba(31, 78, 140, 0.12);
  color: var(--primary-dark);
  border-left: 3px solid var(--primary);
  font-weight: 600;
}

.sidebar-dropdown {
  display: flex;
  flex-direction: column;
}

.sidebar-dropdown-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
  text-decoration: none;
  padding: 12px 20px;
  font-size: 0.92rem;
  border-left: 3px solid transparent;
}

.sidebar-dropdown-summary.active {
  background: rgba(31, 78, 140, 0.12);
  color: var(--primary-dark);
  border-left: 3px solid var(--primary);
  font-weight: 600;
}

.sidebar-dropdown .nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-dropdown-links {
  display: flex;
  flex-direction: column;
}

.sidebar-dropdown-links a {
  display: flex;
  align-items: center;
  color: var(--primary);
  text-decoration: none;
  padding: 10px 20px 10px 48px;
  font-size: 0.86rem;
  border-left: 3px solid transparent;
}

.sidebar-dropdown-links a:hover {
  background: rgba(31, 78, 140, 0.08);
  color: var(--primary-dark);
}

.sidebar-dropdown-links a.active {
  background: rgba(31, 78, 140, 0.12);
  color: var(--primary-dark);
  border-left: 3px solid var(--primary);
  font-weight: 600;
}


.main-content {
  flex: 1;
  min-width: 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(15, 23, 33, 0.3);
}

h1 { font-size: 1.5rem; margin: 0 0 8px; }
h2 { font-size: 1.2rem; margin: 0 0 12px; }
p.subtle { color: var(--muted); margin-top: 0; }

/* Note: this app's CSP blocks inline style="" attributes, so any spacing
   tweak has to be a real class here, not a style="margin-top:Npx" attribute
   on the element (those are silently ignored by the browser). */
p.subtle.form-gap-top { margin-top: 40px; }
.full-width { width: 100%; }
.text-center { text-align: center; }
p.subtle.mt-4 { margin-top: 4px; }
p.subtle.mt-12 { margin-top: 12px; }
p.subtle.mt-16 { margin-top: 16px; }
.mb-20 { margin-bottom: 20px; }
.mt-16 { margin-top: 16px; }
.inline-block { display: inline-block; }
.italic { font-style: italic; }
.wrap-cell { max-width: 260px; overflow-wrap: anywhere; }

details.inline-block summary {
  cursor: pointer;
  list-style: none;
}
details.inline-block summary::-webkit-details-marker { display: none; }
.reset-password-form,
.inline-edit-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.reset-password-form input[type=password],
.inline-edit-form input[type=text],
.inline-edit-form input[type=email] {
  margin-bottom: 0;
  width: auto;
}

.stats-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.stat-box {
  flex: 1;
  min-width: 140px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(15, 23, 33, 0.3);
}

.stat-box .num { font-size: 1.8rem; font-weight: 700; color: var(--primary); }
.stat-box .label { color: var(--muted); font-size: 0.85rem; }

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: middle;
}

th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

textarea {
  font-family: inherit;
  resize: vertical;
}

.template-placeholders {
  background: #f4f6fa;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.template-placeholders code {
  background: #e6ecf5;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85rem;
}

input[type=file] {
  margin-bottom: 16px;
  display: block;
}

.btn {
  display: inline-block;
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { background: var(--primary-dark); }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #8a1d17; }

.btn-secondary {
  background: white;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-secondary:hover {
  color: white;
}

.btn-green {
  background: #62bc47;
  color: white;
}

.btn-green:hover {
  background: var(--primary);
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-ok { background: #e4f3e8; color: #1e7a37; }
.badge-warn { background: #fdf0dc; color: #9a5c00; }
.badge-danger { background: #fbe4e2; color: var(--danger); }

.alert {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.alert-error { background: #fbe4e2; color: var(--danger); border: 1px solid #f3c1bd; }
.alert-success { background: #e4f3e8; color: #1e7a37; border: 1px solid #bfe3c8; }

/* Chevron separator used between breadcrumb segments (folder-detail.ejs's
   top breadcrumb, the Recent files folder path on the dashboard, Favorite
   Folders, and the public folder-link page) in place of a plain "/". Sits
   inside a flex row (see .breadcrumb / .recent-file-path / .breadcrumb-inline
   below) so align-items: center keeps it lined up with the surrounding text
   regardless of its larger font-size -- vertical-align tricks on inline text
   of a different size never quite centered correctly. */
.breadcrumb-sep {
  color: var(--primary);
  margin: 0 4px;
  font-style: normal;
  font-size: 2em;
  line-height: 1;
}

.breadcrumb,
.recent-file-path,
.breadcrumb-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumb-inline {
  display: inline-flex;
}

/* Breadcrumb links default to the browser's blue/purple link colors (and
   turn purple once visited); pin them to the app's blue everywhere,
   visited or not. The final, non-link segment (the folder you're currently
   in) gets its own green treatment instead. */
.breadcrumb a,
.recent-file-path a,
.breadcrumb-inline a {
  color: var(--primary);
}

.breadcrumb a:visited,
.recent-file-path a:visited,
.breadcrumb-inline a:visited {
  color: var(--primary);
}

.breadcrumb-current {
  color: var(--primary);
  font-weight: 600;
}

.folder-item-count {
  margin-top: 2px;
  margin-bottom: 0;
}

.note-box {
  background: #fbe4e2;
  border: 1px solid #f3c1bd;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.note-box p.subtle {
  margin-bottom: 0;
}

.center-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.top-align-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  padding-top: 24px;
}

.link-page-columns {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  max-width: 1120px;
}

.link-page-main-col {
  flex: 1;
  min-width: 0;
}

.link-page-banner-col {
  flex: 0 0 368px;
  display: flex;
  justify-content: center;
}

.link-page-banner-col img {
  width: 100%;
  max-width: 368px;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(15, 23, 33, 0.2);
}

@media (max-width: 860px) {
  .link-page-columns {
    flex-direction: column;
    align-items: center;
  }

  .link-page-banner-col {
    flex: none;
    order: -1;
  }
}

.copy-box {
  background: #eef2f6;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  font-family: monospace;
  font-size: 0.9rem;
  word-break: break-all;
  margin-bottom: 16px;
}

.footer-note {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 24px;
  text-align: center;
}

.actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.actions-row-nowrap {
  flex-wrap: nowrap;
  align-items: center;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  flex-shrink: 0;
}

.trash-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.star-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-favorite {
  background: transparent;
  border: 1px solid #1a7f37;
  color: #1a7f37;
}

.btn-favorite:hover {
  background: transparent;
  border-color: #1a7f37;
  color: #1a7f37;
}

.btn-favorite:hover .star-icon {
  fill: #1a7f37;
}

.btn-favorite-active {
  background: transparent;
  border: 1px solid #1a7f37;
  color: #1a7f37;
}

.btn-favorite-active:hover {
  background: transparent;
  border-color: #1a7f37;
  color: #1a7f37;
}

.checkbox-col {
  width: 32px;
}

[data-select-all-checkbox],
[data-doc-checkbox],
[data-folder-checkbox],
#folder_share_allow_upload {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.bulk-actions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: #eef2f6;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.bulk-actions-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bulk-create-folder-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  white-space: nowrap;
}

.folder-plus-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.bulk-selected-count {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.bulk-select {
  width: auto;
  margin-bottom: 0;
  padding: 6px 10px;
  font-size: 0.85rem;
}

/* Tree-style destination folder picker (bulk "Move to folder…" action):
   a small trigger button opens an absolutely-positioned dropdown panel
   containing a nested <ul> of folders, each with a "+"/"-" toggle button
   for folders that have subfolders. */
.folder-picker {
  position: relative;
}

.folder-picker-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 200px;
  justify-content: space-between;
}

.folder-picker-caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--muted);
}

.folder-picker-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 260px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 8px;
}

.folder-picker-empty {
  padding: 4px;
  margin-bottom: 0;
}

.folder-tree,
.folder-tree-children {
  list-style: none;
  margin: 0;
  padding-left: 18px;
}

.folder-tree {
  padding-left: 0;
}

.folder-tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

.folder-tree-toggle {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--primary);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.folder-tree-toggle:hover {
  background: #f0f4fa;
}

.folder-tree-toggle-spacer {
  width: 18px;
  flex-shrink: 0;
}

.folder-tree-name {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
}

.folder-tree-name:hover {
  background: #f0f4fa;
  color: var(--primary);
}

.folder-tree-name-disabled {
  color: var(--muted);
  font-style: italic;
  cursor: default;
  padding: 2px 4px;
}

.empty-state { color: var(--muted); padding: 20px 0; text-align: center; }

.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  background-color: #fafbfc;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(31, 78, 140, 0.06) 0,
    rgba(31, 78, 140, 0.06) 1px,
    transparent 1px,
    transparent 14px
  );
}

.dropzone.dragover {
  border-color: var(--primary);
  background-color: #eaf1fa;
}

.dropzone-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
}

.dropzone-icon {
  width: 30px;
  height: 30px;
  color: var(--primary);
  opacity: 0.55;
}

.dropzone-text {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

.dropzone-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.dropzone-label {
  cursor: pointer;
  margin-bottom: 0;
  font-weight: normal;
}

.dropzone-filelist {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  text-align: left;
  max-height: 180px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

.dropzone-filelist li {
  font-size: 0.85rem;
  padding: 6px 2px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.dropzone-filelist li .file-name {
  overflow-wrap: anywhere;
}

.dropzone-filelist li .file-size {
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.dropzone-filelist li.dropzone-empty {
  color: var(--muted);
  font-style: italic;
  justify-content: center;
  border-bottom: none;
}

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.page-title-row h1 {
  margin-bottom: 0;
}

/* Truncates a long folder/page title with an ellipsis and keeps it from
   forcing the title row to wrap, so an adjacent button (e.g. "Create
   folder") stays on the same line instead of dropping to a second row.
   flex-wrap must be forced off here: the default .page-title-row wraps
   based on each item's un-truncated intrinsic width, so the row would
   wrap to a second line before the ellipsis ever gets a chance to apply. */
.page-title-row.title-row-nowrap {
  flex-wrap: nowrap;
}

.page-title-row h1.truncate-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.page-title-row .btn-upload {
  flex-shrink: 0;
}

.create-folder-heading-row h2 {
  margin-bottom: 0;
}

.top-search-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

/* Wraps an existing element (the back button, a subtitle, ...) together with
   the search box on the same line, right-aligned, without disturbing that
   element's own original spacing/appearance -- align-items: center would
   otherwise shift things like the back button (which has its own
   margin-bottom) out of visual alignment with the search box next to it, so
   that margin is neutralized here and moved onto the row itself instead. */
.row-with-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.row-with-search .back-btn,
.row-with-search p.subtle,
.row-with-search .top-search-row {
  margin-bottom: 0;
}

.folders-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

/* Both the input and the button get the same explicit, compact height (40px)
   and both have box-sizing: border-box (set globally), so padding/border
   can't push either one taller than the other. The input's default
   input[type=text] padding (10px top/bottom) would make it taller than a
   compact button on its own, so that padding is overridden here to
   horizontal-only -- text stays vertically centered inside a fixed-height
   text input automatically, no vertical padding needed. */
.search-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-form .btn {
  height: 40px;
  padding: 0 18px;
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--primary);
}

/* input[type=text] (element + attribute selector, specificity 0,1,1) is
   actually MORE specific than a plain .search-input class (0,1,0), so every
   property here -- border, padding, margin-bottom -- was silently losing to
   the generic input[type=text] rule above (public/css/style.css ~line 416)
   this whole time, no matter what was written here. Adding the input[type=
   text] element+attribute prefix to this selector (specificity 0,2,1) is
   what actually guarantees it wins. */
input[type=text].search-input {
  width: 300px;
  height: 40px;
  padding: 0 12px;
  margin-bottom: 0;
  box-sizing: border-box;
  border: 1px solid var(--primary);
}

.search-results-card {
  border: 1px solid var(--primary);
}

.search-results-subhead {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 0 8px;
}

.search-results-subhead:first-of-type {
  margin-top: 0;
}

.folder-shared-tag {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  color: #1e7a37;
  margin-left: 6px;
  text-decoration: none;
}

.folder-shared-tag:hover {
  text-decoration: underline;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.85rem;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  padding: 8px 16px;
  font-size: 0.95rem;
}

.back-btn .back-icon {
  width: 18px;
  height: 18px;
}

.back-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  padding: 12px 22px;
}

.btn-upload.full-width {
  justify-content: center;
}

.upload-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.folder-title-icon {
  width: 25.34px;
  height: 25.34px;
  flex-shrink: 0;
  color: var(--primary);
}

.folder-title-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text);
}

/* Extra breathing room under the whole "Upload to [folder]" title line,
   scoped to just this dialog (not the shared .dialog-title used by every
   other popup) via the .upload-dialog-header h2 compound selector, which
   is more specific than the plain ".upload-dialog-header h2 { margin-
   bottom: 0; }" rule it needs to beat. */
.upload-dialog-header h2.upload-dialog-title-spaced {
  margin-bottom: 10px;
}

dialog.upload-dialog {
  border: none;
  border-radius: var(--radius);
  padding: 24px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(15, 23, 33, 0.25);
}

dialog.upload-dialog::backdrop {
  background: rgba(15, 23, 33, 0.5);
}

.upload-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.upload-dialog-header h2 {
  margin-bottom: 0;
}

.dialog-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.share-target-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}

.name-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
}

.btn-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}

.btn-close:hover {
  color: var(--text);
}

.btn-logout {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.logout-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.two-col-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.two-col-main {
  flex: 2;
  min-width: 320px;
}

.two-col-side {
  flex: 1;
  min-width: 280px;
}

.dashboard-columns {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.dashboard-columns > .card {
  margin-bottom: 0;
}

.dashboard-col-left {
  flex: 2;
  min-width: 320px;
  /* Background image behind the Recent files list. Uses a ::before
     pseudo-element (rather than putting the image straight on this
     element's own background/opacity) because CSS opacity on an element
     fades its text content too -- keeping the image on a separate layer
     behind everything else lets it be faded without touching the real
     content. */
  position: relative;
  overflow: hidden;
}

.dashboard-col-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url('/images/recents_background.jpg');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  opacity: 0.15;
  z-index: 0;
}

.dashboard-col-left > * {
  position: relative;
  z-index: 1;
}

.dashboard-col-right {
  flex: 1;
  min-width: 280px;
}

.folder-name-link,
.file-name-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
  text-decoration: none;
}

.file-name-link {
  gap: 4px;
}

.folder-row-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.folder-name-link:hover,
.file-name-link:hover {
  text-decoration: underline;
}

.folder-icon {
  width: 68px;
  height: 68px;
  object-fit: contain;
  flex-shrink: 0;
}

.recent-files-list {
  display: flex;
  flex-direction: column;
}

.recent-file-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
}

/* Same icon + stacked name/path layout as .recent-file-item, but without its
   own padding/border -- for use inside a table cell (e.g. the public upload
   page's file list), where the surrounding <td> already provides both. */
.table-row-name {
  display: flex;
  align-items: center;
  gap: 4px;
}

.recent-file-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.recent-file-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.recent-file-name:visited {
  color: var(--text);
}

.recent-file-name:hover {
  color: var(--text);
  text-decoration: underline;
}

.recent-file-path {
  color: var(--muted);
  font-size: 1.1rem;
  margin-top: 3px;
}

.recent-file-path a {
  color: var(--primary);
  text-decoration: underline;
}

.recent-file-path a:hover {
  color: var(--primary-dark);
  text-decoration: none;
}

.sidebar-logout {
  margin-top: auto;
  padding: 12px 20px 0;
}

.sidebar-logout-btn {
  width: 100%;
  justify-content: center;
}

.app-footer {
  background: var(--primary-dark);
  color: #dce7f5;
  padding: 37px 29px;
  box-shadow: 0 -4px 10px rgba(15, 23, 33, 0.3);
}

.app-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.app-footer-copy {
  margin: 0;
  color: #dce7f5;
  font-size: 0.94rem;
}

.app-footer-badges {
  display: flex;
  gap: 19px;
  flex-wrap: wrap;
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dce7f5;
  font-size: 1.15rem;
  white-space: nowrap;
}

.footer-badge-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.file-icon {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-right: 8px;
  object-fit: contain;
  flex-shrink: 0;
}

/* .table-row-name and .file-name-link already add their own 10px gap
   between the icon and the name, so the icon's own margin-right above would
   double up the spacing in those two contexts -- cancel it out there only,
   leaving plain inline usages (e.g. send-links.ejs, dashboard.ejs's Recent
   files list) on their original margin-right-based spacing. */
.table-row-name .file-icon,
.file-name-link .file-icon {
  margin-right: 0;
}