/* Pol's theme layer on top of Tabler (vendor/tabler). Tabler does the components; this file sets
   the brand colours from the logo, the Persian font, the glass chrome and the few pieces Tabler
   has no component for (space chips, command palette, dock, drop overlay, arch art).
   Glass is only for chrome (top bar, dock, dialogs, palette, upload panel, toasts). File lists and
   forms sit on solid surfaces so text keeps its contrast. */

@font-face {
  font-family: Vazirmatn;
  src: url("/fonts/Vazirmatn-wght.woff2") format("woff2-variations"),
       url("/fonts/Vazirmatn-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ brand tokens */

:root, [data-bs-theme=light] {
  --pol-navy: #23336a;
  --pol-navy-rgb: 35, 51, 106;
  --pol-turq: #27b2b4;
  --pol-turq-rgb: 39, 178, 180;
  --pol-teal: #0e7a7e;            /* turquoise dark enough for text on white (5:1) */
  --pol-focus: #12898c;           /* focus outline, 4:1 against white */
  --pol-ink: #172042;

  --pol-bg-a: #e7ecf7;
  --pol-bg-b: #edf2f8;
  --pol-bg-c: #dff0f0;
  --pol-glow-a: rgba(39, 178, 180, .16);
  --pol-glow-b: rgba(35, 51, 106, .10);
  --pol-girih: url("/img/girih-light.svg");

  --pol-glass: rgba(255, 255, 255, .66);
  --pol-glass-strong: rgba(255, 255, 255, .82);
  --pol-glass-solid: #f8fafd;
  --pol-glass-border: rgba(255, 255, 255, .75);
  --pol-glass-edge: rgba(35, 51, 106, .10);
  --pol-glass-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 12px 32px -14px rgba(23, 32, 66, .32);
  --pol-hover: rgba(35, 51, 106, .06);
  --pol-chip-active-bg: #ffffff;
  --pol-chip-active-fg: var(--pol-navy);
  --pol-arcade: #23336a;
  --pol-niche-fill: rgba(39, 178, 180, .07);
  --pol-niche-line: rgba(35, 51, 106, .28);
  --pol-drop-bg: rgba(231, 246, 246, .92);

  --tblr-font-sans-serif: Vazirmatn, Tahoma, "Segoe UI", sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  --tblr-body-font-size: .9375rem;
  --tblr-body-line-height: 1.65;
  --tblr-body-color: #172042;
  --tblr-body-color-rgb: 23, 32, 66;
  --tblr-emphasis-color: #0f1733;
  --tblr-body-bg: #edf2f8;
  --tblr-body-bg-rgb: 237, 242, 248;

  --tblr-primary: #23336a;
  --tblr-primary-rgb: 35, 51, 106;
  --tblr-primary-darken: #1a2753;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-lt: #e9ebf3;
  --tblr-primary-lt-rgb: 233, 235, 243;
  --tblr-primary-text-emphasis: #141e40;
  --tblr-primary-bg-subtle: #d3d6e1;
  --tblr-primary-border-subtle: #a7adc3;

  --tblr-secondary: #5a6485;
  --tblr-secondary-rgb: 90, 100, 133;
  --tblr-muted: #5a6485;
  --tblr-muted-rgb: 90, 100, 133;
  --tblr-secondary-color: #5a6485;
  --tblr-gray-500: #5f6989;

  --tblr-link-color: #0e7a7e;
  --tblr-link-color-rgb: 14, 122, 126;
  --tblr-link-hover-color: #0a5c5f;
  --tblr-link-hover-color-rgb: 10, 92, 95;

  --tblr-border-color: #dde2ee;
  --tblr-border-color-translucent: rgba(35, 51, 106, .10);
  --tblr-border-radius: 8px;
  --tblr-border-radius-lg: 14px;
  --tblr-focus-ring-color: rgba(39, 178, 180, .35);
}

[data-bs-theme=dark] {
  --pol-teal: #5fd3d4;
  --pol-focus: #5fd3d4;
  --pol-ink: #e4e8f6;

  --pol-bg-a: #0a1029;
  --pol-bg-b: #0d1838;
  --pol-bg-c: #072a33;
  --pol-glow-a: rgba(39, 178, 180, .13);
  --pol-glow-b: rgba(96, 116, 210, .12);
  --pol-girih: url("/img/girih-dark.svg");

  --pol-glass: rgba(20, 28, 62, .62);
  --pol-glass-strong: rgba(20, 28, 62, .84);
  --pol-glass-solid: #151d40;
  --pol-glass-border: rgba(255, 255, 255, .09);
  --pol-glass-edge: rgba(255, 255, 255, .06);
  --pol-glass-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 16px 40px -16px rgba(0, 0, 0, .6);
  --pol-hover: rgba(255, 255, 255, .06);
  --pol-chip-active-bg: rgba(255, 255, 255, .10);
  --pol-chip-active-fg: #ffffff;
  --pol-arcade: #1f2b5e;
  --pol-niche-fill: rgba(39, 178, 180, .08);
  --pol-niche-line: rgba(200, 212, 255, .28);
  --pol-drop-bg: rgba(10, 42, 51, .92);

  --tblr-body-color: #e4e8f6;
  --tblr-body-color-rgb: 228, 232, 246;
  --tblr-emphasis-color: #ffffff;
  --tblr-body-bg: #0c1433;
  --tblr-body-bg-rgb: 12, 20, 51;
  --tblr-bg-surface: #131b3c;
  --tblr-bg-surface-secondary: #19224a;
  --tblr-bg-surface-tertiary: #10173a;
  --tblr-bg-surface-dark: #0c1433;
  --tblr-bg-forms: #0f1738;

  /* Navy buttons vanish on a navy page, so dark mode leads with the logo's turquoise. */
  --tblr-primary: #2bb7b9;
  --tblr-primary-rgb: 43, 183, 185;
  --tblr-primary-darken: #24a2a4;
  --tblr-primary-fg: #06232a;
  --tblr-primary-lt: #12303f;
  --tblr-primary-lt-rgb: 18, 48, 63;
  --tblr-primary-text-emphasis: #8be0e1;

  --tblr-secondary: #a3acca;
  --tblr-secondary-rgb: 163, 172, 202;
  --tblr-muted: #a3acca;
  --tblr-muted-rgb: 163, 172, 202;
  --tblr-secondary-color: #a3acca;
  --tblr-gray-500: #a3acca;

  --tblr-link-color: #5fd3d4;
  --tblr-link-color-rgb: 95, 211, 212;
  --tblr-link-hover-color: #8be0e1;
  --tblr-link-hover-color-rgb: 139, 224, 225;

  --tblr-border-color: #283364;
  --tblr-border-color-translucent: rgba(160, 176, 240, .14);
  --tblr-dark-mode-border-color: #283364;
  --tblr-dark-mode-border-color-translucent: rgba(160, 176, 240, .14);
}

/* ------------------------------------------------------------------ page */

html { scroll-padding-top: 6rem; background-color: var(--tblr-body-bg); }
body {
  background: transparent;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
}
/* The calm backdrop the glass sits on: navy to turquoise, with a faint khatam lattice. Fixed and
   painted once, so scrolling never repaints it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--pol-girih) center top / 96px 96px repeat,
    radial-gradient(60rem 40rem at 100% 0, var(--pol-glow-a), transparent 70%),
    radial-gradient(50rem 40rem at 0 100%, var(--pol-glow-b), transparent 70%),
    linear-gradient(155deg, var(--pol-bg-a) 0%, var(--pol-bg-b) 45%, var(--pol-bg-c) 100%);
}
h1, h2, h3, .h1, .h2, .h3, .page-title, .card-title, .modal-title { font-weight: 700; letter-spacing: 0; }
.text-secondary { --tblr-text-opacity: 1; }
/* Persian letters join up; letter-spacing pulls words apart, so Tabler's tracked labels get none. */
.page-pretitle, .badge, .dropdown-header, .datagrid-title, .table thead th, .hr-text, .subheader { letter-spacing: 0; }
.table thead th { line-height: 1.5; }
.badge { line-height: 1.35; }
.btn-close { --tblr-btn-close-opacity: .7; --tblr-btn-close-hover-opacity: 1; }
/* Tabler's ring is drawn outside the button, where a dialog's corner cuts it off, and on any focus. */
.pol-dialog .btn-close:focus { box-shadow: none; }
.pol-dialog .btn-close:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -.625rem; border-radius: 1rem; }
/* Tabler sizes small icon buttons with an invalid sum (a length times a length), which browsers
   ignore: they collapse to about 10px and their icons overlap. */
.btn-icon.btn-sm { min-width: 1.75rem; min-height: 1.75rem; padding: 0; }
.btn-icon.btn-sm .icon { margin: 0; }
/* An icon never gives way to the text beside it. */
svg.icon { flex: none; }
[dir=ltr], .font-monospace { unicode-bidi: isolate; }
a { text-underline-offset: .2em; }

:focus-visible { outline: 2px solid var(--pol-focus); outline-offset: 2px; }
.btn:focus-visible, .dropdown-item:focus-visible { outline: 2px solid var(--pol-focus); outline-offset: 2px; box-shadow: none; }
.form-control:focus, .form-select:focus {
  border-color: var(--pol-focus);
  box-shadow: 0 0 0 .2rem rgba(var(--pol-turq-rgb), .28);
}
.form-control[aria-invalid=true], .form-select[aria-invalid=true] { border-color: var(--tblr-danger); }

#root { flex: 1 0 auto; display: flex; flex-direction: column; }
.pol-loading { margin: 6rem auto; }

/* ------------------------------------------------------------------ glass */

.pol-glass {
  background: var(--pol-glass);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--pol-glass-border);
  box-shadow: var(--pol-glass-shadow), 0 0 0 1px var(--pol-glass-edge);
}
/* Without backdrop-filter the glass would be see-through and hard to read: use a near-solid tint. */
/* These switch the glass colours themselves to solid, so every glass surface follows, including the
   palette and dialogs, which set their own (stronger) glass colour. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-bs-theme] { --pol-glass: var(--pol-glass-solid); --pol-glass-strong: var(--pol-glass-solid); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-bs-theme] { --pol-glass: var(--pol-glass-solid); --pol-glass-strong: var(--pol-glass-solid); }
  .pol-glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

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

.pol-bar {
  position: sticky;
  top: .75rem;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: calc(100% - 1.5rem);
  max-width: 1320px;
  margin: .75rem auto 0;
  padding: .5rem .75rem;
  border-radius: 1.125rem;
}
.pol-brand { display: flex; align-items: center; gap: .5rem; color: var(--tblr-body-color); flex: none; }
.pol-brand:hover { text-decoration: none; color: var(--tblr-body-color); }
.pol-brand-logo { display: block; width: 52px; height: 32px; object-fit: cover; }
.pol-brand-name { font-size: 1.375rem; font-weight: 800; line-height: 1; color: var(--pol-navy); }
[data-bs-theme=dark] .pol-brand-name { color: #ffffff; }
.pol-company {
  flex: none;
  max-width: 13rem;
  padding-inline-start: .75rem;
  border-inline-start: 1px solid var(--tblr-border-color);
  color: var(--tblr-secondary);
  font-size: .875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pol-company:empty { display: none; }
.pol-bar .spacer { flex: 1 1 auto; }

/* Space switcher: your files and each shared folder as a chip. The active one rests on a turquoise
   waterline, like the arches in the logo. */
