/* ============================================================
   BACKFILES DESIGN SYSTEM
   Canonical visual language
   ============================================================ */

/* ---------- Tokens ---------- */

:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-hover: #f1f1ef;

  --text: #191919;
  --secondary: #6f6f6a;
  --tertiary: #999994;

  --border: #e3e3df;
  --border-strong: #cececa;

  --danger: #dc2626;
  --success: #26734d;

  /* Scales with the viewport instead of being pinned to one pixel value.
     clamp() rather than raw vh: a header that is purely proportional becomes
     unusably short on a landscape phone and absurdly tall on a large monitor,
     so this varies between sensible bounds. */
  --header-height: clamp(52px, 6.5vh, 64px);
  --header-width: 1180px;
  --page-width: 1120px;

  --radius-sm: 8px;
  --radius-md: 13px;
}

/* ---------- Foundation ---------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* ============================================================
   Global header
   ============================================================ */

.app-header {
  position: relative;
  z-index: 100;

  width: 100%;
  height: var(--header-height);

  margin: 0;
  padding: 0;

  background: var(--bg);
  border: 0;
  border-bottom: 1px solid var(--border);

  box-shadow: none;
  filter: none;
  transform: none;
}

.app-header-inner {
  /* Full width with a fixed gutter, not constrained to --header-width.
     Constraining it made the brand and the navigation drift inward on wide
     screens by an amount that changed with the viewport, so the header sat
     differently on every page. This is the treatment the Messages page was
     already getting, because the messaging bundle loads after this file and
     declared the same rule; now every page gets it from one place. */
  width: min(100%, calc(100% - clamp(16px, 3.2vw, 40px)));
  height: 100%;

  margin: 0 auto;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand,
.brand:visited {
  display: inline-block;

  margin: 0;
  padding: 0;

  background: transparent;
  color: var(--text);

  border: 0;
  border-radius: 0;

  box-shadow: none;
  filter: none;
  transform: none;

  text-decoration: none;

  font-size: 12px;
  font-weight: 750;
  line-height: normal;
  letter-spacing: .12em;

  transition: none;
}

.brand:hover,
.brand:focus,
.brand:active {
  background: transparent;
  color: var(--text);

  box-shadow: none;
  filter: none;
  transform: none;
}

/* ---------- Navigation ---------- */

.app-nav {
  display: flex;
  align-items: center;

  gap: 22px;

  margin: 0;
  padding: 0;

  background: transparent;

  border: 0;

  box-shadow: none;
  filter: none;
  transform: none;
}

.app-nav .nav-link,
.app-nav .nav-link:visited {
  position: relative;

  display: inline-block;

  margin: 0;
  padding: 5px 0;

  background: transparent;
  color: var(--secondary);

  border: 0;
  border-radius: 0;

  box-shadow: none;
  filter: none;
  transform: none;

  text-decoration: none;

  font-size: 13px;
  font-weight: 600;
  line-height: normal;

  transition: none;
}

.app-nav .nav-link:hover,
.app-nav .nav-link:focus,
.app-nav .nav-link:active {
  margin: 0;
  padding: 5px 0;

  background: transparent;
  color: var(--text);

  border: 0;
  border-radius: 0;

  box-shadow: none;
  filter: none;
  transform: none;

  text-decoration: none;
}

.app-nav .nav-link.active {
  background: transparent;
  color: var(--text);

  box-shadow: none;
  filter: none;
  transform: none;
}

.nav-logout {
  appearance: none;
  -webkit-appearance: none;

  border: 0;

  font-family: inherit;

  cursor: pointer;
}

.app-nav .nav-link.active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -6px;

  height: 1px;

  background: currentColor;

  border: 0;
  border-radius: 0;

  box-shadow: none;
  transform: none;
}

/* ============================================================
   Shared page language
   ============================================================ */

.page {
  width: min(
    var(--page-width),
    calc(100% - 40px)
  );

  margin: 0 auto;
  padding: 38px 0 80px;
}

.page-title {
  margin: 0;

  color: var(--text);

  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.page-description {
  margin: 6px 0 0;

  color: var(--secondary);

  font-size: 13px;
  line-height: 1.45;
}

/* ---------- Cards ---------- */

.surface-card {
  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: var(--radius-md);

  box-shadow: none;
}

/* ---------- Forms ---------- */

.field {
  margin-top: 13px;
}

.field label {
  display: block;

  margin-bottom: 6px;

  color: var(--secondary);

  font-size: 12px;
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;

  padding: 0 10px;

  background: var(--surface);
  color: var(--text);

  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);

  outline: none;
}

.field input,
.field select {
  height: 39px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--secondary);
}

/* ---------- Buttons ---------- */

.primary-button {
  min-height: 34px;

  padding: 0 13px;

  background: var(--text);
  color: var(--surface);

  border: 0;
  border-radius: var(--radius-sm);

  font-size: 12px;
  font-weight: 680;

  cursor: pointer;

  box-shadow: none;
  transform: none;
}

.primary-button:hover,
.primary-button:focus,
.primary-button:active {
  box-shadow: none;
  transform: none;
}

