/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"DM_Sans","arguments":[{"variable":"--font-dm-sans","subsets":["latin"],"display":"swap","preload":false}],"variableName":"dmSans"} ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(/_next/static/media/7ab938503e4547a1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(/_next/static/media/13971731025ec697-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'DM Sans Fallback';src: local("Arial");ascent-override: 94.90%;descent-override: 29.66%;line-gap-override: 0.00%;size-adjust: 104.53%
}.__className_440c40 {font-family: 'DM Sans', 'DM Sans Fallback';font-style: normal
}.__variable_440c40 {--font-dm-sans: 'DM Sans', 'DM Sans Fallback'
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"DM_Mono","arguments":[{"variable":"--font-dm-mono","subsets":["latin"],"weight":["400","500"],"display":"swap","preload":false}],"variableName":"dmMono"} ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/64418ffc17e50301-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/0e96d314a90a6138-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ba43ea3467e29870-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b7ea2ab4a8ad1f81-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'DM Mono Fallback';src: local("Arial");ascent-override: 73.71%;descent-override: 23.03%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_668cc2 {font-family: 'DM Mono', 'DM Mono Fallback';font-style: normal
}.__variable_668cc2 {--font-dm-mono: 'DM Mono', 'DM Mono Fallback'
}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --spacing: 0.25rem;
    --container-md: 28rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --radius-md: 0.375rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-dm-sans);
    --default-mono-font-family: var(--font-dm-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .\!container {
    width: 100% !important;
    @media (width >= 40rem) {
      max-width: 40rem !important;
    }
    @media (width >= 48rem) {
      max-width: 48rem !important;
    }
    @media (width >= 64rem) {
      max-width: 64rem !important;
    }
    @media (width >= 80rem) {
      max-width: 80rem !important;
    }
    @media (width >= 96rem) {
      max-width: 96rem !important;
    }
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-full {
    width: 100%;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .flex-col {
    flex-direction: column;
  }
  .justify-center {
    justify-content: center;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .text-center {
    text-align: center;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .break-all {
    word-break: break-all;
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .underline {
    text-decoration-line: underline;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-offset-2 {
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
}
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/MaterialIcons-Regular.woff2") format("woff2");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
:root {
  --app-bg: #f8fafc;
  --app-surface: #ffffff;
  --app-surface-2: #f1f5f9;
  --app-text: #0f172a;
  --app-text-muted: #475569;
  --app-border: #cbd5e1;
  --app-border-strong: #94a3b8;
  --app-input-border: #e2e8f0;
  --app-input-bg-tint: #f8fafc;
  --app-focus-border: #93c5fd;
  --app-divider: #f1f5f9;
  --app-header-text: #f8fafc;
  --app-icon-muted: #94a3b8;
  --app-border-subtle: rgba(15, 23, 42, 0.08);
  --json-base: #0f172a;
  --json-key: #0f766e;
  --json-string: #1d4ed8;
  --json-number: #7c3aed;
  --json-boolean: #9a3412;
  --json-null: #6b7280;
  --app-input-bg: #ffffff;
  --app-input-text: #0f172a;
  --app-input-placeholder: #64748b;
  --app-menu-bg: #ffffff;
  --app-header-bg: #0F172A;
  --app-focus-ring: rgba(37, 99, 235, 0.15);
  --app-highlight-bg: #fef3c7;
  --app-highlight-text: #0f172a;
  --app-terminal-badge-bg: rgba(37, 99, 235, 0.1);
  --app-terminal-badge-border: rgba(37, 99, 235, 0.3);
  --app-terminal-badge-text: #1e40af;
  --app-terminal-hue-sat: 70%;
  --app-terminal-badge-bg-l: 90%;
  --app-terminal-badge-border-l: 60%;
  --app-terminal-badge-text-s: 80%;
  --app-terminal-badge-text-l: 30%;
  --app-terminal-accent-l: 42%;
  --app-terminal-active-bg-s: 55%;
  --app-terminal-active-bg-l: 52%;
  --app-terminal-active-bg-a: 0.08;
  --app-terminal-active-border-s: 45%;
  --app-terminal-active-border-l: 42%;
  --app-terminal-active-border-a: 0.28;
  --app-scrollbar-track: #f1f5f9;
  --app-scrollbar-thumb: rgba(15, 23, 42, 0.2);
  --app-scrollbar-thumb-hover: rgba(15, 23, 42, 0.3);
  --app-table-row-hover: rgba(15, 23, 42, 0.04);
  --app-row-hover-solid: #f4f4f5;
  --app-modal-bg: var(--app-surface);
  --app-filter-label-font-size: 0.75rem;
  --app-status-error: #dc2626;
  --app-status-success: #16a34a;
  --app-status-warning: #ea580c;
  --app-status-info: #2563eb;
  --app-heatmap-text: var(--app-text);
  --app-heatmap-0-bg: #f1f5f9;
  --app-heatmap-1-bg: #dbeafe;
  --app-heatmap-2-bg: #93c5fd;
  --app-heatmap-3-bg: #60a5fa;
  --app-heatmap-4-bg: #2563eb;
  --app-date-selected-bg: rgba(37, 99, 235, 0.12);
  --app-date-selected-text: rgb(37, 99, 235);
  --app-date-today-bg: rgba(16, 185, 129, 0.12);
  --app-date-today-text: rgb(16, 185, 129);
  --app-lightbox-overlay: rgba(0, 0, 0, 0.9);
  --app-lightbox-chrome-bg: rgba(15, 23, 42, 0.35);
  --app-lightbox-chrome-border: rgba(148, 163, 184, 0.35);
  --app-lightbox-button-bg: rgba(255, 255, 255, 0.1);
  --app-lightbox-button-hover: rgba(255, 255, 255, 0.2);
  --app-lightbox-button-text: #e5e7eb;
  --app-lightbox-button-text-hover: #ffffff;
  --app-lightbox-button-active-bg: rgba(15, 106, 191, 0.8);
  --app-lightbox-toolbar-bg: rgba(255, 255, 255, 0.05);
  --app-lightbox-toolbar-divider: rgba(148, 163, 184, 0.3);
  --app-lightbox-edit-bg: rgba(15, 23, 42, 0.96);
  --app-lightbox-edit-border: rgba(148, 163, 184, 0.4);
  --app-lightbox-edit-text: #e5e7eb;
  --app-lightbox-slider-bg: rgba(148, 163, 184, 0.3);
  --app-lightbox-slider-thumb: #0f6abf;
  --app-lightbox-auto-button-bg: rgba(251, 191, 36, 0.15);
  --app-lightbox-auto-button-border: rgba(251, 191, 36, 0.9);
  --app-lightbox-auto-button-text: #fbbf24;
  --app-lightbox-auto-button-hover-bg: rgba(251, 191, 36, 0.25);
  --app-lightbox-restore-button-bg: #f1f5f9;
  --app-lightbox-restore-button-border: #cbd5e1;
  --app-lightbox-restore-button-text: #475569;
  --app-lightbox-restore-button-hover-bg: #e2e8f0;
  --app-lightbox-restore-button-hover-border: #94a3b8;
  --app-lightbox-error-bg: rgba(239, 68, 68, 0.18);
  --app-lightbox-error-border: rgba(239, 68, 68, 0.35);
  --app-lightbox-error-text: #fecaca;
  --app-lightbox-close-button-hover-bg: rgba(239, 68, 68, 0.2);
  --app-lightbox-close-button-hover-text: #ef4444;
  --app-lightbox-play-button-bg: rgba(107, 114, 128, 0.3);
  --app-lightbox-play-button-border: rgba(156, 163, 175, 0.4);
  --app-lightbox-play-button-hover-bg: rgba(107, 114, 128, 0.45);
  --app-lightbox-play-button-hover-border: rgba(156, 163, 175, 0.6);
  --app-lightbox-counter-text: #e5e7eb;
  --app-lightbox-slider-icon: #9ca3af;
  --app-lightbox-slider-label: #e5e7eb;
  --app-lightbox-picture-wrapper-bg: #1e293b;
  --app-lightbox-picture-shadow: rgba(15, 23, 42, 0.7);
  --app-lightbox-slider-thumb-shadow: rgba(0, 0, 0, 0.3);
  --app-lightbox-chrome-new-bg: #0f172a;
  --app-lightbox-chrome-new-border: #1e293b;
  --app-lightbox-breadcrumb-sep: rgba(255, 255, 255, 0.15);
  --app-lightbox-breadcrumb-text: #e2e8f0;
  --app-lightbox-header-btn-border: rgba(255, 255, 255, 0.1);
  --app-lightbox-header-btn-bg: rgba(255, 255, 255, 0.06);
  --app-lightbox-header-btn-text: #94a3b8;
  --app-lightbox-header-btn-hover-bg: rgba(255, 255, 255, 0.1);
  --app-lightbox-chevron-column-bg: #1e293b;
  --app-lightbox-chevron-btn-border: rgba(255, 255, 255, 0.1);
  --app-lightbox-chevron-btn-bg: rgba(0, 0, 0, 0.45);
  --app-lightbox-chevron-btn-text: #ffffff;
  --app-lightbox-chevron-btn-hover-bg: rgba(37, 99, 235, 0.35);
  --app-lightbox-watermark-bg: rgba(0, 0, 0, 0.45);
  --app-lightbox-watermark-border: rgba(255, 255, 255, 0.08);
  --app-lightbox-watermark-label: #ffffff;
  --app-lightbox-watermark-datetime: rgba(255, 255, 255, 0.4);
  --app-lightbox-filmstrip-bg: #ffffff;
  --app-lightbox-filmstrip-border: #e2e8f0;
  --app-lightbox-filmstrip-toggle-bg: #ffffff;
  --app-lightbox-filmstrip-toggle-border: #e2e8f0;
  --app-lightbox-filmstrip-toggle-text: #94a3b8;
  --app-lightbox-filmstrip-toggle-hover-text: #64748b;
  --app-lightbox-filmstrip-toggle-hover-border: #cbd5e1;
  --app-lightbox-thumbnail-active-border: #2563eb;
  --app-lightbox-thumbnail-active-focus: rgba(37, 99, 235, 0.3);
  --app-lightbox-thumbnail-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 55%);
  --app-lightbox-thumbnail-index-text: rgba(255, 255, 255, 0.7);
  --app-lightbox-bottom-bar-bg: #ffffff;
  --app-lightbox-bottom-bar-border: #e2e8f0;
  --app-lightbox-bottom-slider-icon: #94a3b8;
  --app-lightbox-bottom-slider-label: #64748b;
  --app-lightbox-bottom-auto-btn-border: #e2e8f0;
  --app-lightbox-bottom-auto-btn-text: #64748b;
  --app-lightbox-bottom-bar-divider: #e2e8f0;
  --app-lightbox-bottom-zoom-text: #94a3b8;
  --app-lightbox-details-panel-bg: #ffffff;
  --app-lightbox-details-panel-border: #e2e8f0;
  --app-lightbox-details-header-border: #f1f5f9;
  --app-lightbox-details-header-bg: #fafbfc;
  --app-lightbox-details-header-title: #94a3b8;
  --app-lightbox-details-header-label: #0f172a;
  --app-lightbox-details-header-datetime: #94a3b8;
  --app-lightbox-details-close-btn: #cbd5e1;
  --app-lightbox-details-close-btn-hover: #64748b;
  --app-lightbox-details-action-btn-border: #e2e8f0;
  --app-lightbox-details-action-btn-bg: #f8fafc;
  --app-lightbox-details-action-btn-text: #374151;
  --app-lightbox-details-action-btn-hover-bg: #f1f5f9;
  --app-lightbox-details-action-btn-hover-border: #cbd5e1;
  --app-lightbox-details-action-btn-active-bg: #2563eb;
  --app-lightbox-details-action-btn-active-border: #2563eb;
  --app-lightbox-details-action-btn-active-text: #ffffff;
  --app-lightbox-details-action-btn-active-hover-bg: #1d4ed8;
  --app-lightbox-details-active-chip-post-bg: #dbeafe;
  --app-lightbox-details-active-chip-post-text: #1e40af;
  --app-lightbox-details-active-chip-post-border: #93c5fd;
  --app-lightbox-details-active-chip-hide-bg: #fee2e2;
  --app-lightbox-details-active-chip-hide-text: #991b1b;
  --app-lightbox-details-active-chip-hide-border: #fca5a5;
  --app-lightbox-details-note-chip-bg: #f0fdf4;
  --app-lightbox-details-note-chip-text: #166534;
  --app-lightbox-details-note-chip-border: #bbf7d0;
  --app-lightbox-details-note-chip-remove: #16a34a;
  --app-lightbox-details-add-note-btn-bg: #f8fafc;
  --app-lightbox-details-add-note-btn-border: #cbd5e1;
  --app-lightbox-details-add-note-btn-text: #94a3b8;
  --app-lightbox-details-add-note-btn-hover-border: #94a3b8;
  --app-lightbox-details-note-dropdown-bg: #ffffff;
  --app-lightbox-details-note-dropdown-border: #e2e8f0;
  --app-lightbox-details-note-dropdown-shadow: rgba(0, 0, 0, 0.12);
  --app-lightbox-details-note-dropdown-empty: #94a3b8;
  --app-lightbox-details-note-dropdown-item: #1e293b;
  --app-lightbox-details-note-dropdown-item-hover: #f8fafc;
  --app-lightbox-details-comment-count: #cbd5e1;
  --app-lightbox-details-comment-readonly-bg: #f8fafc;
  --app-lightbox-details-comment-readonly-border: #f1f5f9;
  --app-lightbox-details-comment-readonly-text: #64748b;
  --app-lightbox-details-camera-info-bg: #f8fafc;
  --app-lightbox-details-camera-info-border: #f1f5f9;
  --app-lightbox-details-camera-info-text: #94a3b8;
  --app-lightbox-details-footer-border: #f1f5f9;
  --app-lightbox-details-save-btn-bg: #2563eb;
  --app-lightbox-details-save-btn-text: #ffffff;
  --app-lightbox-details-save-btn-hover-bg: #1d4ed8;
  --app-lightbox-details-reset-btn-border: #e2e8f0;
  --app-lightbox-details-reset-btn-text: #64748b;
  --app-lightbox-video-controls-bg: rgba(0, 0, 0, 0.35);
  --app-lightbox-video-controls-inner-bg: rgba(15, 23, 42, 0.85);
  --app-lightbox-video-controls-inner-border: rgba(255, 255, 255, 0.1);
  --app-lightbox-video-time-text: #e2e8f0;
  --app-lightbox-accent: #2563eb;
  --app-badge-active-bg: #22c55e20;
  --app-badge-active-text: #22c55e;
  --app-badge-expired-bg: #f9731620;
  --app-badge-expired-text: #f97316;
  --app-badge-revoked-bg: #ef444420;
  --app-badge-revoked-text: #ef4444;
  --app-badge-default-bg: #6b728020;
  --app-badge-default-text: #6b7280;
  --app-badge-page-bg: #3b82f620;
  --app-badge-page-text: #3b82f6;
  --app-badge-fullscreen-bg: #8b5cf620;
  --app-badge-fullscreen-text: #8b5cf6;
  --app-badge-thumbnail-bg: #6b728020;
  --app-badge-thumbnail-text: #6b7280;
  --app-badge-download-bg: #22c55e20;
  --app-badge-download-text: #22c55e;
  --app-case-tag-chip-bg: #eef2ff;
  --app-case-tag-chip-text: #3730a3;
  --app-case-tag-chip-border: #c7d2fe;
  --app-case-tag-chip-remove: #6366f1;
  --app-case-manual-chip-bg: #ede9fe;
  --app-case-manual-chip-text: #5b21b6;
  --app-case-manual-chip-border: #c4b5fd;
  --app-case-manual-chip-hover-bg: #ddd6fe;
  --app-case-plate-chip-bg: #ecfeff;
  --app-case-plate-chip-text: #0e7490;
  --app-case-plate-chip-border: #67e8f9;
  --app-case-plate-chip-icon: #0891b2;
  --app-button-primary-bg: #2563eb;
  --app-button-primary-text: #ffffff;
  --app-button-primary-hover: #1d4ed8;
  --app-button-primary-focus: #3b82f6;
  --app-button-secondary-bg: #ffffff;
  --app-button-secondary-text: #374151;
  --app-button-secondary-border: #d1d5db;
  --app-button-secondary-hover: #f9fafb;
  --app-button-secondary-hover-border: #9ca3af;
  --app-button-secondary-focus: #6b7280;
  --app-button-danger-bg: #dc2626;
  --app-button-danger-text: #ffffff;
  --app-button-danger-hover: #b91c1c;
  --app-button-danger-focus: #ef4444;
  --app-bg-secondary: #f1f5f9;
  --app-text-secondary: #475569;
  --app-link: #2563eb;
  --app-callout-warning-bg: #fef3c7;
  --app-callout-warning-border: #fbbf24;
  --app-callout-warning-tint: #FFFBEB;
  --app-callout-warning-text: #92400E;
  --app-callout-info-bg: #dbeafe;
  --app-callout-info-border: #93c5fd;
  --app-status-success-tint: #ECFDF5;
  --app-status-info-tint: #EFF6FF;
  --app-code-bg: #0b1220;
  --app-code-text: #e5e7eb;
  --app-tooltip-shadow: rgba(0, 0, 0, 0.35);
  --app-modal-shadow: rgba(2, 6, 23, 0.25);
  --background: var(--app-bg);
  --foreground: var(--app-text);
  --auth-marketing-navy: #0b1f3a;
  --auth-marketing-blue: #1a5cff;
  --auth-marketing-blue-hover: #0d4dee;
  --auth-marketing-surface-page: #edf1f7;
  --auth-marketing-grey-bg: #e3eaf3;
  --auth-marketing-border: #b6c3d7;
  --auth-marketing-grey-text: #52657b;
  --auth-marketing-grey-text-strong: #3a4e65;
  --auth-marketing-teal-text: #006f66;
  --auth-marketing-teal-surface: color-mix(in srgb, #00c4b4 6%, #ffffff);
  --auth-marketing-danger: #d62240;
  --auth-marketing-danger-bg: #fff4f4;
  --auth-marketing-danger-border: #fddede;
  --auth-marketing-white: #ffffff;
  color-scheme: light;
}
:root {
  --app-terminal-hue-sat: 70%;
  --app-terminal-badge-bg-l: 90%;
  --app-terminal-badge-border-l: 60%;
  --app-terminal-badge-text-s: 80%;
  --app-terminal-badge-text-l: 30%;
  --app-terminal-accent-l: 42%;
  --app-terminal-active-bg-s: 55%;
  --app-terminal-active-bg-l: 52%;
  --app-terminal-active-bg-a: 0.08;
  --app-terminal-active-border-s: 45%;
  --app-terminal-active-border-l: 42%;
  --app-terminal-active-border-a: 0.28;
  --app-scrollbar-track: #f1f5f9;
  --app-scrollbar-thumb: rgba(15, 23, 42, 0.2);
  --app-scrollbar-thumb-hover: rgba(15, 23, 42, 0.3);
  --app-table-row-hover: rgba(15, 23, 42, 0.04);
  --app-modal-bg: var(--app-surface);
  --app-status-error: #dc2626;
  --app-status-success: #16a34a;
  --app-status-warning: #ea580c;
  --app-status-info: #2563eb;
  --app-heatmap-text: var(--app-text);
  --app-heatmap-0-bg: #f1f5f9;
  --app-heatmap-1-bg: #dbeafe;
  --app-heatmap-2-bg: #93c5fd;
  --app-heatmap-3-bg: #60a5fa;
  --app-heatmap-4-bg: #2563eb;
  --app-date-selected-bg: rgba(37, 99, 235, 0.12);
  --app-date-selected-text: rgb(37, 99, 235);
  --app-date-today-bg: rgba(16, 185, 129, 0.12);
  --app-date-today-text: rgb(16, 185, 129);
  --app-lightbox-overlay: rgba(0, 0, 0, 0.9);
  --app-lightbox-chrome-bg: rgba(15, 23, 42, 0.35);
  --app-lightbox-chrome-border: rgba(148, 163, 184, 0.35);
  --app-lightbox-button-bg: rgba(255, 255, 255, 0.1);
  --app-lightbox-button-hover: rgba(255, 255, 255, 0.2);
  --app-lightbox-button-text: #e5e7eb;
  --app-lightbox-button-text-hover: #ffffff;
  --app-lightbox-button-active-bg: rgba(15, 106, 191, 0.8);
  --app-lightbox-toolbar-bg: rgba(255, 255, 255, 0.05);
  --app-lightbox-toolbar-divider: rgba(148, 163, 184, 0.3);
  --app-lightbox-edit-bg: rgba(15, 23, 42, 0.96);
  --app-lightbox-edit-border: rgba(148, 163, 184, 0.4);
  --app-lightbox-edit-text: #e5e7eb;
  --app-lightbox-slider-bg: rgba(148, 163, 184, 0.3);
  --app-lightbox-slider-thumb: #0f6abf;
  --app-lightbox-auto-button-bg: rgba(251, 191, 36, 0.15);
  --app-lightbox-auto-button-border: rgba(251, 191, 36, 0.9);
  --app-lightbox-auto-button-text: #fbbf24;
  --app-lightbox-auto-button-hover-bg: rgba(251, 191, 36, 0.25);
  --app-lightbox-restore-button-bg: #f1f5f9;
  --app-lightbox-restore-button-border: #cbd5e1;
  --app-lightbox-restore-button-text: #475569;
  --app-lightbox-restore-button-hover-bg: #e2e8f0;
  --app-lightbox-restore-button-hover-border: #94a3b8;
  --app-lightbox-error-bg: rgba(239, 68, 68, 0.18);
  --app-lightbox-error-border: rgba(239, 68, 68, 0.35);
  --app-lightbox-error-text: #fecaca;
  --app-lightbox-close-button-hover-bg: rgba(239, 68, 68, 0.2);
  --app-lightbox-close-button-hover-text: #ef4444;
  --app-lightbox-play-button-bg: rgba(107, 114, 128, 0.3);
  --app-lightbox-play-button-border: rgba(156, 163, 175, 0.4);
  --app-lightbox-play-button-hover-bg: rgba(107, 114, 128, 0.45);
  --app-lightbox-play-button-hover-border: rgba(156, 163, 175, 0.6);
  --app-lightbox-counter-text: #e5e7eb;
  --app-lightbox-slider-icon: #9ca3af;
  --app-lightbox-slider-label: #e5e7eb;
  --app-lightbox-picture-wrapper-bg: #1e293b;
  --app-lightbox-picture-shadow: rgba(15, 23, 42, 0.7);
  --app-lightbox-slider-thumb-shadow: rgba(0, 0, 0, 0.3);
  --app-lightbox-chrome-new-bg: #0f172a;
  --app-lightbox-chrome-new-border: #1e293b;
  --app-lightbox-breadcrumb-sep: rgba(255, 255, 255, 0.15);
  --app-lightbox-breadcrumb-text: #e2e8f0;
  --app-lightbox-header-btn-border: rgba(255, 255, 255, 0.1);
  --app-lightbox-header-btn-bg: rgba(255, 255, 255, 0.06);
  --app-lightbox-header-btn-text: #94a3b8;
  --app-lightbox-header-btn-hover-bg: rgba(255, 255, 255, 0.1);
  --app-lightbox-chevron-column-bg: #1e293b;
  --app-lightbox-chevron-btn-border: rgba(255, 255, 255, 0.1);
  --app-lightbox-chevron-btn-bg: rgba(0, 0, 0, 0.45);
  --app-lightbox-chevron-btn-text: #ffffff;
  --app-lightbox-chevron-btn-hover-bg: rgba(37, 99, 235, 0.35);
  --app-lightbox-watermark-bg: rgba(0, 0, 0, 0.45);
  --app-lightbox-watermark-border: rgba(255, 255, 255, 0.08);
  --app-lightbox-watermark-label: #ffffff;
  --app-lightbox-watermark-datetime: rgba(255, 255, 255, 0.4);
  --app-lightbox-filmstrip-bg: #ffffff;
  --app-lightbox-filmstrip-border: #e2e8f0;
  --app-lightbox-filmstrip-toggle-bg: #ffffff;
  --app-lightbox-filmstrip-toggle-border: #e2e8f0;
  --app-lightbox-filmstrip-toggle-text: #94a3b8;
  --app-lightbox-filmstrip-toggle-hover-text: #64748b;
  --app-lightbox-filmstrip-toggle-hover-border: #cbd5e1;
  --app-lightbox-thumbnail-active-border: #2563eb;
  --app-lightbox-thumbnail-active-focus: rgba(37, 99, 235, 0.3);
  --app-lightbox-thumbnail-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 55%);
  --app-lightbox-thumbnail-index-text: rgba(255, 255, 255, 0.7);
  --app-lightbox-bottom-bar-bg: #ffffff;
  --app-lightbox-bottom-bar-border: #e2e8f0;
  --app-lightbox-bottom-slider-icon: #94a3b8;
  --app-lightbox-bottom-slider-label: #64748b;
  --app-lightbox-bottom-auto-btn-border: #e2e8f0;
  --app-lightbox-bottom-auto-btn-text: #64748b;
  --app-lightbox-bottom-bar-divider: #e2e8f0;
  --app-lightbox-bottom-zoom-text: #94a3b8;
  --app-lightbox-details-panel-bg: #ffffff;
  --app-lightbox-details-panel-border: #e2e8f0;
  --app-lightbox-details-header-border: #f1f5f9;
  --app-lightbox-details-header-bg: #fafbfc;
  --app-lightbox-details-header-title: #94a3b8;
  --app-lightbox-details-header-label: #0f172a;
  --app-lightbox-details-header-datetime: #94a3b8;
  --app-lightbox-details-close-btn: #cbd5e1;
  --app-lightbox-details-close-btn-hover: #64748b;
  --app-lightbox-details-action-btn-border: #e2e8f0;
  --app-lightbox-details-action-btn-bg: #f8fafc;
  --app-lightbox-details-action-btn-text: #374151;
  --app-lightbox-details-action-btn-hover-bg: #f1f5f9;
  --app-lightbox-details-action-btn-hover-border: #cbd5e1;
  --app-lightbox-details-action-btn-active-bg: #2563eb;
  --app-lightbox-details-action-btn-active-border: #2563eb;
  --app-lightbox-details-action-btn-active-text: #ffffff;
  --app-lightbox-details-action-btn-active-hover-bg: #1d4ed8;
  --app-lightbox-details-active-chip-post-bg: #dbeafe;
  --app-lightbox-details-active-chip-post-text: #1e40af;
  --app-lightbox-details-active-chip-post-border: #93c5fd;
  --app-lightbox-details-active-chip-hide-bg: #fee2e2;
  --app-lightbox-details-active-chip-hide-text: #991b1b;
  --app-lightbox-details-active-chip-hide-border: #fca5a5;
  --app-lightbox-details-note-chip-bg: #f0fdf4;
  --app-lightbox-details-note-chip-text: #166534;
  --app-lightbox-details-note-chip-border: #bbf7d0;
  --app-lightbox-details-note-chip-remove: #16a34a;
  --app-lightbox-details-add-note-btn-bg: #f8fafc;
  --app-lightbox-details-add-note-btn-border: #cbd5e1;
  --app-lightbox-details-add-note-btn-text: #94a3b8;
  --app-lightbox-details-add-note-btn-hover-border: #94a3b8;
  --app-lightbox-details-note-dropdown-bg: #ffffff;
  --app-lightbox-details-note-dropdown-border: #e2e8f0;
  --app-lightbox-details-note-dropdown-shadow: rgba(0, 0, 0, 0.12);
  --app-lightbox-details-note-dropdown-empty: #94a3b8;
  --app-lightbox-details-note-dropdown-item: #1e293b;
  --app-lightbox-details-note-dropdown-item-hover: #f8fafc;
  --app-lightbox-details-comment-count: #cbd5e1;
  --app-lightbox-details-comment-readonly-bg: #f8fafc;
  --app-lightbox-details-comment-readonly-border: #f1f5f9;
  --app-lightbox-details-comment-readonly-text: #64748b;
  --app-lightbox-details-camera-info-bg: #f8fafc;
  --app-lightbox-details-camera-info-border: #f1f5f9;
  --app-lightbox-details-camera-info-text: #94a3b8;
  --app-lightbox-details-footer-border: #f1f5f9;
  --app-lightbox-details-save-btn-bg: #2563eb;
  --app-lightbox-details-save-btn-text: #ffffff;
  --app-lightbox-details-save-btn-hover-bg: #1d4ed8;
  --app-lightbox-details-reset-btn-border: #e2e8f0;
  --app-lightbox-details-reset-btn-text: #64748b;
  --app-lightbox-video-controls-bg: rgba(0, 0, 0, 0.35);
  --app-lightbox-video-controls-inner-bg: rgba(15, 23, 42, 0.85);
  --app-lightbox-video-controls-inner-border: rgba(255, 255, 255, 0.1);
  --app-lightbox-video-time-text: #e2e8f0;
  --app-lightbox-accent: #2563eb;
  --app-badge-active-bg: #22c55e20;
  --app-badge-active-text: #22c55e;
  --app-badge-expired-bg: #f9731620;
  --app-badge-expired-text: #f97316;
  --app-badge-revoked-bg: #ef444420;
  --app-badge-revoked-text: #ef4444;
  --app-badge-default-bg: #6b728020;
  --app-badge-default-text: #6b7280;
  --app-badge-page-bg: #3b82f620;
  --app-badge-page-text: #3b82f6;
  --app-badge-fullscreen-bg: #8b5cf620;
  --app-badge-fullscreen-text: #8b5cf6;
  --app-badge-thumbnail-bg: #6b728020;
  --app-badge-thumbnail-text: #6b7280;
  --app-badge-download-bg: #22c55e20;
  --app-badge-download-text: #22c55e;
  --app-case-tag-chip-bg: #eef2ff;
  --app-case-tag-chip-text: #3730a3;
  --app-case-tag-chip-border: #c7d2fe;
  --app-case-tag-chip-remove: #6366f1;
  --app-case-manual-chip-bg: #ede9fe;
  --app-case-manual-chip-text: #5b21b6;
  --app-case-manual-chip-border: #c4b5fd;
  --app-case-manual-chip-hover-bg: #ddd6fe;
  --app-case-plate-chip-bg: #ecfeff;
  --app-case-plate-chip-text: #0e7490;
  --app-case-plate-chip-border: #67e8f9;
  --app-case-plate-chip-icon: #0891b2;
  --app-button-primary-bg: #2563eb;
  --app-button-primary-text: #ffffff;
  --app-button-primary-hover: #1d4ed8;
  --app-button-primary-focus: #3b82f6;
  --app-button-secondary-bg: #ffffff;
  --app-button-secondary-text: #374151;
  --app-button-secondary-border: #d1d5db;
  --app-button-secondary-hover: #f9fafb;
  --app-button-secondary-hover-border: #9ca3af;
  --app-button-secondary-focus: #6b7280;
  --app-button-danger-bg: #dc2626;
  --app-button-danger-text: #ffffff;
  --app-button-danger-hover: #b91c1c;
  --app-button-danger-focus: #ef4444;
  --app-bg-secondary: #f1f5f9;
  --app-text-secondary: #475569;
  --app-link: #2563eb;
  --app-callout-warning-bg: #fef3c7;
  --app-callout-warning-border: #fbbf24;
  --app-callout-warning-tint: #FFFBEB;
  --app-callout-warning-text: #92400E;
  --app-callout-info-bg: #dbeafe;
  --app-callout-info-border: #93c5fd;
  --app-status-success-tint: #ECFDF5;
  --app-status-info-tint: #EFF6FF;
  --app-code-bg: #0b1220;
  --app-code-text: #e5e7eb;
  --app-tooltip-shadow: rgba(0, 0, 0, 0.35);
  --app-modal-shadow: rgba(2, 6, 23, 0.25);
  --background: var(--app-bg);
  --foreground: var(--app-text);
}
body {
  color-scheme: light;
  background: var(--app-bg, var(--background, #f8fafc));
  color: var(--app-text, var(--foreground, #0f172a));
  font-family: var(--font-dm-sans), "DM Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  height: 100%;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--app-scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background-color: var(--app-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--app-scrollbar-track);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--app-scrollbar-thumb-hover);
}
@keyframes sent-pop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  70% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
    }
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/app.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
/* Copied from testing/frontend-mockup/v1/styles.css to migrate the v1 mockup UI into Next.js. */

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  scrollbar-width: none !important; /* Firefox - hide scrollbar */
  -ms-overflow-style: none !important; /* IE and Edge - hide scrollbar */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  display: none !important; /* Chrome, Safari, Opera - hide scrollbar */
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Body styles are handled in globals.css to avoid conflicts */
/* Removed duplicate body rule that was overriding globals.css */

/* Table row hover (tenant admin + other tables inside cards). Theme-aware via globals.css tokens. */
.content-card table tbody td {
  transition: background-color 0.12s ease;
}

.content-card table tbody tr:hover > td,
.content-card table tbody tr:focus-within > td {
  background-color: var(--app-table-row-hover);
}

/* =========================================================================
   DATA TABLE — reusable table styling for list/table pages.
   Works for both <table> and CSS-grid virtualized layouts.
   Usage:
     <table class="data-table"> or <div class="data-table-grid">
   ========================================================================= */

/* --- Standard <table> mode --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--app-text);
}

.data-table th {
  padding: 8px 10px;
  border-bottom: 2px solid var(--app-border-strong);
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--app-surface-2);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--app-text-muted);
  white-space: nowrap;
  user-select: none;
}

.data-table th.sortable {
  cursor: pointer;
}

.data-table th.sortable:hover {
  color: var(--app-text);
}

.data-table .data-table-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.data-table .data-table-sort-arrow {
  font-size: 0.85em;
  color: var(--app-text-muted);
}

.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--app-border);
  vertical-align: middle;
}

.data-table .data-table-cell-ellipsis {
  display: inline-block;
  max-width: min(240px, 32vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.data-table td.data-table-cell-actions {
  text-align: right;
}

/* Checkbox column — narrow, centred, no text select */
.data-table th.data-table-cell-checkbox,
.data-table td.data-table-cell-checkbox {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding: 0 6px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
}

.ps-row-checkbox {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--app-primary, #2563eb);
  vertical-align: middle;
  pointer-events: none; /* td handles click */
}

/* Selected row highlight */
.data-table tbody tr.data-table-row--selected > td {
  background-color: color-mix(in srgb, var(--app-primary, #2563eb) 8%, transparent);
}
.data-table tbody tr.data-table-row--selected:hover > td {
  background-color: color-mix(in srgb, var(--app-primary, #2563eb) 14%, transparent);
}

/* Selection count chip in action bar */
.processing-states-selection-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-primary, #2563eb);
  white-space: nowrap;
}
.processing-states-selection-count .material-icons {
  font-size: 16px;
}

/* Bulk delete button — danger tint */
.processing-states-bulk-delete-btn {
  color: var(--app-status-error, #dc2626) !important;
  border-color: var(--app-status-error, #dc2626) !important;
}
.processing-states-bulk-delete-btn:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--app-status-error, #dc2626) 10%, transparent) !important;
}

.data-table td.data-table-empty-cell {
  padding: 12px 8px;
}

.data-table td.data-table-cell-actions > div {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.data-table tbody tr:hover > td {
  background-color: var(--app-table-row-hover);
}

.data-table tbody tr[data-clickable]:hover {
  cursor: pointer;
}

/* --- CSS-grid virtualized mode --- */
.data-table-grid-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--app-surface-2);
  border-bottom: 2px solid var(--app-border-strong);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--app-text-muted);
  user-select: none;
}

.data-table-grid-header > div {
  padding: 8px 10px;
  white-space: nowrap;
}

.data-table-grid-header > div[data-sortable] {
  cursor: pointer;
}

.data-table-grid-header > div[data-sortable]:hover {
  color: var(--app-text);
}

.data-table-grid-row {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--app-text);
  border-bottom: 1px solid var(--app-border);
}

.data-table-grid-row:hover {
  background-color: var(--app-table-row-hover);
}

.data-table-grid-row > div {
  padding: 8px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Table wrapper — border, radius, scrollable container */
.data-table-wrapper {
  border: 1px solid var(--app-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.data-table-scroll {
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
  flex: 1;
  /* Reserve space for scrollbar so layout doesn't jump when scrollbar appears/disappears (e.g. filter or terminal change). */
  scrollbar-gutter: stable;
}

/* Table checkbox — span-based, matches case-card-checkbox design tokens */
.data-table-checkbox {
  width: 15px;
  height: 15px;
  border-radius: 3.5px;
  flex-shrink: 0;
  border: 1.5px solid var(--app-border);
  background: var(--app-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.1s ease;
}
.data-table-checkbox:hover {
  border-color: var(--app-border-strong);
}
.data-table-checkbox--checked {
  background: var(--app-button-primary-bg);
  border-color: var(--app-button-primary-bg);
}
.data-table-checkbox--checked:hover {
  background: var(--app-button-primary-hover);
  border-color: var(--app-button-primary-hover);
}
.data-table-checkbox svg {
  width: 9px;
  height: 9px;
}

/* Status bar below the table */
.data-table-status {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  min-height: 22px;
}

/* Legacy alias (used in older admin/tenant tables) */
/* Feature usage heatmap: sticky row-label column when scrolling horizontally */
.feature-usage-heatmap-table thead th:first-child {
  left: 0;
  z-index: 4;
  box-shadow: 1px 0 0 var(--app-border);
  background: var(--app-surface-2);
}
.feature-usage-heatmap-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--app-surface);
  box-shadow: 1px 0 0 var(--app-border);
}

.table-standard { width: 100%; border-collapse: collapse; }
.table-standard th { padding: 10px 8px; border-bottom: 1px solid var(--app-border-strong); text-align: left; position: sticky; top: 0; z-index: 2; background: var(--app-surface); }
.table-standard th.sortable { cursor: pointer; user-select: none; }
.table-standard td { padding: 10px 8px; border-bottom: 1px solid var(--app-border); }

/* Next.js dev overlay portal tweak (dev-only element). */
nextjs-portal.light {
  left: unset !important;
  top: unset !important;
}

/* Prevent Next.js dev overlay from intercepting clicks (Playwright + dev flake fix). */
nextjs-portal,
nextjs-portal * {
  pointer-events: none !important;
}

.app-header {
  display: flex;
  align-items: center;
  padding: 0 18px;
  height: 48px;
  background: var(--app-header-bg);
  color: var(--app-header-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.app-header-title {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.app-header-logo-button {
  all: unset;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border-radius: 6px;
  transition: opacity 0.15s ease;
}

.app-header-logo-button:hover {
  opacity: 0.85;
}

.app-header-logo-button:focus-visible {
  outline: 2px solid var(--app-focus-border);
  outline-offset: 2px;
}

.app-header-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 244px;
  height: 34px;
  background: #ffffff;
  border-radius: 6px;
  padding: 3px 14px;
  box-sizing: border-box;
}

.app-header-logo-img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.app-header-title h1 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--app-header-text);
}

.app-logo-dot {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--app-button-primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-header-divider {
  width: 1px;
  height: 18px;
  background: #334155;
  margin: 0 10px;
  flex-shrink: 0;
}

.app-header-subtitle {
  flex: 1;
  margin: 0;
  font-size: 12px;
  color: var(--app-icon-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.app-header-subtitle button {
  padding: 4px 11px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: transparent;
  color: var(--app-icon-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.app-header-subtitle button:hover {
  background: rgba(37, 99, 235, 0.15);
  color: var(--app-focus-border);
  border-color: #2D5A8E;
}

.header-nav-tab {
  background: #1E3A5F !important;
  color: var(--app-focus-border) !important;
  border: 1px solid #2D5A8E !important;
  border-radius: 6px !important;
  padding: 4px 11px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.header-nav-tab:hover {
  background: rgba(37, 99, 235, 0.15) !important;
  color: var(--app-focus-border) !important;
}

.header-nav-tab--active {
  background: rgba(37, 99, 235, 0.3) !important;
  color: var(--app-focus-border) !important;
}

.header-spacer {
  flex: 1;
}

/* [CR-20260409-T02] Tenant header: Pictures / latest / send log / tenant admin — grouped for mobile hide */
.app-header-tenant-secondary {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 8px;
}

.app-header-tenant-secondary .header-spacer {
  flex: 1;
}

.user-menu-button {
  width: 28px;
  height: 28px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--app-button-primary-bg) !important;
  border: none !important;
  color: var(--app-button-primary-text) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.user-menu-button:hover {
  background: var(--app-button-primary-hover) !important;
}

.user-menu-button .material-icons {
  font-size: 16px;
  color: var(--app-button-primary-text);
}

.user-menu-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 1500;
  min-width: 240px;
  background: var(--app-menu-bg);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.18);
  padding: 8px;
}

.user-menu-header {
  padding: 8px 10px;
  border-bottom: 1px solid var(--app-border);
  margin-bottom: 6px;
}

.user-menu-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-menu-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f6abf 0%, #0ea5e9 100%);
  color: var(--app-button-primary-text)fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(15, 106, 191, 0.25);
  flex: 0 0 auto;
}

.user-menu-avatar .material-icons {
  font-size: 20px;
}

.user-menu-profile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-menu-name {
  font-weight: 700;
  color: var(--app-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-email {
  font-size: 0.8125rem;
  color: var(--app-text-muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-item {
  width: 100%;
  text-align: left;
  border: none !important;
  background: transparent !important;
  padding: 10px 10px !important;
  border-radius: 10px;
  cursor: pointer;
  color: var(--app-text);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-menu-item:hover {
  background: var(--app-surface-2) !important;
}

.tenant-admin-menu-button {
  padding: 4px 11px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1E3A5F !important;
  border: 1px solid #2D5A8E !important;
  color: var(--app-focus-border) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer;
}

.tenant-admin-menu-button:hover {
  background: rgba(37, 99, 235, 0.3) !important;
}

.tenant-admin-menu-button .material-icons {
  font-size: 14px;
}

.tenant-admin-menu-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 1500;
  min-width: 220px;
  background: var(--app-menu-bg);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.18);
  padding: 8px;
}

.tenant-admin-menu-item {
  width: 100%;
  text-align: left;
  border: none !important;
  background: transparent !important;
  padding: 10px 10px !important;
  border-radius: 10px;
  cursor: pointer;
  color: var(--app-text);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tenant-admin-menu-item:hover {
  background: var(--app-surface-2) !important;
}

.tenant-admin-menu-item[data-active="true"] {
  /* Stronger highlight for keyboard navigation (visible in light/dark/system). */
  background: rgba(37, 99, 235, 0.14) !important;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.45) !important;
}

.tenant-admin-menu-divider {
  height: 1px;
  background: var(--app-border);
  margin: 6px 8px;
  opacity: 0.6;
}

.tenant-admin-menu-section-label {
  padding: 6px 10px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  user-select: none;
}

/* Pictures menu popover — same structure as Tenant Admin menu (no header) */
.tenant-admin-menu-popover.pictures-menu-popover {
  /* Uses base .tenant-admin-menu-popover padding and item styles */
}

/* App frame root — flex column so header + optional banner + app-shell
   fill exactly 100vh regardless of banner presence. */
.app-frame-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Session gate — minimal shell until /me succeeds (CR-20260410-bug-auth-flash-stale-session) */
.app-frame-root.app-session-gate {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--app-text-muted);
  font-size: 15px;
}

/* [BATCH-24-T09] Non-blocking feedback (e.g. useDataExport) */
.app-transient-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  max-width: min(90vw, 28rem);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.35;
  box-shadow: 0 4px 18px var(--app-border-subtle);
  pointer-events: none;
  word-break: break-word;
}

.app-transient-toast--info {
  background: var(--app-surface-2);
  color: var(--app-text);
  border: 1px solid var(--app-border-strong);
}

.app-transient-toast--error {
  background: var(--app-surface);
  color: var(--app-status-error);
  border: 1px solid var(--app-status-error);
}

/* [CR-20260316-T04] Admin message banner — positioned between header and app-shell */
.admin-message-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #FEF3C7;
  border-bottom: 2px solid #F59E0B;
  color: #92400E;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.admin-message-banner .material-icons {
  font-size: 20px;
  color: #D97706;
  flex-shrink: 0;
}

.admin-message-banner-text {
  flex: 1;
  white-space: pre-line;
  word-break: break-word;
}

.app-shell {
  display: flex;
  flex: 1;
  min-height: 0;
}

.main-panel {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.content-card {
  width: 100%;
  background: var(--app-surface);
  color: var(--app-text);
  border-radius: 0.75rem;
  border: 1.5px solid var(--app-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: box-shadow 200ms ease;
}

.content-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  border-color: var(--app-border-strong);
}

/* [CR-20260513-T02] Auth login shells — scoped marketing palette overrides */
.login-page,
.admin-login-page {
  --app-bg: var(--auth-marketing-surface-page);
  --app-surface: var(--auth-marketing-white);
  --app-surface-2: var(--auth-marketing-grey-bg);
  --app-text: var(--auth-marketing-navy);
  --app-text-muted: var(--auth-marketing-grey-text);
  --app-text-secondary: var(--auth-marketing-grey-text);
  --app-border: var(--auth-marketing-border);
  --app-border-strong: var(--auth-marketing-grey-text-strong);
  --app-input-border: var(--auth-marketing-border);
  --app-input-bg: var(--auth-marketing-white);
  --app-input-bg-tint: var(--auth-marketing-grey-bg);
  --app-input-text: var(--auth-marketing-navy);
  --app-input-placeholder: var(--auth-marketing-grey-text);
  --app-icon-muted: var(--auth-marketing-grey-text);
  --app-divider: var(--auth-marketing-border);
  --app-focus-border: var(--auth-marketing-blue);
  --app-focus-ring: color-mix(in srgb, var(--auth-marketing-blue) 15%, transparent);
  --app-button-primary-bg: var(--auth-marketing-blue);
  --app-button-primary-text: var(--auth-marketing-white);
  --app-button-primary-hover: var(--auth-marketing-blue-hover);
  --app-button-primary-focus: var(--auth-marketing-blue);
  --app-link: var(--auth-marketing-blue);
  --app-status-error: var(--auth-marketing-danger);
  --app-callout-error-bg: var(--auth-marketing-danger-bg);
  --app-callout-error-border: var(--auth-marketing-danger-border);
  --app-callout-warning-bg: var(--auth-marketing-teal-surface);
  --app-callout-warning-text: var(--auth-marketing-teal-text);
  --app-callout-warning-border: color-mix(in srgb, var(--auth-marketing-teal-text) 22%, var(--auth-marketing-white));
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--app-bg);
  color: var(--app-text);
}

.login-page .login-card,
.admin-login-page .auth-card {
  width: 100%;
  max-width: 28rem;
}

.auth-card {
  background: var(--app-surface);
  color: var(--app-text);
  border-radius: 0.75rem;
  border: 1.5px solid var(--app-border);
  box-shadow: 0 2px 4px rgba(11, 31, 58, 0.08);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.auth-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--app-text);
  margin: 0;
}

.auth-lede {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--app-text-secondary);
}

.auth-caption {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

.auth-status {
  margin-bottom: 0.75rem;
  color: var(--app-text-secondary);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-form > label {
  display: block;
  margin: 0;
}

.auth-form__password-shell {
  position: relative;
}

.auth-form__password-input {
  padding-right: 2.75rem;
}

.auth-form__field {
  padding-left: 0.875rem;
}

.auth-form__code-field {
  padding-left: 0.875rem;
  letter-spacing: 0.2em;
  text-align: center;
}

.auth-form__actions {
  display: flex;
  justify-content: center;
}

.auth-form__actions--stack {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.auth-check-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.auth-check-row__label {
  font-size: 0.85rem;
  color: var(--app-text-secondary);
}

.auth-note {
  font-size: 0.75rem;
  color: var(--app-text-muted);
  margin-top: -0.5rem;
}

.auth-card--wide {
  max-width: min(520px, 94vw);
}

.auth-card__state {
  text-align: center;
  padding: 2rem;
}

.auth-title-row {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  color: var(--app-text);
}

.auth-message {
  margin-bottom: 1rem;
}

.auth-message--error {
  color: var(--app-status-error);
}

.auth-message--success {
  color: var(--app-status-success);
}

.auth-field-hint--error {
  font-size: 0.75rem;
  color: var(--app-status-error);
  margin-top: 0.25rem;
}

.auth-strength {
  margin-top: 0.5rem;
}

.auth-strength__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.auth-strength__track {
  flex: 1;
  height: 4px;
  background-color: var(--app-border);
  border-radius: 2px;
  overflow: hidden;
}

.auth-strength__bar {
  height: 100%;
  transition: width 0.2s ease;
}

.auth-strength__bar--weak {
  width: 33%;
  background-color: var(--app-status-error);
}

.auth-strength__bar--medium {
  width: 66%;
  background-color: var(--app-status-warning);
}

.auth-strength__bar--strong {
  width: 100%;
  background-color: var(--app-status-success);
}

.auth-strength__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.auth-strength__label--weak {
  color: var(--app-status-error);
}

.auth-strength__label--medium {
  color: var(--app-status-warning);
}

.auth-strength__label--strong {
  color: var(--app-status-success);
}

.auth-form__actions--end {
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* Login page */
.login-page {
  max-width: none;
}
.login-page .login-card {
  width: 100%;
  padding: 1.5rem 1.5rem;
  gap: 1.5rem;
}
.login-card__header {
  text-align: center;
  margin-bottom: 0.25rem;
}
.login-card__logo-shell {
  position: relative;
  min-height: 42px;
  margin: 0 auto 0.75rem auto;
}
.login-card__logo-shell .login-card__logo--loading {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 42px;
  max-width: 220px;
  width: auto;
  opacity: 0;
  pointer-events: none;
}
.login-card__logo-shell .login-card__logo--ready {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.login-card__logo {
  height: 42px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}
.login-card__logo-shell > .login-card__logo-fallback {
  text-align: center;
}
.login-card__logo-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--app-button-primary-bg) 0%,
    var(--auth-marketing-teal-text) 100%
  );
  box-shadow: 0 2px 4px rgba(11, 31, 58, 0.12);
  display: block;
  margin: 0 auto 1rem auto;
}
.login-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--app-text);
  margin: 0 0 0.25rem 0;
}
.login-card__subtitle {
  font-size: 0.875rem;
  color: var(--app-text-muted);
  margin: 0;
  line-height: 1.4;
}
.login-card__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.login-card__form > label {
  margin: 0;
}
.login-card__password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--app-icon-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.login-card__password-toggle:hover {
  color: var(--app-text);
  background: var(--app-divider);
}
.login-card__error {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1.5px solid var(--app-callout-error-border, var(--app-status-error));
  background: var(--app-callout-error-bg, color-mix(in srgb, var(--app-status-error) 8%, transparent));
  color: var(--app-status-error);
  font-size: 0.875rem;
  font-weight: 500;
}
.login-card__submit {
  width: 100%;
  margin-top: 0.25rem;
}
.login-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--app-divider);
}
.login-card__forgot {
  font-size: 0.8125rem;
  color: var(--app-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-card__forgot:hover {
  color: var(--app-link);
}
.login-card__locale {
  flex-shrink: 0;
  min-width: 0;
  max-width: 10rem;
}
.login-card__locale .locale-select-compact {
  font-size: 0.8125rem;
}
.login-page .login-card__locale .search-input-wrapper,
.login-page .login-card__locale input.search-input {
  min-height: 32px;
  height: 32px;
  font-size: 0.8125rem;
}

/* List/table page layout (no inline layout on page container) */
.list-page-root {
  height: calc(100vh - 64px - 16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.list-page-table-area {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Main scroll region inside list-page-root (dashboards, long content below header/action bar) */
.list-page-scroll-region {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}

.list-page-error {
  margin: 0;
  color: var(--app-status-error);
}

.gallery-header--list-page .gallery-header--list-page-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.gallery-header--list-page .gallery-header-title-row-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gallery-header--list-page .gallery-header-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--app-text);
}

.gallery-header--list-page .gallery-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
  padding: 10px 18px;
  box-sizing: border-box;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-input-border);
  flex-shrink: 0;
}

.gallery-header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.gallery-header-chronological {
  font-size: 11px;
  color: var(--app-icon-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.gallery-header-partial {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--app-input-placeholder);
  background: var(--app-divider);
  border-radius: 5px;
  padding: 2px 8px;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
}

.gallery-header-partial-code {
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  color: #1E40AF;
}

.gallery-header-error {
  color: var(--app-error) !important;
  margin-top: 2px;
  font-size: 11px;
}

.search-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 320px;
}

.search-label {
  font-size: var(--app-filter-label-font-size);
  color: var(--app-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
  display: block;
}

/* =========================================================================
   FILTER GRID — reusable filter form layout for list/table pages.
   Usage:
     <div class="filter-grid filter-grid--cols-5">
       <div class="filter-cell">
         <div class="search-label">Label</div>
         <control />
       </div>
       ...
     </div>
   ========================================================================= */

.filter-grid {
  display: grid;
  gap: 12px;
  align-items: start;
}
.filter-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 280px)); }
.filter-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 280px)); }
.filter-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 280px)); }

.filter-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Labels inside a filter-cell: fixed height so they align across columns */
.filter-cell > .search-label {
  min-height: 18px;
  line-height: 1.25;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

/* Wrapped components (e.g. TerminalFilter) that render their own <div> with
   a .search-label + control inside: inherit the cell layout. */
.filter-cell > div:only-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.filter-cell > div:only-child > .search-label {
  min-height: 18px;
  line-height: 1.25;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

/* Controls inside filter-cell must stretch to full column width */
.filter-cell > .search-input-wrapper,
.filter-cell > .dp-wrapper,
.filter-cell > .filter-section {
  width: 100%;
}
/* Neutralize gallery panel styling when SelectPicker sits inside a filter-cell */
.filter-cell .filter-section {
  padding: 0;
  border-bottom: none;
  gap: 0;
}
.filter-cell > div:only-child .filter-section {
  padding: 0;
  border-bottom: none;
  gap: 0;
}

/* =========================================================================
   ACTION BAR — reusable button row for list/table pages.
   Usage:
     <div class="action-bar">
       <div class="action-bar-left">
         <button class="lightbox-save-button">Search</button>
         <button class="lightbox-auto-button">Reload</button>
       </div>
       <div class="action-bar-right">
         <button class="lightbox-auto-button">Export CSV</button>
       </div>
     </div>
   ========================================================================= */

.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.action-bar-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Align SelectPicker/filter-section in action bar with gallery-header and data-table (no extra left padding) */
.action-bar .filter-section {
  padding: 0;
  border-bottom: none;
  gap: 0;
}

.action-bar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* =========================================================================
   FORM GRID — reusable grid layout for form fields.
   Usage:
     <div class="form-grid">
       <label>...</label>
       <label>...</label>
     </div>
   ========================================================================= */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  align-items: start;
}

.form-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Two-column admin/tenant form rows (replaces inline display:grid + 1fr 1fr + gap 12) */
.form-grid.form-grid--cols-2 {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-grid.form-grid--cols-2-spaced {
  margin-top: 12px;
}

/* Generic stack layouts (gap-only or with fixed column templates) */
.stack-grid {
  display: grid;
}

.stack-grid--gap-2 {
  gap: 2px;
}

.stack-grid--gap-4 {
  gap: 4px;
}

.stack-grid--gap-6 {
  gap: 6px;
}

.stack-grid--gap-8 {
  gap: 8px;
}

.stack-grid--gap-10 {
  gap: 10px;
}

.stack-grid--gap-12 {
  gap: 12px;
}

.stack-grid--gap-14 {
  gap: 14px;
}

.stack-grid--cols-2 {
  grid-template-columns: 1fr 1fr;
}

.stack-grid--cols-2-cond {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stack-grid--cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.stack-grid--col-1 {
  grid-template-columns: 1fr;
}

.stack-grid--auto-240 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.stack-grid--auto-260 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stack-grid--auto-fill-160 {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.stack-grid--auto-fit-140 {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.stack-grid--auto-fit-380-start {
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 12px;
  align-items: start;
}

.stack-grid--minmax-0 {
  min-width: 0;
}

.stack-grid--place-center {
  place-items: center;
}

.stack-grid--align-end {
  align-items: end;
}

.stack-grid--mt12 {
  margin-top: 12px;
}

/* SMTP form: server + port + encryption row */
.smtp-form-server-port-ssl-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(140px, 0.5fr) minmax(180px, 0.5fr);
  gap: 10px;
  align-items: end;
}

/* Send log: picture ID badge strip */
.send-log-picture-badges-grid {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  gap: 6px;
  align-items: center;
  justify-content: start;
}

.media-fallback-tile {
  display: grid;
  place-items: center;
  background: var(--app-surface-2);
  color: var(--app-text-muted);
}

/* Inside action bars, all buttons share the same compact dimensions */
.action-bar .lightbox-save-button,
.action-bar .lightbox-auto-button {
  padding: 4px 11px;
  font-size: 12px;
  border-radius: 6px;
  gap: 6px;
  min-height: 34px;
  height: 34px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}

.action-bar .lightbox-save-button .material-icons,
.action-bar .lightbox-auto-button .material-icons {
  font-size: 18px;
}

.action-bar select {
  height: 34px;
  min-height: 34px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
  box-sizing: border-box;
}

.action-bar .filter-checkbox-item {
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
}

.action-bar-left .action-bar-search {
  min-width: 260px;
  max-width: min(420px, 100%);
  flex: 0 1 320px;
}

/* Align search field height with .action-bar buttons (34px) for one visual row */
.action-bar-left .action-bar-search .search-input.search-input--with-icon,
.action-bar-left .action-bar-search .search-input {
  height: 34px;
  min-height: 34px;
  box-sizing: border-box;
}

.action-bar-left .filter-checkbox-item {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  box-sizing: border-box;
}

/* Code mappings: terminal column rows align with destination chips (same order); no repeated dest label */
.code-mapping-terminal-row {
  margin-bottom: 6px;
}
.code-mapping-terminal-row:last-child {
  margin-bottom: 0;
}

.data-table .lightbox-auto-button,
.data-table .lightbox-save-button {
  padding: 6px;
  font-size: 12px;
  border-radius: 6px;
  gap: 6px;
  height: 29px;
  min-height: 29px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.data-table .lightbox-auto-button .material-icons,
.data-table .lightbox-save-button .material-icons,
.data-table .lightbox-auto-button > span,
.data-table .lightbox-save-button > span {
  font-size: 14px !important;
}
.action-bar .lightbox-save-button {
  border: 1.5px solid var(--app-button-primary-bg);
}
.action-bar .lightbox-save-button:disabled {
  border-color: var(--app-button-secondary-hover-border);
}

/* Buttons inside filter-grid (e.g. OutboundSmtpRoutePanel "Save route") —
   match the height of .search-input (36px) and use action-bar proportions */
.filter-grid .lightbox-save-button,
.filter-grid .lightbox-auto-button {
  align-self: flex-start;
  min-height: 36px;
  height: 36px;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 7px;
  gap: 6px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.filter-grid .lightbox-save-button .material-icons,
.filter-grid .lightbox-auto-button .material-icons {
  font-size: 16px;
}
.filter-grid .lightbox-save-button {
  border: 1.5px solid var(--app-button-primary-bg);
}
.filter-grid .lightbox-save-button:disabled {
  border-color: var(--app-button-secondary-hover-border);
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--app-icon-muted);
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
  transition: color 200ms ease;
}

/* For textarea / multi-line inputs, pin the icon to top-left instead of vertical center. */
.search-icon--top {
  top: 0.875rem;
  transform: none;
}

.search-input {
  width: 100%;
  height: 36px;
  padding: 0 2.25rem 0 2.25rem;
  border-radius: 7px;
  border: 1.5px solid var(--app-input-border);
  font-size: 12px;
  font-weight: 500;
  outline: none;
  background-color: var(--app-input-bg-tint);
  color: var(--app-input-text);
  transition: border-color 200ms ease;
  box-shadow: none;
}

textarea.search-input {
  height: auto;
  min-height: 36px;
  padding-top: 8px;
  padding-bottom: 8px;
  resize: vertical;
  line-height: 1.4;
  font-family: var(--font-dm-mono), "DM Mono", monospace;
}

/* Hide spinner on number inputs */
.search-input[type="number"] {
  -moz-appearance: textfield;
}

.search-input[type="number"]::-webkit-inner-spin-button,
.search-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mailbox-help-panel {
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.mailbox-help-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--app-text-muted);
}

.mailbox-help-panel-header strong {
  color: var(--app-text);
  font-size: 0.8125rem;
}

.mailbox-help-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.mailbox-help-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mailbox-help-dl dt {
  font-weight: 600;
  color: var(--app-text);
  font-size: 0.75rem;
  margin-top: 6px;
}

.mailbox-help-dl dt:first-child {
  margin-top: 0;
}

.mailbox-help-dl dd {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.75rem;
}

/* Ensure <select class="search-input"> looks consistent across light/dark/system. */
select.search-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: light dark;
  padding-left: 0.75rem;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%2364748b' d='M5.5 7.5a1 1 0 0 1 1.4 0L10 10.6l3.1-3.1a1 1 0 1 1 1.4 1.4l-3.8 3.8a1 1 0 0 1-1.4 0L5.5 8.9a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.1rem 1.1rem;
}

/* When a select DOES have a leading icon, restore the standard left padding. */
select.search-input.search-input--with-icon {
  padding-left: 2rem;
}

.search-input option {
  background-color: var(--app-surface);
  color: var(--app-text);
}

.json-editor-preview .json-key {
  color: var(--json-key);
}

.json-editor-preview .json-string {
  color: var(--json-string);
}

.json-editor-preview .json-number {
  color: var(--json-number);
}

.json-editor-preview .json-boolean {
  color: var(--json-boolean);
}

.json-editor-preview .json-null {
  color: var(--json-null);
}

select.search-input {
  color-scheme: light;
}

.search-input::-ms-expand {
  display: none;
}

.search-input::placeholder {
  color: var(--app-input-placeholder);
}

.search-input:focus {
  border-color: var(--app-focus-border);
  box-shadow: none;
  background-color: var(--app-input-bg-tint);
}

/* RecipientInput: placeholder colour matches .search-input */
.recipient-input__text-input::placeholder {
  color: var(--app-input-placeholder);
}

/* ── Shared tag/pill input (TagInput, RecipientInput, EmailInput) ── */
.tag-input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--app-input-border);
  border-radius: 7px;
  padding: 6px 10px;
  background: var(--app-input-bg-tint);
  min-height: 36px;
  box-sizing: border-box;
  cursor: text;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.tag-input-wrap:focus-within {
  border-color: var(--app-focus-border);
  box-shadow: 0 0 0 3px var(--app-focus-ring);
}

.tag-input-wrap .tag-input-text {
  flex: 1;
  min-width: 120px;
  min-height: 22px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--app-input-text);
  padding: 2px 0;
  font-family: var(--font-dm-sans), "DM Sans", Helvetica Neue, sans-serif;
}

.tag-input-wrap .tag-input-text::placeholder {
  color: var(--app-input-placeholder);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 12px;
  font-family: var(--font-dm-sans), "DM Sans", Helvetica Neue, sans-serif;
  color: var(--app-input-text);
  background: var(--app-divider);
  border: 1px solid var(--app-input-border);
  white-space: nowrap;
  max-width: 240px;
  flex-shrink: 0;
}

.tag__remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.7;
}

.tag__remove:hover {
  opacity: 1;
}

.tag__remove .material-icons {
  font-size: 14px;
  color: var(--app-text-muted);
}

/* EmailInput: tag-input inside search-input-wrapper with leading icon */
.search-input-wrapper .tag-input-wrap {
  padding-left: 2.75rem;
  width: 100%;
}

/* Audit log: searchable combobox dropdown (Path contains). */
.audit-combobox-menu {
  background: var(--app-surface);
  border: 2px solid var(--app-border-strong);
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 0.25rem;
}

.audit-combobox-option {
  width: 100%;
  display: block;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--app-text);
  padding: 0.6rem 0.75rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.audit-combobox-option:hover {
  background: var(--app-surface-2);
}

.audit-combobox-option:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--app-focus-ring);
}

.gallery-header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--app-text);
}

