:root {
  --primary-color: #3b82f6;
  --primary-hover: #2563eb;
  --bg-main: #f1f5f9;
  --bg-card: #ffffff;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --text-link: #2563eb;
  --text-link-hover: #1d4ed8;
  --border-color: #e2e8f0;
  --border-dashed: #cbd5e1;
  --hover-bg: #f8fafc;
  --th-bg: #f1f5f9;
  --wrapper-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --border-radius: 8px;
  
  --message-ok-bg: #f0fdf4;
  --message-ok-border: #bbf7d0;
  --message-ok-text: #166534;
  --message-err-bg: #fef2f2;
  --message-err-border: #fca5a5;
  --message-err-text: #991b1b;
  --message-warn-bg: #fffbeb;
  --message-warn-border: #fde68a;
  --message-warn-text: #92400e;
}

html.dark {
  --primary-color: #60a5fa;
  --primary-hover: #93c5fd;
  --bg-main: #0f172a;
  --bg-card: #1e293b;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-link: #60a5fa;
  --text-link-hover: #93c5fd;
  --border-color: #334155;
  --border-dashed: #475569;
  --hover-bg: #1e293b;
  --th-bg: #0f172a;
  --wrapper-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  
  --message-ok-bg: #064e3b;
  --message-ok-border: #047857;
  --message-ok-text: #a7f3d0;
  --message-err-bg: #7f1d1d;
  --message-err-border: #b91c1c;
  --message-err-text: #fca5a5;
  --message-warn-bg: #78350f;
  --message-warn-border: #b45309;
  --message-warn-text: #fde68a;
}

html,body,div,span,p,pre,a,code,em,img,small,strong,ol,ul,li,form,label,table,tr,th,td{margin:0;padding:0;vertical-align:baseline;outline:none;font-size:100%;background:transparent;border:none;text-decoration:none}
html{overflow-y:auto}
body{padding: 16px 0;font: 13px / 1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;color: var(--text-main);background-color: var(--bg-main);min-height: 100vh;position: relative;box-sizing: border-box;transition: background-color 0.3s, color 0.3s;}
input,select,textarea,button{font-size:inherit;font-family:inherit}
a{color:var(--text-link);text-decoration:none;transition:color 0.2s ease}
a:hover{color:var(--text-link-hover)}
img{vertical-align:middle;border:none}
a img{border:none}span.gray{color:var(--text-muted)}small{font-size:11px;color:var(--text-muted)}p{margin-bottom:10px}
ul{margin-left:2em;margin-bottom:10px}ul{list-style-type:none;margin-left:0}ul li{padding:3px 0}
table{border-collapse:collapse;border-spacing:0;margin-bottom:16px;width:100%;border-radius:var(--border-radius);overflow:hidden}
th,td{padding:8px 12px;text-align:left;vertical-align:middle;border:1px solid var(--border-color);background-color:var(--bg-card);white-space:nowrap;color:var(--text-main);transition:background-color 0.2s, border-color 0.2s}
th,td.gray{background-color:var(--th-bg);color:var(--text-muted);font-weight:600}
td.gray span{color:var(--text-muted)}
tr:hover td{background-color:var(--hover-bg)}
tr:hover td.gray{background-color:var(--th-bg)}
th.col-downloads, td.col-downloads{text-align:center;color:var(--text-muted)}
code,pre{display:block;margin-bottom:16px;font:12px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;border:1px dashed var(--border-dashed);background-color:var(--bg-card);color:var(--text-main);padding:12px;border-radius:var(--border-radius);overflow:auto;white-space:pre-wrap;word-break:break-all;}
pre.with-hljs{padding:0}
pre.with-hljs code{margin:0;border:0;overflow:visible;padding:12px;white-space:pre-wrap;word-break:break-all;}
code.maxheight,pre.maxheight{max-height:512px}input[type="checkbox"]{margin:0;padding:0}
#wrapper{max-width:1000px;min-width:360px;margin: 20px auto;padding: 16px;background-color: var(--bg-card);border-radius: var(--border-radius);box-shadow: var(--wrapper-shadow);border: 1px solid var(--border-color);box-sizing: border-box;transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;}
body.login-page {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
body.login-page #wrapper{width:340px;margin:auto;padding:24px;box-sizing:border-box;height:auto;}
.path{padding: 10px 14px;border: 1px solid var(--border-color);background-color: var(--th-bg);border-radius: var(--border-radius);margin-bottom: 16px;transition: background-color 0.3s, border-color 0.3s, color 0.3s;display: flex;align-items: center;justify-content: space-between;}
.path:not(.view-page-path) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.view-page-path {
  display: block !important;
}
.view-page-path p {
  margin-bottom: 10px;
}
.view-page-path p:last-child {
  margin-bottom: 0;
}
.path .float-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  float: none !important; /* Отменяем float для перехода на современный flexbox */
}
.path .float-right a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-link);
}
.path .float-right a:hover {
  color: var(--text-link-hover);
}
.login-page .path{height:auto;display:block;border-radius:0;border:none;background-color:transparent;padding:0;}
.right{text-align:right}.center{text-align:center}.float-right{float:right}
/* Toasts / Notifications */
#fm-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
  width: calc(100% - 40px);
}

