@font-face { font-family: 'Play'; src: url('/static/fonts/play.ttf') format('truetype'); font-weight: normal; font-style: normal; }

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

:root { --primary: #3b82f6; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; --gray: #6b7280; --dark: #1f2937; --light: #f9fafb; --border: #e5e7eb; --shadow: 0 1px 3px rgba(0,0,0,0.1); --radius: 8px; --spacing: 12px; --panel-height: 64px; --panel-height-small: 48px; --purple: #a78bfa; --purple-hover: #8b5cf6; }

body { font-family: 'Play', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; background: #9ca3af url('/static/images/background.jpg') center/cover fixed; min-height: 100vh; color: var(--dark); line-height: 1.6; }

.header-icon { width: 32px; height: 32px; vertical-align: middle; margin-right: 10px; }

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

.login-container { background: white; padding: 32px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); width: 100%; max-width: 380px; animation: slideUp 0.5s ease; }

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

.login-container h1 { text-align: center; margin-bottom: 24px; color: var(--dark); font-size: 32px; font-weight: bold; }

.login-container h1 .header-icon { width: 36px; height: 36px; vertical-align: middle; margin-right: 10px; }

.login-container input { width: 100%; padding: 12px 16px; margin-bottom: 14px; border: 2px solid var(--border); border-radius: var(--radius); font-family: 'Play', sans-serif; font-size: 16px; transition: border-color 0.3s; outline: none; }

.login-container input:focus { border-color: var(--primary); }

.login-container button { width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: var(--radius); font-family: 'Play', sans-serif; font-size: 18px; font-weight: bold; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }

.login-container button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59,130,246,0.4); }

.login-container button:active { transform: translateY(0); }

.app-container { max-width: 1400px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; height: 100vh; }

.header { background: white; border-radius: var(--radius); padding: 10px 24px; margin-bottom: var(--spacing); box-shadow: var(--shadow); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; flex-shrink: 0; min-height: var(--panel-height); }

.header-left { display: flex; align-items: center; gap: 16px; }

.header-left h1 { font-size: 24px; color: var(--dark); font-weight: bold; display: flex; align-items: center; }

.welcome-text { color: var(--gray); font-size: 16px; font-weight: bold; position: absolute; left: 50%; transform: translateX(-50%); }

.header-right { display: flex; align-items: center; gap: 8px; }

.toolbar { background: white; border-radius: var(--radius); padding: 6px 24px; margin-bottom: var(--spacing); box-shadow: var(--shadow); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; flex-shrink: 0; min-height: var(--panel-height-small); }

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

.btn { padding: 6px 12px; border-radius: var(--radius); border: 2px solid; cursor: pointer; font-family: 'Play', sans-serif; font-size: 14px; font-weight: bold; transition: all 0.3s; display: inline-flex; align-items: center; background: white; position: relative; overflow: hidden; line-height: 1.2; white-space: nowrap; }

.btn:active { transform: scale(0.95); }

.btn-create { color: var(--gray); border-color: var(--gray); }

.btn-create:hover { background: var(--gray); color: white; }

.btn-upload { color: var(--success); border-color: var(--success); }

.btn-upload:hover { background: var(--success); color: white; }

.btn-admin { color: var(--primary); border-color: var(--primary); text-decoration: none; padding: 6px 12px; font-size: 14px; }

.btn-admin:hover { background: var(--primary); color: white; }

.btn-back { color: var(--primary); border-color: var(--primary); text-decoration: none; padding: 6px 12px; font-size: 14px; }

.btn-back:hover { background: var(--primary); color: white; }

.btn-logout { color: var(--danger); border-color: var(--danger); padding: 6px 12px; font-size: 14px; }

.btn-logout:hover { background: var(--danger); color: white; }

.btn-download { color: var(--info); border-color: var(--info); padding: 5px 10px; font-size: 13px; white-space: nowrap; }

.btn-download:hover { background: var(--info); color: white; }

.btn-download-selected { color: var(--info); border-color: var(--info); padding: 6px 12px; font-size: 14px; white-space: nowrap; }

.btn-download-selected:hover { background: var(--info); color: white; }

.btn-view { color: var(--success); border-color: var(--success); padding: 5px 10px; font-size: 13px; white-space: nowrap; }

