/* ============================================================
   Hana Wedding
   Version: 4.0 Stable
   Theme: Light Luxury
   Target: File Browser 2.63.x
   ============================================================ */

/* Tên thương hiệu trên trang đăng nhập */
body form h1 {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding: 0 !important;

  font-size: 31px !important;
  line-height: 1.2 !important;

  text-align: center !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: visible !important;
}

/* Căn giữa toàn bộ khu vực tên thương hiệu */
body form {
  text-align: center !important;
}

body form h1 {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: max-content !important;
  max-width: none !important;

  white-space: nowrap !important;

  margin: 0 auto 24px auto !important;

  text-align: center !important;
}

/* ============================================================
   01. ROOT VARIABLES
   ============================================================ */

:root {
  --tj-black: #151515;
  --tj-white: #ffffff;

  --tj-bg: #f7f7f8;
  --tj-surface: #ffffff;

  --tj-text: #171717;
  --tj-text-soft: #454a4f;
  --tj-muted: #737373;

  --tj-border: #e7e7e7;
  --tj-border-strong: #dfe3e6;

  --tj-yellow: #f4b400;
  --tj-yellow-hover: #e6a500;
  --tj-yellow-soft: #fff4bf;
  --tj-yellow-pale: #fff8d9;

  --tj-danger: #c62828;
  --tj-danger-dark: #a81818;
  --tj-danger-soft: #fff3f3;

  --tj-radius-sm: 8px;
  --tj-radius-md: 12px;
  --tj-radius-lg: 16px;
  --tj-radius-xl: 18px;

  --tj-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
  --tj-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --tj-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.18);

  --tj-speed: 0.2s;
}


/* ============================================================
   02. RESET & BASE
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

html,
body,
#app {
  background: var(--tj-bg) !important;
  color: var(--tj-text) !important;
}

html,
body,
#app,
input,
textarea,
select,
button,
.name,
.item-name,
table,
td,
th,
label,
.modal,
.dialog,
.dropdown-menu,
.menu,
.context-menu {
  font-family:
    "Inter",
    "Segoe UI Variable",
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif !important;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ============================================================
   03. TYPOGRAPHY
   ============================================================ */

body {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #24272b !important;
}

button,
input,
textarea,
select {
  font-size: 14px !important;
}

h1,
h2,
h3,
h4,
.modal h2,
.dialog h2 {
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}