.pol-spaces { display: flex; align-items: center; gap: .25rem; min-width: 0; flex: 0 1 auto; }
.pol-spaces:empty { display: none; }
.pol-chips { display: flex; gap: .25rem; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.pol-chips::-webkit-scrollbar { display: none; }
.pol-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  flex: none;
  max-width: 14rem;
  height: 2.25rem;
  padding: 0 .75rem;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: var(--tblr-secondary);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.pol-chip .icon { flex: none; }
.pol-chip-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Long names shorten with "…" to fit, rather than the last one being cut off. */
.pol-chips > .pol-chip { flex: 0 1 auto; min-width: 3.25rem; }
.pol-chips > .pol-chip:first-child, .pol-chip-all, .pol-chip-add { flex: none; }
.pol-chip:hover { background: var(--pol-hover); color: var(--tblr-body-color); text-decoration: none; }
.pol-chip[aria-current=page] {
  background: var(--pol-chip-active-bg);
  color: var(--pol-chip-active-fg);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--pol-turq), 0 1px 2px rgba(var(--pol-navy-rgb), .12);
}
.pol-chip-add { width: 2.25rem; padding: 0; justify-content: center; }
.pol-chip .badge { font-size: .75rem; }

.pol-search-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 0 1 16rem;
  min-width: 0;
  height: 2.375rem;
  padding: 0 .75rem;
  border: 1px solid var(--tblr-border-color-translucent);
  border-radius: .75rem;
  background: var(--pol-glass-strong);
  color: var(--tblr-secondary);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}