.primary-button:disabled {
  opacity: .5;
  cursor: default;
}

.secondary-button {
  min-height: 34px;

  padding: 0 12px;

  background: transparent;
  color: var(--secondary);

  border: 1px solid var(--border);
  border-radius: var(--radius-sm);

  font-size: 12px;
  font-weight: 650;

  cursor: pointer;

  box-shadow: none;
  transform: none;
}

.secondary-button:hover {
  background: var(--surface-hover);
  color: var(--text);

  transform: none;
}

/* ---------- Status ---------- */

.text-secondary {
  color: var(--secondary);
}

.text-tertiary {
  color: var(--tertiary);
}

.text-danger {
  color: var(--danger);
}

.text-success {
  color: var(--success);
}

/* ============================================================
   Dark mode
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111110;
    --surface: #191918;
    --surface-hover: #222220;

    --text: #f1f1ee;
    --secondary: #aaa9a3;
    --tertiary: #777771;

    --border: #30302d;
    --border-strong: #484844;

    --danger: #ff6961;
    --success: #78c69a;
  }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 640px) {
  .app-header-inner {
    width: calc(100% - 24px);
  }

  .app-nav {
    gap: 14px;
  }

  .app-nav .nav-link {
    font-size: 12px;
  }

  .page {
    width: calc(100% - 24px);
  }
}


/* ==========================================================
   Backfiles shared dialogs and status messages
   ========================================================== */

.backfiles-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: grid;
  place-items: center;
  padding: 24px;

  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 160ms ease,
    visibility 160ms ease;
}

.backfiles-dialog-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.backfiles-dialog {
  width: min(100%, 480px);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;

  box-sizing: border-box;
  padding: 22px;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;

  background: #111;
  color: #f5f5f5;

  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);

  transform: translateY(8px) scale(.985);
  transition: transform 160ms ease;
}

.backfiles-dialog-overlay.is-open .backfiles-dialog {
  transform: translateY(0) scale(1);
}

.backfiles-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.backfiles-dialog-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

.backfiles-dialog-description {
  margin: 7px 0 0;
  color: #aaa;
  font-size: 14px;
  line-height: 1.45;
}

.backfiles-dialog-close {
  appearance: none;
  -webkit-appearance: none;

  width: 30px;
  height: 30px;
  flex: 0 0 auto;

  border: 0;
  border-radius: 10px;

  background: transparent;
  color: #aaa;

  font: inherit;
  font-size: 24px;
  line-height: 1;

  cursor: pointer;
}

.backfiles-dialog-close:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.backfiles-dialog-fields {
  display: grid;
  gap: 16px;
}

.backfiles-field {
  display: grid;
  gap: 7px;
}

.backfiles-field-label {
  font-size: 13px;
  font-weight: 650;
}

.backfiles-field input,
.backfiles-field select,
.backfiles-field textarea {
  width: 100%;
  box-sizing: border-box;

  padding: 11px 12px;

  border: 1px solid #333;
  border-radius: 10px;

  background: rgba(255, 255, 255, .04);
  color: #f5f5f5;

  font: inherit;
}

.backfiles-field input:focus,
.backfiles-field select:focus,
.backfiles-field textarea:focus {
  outline: 2px solid rgba(255, 255, 255, .18);
  outline-offset: 1px;
}

.backfiles-field-hint {
  color: #999;
  font-size: 12px;
  line-height: 1.4;
}

.backfiles-dialog-error {
  margin-top: 16px;
  padding: 11px 12px;

  border: 1px solid rgba(255, 100, 100, .25);
  border-radius: 10px;

  background: rgba(255, 70, 70, .08);

  font-size: 13px;
  line-height: 1.4;
}

.backfiles-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  margin-top: 22px;
}

.backfiles-dialog-cancel,
.backfiles-dialog-submit {
  appearance: none;
  -webkit-appearance: none;

  min-height: 34px;
  padding: 6px 11px;

  border-radius: 8px;

  font: inherit;
  font-size: 12px;
  font-weight: 650;

  cursor: pointer;
}

.backfiles-dialog-cancel {
  border: 1px solid #333;
  background: transparent;
  color: #f5f5f5;
}

.backfiles-dialog-submit {
  border: 1px solid transparent;
  background: #f2f2f2;
  color: #111;
}

.backfiles-dialog-submit.is-danger {
  background: #c83d3d;
  color: #fff;
}

.backfiles-dialog-submit:disabled,
.backfiles-dialog-cancel:disabled,
.backfiles-dialog-close:disabled {
  cursor: wait;
  opacity: .58;
}

.backfiles-status-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1100;

  display: grid;
  gap: 8px;

  width: min(380px, calc(100vw - 40px));

  pointer-events: none;
}