/* Count chip in list/table page headers (single number or filtered/total) */
.gallery-header-count-chip {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-text-muted);
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 1px 10px;
  line-height: 1.6;
}

.gallery-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--app-text);
  line-height: 1.4;
}
.gallery-header .gallery-subtitle {
  font-size: 13px;
}

.gallery-subtitle--muted {
  color: var(--app-text-muted);
  font-size: 12px;
}

.gallery-grid {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.terminal-section,
.container-section {
  border-radius: 0.75rem;
  border: 1.5px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: all 200ms ease;
}

/* Container grouping should feel lightweight (avoid nested "card in card in card"). */
.container-section {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Container section: large container code, badge, terminal pills */
.container-section-header {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--app-border);
}

.container-section-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.container-section-code {
  margin: 0;
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--app-text);
}

.container-section-badge {
  font-size: 11px;
  color: var(--app-text-muted);
  background: var(--app-surface-2);
  border-radius: 0.375rem;
  padding: 0.125rem 0.5rem;
  font-weight: 500;
}

.container-section-terminals {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.container-section-cases {
  padding-left: 0.75rem;
  border-left: 2px solid var(--app-border);
}

.container-section > .gallery-grid {
  margin-top: 0;
}

.gallery-container-separator {
  height: 1px;
  margin: 6px 0;
  background: var(--app-border);
}

.case-card {
  border-radius: 8px;
  border: 1px solid #E8ECF1;
  background: var(--app-surface);
  color: var(--app-text);
  padding: 0;
  box-shadow: none;
  transition: box-shadow 0.12s ease;
  position: relative;
  overflow: visible;
}

.case-card::before {
  content: none;
}

.case-indicators {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.9rem;
}

.case-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-text);
  opacity: 0.9;
}