.pol-search-btn:hover { border-color: rgba(var(--pol-turq-rgb), .6); color: var(--tblr-body-color); }
.pol-search-text { flex: 1; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
kbd, .kbd {
  font-family: inherit;
  font-size: .75rem;
  padding: .0625rem .375rem;
  border-radius: .375rem;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary);
  border: 1px solid var(--tblr-border-color);
  box-shadow: none;
}

.pol-me .pol-me-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.375rem;
  padding: 0 .375rem 0 .5rem;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: var(--tblr-body-color);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
}
.pol-me .pol-me-btn:hover, .pol-me .pol-me-btn[aria-expanded=true] { background: var(--pol-hover); }
.pol-me .who { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-menu {
  --tblr-dropdown-bg: var(--tblr-bg-surface);
  --tblr-dropdown-border-radius: 12px;
  padding: .375rem;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 51, .45), 0 0 0 1px var(--tblr-border-color-translucent);
}
.dropdown-item { border-radius: 8px; gap: .5rem; min-height: 2.25rem; }
.dropdown-item .dropdown-item-icon { margin: 0; opacity: .85; }
.dropdown-header { font-size: .8125rem; color: var(--tblr-secondary); }
.pol-me-head { padding: .5rem .75rem .625rem; }
.pol-me-head strong { display: block; color: var(--tblr-body-color); }