.fm-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--wrapper-shadow);
  pointer-events: auto;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s, background-color 0.3s, border-color 0.3s;
}

.fm-toast.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.fm-toast.hide {
  transform: translateY(-20px) scale(0.9);
  opacity: 0;
}

.fm-toast-icon {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.fm-toast-body {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-main);
  flex-grow: 1;
}

.fm-toast-close {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s;
  font-size: 16px;
  margin-top: 2px;
}

.fm-toast-close:hover {
  color: var(--text-main);
}

.fm-toast.ok {
  background-color: var(--message-ok-bg);
  border-color: var(--message-ok-border);
}
.fm-toast.ok .fm-toast-icon {
  color: var(--message-ok-text);
}
.fm-toast.ok .fm-toast-body {
  color: var(--message-ok-text);
}
.fm-toast.ok .fm-toast-close {
  color: var(--message-ok-text);
  opacity: 0.7;
}
.fm-toast.ok .fm-toast-close:hover {
  opacity: 1;
}

.fm-toast.error {
  background-color: var(--message-err-bg);
  border-color: var(--message-err-border);
}
.fm-toast.error .fm-toast-icon {
  color: var(--message-err-text);
}
.fm-toast.error .fm-toast-body {
  color: var(--message-err-text);
}
.fm-toast.error .fm-toast-close {
  color: var(--message-err-text);
  opacity: 0.7;
}
.fm-toast.error .fm-toast-close:hover {
  opacity: 1;
}

.fm-toast.alert {
  background-color: var(--message-warn-bg);
  border-color: var(--message-warn-border);
}
.fm-toast.alert .fm-toast-icon {
  color: var(--message-warn-text);
}
.fm-toast.alert .fm-toast-body {
  color: var(--message-warn-text);
}
.fm-toast.alert .fm-toast-close {
  color: var(--message-warn-text);
  opacity: 0.7;
}
.fm-toast.alert .fm-toast-close:hover {
  opacity: 1;
}

.btn{border:0;background:none;padding:0;margin:0;font-weight:bold;color:var(--text-link);cursor:pointer;transition:color 0.2s}.btn:hover{color:var(--text-link-hover)}

input[type="text"], input[type="password"], input[type="search"], input[type="number"], select, textarea {
  padding: 8px 12px;
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
input[type="submit"], button.submit, .btn-primary {
  padding: 8px 20px;
  background-color: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:active,
a.btn-primary:visited {
  color: #ffffff;
}
input[type="submit"]:hover, button.submit:hover, .btn-primary:hover {
  background-color: var(--primary-hover);
}
input[type="submit"]:active, button.submit:active, .btn-primary:active {
  transform: scale(0.98);
}
.preview-img{max-width:100%;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAKklEQVR42mL5//8/Azbw+PFjrOJMDCSCUQ3EABZc4S0rKzsaSvTTABBgAMyfCMsY4B9iAAAAAElFTkSuQmCC") repeat 0 0}

/* Media Players Container Styles */
.preview-video-container {
  max-width: 100%;
  width: 720px;
  margin: 16px auto;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--wrapper-shadow);
  border: 1px solid var(--border-color);
  background-color: #000000;
}

.preview-audio-container {
  max-width: 100%;
  width: 500px;
  margin: 16px auto;
  border-radius: var(--border-radius);
  overflow: visible; /* Разрешаем выход за пределы контейнера для меню настроек */
  box-shadow: var(--wrapper-shadow);
  border: 1px solid var(--border-color);
}

/* Custom Plyr Theme Blending */
:root {
  --plyr-color-main: var(--primary-color);
  --plyr-video-background: #000000;
  --plyr-audio-background: var(--bg-card);
  --plyr-audio-controls-background: var(--bg-card);
  --plyr-audio-control-color: var(--text-main);
  --plyr-audio-control-color-hover: var(--primary-color);
  --plyr-menu-background: var(--bg-card);
  --plyr-menu-color: var(--text-main);
  --plyr-tooltip-background: var(--bg-card);
  --plyr-tooltip-color: var(--text-main);
}

/* Фикс наведения на кнопки Plyr: библиотека использует SVG внутри кнопок, 
   при наведении кнопки не должны заливаться синим фоном скрыть иконку */
.plyr__controls .plyr__control:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--primary-color) !important;
}