.case-indicator .material-icons {
  font-size: 18px;
  line-height: 1;
}

.case-card:hover {
  box-shadow: none;
}

.case-card[data-meta-active="true"] {
  background: var(--app-surface);
  border-color: #E8ECF1;
  box-shadow: none;
}

.case-card[data-meta-active="true"]::before {
  opacity: 0;
}

.terminal-header {
  margin-bottom: 0.35rem;
}

/* Case card: single action bar row (design layout) */
.case-card-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--app-input-bg-tint);
  border-bottom: 1px solid var(--app-divider);
  border-radius: 8px 8px 0 0;
}

.case-card-action-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}

.case-card-action-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}

.case-card-action-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Quick metadata action buttons in case header */
.case-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Global: same size for all quick buttons (CaseCard, UploadModal, etc.) */
.case-quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  box-sizing: border-box;
  border: 1px solid var(--app-input-border);
  border-radius: 5px;
  background: var(--app-input-bg-tint);
  color: var(--app-button-secondary-text);
  font-size: 11px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
  white-space: nowrap;
  font-family: inherit;
}

.case-quick-btn .material-icons,
.case-quick-btn .MuiSvgIcon-root {
  font-size: 13px !important;
  color: var(--app-input-placeholder);
}

.case-quick-btn:hover {
  background: var(--app-input-bg-tint);
  border-color: var(--app-input-border);
}