/* ------------------------------------------------------------------ main area */

.pol-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.25rem .75rem 2.5rem;
  display: flex;
  flex-direction: column;
}
.pol-page-header { margin: .5rem 0 1rem; }
.pol-page-header .page-title { font-size: 1.5rem; line-height: 1.4; overflow-wrap: anywhere; }
.pol-page-header .page-subtitle { margin-top: .25rem; color: var(--tblr-secondary); }
.pol-crumbs { --tblr-breadcrumb-divider: "‹"; --tblr-breadcrumb-margin-bottom: .25rem; font-size: .9375rem; align-items: center; }
.pol-crumbs .breadcrumb-item.active { color: var(--tblr-body-color); font-weight: 500; }
.pol-crumbs a .icon { margin-inline-end: .25rem; vertical-align: -.15em; }
.pol-shared-search { max-width: 28rem; }
.pol-shared-row:hover { text-decoration: none; }
.pol-crumbs a {
  color: var(--tblr-link-color);
  padding: .125rem .375rem;
  margin: 0 -.375rem;
  border-radius: 6px;
}
.pol-crumbs a:hover { color: var(--tblr-body-color); }

/* Solid surface for lists and forms. */
.pol-sheet {
  --tblr-card-bg: var(--tblr-bg-surface);
  --tblr-card-border-color: var(--tblr-border-color-translucent);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(var(--pol-navy-rgb), .05), 0 18px 40px -28px rgba(var(--pol-navy-rgb), .35);
}
.pol-sheet > .card-header { min-height: 3.25rem; }
.pol-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.pol-sheet-head .btn-list { margin: 0; }
.pol-grow { flex: 1 1 auto; min-width: 0; }
.pol-head-main { flex: 1 1 18rem; min-width: 0; }

/* ------------------------------------------------------------------ files */

.dropzone { position: relative; flex: 1; }
.pol-files { margin: 0; }
.pol-files th { font-size: .75rem; font-weight: 600; white-space: nowrap; }
.pol-files td { padding-top: .625rem; padding-bottom: .625rem; }
.pol-files tbody tr { transition: background-color .12s; }
.pol-files tbody tr:hover { background: rgba(var(--pol-turq-rgb), .05); }
.pol-col-name { width: 52%; }
.pol-col-size, .pol-col-when, .pol-col-by { white-space: nowrap; font-size: .875rem; }
.pol-col-actions { width: 1%; white-space: nowrap; text-align: end; }
.pol-name { display: flex; align-items: center; gap: .75rem; color: var(--tblr-body-color); min-width: 0; }
.pol-name:hover { color: var(--tblr-body-color); text-decoration: none; }
.pol-name:hover .pol-name-main { text-decoration: underline; text-decoration-color: rgba(var(--pol-turq-rgb), .8); }
.pol-name-text { display: flex; flex-direction: column; min-width: 0; }
/* Names read in their own direction: an English name with Persian in it stays in order. */
.pol-name-main { font-weight: 500; overflow-wrap: anywhere; line-height: 1.5; unicode-bidi: plaintext; text-align: right; }
.pol-name-meta { display: none; font-size: .8125rem; }
.pol-files tr.drop-target, .pol-crumbs a.drop-target {
  background: rgba(var(--pol-turq-rgb), .14);
  outline: 2px dashed var(--pol-turq);
  outline-offset: -2px;
}
.pol-files tr[draggable=true] { cursor: default; }

.pol-actions { display: inline-flex; align-items: center; }
.pol-quick { display: inline-flex; gap: .125rem; }
.pol-quick .btn { opacity: 0; transition: opacity .12s; }
.pol-files tr:hover .pol-quick .btn, .pol-files tr:focus-within .pol-quick .btn { opacity: 1; }
.pol-more { display: none; }
.pol-more-always { display: block; }
@media (hover: none), (max-width: 767.98px) {
  .pol-quick { display: none; }
  .pol-more { display: block; }
}