nav button.action,
.item-name,
.name,
table tbody td {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

table thead th {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

header input[type="search"],
header input[type="text"] {
  font-size: 14px !important;
  font-weight: 400 !important;
}


/* ============================================================
   04. LOGIN PAGE
   ============================================================ */

/* Ẩn logo mặc định của File Browser tại trang đăng nhập */
img[src="/static/img/logo.svg"][alt="File Browser"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Nút đăng nhập */
body form input[type="submit"].button.button--block {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 100% !important;
  min-height: 46px !important;

  padding: 0 20px !important;

  background: var(--tj-text) !important;
  background-image: none !important;

  color: var(--tj-white) !important;
  -webkit-text-fill-color: var(--tj-white) !important;

  border: 1px solid var(--tj-text) !important;
  border-radius: 14px !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;

  cursor: pointer !important;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

body form input[type="submit"].button.button--block:hover {
  background: #000000 !important;
  border-color: #000000 !important;

  transform: translateY(-1px) !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.17) !important;
}

body form input[type="submit"].button.button--block:focus {
  outline: none !important;

  box-shadow:
    0 0 0 4px rgba(23, 23, 23, 0.10),
    0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

body form input[type="submit"].button.button--block:active {
  background: #292929 !important;

  transform: translateY(0) !important;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.12) !important;
}


/* ============================================================
   05. HEADER
   ============================================================ */

header {
  background: var(--tj-white) !important;

  border-bottom: 1px solid #ececec !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

img.logo,
.logo img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: auto !important;
  height: auto !important;

  max-width: 230px !important;
  max-height: 58px !important;

  object-fit: contain !important;
}

header .actions,
header .buttons,
header .toolbar,
.toolbar {
  display: flex !important;
  align-items: center !important;

  gap: 6px !important;
}

header button,
header .button,
.toolbar button,
.toolbar .button {
  border-radius: 10px !important;
  box-shadow: none !important;

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

header button:hover,
header .button:hover,
.toolbar button:hover,
.toolbar .button:hover {
  background: var(--tj-yellow-soft) !important;
  color: var(--tj-text) !important;

  box-shadow: none !important;
}

header button:active,
header .button:active,
.toolbar button:active,
.toolbar .button:active {
  background: #ffe894 !important;
  box-shadow: none !important;
}

header button i.material-icons,
.toolbar button i.material-icons {
  color: inherit !important;
  font-size: 22px !important;
}


/* ============================================================
   06. SIDEBAR
   ============================================================ */

nav,
.sidebar,
aside {
  background: var(--tj-white) !important;
  border-right: 1px solid #ececec !important;
}

nav button.action {
  background: transparent !important;
  color: #526b77 !important;

  border-radius: 12px !important;

  transition:
    background-color 0.18s ease,
    color 0.18s ease !important;
}

nav button.action:hover {
  background: #f4f4f4 !important;
  color: var(--tj-text) !important;
}

nav button.action.active {
  background: #ebebeb !important;
  color: var(--tj-text) !important;
}

nav button.action i {
  color: inherit !important;
}

nav .credits {
  color: #999999 !important;
  font-size: 11px !important;
}

.sidebar a,
.sidebar button,
aside a,
aside button {
  border-radius: 10px !important;

  transition:
    background var(--tj-speed) ease,
    color var(--tj-speed) ease !important;
}

.sidebar a:hover,
.sidebar button:hover,
aside a:hover,
aside button:hover {
  background: #f1f1f2 !important;
}


/* ============================================================
   07. BUTTON SYSTEM
   ============================================================ */

button,
.btn {
  border-radius: var(--tj-radius-md) !important;

  transition:
    transform var(--tj-speed) ease,
    box-shadow var(--tj-speed) ease,
    opacity var(--tj-speed) ease !important;
}

button:hover,
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--tj-shadow-sm) !important;
}

button:active,
.btn:active {
  transform: translateY(0);
}

.button--primary,
button.primary,
.btn-primary,
input[type="submit"] {
  background: var(--tj-text) !important;
  color: var(--tj-white) !important;

  border: 1px solid var(--tj-text) !important;
  border-radius: 12px !important;

  font-weight: 600 !important;

  box-shadow: 0 6px 16px rgba(23, 23, 23, 0.12) !important;
}

.button--primary:hover,
button.primary:hover,
.btn-primary:hover,
input[type="submit"]:hover {
  background: #2c2c2c !important;
  border-color: #2c2c2c !important;
}

.button--secondary,
button.secondary,
.btn-secondary {
  background: var(--tj-white) !important;
  color: #333333 !important;

  border: 1px solid var(--tj-border-strong) !important;
  border-radius: 12px !important;

  box-shadow: none !important;
}

.button--secondary:hover,
button.secondary:hover,
.btn-secondary:hover {
  background: var(--tj-yellow-pale) !important;
  color: var(--tj-text) !important;

  border-color: #ffc928 !important;
}

.button--red,
.button--danger,
button.danger,
.btn-danger,
.delete {
  background: var(--tj-danger-soft) !important;
  color: var(--tj-danger) !important;

  border: 1px solid #ffd1d1 !important;
  border-radius: 12px !important;
}

.button--red:hover,
.button--danger:hover,
button.danger:hover,
.btn-danger:hover,
.delete:hover {
  background: #ffe3e3 !important;
  color: var(--tj-danger-dark) !important;

  border-color: #ffb8b8 !important;
}


/* ============================================================
   08. FORM SYSTEM
   ============================================================ */

input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
select {
  width: 100%;
  min-height: 46px !important;

  padding: 0 16px !important;

  background: var(--tj-white) !important;
  color: var(--tj-text) !important;

  border: 1px solid var(--tj-border) !important;
  border-radius: 14px !important;

  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;

  box-shadow: none !important;
  outline: none !important;

  transition:
    border-color var(--tj-speed) ease,
    box-shadow var(--tj-speed) ease,
    background-color var(--tj-speed) ease !important;
}

textarea {
  min-height: 110px !important;

  padding-top: 12px !important;
  padding-bottom: 12px !important;

  resize: vertical;
}

select {
  cursor: pointer;
}

input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
textarea:hover,
select:hover {
  border-color: #cccccc !important;
}

input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
textarea:focus,
select:focus {
  border-color: var(--tj-text) !important;

  box-shadow: 0 0 0 4px rgba(23, 23, 23, 0.08) !important;
  outline: none !important;
}

input:disabled,
textarea:disabled,
select:disabled {
  background: #f3f4f5 !important;
  color: #999999 !important;

  cursor: not-allowed !important;
  opacity: 1 !important;
}

input::placeholder,
textarea::placeholder {
  color: #999999 !important;
  opacity: 1 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tj-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--tj-white) inset !important;

  transition: background-color 9999s ease-in-out 0s;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;

  display: inline-block !important;
  position: static !important;

  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;

  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;

  margin: 2px 10px 0 0 !important;
  padding: 0 !important;

  vertical-align: top !important;
  flex: 0 0 15px !important;

  box-shadow: none !important;
  accent-color: var(--tj-yellow) !important;

  cursor: pointer !important;
}

input[type="checkbox"] {
  border-radius: 3px !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline-block !important;

  width: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--tj-text-soft) !important;

  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 19px !important;

  vertical-align: top !important;
  cursor: pointer !important;
}

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  display: flex !important;
  align-items: flex-start !important;

  gap: 10px !important;

  width: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--tj-text-soft) !important;

  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 19px !important;

  cursor: pointer !important;
}

