/* ========================================================================
   OpenDocs — Stylesheet
   A modern, open-source document management interface
   ======================================================================== */

/* Reset & Base
   ======================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

/* Hidden attribute — used by JS for show/hide toggling
   ======================================================================== */

[hidden] {
  display: none !important;
}

/* Focus visible — keyboard focus ring for all interactive elements */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.dark-theme :focus-visible {
  outline-color: var(--color-border-focus);
}

/* App Layout
   Navbar is a sibling OUTSIDE .app-layout.
   .app-layout contains sidebar + main-content.
   ======================================================================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--size-navbar);
  padding: 0 16px;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-navbar);
}

.app-layout {
  display: grid;
  grid-template-columns: var(--size-sidebar) 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "sidebar main"
    "footer footer";
  height: calc(100vh - var(--size-navbar));
  margin-top: var(--size-navbar);
  overflow: hidden;
}

.app-footer { grid-area: footer; }

.navbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
}

.navbar-brand .brand-icon {
  width: 28px;
  height: 28px;
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  transition: background-color var(--duration-fast) var(--easing-default);
}

.sidebar-toggle:hover {
  background: #f8fafc;
}

.sidebar-toggle svg {
  width: 20px;
  height: 20px;
}

.navbar-center {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 400px;
  margin: 0 24px;
}

.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-wrapper .search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: #94a3b8;
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: 36px;
  padding: 0 16px 0 36px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  outline: none;
  transition: border-color var(--duration-fast) var(--easing-default), background-color var(--duration-fast) var(--easing-default);
}

.search-input::placeholder {
  color: #94a3b8;
}

.search-input:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Icon button — reused in navbar, toolbar, preview, modals */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  transition: background-color var(--duration-fast) var(--easing-default);
}

.icon-btn:hover {
  background: #f8fafc;
}

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

.notification-btn {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: var(--font-bold);
  color: #fff;
  background: var(--color-danger);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--easing-default);
}

.user-avatar:hover {
  opacity: 0.9;
}

/* Sidebar
   ======================================================================== */

.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  width: var(--size-sidebar);
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.25s ease;
}

.sidebar.collapsed {
  width: 0;
  border-right: none;
}

.sidebar-nav {
  padding: 8px 0;
}

.nav-list {
  display: flex;
  flex-direction: column;
}

.nav-item {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px 0 12px;
  margin: 1px 8px 1px 0;
  border-radius: 0 20px 20px 0;
  color: #1e293b;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-default), color var(--duration-fast) var(--easing-default);
  white-space: nowrap;
  overflow: hidden;
}

.nav-item:hover {
  background: #f8fafc;
}

.nav-item.active {
  background: var(--color-bg-selected);
  color: var(--color-primary);
  font-weight: 500;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  flex-shrink: 0;
}

.nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar footer / storage */

.sidebar-footer {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid #e2e8f0;
}

.storage-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.storage-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
}

.storage-header svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.storage-text {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.storage-bar {
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
}

.storage-bar-fill {
  height: 100%;
  background: #2563eb;
  border-radius: 2px;
  transition: width var(--duration-slow) var(--easing-default);
}

.storage-bar-fill.warning {
  background: #f59e0b;
}

.storage-bar-fill.danger {
  background: #ef4444;
}

/* Nav divider */
.nav-divider {
  height: 1px;
  background: var(--color-border);
  margin: 8px 12px;
}

/* Wiki Tree (sidebar)
   ======================================================================== */

.wiki-tree-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-top: 1px solid var(--color-border);
}

.wiki-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px;
}

.wiki-tree-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.wiki-tree-actions {
  display: flex;
  gap: 2px;
}

.wiki-tree-actions .icon-btn {
  width: 26px;
  height: 26px;
}

.wiki-tree-actions .icon-btn svg {
  width: 14px;
  height: 14px;
}

.wiki-tree {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 8px;
}

.wiki-tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wiki-tree-node {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 12px 0 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
  border-radius: 0 16px 16px 0;
  margin-right: 8px;
  transition: background-color var(--duration-fast) var(--easing-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.wiki-tree-node:hover {
  background: #f1f5f9;
}

.wiki-tree-node.active {
  background: var(--color-bg-selected);
  color: var(--color-primary);
  font-weight: 500;
}

.wiki-tree-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
  border-radius: 3px;
}

.wiki-tree-toggle:hover {
  background: rgba(0,0,0,0.06);
}

.wiki-tree-toggle svg {
  width: 14px;
  height: 14px;
}

.wiki-tree-toggle.leaf {
  visibility: hidden;
}

.wiki-tree-icon {
  display: flex;
  align-items: center;
  margin: 0 6px;
  flex-shrink: 0;
}

.wiki-tree-icon svg {
  width: 16px;
  height: 16px;
}

.wiki-tree-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wiki-tree-children {
  padding-left: 14px;
}

/* Wiki View (main content area)
   ======================================================================== */

.wiki-view {
  padding: 0 var(--space-6);
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.wiki-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.wiki-page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.wiki-page-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.wiki-page-content {
  line-height: 1.7;
  color: var(--color-text);
  padding-bottom: var(--space-8);
}

.wiki-page-content h1 { font-size: var(--text-2xl); font-weight: 700; margin: var(--space-6) 0 var(--space-3); color: var(--color-text); }
.wiki-page-content h2 { font-size: var(--text-xl); font-weight: 600; margin: var(--space-5) 0 var(--space-3); color: var(--color-text); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2); }
.wiki-page-content h3 { font-size: var(--text-lg); font-weight: 600; margin: var(--space-4) 0 var(--space-2); color: var(--color-text); }
.wiki-page-content p { margin: 0 0 var(--space-3); }
.wiki-page-content ul, .wiki-page-content ol { margin: 0 0 var(--space-3); padding-left: var(--space-6); }
.wiki-page-content li { margin-bottom: var(--space-1); }
.wiki-page-content strong { font-weight: 600; }
.wiki-page-content code { background: var(--color-bg-surface); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; font-family: var(--font-family-mono, 'Consolas', monospace); }
.wiki-page-content pre { background: var(--color-bg-surface); padding: var(--space-4); border-radius: 8px; overflow-x: auto; margin: 0 0 var(--space-4); border: 1px solid var(--color-border); }
.wiki-page-content pre code { background: none; padding: 0; }
.wiki-page-content blockquote { border-left: 4px solid var(--color-primary); padding: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); background: var(--color-bg-surface); border-radius: 0 8px 8px 0; }
.wiki-page-content hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-5) 0; }