.case-quick-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.case-quick-btn-active {
  background: var(--app-input-bg-tint);
  border-color: var(--app-border);
  color: var(--app-input-text);
  font-weight: 600;
}

.case-quick-btn-active .material-icons,
.case-quick-btn-active .MuiSvgIcon-root {
  color: var(--app-input-text);
}

.case-quick-btn-post-active {
  background: var(--app-button-primary-bg);
  border-color: var(--app-button-primary-bg);
  color: var(--app-button-primary-text);
  font-weight: 600;
}

.case-quick-btn-post-active .material-icons,
.case-quick-btn-post-active .MuiSvgIcon-root {
  color: var(--app-button-primary-text) !important;
}

.case-quick-btn-post-active:hover {
  background: var(--app-button-primary-bg);
  border-color: var(--app-button-primary-bg);
}

/* Global Post button: same height across app; width fits icon + "Post" text */
.app-post-btn {
  width: fit-content;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Primary (Upload/Browse) quick button: same blue as modal Upload button */
.case-quick-btn-primary {
  background: var(--app-button-primary-bg);
  border-color: var(--app-button-primary-bg);
  color: var(--app-button-primary-text);
  font-weight: 600;
}

.case-quick-btn-primary .material-icons,
.case-quick-btn-primary .MuiSvgIcon-root {
  color: var(--app-button-primary-text) !important;
}

.case-quick-btn-primary:hover {
  background: var(--app-button-primary-hover);
  border-color: var(--app-button-primary-hover);
  color: var(--app-button-primary-text);
}

/* Tag chips in case header (indigo scheme from reference) */
.case-tag-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 5px;
  background: var(--app-case-tag-chip-bg);
  color: var(--app-case-tag-chip-text);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--app-case-tag-chip-border);
  font-family: inherit;
  line-height: 1.2;
}

.case-tag-chip--manual {
  background: var(--app-case-manual-chip-bg);
  color: var(--app-case-manual-chip-text);
  border-color: var(--app-case-manual-chip-border);
}

.case-tag-chip--manual:hover {
  background: var(--app-case-manual-chip-hover-bg);
}

button.case-tag-chip--manual:not(:disabled) {
  cursor: pointer;
}

.case-quick-btn--plate-filled {
  background: var(--app-case-plate-chip-bg);
  border-color: var(--app-case-plate-chip-border);
  color: var(--app-case-plate-chip-text);
  font-weight: 600;
  font-family: var(--font-dm-mono), "DM Mono", ui-monospace, monospace;
}

.case-quick-btn--plate-filled .material-icons,
.case-quick-btn--plate-filled .MuiSvgIcon-root {
  color: var(--app-case-plate-chip-icon);
}

button.case-tag-chip {
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  min-height: 28px;
  font-family: inherit;
}

button.case-tag-chip:disabled {
  cursor: default;
  opacity: 1;
}

.case-tag-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 -2px 0 2px;
  border: none;
  background: transparent;
  color: var(--app-case-tag-chip-remove);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: color 0.1s ease;
}

.case-tag-chip-remove:hover {
  color: #4338CA;
}

.case-tag-chip-remove .material-icons {
  font-size: 13px !important;
}

/* Tag dropdown picker */
.case-tag-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 3px);
  z-index: 1100;
  background: var(--app-surface);
  border: 1px solid var(--app-input-border);
  border-radius: 8px;
  padding: 0;
  min-width: 190px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
  animation: popIn 0.12s ease;
}

/* When opened above the button (e.g. in modal near footer) */
.case-tag-dropdown--above {
  top: auto;
  bottom: calc(100% + 3px);
  animation: popInAbove 0.12s ease;
}

@keyframes popInAbove {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.case-tag-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border: none;
  background: none;
  color: var(--app-input-text);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.08s ease;
}

.case-tag-dropdown-item:hover {
  background: var(--app-input-bg-tint);
}

.case-tag-dropdown-empty {
  padding: 10px 14px;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  font-style: italic;
}

/* Inline editable field (plate, comment) */
.case-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1.5px solid var(--app-focus-border);
  border-radius: 5px;
  background: var(--app-surface);
}

.case-inline-field-wide {
  min-width: 160px;
}

.case-inline-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--app-input-text);
  padding: 0;
  min-width: 60px;
  max-width: 160px;
  font-family: inherit;
}

.case-card-action-bar .lightbox-save-button {
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  box-sizing: border-box;
  font-size: 12px;
  border-radius: 5px;
  border: 1.5px solid var(--app-button-primary-bg);
}

/* Case-level dropdown menu */
/* More button in case card header */
.case-card-action-bar .lightbox-icon-button {
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  box-sizing: border-box;
  border: 1px solid var(--app-input-border);
  border-radius: 5px;
  background: var(--app-input-bg-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.case-card-action-bar .lightbox-icon-button .material-icons {
  font-size: 18px;
  color: var(--app-input-placeholder);
}

.case-card-action-bar .lightbox-icon-button:hover {
  background: var(--app-divider);
}

.case-card-action-bar .lightbox-icon-button:hover .material-icons {
  color: var(--app-text-muted);
}

.case-card-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
  background: var(--app-surface);
  border: 1.5px solid var(--app-input-border);
  border-radius: 8px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.14);
  animation: popIn 0.12s ease;
}

.case-card-dropdown-menu [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--app-input-text);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-dm-sans), "DM Sans", "Helvetica Neue", sans-serif;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}

.case-card-dropdown-menu [role="menuitem"]:hover {
  background: var(--app-divider);
}

.case-card-dropdown-menu [role="menuitem"] .material-icons {
  font-size: 18px;
  color: var(--app-input-placeholder);
  flex-shrink: 0;
}

.case-card-dropdown-menu [role="menuitem"]:hover .material-icons {
  color: var(--app-text-muted);
}

.case-card-dropdown-menu [role="menuitem"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.case-card-dropdown-menu .case-card-dropdown-divider {
  height: 1px;
  background: var(--app-input-border);
  margin: 6px 0;
  padding: 0;
  border: none;
  min-height: 0;
}

/* Selection action bar */
/* Selection bar (blue tint from reference) */
.case-card-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 6px 10px;
  background: #EFF6FF;
  border-bottom: 1px solid #DBEAFE;
  flex-wrap: wrap;
  animation: barSlide 0.14s ease;
}

@keyframes barSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.case-card-selection-bar-left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.case-selection-count {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  background: #DBEAFE;
  color: var(--app-button-primary-hover);
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  white-space: nowrap;
}

.case-sel-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border: 1px solid #BFDBFE;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.85);
  color: #1E40AF;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s ease;
  white-space: nowrap;
  font-family: inherit;
}

.case-sel-btn .material-icons,
.case-sel-btn .MuiSvgIcon-root {
  font-size: 12px !important;
  color: #1E40AF;
}

.case-sel-btn:hover {
  background: var(--app-surface);
}

.case-sel-btn-send {
  background: var(--app-button-primary-bg);
  color: var(--app-button-primary-text);
  border-color: var(--app-button-primary-bg);
  font-weight: 600;
}

.case-sel-btn-send .material-icons {
  color: var(--app-button-primary-text) !important;
}

.case-sel-btn-send:hover {
  background: var(--app-button-primary-hover);
  border-color: var(--app-button-primary-hover);
}

.case-sel-btn-delete {
  color: var(--app-status-error);
  border-color: #FECACA;
  background: rgba(255, 255, 255, 0.85);
}

.case-sel-btn-delete .material-icons {
  color: var(--app-status-error) !important;
}

.case-sel-btn-delete:hover {
  background: #FEF2F2;
}

.case-sel-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: #BFDBFE;
  margin: 0 1px;
  flex-shrink: 0;
}

.case-sel-clear {
  border: none;
  background: none;
  color: var(--app-icon-muted);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: inherit;
  transition: color 0.1s ease;
}

.case-sel-clear:hover {
  color: var(--app-button-secondary-text);
  background: none;
}

.case-card-select-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--app-text-muted);
  cursor: pointer;
  border-radius: 0.25rem;
}

.case-card-select-all:hover .case-card-checkbox {
  border-color: var(--app-icon-muted);
}

.case-card-checkbox {
  width: 15px;
  height: 15px;
  border-radius: 3.5px;
  flex-shrink: 0;
  border: 1.5px solid var(--app-border);
  background: var(--app-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-card-checkbox--checked {
  background: var(--app-button-primary-bg);
  border-color: var(--app-button-primary-bg);
}

.case-card-checkbox svg {
  width: 9px;
  height: 9px;
}

.case-card-links-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--app-input-border);
  background: var(--app-input-bg-tint);
  color: var(--app-link);
  font-size: 11px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.case-card-links-btn:hover,
.case-card-links-btn:focus-visible {
  background: var(--app-surface-3);
}

/* Sent chip in case card action bar: same height as .case-quick-btn (28px), chip styling, slightly highlighted. */
.case-card-sent-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  box-sizing: border-box;
  border: 1px solid var(--app-lightbox-details-note-chip-border);
  border-radius: 5px;
  background: var(--app-lightbox-details-note-chip-bg);
  color: var(--app-status-success);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
.case-card-sent-chip:hover,
.case-card-sent-chip:focus-visible {
  background: var(--app-surface-3);
  border-color: var(--app-border);
  color: var(--app-status-success);
}
.case-card-sent-chip .material-icons {
  font-size: 14px;
  color: var(--app-status-success);
}

/* ── Send preview popup (hover on Sent chip) ── */
.send-preview-popup {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 500;
  width: 360px;
  max-width: min(360px, 80vw);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.22);
  overflow: hidden;
  color: var(--app-text);
  font-family: var(--font-dm-sans), "DM Sans", sans-serif;
}

.send-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--app-header-bg);
}

.send-preview-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #F8FAFC;
}

.send-preview-header-title .material-icons {
  font-size: 16px;
  color: #93C5FD;
}

.send-preview-header-subtitle {
  font-size: 10px;
  font-weight: 500;
  color: #94A3B8;
}

.send-preview-body {
  padding: 10px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.send-preview-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--app-divider);
}

.send-preview-row:last-child {
  border-bottom: none;
}

.send-preview-row-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}

.send-preview-row-status .material-icons {
  font-size: 14px;
}

.send-preview-row-status--ok {
  background: color-mix(in srgb, var(--app-status-success) 12%, transparent);
}

.send-preview-row-status--ok .material-icons {
  color: var(--app-status-success);
}

.send-preview-row-status--failed {
  background: color-mix(in srgb, var(--app-status-error) 12%, transparent);
}

.send-preview-row-status--failed .material-icons {
  color: var(--app-status-error);
}

.send-preview-row-status--pending {
  background: color-mix(in srgb, var(--app-status-info) 12%, transparent);
}

.send-preview-row-status--pending .material-icons {
  color: var(--app-status-info);
}

.send-preview-row-status--skipped {
  background: color-mix(in srgb, var(--app-status-warning) 12%, transparent);
}

.send-preview-row-status--skipped .material-icons {
  color: var(--app-status-warning);
}

.send-preview-row-detail {
  min-width: 0;
}

.send-preview-row-dest {
  font-size: 12px;
  font-weight: 600;
  color: var(--app-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.send-preview-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  font-size: 10px;
  color: var(--app-muted-text);
}

.send-preview-pic-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--app-muted-text);
  background: var(--app-hover-bg, #F1F5F9);
  border-radius: 10px;
  padding: 1px 6px 1px 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.send-preview-pic-count .material-icons {
  font-size: 12px;
}

.send-preview-row-time {
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--app-muted-text);
  white-space: nowrap;
  text-align: right;
}

.send-preview-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-top: 1px solid var(--app-divider);
  background: #FAFBFC;
}

.send-preview-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--app-link);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
  font-family: inherit;
}

.send-preview-footer-link:hover {
  background: color-mix(in srgb, var(--app-link) 8%, transparent);
}

.send-preview-footer-link .material-icons {
  font-size: 14px;
}

.send-preview-loading {
  padding: 24px 14px;
  text-align: center;
  color: var(--app-muted-text);
  font-size: 12px;
}

.send-preview-empty {
  padding: 16px 14px;
  text-align: center;
  color: var(--app-muted-text);
  font-size: 11px;
}

/* ── Links preview popup (hover on Links chip) ── */
.links-preview-popup {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 500;
  width: 340px;
  max-width: min(340px, 80vw);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.22);
  overflow: hidden;
  color: var(--app-text);
  font-family: var(--font-dm-sans), "DM Sans", sans-serif;
}

.links-preview-toggle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--app-divider);
  background: #FAFBFC;
  font-size: 11px;
  color: var(--app-muted-text);
  cursor: pointer;
  user-select: none;
}

.links-preview-toggle-row input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--app-link);
}

.links-preview-body {
  padding: 8px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.links-preview-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--app-divider);
}

.links-preview-row:last-child {
  border-bottom: none;
}

.links-preview-row-detail {
  min-width: 0;
}

.links-preview-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-text);
}

.links-preview-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 10px;
  color: var(--app-muted-text);
}

.links-preview-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.links-preview-view-count {
  font-size: 16px;
  font-weight: 700;
  color: var(--app-text);
  line-height: 1;
  text-align: right;
}

.links-preview-view-label {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--app-muted-text);
  letter-spacing: 0.04em;
  font-weight: 600;
}

.links-preview-revoke-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 4px;
  border: none;
  background: color-mix(in srgb, var(--app-status-error) 10%, transparent);
  color: var(--app-status-error);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.links-preview-revoke-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--app-status-error) 20%, transparent);
}

.links-preview-revoke-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.links-preview-revoke-btn .material-icons {
  font-size: 12px;
}

.case-card-details-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.case-card-details-btn .material-icons {
  font-size: 1.125rem;
}

.terminal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-text);
}

/* In case cards, keep badge/date/count/icons aligned on the same row baseline. */
.case-card .terminal-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.45rem;
  row-gap: 0.25rem;
}

.case-card .case-container-date {
  color: var(--app-text-muted);
  font-size: 0.875rem;
}

.case-card .case-picture-count {
  color: var(--app-text-muted);
  font-size: 0.8125rem;
}

.case-container-code-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
}

.case-container-code--copyable {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: inherit;
  text-align: left;
}

.case-container-code--copyable:focus-visible {
  outline: 2px solid var(--app-focus-border);
  outline-offset: 2px;
}

/* Fixed position + transform set inline (portal to body) so badge shows above the code on HTTP and is not clipped by gallery scroll. */
.case-container-code-copy-badge {
  z-index: 10050;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
  color: var(--app-text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.case-container-code {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-text);
  white-space: nowrap;
}

.case-container-code-sep {
  width: 3px;
}

.case-container-check {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--app-text);
  border-radius: 3px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  position: relative;
  top: 0px;
}

.case-terminal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid hsl(var(--terminal-hue, 220), var(--app-terminal-hue-sat), var(--app-terminal-badge-border-l));
  background: hsl(var(--terminal-hue, 220), var(--app-terminal-hue-sat), var(--app-terminal-badge-bg-l));
  color: hsl(var(--terminal-hue, 220), var(--app-terminal-badge-text-s), var(--app-terminal-badge-text-l));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Global neutral chip — use in tables (InlineChipAddRemove) and modals (SelectPicker badges). Single source of truth. */
.app-chip,
.data-table-terminal-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
  color: var(--app-text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  font-family: inherit;
}
.data-table-terminal-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 0 0 2px;
  border: none;
  background: transparent;
  color: var(--app-text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: 2px;
  transition: color 0.1s ease, background 0.1s ease;
}
.data-table-terminal-chip-remove:hover {
  color: var(--app-text);
  background: rgba(0, 0, 0, 0.06);
}
.data-table-terminal-chip-remove .material-icons {
  font-size: 14px !important;
}

/* Selectable chip button — same look as .app-chip, for clickable chips (e.g. SendToModal destinations). */
.app-chip-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
  color: var(--app-text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.app-chip-button:hover {
  border-color: var(--app-border-strong);
  background: var(--app-surface);
  color: var(--app-text);
}
.app-chip-button--selected {
  border-color: var(--app-button-primary-bg);
  background: var(--app-date-selected-bg);
  color: var(--app-terminal-badge-text);
  font-weight: 600;
}
.app-chip-button--selected:hover {
  border-color: var(--app-button-primary-hover);
  background: var(--app-date-selected-bg);
  color: var(--app-terminal-badge-text);
}
.app-chip-button .material-icons {
  font-size: 14px;
}

/* Filter panel: softer terminal chip colors (muted, less saturated) */
.filter-terminal-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  border: 1px solid hsl(var(--terminal-hue, 220), 28%, var(--app-terminal-badge-border-l));
  background: hsl(var(--terminal-hue, 220), 26%, var(--app-terminal-badge-bg-l));
  color: hsl(var(--terminal-hue, 220), 42%, var(--app-terminal-badge-text-l));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Small number badge in filter panel (replaces "X case(s)" text) */
.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.125rem;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--app-divider);
  color: var(--app-icon-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.filter-checkbox-item input:checked ~ .filter-count-badge {
  color: #1E40AF;
  background: #DBEAFE;
}

/* Terminal row: colorized chip for terminal name and count */
.filter-terminal-chip-count {
  font-size: 10px;
  font-weight: 600;
  border-radius: 9px;
  padding: 1px 6px;
  margin-left: auto;
  background: hsl(var(--terminal-hue, 220), 26%, 96%);
  color: hsl(var(--terminal-hue, 220), 42%, 35%);
}

.filter-checkbox-item input:checked ~ .filter-terminal-chip-count {
  background: hsl(var(--terminal-hue, 220), 45%, 88%);
  color: hsl(var(--terminal-hue, 220), 55%, 28%);
}

/* Full-width Search button at bottom of filter panel */
.filter-panel-search-btn {
  width: 100%;
  background: var(--app-button-primary-bg);
  border: none;
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-button-primary-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  transition: background 0.15s ease;
}

.filter-panel-search-btn:hover:not(:disabled) {
  background: var(--app-button-primary-hover);
}

.filter-panel-search-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.filter-panel-clear-btn {
  width: 100%;
  background: none;
  border: 1px solid var(--app-input-border);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--app-input-placeholder);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: inherit;
  transition: background 0.15s ease;
}

