/* ============================================================
   HALLMARK 2026 — drop.9bricks.com
   Lớp CUỐI, nạp sau bundle Filebrowser (index-*.css).
   Viết lại thành MỘT lớp mạch lạc (không chồng vá) để review và
   rollback được: xoá file này + bỏ branding.files → về nguyên bản.

   Ý đồ thiết kế
   -------------
   Đây là hộp nhận file dùng hằng ngày, không phải file manager đa
   dụng. Ba quyết định về BỐ CỤC (CSS thuần không đổi được HTML,
   nhưng đổi được thứ tự và trọng số thị giác):

   1. Vùng thả file lên ĐẦU, to, là thứ đầu tiên mắt chạm. Bản gốc
      không hề báo cho người dùng biết kéo thả được — đó mới là lý do
      nó khó dùng, không phải thiếu nút.
   2. Chrome (header + sidebar) lùi về nền canvas; chỉ vùng dữ liệu
      là bề mặt sáng. Bản gốc để mọi thứ trắng nên không có phân
      tầng, mắt không biết nhìn đâu trước.
   3. Danh sách dạng bảng dày thay vì lưới card. Card to là ngôn ngữ
      của app tiêu dùng; bảng là ngôn ngữ của công cụ.

   Tên biến Filebrowser rất dễ nhầm:
     --textSecondary = chữ CHÍNH  |  --textPrimary = chữ PHỤ
     --action        = màu icon button
   ============================================================ */

/* ---------- 1. TOKEN ---------- */
:root {
  --canvas:  #eef1f4;
  --panel:   #ffffff;
  --raised:  #ffffff;

  --ink:     #131820;   /* ~16.5:1 trên panel */
  --ink-2:   #47505e;   /* ~8.6:1  */
  --ink-3:   #667081;   /* ~4.9:1  — trên sàn 4.5 */

  --line:        rgb(18 24 32 / .10);
  --line-strong: rgb(18 24 32 / .20);

  --accent:     #2b62e0;
  --accent-ink: #ffffff;

  --pos:  #197f4f;
  --warn: #a2650a;
  --neg:  #c0342b;

  --r1: 4px;
  --r2: 8px;
  --r3: 14px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 120ms;
  --base: 180ms;

  --rail: 13em;         /* bề rộng sidebar */
  color-scheme: light;
}

:root.dark {
  --canvas:  #0d1116;
  --panel:   #161b22;
  --raised:  #1d242d;

  --ink:     #e9edf3;
  --ink-2:   #a9b3c1;
  --ink-3:   #7f8998;

  --line:        rgb(255 255 255 / .10);
  --line-strong: rgb(255 255 255 / .20);

  --accent:     #6d9bff;
  --accent-ink: #0d1116;

  --pos:  #45c98a;
  --warn: #e0aa4a;
  --neg:  #ef6f66;

  color-scheme: dark;
}

/* Dẫn xuất sinh bằng color-mix — không đẻ thêm hex. */
:root {
  --accent-tint: color-mix(in oklab, var(--accent) 5%, var(--panel));
  --row-hover:   color-mix(in oklab, var(--ink) 4%, transparent);
  --row-active:  color-mix(in oklab, var(--accent) 10%, transparent);

  /* 3 mức elevation, mỗi bóng 2 lớp: 1 lớp sắc dựng cạnh,
     1 lớp spread âm dựng độ cao. Bóng một lớp trông rẻ tiền. */
  --e1: 0 1px 1px rgb(16 20 26 / .04);
  --e2: 0 1px 2px rgb(16 20 26 / .06), 0 8px 20px -10px rgb(16 20 26 / .16);
  --e3: 0 2px 4px rgb(16 20 26 / .08), 0 18px 40px -16px rgb(16 20 26 / .26);
}
:root.dark {
  --e1: 0 1px 1px rgb(0 0 0 / .30);
  --e2: 0 1px 2px rgb(0 0 0 / .40), 0 8px 20px -10px rgb(0 0 0 / .60);
  --e3: 0 2px 4px rgb(0 0 0 / .45), 0 18px 40px -16px rgb(0 0 0 / .70);
}

/* ---------- 2. REMAP token của Filebrowser ---------- */
:root, :root.dark {
  --background:       var(--canvas);
  --surfacePrimary:   var(--panel);
  --surfaceSecondary: var(--raised);
  --textSecondary:    var(--ink);
  --textPrimary:      var(--ink-2);   /* gốc #6f6f6f chỉ ~4.0:1, dưới sàn */
  --divider:          var(--line);
  --borderPrimary:    var(--line);
  --borderSecondary:  var(--line-strong);
  --hover:            var(--row-hover);
  --action:           var(--ink-2);
  --blue:             var(--accent);
  --dark-blue:        color-mix(in oklab, var(--accent) 82%, black);
  --icon-blue:        var(--accent);
  --iconPrimary:      var(--accent);
  --moon-grey:        var(--canvas);
}