.wiki-page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-4);
  font-size: 14px;
}

.wiki-page-content th,
.wiki-page-content td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border: 1px solid var(--color-border);
}

.wiki-page-content th {
  background: var(--color-bg-surface);
  font-weight: 600;
}

.wiki-page-content tr:hover {
  background: rgba(0,0,0,0.02);
}

/* Wiki Editor */

.wiki-editor-wrapper {
  padding-bottom: var(--space-8);
}

.wiki-editor-actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

/* Wiki empty state */
.wiki-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-secondary);
}

.wiki-empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  color: var(--color-text-tertiary);
}

.wiki-empty h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.wiki-empty p {
  margin: 0 0 var(--space-4);
}

/* Quill Editor Overrides */

#wiki-quill-editor,
#editor-quill-editor {
  min-height: 400px;
  font-size: 14px;
  line-height: 1.7;
}

#wiki-quill-editor .ql-editor,
#editor-quill-editor .ql-editor {
  padding: var(--space-4);
}

.wiki-editor-wrapper .ql-toolbar.ql-snow,
.editor-modal .ql-toolbar.ql-snow {
  border: 1px solid var(--color-border);
  border-radius: 8px 8px 0 0;
  background: var(--color-bg-surface);
}

.wiki-editor-wrapper .ql-container.ql-snow,
.editor-modal .ql-container.ql-snow {
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.wiki-editor-wrapper .ql-toolbar button:hover,
.editor-modal .ql-toolbar button:hover {
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
}

.wiki-editor-wrapper .ql-toolbar button.ql-active,
.editor-modal .ql-toolbar button.ql-active {
  background: var(--color-bg-selected);
  color: var(--color-primary);
  border-radius: 4px;
}

/* Main Content
   ======================================================================== */

.main-content {
  grid-area: main;
  padding: var(--space-6);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Breadcrumb
   ======================================================================== */

.breadcrumb-bar {
  margin-bottom: 16px;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #94a3b8;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item button {
  color: var(--color-text-secondary);
  font-size: 13px;
  transition: color var(--duration-fast) var(--easing-default);
}

.breadcrumb-item button:hover:not(:disabled) {
  color: #2563eb;
}

.breadcrumb-item button:disabled {
  color: #1e293b;
  font-weight: 600;
  cursor: default;
}

/* Separator between breadcrumb items (via CSS pseudo-element) */
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: 4px;
  color: #94a3b8;
  font-size: 13px;
}

/* Toolbar
   ======================================================================== */

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Buttons
   ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--size-btn);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  background: #ffffff;
  color: #1e293b;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--easing-default);
}

.btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.btn:active {
  background: #f1f5f9;
}

.btn svg,
.btn .btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-primary {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.btn-primary:active {
  background: #1e40af;
}

.btn-secondary {
  background: #ffffff;
  color: #1e293b;
  border-color: #e2e8f0;
}

.btn-danger {
  color: #ef4444;
}

.btn-danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

.btn:disabled,
.btn:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-icon-only {
  width: 34px;
  padding: 0;
}

.btn-sm {
  height: var(--size-btn-sm);
  padding: 0 8px;
  font-size: 12px;
}

/* View Toggle (grid/list buttons in toolbar) */

.view-toggle {
  display: inline-flex;
}

.view-toggle .icon-btn {
  border-radius: 0;
  border: 1px solid #e2e8f0;
  width: 34px;
  height: 34px;
}

.view-toggle .icon-btn:first-child {
  border-radius: 6px 0 0 6px;
}

.view-toggle .icon-btn:last-child {
  border-radius: 0 6px 6px 0;
  margin-left: -1px;
}

.view-toggle .icon-btn.active {
  background: #eff6ff;
  color: #2563eb;
  border-color: #2563eb;
  z-index: 1;
}

.file-count {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 400;
  padding-left: 4px;
}

/* Sort Dropdown
   ======================================================================== */

.sort-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding: 4px 0;
  animation: fadeIn 0.12s ease;
}

.dropdown-item {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.dropdown-item:hover {
  background: #f8fafc;
}

.dropdown-item.active {
  color: #2563eb;
  font-weight: 500;
}

/* File Browser — Grid View
   JS toggles .view-grid / .view-list on #file-browser.
   In grid mode, file-card children are laid out in a grid.
   ======================================================================== */

.file-browser.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

/* Empty state should span the full grid width */
.file-browser.view-grid .empty-state {
  grid-column: 1 / -1;
}

.file-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--easing-default), border-color var(--duration-fast) var(--easing-default);
}