.filter-panel-clear-btn:hover {
  background: var(--app-input-bg-tint);
}

.filter-panel-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--app-divider);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* In the filter panel, `.filter-checkbox-item span { font-size: 0.875rem; }` makes the badge larger.
   Match that size in the case card header so terminal badges are consistent across views. */
.terminal-title .case-terminal-badge {
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
  font-size: 11px;
}

.terminal-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  border: 1px solid hsl(var(--terminal-hue, 220), var(--app-terminal-hue-sat), var(--app-terminal-badge-border-l));
  background: hsl(var(--terminal-hue, 220), var(--app-terminal-hue-sat), var(--app-terminal-badge-bg-l));
}

.case-container-date {
  /* Must remain readable in system/light/dark themes. */
  color: var(--app-text);
  font-weight: 600;
}

.case-picture-count {
  margin-left: 0.5rem;
  color: var(--app-text);
  opacity: 0.85;
  font-weight: 600;
}

.terminal-subtitle {
  font-size: 0.8125rem;
  color: var(--app-text-muted);
}

.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  padding: 10px 12px 12px;
}

.thumbnail-card {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
  color: var(--app-text);
  box-shadow: none;
  transition: box-shadow 0.12s ease, opacity 0.12s ease;
  cursor: pointer;
}
.thumbnail-card--skeleton {
  cursor: default;
}
.thumbnail-card--skeleton .thumbnail-image-wrap {
  background: var(--app-surface-2);
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}
/* Thumbnail ring: browser-handled via :hover only (no React state). */
.thumbnail-card:hover:not(.thumbnail-card--skeleton) {
  box-shadow: 0 0 0 2.5px var(--app-button-primary-bg), 0 0 0 5px rgba(37, 99, 235, 0.15);
}
/* Dim only the image when thumbnail is hidden; overlays and summary bar stay full opacity */
.thumbnail-card--hidden .thumbnail-image-inner {
  opacity: 0.45;
}
.thumbnail-card--hidden .thumbnail-video-btn img {
  opacity: 0.45;
}

/* Image wrapper — relative positioning anchor for all overlays */
.thumbnail-image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
}

/* When summary bar follows, flatten bottom corners of image */
.thumbnail-card:has(.thumbnail-summary-bar) .thumbnail-image-wrap {
  border-radius: 6px 6px 0 0;
}

.thumbnail-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--app-surface-2);
}
.thumbnail-image-inner {
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  pointer-events: auto;
}
.thumbnail-image-inner > div { width: 100%; height: 100%; }

/* Upload history ID hover preview: image fits inside fixed 280×280 box */
.upload-history-id-preview .thumbnail-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Video button */
.thumbnail-video-btn {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  background: black;
  color: white;
}
.thumbnail-video-play-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
  pointer-events: none;
}

/* ── Checkbox — top-left, hover-only ── */
.thumbnail-checkbox {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 3;
  cursor: pointer;
}
.thumbnail-checkbox--checked {
  background: var(--app-button-primary-bg);
  border-color: var(--app-button-primary-bg);
  opacity: 1;
}
.thumbnail-card:hover .thumbnail-checkbox {
  opacity: 1;
}

/* ── Edit icon — top-right, hover-only ── */
.thumbnail-edit-button {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
  pointer-events: auto;
}
.thumbnail-card:hover .thumbnail-edit-button {
  opacity: 1;
}
.thumbnail-edit-button:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.thumbnail-edit-button .material-icons {
  font-size: 12px;
  color: var(--app-button-secondary-text);
}

/* ── Indicator chip strip — bottom-right on image ── */
.thumbnail-indicator-strip {
  position: absolute;
  bottom: 5px;
  right: 5px;
  display: flex;
  gap: 3px;
  align-items: center;
  z-index: 2;
}
.thumbnail-indicator-chip {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  opacity: 0.85;
  transition: opacity 0.12s ease;
}
.thumbnail-card:hover .thumbnail-indicator-chip {
  opacity: 1;
}
.thumbnail-indicator-chip .material-icons {
  font-size: 11px;
  color: var(--app-button-primary-text);
}
.thumbnail-indicator-chip--clickable {
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.thumbnail-indicator-chip--clickable:hover {
  opacity: 1 !important;
  transform: scale(1.15);
}

/* ── Geo Map Modal ── */
.geo-modal-map {
  width: 100%;
  height: 350px;
  isolation: isolate;
  position: relative;
  z-index: 0;
}
.geo-map-pin {
  background: none !important;
  border: none !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.geo-map-pin .material-icons {
  font-size: 36px;
  color: #DC2626;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
.geo-modal-address-bar {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--app-text);
}
.geo-modal-coords,
.geo-modal-address {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}
.geo-modal-coords {
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-size: 11px;
  color: var(--app-text-muted);
}
.geo-modal-address-formatted {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.geo-addr-lines {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.geo-addr-street {
  font-size: 13px;
  font-weight: 600;
  color: var(--app-text);
}
.geo-addr-city {
  font-size: 12px;
  font-weight: 500;
  color: var(--app-text);
}
.geo-addr-country {
  font-size: 11px;
  font-weight: 400;
  color: var(--app-text-muted);
}
.geo-addr-loading {
  font-style: italic;
  color: var(--app-text-muted);
}
.geo-copy-btn {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--app-icon-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.geo-copy-btn:hover {
  background: var(--app-hover);
  color: var(--app-text);
}
.geo-copy-btn .material-icons {
  font-size: 15px;
}

/* Selected overlay tint */
.thumbnail-selected-overlay {
  position: absolute;
  inset: 0;
  background: rgba(37, 99, 235, 0.08);
  pointer-events: none;
  z-index: 1;
}

/* ── Picture Edit Modal (PEM) ── */
.pem-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(4px);
}

.pem-dialog {
  position: relative;
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--app-surface);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 0;
  animation: slideUp 0.15s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pem-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  color: var(--app-button-primary-text);
  cursor: pointer;
  font-size: 16px;
  transition: background 0.1s ease;
}

.pem-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.pem-preview {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: var(--app-surface-2);
}

.pem-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pem-preview-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  background: linear-gradient(0deg, rgba(2, 6, 23, 0.55), transparent);
  color: var(--app-button-primary-text);
}

.pem-preview-label {
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.pem-preview-date {
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 2px;
}

/* Post/Hide buttons inside PictureEditModal (standalone, not inside lightbox viewer) */
.pem-dialog .lightbox-details-action-btn {
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  border: 1px solid #BFDBFE;
  background: rgba(255, 255, 255, 0.85);
  color: #1E40AF;
  transition: background 0.1s ease;
  white-space: nowrap;
}

.pem-dialog .lightbox-details-action-btn .material-icons {
  font-size: 12px;
}

.pem-dialog .lightbox-details-action-btn:hover {
  background: var(--app-surface);
}

.pem-dialog .lightbox-details-action-btn-active {
  background: var(--app-button-primary-bg);
  border-color: var(--app-button-primary-bg);
  color: var(--app-button-primary-text);
  font-weight: 600;
}

.pem-dialog .lightbox-details-action-btn-active:hover {
  background: var(--app-button-primary-hover);
  border-color: var(--app-button-primary-hover);
}

/* Note chips and add-note button inside PictureEditModal — same height (28px) as add-note button */
.pem-dialog .lightbox-details-note-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  min-height: 28px;
  padding: 0 6px 0 8px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid var(--app-lightbox-details-note-chip-border);
  background: var(--app-lightbox-details-note-chip-bg);
  color: var(--app-lightbox-details-note-chip-text);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  font-family: inherit;
}

.pem-dialog .lightbox-details-note-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 0 0 2px;
  border: none;
  background: transparent;
  color: var(--app-text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: 2px;
  transition: color 0.1s ease, background 0.1s ease;
}
.pem-dialog .lightbox-details-note-chip-remove:hover {
  color: var(--app-text);
  background: rgba(0, 0, 0, 0.06);
}

.pem-dialog .lightbox-details-notes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}

.pem-dialog .lightbox-details-add-note-btn {
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
  padding: 0 12px;
  background: var(--app-input-bg-tint);
  border: 1.5px dashed var(--app-border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--app-icon-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
}

.pem-dialog .lightbox-details-note-dropdown {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  min-width: 190px;
  background: var(--app-surface);
  border: 1px solid var(--app-input-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
  z-index: 900;
  overflow: hidden;
  animation: popIn 0.12s ease;
}

.pem-dialog .lightbox-details-note-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--app-input-text);
  text-align: left;
  font-family: inherit;
}

.pem-dialog .lightbox-details-note-dropdown-item:hover {
  background: var(--app-input-bg-tint);
}

.pem-dialog .lightbox-details-note-dropdown-empty {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--app-icon-muted);
}

/* Note dropdown portal — rendered outside modal body to avoid body scrollbar */
.pem-note-dropdown-portal {
  position: fixed;
  z-index: 1200;
  min-width: 190px;
  background: var(--app-surface);
  border: 1px solid var(--app-input-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
  overflow-y: auto;
  animation: popIn 0.12s ease;
}

.pem-note-dropdown-portal .lightbox-details-note-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--app-input-text);
  text-align: left;
  font-family: inherit;
}

.pem-note-dropdown-portal .lightbox-details-note-dropdown-item:hover {
  background: var(--app-input-bg-tint);
}

.pem-note-dropdown-portal .lightbox-details-note-dropdown-empty {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--app-icon-muted);
}

/* Comment textarea inside PictureEditModal */
.pem-dialog .lightbox-details-comment-input-wrap {
  position: relative;
}

.pem-dialog .lightbox-details-comment-input {
  width: 100%;
  background: var(--app-input-bg-tint);
  border: 1.5px solid var(--app-input-border);
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 13px;
  color: var(--app-input-text);
  font-family: inherit;
  resize: none;
  outline: none;
}

.pem-dialog .lightbox-details-comment-input:focus {
  border-color: var(--app-focus-border);
}

.pem-dialog .lightbox-details-comment-clear-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--app-icon-muted);
  font-size: 16px;
  line-height: 1;
}

.pem-dialog .lightbox-details-comment-count {
  font-size: 10px;
  color: var(--app-border);
  margin-top: 3px;
}

.pem-dialog .lightbox-details-comment-readonly {
  font-size: 13px;
  color: var(--app-button-secondary-text);
}

.pem-actions {
  display: flex;
  gap: 8px;
  padding: 16px 18px 0;
}

.pem-section {
  padding: 0 18px;
  margin-top: 14px;
}

.pem-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--app-icon-muted);
  margin-bottom: 6px;
}

.pem-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--app-divider);
  margin-top: 14px;
}

.pem-cancel-btn {
  padding: 7px 16px;
  border: 1px solid var(--app-input-border);
  border-radius: 7px;
  background: none;
  color: var(--app-input-placeholder);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  font-family: inherit;
}

.pem-cancel-btn:hover {
  background: var(--app-input-bg-tint);
}

.pem-save-btn {
  padding: 7px 18px;
  border: none;
  border-radius: 7px;
  background: var(--app-button-primary-bg);
  color: var(--app-button-primary-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s ease;
}

.pem-save-btn:hover {
  background: var(--app-button-primary-hover);
}

.pem-save-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── DatePickerInput — global compact style ── */
.dp-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-input {
  width: 100%;
  height: 36px;
  padding: 0 2.25rem 0 2.5rem;
  border: 1.5px solid var(--app-input-border);
  border-radius: 7px;
  background: var(--app-input-bg-tint);
  font-size: 12px;
  font-weight: 500;
  color: var(--app-input-text);
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  outline: none;
  box-shadow: none;
}

.dp-input:focus {
  border-color: var(--app-focus-border);
}

.dp-input::placeholder {
  color: var(--app-input-placeholder);
}

.dp-calendar-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  color: var(--app-icon-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-calendar-btn:hover {
  background: var(--app-divider);
  color: var(--app-input-placeholder);
}

/* Calendar popup */
.dp-popup {
  width: 260px;
  background: var(--app-surface);
  border: 1px solid var(--app-input-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.18);
  padding: 12px;
  animation: popIn 0.12s ease;
}

.dp-popup-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dp-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--app-input-placeholder);
  padding: 4px;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.dp-nav-btn:hover {
  background: var(--app-divider);
  color: var(--app-input-text);
}

.dp-month-label {
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--app-input-text);
}

.dp-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.dp-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--app-icon-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dp-day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dp-day {
  height: 30px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  color: var(--app-button-secondary-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.1s ease;
}

.dp-day:hover:not(:disabled) {
  background: var(--app-divider);
}

.dp-day--selected {
  background: var(--app-button-primary-bg) !important;
  color: var(--app-button-primary-text) !important;
  font-weight: 700;
}

.dp-day--today {
  background: #EFF6FF;
  color: var(--app-button-primary-bg);
  font-weight: 700;
}

/* Days that have pictures (e.g. daily bundle calendar) */
.dp-day--highlighted {
  position: relative;
  background: #DBEAFE;
  color: var(--app-button-primary-bg);
  font-weight: 600;
}

.dp-day--highlighted:hover:not(:disabled) {
  background: #BFDBFE;
}

.dp-popup-footer {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--app-divider);
}

.dp-footer-btn {
  padding: 4px 10px;
  border: 1px solid var(--app-input-border);
  border-radius: 5px;
  background: var(--app-input-bg-tint);
  color: var(--app-input-placeholder);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.dp-footer-btn:hover {
  background: var(--app-divider);
}

.dp-footer-btn--today {
  background: #EFF6FF;
  color: var(--app-button-primary-bg);
  border-color: #BFDBFE;
}

.dp-footer-btn--done {
  background: var(--app-button-primary-bg);
  color: var(--app-button-primary-text);
  border-color: var(--app-button-primary-bg);
  font-weight: 600;
}

.dp-footer-btn--done:hover {
  background: var(--app-button-primary-hover);
}

/* (modal-compact-form overrides removed — now globally styled via SelectPicker/DatePickerInput) */

/* ── Collapsible summary bar below thumbnail ── */
.thumbnail-summary-bar {
  border-top: 1px solid var(--app-input-border);
  background: var(--app-input-bg-tint);
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}
.thumbnail-summary-toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
}
.thumbnail-summary-chips {
  display: flex;
  gap: 4px;
  flex: 1;
  align-items: center;
}
.thumbnail-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  padding: 1px 6px;
  line-height: 1.4;
}
.thumbnail-summary-chip .material-icons {
  font-size: 9px;
}
.thumbnail-summary-chip--notes {
  color: #166534;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}
.thumbnail-summary-chip--notes .material-icons { color: var(--app-status-success); }
.thumbnail-summary-chip--comment {
  color: var(--app-button-primary-hover);
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
}
.thumbnail-summary-chip--comment .material-icons { color: var(--app-button-primary-bg); }
.thumbnail-summary-chevron {
  font-size: 14px;
  color: var(--app-icon-muted);
  transition: transform 0.15s ease;
}
.thumbnail-summary-chevron--open {
  transform: rotate(180deg);
}

.thumbnail-meta-footer {
  margin-top: auto;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.thumbnail-meta-timestamp {
  font-size: 11px;
  color: var(--app-input-placeholder);
  font-family: var(--font-dm-mono), "DM Mono", ui-monospace, monospace;
  text-align: center;
  line-height: 1.3;
}

.thumbnail-meta-creator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  font-size: 11px;
  color: var(--app-input-placeholder);
  text-align: center;
  line-height: 1.3;
}

.thumbnail-meta-creator .material-icons {
  font-size: 13px !important;
  color: var(--app-input-placeholder);
  flex-shrink: 0;
}

.thumbnail-meta-creator > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Expanded details panel inside summary bar */
.thumbnail-summary-details {
  padding: 6px 9px 8px;
  border-top: 1px solid #EEF2F6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: popIn 0.12s ease;
}

/* Notes/comment styling (used inside summary details) */
.thumbnail-meta-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--app-icon-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.thumbnail-meta-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.thumbnail-meta-note-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}
.thumbnail-meta-comment {
  font-size: 11px;
  font-style: italic;
  color: var(--app-button-secondary-text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumbnail-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thumbnail-subtitle {
  font-size: 0.7rem;
  color: var(--app-text-muted);
}

/* Lightbox (subset needed for migration) */
.hidden {
  display: none !important;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keep viewer overlays above the app, but below modal confirms. */
  z-index: 1100;
}

.lightbox[data-lightbox-kind="modal"] {
  align-items: center;
  overflow-y: auto;
  padding: 24px 16px;
  /* ConfirmDialog / modals must be above the viewer overlay. */
  z-index: 1300;
}

.lightbox[data-lightbox-kind="modal"] .content-card {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--app-modal-bg, var(--app-surface));
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
}
.lightbox[data-lightbox-kind="modal"] .filter-section {
  padding: 0;
  border-bottom: none;
  gap: 0.125rem;
}

.lightbox[data-lightbox-kind="modal"] .search-label {
  margin-bottom: 0.125rem;
}

/* Ensure inputs in modals (e.g. SelectPicker in Send To) use dark text and placeholder. */
.lightbox[data-lightbox-kind="modal"] .search-input,
.lightbox .search-input {
  color: var(--app-input-text);
}
.lightbox[data-lightbox-kind="modal"] .search-input::placeholder,
.lightbox .search-input::placeholder {
  color: var(--app-input-placeholder);
}

/* =========================================================================
   MODAL FORM (header + body + footer) — use for form modals like Send pictures,
   Edit terminal, Edit tag, etc. Same visual pattern: distinct header bar and
   footer bar with actions.
   ========================================================================= */
.modal-form {
  width: min(720px, 94vw);
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.25);
  background: var(--app-surface);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}
.modal-form-header {
  flex-shrink: 0;
  background: var(--app-header-bg);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.modal-form-header .modal-form-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-form-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.modal-form-header .lightbox-auto-button {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--app-header-text, var(--app-input-bg-tint));
  background: rgba(255, 255, 255, 0.06);
}
.modal-form-header .lightbox-auto-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
}
.modal-form-header .lightbox-auto-button .material-icons {
  font-size: 14px;
}