label:has(> input[type="checkbox"]) > input[type="checkbox"],
label:has(> input[type="radio"]) > input[type="radio"] {
  margin-right: 0 !important;
}

label:has(> input[type="checkbox"]) > span,
label:has(> input[type="radio"]) > span {
  display: block !important;
  min-width: 0 !important;
  line-height: 19px !important;
}

input[type="file"] {
  font-size: 14px !important;
  color: var(--tj-text-soft) !important;
}


/* ============================================================
   09. CARD SYSTEM
   ============================================================ */

.card,
.v-card {
  background: var(--tj-surface) !important;

  border: 1px solid var(--tj-border) !important;
  border-radius: var(--tj-radius-lg) !important;

  box-shadow: var(--tj-shadow-md) !important;
}


/* ============================================================
   10. DIALOG & OVERLAY
   ============================================================ */

.overlay,
.modal-overlay {
  background: rgba(20, 24, 28, 0.34) !important;

  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

.modal,
.dialog,
.card.modal,
[role="dialog"] {
  background: var(--tj-white) !important;

  border: 1px solid #e8e8e8 !important;
  border-radius: var(--tj-radius-xl) !important;

  box-shadow: var(--tj-shadow-lg) !important;

  overflow: hidden !important;
}

.modal header,
.dialog header {
  background: var(--tj-white) !important;

  border-bottom: 1px solid #eeeeee !important;
  box-shadow: none !important;
}

.modal footer,
.dialog footer {
  background: #fafafa !important;

  border-top: 1px solid #eeeeee !important;
}


/* ============================================================
   11. DROPDOWN & CONTEXT MENU
   ============================================================ */

.dropdown,
.dropdown-menu,
.context-menu,
.menu {
  background: var(--tj-white) !important;

  border: 1px solid #e3e6e8 !important;
  border-radius: 14px !important;

  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.15) !important;

  padding: 6px !important;
  overflow: hidden !important;
}

.dropdown button,
.dropdown a,
.dropdown-menu button,
.dropdown-menu a,
.context-menu button,
.context-menu a,
.menu button,
.menu a {
  background: transparent !important;
  color: #4f5961 !important;

  border-radius: 9px !important;

  font-size: 14px !important;
  font-weight: 500 !important;

  box-shadow: none !important;

  transition:
    background-color 0.16s ease,
    color 0.16s ease !important;
}

.dropdown button:hover,
.dropdown a:hover,
.dropdown-menu button:hover,
.dropdown-menu a:hover,
.context-menu button:hover,
.context-menu a:hover,
.menu button:hover,
.menu a:hover {
  background: var(--tj-yellow-soft) !important;
  color: var(--tj-text) !important;
}