.file-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-hover);
}

.file-card.selected {
  background: var(--color-bg-selected);
  border-color: var(--color-primary);
}

.file-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  margin-bottom: 8px;
  background: #f8fafc;
  border-radius: 6px;
}

.file-card-icon svg,
.file-card-icon img {
  width: 40px;
  height: 40px;
}

.file-card-icon.file-card-thumb {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 120px;
}

.file-card-name {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-card-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* File Browser — List View (table-based)
   JS creates a table.file-list-table with tr.file-row inside tbody.
   ======================================================================== */

.file-list-table {
  width: 100%;
  border-collapse: collapse;
}

.file-list-table thead tr {
  border-bottom: 1px solid #e2e8f0;
}

.file-list-table th {
  text-align: left;
  height: 36px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.file-list-table th.col-name {
  width: auto;
}

.file-list-table th.col-modified {
  width: 180px;
}

.file-list-table th.col-size {
  width: 100px;
}

.file-row {
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-default);
  border-bottom: 1px solid #f1f5f9;
}

.file-row:hover {
  background: #f8fafc;
}

.file-row.selected {
  background: #eff6ff;
}

.file-row td {
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  vertical-align: middle;
}

.file-row td.col-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-row .file-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.file-row .file-row-icon svg {
  width: 20px;
  height: 20px;
}

.file-row .file-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-row td.col-modified,
.file-row td.col-size {
  font-size: 13px;
  color: #64748b;
}

/* File Type Icon Colors
   ======================================================================== */

.icon-docx { color: #2563eb; }
.icon-xlsx { color: #10b981; }
.icon-pdf { color: #ef4444; }
.icon-pptx { color: #f59e0b; }
.icon-folder { color: #64748b; }
.icon-image { color: #7c3aed; }
.icon-default { color: #94a3b8; }

/* Modal Overlay (shared)
   JS uses [hidden] attribute for visibility.
   ======================================================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  animation: fadeIn 0.2s ease;
}

.modal {
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: fadeIn 0.2s ease;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #64748b;
  transition: background-color var(--duration-fast) var(--easing-default);
}

.modal-close:hover {
  background: #f8fafc;
}

.modal-body {
  padding: 0 24px 24px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
}

/* Share Modal
   ======================================================================== */

.share-filename {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 16px;
}

.share-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.share-link-input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  color: #64748b;
  outline: none;
}

.share-link-input:focus {
  border-color: #2563eb;
}

.share-permission-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #64748b;
}

.select-input {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

.select-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.share-people {
  margin-top: 8px;
}

.share-people-title {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 8px;
}

.share-people-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.share-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 6px;
}

.share-person:hover {
  background: #f8fafc;
}

.share-person-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.share-person-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.share-person-name {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-person-role {
  font-size: 12px;
  color: #94a3b8;
}

/* Folder Modal
   ======================================================================== */

#folder-modal .modal {
  max-width: 360px;
}

.input-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
}

.text-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  outline: none;
  transition: border-color var(--duration-fast) var(--easing-default);
}

.text-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Editor Modal (Full-screen)
   The .modal-overlay.editor-overlay is the backdrop.
   Inside it, .editor-modal is the full-screen editor.
   JS uses [hidden] on the .modal-overlay wrapper.
   ======================================================================== */

.editor-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.editor-modal {
  background: #ffffff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.editor-header {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
  gap: 8px;
}

.editor-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}

.editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

#editor-quill-toolbar.ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  flex-shrink: 0;
}

.editor-modal .ql-container.ql-snow {
  border: none;
  border-radius: 0;
}

#editor-quill-editor {
  flex: 1;
  overflow-y: auto;
  background: #ffffff;
  font-size: 15px;
  line-height: 1.7;
  color: #1e293b;
}

#editor-quill-editor .ql-editor {
  max-width: 800px;
  margin: 0 auto;
  min-height: 100%;
  padding: 40px;
}

/* Document-like typography in Quill editors */
#editor-quill-editor .ql-editor h1,
#wiki-quill-editor .ql-editor h1 {
  font-size: 1.8em;
  font-weight: 700;
  margin: 1.2em 0 0.5em;
}

#editor-quill-editor .ql-editor h2,
#wiki-quill-editor .ql-editor h2 {
  font-size: 1.4em;
  font-weight: 600;
  margin: 1em 0 0.4em;
}

#editor-quill-editor .ql-editor h3,
#wiki-quill-editor .ql-editor h3 {
  font-size: 1.15em;
  font-weight: 600;
  margin: 0.8em 0 0.3em;
}

#editor-quill-editor .ql-editor p,
#wiki-quill-editor .ql-editor p {
  margin: 0 0 0.8em;
}

#editor-quill-editor .ql-editor blockquote,
#wiki-quill-editor .ql-editor blockquote {
  margin: 0.8em 0;
  padding-left: 1em;
  border-left: 3px solid var(--color-border);
}

#editor-quill-editor .ql-editor ul,
#editor-quill-editor .ql-editor ol,
#wiki-quill-editor .ql-editor ul,
#wiki-quill-editor .ql-editor ol {
  margin: 0.4em 0 0.8em;
  padding-left: 1.5em;
}

#editor-quill-editor .ql-editor li,
#wiki-quill-editor .ql-editor li {
  margin: 0.2em 0;
}