/* EDI destination editor — prevent horizontal scrollbar (minmax(0,1fr) + clip) */
.edi-editor-modal .modal-form-body {
  min-width: 0;
  overflow-x: hidden;
}
.edi-editor-modal .filter-section {
  min-width: 0;
}
.edi-editor-modal .search-input-wrapper {
  min-width: 0;
}
.edi-editor-modal .edi-modal-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.edi-editor-modal .edi-modal-checkbox-below {
  margin-top: 8px;
}
.modal-form-header .modal-form-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--app-header-text, var(--app-input-bg-tint));
}
.modal-form-header .modal-form-title .material-icons {
  font-size: 18px;
  color: var(--app-header-icon, var(--app-focus-border));
}
.modal-form-header .modal-form-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--app-header-icon-muted, var(--app-icon-muted));
  padding: 4px;
  display: flex;
  border-radius: 4px;
}
.modal-form-header .modal-form-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--app-header-text, var(--app-input-bg-tint));
}
.modal-form-header .filter-checkbox-item {
  margin: 0;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  color: var(--app-header-text, var(--app-input-bg-tint));
}
.modal-form-header .filter-checkbox-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.modal-form-header .filter-checkbox-item span {
  color: inherit;
}
.modal-form-header .filter-checkbox-item input:checked + span {
  color: var(--app-header-text, var(--app-input-bg-tint));
  font-weight: 600;
}
.modal-form-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-form-body > .gallery-subtitle {
  font-size: 13px;
  color: var(--app-text);
}
.modal-confirm-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--app-muted-text);
  cursor: pointer;
  user-select: none;
}
.modal-confirm-checkbox-row input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--app-link);
  cursor: pointer;
}
.test-result-status {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.test-result-status--success {
  color: var(--app-status-ok);
}
.test-result-status--error {
  color: var(--app-status-error);
}
/* Rule summary in test-result modal: card-style sections with icon + title */
.rule-summary {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rule-summary-section {
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 12px 14px;
}
.rule-summary-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.rule-summary-section-header .material-icons {
  font-size: 18px;
  color: var(--app-text-muted);
}
.rule-summary-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}
.rule-summary-section-count {
  font-size: 12px;
  color: var(--app-text-muted);
  margin: 0;
}
.rule-summary-section-header--with-link {
  gap: 10px;
}
.rule-summary-section-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--app-button-primary-bg);
  text-decoration: none;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.rule-summary-section-link:hover {
  background: var(--app-date-selected-bg);
  color: var(--app-button-primary-hover);
}
.rule-summary-section-link .material-icons {
  font-size: 14px;
  color: inherit;
}
.rule-summary-section-body {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--app-text);
}
.rule-summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rule-summary-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
}
.rule-summary-list li:last-child {
  margin-bottom: 0;
}
.rule-summary-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--app-text-muted);
}
/* EDI lookup rows: status badge + optional destinations / missing */
.rule-summary-list--edi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rule-summary-list--edi li {
  min-height: 32px;
  padding: 6px 10px;
  margin-bottom: 0;
  border-radius: 8px;
  padding-left: 10px;
  margin-left: -10px;
  margin-right: -10px;
  padding-right: 10px;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.rule-summary-list--edi li:hover {
  background: var(--app-table-row-hover);
  border-color: var(--app-border);
}
.rule-summary-list--edi li::before {
  display: none;
}
.rule-summary-row-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  flex-shrink: 0;
  padding: 2px 8px 2px 4px;
  margin: -2px 0;
  border-radius: 6px;
  background: var(--app-surface);
}
.rule-summary-row-status .material-icons {
  font-size: 16px;
  flex-shrink: 0;
}
.rule-summary-row-dest {
  font-size: 12px;
  color: var(--app-text-muted);
  margin: 0;
  line-height: 1.4;
}
.rule-summary-row-dest-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}
.rule-summary-row-dest-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rule-summary-row-dest-arrow {
  color: var(--app-text-muted);
  font-weight: 600;
  margin-right: 2px;
}
.rule-summary-row-dest-icon {
  font-size: 14px !important;
  color: var(--app-text-muted);
}
.rule-summary-row-dest-newmail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rule-summary-row-dest-to-cc {
  font-size: 11px;
  color: var(--app-text-muted);
  margin-left: 2px;
  font-weight: 400;
}
.rule-summary-row-missing {
  font-size: 12px;
  color: var(--app-status-error);
  margin: 0;
  line-height: 1.4;
}
.modal-form-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface-2);
}
.modal-form-footer-spacer {
  flex: 1;
}
/* Mail rule editor: sample XLSX in footer (left); spacer pushes Cancel/Save right */
.mail-rules-modal-footer-sample {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.mail-rules-modal-footer-sample .search-label {
  margin: 0;
  flex-shrink: 0;
}
.mail-rules-modal-footer-sample__filename {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(280px, 32vw);
}
.modal-form-footer .lightbox-auto-button,
.modal-form-footer .lightbox-save-button {
  padding: 6px 14px;
  font-size: 12px;
}
.modal-form--wide {
  width: min(980px, 94vw);
}

/* Processing states — Advanced dropdown (anchored popover, same header/body/footer as modal-form) */
.processing-states-advanced-anchor {
  position: relative;
}
.processing-states-advanced-popover.modal-form {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: min(420px, calc(100vw - 32px));
  min-width: 360px;
  margin: 0;
  max-height: min(520px, 72vh);
}
.processing-states-advanced-popover .processing-advanced-lock-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--app-text-secondary);
  line-height: 1.4;
}
.processing-states-advanced-popover .processing-advanced-lock-row .material-icons {
  font-size: 18px;
  color: var(--app-icon-muted);
  flex-shrink: 0;
}
.processing-states-advanced-popover .processing-advanced-empty-hint {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--app-text-secondary);
}
.processing-states-advanced-popover .processing-advanced-empty-hint .material-icons {
  font-size: 18px;
  color: var(--app-icon-muted);
  flex-shrink: 0;
}
.processing-states-advanced-popover
  .modal-form-footer
  .lightbox-save-button.processing-advanced-clear--success {
  background: var(--app-status-success);
  color: var(--app-surface);
  border-color: var(--app-status-success);
}
.processing-states-advanced-popover
  .modal-form-footer
  .lightbox-save-button.processing-advanced-clear--error {
  background: var(--app-status-error);
  color: var(--app-surface);
  border-color: var(--app-status-error);
}

/* Mail rules — spreadsheet batch reporting assistant */
.mail-rules-reporting-assistant {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-bg-secondary);
}
.mail-rules-reporting-assistant__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.mail-rules-reporting-assistant__head-icon {
  font-size: 28px;
  color: #93c5fd;
  flex-shrink: 0;
}
.mail-rules-reporting-assistant__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--app-text-primary, var(--app-text));
}
.mail-rules-reporting-assistant__subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--app-text-secondary);
  line-height: 1.45;
}
.mail-rules-reporting-assistant__guide {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-2, var(--app-bg-secondary));
}
.mail-rules-reporting-assistant__guide-summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-text-primary, var(--app-text));
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.mail-rules-reporting-assistant__guide-summary::-webkit-details-marker {
  display: none;
}
.mail-rules-reporting-assistant__steps {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 12px;
  color: var(--app-text-secondary);
  line-height: 1.6;
}
.mail-rules-reporting-assistant__vars {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--app-text-muted);
  line-height: 1.5;
}
.mail-rules-reporting-assistant__vars-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--app-text-secondary);
}
.mail-rules-reporting-assistant__var-code {
  font-family: var(--font-dm-mono, ui-monospace, monospace);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--app-surface-2, var(--app-bg-secondary));
  border: 1px solid var(--app-border);
  color: var(--app-text-primary, var(--app-text));
}
.mail-rules-reporting-assistant__var-code--block {
  display: block;
  margin-top: 4px;
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.45;
}
.mail-rules-reporting-assistant__section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
  display: block;
}
.mail-rules-reporting-assistant__grid {
  margin-top: 8px;
}
.mail-rules-reporting-assistant__cell-full {
  grid-column: 1 / -1;
}
.mail-rules-reporting-assistant__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--app-text-primary, var(--app-text));
  margin-bottom: 8px;
  cursor: pointer;
}
.mail-rules-reporting-assistant__hint {
  font-size: 11px;
  color: var(--app-text-muted);
  margin-top: 6px;
  display: block;
}
.mail-rules-reporting-assistant__textarea {
  width: 100%;
  min-height: 140px;
  font-family: var(--font-dm-mono, ui-monospace, monospace);
  font-size: 12px;
  resize: vertical;
  box-sizing: border-box;
}
.mail-rules-reporting-assistant__columns-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.mail-rules-reporting-assistant__btn-small {
  padding: 4px 10px;
  font-size: 11px;
}
.mail-rules-reporting-assistant__warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--app-surface-2, var(--app-bg-secondary));
  border: 1px solid var(--app-border);
  font-size: 12px;
  color: var(--app-text-primary, var(--app-text));
}
.mail-rules-reporting-assistant__warn .material-icons {
  font-size: 18px;
  color: var(--app-text-secondary);
  flex-shrink: 0;
}
.modal-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.modal-form-body .filter-section {
  margin: 0;
}

.permissions-dialog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.send-log-retry-modal {
  max-width: 500px;
}
.send-log-retry-list {
  margin: 0;
  padding-left: 20px;
  max-height: 280px;
  overflow-y: auto;
}
.send-log-retry-list li {
  margin-bottom: 12px;
}
.send-log-retry-item {
  font-size: 11px;
  color: var(--app-text-muted);
  line-height: 1.5;
}
.send-log-retry-item-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.send-log-retry-item-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.send-log-retry-item-icon {
  font-size: 14px;
  color: var(--app-icon-muted);
}
.send-log-retry-item-sep {
  color: var(--app-border);
}
.send-log-retry-item-text {
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-weight: 600;
  color: var(--app-input-text);
}
.send-log-retry-item-dest {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-left: 18px;
}
.send-log-retry-item-dest .send-log-retry-item-text {
  font-weight: 500;
}
.send-log-retry-item-meta {
  color: var(--app-text-muted);
  font-weight: 400;
  margin-left: 4px;
}
.send-log-retry-list-more {
  list-style: none;
  margin-left: -20px;
  padding: 6px 0 0;
  font-size: 12px;
  color: var(--app-text-muted);
  font-style: italic;
}
.send-log-retry-list-meta {
  color: var(--app-text-muted);
  margin-left: 8px;
}

.lightbox-chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #e2e8f0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.90) 0%, rgba(15, 23, 42, 0.10) 100%);
}

.lightbox-header-left,
.lightbox-header-center,
.lightbox-header-right {
  display: flex;
  align-items: center;
}

.lightbox-header-left {
  flex: 1;
  min-width: 0;
}

.lightbox-header-center {
  flex: 0 0 auto;
  justify-content: center;
}

.lightbox-header-right {
  flex: 1;
  justify-content: flex-end;
  gap: 0.75rem;
}

.lightbox-title {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lightbox-icon-button {
  border: 1.5px solid var(--app-border-strong);
  background: var(--app-surface);
  color: var(--app-text);
  padding: 0.4rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lightbox-icon-button:hover {
  background: var(--app-surface-2);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}

.lightbox-close-button {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  padding: 0.5rem;
  border-radius: 0.65rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lightbox-picture-wrapper {
  width: min(1200px, 94vw);
  height: min(78vh, 820px);
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-picture-layer {
  position: relative;
  transform-origin: center center;
}

.lightbox-picture {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.75rem;
}

.annotation-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  cursor: pointer;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.18);
}

.lightbox-nav-left {
  left: 1rem;
}

.lightbox-nav-right {
  right: 1rem;
}

.lightbox-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.lightbox-toolbar-group {
  display: inline-flex;
  gap: 0.35rem;
}

.lightbox-toolbar-divider {
  width: 1px;
  height: 24px;
  background: rgba(226, 232, 240, 0.25);
}

.lightbox-counter {
  font-size: 0.8rem;
  color: rgba(226, 232, 240, 0.9);
  min-width: 72px;
  text-align: center;
}

.lightbox-bottom-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
  width: min(1200px, 94vw);
  background: var(--app-surface);
  border-radius: 0.75rem;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.lightbox-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.lightbox-bottom-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-bottom-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.lightbox-slider-row {
  display: grid;
  grid-template-columns: 20px 92px 1fr;
  gap: 0.5rem;
  align-items: center;
}

.lightbox-slider-label {
  font-size: 0.8125rem;
  color: var(--app-text);
  font-weight: 600;
}

.lightbox-slider-icon {
  color: var(--app-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lightbox-slider {
  width: 100%;
}

.lightbox-auto-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1.5px solid var(--app-border-strong);
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lightbox-auto-button:hover {
  background: var(--app-surface-2);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}

.lightbox-auto-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lightbox-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  border-radius: 5px;
  padding: 3px 8px;
  background: var(--app-button-primary-bg);
  color: var(--app-button-primary-text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
}

.lightbox-save-button:hover {
  background: var(--app-button-primary-hover);
  border-color: var(--app-button-primary-hover);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.lightbox-save-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--app-button-secondary-hover-border);
  border-color: var(--app-button-secondary-hover-border);
}

/* [CR-20260409-T02] Unsaved-changes confirmation modal (inside lightbox viewer) */
.lightbox-unsaved-overlay {
  position: absolute;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  animation: lb-unsaved-fade-in 0.12s ease-out;
}

@keyframes lb-unsaved-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox-unsaved-dialog {
  width: min(380px, 90vw);
  background: var(--app-surface);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(2, 6, 23, 0.30);
  overflow: hidden;
  animation: lb-unsaved-scale-in 0.15s ease-out;
}

@keyframes lb-unsaved-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox-unsaved-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--app-header-bg, #0F172A);
  color: #F8FAFC;
  font-size: 13px;
  font-weight: 700;
}

.lightbox-unsaved-header .material-icons {
  font-size: 18px;
  color: #FBBF24;
}

.lightbox-unsaved-body {
  margin: 0;
  padding: 16px 20px 12px;
  font-size: 13px;
  color: var(--app-text-secondary);
  line-height: 1.5;
}

.lightbox-unsaved-error {
  margin: 0;
  padding: 0 20px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--app-status-error);
}

.lightbox-unsaved-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
}

.lightbox-unsaved-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.lightbox-unsaved-btn--discard {
  border: 1.5px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
}

.lightbox-unsaved-btn--discard:hover {
  background: var(--app-surface-2);
  border-color: var(--app-border-strong);
}

.lightbox-unsaved-btn--save {
  border: none;
  background: var(--app-button-primary-bg);
  color: var(--app-button-primary-text);
}

.lightbox-unsaved-btn--save:hover {
  background: var(--app-button-primary-hover);
}

.lightbox-unsaved-btn--save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Filter Panel Styles — match updated UI design */
.filter-panel {
  width: 280px;
  min-width: 280px;
  background: var(--app-surface);
  border-right: 1px solid var(--app-input-border);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.filter-panel-header {
  min-height: 62px;
  box-sizing: border-box;
  padding: 10px 14px;
  border-bottom: 1px solid var(--app-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  background: var(--app-surface);
}

.filter-panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--app-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-panel-title .material-icons {
  font-size: 13px;
  color: var(--app-input-placeholder);
}

/* Narrow gallery: filter body hidden after scrolling case list; user expands via header button */
.filter-panel.filter-panel--scroll-collapsed .filter-section-container,
.filter-panel.filter-panel--scroll-collapsed .filter-panel-content,
.filter-panel.filter-panel--scroll-collapsed .filter-panel-footer {
  display: none !important;
}

.filter-panel.filter-panel--scroll-collapsed .filter-panel-header {
  border-bottom: none;
  min-height: 52px;
}

.filter-panel-header.filter-panel-header--scroll-collapsed {
  justify-content: space-between;
  gap: 10px;
}

.filter-panel-expand-collapsed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 8px 12px;
  min-height: 40px;
  border-radius: 7px;
  border: 1.5px solid var(--app-input-border);
  background: var(--app-input-bg-tint);
  color: var(--app-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.filter-panel-expand-collapsed-btn:hover {
  border-color: var(--app-focus-border);
  background: var(--app-surface);
}

.filter-panel-expand-collapsed-btn:focus-visible {
  outline: 2px solid var(--app-focus-border);
  outline-offset: 2px;
}

.filter-panel-expand-collapsed-btn .material-icons {
  font-size: 18px;
  color: var(--app-focus-border);
}

.filter-mode-toggle {
  display: flex;
  background: var(--app-divider);
  border-radius: 5px;
  padding: 2px;
  border: none;
}

.filter-mode-button {
  border: none;
  background: transparent;
  color: var(--app-input-placeholder);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
  font-family: inherit;
}

.filter-mode-button:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--app-input-placeholder);
}

.filter-mode-button.active {
  background: var(--app-surface);
  color: #1E40AF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.container-code {
  font-family: var(--font-dm-mono), "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.filter-highlight {
  background: var(--app-highlight-bg);
  color: var(--app-highlight-text);
  border-radius: 0.25rem;
  padding: 0 0.125rem;
}

.filter-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* Container code block: label + input + results summary */
.filter-section-container {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--app-divider);
  flex-shrink: 0;
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--app-divider);
  flex-shrink: 0;
}

.filter-section:last-of-type {
  border-bottom: none;
}

/* Section label (CONTAINER CODE, TERMINALS, CASE DATES) */
.filter-section-label {
  font-size: var(--app-filter-label-font-size);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--app-icon-muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

/* Foldable advanced filter sections */
.filter-section--foldable {
  gap: 0;
  padding-top: 4px;
  padding-bottom: 4px;
}

.filter-section-fold-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 2px 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.filter-section-fold-header .filter-section-label {
  margin-bottom: 0;
  font-size: var(--app-filter-label-font-size);
  font-weight: 700;
}

.filter-section-fold-icon {
  font-size: 18px;
  color: var(--app-icon-muted);
  flex-shrink: 0;
}

.filter-section-fold-body {
  padding-top: 2px;
  padding-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-section-hint {
  margin: 2px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--app-icon-muted);
}

/* Nested filter-section (e.g. SelectPicker) in fold body: no horizontal padding so width matches date inputs (251px) */
.filter-section-fold-body .filter-section {
  padding-left: 0;
  padding-right: 0;
}

.filter-section-label-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 5px;
  font-size: var(--app-filter-label-font-size);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--app-icon-muted);
  text-transform: uppercase;
}

.filter-guest-tag-scope-hint {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--app-input-placeholder);
}

.filter-results-summary {
  margin-top: 6px;
  font-size: 11px;
  color: var(--app-input-placeholder);
  display: flex;
  align-items: center;
  gap: 5px;
}

.filter-results-summary strong {
  font-weight: 700;
  color: #1E40AF;
}

/* Container code: outer row = input box + search button side by side */
.filter-container-row {
  display: flex;
  gap: 6px;
}

/* The input box (search icon + input + clear ×) */
.filter-container-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--app-input-bg-tint);
  border: 1.5px solid var(--app-input-border);
  border-radius: 7px;
  padding: 0 9px;
  height: 36px;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.filter-container-box:focus-within {
  border-color: var(--app-focus-border);
}

/* Expanded state: fixed height so textarea can scroll, content aligned to top */
.filter-container-box--textarea {
  align-items: flex-start;
  height: 100px;
  min-height: 100px;
  padding-top: 8px;
  padding-bottom: 8px;
  overflow: hidden;
}

.filter-container-box--textarea .filter-container-box-icon {
  padding-top: 2px;
}

.filter-container-box-icon {
  flex-shrink: 0;
  color: var(--app-icon-muted);
  display: flex;
  align-items: center;
}

.filter-container-box-input {
  flex: 1;
  min-width: 0;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 12px;
  color: #111827 !important;
  font-weight: 500;
  padding: 0;
  height: auto;
}

.filter-container-box-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.filter-container-box-input::placeholder {
  color: var(--app-icon-muted);
}

.filter-container-box-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--app-icon-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  flex-shrink: 0;
  transition: color 150ms ease;
}

.filter-container-box-clear:hover {
  color: var(--app-input-placeholder);
}

/* Toggle for single vs multiple container codes */
.filter-container-expand-toggle {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 500;
  color: var(--app-link);
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
}

.filter-container-expand-toggle:hover {
  color: var(--app-link-hover);
}

.filter-container-expand-toggle[aria-pressed="true"] {
  font-weight: 600;
}

/* Textarea for multiple container codes (same box as input), 5 lines, scrollable */
.filter-container-box-textarea {
  resize: none;
  flex: 1;
  min-height: 0; /* allow shrink so overflow scroll works in flex */
  overflow: auto;
  font-family: var(--font-dm-mono), "DM Mono", ui-monospace, monospace;
  font-size: 12px;
}

/* Inline Search button next to input */
.filter-container-search-btn {
  background: var(--app-button-primary-bg);
  border: none;
  border-radius: 7px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-button-primary-text);
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start; /* keep default height when row has tall textarea */
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  white-space: nowrap;
  min-height: 36px;
  box-sizing: border-box;
}

.filter-container-search-btn:hover {
  background: var(--app-button-primary-hover);
}

.filter-container-search-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Thin 4px scrollbar for all scrollable filter panel areas */
.filter-panel-content,
.filter-list,
.filter-checkbox-list {
  scrollbar-width: thin;
  scrollbar-color: var(--app-border) transparent;
}

.filter-panel-content::-webkit-scrollbar,
.filter-list::-webkit-scrollbar,
.filter-checkbox-list::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.filter-panel-content::-webkit-scrollbar-track,
.filter-list::-webkit-scrollbar-track,
.filter-checkbox-list::-webkit-scrollbar-track {
  background: transparent;
}

.filter-panel-content::-webkit-scrollbar-thumb,
.filter-list::-webkit-scrollbar-thumb,
.filter-checkbox-list::-webkit-scrollbar-thumb {
  background: var(--app-border);
  border-radius: 4px;
}

.filter-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 148px;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  padding: 0 6px;
}

.filter-list--terminals {
  max-height: 190px;
  overflow-y: auto;
}

.filter-list--dates {
  max-height: 160px;
  overflow-y: auto;
}

/* Container row: checkbox + code + count chip */
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.filter-row:hover {
  background: var(--app-input-bg-tint);
}

.filter-row--active {
  background: #EEF2FF;
}

.filter-row-checkbox {
  width: 15px;
  height: 15px;
  border-radius: 3.5px;
  flex-shrink: 0;
  border: 1.5px solid var(--app-border);
  background: var(--app-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.filter-row--active .filter-row-checkbox {
  background: var(--app-button-primary-bg);
  border-color: var(--app-button-primary-bg);
}

.filter-row-checkbox svg {
  width: 8px;
  height: 8px;
  stroke: white;
}

.filter-row-label {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--app-input-text);
}

.filter-row-label--mono {
  font-family: var(--font-dm-mono), "DM Mono", monospace;
}

.filter-row--active .filter-row-label {
  font-weight: 600;
  color: #1E40AF;
}

.filter-row-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--app-icon-muted);
  background: var(--app-divider);
  border-radius: 9px;
  padding: 1px 6px;
  flex-shrink: 0;
}

.filter-row--active .filter-row-count {
  color: #1E40AF;
  background: #DBEAFE;
}

.filter-item {
  padding: 6px 8px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--app-input-text);
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-dm-mono), "DM Mono", monospace;
}