/* File-type tiles: Tabler avatars tinted per type. Colours chosen for 3:1 icon contrast. */
.ft { --tblr-avatar-size: 2.25rem; --tblr-avatar-icon-size: 1.25rem; border-radius: 10px; box-shadow: none; flex: none; }
.ft.avatar-xs { --tblr-avatar-size: 1.5rem; --tblr-avatar-icon-size: 1rem; border-radius: 7px; }
.ft-folder { background: #def3f3; color: #0c6e72; }
.ft-pdf    { background: #fde8e7; color: #b42318; }
.ft-doc    { background: #e5edfc; color: #2550b8; }
.ft-sheet  { background: #e2f4ea; color: #087443; }
.ft-slides { background: #fdeee2; color: #b54708; }
.ft-image  { background: #f1e8fb; color: #7a2fb0; }
.ft-video  { background: #fce7f1; color: #b0245f; }
.ft-audio  { background: #e9e9fb; color: #4b45b8; }
.ft-zip    { background: #f6efdd; color: #8a5a00; }
.ft-text, .ft-other { background: #eceff6; color: #4a5576; }
[data-bs-theme=dark] .ft-folder { background: #12363f; color: #6fdadb; }
[data-bs-theme=dark] .ft-pdf    { background: #3a1d24; color: #ff9a8f; }
[data-bs-theme=dark] .ft-doc    { background: #1c2a52; color: #9dbbff; }
[data-bs-theme=dark] .ft-sheet  { background: #143428; color: #7fdcaa; }
[data-bs-theme=dark] .ft-slides { background: #3a2a1a; color: #ffb877; }
[data-bs-theme=dark] .ft-image  { background: #2e2148; color: #d2a8ff; }
[data-bs-theme=dark] .ft-video  { background: #3a1c33; color: #ff9cc9; }
[data-bs-theme=dark] .ft-audio  { background: #24244d; color: #b3b0ff; }
[data-bs-theme=dark] .ft-zip    { background: #352c16; color: #f0c870; }
[data-bs-theme=dark] .ft-text, [data-bs-theme=dark] .ft-other { background: #1f2850; color: #bcc5e4; }

/* People: initials on six calm tints. */
.pv { box-shadow: none; font-weight: 700; text-transform: none; }
.pv-0 { background: #e6e9f4; color: #23336a; }
.pv-1 { background: #dcf2f2; color: #0c6266; }
.pv-2 { background: #efe6f8; color: #6a2c99; }
.pv-3 { background: #e1f3e8; color: #0a6a3e; }
.pv-4 { background: #fbebdf; color: #9a4304; }
.pv-5 { background: #fbe6ec; color: #9e2150; }
[data-bs-theme=dark] .pv-0 { background: #263266; color: #d5dcfa; }
[data-bs-theme=dark] .pv-1 { background: #12404a; color: #a6eeee; }
[data-bs-theme=dark] .pv-2 { background: #352452; color: #e2c9ff; }
[data-bs-theme=dark] .pv-3 { background: #173c2c; color: #aeeccb; }
[data-bs-theme=dark] .pv-4 { background: #43301d; color: #ffd0a8; }
[data-bs-theme=dark] .pv-5 { background: #45202f; color: #ffbfd3; }

/* Dragging files in from the computer. */
.pol-drop {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 2px dashed var(--pol-turq);
  border-radius: 0 0 1rem 1rem;
  background: var(--pol-drop-bg);
}
.dropzone.dragging .pol-drop { display: block; }
.pol-drop-msg {
  position: sticky;
  top: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 3rem 1rem;
  text-align: center;
  font-weight: 600;
  color: var(--pol-teal);
}
.pol-drop-msg .icon { --tblr-icon-size: 2.5rem; stroke-width: 1.5; }

/* Empty states: a pointed-arch niche (taqcheh) with water at its foot. */
.pol-empty { padding: 3.5rem 1rem; }
.pol-empty .empty-img { margin-bottom: 1.25rem; }
.pol-empty .empty-subtitle { max-width: 30rem; margin-inline: auto; }
.pol-niche { position: relative; width: 96px; height: 106px; margin: 0 auto; color: var(--pol-teal); }
.pol-niche svg.art { position: absolute; inset: 0; width: 100%; height: 100%; }
.pol-niche .art-fill { fill: var(--pol-niche-fill); stroke: var(--pol-niche-line); stroke-width: 1.5; }
.pol-niche .art-water { fill: var(--pol-turq); opacity: .55; }
.pol-niche > .icon { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); --tblr-icon-size: 1.875rem; stroke-width: 1.5; }

/* ------------------------------------------------------------------ lists */

.pol-list .list-group-item { padding: .75rem 1.25rem; }
.pol-list .pol-strong { font-weight: 500; overflow-wrap: anywhere; }
.pol-list .pol-meta { font-size: .8125rem; color: var(--tblr-secondary); }
.pol-list a.pol-strong { color: var(--tblr-body-color); unicode-bidi: plaintext; }
.pol-list a.pol-strong:hover { text-decoration: underline; text-decoration-color: rgba(var(--pol-turq-rgb), .8); }
.pol-day {
  padding: .5rem 1.25rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-tertiary);
  border-bottom: 1px solid var(--tblr-border-color-translucent);
}
.pol-day:not(:first-child) { border-top: 1px solid var(--tblr-border-color-translucent); }
.pol-activity-line b { font-weight: 700; }

/* ------------------------------------------------------------------ progress (native element) */

progress.pol-progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: .375rem;
  border: 0;
  border-radius: 1rem;
  background: rgba(var(--pol-navy-rgb), .10);
  color: var(--pol-turq);
  overflow: hidden;
}
[data-bs-theme=dark] progress.pol-progress { background: rgba(255, 255, 255, .10); }
progress.pol-progress::-webkit-progress-bar { background: transparent; }
progress.pol-progress::-webkit-progress-value { background: var(--pol-turq); border-radius: 1rem; transition: width .2s; }
progress.pol-progress::-moz-progress-bar { background: var(--pol-turq); border-radius: 1rem; }
.pol-seats { width: 10rem; flex: none; }

/* ------------------------------------------------------------------ dialogs (native <dialog>) */

dialog.pol-dialog {
  /* Tabler defines these on .modal, which a native <dialog> doesn't use. */
  --tblr-modal-padding: 1.25rem;
  --tblr-modal-header-padding: 1rem 1.25rem;
  --tblr-modal-header-padding-x: 1.25rem;
  --tblr-modal-header-padding-y: 1rem;
  --tblr-modal-header-border-color: var(--tblr-border-color-translucent);
  --tblr-modal-header-border-width: 1px;
  --tblr-modal-footer-gap: .5rem;
  --tblr-modal-footer-bg: transparent;
  --tblr-modal-footer-border-color: var(--tblr-border-color-translucent);
  --tblr-modal-footer-border-width: 1px;
  --tblr-modal-title-line-height: 1.5;
  --tblr-modal-color: var(--tblr-body-color);
  --tblr-modal-bg: transparent;
  --tblr-modal-border-color: transparent;
  --tblr-modal-border-width: 0;
  --tblr-modal-border-radius: 1.125rem;
  --tblr-modal-inner-border-radius: 1.125rem;
  --tblr-modal-box-shadow: none;
  width: min(34rem, calc(100vw - 1.5rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tblr-body-color);
  overflow: visible;
}
dialog.pol-dialog-wide { width: min(62rem, calc(100vw - 1.5rem)); }
dialog.pol-dialog::backdrop, dialog.pol-palette::backdrop { background: rgba(10, 16, 41, .45); }
.pol-dialog .modal-content {
  --tblr-modal-bg: transparent;
  max-height: calc(100vh - 2rem);
  border-radius: 1.125rem;
  overflow: hidden;
}
.pol-dialog .modal-content.pol-glass { background: var(--pol-glass-strong); }
.pol-dialog .modal-header { gap: .75rem; border-bottom: 1px solid var(--tblr-border-color-translucent); }
.pol-dialog .modal-title { flex: 1; min-width: 0; font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pol-dialog .modal-header .btn-close { margin: 0; flex: none; }
.pol-dialog .modal-body { overflow: auto; min-height: 0; }
.pol-dialog .modal-footer { border-top: 1px solid var(--tblr-border-color-translucent); gap: .5rem; }
.pol-dialog .modal-footer > * { margin: 0; }
/* The form inside sits on a solid panel so labels and inputs keep full contrast. */
.pol-panel { background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color-translucent); border-radius: 12px; }
.pol-field { display: block; margin-bottom: 1rem; }
.pol-field .form-label { display: block; }
.pol-field .form-hint { margin-top: .375rem; }
.pol-preview { display: flex; align-items: center; justify-content: center; min-height: 12rem; }
.pol-preview img, .pol-preview video { max-width: 100%; max-height: 70vh; border-radius: 10px; }
.pol-preview audio { width: 100%; }
.pol-preview iframe { width: 100%; height: min(70vh, calc(100vh - 13rem)); border: 0; border-radius: 10px; background: #ffffff; }
.pol-dialog .list-group { --tblr-list-group-bg: var(--tblr-bg-surface); }
.pol-dialog .uname { font-size: .8125rem; color: var(--tblr-secondary); }

@media (prefers-reduced-motion: no-preference) {
  dialog.pol-dialog[open] .modal-content, dialog.pol-palette[open] .pol-palette-box { animation: pol-rise .16s ease-out; }
  .pol-toast { animation: pol-rise .18s ease-out; }
}
@keyframes pol-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ command palette */

dialog.pol-palette {
  width: min(40rem, calc(100vw - 1.5rem));
  max-width: none;
  margin: 12vh auto auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tblr-body-color);
  overflow: visible;
}
.pol-palette-box { border-radius: 1.125rem; overflow: hidden; background: var(--pol-glass-strong); }
.pol-palette-search { display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem; border-bottom: 1px solid var(--tblr-border-color-translucent); }
.pol-palette-search > .icon { color: var(--tblr-secondary); flex: none; }
.pol-palette-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--tblr-body-color);
  font: inherit;
  font-size: 1rem;
  padding: .375rem 0;
}
.pol-palette-search input:focus { outline: none; }
.pol-palette-search input::-webkit-search-cancel-button { display: none; }
.pol-palette-list { max-height: min(60vh, 26rem); overflow-y: auto; padding: .375rem; }
.pol-cmd-group { padding: .5rem .75rem .25rem; font-size: .75rem; font-weight: 600; color: var(--tblr-secondary); }
.pol-cmd {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: .375rem .75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tblr-body-color);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.pol-cmd[aria-selected=true] { background: rgba(var(--pol-turq-rgb), .16); box-shadow: inset -3px 0 0 var(--pol-turq); }
.pol-cmd:hover { background: var(--pol-hover); }
.pol-cmd[aria-selected=true]:hover { background: rgba(var(--pol-turq-rgb), .2); }
.pol-cmd > .icon { flex: none; color: var(--tblr-secondary); }
.pol-cmd .ft, .pol-cmd .pv { --tblr-avatar-size: 1.75rem; --tblr-avatar-icon-size: 1rem; }
.pol-cmd-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pol-cmd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pol-cmd-hint { font-size: .8125rem; color: var(--tblr-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pol-cmd-note { padding: .75rem; color: var(--tblr-secondary); font-size: .875rem; }
.pol-palette-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .5rem 1rem;
  border-top: 1px solid var(--tblr-border-color-translucent);
  font-size: .75rem;
  color: var(--tblr-secondary);
}
.pol-palette-foot kbd { margin-inline-end: .25rem; }
@media (hover: none) { .pol-palette-foot, .pol-palette-search kbd { display: none; } }

/* ------------------------------------------------------------------ dock (phones) */

.pol-dock {
  position: fixed;
  inset-inline: 0;
  bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 1020;
  display: none;
  width: min(26rem, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: .375rem;
  border-radius: 1.25rem;
  justify-content: space-around;
}
.pol-dock-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: .125rem;
  min-height: 3.25rem;
  padding: .375rem .25rem;
  border: 0;
  border-radius: .875rem;
  background: transparent;
  color: var(--tblr-secondary);
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
}
.pol-dock-item:hover { text-decoration: none; color: var(--tblr-body-color); background: var(--pol-hover); }
.pol-dock-item[aria-current=page] { color: var(--pol-chip-active-fg); background: var(--pol-chip-active-bg); box-shadow: inset 0 -3px 0 var(--pol-turq); font-weight: 700; }

/* ------------------------------------------------------------------ uploads and toasts */

.pol-uploads {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 1rem;
  z-index: 1040;
  width: min(22rem, calc(100vw - 2rem));
  max-height: 55vh;
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pol-uploads.card { --tblr-card-bg: transparent; }
.pol-uploads .card-header { border-bottom: 1px solid var(--tblr-border-color-translucent); background: transparent; padding: .625rem 1rem; }
.pol-uploads .card-title { font-size: .9375rem; margin: 0; }
.pol-up-list { overflow-y: auto; --tblr-list-group-bg: transparent; }
.pol-up-item { padding: .625rem 1rem; background: transparent; }
.pol-up-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .375rem; }
.pol-up-name { flex: 1; min-width: 0; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pol-up-done { display: none; color: var(--tblr-success); }
.pol-up-item.done .pol-up-done { display: inline-flex; }
.pol-up-item.failed progress { display: none; }
.pol-up-note { font-size: .8125rem; }
.pol-up-note:empty { display: none; }

.pol-toasts {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 1090;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2rem);
}
.pol-toast {
  --tblr-toast-max-width: 32rem;
  width: auto;
  border-radius: 14px;
  background: var(--pol-glass-strong);
  color: var(--tblr-body-color);
  font-size: .9375rem;
}
.pol-toast .toast-body { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; }
.pol-toast-action { flex: none; font-weight: 700; }

/* ------------------------------------------------------------------ sign-in and setup */

body:not(.pol-app) .pol-bar, body:not(.pol-app) .pol-dock { display: none !important; }
.pol-auth-page { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2rem 1rem 1rem; }
.pol-auth-logo { display: block; width: 168px; height: 104px; margin: 0 auto .25rem; object-fit: cover; }
.pol-auth-name { font-size: 2rem; font-weight: 800; line-height: 1.2; color: var(--pol-navy); text-align: center; margin: 0 0 1.25rem; }
[data-bs-theme=dark] .pol-auth-name { color: #ffffff; }
.pol-auth-card { border-radius: 1.125rem; }
.container-tight.pol-setup { max-width: 38rem; }
.pol-auth-card [data-company]:empty { display: none; }
.pol-auth-card .card-body { padding: 1.75rem; }
.pol-auth-card fieldset { border-top: 1px solid var(--tblr-border-color); padding-top: 1rem; margin-top: .5rem; }
.pol-auth-card legend { float: none; width: auto; font-size: 1rem; font-weight: 700; margin-bottom: .75rem; padding: 0; }
.pol-auth-card details summary { cursor: pointer; color: var(--tblr-link-color); font-weight: 500; }
.pol-auth-card details[open] summary { margin-bottom: .5rem; }
.pol-auth-note { max-width: 30rem; margin: 1rem auto 0; text-align: center; font-size: .875rem; color: var(--tblr-secondary); }
.pol-code-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pol-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1rem;
  padding: .375rem .625rem;
  border-radius: 8px;
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-body-color);
  user-select: all;
}

/* The bridge itself: an arcade of pointed arches with its reflection along the foot of the page. */
.pol-arcade { display: none; height: 124px; flex: none; }
body.pol-auth .pol-arcade { display: block; }
.pol-arcade svg { display: block; width: 100%; height: 100%; }
.pol-arcade .arc-deck { fill: var(--pol-arcade); }
.pol-arcade .arc-water { fill: var(--pol-turq); }
.pol-arcade .arc-r1 { stop-color: var(--pol-turq); stop-opacity: .45; }
.pol-arcade .arc-r2 { stop-color: var(--pol-turq); stop-opacity: 0; }

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 1199.98px) {
  .pol-company { display: none; }
  .pol-search-btn { flex: 0 0 auto; }
  .pol-search-btn .pol-search-text, .pol-search-btn kbd { display: none; }
}
@media (max-width: 991.98px) {
  .pol-me .who { display: none; }
}
@media (max-width: 767.98px) {
  .pol-bar { top: .5rem; width: calc(100% - 1rem); margin-top: .5rem; gap: .5rem; }
  .pol-spaces { display: none; }
  .pol-search-btn { display: none; }
  body.pol-app .pol-dock { display: flex; }
  body.pol-app .pol-main { padding-bottom: 6.5rem; }
  .pol-main { padding-inline: .5rem; }
  .pol-page-header .page-title { font-size: 1.25rem; }
  .pol-col-size, .pol-col-when, .pol-col-by { display: none; }
  .pol-name-meta { display: block; }
  .pol-files td, .pol-files th { padding-inline: .75rem; }
  .pol-uploads { inset-inline: .5rem; width: auto; bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
  .pol-toasts { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  dialog.pol-palette { margin-top: 1rem; }
  .pol-arcade { height: 92px; }
  .pol-auth-logo { width: 136px; height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ locked folders */

.pol-locked-note { display: inline-flex; align-items: center; gap: .375rem; color: var(--tblr-secondary); font-size: .8125rem; }
.pol-locked-note .icon { color: var(--pol-focus); }
.pol-inline-link { padding: 0; border: 0; background: none; font: inherit; color: var(--tblr-link-color); text-decoration: underline; cursor: pointer; }
.pol-lock-option { margin-top: .5rem; }
.pol-lock-option .form-check-label .icon { vertical-align: -2px; color: var(--pol-focus); }
.pol-recovery-code {
  margin: 1rem 0; padding: 1rem; text-align: center; direction: ltr; unicode-bidi: isolate;
  font-family: var(--tblr-font-monospace, ui-monospace, Menlo, Consolas, monospace); font-size: 1.375rem; letter-spacing: .08em;
  border: 2px dashed var(--tblr-border-color); border-radius: 12px; background: var(--tblr-bg-surface); user-select: all;
}
.pol-print { display: none; }
@media print {
  body.pol-printing > :not(.pol-print) { display: none !important; }
  body.pol-printing { background: #fff !important; }
  body.pol-printing::before { display: none !important; }
  body.pol-printing .pol-print { display: block; padding: 2rem; color: #000; }
  body.pol-printing .pol-print .pol-recovery-code { border-color: #000; color: #000; font-size: 1.75rem; }
}