/* Empty State
   ======================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: #94a3b8;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 24px;
  max-width: 360px;
}

/* Drag & Drop Overlay
   JS uses [hidden] attribute. The overlay contains .drag-overlay-content.
   ======================================================================== */

.drag-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.08);
  pointer-events: auto;
}

.drag-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  border: 2px dashed #2563eb;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.drag-overlay-icon {
  width: 48px;
  height: 48px;
  color: #2563eb;
}

.drag-overlay-text {
  font-size: 16px;
  font-weight: 600;
  color: #2563eb;
}

/* Toast Notifications
   JS creates .toast.toast-success / .toast-error / .toast-info
   JS adds .show class for slide-in animation, removes for slide-out.
   ======================================================================== */

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 420px;
  padding: 12px 16px;
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border-left: 3px solid #2563eb;
  pointer-events: auto;
  transform: translateY(20px);
  opacity: 0;
  transition: transform var(--duration-slow) var(--easing-default), opacity var(--duration-slow) var(--easing-default);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.toast span {
  flex: 1;
  font-size: 14px;
  color: #1e293b;
}

.toast-success {
  border-left-color: #10b981;
}

.toast-success svg {
  color: #10b981;
}

.toast-error {
  border-left-color: #ef4444;
}

.toast-error svg {
  color: #ef4444;
}

.toast-info {
  border-left-color: #2563eb;
}

.toast-info svg {
  color: #2563eb;
}

/* Context Menu
   ======================================================================== */