.filter-item:hover {
  background: var(--app-input-bg-tint);
}

.filter-item-active {
  background: #EEF2FF;
  font-weight: 600;
  color: #1E40AF;
}

.filter-item-more {
  padding: 6px 8px;
  color: var(--app-icon-muted);
  font-size: 11px;
  font-style: italic;
  text-align: center;
}

.filter-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overscroll-behavior: contain;
  padding: 0 6px;
  max-height: 190px;
  overflow-y: auto;
}

.filter-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.filter-checkbox-item:hover {
  background: var(--app-input-bg-tint);
}

.filter-checkbox-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--app-button-primary-bg);
}

.filter-checkbox-item span {
  font-size: 12px;
  color: var(--app-button-secondary-text);
  user-select: none;
}

.filter-checkbox-item input:checked + span {
  font-weight: 600;
  color: #1E40AF;
}

/* Three-panel layout — fills remaining height inside .main-panel */
.gallery-layout {
  display: flex;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.gallery-content-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--app-bg);
}

.gallery-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 20px;
  background: #F0F2F5;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.gallery-scroll-area::-webkit-scrollbar {
  display: none !important;
  width: 0;
  height: 0;
}

/* [CR-20260409-T02] [CR-20260409-T03] Mobile tenant gallery: compact header, stacked filters, no horizontal overflow */
@media (max-width: 768px) {
  .app-header {
    flex-wrap: wrap;
    height: auto;
    min-height: 48px;
    padding: 8px 12px;
    row-gap: 8px;
  }

  .app-header-divider {
    display: none;
  }

  .app-header-title .app-header-logo-container {
    max-width: min(244px, 58vw);
  }

  .app-header-subtitle {
    flex-basis: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .app-header-tenant-secondary {
    display: none !important;
  }

  .app-header-subtitle .user-menu-button {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
  }

  .app-header-subtitle button[type="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    box-sizing: border-box;
  }

  .main-panel > .gallery-layout {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden;
    min-height: 0;
  }

  /* height: auto overrides .filter-panel { height: 100% } — otherwise when scroll-collapsed
     removes max-height, the panel stretches to full column height and hides case cards (iOS/mobile). */
  .main-panel > .gallery-layout > .filter-panel {
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: 48vh;
    border-right: none;
    border-bottom: 1px solid var(--app-input-border);
    flex-shrink: 0;
  }

  .main-panel > .gallery-layout > .filter-panel.filter-panel--scroll-collapsed {
    max-height: none;
  }

  .main-panel > .gallery-layout > .gallery-content-panel {
    flex: 1;
    min-height: 0;
    min-width: 0;
  }

  .main-panel > .gallery-layout .filter-panel .filter-grid,
  .main-panel > .gallery-layout .filter-panel .filter-grid--cols-4,
  .main-panel > .gallery-layout .filter-panel .filter-grid--cols-5,
  .main-panel > .gallery-layout .filter-panel .filter-grid--cols-6 {
    grid-template-columns: minmax(0, 1fr);
  }

  .main-panel > .gallery-layout .filter-panel .filter-cell {
    min-width: 0;
  }

  .gallery-scroll-area {
    padding: 12px 14px;
  }

  .gallery-header {
    flex-wrap: wrap;
    min-width: 0;
  }

  .container-section,
  .gallery-grid {
    min-width: 0;
  }
}

/* [CR-20260409-T05] Send-to modal: desktop max-height guard */
.send-to-modal-card {
  max-height: min(92dvh, 100vh);
  display: flex;
  flex-direction: column;
}

.send-to-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* [CR-20260409-T11] Chip touch targets inside send modal */
.send-to-modal-body .app-chip-button {
  min-height: 36px;
}

/* [CR-20260409-T05] Send-to modal: narrow screens — full width, safe areas, stacked footer */
@media (max-width: 768px) {
  .send-to-modal-card {
    width: 100% !important;
    max-width: 100vw;
    margin: 0 !important;
    border-radius: 0 !important;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .send-to-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .send-to-modal-estimate-row {
    grid-template-columns: 1fr !important;
  }

  .send-to-modal-footer {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .send-to-modal-footer button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  /* [CR-20260409-T11] Ensure chip buttons are touch-friendly on mobile */
  .send-to-modal-body .app-chip-button {
    min-height: 44px;
  }
}

.gallery-metadata-panel {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  background: var(--app-surface);
  color: var(--app-text);
  border-left: 2px solid var(--app-border);
  /* Keep below the fullscreen lightbox viewer (z-index: 1100) so nav arrows are clickable. */
  position: relative;
  z-index: 50;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

.gallery-metadata-panel::-webkit-scrollbar,
.gallery-metadata-panel::-webkit-scrollbar-track,
.gallery-metadata-panel::-webkit-scrollbar-thumb {
  display: none !important; /* Chrome, Safari, Opera */
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Ensure scrollbars are hidden on all child elements within metadata panel */
.gallery-metadata-panel * {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

.gallery-metadata-panel *::-webkit-scrollbar,
.gallery-metadata-panel *::-webkit-scrollbar-track,
.gallery-metadata-panel *::-webkit-scrollbar-thumb {
  display: none !important; /* Chrome, Safari, Opera */
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Latest Cases Drawer */
.latest-cases-drawer-backdrop {
  position: fixed;
  top: 48px;
  left: 0;
  right: 320px;
  bottom: 0;
  background: transparent;
  z-index: 1000;
  pointer-events: none;
}

.latest-cases-drawer-backdrop[data-open="true"] {
  pointer-events: auto;
}

.latest-cases-drawer {
  position: fixed;
  right: 0;
  top: 48px;
  bottom: 0;
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  z-index: 1001;
  background: var(--app-surface);
  border-left: 1px solid var(--app-border);
  border-top-left-radius: 12px;
  box-shadow: -4px 0 24px rgba(2, 6, 23, 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-sizing: border-box;
}

.latest-cases-drawer[data-open="true"] {
  transform: translateX(0);
}

.latest-cases-drawer-header {
  min-height: 62px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 1.25rem;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface);
  flex-shrink: 0;
}

.latest-cases-drawer-header .lightbox-icon-button {
  background: none;
  border: none;
  box-shadow: none;
  padding: 4px;
  border-radius: 4px;
  color: var(--app-icon-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.latest-cases-drawer-header .lightbox-icon-button:hover {
  background: var(--app-surface-2);
  color: var(--app-text);
  border: none;
}

.latest-cases-drawer-header .lightbox-icon-button .material-icons {
  font-size: 18px;
}

.latest-cases-drawer-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  overscroll-behavior: contain;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

.latest-cases-drawer-content::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
  width: 0;
  height: 0;
}

.latest-cases-drawer-content-inner {
  padding: 0.5rem 0;
  width: 100%;
}

.latest-cases-drawer-footer {
  flex-shrink: 0;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface);
  display: flex;
  justify-content: center;
}

.latest-cases-drawer-footer .latest-cases-view-all-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--app-text-secondary);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.latest-cases-drawer-footer .latest-cases-view-all-btn:hover {
  background: var(--app-table-row-hover);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}

/* Horizontal flex row: [left: code+date] [badge] [ago] */
.latest-case-item {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  text-align: left;
  padding: 9px 16px;
  border: 0 !important;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: var(--app-surface);
  cursor: pointer;
  transition: background-color 0.1s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
}

/* thin separator between items */
.latest-case-item + .latest-case-item {
  border-top: 1px solid var(--app-divider) !important;
}

.latest-case-item:hover,
.latest-case-item:focus-within {
  background-color: var(--app-row-hover-solid) !important;
}

.latest-case-item:focus-visible {
  outline: 2px solid var(--app-button-primary-bg);
  outline-offset: -2px;
}

/* Left column: container code above, date below */
.latest-case-item-left {
  flex: 1;
  min-width: 0;
}

.latest-case-item-container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--app-text);
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  letter-spacing: 0.03em;
}

.latest-case-item-row2 {
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  color: var(--app-text-muted);
  margin-top: 2px;
}

/* badge is a direct sibling of .latest-case-item — no wrapper */
.latest-case-item-ago {
  font-size: 10px;
  font-weight: 400;
  color: var(--app-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Additional button styles for better visibility */
button.text-sm {
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--app-border-strong);
  border-radius: 0.5rem;
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

button.text-sm:hover {
  background: var(--app-surface-2);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}

/* Improve input visibility in forms */
input[type="text"]:not(.filter-container-box-input):not(.dp-input),
input[type="password"],
input[type="email"],
input[type="date"],
textarea {
  border: 1.5px solid var(--app-input-border) !important;
  color: var(--app-input-text) !important;
  background: var(--app-input-bg-tint) !important;
}

/* Ensure date input calendar picker icon is visible and styled for all themes */
input[type="date"] {
  padding-right: 3.25rem !important;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  width: 28px;
  height: 28px;
  margin-right: 0.6rem;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.3);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 0.7;
}

/* For Firefox */
input[type="date"]::-moz-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  width: 28px;
  height: 28px;
  margin-right: 0.6rem;
}

input[type="text"]:focus:not(.filter-container-box-input):not(.dp-input),
input[type="password"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
textarea:focus {
  border-color: var(--app-focus-border) !important;
  box-shadow: none !important;
}

/* Readonly textarea in upgrade result modal - thin border only */
.upgrade-result-textarea {
  border: 1px solid var(--app-lightbox-edit-border) !important;
  outline: none !important;
  box-shadow: none !important;
}
.upgrade-result-textarea:focus {
  border: 1px solid var(--app-lightbox-edit-border) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Improve checkbox visibility */
input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  appearance: none;
  -webkit-appearance: none;
  background: var(--app-input-bg);
  border: 2px solid var(--app-border-strong);
  border-radius: 0.25rem;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  margin: 0;
  vertical-align: middle;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  transform: scale(0);
  transform-origin: center;
  transition: transform 120ms ease-in-out;
  clip-path: polygon(14% 44%, 0 61%, 40% 100%, 100% 18%, 84% 0, 40% 62%);
  background: var(--app-surface);
}

input[type="checkbox"]:checked {
  background: var(--app-button-primary-bg);
  border-color: var(--app-button-primary-bg);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--app-focus-ring);
}

/* Improve file input visibility */
input[type="file"] {
  padding: 0.75rem;
  border: 2px dashed var(--app-border-strong);
  border-radius: 0.5rem;
  background: var(--app-surface-2);
  color: var(--app-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

input[type="file"]:hover {
  border-color: var(--app-border-strong);
  background: var(--app-surface-2);
}

/* File input as "Choose File" button: hide native input, show label as button with centered text */
.file-input-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--app-border, #e2e8f0);
  border-radius: 7px;
  background: var(--app-surface-2, #f8fafc);
  color: var(--app-text, #1e293b);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  max-width: 280px;
}

.file-input-button:hover {
  border-color: var(--app-border-strong);
  background: var(--app-surface-2);
}

.file-input-button input[type="file"] {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
  padding: 0;
  border: none;
  margin: 0;
}

.file-input-button-text {
  display: inline-flex;
  align-items: center;
}

/* Improve menu/dropdown visibility */
[role="menu"] {
  background: var(--app-menu-bg) !important;
  border: 2px solid var(--app-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[role="menuitem"] {
  color: var(--app-text) !important;
}

[role="menuitem"]:hover {
  background: var(--app-surface-2) !important;
  color: var(--app-text) !important;
}

/* =========================================================================
   USAGE DASHBOARD — summary cards and stat indicators
   ========================================================================= */

.usage-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.usage-stat-card {
  padding: 14px 16px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.usage-stat-card .usage-stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-text-muted);
}

.usage-stat-card .usage-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
}

.usage-stat-card .usage-stat-suffix {
  font-size: 0.75rem;
  color: var(--app-text-muted);
  font-weight: 400;
}

/* Spinner animation for upload progress */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Upload modal — full-surface busy state (client prep + network) */
.upload-modal-busy-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--app-surface) 82%, transparent);
  backdrop-filter: blur(3px);
}

.upload-modal-indeterminate-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  overflow: hidden;
  background: var(--app-divider);
}

.upload-modal-indeterminate-bar {
  height: 100%;
  width: 42%;
  border-radius: 0 2px 2px 0;
  background: var(--app-focus-border);
  animation: upload-modal-indeterminate-slide 1.1s ease-in-out infinite;
}

@keyframes upload-modal-indeterminate-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(340%);
  }
}

.upload-modal-busy-icon {
  font-size: 2.5rem !important;
  color: var(--app-focus-border);
  animation: spin 1.4s linear infinite;
  margin-top: 0.5rem;
}

.upload-modal-busy-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--app-input-text);
  max-width: 26rem;
  line-height: 1.35;
}

.upload-modal-busy-hint {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-text-muted);
  max-width: 22rem;
  line-height: 1.45;
}

/* ── Admin Login Page ── */
.admin-login-page {
  max-width: none;
}

.admin-login-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  border: 1px solid var(--app-callout-warning-border);
  background: var(--app-callout-warning-bg);
  color: var(--app-callout-warning-text);
}

.admin-login-error {
  border-radius: 0.375rem;
  border: 2px solid var(--app-callout-error-border, var(--app-status-error));
  background: var(--app-callout-error-bg, color-mix(in srgb, var(--app-status-error) 8%, transparent));
  padding: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--app-status-error);
}

.admin-login-forgot-link {
  font-size: 0.875rem;
  text-decoration: underline;
  color: var(--app-link);
  background: none;
  border: none;
  cursor: pointer;
}

.admin-login-forgot-link:hover {
  color: var(--app-button-primary-hover);
}

.admin-login-forgot-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── MFA / TOTP [CR-20260409] ── */

.mfa-setup-instruction {
  font-size: 13px;
  color: var(--app-text-secondary);
  margin: 0 0 16px;
  text-align: center;
}

.mfa-qr-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.mfa-secret-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 16px;
}

.mfa-secret-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--app-text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.mfa-secret-toggle-btn:hover {
  color: var(--app-text-secondary);
  background: var(--app-bg-subtle, #f1f5f9);
}

.mfa-secret-code {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--app-text);
  background: var(--app-bg-subtle, #f1f5f9);
  padding: 10px 16px;
  border-radius: 8px;
  word-break: break-all;
  text-align: center;
  user-select: all;
}

.mfa-code-input-group {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
}

.mfa-code-input-cell {
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  font-family: "DM Mono", monospace;
  border: 1.5px solid var(--app-border, #e2e8f0);
  border-radius: 8px;
  background: var(--app-input-bg, #f8fafc);
  color: var(--app-text);
  outline: none;
  transition: border-color 0.15s;
}

.mfa-code-input-cell:focus {
  border-color: var(--app-accent, #93c5fd);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.mfa-code-input-cell:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mfa-error {
  text-align: center;
  font-size: 13px;
  color: var(--app-status-error);
  margin: 8px 0 0;
}

.mfa-settings-section {
  padding: 0 20px 20px;
}

.mfa-settings-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--app-text);
  margin: 0 0 16px;
}

.mfa-settings-heading .material-icons {
  font-size: 20px;
  color: var(--app-text-muted);
}

.mfa-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  margin-bottom: 16px;
}

.mfa-status-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--app-text);
}

.mfa-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mfa-status-badge--on {
  background: #dcfce7;
  color: #166534;
}

.mfa-status-badge--off {
  background: var(--app-bg-subtle, #f1f5f9);
  color: var(--app-text-muted);
}

.mfa-disabled-notice {
  font-size: 13px;
  color: var(--app-text-muted);
  margin: 0;
  padding: 12px 16px;
  background: var(--app-bg-subtle, #f1f5f9);
  border-radius: 8px;
}

.mfa-success-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 0 20px;
  font-size: 13px;
  font-weight: 500;
  color: #166534;
  background: #dcfce7;
  border-radius: 8px;
}

.mfa-error-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 0 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--app-status-error);
  background: #fef2f2;
  border-radius: 8px;
}

.mfa-method-selector {
  display: flex;
  gap: 10px;
}

.mfa-method-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--app-border, #e2e8f0);
  border-radius: 20px;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--app-text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.mfa-method-option:hover {
  border-color: var(--app-accent, #93c5fd);
}

.mfa-method-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mfa-method-option--active {
  border-color: #2563eb;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.05);
}

.mfa-method-option .material-icons {
  font-size: 16px;
}

.mfa-method-check {
  font-size: 14px !important;
  color: #2563eb;
}

/* ======================================================================
   Signup page (public, embeddable)
   ====================================================================== */

.signup-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--app-bg, #f8fafc);
}