.dropdown i.material-icons,
.dropdown-menu i.material-icons,
.context-menu i.material-icons,
.menu i.material-icons {
  color: #7a8288 !important;
}

.dropdown button:hover i.material-icons,
.dropdown-menu button:hover i.material-icons,
.context-menu button:hover i.material-icons,
.menu button:hover i.material-icons {
  color: var(--tj-text) !important;
}

.dropdown hr,
.dropdown-menu hr,
.context-menu hr,
.menu hr {
  border: 0 !important;
  border-top: 1px solid #eceff1 !important;

  margin: 6px 0 !important;
}

.dropdown .delete,
.dropdown-menu .delete,
.context-menu .delete,
.menu .delete {
  color: var(--tj-danger) !important;
}

.dropdown .delete:hover,
.dropdown-menu .delete:hover,
.context-menu .delete:hover,
.menu .delete:hover {
  background: #fff0f0 !important;
  color: var(--tj-danger-dark) !important;
}


/* ============================================================
   12. FILE LIST
   ============================================================ */

main {
  background: #f7f8fa !important;
}

.item,
.file-item,
.file-list > div {
  border-radius: var(--tj-radius-lg) !important;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

.item:hover,
.file-item:hover {
  background: var(--tj-white) !important;
  box-shadow: var(--tj-shadow-sm) !important;
}

.item-name,
.name {
  color: #25282b !important;
  font-weight: 500 !important;
}

.item-name:hover,
.name:hover {
  color: #000000 !important;
}

.item.active,
.item.selected,
tr.active,
tr.selected {
  background: #fff6cc !important;
  border-color: #ffc928 !important;

  box-shadow: 0 0 0 2px rgba(244, 180, 0, 0.18) !important;
}


/* ============================================================
   13. GRID VIEW
   ============================================================ */

#listing.list .item,
#listing.grid .item,
.listing .item {
  background: var(--tj-white) !important;

  border: 1px solid #e7e9ec !important;
  border-radius: var(--tj-radius-lg) !important;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.035) !important;

  overflow: hidden !important;
}

#listing.list .item:hover,
#listing.grid .item:hover,
.listing .item:hover {
  background: var(--tj-white) !important;

  border-color: #ffd45c !important;

  box-shadow: 0 8px 22px rgba(244, 180, 0, 0.14) !important;
}

.item i.material-icons,
table i.material-icons {
  color: var(--tj-yellow) !important;
}

.item:hover i.material-icons,
table tr:hover i.material-icons {
  color: var(--tj-yellow-hover) !important;
}


/* ============================================================
   14. THUMBNAIL
   ============================================================ */

.item img,
.thumbnail img,
.preview img,
.gallery img {
  border-radius: var(--tj-radius-md) !important;
  object-fit: cover !important;
}

.item .thumbnail,
.thumbnail {
  background: #ffd95a !important;

  border: 1px solid #f3bf22 !important;
  border-radius: var(--tj-radius-md) !important;

  overflow: hidden !important;
}

.item:hover .thumbnail,
.thumbnail:hover {
  background: #ffcf33 !important;
  border-color: #e8aa00 !important;
}

.item .thumbnail i.material-icons,
.thumbnail i.material-icons {
  color: #8a6500 !important;
}

.item:hover .thumbnail i.material-icons,
.thumbnail:hover i.material-icons {
  color: #6f5000 !important;
}

.gallery .item,
.gallery-item {
  background: var(--tj-white) !important;

  border: 1px solid #e7e9ec !important;
  border-radius: var(--tj-radius-lg) !important;

  overflow: hidden !important;
}

.gallery .item:hover,
.gallery-item:hover {
  border-color: #ffd45c !important;
  box-shadow: 0 8px 22px rgba(244, 180, 0, 0.14) !important;
}


/* ============================================================
   15. BREADCRUMB
   ============================================================ */

.breadcrumb,
.breadcrumbs {
  background: transparent !important;
  color: #5f6770 !important;
}

.breadcrumb a,
.breadcrumbs a {
  color: #5f6770 !important;
  text-decoration: none !important;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
  color: var(--tj-text) !important;
}