/* ---------- 3. CHỮ ---------- */
/* Bản gốc gọi Roboto nhưng không nhúng file font → máy không có
   Roboto rơi về sans mặc định, mỗi OS một kiểu. Chốt stack hệ thống
   là quyết định đúng: nhanh hơn, không phụ thuộc mạng ngoài. */
body, input, button, select, textarea, .action, #listing .item {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
  background: var(--canvas);
  color: var(--ink);
  font-size: clamp(13.5px, .82rem + .12vw, 15px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .card-title { text-wrap: balance; letter-spacing: -.02em; }
p { text-wrap: pretty; }
/* Số nhảy cột là lỗi, không phải phong cách. */
#listing .item .size, #listing .item .modified, .counter { font-variant-numeric: tabular-nums; }

/* ---------- 4. HEADER ---------- */
header {
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
header img { height: 1.9em; }
header title { font-size: clamp(16px, .95rem + .20vw, 18px); font-weight: 600; color: var(--ink); }

/* Tìm kiếm là việc hiếm → để nó im lặng, chỉ nổi lên khi được dùng. */
#search #input, #search input { background: transparent; border: 0; }
#search { color: var(--ink-3); }
#search:focus-within { color: var(--ink); }

/* Icon phụ lùi xuống ink-3 để nút chính giữ đúng vai trò. */
header .action i { color: var(--ink-3); transition: color var(--fast) var(--ease); }
header .action:hover i { color: var(--ink); }

/* Upload là hành động chính của cả trang. */
header .action[aria-label="Upload" i] {
  background: var(--accent);
  border-radius: var(--r2);
  padding: 0 .15em;
}
header .action[aria-label="Upload" i] i,
header .action[aria-label="Upload" i]:hover i { color: var(--accent-ink); }
header .action[aria-label="Upload" i]:hover {
  background: color-mix(in oklab, var(--accent) 88%, black);
}

/* ---------- 5. SIDEBAR ---------- */
/* Geometry chỉ áp cho desktop — dưới 736px Filebrowser biến nav
   thành drawer trượt, đè lên là hỏng drawer. */
@media (min-width: 737px) {
  nav  { width: var(--rail); height: calc(100vh - 4em); overflow-y: auto; overscroll-behavior: contain; }
  main { width: calc(100% - var(--rail) - 3em); }
}
nav {
  background: var(--canvas);
  border-right: 1px solid var(--line);
  box-shadow: none;
  padding-top: .35em;
}
nav > div { border-top: 1px solid var(--line); padding: .3em 0; }
nav > div:first-child { border-top: 0; }
nav .action {
  border-radius: var(--r2);
  margin: 1px 8px;
  width: calc(100% - 16px);
  padding: .45em .6em;
  font-size: .92em;
  color: var(--ink-2);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
nav .action:hover { background: var(--row-hover); color: var(--ink); }
nav .action.active { background: var(--row-active); color: var(--ink); font-weight: 600; }
nav .action i { font-size: 1.15em; color: var(--ink-3); }
nav .action:hover i, nav .action.active i { color: var(--accent); }
nav > div:first-child .action { font-weight: 600; color: var(--ink); }
.credits { display: none; }   /* công cụ nội bộ không cần khoe version */

/* ---------- 6. BREADCRUMB ---------- */
.breadcrumbs {
  background: var(--canvas);
  border-bottom: 0;
  height: 2.4em;
  color: var(--ink-3);
  font-size: .92em;
}
.breadcrumbs a { border-radius: var(--r1); }
.breadcrumbs i { font-size: 1.1em; color: var(--ink-3); }
.breadcrumbs a:hover { background: var(--row-hover); }

/* ---------- 7. VÙNG THẢ FILE ---------- */
/* ::before → nằm TRƯỚC mọi item trong luồng block, tức là lên đầu
   trang mà không cần đổi HTML. Đặt bên trong #listing vì đó mới là
   phần tử thật sự bắt sự kiện drop — vẽ vùng thả ra ngoài nó là
   nói dối người dùng. */
#listing::before {
  content: "Kéo thả file vào đây để tải lên";
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-height: 96px;
  margin: 0 0 1.25em;
  padding: 1em;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r3);
  background: var(--accent-tint);
  color: var(--ink-2);
  font-size: .95em;
  font-weight: 500;
  text-align: center;
  transition: border-color var(--base) var(--ease), background-color var(--base) var(--ease);
}
#listing:hover::before { border-color: color-mix(in oklab, var(--accent) 55%, var(--line-strong)); }

/* ---------- 8. DANH SÁCH ---------- */
#listing h2 {
  color: var(--ink-3);
  font-size: clamp(11px, .68rem + .10vw, 12px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 1.3em 0 .5em .2em;
}

/* Bảng dày: hàng là bề mặt sáng trên nền canvas, ngăn bằng hairline.
   Bản gốc bọc viền quanh TỪNG dòng → nhìn như một chồng hộp rời. */
#listing.list .item {
  background: var(--panel);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: .5em .9em;
  min-height: 44px;
  transition: background-color var(--fast) var(--ease);
}
/* :first-of-type là hàng .header (trong suốt) → bo góc rơi trượt ra ngoài
   khối trắng. Bo vào hàng dữ liệu đầu tiên mới đúng. */