.context-menu {
  position: absolute;
  min-width: 180px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: var(--z-context);
  padding: 4px 0;
  animation: fadeIn 0.12s ease;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.context-menu-item:hover {
  background: #f8fafc;
}

.context-menu-item svg {
  width: 16px;
  height: 16px;
  color: #64748b;
  flex-shrink: 0;
}

.context-menu-item.danger {
  color: #ef4444;
}

.context-menu-item.danger svg {
  color: #ef4444;
}

.context-menu-separator {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
}

/* Scrollbar
   ======================================================================== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Animations
   ======================================================================== */

@keyframes slideIn {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* Dark Theme
   ======================================================================== */

.dark-theme .navbar-brand {
  color: #60a5fa;
}

.dark-theme .nav-item {
  color: #e2e8f0;
}

.dark-theme .nav-item:hover {
  background: #334155;
}

.dark-theme .nav-item.active {
  background: #1e3a5f;
  color: #60a5fa;
}

.dark-theme .sidebar-footer {
  border-top-color: #334155;
}

.dark-theme .storage-header,
.dark-theme .storage-text {
  color: #94a3b8;
}

.dark-theme .storage-bar {
  background: #334155;
}

.dark-theme .search-input {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
}

.dark-theme .search-input::placeholder {
  color: #64748b;
}

.dark-theme .search-input:focus {
  border-color: #60a5fa;
  background: #1e293b;
}

.dark-theme .icon-btn:hover,
.dark-theme .sidebar-toggle:hover {
  background: #334155;
}

.dark-theme .breadcrumb-item button {
  color: #94a3b8;
}

.dark-theme .breadcrumb-item:last-child button {
  color: #e2e8f0;
}

.dark-theme .breadcrumb-item + .breadcrumb-item::before {
  color: #475569;
}

.dark-theme .breadcrumb-item button:hover:not(:disabled) {
  color: #60a5fa;
}

.dark-theme .breadcrumb-item button:disabled {
  color: #e2e8f0;
}

.dark-theme .btn {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

.dark-theme .btn:hover {
  background: #334155;
  border-color: #475569;
}

.dark-theme .btn-primary {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.dark-theme .btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.dark-theme .file-card-icon {
  background: #0f172a;
}

.dark-theme .file-card-name {
  color: #e2e8f0;
}

.dark-theme .file-card-meta {
  color: #64748b;
}

.dark-theme .file-list-table th {
  color: #64748b;
  border-bottom-color: #334155;
}

.dark-theme .file-list-table thead tr {
  border-bottom-color: #334155;
}

.dark-theme .file-row {
  border-bottom-color: #1e293b;
}

.dark-theme .file-row:hover {
  background: #334155;
}

.dark-theme .file-row.selected {
  background: #1e3a5f;
}

.dark-theme .file-row td {
  color: #e2e8f0;
}

.dark-theme .file-row td.col-modified,
.dark-theme .file-row td.col-size {
  color: #94a3b8;
}


.dark-theme .modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.dark-theme .modal-title {
  color: #e2e8f0;
}

.dark-theme .modal-footer {
  border-top-color: #334155;
}

.dark-theme .text-input,
.dark-theme .select-input,
.dark-theme .share-link-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

.dark-theme .text-input:focus,
.dark-theme .select-input:focus,
.dark-theme .share-link-input:focus {
  border-color: #60a5fa;
}

.dark-theme .editor-modal {
  background: #1e293b;
}

.dark-theme .editor-header {
  background: #1e293b;
  border-bottom-color: #334155;
}

.dark-theme .editor-title {
  color: #e2e8f0;
}

.dark-theme #editor-quill-editor {
  background: #1e293b;
  color: #e2e8f0;
}

.dark-theme #editor-content {
  background: #1e293b;
  color: #e2e8f0;
}

.dark-theme .context-menu-item {
  color: #e2e8f0;
}

.dark-theme .context-menu-item:hover {
  background: #334155;
}

.dark-theme .context-menu-separator {
  background: #334155;
}

.dark-theme .dropdown-menu {
  background: #1e293b;
  border-color: #334155;
}

.dark-theme .dropdown-item {
  color: #e2e8f0;
}

.dark-theme .dropdown-item:hover {
  background: #334155;
}

.dark-theme .toast span {
  color: #e2e8f0;
}

.dark-theme .view-toggle .icon-btn {
  border-color: #334155;
}

.dark-theme .view-toggle .icon-btn.active {
  background: #1e3a5f;
  color: #60a5fa;
  border-color: #2563eb;
}

.dark-theme .empty-state-title {
  color: #e2e8f0;
}

.dark-theme .empty-state-text {
  color: #94a3b8;
}

.dark-theme .share-person-name,
.dark-theme .input-label {
  color: #e2e8f0;
}

.dark-theme .viewer-modal {
  background: #1e293b;
}

.dark-theme .viewer-header {
  background: #1e293b;
  border-bottom-color: #334155;
}

.dark-theme .viewer-filename {
  color: #f1f5f9;
}

.dark-theme .viewer-body {
  background: #0f172a;
}

.dark-theme .viewer-content {
  background: #1e293b;
  color: #e2e8f0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.dark-theme .viewer-content .preview-text {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

.dark-theme .viewer-header-divider {
  background: #334155;
}

/* Dark Theme — Wiki */

.dark-theme .nav-divider {
  background: #334155;
}

.dark-theme .wiki-tree-container {
  border-top-color: #334155;
}

.dark-theme .wiki-tree-title {
  color: #94a3b8;
}

.dark-theme .wiki-tree-node {
  color: #e2e8f0;
}

.dark-theme .wiki-tree-node:hover {
  background: #334155;
}

.dark-theme .wiki-tree-node.active {
  background: #1e3a5f;
  color: #60a5fa;
}

.dark-theme .wiki-tree-toggle:hover {
  background: rgba(255,255,255,0.08);
}

.dark-theme .wiki-page-title {
  color: #f1f5f9;
}

.dark-theme .wiki-page-header {
  border-bottom-color: #334155;
}

.dark-theme .wiki-page-content {
  color: #e2e8f0;
}

.dark-theme .wiki-page-content h1,
.dark-theme .wiki-page-content h2,
.dark-theme .wiki-page-content h3 {
  color: #f1f5f9;
}

.dark-theme .wiki-page-content h2 {
  border-bottom-color: #334155;
}

.dark-theme .wiki-page-content code {
  background: #0f172a;
}

.dark-theme .wiki-page-content pre {
  background: #0f172a;
  border-color: #334155;
}

.dark-theme .wiki-page-content blockquote {
  background: #0f172a;
  border-left-color: #60a5fa;
}

.dark-theme .wiki-page-content th,
.dark-theme .wiki-page-content td {
  border-color: #334155;
}

.dark-theme .wiki-page-content th {
  background: #0f172a;
}

.dark-theme .wiki-page-content tr:hover {
  background: rgba(255,255,255,0.02);
}

.dark-theme .wiki-page-content hr {
  border-top-color: #334155;
}

.dark-theme .wiki-empty h2 {
  color: #f1f5f9;
}

.dark-theme .ql-toolbar.ql-snow {
  background: #0f172a;
  border-color: #334155;
}

.dark-theme .ql-container.ql-snow {
  border-color: #334155;
}

.dark-theme .ql-editor {
  background: #1e293b;
  color: #e2e8f0;
}

.dark-theme .ql-toolbar button {
  color: #e2e8f0;
}

.dark-theme .ql-toolbar .ql-stroke {
  stroke: #e2e8f0;
}

.dark-theme .ql-toolbar .ql-fill {
  fill: #e2e8f0;
}

.dark-theme .ql-toolbar .ql-picker-label {
  color: #e2e8f0;
}

.dark-theme .ql-toolbar button:hover {
  background: #334155;
}

.dark-theme .ql-toolbar button.ql-active {
  background: #1e3a5f;
  color: #60a5fa;
}

.dark-theme .ql-toolbar button.ql-active .ql-stroke {
  stroke: #60a5fa;
}

.dark-theme .ql-toolbar button.ql-active .ql-fill {
  fill: #60a5fa;
}

/* Settings View
   ======================================================================== */

.settings-view {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #f8fafc;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 32px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.panel-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
}

.settings-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.settings-section {
  margin-bottom: 32px;
}

.settings-section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin-bottom: 12px;
  padding-left: 4px;
}

.settings-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 16px;
}

.settings-row + .settings-row {
  border-top: 1px solid #f1f5f9;
}

.settings-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.settings-row-label {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}

.settings-row-desc {
  font-size: 13px;
  color: #94a3b8;
}

.settings-storage-bar {
  width: 120px;
  flex-shrink: 0;
}

.settings-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  color: #94a3b8;
}

.settings-placeholder-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  color: #cbd5e1;
}

.settings-placeholder h2 {
  font-size: 18px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 8px;
}

.settings-placeholder p {
  font-size: 14px;
  max-width: 360px;
  line-height: 1.6;
}

.dark-theme .settings-placeholder-icon {
  color: #475569;
}

.dark-theme .settings-placeholder h2 {
  color: #94a3b8;
}

/* Toggle Switch */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #cbd5e1;
  border-radius: 24px;
  transition: background-color var(--duration-normal) var(--easing-default);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform var(--duration-normal) var(--easing-default);
}