/* Фикс активных/нажатых кнопок (например, открытая шестеренка настроек), 
   чтобы они не превращались в сплошной синий квадрат без иконки */
.plyr__controls .plyr__control[aria-expanded="true"],
.plyr__controls .plyr__control[aria-pressed="true"],
.plyr__controls .plyr__control--pressed {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--primary-color) !important;
}

/* Фикс z-index для всплывающего меню настроек */
.plyr__menu {
  position: relative;
  z-index: 10001 !important;
}

.plyr__menu__container {
  z-index: 10002 !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--wrapper-shadow) !important;
}

/* Интеграция со светлой/темной темой */
.plyr--audio .plyr__controls {
  border: none !important;
  color: var(--text-main) !important;
  overflow: visible !important; /* Позволяет выпадающему меню настроек выходить за рамки плеера */
}

.plyr--audio {
  border-radius: var(--border-radius) !important;
  overflow: visible !important; /* Убираем обрезание выпадающего меню в аудиоплеере */
}

.plyr__control--overlaid {
  background: rgba(59, 130, 246, 0.85) !important;
}

.plyr__control--overlaid:hover {
  background: var(--primary-color) !important;
}

.plyr__menu__container {
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--wrapper-shadow) !important;
}

.plyr__menu__container span, .plyr__menu__container label {
  color: var(--text-main) !important;
}

.plyr__menu__container input[type="radio"]:checked + label {
  background: var(--primary-color) !important;
  color: #ffffff !important;
}


/* Tabler Icons */
.ti {
  font-size: 15px; /* Компактный размер для соответствия тексту */
  line-height: 1;
  display: inline-block;
  vertical-align: -0.15em;
  color: currentColor;
}

i[class^="icon-"], i[class*=" icon-"]{display:inline-block;width:16px;height:16px;background:url("index.php?img=sprites&t=20160315") no-repeat 0 0;vertical-align:bottom}
.icon-document{background-position:-16px 0}.icon-folder{background-position:-32px 0}
.icon-folder_add{background-position:-48px 0}.icon-upload{background-position:-64px 0}
.icon-arrow_up{background-position:-80px 0}.icon-home{background-position:-96px 0}
.icon-separator{background-position:-112px 0}.icon-cross{background-position:-128px 0}
.icon-copy{background-position:-144px 0}.icon-apply{background-position:-160px 0}
.icon-cancel{background-position:-176px 0}.icon-rename{background-position:-192px 0}
.icon-checkbox{background-position:-208px 0}.icon-checkbox_invert{background-position:-224px 0}
.icon-checkbox_uncheck{background-position:-240px 0}.icon-download{background-position:-256px 0}
.icon-goback{background-position:-272px 0}.icon-folder_open{background-position:-288px 0}
.icon-file_application{background-position:0 -16px}.icon-file_code{background-position:-16px -16px}
.icon-file_csv{background-position:-32px -16px}.icon-file_excel{background-position:-48px -16px}
.icon-file_film{background-position:-64px -16px}.icon-file_flash{background-position:-80px -16px}
.icon-file_font{background-position:-96px -16px}.icon-file_html{background-position:-112px -16px}
.icon-file_illustrator{background-position:-128px -16px}.icon-file_image{background-position:-144px -16px}
.icon-file_music{background-position:-160px -16px}.icon-file_outlook{background-position:-176px -16px}
.icon-file_pdf{background-position:-192px -16px}.icon-file_photoshop{background-position:-208px -16px}
.icon-file_php{background-position:-224px -16px}.icon-file_playlist{background-position:-240px -16px}
.icon-file_powerpoint{background-position:-256px -16px}.icon-file_swf{background-position:-272px -16px}
.icon-file_terminal{background-position:-288px -16px}.icon-file_text{background-position:-304px -16px}
.icon-file_word{background-position:-320px -16px}.icon-file_zip{background-position:-336px -16px}
.icon-logout{background-position:-304px 0}.icon-chain{background-position:-320px 0}
.icon-link_folder{background-position:-352px -16px}.icon-link_file{background-position:-368px -16px}