/* ============================================================
   16. UPLOAD & PROGRESS
   ============================================================ */

.progress,
progress {
  border-radius: 999px !important;
  overflow: hidden !important;
}

progress {
  height: 8px !important;

  border: none !important;
  background: #eceff1 !important;
}

progress::-webkit-progress-bar {
  background: #eceff1 !important;
  border-radius: 999px !important;
}

progress::-webkit-progress-value,
progress::-moz-progress-bar {
  background: var(--tj-yellow) !important;
  border-radius: 999px !important;
}

.dropzone,
.upload {
  background: #fffef8 !important;

  border: 2px dashed #ffc928 !important;
  border-radius: var(--tj-radius-xl) !important;
}

.dropzone:hover,
.upload:hover {
  background: var(--tj-yellow-pale) !important;
  border-color: var(--tj-yellow-hover) !important;
}


/* ============================================================
   17. SETTINGS
   ============================================================ */

.settings,
.settings-page,
#settings {
  background: #f7f8fa !important;
}

.settings .card,
.settings-page .card,
#settings .card,
.settings section,
.settings-page section,
#settings section {
  background: var(--tj-white) !important;

  border: 1px solid #e7e9ec !important;
  border-radius: var(--tj-radius-lg) !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.045) !important;
}

.settings h1,
.settings h2,
.settings h3,
.settings-page h1,
.settings-page h2,
.settings-page h3,
#settings h1,
#settings h2,
#settings h3 {
  color: #2b2d30 !important;

  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.settings p,
.settings-page p,
#settings p {
  color: #6c747b !important;
}

.settings label,
.settings-page label,
#settings label {
  color: var(--tj-text-soft) !important;
  font-weight: 400 !important;
}

.settings input:not([type="checkbox"]):not([type="radio"]),
.settings textarea,
.settings select,
.settings-page input:not([type="checkbox"]):not([type="radio"]),
.settings-page textarea,
.settings-page select,
#settings input:not([type="checkbox"]):not([type="radio"]),
#settings textarea,
#settings select {
  width: 100% !important;
  min-height: 46px !important;

  padding: 0 16px !important;

  background: var(--tj-white) !important;
  color: #24272b !important;

  border: 1px solid var(--tj-border-strong) !important;
  border-radius: 13px !important;

  font-size: 14px !important;
  font-weight: 400 !important;

  box-shadow: none !important;
}

.settings input:not([type="checkbox"]):not([type="radio"]):focus,
.settings textarea:focus,
.settings select:focus,
.settings-page input:not([type="checkbox"]):not([type="radio"]):focus,
.settings-page textarea:focus,
.settings-page select:focus,
#settings input:not([type="checkbox"]):not([type="radio"]):focus,
#settings textarea:focus,
#settings select:focus {
  border-color: #ffc928 !important;

  box-shadow: 0 0 0 4px rgba(255, 201, 40, 0.18) !important;
  outline: none !important;
}

.settings .field,
.settings-page .field,
#settings .field,
.settings .form-group,
.settings-page .form-group,
#settings .form-group {
  margin-bottom: 20px !important;
}

.settings input[type="submit"],
.settings-page input[type="submit"],
#settings input[type="submit"],
.settings button[type="submit"],
.settings-page button[type="submit"],
#settings button[type="submit"] {
  width: auto !important;
  min-width: 86px !important;
  min-height: 40px !important;

  padding: 0 16px !important;

  background: var(--tj-text) !important;
  color: var(--tj-white) !important;

  border: 1px solid var(--tj-text) !important;
  border-radius: 12px !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  box-shadow: 0 6px 16px rgba(23, 23, 23, 0.12) !important;
}


/* ============================================================
   18. EMPTY STATE
   ============================================================ */

.empty,
.empty-state,
.no-items,
.no-files {
  color: #7b838a !important;
  text-align: center !important;
}

.empty i.material-icons,
.empty-state i.material-icons,
.no-items i.material-icons,
.no-files i.material-icons {
  color: var(--tj-yellow) !important;

  font-size: 56px !important;

  opacity: 0.9 !important;
}

