.documents-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

.doc-tabs {
  margin: 20px 20px 0;
}

.documents-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- Document type icon (table) ---------- */
.doc-type-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-type-icon .icon {
  width: 19px;
  height: 19px;
}

.doc-type-icon.blue { background: var(--color-primary-light); color: var(--color-primary); }
.doc-type-icon.green { background: var(--color-success-icon-bg); color: var(--color-success); }
.doc-type-icon.red { background: var(--color-danger-bg); color: var(--color-danger); }
.doc-type-icon.purple { background: var(--color-purple-bg); color: var(--color-purple); }

/* ---------- Storage card ---------- */
.storage-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 14px;
}

.storage-card-header .storage-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.storage-card-header .storage-icon .icon {
  width: 18px;
  height: 18px;
}

.storage-card-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.storage-progress {
  padding: 0 20px 16px;
}

.storage-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.storage-progress-row strong {
  color: var(--color-text);
  font-weight: 700;
}

.storage-actions {
  padding: 0 20px 20px;
}

/* ---------- Quick links list ---------- */
.quick-link-list {
  display: flex;
  flex-direction: column;
  padding: 8px 12px 16px;
  gap: 2px;
}

.quick-link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: background var(--transition);
}

.quick-link-item:hover {
  background: var(--color-border-light);
}

.quick-link-item .icon {
  width: 17px;
  height: 17px;
  color: var(--color-text-muted);
}

.quick-link-item.primary {
  color: var(--color-primary);
}

.quick-link-item.primary .icon {
  color: var(--color-primary);
}

.quick-link-item.danger {
  color: var(--color-danger);
}

.quick-link-item.danger .icon {
  color: var(--color-danger);
}

.quick-link-item.danger:hover {
  background: var(--color-danger-bg);
}

@media (max-width: 1200px) {
  .documents-layout {
    grid-template-columns: 1fr;
  }
}