.icon-1c_cfe{background-position:-352px 0px}
.icon-1c_epf{background-position:-336px 0px}

#upload_banner {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1000000;
  background-color: rgba(15, 23, 42, 0.7);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#upload_banner.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.upload-wrapper {
  width: 480px;
  max-width: calc(100vw - 32px);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 24px;
  border-radius: var(--border-radius);
  box-shadow: var(--wrapper-shadow);
  text-align: center;
  box-sizing: border-box;
}

.icongif-upload {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("index.php?img=uploading");
}

.percent-upload {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 12px;
  height: auto;
}

.progress-bar-container {
  width: 100%;
  height: 8px;
  background-color: var(--bg-main);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-bar-fill {
  width: 0%;
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 4px;
  transition: width 0.1s ease;
}

.upload-status-text {
  font-size: 13px;
  color: var(--text-muted);
}

.upload-files-list {
  margin-top: 14px;
  max-height: 180px;
  overflow-y: auto;
  text-align: left;
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
}

.upload-file-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 0;
  color: var(--text-main);
}

.upload-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-file-size {
  flex-shrink: 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Drag & Drop Overlay */
#drag_drop_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(59, 130, 246, 0.9);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  color: #ffffff;
}

body.drag-hover #drag_drop_overlay {
  opacity: 1;
}

.drag-drop-message {
  text-align: center;
}

.drag-drop-icon {
  font-size: 72px !important;
  display: block;
  margin: 0 auto 20px auto;
  animation: bounce 1.5s infinite;
}