.signup-card {
  width: 100%;
  max-width: 440px;
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-border, #e2e8f0);
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.signup-title {
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--app-text, #1e293b);
}

.signup-subtitle {
  margin: 0 0 20px;
  font-size: 0.875rem;
  color: var(--app-text-secondary, #64748b);
  line-height: 1.5;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.signup-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.signup-field label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--app-text, #1e293b);
}

.signup-field input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--app-border, #e2e8f0);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--app-text, #1e293b);
  background: var(--app-surface, #fff);
  outline: none;
  transition: border-color 0.15s;
}

.signup-field input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.signup-domain-input {
  display: flex;
  align-items: stretch;
}

.signup-domain-input input {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.signup-domain-suffix {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--app-bg-secondary, #f1f5f9);
  border: 1px solid var(--app-border, #e2e8f0);
  border-left: none;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  font-size: 0.8125rem;
  color: var(--app-text-secondary, #64748b);
  white-space: nowrap;
}

.signup-field-hint {
  font-size: 0.75rem;
  color: var(--app-text-secondary, #94a3b8);
}

.signup-domain-status {
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 2px;
}
.signup-domain-status.checking {
  color: var(--app-text-secondary, #94a3b8);
}
.signup-domain-status.available {
  color: var(--app-success, #16a34a);
}
.signup-domain-status.taken {
  color: var(--app-error, #ef4444);
}

.signup-error {
  padding: 8px 12px;
  border-radius: 6px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.8125rem;
  border: 1px solid #fecaca;
}

.signup-submit {
  height: 40px;
  border: none;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s;
  text-align: center;
  padding: 0 20px;
}

.signup-submit:hover:not(:disabled) {
  background: #1d4ed8;
}

.signup-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.signup-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: signup-spin 0.6s linear infinite;
}

@keyframes signup-spin {
  to { transform: rotate(360deg); }
}

.signup-icon-spin {
  animation: signup-spin 1.5s linear infinite;
}

.signup-success-icon {
  margin-bottom: 16px;
}

.signup-hint {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--app-text-secondary, #94a3b8);
}

.signup-login-link {
  margin: 16px 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--app-text-secondary, #64748b);
}

.signup-login-link a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}

.signup-login-link a:hover {
  text-decoration: underline;
}

.signup-footer {
  margin-top: 24px;
  font-size: 0.75rem;
  color: var(--app-text-secondary, #94a3b8);
  text-align: center;
}

/* [CR-20260426-T03] Session timeout warning modal */
.session-timeout-modal {
  width: min(380px, 90vw);
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.25);
}

.session-timeout-modal-header {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 20px;
  background: var(--app-header-bg, #0f172a);
  display: flex;
  align-items: center;
}

.session-timeout-modal-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
}

.session-timeout-modal-header-title .material-icons {
  font-size: 18px;
  color: #93c5fd;
}

.session-timeout-modal-body {
  padding: 24px 20px;
  text-align: center;
}

.session-timeout-modal-countdown {
  font-size: 48px;
  font-weight: 700;
  color: var(--app-danger, #dc2626);
  line-height: 1;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

.session-timeout-modal-message {
  font-size: 13px;
  color: var(--app-text-secondary, #64748b);
  margin: 0;
  line-height: 1.5;
}

.session-timeout-modal-footer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: 12px 20px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
}

.session-timeout-modal-footer .lightbox-save-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.session-timeout-modal-footer .lightbox-save-button .material-icons {
  font-size: 16px;
}

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/viewer.css ***!
  \************************************************************************************************************************************************************************************************************************************************************/
/* Viewer-only (LightboxEditor) styles, extracted from the v1 mockup and scoped
   so they do not affect other modal/lightbox usages elsewhere in the app. */

/* Screen-reader-only content (e.g. live region for image counter) */
.lightbox-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------- */
/* Lightbox viewer (v1 look) - scoped to LightboxEditor only                  */
/* -------------------------------------------------------------------------- */
.lightbox[data-lightbox-kind="viewer"] {
  background-color: var(--app-lightbox-overlay);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-chrome {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  background: var(--app-lightbox-chrome-bg);
  border-bottom: 1px solid var(--app-lightbox-chrome-border);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-icon-button {
  background: var(--app-lightbox-button-bg);
  border: none;
  color: var(--app-lightbox-button-text);
  width: 2rem;
  height: 2rem;
  padding: 0.4rem;
  border-radius: 0.375rem;
  transition: background-color 150ms ease, color 150ms ease;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-icon-button:hover {
  background: var(--app-lightbox-button-hover);
  color: var(--app-lightbox-button-text-hover);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-play-pause-button {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--app-lightbox-play-button-bg);
  border: 1px solid var(--app-lightbox-play-button-border);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-play-pause-button:hover {
  background: var(--app-lightbox-play-button-hover-bg);
  border-color: var(--app-lightbox-play-button-hover-border);
  color: var(--app-lightbox-button-text-hover);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-icon-button[data-active="true"] {
  background: var(--app-lightbox-button-active-bg);
  color: var(--app-lightbox-button-text-hover);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-toolbar {
  background: var(--app-lightbox-toolbar-bg);
  border-radius: 0.5rem;
  padding: 0.25rem;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-toolbar-divider {
  height: 1.5rem;
  background: var(--app-lightbox-toolbar-divider);
  margin: 0 0.25rem;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-close-button {
  background: var(--app-lightbox-button-bg);
  border: none;
  color: var(--app-lightbox-button-text);
  width: 2rem;
  height: 2rem;
  padding: 0.4rem;
  border-radius: 0.375rem;
  transition: background-color 150ms ease, color 150ms ease;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-close-button:hover {
  background: var(--app-lightbox-close-button-hover-bg);
  color: var(--app-lightbox-close-button-hover-text);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-counter {
  font-size: 0.95rem;
  color: var(--app-lightbox-counter-text);
  font-weight: 500;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-picture-wrapper {
  --lightbox-chip-strip-height: 2rem;
  --lightbox-wrapper-padding: 0.6rem;
  --lightbox-chip-margin: 1rem;
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  padding: var(--lightbox-wrapper-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-lightbox-picture-wrapper-bg);
  /* Strict clip: picture box has fixed margins to header/chips and filmstrip; image never overflows */
  isolation: isolate;
  contain: paint;
}

/* Fixed-size clip box: zoom happens inside it, box never expands */
.lightbox[data-lightbox-kind="viewer"] .lightbox-picture-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When chips are visible: reserve strip + margin, then add 50% more space from header to picture box. */
.lightbox[data-lightbox-kind="viewer"] .lightbox-picture-wrapper[data-has-metadata="true"] {
  --lightbox-top-with-chips: calc(var(--lightbox-wrapper-padding) + var(--lightbox-chip-strip-height) + var(--lightbox-chip-margin));
  padding-top: calc(var(--lightbox-top-with-chips) * 1.5);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-picture-layer {
  touch-action: none;
  user-select: none;
  /* Fill clip box so zoom/pan/rotate stay inside; layer size fixed, transform clipped */
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-picture {
  box-shadow: 0 18px 40px var(--app-lightbox-picture-shadow);
  max-width: var(--lb-avail-w, 100%);
  max-height: var(--lb-avail-h, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}

/* Video placeholder icon — shown when poster extraction fails or while loading */
.video-poster-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d1117;
  color: #94a3b8;
}

.video-poster-placeholder-icon {
  width: clamp(40px, 8%, 72px);
  height: clamp(40px, 8%, 72px);
  flex-shrink: 0;
}

/* Wrapper used when showPosterWhileLoading is active.
   Gets className="lightbox-picture" from the viewer, so max-width/max-height are already set.
   aspect-ratio + overflow ensure the poster and player fill the same box. */
.lightbox[data-lightbox-kind="viewer"] .authed-video-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0d1117;
  aspect-ratio: 16 / 9;
}

.lightbox[data-lightbox-kind="viewer"] .authed-video-poster-underlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: none !important;
}

.lightbox[data-lightbox-kind="viewer"] .authed-video-player {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox[data-lightbox-kind="viewer"] .authed-video-player--hidden {
  opacity: 0;
}

/* Also cover the video-poster-placeholder in lightbox context */
.lightbox[data-lightbox-kind="viewer"] .video-poster-placeholder {
  aspect-ratio: 16 / 9;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-edit {
  position: relative;
  flex: 0 0 auto;
  padding: 0.75rem 1.5rem 1rem;
  background-color: var(--app-lightbox-edit-bg);
  border-top: 1px solid var(--app-lightbox-edit-border);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--app-lightbox-edit-text);
  font-size: 0.8rem;
  backdrop-filter: blur(8px);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-slider-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--app-lightbox-toolbar-bg);
  border-radius: 0.5rem;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-slider-icon {
  color: var(--app-lightbox-slider-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-slider-label {
  min-width: 75px;
  font-size: 0.8rem;
  color: var(--app-lightbox-slider-label);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-slider {
  width: 180px;
  height: 4px;
  border-radius: 2px;
  background: var(--app-lightbox-slider-bg);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--app-lightbox-slider-thumb);
  cursor: pointer;
  box-shadow: 0 2px 4px var(--app-lightbox-slider-thumb-shadow);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--app-lightbox-slider-thumb);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px var(--app-lightbox-slider-thumb-shadow);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-auto-button {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid var(--app-lightbox-auto-button-border);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--app-lightbox-auto-button-bg);
  color: var(--app-lightbox-auto-button-text);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-auto-button:hover {
  background: var(--app-lightbox-auto-button-hover-bg);
  border-color: var(--app-lightbox-auto-button-text);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-restore-button {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid var(--app-lightbox-restore-button-border);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--app-lightbox-restore-button-bg);
  color: var(--app-lightbox-restore-button-text);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-restore-button:hover {
  background: var(--app-lightbox-restore-button-hover-bg);
  border-color: var(--app-lightbox-restore-button-hover-border);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-restore-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-inline-error {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--app-lightbox-error-bg);
  border: 1px solid var(--app-lightbox-error-border);
  color: var(--app-lightbox-error-text);
  font-size: 0.875rem;
  line-height: 1.25rem;
  word-break: break-word;
}

/* -------------------------------------------------------------------------- */
/* New layout: top bar (dark), body row, filmstrip, bottom bar                */
/* -------------------------------------------------------------------------- */
.lightbox[data-lightbox-kind="viewer"] .lightbox-chrome-new {
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  height: 48px;
  background: var(--app-lightbox-chrome-new-bg);
  border-bottom: 1px solid var(--app-lightbox-chrome-new-border);
  flex-shrink: 0;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-metadata-badges-overlay {
  position: absolute;
  top: var(--lightbox-wrapper-padding);
  left: 0;
  display: flex;
  align-items: center;
  z-index: 10;
  min-height: var(--lightbox-chip-strip-height);
  padding: 0 8px;
  pointer-events: none;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-metadata-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-metadata-chip {
  pointer-events: auto;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-breadcrumb-sep {
  color: var(--app-lightbox-breadcrumb-sep);
  font-size: 12px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-breadcrumb-container,
.lightbox[data-lightbox-kind="viewer"] .lightbox-breadcrumb-date {
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--app-lightbox-breadcrumb-text);
  letter-spacing: 0.04em;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-header-center {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-download-btn,
.lightbox[data-lightbox-kind="viewer"] .lightbox-delete-btn,
.lightbox[data-lightbox-kind="viewer"] .lightbox-details-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--app-lightbox-header-btn-border);
  background: var(--app-lightbox-header-btn-bg);
  color: var(--app-lightbox-header-btn-text);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-download-btn:hover,
.lightbox[data-lightbox-kind="viewer"] .lightbox-delete-btn:hover,
.lightbox[data-lightbox-kind="viewer"] .lightbox-details-toggle-btn:hover {
  background: var(--app-lightbox-header-btn-hover-bg);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-body-row {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  min-height: 0;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-chevron-column {
  width: 58px;
  flex-shrink: 0;
  background: var(--app-lightbox-chevron-column-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-chevron-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--app-lightbox-chevron-btn-border);
  background: var(--app-lightbox-chevron-btn-bg);
  color: var(--app-lightbox-chevron-btn-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-chevron-btn:hover {
  background: var(--app-lightbox-chevron-btn-hover-bg);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-watermark {
  position: absolute;
  top: 14px;
  right: 8px;
  z-index: 10;
  background: var(--app-lightbox-watermark-bg);
  border: 1px solid var(--app-lightbox-watermark-border);
  border-radius: 6px;
  padding: 5px 10px;
  backdrop-filter: blur(4px);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-watermark-label {
  display: block;
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--app-lightbox-watermark-label);
  letter-spacing: 0.05em;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-watermark-datetime {
  display: block;
  font-size: 10px;
  color: var(--app-lightbox-watermark-datetime);
  margin-top: 1px;
  font-family: var(--font-dm-mono), "DM Mono", monospace;
}

/* Footer: filmstrip first, then bottom bar as a row below (no overlap) */
.lightbox[data-lightbox-kind="viewer"] .lightbox-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-footer > .lightbox-filmstrip,
.lightbox[data-lightbox-kind="viewer"] .lightbox-footer > .lightbox-bottom-bar {
  flex-shrink: 0;
}

/* When strip is open, reserve space so bar stays below filmstrip */
.lightbox[data-lightbox-kind="viewer"] .lightbox-footer.lightbox-footer-strip-open {
  min-height: 152px; /* 100px filmstrip + 52px bar */
}

/* Filmstrip: reserve full height when open so bottom bar stays below */
.lightbox[data-lightbox-kind="viewer"] .lightbox-filmstrip {
  background: var(--app-lightbox-filmstrip-bg);
  border-top: 1px solid var(--app-lightbox-filmstrip-border);
  transition: height 0.2s ease;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-filmstrip[data-open="true"] {
  min-height: 100px;
  height: 100px;
}

/* Strip toggle lives inside bottom bar (left); no extra row, no overlap */
.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-bar .lightbox-filmstrip-toggle {
  flex-shrink: 0;
  margin-right: 4px;
  background: var(--app-lightbox-filmstrip-toggle-bg);
  border: 1px solid var(--app-lightbox-filmstrip-toggle-border);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 10px;
  color: var(--app-lightbox-filmstrip-toggle-text);
  cursor: pointer;
  font-family: inherit;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-bar .lightbox-filmstrip-toggle:hover {
  color: var(--app-lightbox-filmstrip-toggle-hover-text);
  border-color: var(--app-lightbox-filmstrip-toggle-hover-border);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-filmstrip-inner {
  height: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  box-sizing: border-box;
  overflow-x: auto;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-thumbnail {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  border-radius: 5px;
  border: 2px solid transparent;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: none;
  padding: 0;
  transition: all 0.14s ease;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-thumbnail[data-active="true"] {
  border-color: var(--app-lightbox-thumbnail-active-border);
  box-shadow: 0 0 0 3px var(--app-lightbox-thumbnail-active-focus);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-thumbnail[data-hidden="true"] {
  opacity: 0.4;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-thumbnail-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-thumbnail-placeholder {
  width: 100%;
  height: 100%;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-thumbnail .video-poster-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-thumbnail .video-poster-placeholder-icon {
  width: 28px;
  height: 28px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-thumbnail-gradient {
  position: absolute;
  inset: 0;
  background: var(--app-lightbox-thumbnail-gradient);
  pointer-events: none;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-thumbnail-index {
  position: absolute;
  bottom: 3px;
  left: 4px;
  font-size: 8px;
  color: var(--app-lightbox-thumbnail-index-text);
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-weight: 600;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-thumbnail-indicators {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  gap: 2px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-thumbnail-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

/* Bottom control bar: flat row below filmstrip, not a boxed element */
.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-bar {
  height: 52px;
  background: var(--app-lightbox-bottom-bar-bg);
  border-top: 1px solid var(--app-lightbox-bottom-bar-border);
  flex-shrink: 0;
  padding: 0 18px;
  border-radius: 0;
  box-shadow: none;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-bar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  flex-wrap: nowrap;
  width: 100%;
}

/* Brightness and Contrast side by side with clear gap (no overlap) */
.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-bar-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  flex-shrink: 0;
  align-items: center;
  max-width: 600px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-slider-icon {
  color: var(--app-lightbox-bottom-slider-icon);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-slider-label {
  font-size: 11px;
  color: var(--app-lightbox-bottom-slider-label);
  white-space: nowrap;
  min-width: 52px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-slider {
  flex: 1;
  accent-color: var(--app-lightbox-accent);
  cursor: pointer;
  height: 3px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-auto-btn {
  background: none;
  border: 1px solid var(--app-lightbox-bottom-auto-btn-border);
  border-radius: 5px;
  cursor: pointer;
  color: var(--app-lightbox-bottom-auto-btn-text);
  font-size: 10px;
  padding: 2px 8px;
  font-family: inherit;
  white-space: nowrap;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-bar-divider {
  width: 1px;
  height: 20px;
  background: var(--app-lightbox-bottom-bar-divider);
  flex-shrink: 0;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-bar-spacer {
  flex: 1 1 auto;
  min-width: 24px;
}

/* Right side: takes ALL remaining space, content right-aligned so Save is at far right edge */
.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-zoom {
  font-size: 11px;
  color: var(--app-lightbox-bottom-zoom-text);
  font-family: var(--font-dm-mono), "DM Mono", monospace;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-save-button {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-radius: 0.5rem;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--app-lightbox-details-save-btn-bg);
  color: var(--app-lightbox-details-save-btn-text);
  cursor: pointer;
  font-weight: 600;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-save-button:hover:not(:disabled) {
  background: var(--app-lightbox-details-save-btn-hover-bg);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-save-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Details panel */
.lightbox[data-lightbox-kind="viewer"] .lightbox-details-panel {
  background: var(--app-lightbox-details-panel-bg);
  border-left: 1px solid var(--app-lightbox-details-panel-border);
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-panel-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--app-lightbox-details-header-border);
  background: var(--app-lightbox-details-header-bg);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-header-content {
  flex: 1;
  min-width: 0;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-header-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--app-lightbox-details-header-title);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-header-label {
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--app-lightbox-details-header-label);
  letter-spacing: 0.04em;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-header-datetime {
  font-size: 10px;
  color: var(--app-lightbox-details-header-datetime);
  margin-top: 2px;
  font-family: var(--font-dm-mono), "DM Mono", monospace;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-header-creator {
  margin-top: 2px;
  justify-content: flex-start;
  text-align: left;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--app-lightbox-details-close-btn);
  padding: 4px;
  border-radius: 4px;
  display: flex;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-close-btn:hover {
  color: var(--app-lightbox-details-close-btn-hover);
}

/* Default padding; when alignAddNoteWithRef is set, padding-top is computed in JS for alignment with chevron */
.lightbox[data-lightbox-kind="viewer"] .lightbox-details-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--app-lightbox-details-header-title);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-actions {
  display: flex;
  gap: 6px;
}

/* Grid layout for action buttons with chips below */
.lightbox[data-lightbox-kind="viewer"] .lightbox-details-actions-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-action-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-action-btn {
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  border: 1px solid var(--app-lightbox-details-action-btn-border);
  background: var(--app-lightbox-details-action-btn-bg);
  color: var(--app-lightbox-details-action-btn-text);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-action-btn-active {
  background: var(--app-lightbox-details-action-btn-active-bg);
  border-color: var(--app-lightbox-details-action-btn-active-border);
  color: var(--app-lightbox-details-action-btn-active-text);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-action-btn:hover {
  background: var(--app-lightbox-details-action-btn-hover-bg);
  border-color: var(--app-lightbox-details-action-btn-hover-border);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-action-btn-active:hover {
  background: var(--app-lightbox-details-action-btn-active-hover-bg);
  border-color: var(--app-lightbox-details-action-btn-active-hover-bg);
}

/* Active status chips shown below action buttons */
.lightbox[data-lightbox-kind="viewer"] .lightbox-details-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-active-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-active-chip-post {
  background: var(--app-lightbox-details-active-chip-post-bg);
  color: var(--app-lightbox-details-active-chip-post-text);
  border: 1px solid var(--app-lightbox-details-active-chip-post-border);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-active-chip-hide {
  background: var(--app-lightbox-details-active-chip-hide-bg);
  color: var(--app-lightbox-details-active-chip-hide-text);
  border: 1px solid var(--app-lightbox-details-active-chip-hide-border);
}

/* Status chips shown directly below each button (similar to note chips) */
.lightbox[data-lightbox-kind="viewer"] .lightbox-details-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-status-chip-post {
  background: var(--app-lightbox-details-active-chip-post-bg);
  color: var(--app-lightbox-details-active-chip-post-text);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-status-chip-hide {
  background: var(--app-lightbox-details-active-chip-hide-bg);
  color: var(--app-lightbox-details-active-chip-hide-text);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-notes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-note-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--app-lightbox-details-note-chip-bg);
  color: var(--app-lightbox-details-note-chip-text);
  border: 1px solid var(--app-lightbox-details-note-chip-border);
  border-radius: 20px;
  padding: 2px 9px 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-note-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--app-lightbox-details-note-chip-remove);
  font-size: 13px;
  line-height: 1;
  padding: 0;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-add-note-btn {
  background: var(--app-lightbox-details-add-note-btn-bg);
  border: 1.5px dashed var(--app-lightbox-details-add-note-btn-border);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 11px;
  color: var(--app-lightbox-details-add-note-btn-text);
  cursor: pointer;
  font-family: inherit;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-add-note-btn:hover {
  border-color: var(--app-lightbox-details-add-note-btn-hover-border);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-note-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--app-lightbox-details-note-dropdown-bg);
  border: 1px solid var(--app-lightbox-details-note-dropdown-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--app-lightbox-details-note-dropdown-shadow);
  z-index: 900;
  overflow: hidden;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-note-dropdown-empty {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--app-lightbox-details-note-dropdown-empty);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-note-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--app-lightbox-details-note-dropdown-item);
  text-align: left;
  font-family: inherit;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-note-dropdown-item:hover {
  background: var(--app-lightbox-details-note-dropdown-item-hover);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-comment-input-wrap {
  position: relative;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-comment-input {
  width: 100%;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 7px;
  padding: 8px 28px 8px 10px;
  font-size: 12px;
  color: var(--app-input-text);
  font-family: inherit;
  resize: none;
  line-height: 1.5;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-comment-input::placeholder {
  color: var(--app-input-placeholder);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-comment-input:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 20%, transparent);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-comment-clear-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--app-text-muted);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-comment-clear-btn:hover {
  background: var(--app-surface-2);
  color: var(--app-text);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-comment-count {
  font-size: 10px;
  color: var(--app-lightbox-details-comment-count);
  margin-top: 2px;
  text-align: right;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-comment-readonly {
  font-size: 12px;
  color: var(--app-lightbox-details-comment-readonly-text);
  background: var(--app-lightbox-details-comment-readonly-bg);
  border: 1px solid var(--app-lightbox-details-comment-readonly-border);
  border-radius: 5px;
  padding: 8px 10px;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-camera-info {
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  font-size: 10px;
  color: var(--app-lightbox-details-camera-info-text);
  background: var(--app-lightbox-details-camera-info-bg);
  border: 1px solid var(--app-lightbox-details-camera-info-border);
  border-radius: 5px;
  padding: 7px 9px;
  line-height: 1.6;
  word-break: break-all;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--app-lightbox-details-footer-border);
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-save-btn {
  flex: 1;
  background: var(--app-lightbox-details-save-btn-bg);
  border: none;
  border-radius: 7px;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-lightbox-details-save-btn-text);
  cursor: pointer;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-save-btn:hover {
  background: var(--app-lightbox-details-save-btn-hover-bg);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-details-reset-btn {
  background: none;
  border: 1px solid var(--app-lightbox-details-reset-btn-border);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--app-lightbox-details-reset-btn-text);
  cursor: pointer;
}

/* Video transport buttons — flat inside the bottom bar.
   The bottom bar has a light/white background, so buttons must use dark text.
   Override the default lightbox-icon-button which is styled for the dark picture area. */
.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-bar .lightbox-icon-button {
  background: transparent;
  color: var(--app-text);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-bottom-bar .lightbox-icon-button:hover {
  background: var(--app-surface-2);
  color: var(--app-text);
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-video-bar-btn {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-video-bar-playpause {
  width: 2.25rem;
  height: 2.25rem;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-video-bar-time {
  font-size: 12px;
  font-family: var(--font-dm-mono), "DM Mono", monospace;
  color: var(--app-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-video-bar-volume {
  width: 72px;
  accent-color: var(--app-lightbox-accent);
  cursor: pointer;
  height: 3px;
  flex-shrink: 0;
}

/* [CR-20260415] Microstep buttons — smaller, distinct from ±5s transport */
.lightbox[data-lightbox-kind="viewer"] .lightbox-video-microstep-btn {
  width: 1.75rem;
  height: 1.75rem;
  opacity: 0.85;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-video-microstep-btn:hover {
  opacity: 1;
}

/* [CR-20260415] Frame grab button */
.lightbox[data-lightbox-kind="viewer"] .lightbox-frame-grab-btn {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.lightbox[data-lightbox-kind="viewer"] .lightbox-frame-grab-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------- */
/* [CR-20260409-T10] Mobile minimal lightbox — full viewport + safe areas      */
/* -------------------------------------------------------------------------- */

.lightbox[data-lightbox-kind="viewer"][data-minimal="true"] {
  height: 100dvh;
  max-height: -webkit-fill-available;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.lightbox[data-lightbox-kind="viewer"][data-minimal="true"] .lightbox-chrome-new {
  height: 44px;
  padding: 0 10px;
  gap: 6px;
}

.lightbox[data-lightbox-kind="viewer"][data-minimal="true"] .lightbox-chevron-column {
  width: 40px;
}

.lightbox[data-lightbox-kind="viewer"][data-minimal="true"] .lightbox-chevron-btn {
  width: 36px;
  height: 36px;
}

@media (max-width: 768px) {
  .lightbox[data-lightbox-kind="viewer"][data-minimal="true"] .lightbox-chevron-column {
    display: none;
  }
}