.backfiles-status {
  padding: 12px 14px;

  border: 1px solid #333;
  border-radius: 12px;

  background: #111;
  color: #fff;

  box-shadow: 0 14px 40px rgba(0, 0, 0, .32);

  font-size: 13px;
  line-height: 1.4;

  opacity: 0;
  transform: translateY(8px);

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.backfiles-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.backfiles-status-error {
  border-color: rgba(255, 100, 100, .28);
}

@media (max-width: 600px) {
  .backfiles-dialog-overlay {
    align-items: end;
    padding: 12px;
  }

  .backfiles-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
  }

  .backfiles-dialog-actions {
    flex-direction: column-reverse;
  }

  .backfiles-dialog-cancel,
  .backfiles-dialog-submit {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .backfiles-dialog-overlay,
  .backfiles-dialog,
  .backfiles-status {
    transition: none;
  }
}


/* ==========================================================
   File administration actions
   ========================================================== */

.admin-delete {
  appearance: none;
  -webkit-appearance: none;

  width: 31px;
  height: 31px;

  margin-left: 6px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: var(--secondary);

  cursor: pointer;

  box-shadow: none;
  transform: none;
}

.admin-delete:hover {
  background: rgba(220, 38, 38, .07);
  color: var(--danger);

  transform: none;
}

.admin-delete:disabled {
  opacity: .45;
  cursor: wait;
}

.admin-delete svg {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================
   Files admin toolbar — canonical
   ========================================================== */

.files-admin-tools {
  margin-top: 14px;
  padding: 12px 14px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: rgba(127, 127, 127, 0.035);
  box-shadow: none;
}

.files-admin-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;
  min-height: 34px;
}

.files-admin-copy {
  min-width: 0;
}

.files-admin-title {
  display: block;

  color: var(--text);

  font-size: 12px;
  line-height: 1.25;
  font-weight: 650;
}

.files-admin-description {
  margin-top: 2px;

  color: var(--secondary);

  font-size: 11px;
  line-height: 1.35;
}

.files-admin-actions {
  flex: none;

  display: flex;
  align-items: center;
  gap: 7px;
}

.files-admin-action {
  appearance: none;
  -webkit-appearance: none;

  min-height: 31px;

  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 10px;

  border: 1px solid var(--border);
  border-radius: 8px;

  background: transparent;
  color: var(--secondary);

  font: inherit;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;

  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;

  box-shadow: none;
  transform: none;
}

.files-admin-action:hover {
  background: var(--surface-hover);
  color: var(--text);

  box-shadow: none;
  transform: none;
}

.files-admin-action-primary {
  border-color: var(--text);

  background: var(--text);
  color: var(--surface);
}

.files-admin-action-primary:hover {
  opacity: .86;

  background: var(--text);
  color: var(--surface);
}

.files-admin-action:disabled {
  opacity: .45;
  cursor: wait;
}

.files-admin-status {
  min-height: 0;

  margin: 0;

  color: var(--secondary);

  font-size: 11px;
  line-height: 1.35;
}

.files-admin-status:not(:empty) {
  margin-top: 7px;
}

@media(max-width:640px) {
  .files-admin-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .files-admin-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* ================================================================
   ICON NAVIGATION

   The global header carries icons rather than words. At the 13px this
   system specifies, five labels plus a logout control do not fit on a
   phone, and the messaging app already established this icon set, so
   the header is identical whichever page renders it.

   Every icon keeps its label as an accessible name and a tooltip, so
   nothing is lost to a screen reader or on hover.
   ================================================================ */

/* Scoped through .app-header so it outranks the messaging bundle's own
   `.app-nav { gap }`, which is loaded after this file on the Messages page. */
.app-header .app-nav {
  /* Icons sit closer than words did. */
  gap: 4px;
}

.app-nav .nav-link.nav-icon,
.app-nav .nav-link.nav-icon:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: clamp(32px, 4.4vw, 36px);
  height: clamp(32px, 4.4vw, 36px);
  padding: 0;

  background: transparent;

  box-shadow: none;
  filter: none;
  transform: none;
}

.app-nav .nav-link.nav-icon svg {
  display: block;
}

/* The active rule underlines the width of the element. Inset it so the
   mark reads as belonging to the glyph rather than to the hit area. */
.app-nav .nav-link.nav-icon.active::after {
  left: 8px;
  right: 8px;
}

@media (max-width: 600px) {
  .app-header .app-nav {
    gap: 0;
  }

  .app-nav .nav-link.nav-icon,
  .app-nav .nav-link.nav-icon:visited {
    width: 40px;
    height: 40px;
  }
}

/* ================================================================
   HORIZONTAL LOCK ON SMALL SCREENS

   Reconstructed Word documents, long file paths and wide tables all
   try to widen the page. Each is contained where it lives, and this
   is the backstop: a case that slips through degrades to a clipped
   element rather than a whole page that slides sideways.

   `clip` rather than `hidden` because `hidden` makes the element a
   scroll container, which silently breaks position: sticky on any
   descendant. `hidden` stays first as the fallback for engines that
   do not know `clip`.
   ================================================================ */

@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  /* Content reconstructed from Word carries page-sized tables and images.
     These apply anywhere a document is rendered, including the file viewer,
     not just the search page's card bodies. */
  table {
    max-width: 100%;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}