.toggle-switch input:checked + .toggle-slider {
  background: #2563eb;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dark theme settings */

.dark-theme .settings-view {
  background: #0f172a;
}

.dark-theme .panel-header {
  background: #1e293b;
  border-bottom-color: #334155;
}

.dark-theme .panel-title {
  color: #f1f5f9;
}

.dark-theme .settings-card {
  background: #1e293b;
  border-color: #334155;
}

.dark-theme .settings-row + .settings-row {
  border-top-color: #334155;
}

.dark-theme .settings-row-label {
  color: #f1f5f9;
}

.dark-theme .toggle-slider {
  background: #475569;
}

/* App Footer
   ======================================================================== */

.app-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 16px;
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.footer-version {
  opacity: 0.7;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-default);
}

.footer-link:hover {
  color: var(--color-primary);
}

.footer-sep {
  color: var(--color-text-muted);
}

/* API Docs View
   ======================================================================== */

.api-docs-view {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-bg);
}

.api-docs-body {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}

.api-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: #fff7ed;
  color: #c2410c;
  margin-left: 12px;
}

.api-intro {
  margin-bottom: 32px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.api-intro strong {
  color: var(--color-text);
}

.api-base-url {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.api-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.api-section {
  margin-bottom: 32px;
}

.api-section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.api-endpoint {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  overflow: hidden;
}

.api-endpoint-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-bg-surface);
  font-size: var(--text-sm);
}

.api-method {
  font-size: 11px;
  font-weight: var(--font-bold);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.api-get    { background: var(--color-primary); }
.api-post   { background: var(--color-success); }
.api-put    { background: var(--amber-600); }
.api-delete { background: var(--color-danger); }

.api-path {
  font-family: var(--font-family-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.api-summary {
  color: var(--color-text-secondary);
  margin-left: auto;
}

.api-endpoint-detail {
  padding: 10px 14px;
  background: var(--color-bg-muted);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.api-endpoint-detail code {
  font-family: var(--font-family-mono);
  font-size: 12px;
  background: var(--color-bg-surface);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.api-params,
.api-response {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

/* Dark theme API docs */
.dark-theme .api-badge {
  background: #431407;
  color: #fb923c;
}

.dark-theme .api-endpoint-detail code {
  background: var(--color-bg-hover);
}

/* Document Viewer — Confluence-style dark focus overlay
   ======================================================================== */

.viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-viewer);
  background: var(--viewer-bg);
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.2s ease;
}

/* Top bar */
.viewer-topbar {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 16px;
  flex-shrink: 0;
  gap: 12px;
}

.viewer-topbar-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 1px;
}

.viewer-filename {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.viewer-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.3;
}

.viewer-topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.viewer-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--viewer-btn-text);
  border-radius: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.viewer-action-btn:hover {
  color: #ffffff;
  background: var(--viewer-btn-hover);
}

.viewer-action-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.viewer-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  margin-left: 8px;
  transition: all 0.15s ease;
}

.viewer-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.viewer-close-btn svg {
  width: 20px;
  height: 20px;
}

/* Navigation arrows */
.viewer-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  transition: all 0.15s ease;
}

.viewer-nav:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.viewer-nav svg {
  width: 24px;
  height: 24px;
}

.viewer-nav-prev {
  left: 16px;
}

.viewer-nav-next {
  right: 16px;
}

/* Scrollable body */
.viewer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 80px;
}

/* Content paper */
.viewer-content {
  max-width: 900px;
  margin: 8px auto 0;
  background: #ffffff;
  border-radius: 8px 8px 0 0;
  padding: 48px 64px;
  font-size: 15px;
  line-height: 1.7;
  color: #1e293b;
  box-shadow: 0 -2px 40px rgba(0, 0, 0, 0.3);
}

/* Bottom bar */
.viewer-bottombar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 40px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  padding: 0 16px;
}

/* Media mode — no white paper, content floats on dark bg */
.viewer-content.viewer-content-media {
  background: transparent;
  box-shadow: none;
  max-width: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.viewer-content.viewer-content-media .preview-image {
  min-height: auto;
  overflow: hidden;
}

.viewer-content.viewer-content-media .preview-image img {
  max-height: calc(100vh - 120px);
  border-radius: 6px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  transform-origin: center center;
  transition: none;
  user-select: none;
}

/* Zoom controls in bottom bar */
.viewer-zoom-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 2px 4px;
}

.viewer-zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.15s ease;
}

.viewer-zoom-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.viewer-zoom-btn svg {
  width: 14px;
  height: 14px;
}

.viewer-zoom-level {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  min-width: 40px;
  text-align: center;
}

/* Metadata info panel */
.viewer-info-panel {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 40px;
  width: 340px;
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
  z-index: 220;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  animation: slideInRight 0.2s ease;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.viewer-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.viewer-info-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.viewer-info-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.info-section {
  margin-bottom: 20px;
}

.info-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4px 0;
  font-size: 13px;
  gap: 8px;
}

.info-label {
  color: #64748b;
  flex-shrink: 0;
}

.info-value {
  color: #1e293b;
  text-align: right;
  word-break: break-word;
}

.info-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  background: #f1f5f9;
  color: #475569;
  border-radius: 4px;
  margin: 2px 2px 2px 0;
}

.info-status {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
}

