/* ═══════════════════════════════════════════════════════════
   נדל״ן פרו — Documents Module Styles
   Grid view, List view, Upload modal, File cards
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. PAGE LAYOUT
   ───────────────────────────────────────────────────────── */

.docs-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.docs-view-toggle {
    display: flex;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 3px;
    border: 1px solid var(--border-default);
}

.docs-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.docs-content { min-height: 200px; }

.docs-tx-filter {
    height: 36px;
    font-size: var(--text-xs);
    min-width: 180px;
}

/* ─────────────────────────────────────────────────────────
   2. STATS BAR
   ───────────────────────────────────────────────────────── */

.docs-stats-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.docs-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.docs-stat-chip .material-icons-round { font-size: 14px; }

.docs-stat-chip.navy    { background: var(--navy-50); color: var(--navy-700); }
.docs-stat-chip.gold    { background: var(--gold-50); color: var(--gold-700); }
.docs-stat-chip.gray    { background: var(--gray-75); color: var(--gray-600); }

/* ─────────────────────────────────────────────────────────
   3. GRID VIEW
   ───────────────────────────────────────────────────────── */

.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.docs-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    overflow: hidden;
    cursor: pointer;
    transition:
        box-shadow var(--duration-fast),
        transform var(--duration-fast) var(--ease-spring),
        border-color var(--duration-fast);
}
.docs-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--navy-200);
}

/* File icon area */
.docs-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-4);
    background: var(--gray-25);
    border-bottom: 1px solid var(--border-subtle);
}
.docs-card-icon .material-icons-round { font-size: 36px; }

.docs-card-icon.danger  { background: rgba(239,68,68,0.04); }
.docs-card-icon.danger .material-icons-round  { color: var(--danger-500); }
.docs-card-icon.navy    { background: rgba(77,103,147,0.04); }
.docs-card-icon.navy .material-icons-round    { color: var(--navy-500); }
.docs-card-icon.emerald { background: rgba(16,185,129,0.04); }
.docs-card-icon.emerald .material-icons-round { color: var(--emerald-600); }
.docs-card-icon.gold    { background: rgba(196,166,112,0.04); }
.docs-card-icon.gold .material-icons-round    { color: var(--gold-600); }
.docs-card-icon.gray    { background: var(--gray-25); }
.docs-card-icon.gray .material-icons-round    { color: var(--gray-400); }
.docs-card-icon.info    { background: rgba(59,130,246,0.04); }
.docs-card-icon.info .material-icons-round    { color: var(--info-500); }

.docs-card-ext {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    color: var(--text-muted);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* Card info */
.docs-card-info { padding: var(--space-3) var(--space-4); }

.docs-card-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: var(--space-1-5);
}

.docs-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.docs-card-category {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    color: var(--navy-600);
    background: var(--navy-50);
    padding: 1px 8px;
    border-radius: var(--radius-full);
}
.docs-card-category .material-icons-round { font-size: 11px; }

.docs-card-size {
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.docs-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.docs-card-tx {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.docs-card-tx .material-icons-round { font-size: 12px; }

.docs-card-date {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Card actions */
.docs-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    padding: 0 var(--space-3) var(--space-3);
}

/* ─────────────────────────────────────────────────────────
   4. LIST VIEW
   ───────────────────────────────────────────────────────── */

.docs-table { min-width: 750px; }

.docs-row {
    cursor: pointer;
    transition: background var(--duration-fast);
}
.docs-row:hover { background: var(--gray-25); }

.docs-list-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.docs-list-icon .material-icons-round { font-size: 18px; }

.docs-list-icon.danger  { background: rgba(239,68,68,0.08); color: var(--danger-500); }
.docs-list-icon.navy    { background: rgba(77,103,147,0.08); color: var(--navy-500); }
.docs-list-icon.emerald { background: rgba(16,185,129,0.08); color: var(--emerald-600); }
.docs-list-icon.gold    { background: rgba(196,166,112,0.08); color: var(--gold-600); }
.docs-list-icon.gray    { background: var(--gray-75); color: var(--gray-400); }
.docs-list-icon.info    { background: rgba(59,130,246,0.08); color: var(--info-500); }

.docs-list-name-cell { max-width: 260px; }

.docs-list-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.docs-list-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.docs-list-cat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    color: var(--navy-600);
    background: var(--navy-50);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}
.docs-list-cat .material-icons-round { font-size: 12px; }

.docs-list-tx {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    color: var(--navy-600);
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    transition: background var(--duration-fast);
}
.docs-list-tx .material-icons-round { font-size: 13px; }
.docs-list-tx:hover { background: var(--navy-50); }

/* ─────────────────────────────────────────────────────────
   5. UPLOAD MODAL
   ───────────────────────────────────────────────────────── */

.docs-upload-modal { max-width: 560px; }

.docs-upload-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Drop zone */
.docs-drop-zone {
    position: relative;
    border: 2px dashed var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-4);
    cursor: pointer;
    text-align: center;
    transition:
        border-color var(--duration-fast),
        background var(--duration-fast);
}
.docs-drop-zone:hover,
.docs-drop-zone.drag-over {
    border-color: var(--navy-300);
    background: rgba(77,103,147,0.03);
}

