/* ============================================================
   文档管理模块（Documents）样式——对齐 Odoo 19 后端视觉
   ============================================================ */

:root {
  --doc-primary: #714B67;        /* Odoo 19 品牌紫 */
  --doc-primary-dark: #5c3b54;
  --doc-primary-soft: #f3eaf0;
  --doc-gray-100: #f6f7f9;
  --doc-gray-200: #eceef1;
  --doc-gray-300: #dfe2e6;
  --doc-gray-600: #6b7280;
  --doc-gray-800: #343a40;
  --doc-border: #e2e5e9;
  --doc-radius: 8px;
  --doc-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.05);
  --doc-shadow-lg: 0 4px 16px rgba(0,0,0,.10);
}

.cursor-pointer { cursor: pointer; }

/* ---------- 布局 ---------- */
.documents-layout { background: var(--doc-gray-100); font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; }
/* 顶栏与 MainLayout .top-row 对齐：浅灰底 + 同色底边框 + 深色文字 */
.documents-topbar { background: #f7f7f7; color: var(--doc-gray-800); border-bottom: 1px solid #d6d5d5; }
.documents-brand { color: var(--doc-gray-800); font-size: 1.08rem; }
.documents-brand:hover { color: var(--doc-primary); }
.documents-nav .nav-link { color: var(--doc-gray-600); padding: .3rem .85rem; border-radius: 6px; }
.documents-nav .nav-link.active { background: var(--doc-primary); color: #fff; }
.documents-nav .nav-link:not(.active):hover { color: var(--doc-gray-800); background: var(--doc-gray-100); }
.documents-main { min-height: 0; }

/* ---------- 左侧搜索面板 / 文件夹树 ---------- */
.documents-search-panel { width: 100%; background: #fff; }
.documents-tree { font-size: .875rem; padding: .25rem 0; }
.documents-tree-item {
  display: flex; align-items: center; gap: .3rem;
  padding: .32rem .85rem; cursor: pointer; white-space: nowrap;
  color: var(--doc-gray-800); border-radius: 4px; margin: 0 .35rem;
}
.documents-tree-item:hover { background: var(--doc-gray-100); }
.documents-tree-item.active { background: var(--doc-primary-soft); color: var(--doc-primary); font-weight: 600; }
.documents-tree-children { border-left: 1px solid var(--doc-gray-300); margin-left: 1.1rem; }
.documents-tree-separator { height: 1px; background: var(--doc-gray-200); margin: .45rem 0; }
.documents-tree-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--doc-gray-600); }
.documents-tag-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.documents-tree-item.drop-target { background: var(--doc-primary-soft); outline: 2px dashed var(--doc-primary); outline-offset: -2px; }

/* ---------- 标签颜色选择器（色块 1..11） ---------- */
.documents-color-swatch {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .18);
    padding: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: .72rem; line-height: 1;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.documents-color-swatch:hover { transform: scale(1.18); border-color: rgba(0, 0, 0, .35); }
.documents-color-swatch.selected {
    border-color: #212529;
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px rgba(33, 37, 41, .4);
}
.documents-color-swatch i { text-shadow: 0 1px 2px rgba(0, 0, 0, .65); pointer-events: none; }

/* ---------- 概览统计条 ---------- */
.documents-stats { background: #fff; color: var(--doc-gray-600); }
.documents-stats b { color: var(--doc-gray-800); font-weight: 600; }

/* ---------- 控制面板 / 面包屑 ---------- */
.documents-control-panel { min-height: 0; background: #fff; }
.documents-breadcrumb { font-size: .9rem; }
.documents-breadcrumb-link { color: var(--doc-gray-600); text-decoration: none; cursor: pointer; border-radius: 4px; padding: 0 .2rem; }
.documents-breadcrumb-link:hover { color: var(--doc-primary); text-decoration: none; background: var(--doc-gray-100); }
.documents-breadcrumb-current { color: var(--doc-gray-800); font-weight: 600; }
.documents-search-input { max-width: 300px; }
.documents-search-input .form-control { border-color: var(--doc-gray-300); }
.documents-search-input .form-control:focus { border-color: var(--doc-primary); box-shadow: 0 0 0 .2rem rgba(113,75,103,.12); }

/* 按钮主色对齐 Odoo 紫 */
.documents-control-panel .btn-primary, .documents-modal .btn-primary, .documents-share-page .btn-primary {
  background: var(--doc-primary); border-color: var(--doc-primary);
}
.documents-control-panel .btn-primary:hover, .documents-modal .btn-primary:hover { background: var(--doc-primary-dark); border-color: var(--doc-primary-dark); }
.documents-control-panel .btn-outline-secondary, .documents-modal .btn-outline-secondary { color: var(--doc-gray-800); border-color: var(--doc-gray-300); }
.documents-control-panel .btn-outline-secondary:hover { background: var(--doc-gray-100); border-color: var(--doc-gray-300); color: var(--doc-gray-800); }
.documents-control-panel .dropdown-menu { border-radius: 6px; box-shadow: var(--doc-shadow-lg); border-color: var(--doc-border); }
.documents-control-panel .dropdown-item.active { background: var(--doc-primary-soft); color: var(--doc-primary); }

/* ---------- 看板 ---------- */
.documents-kanban { background: var(--doc-gray-100); animation: doc-fadein .18s ease; }
.documents-list { background: #fff; animation: doc-fadein .18s ease; }
@keyframes doc-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.documents-kanban-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .8rem;
  padding: .4rem;
}
.documents-kanban-card {
  overflow: hidden; background: #fff; border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius); box-shadow: var(--doc-shadow);
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.documents-kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10); border-color: var(--doc-gray-300); }
.documents-kanban-card.documents-selected { border-color: var(--doc-primary); box-shadow: 0 0 0 2px var(--doc-primary); }
.documents-kanban-card.documents-details-open { background: var(--doc-primary-soft); }
.documents-kanban-card.drag-source { opacity: .5; }
.documents-card-preview {
  height: 130px; background: var(--doc-gray-200); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--doc-gray-200);
  position: relative;
  /* 缩略图加载占位 shimmer */
  background-image: linear-gradient(90deg, #eceef1 25%, #f6f7f9 50%, #eceef1 75%);
  background-size: 200% 100%;
  animation: doc-shimmer 1.5s infinite;
}
.documents-card-preview img.documents-card-thumb { position: absolute; inset: 0; animation: none; }
@keyframes doc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.documents-card-thumb { width: 100%; height: 100%; object-fit: cover; }
.documents-card-thumb-svg { object-fit: contain; background: #fff; }
.documents-favorite { line-height: 1; padding: 0 .2rem; color: var(--doc-gray-600); }
.documents-favorite:hover { color: #f5a623; }
.documents-card-check { line-height: 1; }
.documents-card-badge { background: rgba(255,255,255,.9); border-radius: 4px; padding: 0 .32rem; color: var(--doc-gray-600); }
.documents-folder-icon { font-size: 3rem; color: #e8a33d; }
.documents-empty { color: #9ca3af; font-size: .9rem; }

.documents-kanban-grouped { overflow-x: auto; }
.documents-kanban-column { width: 264px; max-height: 100%; background: var(--doc-gray-200); border-radius: var(--doc-radius); }
.documents-kanban-column-header { background: #fff; border-radius: var(--doc-radius) var(--doc-radius) 0 0; }

/* ---------- 列表 ---------- */
.documents-list { background: #fff; }
.documents-list-table td { padding: .38rem .55rem; font-size: .875rem; }
.documents-list-table tbody tr:hover { background: var(--doc-gray-100); }
/* 快捷方式行（对齐 Odoo 19 list 视图 decoration-info）：淡青底提示"这是快捷方式" */
.documents-list-table tbody tr.documents-shortcut-row > td { background-color: rgba(13, 202, 240, .07); }

/* ---------- 视图级拖放上传（对齐 Odoo documents_drop_zone） ---------- */
.documents-drop-overlay { display: none; position: absolute; inset: 0; z-index: 40; align-items: center; justify-content: center; pointer-events: none; }
.documents-drop-zone.documents-drop-active .documents-drop-overlay { display: flex; }
.documents-drop-overlay-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: calc(100% - 24px); height: calc(100% - 24px);
  border: 2px dashed var(--doc-primary); border-radius: 10px;
  background: rgba(255, 255, 255, .92); color: var(--doc-primary); font-weight: 600;
}
.documents-drop-zone.documents-drop-reject .documents-drop-overlay-inner {
  border-color: var(--doc-gray-600); color: var(--doc-gray-800); background: rgba(255, 255, 255, .95);
}
.documents-list-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--doc-gray-600); }
.documents-list-star { cursor: pointer; color: var(--doc-gray-600); }
.documents-list-star:hover { color: #f5a623; }
.documents-list-name { cursor: pointer; color: var(--doc-gray-800); }
.documents-list-name:hover { color: var(--doc-primary); }

/* ---------- 详情面板 ---------- */
.documents-details-overlay { z-index: 20; box-shadow: -4px 0 16px rgba(0,0,0,.08); }
.documents-details-panel { font-size: .875rem; background: #fff; }
.documents-details-header { background: #fff; }
.documents-details-tabs .nav-link { font-size: .8rem; padding: .45rem .5rem; color: var(--doc-gray-600); border: 0; border-bottom: 2px solid transparent; }
.documents-details-tabs .nav-link.active { color: var(--doc-primary); border-bottom-color: var(--doc-primary); background: transparent; }
.documents-activity-item { font-size: .82rem; border-radius: 6px; border-color: var(--doc-border) !important; }
.documents-chatter-body { white-space: pre-wrap; word-break: break-word; background: var(--doc-gray-100); border-radius: 6px; padding: .4rem .55rem; }

/* ---------- 选择框（底部工具条） ---------- */
.documents-selection-box { font-size: .875rem; background: #fff; box-shadow: 0 -1px 4px rgba(0,0,0,.06); }

/* ---------- 对话框 ---------- */
.documents-modal { z-index: 1055; }
.documents-modal .modal-content { box-shadow: 0 12px 40px rgba(0,0,0,.22); border-radius: 10px; border: 0; }
.documents-modal .modal-header { border-bottom: 1px solid var(--doc-gray-200); }
.documents-modal .modal-footer { border-top: 1px solid var(--doc-gray-200); }
.documents-modal .form-control:focus, .documents-modal .form-select:focus { border-color: var(--doc-primary); box-shadow: 0 0 0 .2rem rgba(113,75,103,.12); }
.documents-move-tree { font-size: .875rem; }
.documents-dropzone { background: var(--doc-gray-100); border: 2px dashed var(--doc-gray-300) !important; transition: border-color .12s, background .12s; }
.documents-dropzone:hover { border-color: var(--doc-primary) !important; }
.documents-dropzone.drag-over { border-color: var(--doc-primary) !important; background: var(--doc-primary-soft); box-shadow: inset 0 0 0 2px var(--doc-primary); }

/* ---------- 右键上下文菜单 ---------- */
.documents-context-menu {
  position: fixed; z-index: 2000; min-width: 200px;
  background: #fff; border: 1px solid var(--doc-border); border-radius: 8px;
  box-shadow: var(--doc-shadow-lg); padding: .3rem 0; font-size: .875rem;
}
.documents-context-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .42rem .85rem; cursor: pointer; color: var(--doc-gray-800);
}
.documents-context-item:hover { background: var(--doc-gray-100); }
.documents-context-item.danger { color: #c0392b; }
.documents-context-item.danger:hover { background: #fdf0ee; }
.documents-context-sep { height: 1px; background: var(--doc-gray-200); margin: .25rem 0; }

/* ---------- 头像 / 标签 ---------- */
.documents-avatar {
  width: 24px; height: 24px; font-size: .68rem;
  color: #fff; flex-shrink: 0; font-weight: 600;
}
.documents-tag { font-size: .7rem; font-weight: 500; }
.documents-link { color: var(--doc-primary); text-decoration: none; cursor: pointer; }
.documents-link:hover { text-decoration: underline; }
.documents-activity-row { font-size: .875rem; border-color: var(--doc-border) !important; border-radius: 6px; }

/* ---------- 预览弹层 ---------- */
.documents-preview-modal {
  position: fixed; inset: 0; z-index: 1060;
  background: rgba(15, 13, 20, .94);
  display: flex; flex-direction: column;
}
.documents-preview-header { background: #2b2630; }
.documents-preview-body { flex: 1; min-height: 0; }
.documents-preview-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.documents-preview-media { max-width: 100%; max-height: 100%; }
.documents-preview-frame { width: 100%; height: 100%; border: 0; background: #fff; }

/* ---------- 门户分享页 ---------- */
.documents-share-page { background: var(--doc-gray-100); }
.documents-share-preview { background: var(--doc-gray-200); }

/* ---------- 移动端响应式（抽屉式详情面板等） ---------- */
@media (max-width: 768px) {
  .documents-sidebar {
    display: block;
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 70;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,.12);
  }
  .documents-sidebar.open { transform: none; }
  .documents-sidebar-backdrop {
    position: fixed; inset: 0; z-index: 69; background: rgba(0,0,0,.35);
  }
  .documents-stats { flex-wrap: wrap; gap: .6rem !important; }
  .documents-control-panel .documents-search-input { max-width: 150px; }
  .documents-kanban-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
  .documents-card-preview { height: 100px; }
  .documents-details-overlay {
    position: fixed; inset: 0; width: 100% !important; z-index: 60;
    animation: doc-drawer .2s ease;
  }
  @keyframes doc-drawer { from { transform: translateX(100%); } to { transform: none; } }
  .documents-breadcrumb { font-size: .82rem; }
  .documents-control-panel .btn { padding: .2rem .45rem; }
}