/* OmniAsync CDN admin — Google Drive style shell, list/grid file browser, upload tray. */

:root {
  --surface: #ffffff;
  --shell: #f8fafd;
  --on-surface: #1f1f1f;
  --on-surface-variant: #444746;
  --muted: #5f6368;
  --outline: #c4c7c5;
  --divider: #e3e3e3;
  --primary: #0b57d0;
  --primary-hover: #0842a0;
  --on-primary: #ffffff;
  --danger: #b3261e;
  --nav-active: #c2e7ff;
  --nav-active-text: #001d35;
  --row-hover: #f0f4f9;
  --row-selected: #d3e3fd;
  --search: #edf2fc;
  --topbar-height: 64px;
  --sidenav-width: 256px;
  font-family: "Google Sans", Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--on-surface);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--shell);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button { font: inherit; color: inherit; }

.icon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.icon-lg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 20px;
  background: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s;
}

.btn:disabled { opacity: .38; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.btn-filled { background: var(--primary); color: var(--on-primary); }
.btn-filled:not(:disabled):hover { background: var(--primary-hover); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }

.btn-text { color: var(--primary); padding: 0 12px; }
.btn-text:not(:disabled):hover { background: rgba(11, 87, 208, .08); }

.btn-danger { color: var(--danger); padding: 0 12px; }
.btn-danger:not(:disabled):hover { background: rgba(179, 38, 30, .08); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: background-color .15s;
}

.icon-btn:hover { background: rgba(31, 31, 31, .08); }
.icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.icon-btn.is-active { background: var(--nav-active); color: var(--nav-active-text); }

/* ---------------------------------------------------------------- top bar */

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--topbar-height);
  padding: 0 16px;
  background: var(--shell);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--on-surface-variant);
}

.topbar-brand .logo { color: var(--primary); }
.topbar-brand strong { color: var(--on-surface); font-weight: 500; }

.searchbar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  height: 48px;
  margin: 0 8px;
  padding: 0 8px 0 14px;
  border-radius: 24px;
  background: var(--search);
  color: var(--on-surface-variant);
  transition: background-color .15s, box-shadow .15s;
}

.searchbar:focus-within {
  background: var(--surface);
  box-shadow: 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.searchbar input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--on-surface);
  outline: none;
}

.searchbar input::placeholder { color: var(--muted); }

.topbar-end { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: default;
}

/* ---------------------------------------------------------------- shell */

.workspace {
  display: flex;
  height: calc(100vh - var(--topbar-height));
}

.sidenav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: var(--sidenav-width);
  flex: none;
  padding: 0 12px 16px 8px;
  overflow-y: auto;
}

.new-button {
  align-self: flex-start;
  height: 48px;
  margin: 0 0 12px 8px;
  padding: 0 22px 0 18px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 3px 1px rgba(60, 64, 67, .15);
  color: var(--on-surface);
  font-weight: 500;
}

.new-button:hover { background: #f6f9fe; box-shadow: 0 2px 6px 2px rgba(60, 64, 67, .15); }
.new-button .icon { color: var(--primary); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 40px;
  padding: 0 16px 0 20px;
  border: 0;
  border-radius: 0 20px 20px 0;
  background: none;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s;
}

.nav-item:hover { background: rgba(31, 31, 31, .06); }
.nav-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.nav-item[aria-current="page"] { background: var(--nav-active); color: var(--nav-active-text); }
.nav-item .nav-count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
.nav-item[aria-current="page"] .nav-count { color: var(--nav-active-text); }

.storage {
  margin: 16px 8px 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
  color: var(--on-surface-variant);
}

.storage-title { display: flex; align-items: center; gap: 12px; font-weight: 500; }

.meter {
  height: 4px;
  margin: 12px 0 8px;
  border-radius: 2px;
  background: var(--divider);
  overflow: hidden;
}

.meter-fill { height: 100%; width: 0; border-radius: 2px; background: var(--primary); transition: width .3s; }
.storage-detail { font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- content */

.content {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 16px 0 0 0;
  background: var(--surface);
  overflow-y: auto;
  padding: 8px 24px 40px;
}

.content-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 16px;
}

.content-title { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -.01em; }
.content-head .spacer { flex: 1; }

.view-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--divider);
  border-radius: 20px;
}

.view-toggle .icon-btn { width: 34px; height: 34px; }

.selection-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  margin-bottom: 8px;
  padding: 0 8px 0 16px;
  border-radius: 24px;
  background: var(--row-selected);
  color: var(--nav-active-text);
}

.selection-bar .count { font-weight: 500; margin-right: 8px; }
.selection-bar .spacer { flex: 1; }
.selection-bar .btn-danger, .selection-bar .btn-text { color: var(--nav-active-text); }