#listing.list .item.header + .item,
#listing.list .item:not(.header):first-of-type {
  border-top-left-radius: var(--r2); border-top-right-radius: var(--r2);
}
#listing.list .item:last-of-type  { border-bottom: 0; border-bottom-left-radius: var(--r2); border-bottom-right-radius: var(--r2); box-shadow: var(--e1); }
/* Hover đổi NỀN, không đổi border — đổi border làm layout giật 1px. */
#listing.list .item:not(.header):hover { background: var(--row-hover); }
#listing .item[aria-selected="true"] { background: var(--row-active); }
#listing.list .item div:first-of-type i { font-size: 1.5em; }

#listing.list .item.header {
  background: transparent;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink-3);
  font-size: clamp(11px, .68rem + .10vw, 12px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .5em .9em;
  min-height: 0;
}
#listing .item .name { font-weight: 500; color: var(--ink); }
#listing .item .size, #listing .item .modified { color: var(--ink-3); font-size: .92em; }

/* Mosaic vẫn dùng được nếu người dùng bật lại — bán kính lồng đúng
   luật (ngoài = trong + padding), bóng theo token, thắng !important
   của bản gốc. */
#listing.mosaic .item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: .7em;
  box-shadow: var(--e1);
  transition: box-shadow var(--base) var(--ease), transform var(--base) var(--ease);
}
#listing.mosaic .item:hover { box-shadow: var(--e2) !important; transform: translateY(-1px); }

/* ---------- 9. NÚT, CARD, THANH CHỌN ---------- */
.button { border-radius: var(--r2); font-weight: 600; }
.button--blue { background: var(--accent); color: var(--accent-ink); }
.card { border-radius: var(--r3); box-shadow: var(--e3); background: var(--panel); }
#file-selection {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  box-shadow: var(--e3);
}
.action { border-radius: var(--r2); }
.action i { border-radius: var(--r1); }
/* Vùng bấm ≥ 40×40 kể cả khi icon 16px. */
nav .action, header .action, #file-selection .action { min-height: 40px; }
header .action, #file-selection .action { min-width: 40px; }
.action.disabled, .action[disabled] { opacity: .38; cursor: not-allowed; }

/* ---------- 10. LOGIN ---------- */
#login { background: var(--canvas); }
#login form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  box-shadow: var(--e2);
  width: min(88vw, 21em);
  max-width: 21em;
  padding: 1.7em 1.5em 1.5em;
}
#login h1 {
  font-size: clamp(19px, 1.10rem + .35vw, 23px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: .6em 0 1.15em;
}
#login img { width: 2.6em; height: 2.6em; }
#login form input { width: 100%; margin-bottom: .55em; }
#login form .button--block { width: 100%; padding: .7em; }

/* ---------- 11. FORM ---------- */
/* Bán kính lồng: form r3 + padding 1.5em → input tối đa r2. */
input, select, textarea {
  border-radius: var(--r2);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  padding: .62em .8em;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
input::placeholder { color: var(--ink-3); }
input:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--line-strong)); }

/* ---------- 12. TRẠNG THÁI ---------- */
/* Bốn thứ lộ ra ngay là UI chưa hoàn thiện. */
:root { accent-color: var(--accent); caret-color: var(--accent); scrollbar-color: var(--line-strong) transparent; }
::selection { background: color-mix(in oklab, var(--accent) 26%, transparent); color: inherit; }

:where(a, button, .action, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r1);
}
.action:focus-visible { outline-offset: 1px; }

/* ---------- 13. A11Y ---------- */
@media (prefers-contrast: more) {
  :root      { --line: rgb(18 24 32 / .30); --line-strong: rgb(18 24 32 / .48); --ink-3: #4c5665; }
  :root.dark { --line: rgb(255 255 255 / .30); --line-strong: rgb(255 255 255 / .48); --ink-3: #9aa4b3; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}