.drag-drop-message span {
  font-size: 20px;
  font-weight: 600;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.compact-table{border:0;width:auto}.compact-table td,.compact-table th{width:100px;border:0;text-align:center}.compact-table tr:hover td{background-color:#fff}
.filename{max-width:630px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.break-word{word-wrap:break-word}

/* SweetAlert2 Dark Theme Blending */
.swal2-popup {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
}
.swal2-title, .swal2-html-container, .swal2-content {
  color: var(--text-main) !important;
}
.swal2-input, .swal2-textarea {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
}
.swal2-validation-message {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

/* Custom SweetAlert2 Styles for file conflicts */
.swal-text-container {
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-main);
  margin: 10px 0;
}
.swal-file-list {
  background-color: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  padding: 10px 15px !important;
  margin: 15px 0 !important;
  max-height: 160px !important;
  overflow-y: auto !important;
  text-align: left !important;
  list-style-type: none !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.swal-file-list li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
  font-size: 13px !important;
  color: var(--text-main) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.swal-file-list li:last-child {
  border-bottom: none !important;
}
.swal-file-list li .file-icon {
  color: var(--text-muted) !important;
  flex-shrink: 0 !important;
}
.swal-file-list li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SweetAlert2 action button spacing and style improvements */
.swal2-actions {
  gap: 12px !important;
  margin-top: 24px !important;
}

.swal2-styled {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: var(--border-radius) !important;
  margin: 0 !important;
  transition: opacity 0.2s, transform 0.1s, filter 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  border: none !important;
}

/* Скрываем кнопки SweetAlert2, которые библиотека решила не показывать */
.swal2-styled[style*="display: none"] {
  display: none !important;
}

.swal2-styled:hover {
  filter: brightness(0.95);
  opacity: 0.95;
}

.swal2-styled:active {
  transform: scale(0.97) !important;
}

.swal2-styled .ti {
  font-size: 15px !important;
  line-height: 1;
  color: currentColor;
  margin: 0 !important;
  display: inline-block;
  vertical-align: middle;
}

/* Login Page Specific Styles */
.login-header-title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  margin-top: 5px;
  margin-bottom: 20px;
  color: var(--text-main);
}
.login-form-group {
  margin-bottom: 16px;
  text-align: left;
}
.login-form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.login-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.login-input-wrapper input {
  width: 100% !important;
}
.login-input-wrapper input[type="password"] {
  padding-right: 40px !important; /* Make room for the toggle button */
}
.password-toggle-trigger {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  z-index: 10;
}
.password-toggle-trigger:hover {
  color: var(--primary-color);
}
.password-toggle-trigger .ti {
  font-size: 18px;
}

/* Link Copy Button Styles inside Input */
.link-copy-trigger:hover {
  color: var(--primary-color) !important;
}
.link-copy-trigger .ti {
  transition: transform 0.15s ease, color 0.15s ease;
}
.link-copy-trigger:active .ti {
  transform: scale(0.85);
}

/* Action Buttons Styling and Disabled states */
.action-buttons-row {
  display: flex;
  gap: 12px;
  margin-top: 15px;
}
.btn-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: var(--border-radius) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
}
.btn-action .ti {
  font-size: 16px !important;
  vertical-align: middle !important;
}
.btn-danger {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}
.btn-danger:hover:not(:disabled) {
  background-color: #dc2626 !important;
}
.btn-warning {
  background-color: #f59e0b !important;
  color: #ffffff !important;
}
.btn-warning:hover:not(:disabled) {
  background-color: #d97706 !important;
}
.btn-action:disabled {
  background-color: var(--border-color) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  transform: none !important;
}

/* Project Header */
.fm-project-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.fm-project-title {
  margin: 0;
  padding: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.fm-project-title .ti {
  color: var(--primary-color);
  font-size: 24px;
}

.fm-project-version {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background-color: var(--hover-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  vertical-align: middle;
  margin-left: 4px;
  display: inline-block;
}

.login-page .fm-project-title {
  font-size: 18px;
}

.login-page .fm-project-title .ti {
  font-size: 20px;
}

/* Short link landing page (s.php) */
.short-link-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

.short-link-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: var(--wrapper-shadow);
  overflow: visible;
}

.short-link-preview {
  margin: -20px -20px 16px;
  overflow: hidden;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.short-link-audio {
  margin-bottom: 16px;
  position: relative;
  z-index: 5;
}

.short-link-audio .preview-audio-container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: none;
  background: var(--bg-card);
  overflow: visible;
}

.short-link-audio .preview-audio-container .plyr--audio {
  width: 100%;
  overflow: visible;
}

.short-link-audio .preview-audio-container .plyr__controls {
  padding: 8px 10px;
  overflow: visible;
}

.short-link-audio .plyr__menu {
  position: relative;
  z-index: 20;
}

.short-link-audio .plyr__menu__container {
  z-index: 21;
}

.short-link-preview .preview-img {
  display: block;
  width: 100%;
  max-width: 100%;
  border: none;
  border-radius: 0;
  margin: 0;
}

.short-link-preview .preview-video-container {
  width: 100%;
  max-width: none;
  margin: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background-color: #000000;
}

.short-link-file-title {
  font-size: 18px;
  margin: 0 0 6px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  word-break: break-word;
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.4;
}

.short-link-file-title .ti {
  color: var(--primary-color);
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.short-link-meta {
  color: var(--text-muted);
  margin: 0 0 16px;
  font-size: 14px;
}

.short-link-actions {
  margin-top: 4px;
}

.short-link-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* Modal Overlay & Box styles for index.php */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal-overlay.show {
  display: flex !important;
  opacity: 1 !important;
}

.modal-box {
  width: 580px;
  max-width: calc(100% - 32px);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--wrapper-shadow);
  padding: 24px;
  box-sizing: border-box;
  transform: scale(0.9);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.show .modal-box {
  transform: scale(1);
}

#chmod-modal .modal-box {
  width: 100%;
  max-width: 400px;
  padding: 20px 24px;
}

#chmod-modal .chmod-modal-title {
  font-size: 16px;
  margin-bottom: 16px;
  margin-right: 28px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
}

#chmod-modal .chmod-modal-title i {
  color: var(--primary-color);
  font-size: 20px;
  vertical-align: -3px;
  margin-right: 6px;
}

#chmod-modal .chmod-file-name {
  display: block;
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chmod-modal .chmod-perms-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed;
}

#chmod-modal .chmod-perms-table th,
#chmod-modal .chmod-perms-table td {
  background: transparent;
  border: none;
}

#chmod-modal .chmod-perms-table thead tr {
  border-bottom: 1px solid var(--border-color);
}

#chmod-modal .chmod-perms-table tbody tr {
  border-bottom: 1px solid var(--border-color);
}

#chmod-modal .chmod-perms-table th {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 4px;
}

#chmod-modal .chmod-perms-table th:first-child,
#chmod-modal .chmod-perms-table td:first-child {
  text-align: left;
  padding-left: 0;
  width: 42%;
}

#chmod-modal .chmod-perms-table th:not(:first-child),
#chmod-modal .chmod-perms-table td:not(:first-child) {
  width: 19%;
  text-align: center;
  padding: 10px 4px;
}

#chmod-modal .chmod-perms-table td:first-child {
  font-weight: 600;
  color: var(--text-main);
  font-size: 13px;
}