.info-status.status-freigegeben { background: #dcfce7; color: #166534; }
.info-status.status-laufend { background: #dbeafe; color: #1e40af; }
.info-status.status-offen { background: #fef9c3; color: #854d0e; }
.info-status.status-pruefung { background: #ffedd5; color: #9a3412; }
.info-status.status-default { background: #f1f5f9; color: #475569; }

.info-version-item {
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
}

.info-version-item:last-child { border-bottom: none; }

.info-version-num {
  font-weight: 600;
  color: #1e293b;
}

.info-version-date {
  color: #94a3b8;
  margin-left: 8px;
}

.info-version-comment {
  color: #64748b;
  display: block;
  margin-top: 2px;
}

.info-version-author {
  color: #94a3b8;
  font-size: 11px;
}

.dark-theme .viewer-info-panel {
  background: #1e293b;
  border-left-color: #334155;
}

.dark-theme .viewer-info-header {
  border-bottom-color: #334155;
}

.dark-theme .viewer-info-header h3 { color: #f1f5f9; }
.dark-theme .info-label { color: #94a3b8; }
.dark-theme .info-value { color: #e2e8f0; }
.dark-theme .info-tag { background: #334155; color: #cbd5e1; }
.dark-theme .info-version-item { border-bottom-color: #334155; }
.dark-theme .info-version-num { color: #f1f5f9; }

/* Docx preview */
.viewer-content .preview-docx { font-size: 15px; line-height: 1.8; }
.viewer-content .preview-docx h1 { font-size: 24px; font-weight: 700; margin: 24px 0 12px; color: #1e293b; }
.viewer-content .preview-docx h2 { font-size: 20px; font-weight: 600; margin: 20px 0 10px; color: #1e293b; }
.viewer-content .preview-docx h3 { font-size: 17px; font-weight: 600; margin: 16px 0 8px; color: #334155; }
.viewer-content .preview-docx p { margin: 8px 0; }
.viewer-content .preview-docx table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.viewer-content .preview-docx table th,
.viewer-content .preview-docx table td { border: 1px solid #e2e8f0; padding: 8px 12px; text-align: left; }
.viewer-content .preview-docx table th { background: #f8fafc; font-weight: 600; }
.viewer-content .preview-docx ul,
.viewer-content .preview-docx ol { margin: 8px 0; padding-left: 24px; list-style: disc; }
.viewer-content .preview-docx ol { list-style: decimal; }
.viewer-content .preview-docx li { margin: 4px 0; }

/* XLSX preview */
.viewer-content .preview-xlsx { overflow-x: auto; }
.viewer-content .preview-xlsx table { width: 100%; border-collapse: collapse; font-size: 13px; }
.viewer-content .preview-xlsx table th,
.viewer-content .preview-xlsx table td { border: 1px solid #e2e8f0; padding: 6px 10px; text-align: left; white-space: nowrap; }
.viewer-content .preview-xlsx table th,
.viewer-content .preview-xlsx table tr:first-child td { background: #f8fafc; font-weight: 600; }

/* PDF preview */
.viewer-content .preview-pdf { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.viewer-content .preview-pdf canvas { max-width: 100%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }

/* Image preview */
.viewer-content .preview-image { display: flex; justify-content: center; align-items: center; min-height: 300px; }
.viewer-content .preview-image img { max-width: 100%; max-height: 80vh; border-radius: 4px; }

/* Text/code preview */
.viewer-content .preview-text {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;
  color: #334155; background: #f8fafc; padding: 24px; border-radius: 8px; border: 1px solid #e2e8f0;
}

/* Markdown preview */
.viewer-content .preview-markdown h1 { font-size: 24px; font-weight: 700; margin: 24px 0 12px; border-bottom: 1px solid #e2e8f0; padding-bottom: 8px; }
.viewer-content .preview-markdown h2 { font-size: 20px; font-weight: 600; margin: 20px 0 10px; }
.viewer-content .preview-markdown h3 { font-size: 17px; font-weight: 600; margin: 16px 0 8px; }
.viewer-content .preview-markdown p { margin: 8px 0; }
.viewer-content .preview-markdown table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.viewer-content .preview-markdown table th,
.viewer-content .preview-markdown table td { border: 1px solid #e2e8f0; padding: 8px 12px; text-align: left; }
.viewer-content .preview-markdown table th { background: #f8fafc; font-weight: 600; }
.viewer-content .preview-markdown ul,
.viewer-content .preview-markdown ol { margin: 8px 0; padding-left: 24px; list-style: disc; }
.viewer-content .preview-markdown ol { list-style: decimal; }
.viewer-content .preview-markdown li { margin: 4px 0; }
.viewer-content .preview-markdown code { font-family: 'SFMono-Regular', Consolas, monospace; background: #f1f5f9; padding: 2px 6px; border-radius: 3px; font-size: 13px; }
.viewer-content .preview-markdown pre { background: #f8fafc; padding: 16px; border-radius: 6px; border: 1px solid #e2e8f0; overflow-x: auto; margin: 12px 0; }
.viewer-content .preview-markdown pre code { background: none; padding: 0; }
.viewer-content .preview-markdown hr { border: none; border-top: 1px solid #e2e8f0; margin: 20px 0; }
.viewer-content .preview-markdown strong { font-weight: 600; }

/* Unsupported file type */
.viewer-content .preview-unsupported {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 24px; text-align: center; color: #64748b;
}
.viewer-content .preview-unsupported h3 { font-size: 18px; font-weight: 600; color: #1e293b; margin: 16px 0 8px; }
.viewer-content .preview-unsupported p { margin-bottom: 24px; }

/* Loading state */
.viewer-content .preview-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 24px; color: #94a3b8; gap: 12px;
}
.viewer-content .preview-loading .spin { animation: spin 1s linear infinite; }

/* Responsive
   ======================================================================== */

/* ── Sidebar Backdrop (mobile) ── */
.sidebar-backdrop {
  display: none;
}

/* ── Mobile action bar in viewer (hidden on desktop) ── */
.viewer-mobile-actions {
  display: none;
}

/* ── Breadcrumb horizontal scroll ── */
.breadcrumb-bar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.breadcrumb-list {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   Tablet (max-width: 768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .app-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "footer";
  }

  /* Sidebar: fixed slide-in overlay */
  .sidebar {
    position: fixed;
    top: var(--size-navbar);
    left: 0;
    bottom: 0;
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--easing-default);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* Backdrop: click-away overlay when sidebar is open */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    top: var(--size-navbar);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: calc(var(--z-sidebar) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--easing-default);
  }

  .sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .main-content {
    padding: var(--space-4);
  }

  .navbar-center {
    max-width: 240px;
  }

  /* Touch targets: increase icon buttons to 44px on touch devices */
  .icon-btn {
    min-width: var(--size-touch);
    min-height: var(--size-touch);
  }

  .file-browser.view-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-2);
  }

  .file-list-table th.col-modified,
  .file-list-table th.col-size,
  .file-row td.col-modified,
  .file-row td.col-size {
    display: none;
  }

  /* Viewer adjustments */
  .viewer-body { padding: 0 56px; }
  .viewer-content { padding: var(--space-6) var(--space-5); }
  .viewer-action-btn span { display: none; }
  .viewer-nav { width: 44px; height: 44px; }
  .viewer-nav-prev { left: 6px; }
  .viewer-nav-next { right: 6px; }

  /* Info panel: full width on tablet */
  .viewer-info-panel {
    width: 300px;
  }
}

/* ══════════════════════════════════════════════════════════
   Phone (max-width: 480px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Toolbar stacks vertically */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .toolbar-left {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .toolbar-right {
    margin-left: 0;
    justify-content: flex-start;
    gap: var(--space-2);
  }

  /* Hide toolbar share button on phone (available in viewer mobile bar) */
  #toolbar-share-btn span { display: none; }

  .navbar-center {
    display: none;
  }

  .file-browser.view-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .file-card-icon {
    height: 60px;
  }

  /* Modals: full width */
  .modal-overlay .modal {
    max-width: calc(100% - 24px);
    margin: 0 12px;
  }

  #editor-quill-editor .ql-editor {
    padding: var(--space-6) var(--space-4);
  }

  .toast-container {
    bottom: 12px;
    right: 12px;
    left: 12px;
  }

  .toast {
    min-width: auto;
    max-width: none;
  }

  /* Viewer: hide desktop actions, show mobile action bar */
  .viewer-topbar-actions { display: none; }

  .viewer-mobile-actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 56px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
  }

  .viewer-mobile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    transition: color var(--duration-fast) var(--easing-default);
    min-height: var(--size-touch);
    justify-content: center;
  }

  .viewer-mobile-btn:hover,
  .viewer-mobile-btn:active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
  }

  .viewer-mobile-btn svg {
    width: 20px;
    height: 20px;
  }

  .viewer-body { padding: 0 8px; }
  .viewer-content { padding: var(--space-4) var(--space-3); }
  .viewer-nav { width: 36px; height: 44px; border-radius: var(--radius-md); }
  .viewer-nav-prev { left: 0; }
  .viewer-nav-next { right: 0; }

  /* Viewer bottom bar: tighter */
  .viewer-bottombar { height: 32px; }

  /* Info panel: full screen on phone */
  .viewer-info-panel {
    width: 100%;
    top: 0;
    bottom: 0;
    border-left: none;
  }

  /* Footer: smaller, ensure tappable API button */
  .app-footer {
    height: 28px;
    padding: 0 12px;
    font-size: 10px;
  }

  .footer-link {
    min-height: var(--size-touch);
    display: inline-flex;
    align-items: center;
  }

  /* API docs: tighter padding on phone */
  .api-docs-body {
    padding: 16px 12px 48px;
  }

  .panel-header {
    padding: 12px 16px;
  }

  .api-endpoint-header {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }

  .api-endpoint-detail {
    padding: 8px 10px;
  }

  .api-summary {
    margin-left: 0;
    width: 100%;
  }
}

/* ──────────────────────────────────────────────
   IFC 3D Viewer
   ────────────────────────────────────────────── */
.ifc-viewer-wrapper {
  width: 100%;
  height: 100%;
  min-height: 400px;
  position: relative;
}

.ifc-viewer-wrapper canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Status overlay */
.ifc-status {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  z-index: 10;
  pointer-events: none;
}

.ifc-status-loading {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.ifc-status-success {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.ifc-status-error {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.ifc-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(147, 197, 253, 0.3);
  border-top-color: #93c5fd;
  border-radius: 50%;
  animation: ifc-spin 0.8s linear infinite;
}

@keyframes ifc-spin {
  to { transform: rotate(360deg); }
}

/* Properties panel */
.ifc-prop-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 280px;
  max-height: calc(100% - 24px);
  background: rgba(30, 30, 50, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ifc-prop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.ifc-prop-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.ifc-prop-close:hover {
  color: #ef4444;
}

.ifc-prop-body {
  padding: 12px 14px;
  overflow-y: auto;
  font-size: 12px;
}

.ifc-prop-name {
  font-size: 15px;
  font-weight: 700;
  color: #e0e7ff;
  margin-bottom: 4px;
}

.ifc-prop-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.ifc-prop-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ifc-prop-key {
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}

.ifc-prop-val {
  color: #e2e8f0;
  font-weight: 500;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
  padding-left: 8px;
}