.empty h2,
.empty-state h2,
.no-items h2,
.no-files h2 {
  color: #2f3337 !important;

  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.empty p,
.empty-state p,
.no-items p,
.no-files p {
  color: #7b838a !important;
}


/* ============================================================
   19. NOTIFICATION & TOAST
   ============================================================ */

.toast,
.notification,
.alert {
  background: var(--tj-white) !important;
  color: #33383d !important;

  border: 1px solid #e1e5e8 !important;
  border-radius: 14px !important;

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14) !important;
}

.toast.success,
.notification.success,
.alert.success {
  border-left: 4px solid #43a047 !important;
}

.toast.error,
.notification.error,
.alert.error {
  border-left: 4px solid #e53935 !important;
}

.toast.warning,
.notification.warning,
.alert.warning {
  border-left: 4px solid var(--tj-yellow) !important;
}


/* ============================================================
   20. SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d5d5d5;

  border: 2px solid transparent;
  border-radius: 999px;

  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #bcbcbc;

  border: 2px solid transparent;

  background-clip: padding-box;
}


/* ============================================================
   21. MOBILE
   ============================================================ */

@media (max-width: 768px) {
  main {
    background: var(--tj-white) !important;
  }

  img.logo,
  .logo img {
    max-width: 160px !important;
    max-height: 42px !important;
  }

  button,
  .btn {
    min-height: 42px;
  }

  input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;

    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;

    flex-basis: 17px !important;
  }

  .card,
  .v-card,
  .modal,
  .dialog,
  .card.modal,
  [role="dialog"] {
    border-radius: 13px !important;
  }

  #listing.list .item,
  #listing.grid .item,
  .listing .item {
    border-radius: 12px !important;
  }

  table {
    border-spacing: 0 6px !important;
  }

  table tbody td:first-child {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
  }

  table tbody td:last-child {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
  }

  header .actions,
  header .buttons,
  header .toolbar,
  .toolbar {
    gap: 3px !important;
  }

  header button,
  header .button,
  .toolbar button,
  .toolbar .button {
    border-radius: 9px !important;
  }

  .dropdown,
  .dropdown-menu,
  .context-menu,
  .menu {
    border-radius: 12px !important;
  }

  .settings .card,
  .settings-page .card,
  #settings .card,
  .settings section,
  .settings-page section,
  #settings section {
    border-radius: 13px !important;
    box-shadow: none !important;
  }

  .share {
    display: block !important;
  }

  .share__box__info {
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin-bottom: 14px !important;
  }

  .share__box__icon {
    height: min(72vh, 620px) !important;
    min-height: 360px !important;
  }

  .share__box__items {
    width: 100% !important;
  }
}


/* ============================================================
   22. TABLET
   ============================================================ */

@media (min-width: 769px) and (max-width: 1100px) {
  .share__box__info {
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;

    flex-basis: 340px !important;
  }

  .share__box__icon {
    height: 28em !important;
    min-height: 28em !important;
  }
}


/* ============================================================
   23. SHARE PAGE
   ============================================================ */

.share {
  align-items: flex-start !important;
  gap: 16px !important;
}

.share__box__info {
  width: 540px !important;
  min-width: 540px !important;
  max-width: 540px !important;

  flex: 0 0 540px !important;
}

.share__box__items {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.share__box__icon {
  width: 100% !important;

  height: 34em !important;
  min-height: 34em !important;
  max-height: none !important;

  padding: 10px !important;

  overflow: hidden !important;
}

.share__box__icon > a.button.button--flat {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border-radius: 14px !important;

  box-shadow: none !important;
  overflow: hidden !important;

  transform: none !important;
}

.share__box__icon > a.button.button--flat > img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 auto !important;

  object-fit: contain !important;
  object-position: center !important;

  border-radius: 12px !important;
}

.share__box__icon:hover,
.share__box__icon > a:hover,
.share__box__icon > a:active,
.share__box__icon > a:focus {
  transform: none !important;
  box-shadow: none !important;
}

/* Ẩn QR nhưng không ảnh hưởng phần preview */
.share__box__element.share__box__center:has(> canvas) {
  display: none !important;
}


/* ============================================================
   24. UTILITIES
   ============================================================ */

.u-hidden {
  display: none !important;
}