.btn-view:hover { background: var(--success); color: white; }

.btn-rename { color: var(--success); border-color: var(--success); padding: 5px 10px; font-size: 13px; white-space: nowrap; }

.btn-rename:hover { background: var(--success); color: white; }

.btn-remove { color: var(--warning); border-color: var(--warning); padding: 5px 10px; font-size: 13px; white-space: nowrap; }

.btn-remove:hover { background: var(--warning); color: white; }

.btn-restore { color: var(--success); border-color: var(--success); padding: 5px 10px; font-size: 13px; white-space: nowrap; }

.btn-restore:hover { background: var(--success); color: white; }

.btn-restore-all { color: var(--success); border-color: var(--success); padding: 6px 12px; font-size: 14px; white-space: nowrap; }

.btn-restore-all:hover { background: var(--success); color: white; }

.btn-empty-trash { color: var(--danger); border-color: var(--danger); padding: 6px 12px; font-size: 14px; white-space: nowrap; }

.btn-empty-trash:hover { background: var(--danger); color: white; }

.btn-delete { color: var(--danger); border-color: var(--danger); padding: 5px 10px; font-size: 13px; white-space: nowrap; }

.btn-delete:hover { background: var(--danger); color: white; }

.btn-delete-user { color: var(--danger); border-color: var(--danger); padding: 5px 10px; font-size: 13px; white-space: nowrap; border-radius: var(--radius); cursor: pointer; font-family: 'Play', sans-serif; font-weight: bold; transition: all 0.3s; background: white; }

.btn-delete-user:hover { background: var(--danger); color: white; }

.btn-delete-user:disabled { opacity: 0.5; cursor: not-allowed; background: white; color: var(--danger); border-color: var(--danger); }

.btn-cancel { color: var(--danger); border-color: var(--danger); padding: 8px 20px; font-size: 14px; }

.btn-cancel:hover { background: var(--danger); color: white; }

.btn-confirm { color: var(--success); border-color: var(--success); padding: 8px 20px; font-size: 14px; background: white; }

.btn-confirm:hover { background: var(--success); color: white; }

.btn-trash { border: none; padding: 0; cursor: pointer; background: none; transition: transform 0.2s; flex-shrink: 0; }

.btn-trash:hover { transform: scale(1.1); }

.btn-trash img { width: 32px; height: 32px; }

.path-bar { background: #f3f4f6; padding: 5px 12px; border-radius: var(--radius); font-family: 'Courier New', monospace; font-size: 14px; color: var(--dark); display: flex; align-items: center; gap: 6px; }

.path-label { color: var(--gray); font-weight: bold; font-family: 'Play', sans-serif; }

.content-area { background: white; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: var(--spacing); overflow: hidden; flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }

.content-area.admin-content { background: transparent; box-shadow: none; overflow: visible; }

.file-list { flex: 1; overflow-y: auto; position: relative; }

.file-list::-webkit-scrollbar { width: 8px; }

.file-list::-webkit-scrollbar-track { background: #f1f1f1; }

.file-list::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }

.file-list::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }

.file-header { display: flex; padding: 8px 20px; background: #f8fafc; border-bottom: 2px solid var(--border); font-weight: bold; color: var(--gray); position: sticky; top: 0; z-index: 10; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }

.col-name { flex: 1; min-width: 0; padding: 0 8px; }

.col-size { width: 100px; padding: 0 8px; text-align: right; }

.col-actions { width: 320px; padding: 0 8px; text-align: center; flex-shrink: 0; }

.col-actions-wide { width: 380px; padding: 0 8px; text-align: center; flex-shrink: 0; }

.col-actions-compact { width: 230px; padding: 0 8px; text-align: center; flex-shrink: 0; }

.col-actions-trash { width: 230px; padding: 0 8px; text-align: center; flex-shrink: 0; }

.file-item { display: flex; padding: 8px 20px; border-bottom: 1px solid var(--border); align-items: center; transition: all 0.2s; cursor: pointer; position: relative; font-size: 16px; }

.file-item:hover { background: #f0f4ff; }

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

.file-item.dragover { background: #dbeafe; box-shadow: inset 0 0 0 2px var(--info); }

.file-item .col-name { flex: 1; min-width: 0; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--dark); }

.file-item .col-size { width: 100px; padding: 0 8px; text-align: right; color: var(--gray); font-size: 16px; flex-shrink: 0; }

.file-item .col-actions { width: 320px; padding: 0 8px; flex-shrink: 0; }

.file-item .col-actions-wide { width: 380px; padding: 0 8px; flex-shrink: 0; }

.file-item .col-actions-compact { width: 230px; padding: 0 8px; flex-shrink: 0; }

.file-item .col-actions-trash { width: 230px; padding: 0 8px; flex-shrink: 0; }

.folder-icon { width: 24px; height: 24px; flex-shrink: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; }

.file-icon { width: 24px; height: 24px; flex-shrink: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; }

.back-item { background: #fafafa; }

.back-item .col-name { color: var(--gray); font-weight: bold; }

.back-item:hover { background: #f0f4ff; }

.home-item { background: #fafafa; }

.home-item .col-name { color: var(--dark); font-weight: bold; }

.home-item:hover { background: #f0f4ff; }

.actions { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: nowrap; }

.footer { background: white; border-radius: var(--radius); padding: 6px 24px; box-shadow: var(--shadow); flex-shrink: 0; display: flex; align-items: center; gap: 12px; min-height: var(--panel-height-small); }

.disk-info { display: flex; gap: 8px; flex: 1; }

.disk-stat { display: flex; align-items: baseline; gap: 6px; padding: 4px 10px; background: #f9fafb; border-radius: var(--radius); flex: 1; }

.disk-stat-label { color: var(--gray); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold; }

.disk-stat-value { font-size: 14px; font-weight: bold; }

.progress-container { width: 200px; flex-shrink: 0; }

.progress-bar { width: 100%; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; position: relative; }

.progress-fill { height: 100%; background: linear-gradient(90deg, #10b981 0%, #f59e0b 50%, #ef4444 100%); border-radius: 3px; transition: width 0.5s ease; }

.modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }

.modal-content { background: white; margin: 20px auto; border-radius: 16px; width: calc(100% - 40px); max-width: 1400px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }

.modal-content.pdf-mode { height: calc(100vh - 40px); }

.modal-content.full-mode { height: calc(100vh - 40px); }

.confirm-dialog { max-width: 460px; margin-top: 20vh; height: auto !important; }

.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 2px solid var(--border); flex-shrink: 0; }

.modal-header h3 { color: var(--dark); font-size: 18px; margin: 0; }

.close-btn { background: none; border: none; font-size: 24px; color: var(--gray); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; transition: all 0.3s; display: flex; align-items: center; justify-content: center; line-height: 1; }

.close-btn:hover { background: #f3f4f6; color: var(--danger); }

.modal-body { padding: 16px 20px; overflow-y: auto; flex: 0 0 auto; }

.modal-content.pdf-mode .modal-body,
.modal-content.full-mode .modal-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

.modal-body img { max-width: 100%; border-radius: 8px; }

.modal-body pre { background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px; overflow-x: auto; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.5; }

.rename-form { display: flex; gap: 12px; margin-top: 16px; }

.rename-form input { flex: 1; padding: 12px 16px; border: 2px solid var(--border); border-radius: var(--radius); font-family: 'Play', sans-serif; font-size: 16px; outline: none; }

.rename-form input:focus { border-color: var(--primary); }

.rename-form .btn { background: var(--primary); color: white; border-color: var(--primary); font-size: 16px; padding: 12px 20px; }

.rename-form .btn:hover { background: #2563eb; }

.admin-grid { display: grid; grid-template-columns: 420px 1fr; gap: var(--spacing); height: 100%; padding: 0; }

.admin-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; overflow: hidden; display: flex; flex-direction: column; }

.admin-card h2 { font-size: 22px; color: var(--dark); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }

.user-create-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.form-row-pair { display: flex; gap: 10px; }

.form-row-pair input { flex: 1; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius); font-family: 'Play', sans-serif; font-size: 15px; outline: none; min-width: 0; width: 100%; box-sizing: border-box; }

.form-row-pair input:focus { border-color: var(--primary); }

.form-bottom-row { display: flex; align-items: center; gap: 12px; }

.form-bottom-row label { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--gray); white-space: nowrap; }

.form-bottom-row input[type="checkbox"] { width: 18px; height: 18px; padding: 0; }

.btn-add-user { padding: 8px 16px; border-radius: var(--radius); border: 2px solid var(--gray); cursor: pointer; font-family: 'Play', sans-serif; font-size: 14px; font-weight: bold; transition: all 0.3s; background: white; color: var(--gray); margin-left: auto; }

.btn-add-user:hover { background: var(--gray); color: white; }

.data-table { width: 100%; border-collapse: collapse; margin-top: 12px; }

.data-table th { text-align: left; padding: 12px; background: #f8fafc; color: var(--gray); font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border); }

.data-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 16px; }

.data-table tr:hover { background: #f9fafb; }

.data-table .badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 14px; font-weight: bold; }

.badge-admin { background: #dbeafe; color: #1e40af; }

.badge-user { background: #f3f4f6; color: #374151; }

.logs-container { max-height: 600px; overflow-y: auto; }

.log-entry { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 15px; display: grid; grid-template-columns: 170px 100px 130px 1fr; gap: 10px; align-items: center; }

.log-entry:hover { background: #f9fafb; }

.log-time { color: var(--gray); font-size: 14px; }

.log-user { font-weight: bold; color: var(--primary); font-size: 15px; }

.log-action { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 13px; font-weight: bold; text-transform: uppercase; text-align: center; }

.action-create { background: #d1fae5; color: #065f46; }

.action-upload { background: #dbeafe; color: #1e40af; }

.action-download { background: #e0e7ff; color: #3730a3; }

.action-view { background: #fef3c7; color: #92400e; }

.action-rename { background: #fed7aa; color: #9a3412; }

.action-delete { background: #fecaca; color: #991b1b; }

.action-move { background: #e0e7ff; color: #3730a3; }

.action-move_to_trash { background: #fecaca; color: #991b1b; }

.action-restore_from_trash { background: #d1fae5; color: #065f46; }

.log-path { color: var(--dark); font-family: 'Courier New', monospace; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pagination { display: flex; gap: 4px; margin-top: 16px; justify-content: center; flex-wrap: wrap; }

.pagination button { padding: 6px 12px; border: 1px solid var(--border); background: white; border-radius: 6px; cursor: pointer; font-family: 'Play', sans-serif; font-size: 14px; transition: all 0.3s; }

.pagination button:hover { background: var(--primary); color: white; border-color: var(--primary); }

.pagination button:disabled { background: var(--primary); color: white; border-color: var(--primary); }

@media (max-width: 768px) {
  .app-container { padding: 10px; }
  .header, .toolbar, .footer { border-radius: 12px; padding: 6px 12px; }
  .header { flex-direction: column; min-height: auto; }
  .header-left { justify-content: center; }
  .welcome-text { position: static; transform: none; }
  .file-header, .file-item { padding: 6px 12px; }
  .col-size { width: 70px; }
  .col-actions-compact { width: 200px; }
  .col-actions-trash { width: 200px; }
  .admin-grid { grid-template-columns: 1fr; }
  .log-entry { grid-template-columns: 1fr; gap: 4px; }
  .modal-content { margin: 10px; width: calc(100% - 20px); }
  .modal-content.pdf-mode { height: calc(100vh - 20px); }
  .modal-content.full-mode { height: calc(100vh - 20px); }
  .confirm-dialog { margin-top: 10vh; height: auto !important; }
  .progress-container { width: 100%; }
  .login-page { padding-top: 15vh; }
  .form-row-pair { flex-direction: column; }
}

/* Стили для выделенных файлов */

.file-item.selected { background: #dbeafe !important; }

/* .file-item.selected { background: #f3f4f6 !important; } */

.file-item.selectable { user-select: none; }

.btn-send-email { color: var(--purple); border-color: var(--purple); padding: 6px 12px; font-size: 14px; white-space: nowrap; background: white; }

.btn-send-email:hover { background: var(--purple-hover); color: white; border-color: var(--purple-hover); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.action-send_email { background: #e0e7ff; color: #3730a3; }