.docs-drop-zone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
}
.docs-drop-zone-inner > .material-icons-round {
    font-size: 40px;
    color: var(--gray-300);
}
.docs-drop-zone:hover .material-icons-round { color: var(--navy-400); }

.docs-drop-zone-text {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    margin: 0;
}

.docs-drop-zone-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
}

.docs-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* File preview in upload modal */
.docs-file-preview {
    margin-top: calc(-1 * var(--space-2));
}

.docs-file-preview-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--gray-25);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
}

.docs-file-preview-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.docs-file-preview-icon .material-icons-round { font-size: 20px; }

.docs-file-preview-icon.danger  { background: rgba(239,68,68,0.08); color: var(--danger-500); }
.docs-file-preview-icon.navy    { background: rgba(77,103,147,0.08); color: var(--navy-500); }
.docs-file-preview-icon.emerald { background: rgba(16,185,129,0.08); color: var(--emerald-600); }
.docs-file-preview-icon.gold    { background: rgba(196,166,112,0.08); color: var(--gold-600); }
.docs-file-preview-icon.gray    { background: var(--gray-75); color: var(--gray-400); }
.docs-file-preview-icon.info    { background: rgba(59,130,246,0.08); color: var(--info-500); }

.docs-file-preview-info { flex: 1; min-width: 0; }

.docs-file-preview-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.docs-file-preview-size {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Upload progress */
.docs-progress-wrap { margin-top: var(--space-2); }

.docs-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-1-5);
}

.docs-progress-track {
    height: 6px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.docs-progress-fill {
    height: 100%;
    width: 0;
    background: var(--gradient-navy);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

/* ─────────────────────────────────────────────────────────
   6. DETAIL MODAL
   ───────────────────────────────────────────────────────── */

.docs-detail-modal { max-width: 500px; }

.docs-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-4);
}

.docs-detail-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.docs-detail-icon .material-icons-round { font-size: 28px; }

.docs-detail-icon.danger  { background: rgba(239,68,68,0.08); color: var(--danger-500); }
.docs-detail-icon.navy    { background: rgba(77,103,147,0.08); color: var(--navy-500); }
.docs-detail-icon.emerald { background: rgba(16,185,129,0.08); color: var(--emerald-600); }
.docs-detail-icon.gold    { background: rgba(196,166,112,0.08); color: var(--gold-600); }
.docs-detail-icon.gray    { background: var(--gray-75); color: var(--gray-400); }
.docs-detail-icon.info    { background: rgba(59,130,246,0.08); color: var(--info-500); }

.docs-detail-info { flex: 1; min-width: 0; }

.docs-detail-name {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
    word-break: break-word;
}

.docs-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.docs-detail-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.docs-detail-meta .material-icons-round { font-size: 14px; }

.docs-detail-tx {
    margin-bottom: var(--space-3);
}

.docs-detail-desc {
    margin-bottom: var(--space-2);
}
.docs-detail-desc p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: var(--space-1) 0 0;
}

.docs-detail-modal .modal-footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* ─────────────────────────────────────────────────────────
   7. TRANSACTION DETAIL — Documents Tab
   ───────────────────────────────────────────────────────── */

.txd-docs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.txd-docs-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--weight-semibold);
}

.txd-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}

.txd-doc-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        box-shadow var(--duration-fast),
        border-color var(--duration-fast);
}
.txd-doc-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--navy-200);
}

.txd-doc-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.txd-doc-card-icon .material-icons-round { font-size: 18px; }

.txd-doc-card-icon.danger  { background: rgba(239,68,68,0.08); color: var(--danger-500); }
.txd-doc-card-icon.navy    { background: rgba(77,103,147,0.08); color: var(--navy-500); }
.txd-doc-card-icon.emerald { background: rgba(16,185,129,0.08); color: var(--emerald-600); }
.txd-doc-card-icon.gold    { background: rgba(196,166,112,0.08); color: var(--gold-600); }
.txd-doc-card-icon.gray    { background: var(--gray-75); color: var(--gray-400); }
.txd-doc-card-icon.info    { background: rgba(59,130,246,0.08); color: var(--info-500); }

.txd-doc-card-info { flex: 1; min-width: 0; }

.txd-doc-card-name {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.txd-doc-card-meta {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────
   8. RESPONSIVE
   ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .docs-grid { grid-template-columns: 1fr; }
    .txd-docs-grid { grid-template-columns: 1fr; }
    .docs-header-actions { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .docs-toolbar { flex-direction: column; }
    .docs-detail-header { flex-direction: column; text-align: center; }
}