.u-flex {
  display: flex !important;
}

.u-flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.u-text-center {
  text-align: center !important;
}

.u-no-shadow {
  box-shadow: none !important;
}

.u-no-transform {
  transform: none !important;
}


/* ============================================================
   25. FUTURE PATCH AREA
   ============================================================ */

/*
  Khu vực để bổ sung sau này:

  - JavaScript lightbox
  - Fullscreen preview
  - Gallery navigation
  - Dark mode
  - Custom animation
  - Custom download panel

  Không thêm CSS vá tạm vào các mục phía trên.
  Mọi phần mở rộng mới nên được đặt tại đây hoặc tạo thành file riêng.
*/

/* ============================================================
   MOBILE DARK MODE
   Giữ nền tối và điều chỉnh màu chữ cho dễ đọc
   ============================================================ */

@media (max-width: 768px) and (prefers-color-scheme: dark) {

  :root {
    --tj-dark-bg: #1d292f;
    --tj-dark-surface: #26343b;
    --tj-dark-surface-hover: #304048;
    --tj-dark-text: #f5f5f5;
    --tj-dark-text-soft: #c7ced2;
    --tj-dark-muted: #9da8ae;
    --tj-dark-border: #3b4a51;
  }

  html,
  body,
  #app {
    background: var(--tj-dark-bg) !important;
    color: var(--tj-dark-text) !important;
    color-scheme: dark;
  }

  main {
    background: var(--tj-dark-bg) !important;
    color: var(--tj-dark-text) !important;
  }

  /* ==========================================================
     LOGIN
     ========================================================== */

  body form h1,
  body form h2,
  body form h3,
  body form label {
    color: var(--tj-dark-text) !important;
    -webkit-text-fill-color: var(--tj-dark-text) !important;
  }

  body form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
  body form textarea,
  body form select {
    background: #ffffff !important;
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;

    border-color: #dfe3e6 !important;
  }

  body form input::placeholder,
  body form textarea::placeholder {
    color: #999999 !important;
    -webkit-text-fill-color: #999999 !important;
    opacity: 1 !important;
  }

  body form input[type="submit"],
  body form button[type="submit"],
  body form .button--block {
    background: #151515 !important;
    background-image: none !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border-color: #151515 !important;
  }

  /* ==========================================================
     HEADER VÀ SIDEBAR
     ========================================================== */

  header,
  nav,
  aside,
  .sidebar {
    background: var(--tj-dark-surface) !important;
    color: var(--tj-dark-text) !important;

    border-color: var(--tj-dark-border) !important;
  }

  nav button.action,
  nav button.action i,
  nav a,
  aside a,
  .sidebar a {
    color: var(--tj-dark-text-soft) !important;
  }

  nav button.action:hover,
  nav button.action.active,
  aside a:hover,
  .sidebar a:hover {
    background: var(--tj-dark-surface-hover) !important;
    color: #ffffff !important;
  }

  nav .credits {
    color: var(--tj-dark-muted) !important;
  }

  /* ==========================================================
     BREADCRUMB
     ========================================================== */

  .breadcrumb,
  .breadcrumbs,
  .breadcrumb a,
  .breadcrumbs a {
    color: var(--tj-dark-text-soft) !important;
  }

  .breadcrumb a:hover,
  .breadcrumbs a:hover {
    color: #ffffff !important;
  }

  /* ==========================================================
     FILE VÀ FOLDER CARD
     ========================================================== */

  .item,
  .file-item,
  #listing.list .item,
  #listing.grid .item,
  .listing .item,
  .gallery .item,
  .gallery-item {
    background: var(--tj-dark-surface) !important;
    color: var(--tj-dark-text) !important;

    border-color: var(--tj-dark-border) !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  }

  .item:hover,
  .file-item:hover,
  #listing.list .item:hover,
  #listing.grid .item:hover,
  .listing .item:hover {
    background: var(--tj-dark-surface-hover) !important;
    border-color: #f4b400 !important;
  }

  .item-name,
  .name,
  .item .name,
  .item .item-name,
  .file-item .name,
  .file-item .item-name {
    color: var(--tj-dark-text) !important;
    -webkit-text-fill-color: var(--tj-dark-text) !important;
  }

  .item p,
  .item span,
  .item small,
  .file-item p,
  .file-item span,
  .file-item small {
    color: var(--tj-dark-text-soft) !important;
    -webkit-text-fill-color: var(--tj-dark-text-soft) !important;
  }

  /* Icon thư mục vẫn giữ vàng */
  .item i.material-icons,
  .file-item i.material-icons,
  table i.material-icons {
    color: #f4b400 !important;
    -webkit-text-fill-color: #f4b400 !important;
  }

  /* ==========================================================
     TABLE
     ========================================================== */

  table {
    background: transparent !important;
    color: var(--tj-dark-text) !important;
  }

  table thead th {
    color: var(--tj-dark-muted) !important;
  }

  table tbody tr {
    background: var(--tj-dark-surface) !important;
  }

  table tbody tr:hover {
    background: var(--tj-dark-surface-hover) !important;
  }

  table tbody td {
    color: var(--tj-dark-text-soft) !important;
  }

  /* ==========================================================
     CARD, MODAL VÀ MENU
     ========================================================== */

  .card,
  .v-card,
  .modal,
  .dialog,
  [role="dialog"],
  .dropdown,
  .dropdown-menu,
  .context-menu,
  .menu {
    background: var(--tj-dark-surface) !important;
    color: var(--tj-dark-text) !important;

    border-color: var(--tj-dark-border) !important;
  }

  .modal header,
  .dialog header,
  .modal footer,
  .dialog footer {
    background: var(--tj-dark-surface) !important;
    border-color: var(--tj-dark-border) !important;
  }

  .dropdown button,
  .dropdown a,
  .dropdown-menu button,
  .dropdown-menu a,
  .context-menu button,
  .context-menu a,
  .menu button,
  .menu a {
    color: var(--tj-dark-text-soft) !important;
  }

  .dropdown button:hover,
  .dropdown a:hover,
  .dropdown-menu button:hover,
  .dropdown-menu a:hover,
  .context-menu button:hover,
  .context-menu a:hover,
  .menu button:hover,
  .menu a:hover {
    background: var(--tj-dark-surface-hover) !important;
    color: #ffffff !important;
  }

  /* ==========================================================
     SETTINGS VÀ FORM SAU ĐĂNG NHẬP
     ========================================================== */

  .settings,
  .settings-page,
  #settings {
    background: var(--tj-dark-bg) !important;
    color: var(--tj-dark-text) !important;
  }

  .settings .card,
  .settings-page .card,
  #settings .card,
  .settings section,
  .settings-page section,
  #settings section {
    background: var(--tj-dark-surface) !important;
    border-color: var(--tj-dark-border) !important;
  }

  .settings h1,
  .settings h2,
  .settings h3,
  .settings p,
  .settings label,
  .settings-page h1,
  .settings-page h2,
  .settings-page h3,
  .settings-page p,
  .settings-page label,
  #settings h1,
  #settings h2,
  #settings h3,
  #settings p,
  #settings label {
    color: var(--tj-dark-text-soft) !important;
  }

  .settings input:not([type="checkbox"]):not([type="radio"]),
  .settings textarea,
  .settings select,
  .settings-page input:not([type="checkbox"]):not([type="radio"]),
  .settings-page textarea,
  .settings-page select,
  #settings input:not([type="checkbox"]):not([type="radio"]),
  #settings textarea,
  #settings select {
    background: var(--tj-dark-surface-hover) !important;
    color: var(--tj-dark-text) !important;
    -webkit-text-fill-color: var(--tj-dark-text) !important;

    border-color: var(--tj-dark-border) !important;
  }

  /* ==========================================================
     EMPTY STATE VÀ TOAST
     ========================================================== */

  .empty,
  .empty-state,
  .no-items,
  .no-files {
    color: var(--tj-dark-text-soft) !important;
  }

  .empty h2,
  .empty-state h2,
  .no-items h2,
  .no-files h2 {
    color: var(--tj-dark-text) !important;
  }

  .toast,
  .notification,
  .alert {
    background: var(--tj-dark-surface) !important;
    color: var(--tj-dark-text) !important;
    border-color: var(--tj-dark-border) !important;
  }
}