/* ---------------------------------------------------------------- list view */

.file-table { width: 100%; border-collapse: collapse; }

.file-table th {
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface-variant);
  text-align: left;
  white-space: nowrap;
}

.file-table th.col-check { width: 48px; padding-right: 0; }
.file-table th.col-size, .file-table th.col-date { width: 160px; }
.file-table th.col-actions { width: 96px; }

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  margin-left: -8px;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.sort-btn:hover { background: rgba(31, 31, 31, .06); }
.sort-btn .icon { width: 16px; height: 16px; opacity: 0; transition: transform .15s; }
.sort-btn[data-active="true"] .icon { opacity: 1; }
.sort-btn[data-direction="asc"] .icon { transform: rotate(180deg); }

.file-row { height: 48px; cursor: default; }
.file-row td { padding: 0 12px; border-bottom: 1px solid #f1f3f4; font-size: 14px; color: var(--on-surface-variant); }
.file-row:hover td { background: var(--row-hover); }
.file-row[aria-selected="true"] td { background: var(--row-selected); color: var(--nav-active-text); }
.file-row td.cell-check { padding-right: 0; }
.file-row td.cell-name { color: var(--on-surface); }

.cell-name-inner { display: flex; align-items: center; gap: 12px; min-width: 0; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: flex; justify-content: flex-end; gap: 2px; }
.row-actions .icon-btn { width: 32px; height: 32px; opacity: 0; }
.file-row:hover .row-actions .icon-btn,
.file-row[aria-selected="true"] .row-actions .icon-btn,
.row-actions .icon-btn:focus-visible { opacity: 1; }

input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); cursor: pointer; }

/* ---------------------------------------------------------------- grid view */

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 16px;
  padding-top: 8px;
}

.file-card {
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  cursor: default;
  transition: background-color .15s, border-color .15s;
}

.file-card:hover { background: var(--row-hover); }
.file-card[aria-selected="true"] { background: var(--row-selected); border-color: var(--primary); }

.card-head { display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 12px; }
.card-head .file-name { flex: 1; font-size: 14px; color: var(--on-surface); font-weight: 500; }
.card-head .icon-btn { width: 32px; height: 32px; }

.card-preview {
  display: grid;
  place-items: center;
  height: 140px;
  margin: 0 12px 12px;
  border-radius: 8px;
  background: var(--shell);
  overflow: hidden;
}