#chmod-modal .chmod-perms-table input[type="checkbox"] {
  transform: scale(1.1);
  cursor: pointer;
}

#chmod-modal .form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.modal-close-header {
  position: absolute;
  right: 20px;
  top: 20px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  transition: color 0.15s;
}

.modal-close-header:hover {
  color: var(--text-main);
}

.form-card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

/* По умолчанию (десктопные стили для экранов шире 768px) */
button.mobile-dots-trigger {
  display: none;
}

.col-actions .actions-wrapper {
  display: flex !important;
  gap: 8px;
  align-items: center;
}

/* =================================*********
   MOBILE / RESPONSIVE STYLES (MEDIA QUERIES)
   ========================================== */
@media screen and (max-width: 768px) {
  #wrapper {
    margin: 10px auto !important;
    padding: 12px !important;
    border-radius: 6px !important;
    width: 95% !important;
    max-width: 100% !important;
  }
  
  .fm-project-title {
    font-size: 18px !important;
  }
  
  .fm-project-version {
    font-size: 10px !important;
    padding: 1px 6px !important;
  }
  
  /* Breadcrumbs path navigation */
  .path {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 10px !important;
  }
  
  /* Select actions path blocks specifically (make it more compact on mobile) */
  .select-actions-path {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 8px 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  
  .select-actions-path a {
    align-items: center !important;
    margin: 2px 0 !important;
    font-size: 13px !important;
  }
  
  .path .break-word {
    font-size: 13px !important;
    word-break: break-all !important;
    line-height: 1.5 !important;
  }
  
  .path .float-right {
    justify-content: space-between !important;
    width: 100% !important;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
  }
  
  /* Action Buttons layout (bottom bulk actions) */
  .action-buttons-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  
  .action-buttons-row > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  .btn-action {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
  }
  
  .quota-display {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
  
  /* Tables responsiveness */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Columns in table */
  th, td {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
  
  /* Hide non-critical columns on extremely small screens */
  @media screen and (max-width: 480px) {
    th:nth-child(3), td:nth-child(3), /* Size */
    th:nth-child(4), td:nth-child(4),  /* Date */
    .col-downloads, th.col-downloads, td.col-downloads,
    .col-perms, th.col-perms, td.col-perms /* Permissions (Права) */ {
      display: none !important;
    }
  }
  
  /* Truncate filenames on mobile screens */
  .col-name {
    max-width: 180px !important;
  }
  
  .col-name .filename {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .col-name .filename a {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .col-name .filename a i {
    flex-shrink: 0 !important;
  }

}

@media screen and (max-width: 768px) {
  /* Main files table row position relative for actions alignment */
  #main-files-table tr {
    position: relative !important;
  }
  
  .mobile-dots-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    padding: 6px !important;
    outline: none !important;
    transition: color 0.15s !important;
  }
  
  .mobile-dots-trigger:hover {
    color: var(--text-main) !important;
  }
  
  /* Hide default actions-wrapper buttons until dots clicked */
  .col-actions .actions-wrapper {
    display: none !important;
    position: absolute !important;
    right: 45px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--wrapper-shadow) !important;
    padding: 4px 8px !important;
    z-index: 100 !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  /* Show actions overlay when trigger active */
  .col-actions.active .actions-wrapper {
    display: inline-flex !important;
  }
  
  .col-actions .actions-wrapper a {
    font-size: 16px !important;
    color: var(--text-muted) !important;
    padding: 4px !important;
  }
  
  .col-actions .actions-wrapper a:hover {
    color: var(--text-link-hover) !important;
  }
}
  
  .modal-box {
    width: 95% !important;
    padding: 16px !important;
  }

  #chmod-modal .modal-box {
    width: calc(100% - 32px) !important;
    max-width: 400px !important;
    padding: 16px 18px !important;
  }

/* File View / Edit content blocks */
pre, code {
  font-size: 11px !important;
  padding: 8px !important;
}

#code-editor {
  height: 400px !important; /* Shorter editor on mobile devices */
}

.preview-video-container video, 
.preview-audio-container audio {
  width: 100% !important;
}

/* File info row links */
.view-page-path p a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
  padding: 6px 10px !important;
  background: var(--hover-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 12px !important;
  text-decoration: none;
}
.view-page-path p a i[class^="icon-"],
.view-page-path p a i[class*=" icon-"],
.view-page-path p a i.ti {
  flex-shrink: 0;
  vertical-align: middle;
}