.card-preview img { width: 100%; height: 100%; object-fit: cover; }
.card-preview .icon { width: 48px; height: 48px; }
.card-meta { display: flex; justify-content: space-between; gap: 8px; padding: 0 12px 12px; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- empty state */

.empty {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 88px 24px;
  text-align: center;
  color: var(--muted);
}

.empty .icon { width: 56px; height: 56px; color: var(--outline); }
.empty strong { font-size: 16px; font-weight: 500; color: var(--on-surface); }

/* ---------------------------------------------------------------- drop overlay */

.drop-overlay {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 2px dashed var(--primary);
  border-radius: 12px;
  background: rgba(232, 240, 254, .92);
  color: var(--primary);
  font-size: 16px;
  font-weight: 500;
  pointer-events: none;
  z-index: 4;
}

.drop-overlay .icon { width: 40px; height: 40px; }

/* ---------------------------------------------------------------- menu */

.menu {
  position: fixed;
  min-width: 220px;
  padding: 8px 0;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 2px 6px 2px rgba(60, 64, 67, .15), 0 1px 2px rgba(60, 64, 67, .3);
  z-index: 30;
}

.menu button {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 40px;
  padding: 0 20px;
  border: 0;
  background: none;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.menu button:hover { background: var(--row-hover); }
.menu button.is-danger { color: var(--danger); }
.menu hr { margin: 8px 0; border: 0; border-top: 1px solid var(--divider); }

/* ---------------------------------------------------------------- upload tray */

.tray {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 360px;
  max-width: calc(100vw - 32px);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 4px 12px 4px rgba(60, 64, 67, .15), 0 1px 3px rgba(60, 64, 67, .3);
  overflow: hidden;
  z-index: 20;
}

.tray-head {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 0 8px 0 16px;
  background: #f2f6fc;
  font-size: 14px;
  font-weight: 500;
}

.tray-head .tray-title { flex: 1; }
.tray-head .icon-btn { width: 32px; height: 32px; }
.tray-list { max-height: 260px; overflow-y: auto; }
.tray.is-collapsed .tray-list { display: none; }

.tray-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 12px 16px; }
.tray-item .file-name { min-width: 0; font-size: 13px; color: var(--on-surface); }
.tray-item .tray-status { justify-self: end; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tray-item .tray-status.is-error { color: var(--danger); }
.tray-item .meter { grid-column: 1 / -1; margin: 0; }

/* ---------------------------------------------------------------- dialog */

.scrim {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .5);
  z-index: 40;
}

.dialog {
  width: min(420px, 100%);
  padding: 24px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 8px 12px 6px rgba(60, 64, 67, .15);
}

.dialog h2 { margin: 0 0 12px; font-size: 22px; font-weight: 400; }
.dialog p { margin: 0; font-size: 14px; color: var(--on-surface-variant); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* ---------------------------------------------------------------- text fields */

.field { position: relative; display: block; margin-top: 20px; }

.field input {
  width: 100%;
  height: 56px;
  padding: 20px 16px 6px;
  border: 1px solid var(--outline);
  border-radius: 4px;
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--on-surface);
  outline: none;
}

.field input:focus { border: 2px solid var(--primary); padding: 19px 15px 5px; }

.field span {
  position: absolute;
  left: 13px;
  top: 17px;
  padding: 0 4px;
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
  pointer-events: none;
  transition: top .12s, font-size .12s, color .12s;
}

.field input:focus + span,
.field input:not(:placeholder-shown) + span { top: -8px; font-size: 12px; }
.field input:focus + span { color: var(--primary); }

/* ---------------------------------------------------------------- auth */

.auth { display: grid; place-items: center; min-height: 100vh; padding: 24px; }

.auth-card {
  width: min(448px, 100%);
  padding: 40px;
  border: 1px solid var(--divider);
  border-radius: 28px;
  background: var(--surface);
}

.auth-brand { display: flex; align-items: center; gap: 10px; color: var(--primary); font-size: 16px; font-weight: 500; }
.auth-card h1 { margin: 20px 0 8px; font-size: 26px; font-weight: 400; }
.auth-card .auth-subtitle { margin: 0; font-size: 15px; color: var(--on-surface-variant); }
.auth-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; }
.auth-actions .btn-text { margin-right: auto; padding-left: 0; }
.auth-message { min-height: 20px; margin: 16px 0 0; font-size: 13px; color: var(--danger); }
.auth-message.is-info { color: var(--on-surface-variant); }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 24px;
  bottom: 24px;
  max-width: calc(100vw - 48px);
  padding: 14px 20px;
  border-radius: 8px;
  background: #303030;
  color: #f2f2f2;
  font-size: 14px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
  z-index: 50;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .sidenav {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    z-index: 25;
    background: var(--shell);
    box-shadow: 0 8px 12px 6px rgba(60, 64, 67, .15);
  }

  .sidenav[data-collapsed="true"] { display: none; }
  .content { border-radius: 0; }
  .file-table th.col-date, .file-row td.cell-date { display: none; }
}

@media (max-width: 640px) {
  .topbar { padding: 0 8px; }
  .topbar-brand { font-size: 16px; }
  .topbar-brand span { display: none; }
  .searchbar { max-width: none; min-width: 0; }
  .topbar-end { gap: 2px; }
  .avatar { display: none; }
  .content { padding: 8px 12px 32px; }
  .file-table th.col-size, .file-row td.cell-size { display: none; }
  .file-table th.col-date, .file-row td.cell-date { display: none; }
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .card-preview { height: 110px; }
  .tray { right: 8px; bottom: 8px; }
  .dialog { padding: 20px 16px; border-radius: 20px; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .btn { width: 100%; }
}

@media (max-width: 480px) {
  .topbar { gap: 6px; }
  .topbar-brand { min-width: 0; }
  .searchbar { height: 42px; }
  .searchbar .icon { width: 18px; height: 18px; }
  .content-head { align-items: flex-start; flex-direction: column; }
  .content-head .spacer { display: none; }
  .view-toggle { width: 100%; justify-content: flex-end; }
  .selection-bar { height: auto; min-height: 48px; padding: 8px 12px; flex-wrap: wrap; }
  .selection-bar .count { width: 100%; }
  .selection-bar .spacer { display: none; }
  .selection-bar .btn { flex: 1; }
  .auth { padding: 16px; }
  .auth-card { padding: 24px 16px; border-radius: 20px; }
  .auth-actions { flex-direction: column-reverse; }
  .auth-actions .btn { width: 100%; }
  .auth-actions .btn-text { margin-right: 0; }
  .menu { min-width: 180px; }
  .tray { width: calc(100vw - 16px); }
  .tray-item { grid-template-columns: 1fr; }
  .tray-item .tray-status { justify-self: start; }
}