/* ============================================================
   Stormm DS theme for Call Stormm admin
   Source of truth: ../uxhub-stormm/app/globals.css
   ============================================================ */

/* --- M&M Sans font faces --- */
@font-face {
    font-family: "M&M Sans";
    src: url("/fonts/mm-sans/MMSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "M&M Sans";
    src: url("/fonts/mm-sans/MMSans-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "M&M Sans";
    src: url("/fonts/mm-sans/MMSans-Semibold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "M&M Sans";
    src: url("/fonts/mm-sans/MMSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "M&M Sans";
    src: url("/fonts/mm-sans/MMSans-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "M&M Sans";
    src: url("/fonts/mm-sans/MMSans-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "M&M Sans";
    src: url("/fonts/mm-sans/MMSans-SemiboldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "M&M Sans";
    src: url("/fonts/mm-sans/MMSans-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* --- Stormm DS design tokens --- */
:root,
.ea-light-scheme {
    /* Surface */
    --s3-surface: #ffffff;
    --s3-surface-muted: #ededed;
    --s3-surface-brand: #e9f4b7;
    --s3-surface-page: #f7f7f7;
    --s3-surface-disabled: #dfdfdf;
    --s3-surface-danger: #ffe8e6;

    /* Text */
    --s3-text-primary: #0d0d0d;
    --s3-text-secondary: #4b4b4b;
    --s3-text-tertiary: #686868;
    --s3-text-muted: #868686;
    --s3-text-brand: #004137;
    --s3-text-brand-dark: #072523;
    --s3-text-danger: #f50037;
    --s3-text-on-brand: #ffffff;

    /* Border */
    --s3-border-default: #dfdfdf;
    --s3-border-brand: #8bd862;
    --s3-border-brand-subtle: #dbf38a;
    --s3-border-danger: #fdaeab;

    /* Icon */
    --s3-icon-muted: #868686;
    --s3-icon-brand: #004137;
    --s3-icon-danger: #f50037;

    /* Brand */
    --s3-brand: #004137;
    --s3-brand-hover: #072523;
    --s3-brand-subtle: #e9f4b7;
    --s3-brand-accent: #bef06e;

    /* Shadows */
    --s3-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --s3-shadow-md: 0 8px 22px rgba(56, 123, 34, 0.17);
    --s3-shadow-brand: 0 20px 35px rgba(0, 65, 55, 0.08);
    --s3-shadow-brand-hover: 0 20px 35px rgba(0, 65, 55, 0.18);
    --s3-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.25);

    /* Radius */
    /* Radius škála per uxhub Stormm DS (--radius: 10px base) */
    --s3-radius-sm: 6px;   /* rounded-md (buttons, inputs) */
    --s3-radius-md: 8px;   /* rounded-lg */
    --s3-radius-lg: 10px;  /* rounded-xl (cards) */
    --s3-radius-xl: 14px;  /* rounded-2xl (modaly) */
    --s3-radius-full: 9999px;

    /* Header gradient (Stormm 3 reference) */
    --s3-header-gradient: linear-gradient(90deg, #004137 0%, #4ba42d 50%, #004137 100%);

    /* Bootstrap mapping (EasyAdmin uses Bootstrap classes internally) */
    --bs-body-bg: var(--s3-surface-page);
    --bs-body-color: var(--s3-text-primary);
    --bs-border-color: var(--s3-border-default);
    --bs-primary: var(--s3-brand);
    --bs-link-color: var(--s3-text-brand);
    --bs-link-hover-color: var(--s3-brand-hover);

    /* EasyAdmin internal variables — canonical theming override */
    --color-primary: var(--s3-brand);
    --color-primary-rgb: 0, 65, 55;
    --border-radius: var(--s3-radius-md);
    --text-color: var(--s3-text-primary);
    --text-muted: var(--s3-text-muted);
    --body-bg: var(--s3-surface-page);
    --content-bg: var(--s3-surface);
    --content-top-border-color: var(--s3-border-default);
    --content-section-border-color: var(--s3-border-default);

    /* EasyAdmin dropdown variables */
    --dropdown-toggle-bg: var(--s3-surface);
    --dropdown-toggle-color: var(--s3-text-primary);
    --dropdown-toggle-border-color: var(--s3-border-default);
    --dropdown-toggle-hover-border-color: var(--s3-border-default);
    --dropdown-bg: var(--s3-surface);
    --dropdown-color: var(--s3-text-primary);
    --dropdown-border-color: var(--s3-border-default);
    --dropdown-link-color: var(--s3-text-primary);
    --dropdown-link-hover-bg: var(--s3-surface-muted);
    --dropdown-icon-color: var(--s3-icon-muted);
    --dropdown-settings-icon-color: var(--s3-icon-muted);
    --dropdown-settings-active-item-bg: var(--s3-surface-brand);
    --dropdown-settings-active-item-color: var(--s3-text-brand);

    /* EasyAdmin modal variables */
    --modal-bg: var(--s3-surface);
    --modal-border-color: var(--s3-border-default);
    --modal-header-bg: var(--s3-surface);
    --modal-header-border-color: var(--s3-border-default);
    --modal-footer-bg: var(--s3-surface-page);
    --modal-title-color: var(--s3-text-primary);

    /* EasyAdmin sidebar variables */
    --sidebar-max-width: 260px;
    --sidebar-bg: var(--s3-surface);
    --sidebar-border-color: var(--s3-border-default);
    --sidebar-logo-color: var(--s3-text-primary);
    --sidebar-padding-left: 8px;
    --sidebar-padding-right: 8px;
    --sidebar-menu-items-padding-left: 12px;
    --sidebar-menu-items-padding-right: 12px;
    --sidebar-menu-color: var(--s3-text-primary);
    --sidebar-menu-icon-color: var(--s3-icon-muted);
    --sidebar-menu-header-color: var(--s3-text-muted);
    --sidebar-menu-submenu-color: var(--s3-text-secondary);
    --sidebar-menu-active-item-bg: var(--s3-surface-brand);
    --sidebar-menu-active-item-color: var(--s3-text-brand);
    --sidebar-menu-badge-bg: var(--s3-surface-muted);
    --sidebar-menu-badge-color: var(--s3-text-secondary);
    --sidebar-menu-badge-active-bg: var(--s3-brand);
    --sidebar-menu-badge-active-color: var(--s3-brand-accent);
}

/* --- Base typography --- */
html,
body {
    font-family: "M&M Sans", "Google Sans", system-ui, -apple-system, sans-serif;
    color: var(--s3-text-primary);
    background: var(--s3-surface-page);
}

/* Typography utilities (matches .text-s3-* in Stormm DS) */
.text-s3-h2     { font-size: 24px; font-weight: 700; line-height: 1.3; }
.text-s3-h3     { font-size: 19px; font-weight: 700; line-height: 1.3; }
.text-s3-h4     { font-size: 18px; font-weight: 700; line-height: 1.3; }
.text-s3-title  { font-size: 17px; font-weight: 700; line-height: 1.4; }
.text-s3-subtitle { font-size: 15px; font-weight: 600; line-height: 1.4; }
.text-s3-body   { font-size: 15px; font-weight: 400; line-height: 1.5; }
.text-s3-body-sm{ font-size: 15px; font-weight: 600; line-height: 1.5; }
.text-s3-caption{ font-size: 13px; font-weight: 400; line-height: 1.5; }
.text-s3-overline { font-size: 12px; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.06em; }
.text-s3-micro  { font-size: 11px; font-weight: 500; line-height: 1.4; }

/* ============================================================
   Sidebar (light) — relies on EasyAdmin CSS variables (overridden above)
   Only minimal explicit rules for layout (vendor doesn't cover those).
   ============================================================ */
.main-header {
    min-height: 74px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header-logo {
    width: 100%;
}

#header-logo .logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    width: 100%;
}

#header-logo .logo .logo-custom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 6px;
    width: 100%;
}

#header-logo .logo .logo-custom img {
    max-height: 28px !important;
    width: auto !important;
    height: auto !important;
}

#header-logo .logo .logo-custom > span {
    color: var(--s3-text-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.2;
}

#header-logo .logo .logo-compact {
    display: none !important;
}

/* Compact sidebar mód úplně zakázán — sidebar je vždy v expanded šířce.
   Skryjeme resizer handle (drag pruh), přebijíme vendor grid-template-columns:44px
   pro `body.ea-sidebar-width-compact` zpět na plnou šířku, aby případně přetrvalý
   class na body (po předchozím dragu uloženém v localStorage) nezpůsobil collapse. */
#sidebar-resizer-handler {
    display: none !important;
}

body.ea-sidebar-width-compact .wrapper {
    grid-template-columns: var(--sidebar-max-width) auto !important;
}

body.ea-sidebar-width-compact #header-logo .logo .logo-custom {
    display: flex !important;
}

body.ea-sidebar-width-compact #header-logo .logo .logo-compact {
    display: none !important;
}

/* Menu — refine over EasyAdmin's default look */
#main-menu .menu {
    margin: 0;
}

/* Section labels (.menu-header is a <li>, .menu-header-contents is its inner span) */
#main-menu .menu .menu-header {
    margin-block-start: 18px;
    padding: 6px 12px;
}

#main-menu .menu .menu-header:first-child {
    margin-block-start: 4px;
}

#main-menu .menu .menu-header .menu-item-label {
    color: var(--s3-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Menu items (<li class="menu-item">) — outer container */
#main-menu .menu .menu-item {
    border-radius: var(--s3-radius-md);
    padding: 0;
    margin: 2px 0;
}

/* Menu item link/content (<a class="menu-item-contents">) — inner */
#main-menu .menu .menu-item .menu-item-contents {
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--s3-text-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--s3-radius-md);
    transition: background 0.15s ease, color 0.15s ease;
}

#main-menu .menu .menu-item .menu-item-contents:hover {
    background: var(--s3-surface-muted);
    color: var(--s3-text-primary);
}

/* Active item — variable handles the background, we only tune the label weight */
#main-menu .menu .menu-item.active .menu-item-contents,
#main-menu .menu .menu-item.active:not(.expanded) .menu-item-contents {
    background: var(--s3-surface-brand);
    color: var(--s3-text-brand);
    font-weight: 600;
}

/* Menu icon wrapper (<span class="icon menu-icon">) */
#main-menu .menu .menu-icon {
    color: var(--s3-icon-muted);
    inline-size: 18px;
    block-size: 18px;
    margin-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#main-menu .menu .menu-icon svg {
    width: 18px;
    height: 18px;
    max-block-size: 18px;
    max-inline-size: 18px;
    vertical-align: middle;
}

#main-menu .menu .menu-item.active .menu-icon {
    color: var(--s3-text-brand);
}

#main-menu .menu .menu-item-label {
    line-height: 1.4;
}

/* Strip the default badge shadow EasyAdmin adds */
.ea-light-scheme #main-menu .menu .menu-item .menu-item-badge,
.ea-light-scheme #main-menu .menu .menu-item.active .menu-item-badge {
    box-shadow: none;
    border-radius: var(--s3-radius-full);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
}

/* ============================================================
   Content header — clean white area, NO green gradient.
   Title in dark text + page actions inline on the right.
   Brand presence lives in sidebar logo, buttons, and active menu.
   ============================================================ */
.content-header {
    background: transparent !important;
    color: var(--s3-text-primary);
    border-radius: 0;
    padding: 24px 0 16px !important;
    margin: 0 0 16px !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--s3-border-default);
}

.content-header-title,
.content-header .content-header-title {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.content-header h1.title,
.content-header-title h1,
.content-header h1 {
    color: var(--s3-text-primary) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content-header .page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Page-action buttons — Stormm DS outline jako výchozí styl (uxhub h-9, px-4, gap-2) */
/* EasyAdmin aplikuje třídy btn i na <form> wrapper POST akcí — :not(form) zajistí,
   že btn styly se aplikují jen na skutečné <button> a <a> elementy */
.content-header .page-actions .btn:not(form) {
    background: transparent !important;
    color: var(--s3-text-brand) !important;
    border: 1px solid var(--s3-brand) !important;
    border-radius: 6px;
    height: 36px !important;
    min-block-size: 36px !important;
    width: auto !important;           /* přebít .btn-invisible { width: 32px } */
    min-width: 0 !important;
    padding: 0 16px !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;  /* uxhub shadow-sm */
    /* Vendor přiřazuje ikoně barvu přes --button-icon-color; přebijeme na currentColor,
       aby ikona vždy dědila color buttonu (destructive=white, primary=brand-accent, ghost=primary). */
    --button-icon-color: currentColor !important;
    --button-color: currentColor !important;
}

/* <form> wrapper — kompletní reset vendor .btn stylů (overflow hidden, ellipsis, min-block-size 2rem
   atd. ořezávaly obsah). Form je jen CSRF wrapper, žádné vizuální button styly. */
.content-header .page-actions form,
.content-header .page-actions form.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    min-block-size: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    color: inherit !important;
    font: inherit !important;
}

.content-header .page-actions .btn:not(form):hover {
    background: var(--s3-brand-subtle) !important;
    color: var(--s3-text-brand) !important;
    border-color: var(--s3-brand) !important;
}

/* Ghost — Zpět na výpis (uxhub ghost: transparent, text-primary #0D0D0D, hover surface-muted, no shadow) */
.content-header .page-actions .btn.action-index:not(form) {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--s3-text-primary) !important;
    box-shadow: none !important;
}

.content-header .page-actions .btn.action-index:not(form):hover {
    background: var(--s3-surface-muted) !important;
    color: var(--s3-text-primary) !important;
    border-color: transparent !important;
}

/* Destruktivní — Smazat a ostatní (uxhub destructive: #F50037 bg, white text) */
.content-header .page-actions .btn.btn-danger:not(form),
.content-header .page-actions .btn.action-delete:not(form),
.content-header .page-actions .btn.action-deactivate:not(form),
.content-header .page-actions .btn.action-cancel:not(form) {
    background: var(--s3-text-danger) !important;
    color: #ffffff !important;
    border-color: var(--s3-text-danger) !important;
}

.content-header .page-actions .btn.btn-danger:not(form):hover,
.content-header .page-actions .btn.action-delete:not(form):hover,
.content-header .page-actions .btn.action-deactivate:not(form):hover,
.content-header .page-actions .btn.action-cancel:not(form):hover {
    background: #d1002e !important;
    border-color: #d1002e !important;
}

/* Primary — Vytvořit, Upravit (uxhub default: #004137 bg, #BEF06E text, shadow) */
.content-header .page-actions .btn.btn-primary:not(form),
.content-header .page-actions .btn.action-new:not(form) {
    background: var(--s3-brand) !important;
    color: var(--s3-brand-accent) !important;
    border: 1px solid var(--s3-brand) !important;
    font-weight: 500;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

.content-header .page-actions .btn.btn-primary:not(form):hover,
.content-header .page-actions .btn.action-new:not(form):hover {
    background: var(--s3-brand-hover) !important;
    border-color: var(--s3-brand-hover) !important;
}

.main-content {
    background: var(--s3-surface-page);
    padding: 0 24px 24px;
}

/* Content top bar (search + user menu, above content-header) */
.content-top {
    background: transparent;
    padding: 16px 0 8px;
    border-bottom: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: auto;
}

/* ============================================================
   User menu — scoped to actual location
   EasyAdmin renders .user-menu-wrapper in two places:
   1. .navbar-custom-menu (desktop content-top, right side)
   2. .responsive-header (mobile top bar)
   Possibly also at aside.sidebar bottom if configured.
   Each location gets its own styling.
   ============================================================ */

/* Desktop pill — content-top right side */
.navbar-custom-menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-custom-menu .user-menu-wrapper {
    border: none;
    padding: 0;
    background: transparent;
}

.navbar-custom-menu .user-menu-wrapper .user-details {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 3px 14px 3px 3px;
    border-radius: var(--s3-radius-full);
    color: var(--s3-text-primary);
    text-decoration: none;
    background: var(--s3-surface);
    border: 1px solid var(--s3-border-default);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.navbar-custom-menu .user-menu-wrapper .user-details:hover {
    background: var(--s3-surface);
    border-color: var(--s3-brand);
    box-shadow: 0 2px 6px 0 rgba(0, 65, 55, 0.10);
}

.navbar-custom-menu .user-menu-wrapper .user-details[aria-expanded="true"] {
    background: var(--s3-surface);
    border-color: var(--s3-brand);
    box-shadow: 0 0 0 3px rgba(0, 65, 55, 0.15);
}

.navbar-custom-menu .user-menu-wrapper .user-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    border-radius: var(--s3-radius-full) !important;
    background: var(--s3-brand) !important;
    color: var(--s3-brand-accent) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Skrýt vendor FA user SVG (head v horní třetině viewBoxu → vizuálně off-center v kruhu) */
.navbar-custom-menu .user-menu-wrapper .user-avatar svg,
.navbar-custom-menu .user-menu-wrapper .user-avatar .icon > svg {
    display: none !important;
}

/* Lucide user ikona jako background-image — absolutně vystředěná v kruhu */
.navbar-custom-menu .user-menu-wrapper .user-avatar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BEF06E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

.navbar-custom-menu .user-menu-wrapper .user-name {
    color: var(--s3-text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

/* Mobile responsive header */
.responsive-header .user-menu-wrapper {
    border: none;
    padding: 0;
    background: transparent;
}

.responsive-header .user-menu-wrapper .user-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--s3-radius-full) !important;
    background: var(--s3-brand) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.responsive-header .user-menu-wrapper .user-avatar svg,
.responsive-header .user-menu-wrapper .user-avatar .icon {
    width: 16px;
    height: 16px;
    color: var(--s3-brand-accent);
}

/* Sidebar fallback (if rendered there) */
aside.sidebar .user-menu-wrapper {
    border-top: 1px solid var(--s3-border-default);
    padding: 12px;
    background: var(--s3-surface);
    margin-top: auto;
}

aside.sidebar .user-menu-wrapper .user-details {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--s3-radius-md);
    color: var(--s3-text-primary);
    text-decoration: none;
}

aside.sidebar .user-menu-wrapper .user-details:hover {
    background: var(--s3-surface-muted);
}

aside.sidebar .user-menu-wrapper .user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--s3-radius-full) !important;
    background: var(--s3-brand) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

aside.sidebar .user-menu-wrapper .user-avatar svg,
aside.sidebar .user-menu-wrapper .user-avatar .icon {
    width: 18px;
    height: 18px;
    color: var(--s3-brand-accent);
}

aside.sidebar .user-menu-wrapper .user-name {
    color: var(--s3-text-primary);
    font-size: 13px;
    font-weight: 600;
}

/* ============================================================
   Buttons — matches Stormm DS button.tsx variants
   ============================================================ */
.btn,
button.btn,
a.btn {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    line-height: 1.4;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 65, 55, 0.40);
}

/* Default / Primary — signature look */
.btn.btn-primary,
.btn-primary {
    background: var(--s3-brand) !important;
    color: var(--s3-brand-accent) !important;
    border-color: var(--s3-brand) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.btn-primary:hover,
.btn-primary:hover {
    background: var(--s3-brand-hover) !important;
    border-color: var(--s3-brand-hover) !important;
}

/* Outline */
.btn.btn-secondary,
.btn-outline-secondary {
    background: transparent;
    color: var(--s3-text-brand);
    border: 1px solid var(--s3-brand);
}

.btn.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--s3-brand-subtle);
    color: var(--s3-text-brand);
}

/* Ghost */
.btn.btn-link,
.btn-ghost {
    background: transparent;
    color: var(--s3-text-primary);
    border: none;
}

.btn.btn-link:hover,
.btn-ghost:hover {
    background: var(--s3-surface-muted);
    text-decoration: none;
}

/* Destructive */
.btn.btn-danger,
.btn-danger,
.action-delete .btn {
    background: var(--s3-text-danger) !important;
    color: #ffffff !important;
    border-color: var(--s3-text-danger) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.btn-danger:hover,
.btn-danger:hover,
.action-delete .btn:hover {
    background: #d1002e !important;
}

/* Sizes */
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}
.btn-lg {
    padding: 10px 24px;
    font-size: 14px;
}

/* Leading/trailing icon span uvnitř buttonu — uxhub size-4 (16px) */
.btn > .btn-icon {
    inline-size: 16px !important;
    block-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Icon-only button (samostatný button bez labelu) */
.btn.btn-icon:not(:has(.btn-label)) {
    padding: 8px;
    width: 36px;
    height: 36px;
    justify-content: center;
}

/* Ghost — EasyAdmin btn-invisible (3-dot action trigger) */
.btn-invisible {
    background: transparent !important;
    color: var(--s3-icon-muted) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px !important;
    border-radius: 6px !important;
    width: 32px;
    height: 32px;
    justify-content: center;
}
.btn-invisible:hover {
    background: var(--s3-surface-muted) !important;
    color: var(--s3-text-primary) !important;
}

/* Make button icons size-correct (uxhub size-4 = 16px) */
.btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}

/* Lucide SVGs (viewBox 0 0 24 24) jsou stroke-only — override vendor fill předpokladu */
.btn .btn-icon svg[viewBox="0 0 24 24"],
.btn > .btn-icon svg[viewBox="0 0 24 24"] {
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.5 !important;
    flex-shrink: 0;
}

/* FA-style SVGs (asymetrické viewBox jako 0 0 384 512) — fill-based, vendor currentColor přiřazení.
   Používá je EasyAdmin v interních templatech (filter modal X/check/funnel apod.). */
.btn .btn-icon svg:not([viewBox="0 0 24 24"]),
.btn > .btn-icon svg:not([viewBox="0 0 24 24"]) {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
    flex-shrink: 0;
}

/* ============================================================
   Inputs / selects / textareas — Stormm DS: input.tsx + InputSpecs.tsx
   Default:  white, 1px #DFDFDF, 6px radius, shadow-xs, h=36px
   Filled:   #E9F4B7 (--s3-surface-brand) — pouze text inputs
   Focus:    white, #004137 border, 3px ring 30% opacity
   Disabled: #EDEDED, opacity 0.5
   Error:    #FDAEAB border, red ring 20% opacity
   ============================================================ */
.form-control,
.form-select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    font-family: inherit;
    font-size: 14px !important;
    line-height: 1.5;
    color: var(--s3-text-primary) !important;
    background: var(--s3-surface) !important;
    border: 1px solid var(--s3-border-default) !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    height: 36px !important;
    min-height: unset !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

textarea {
    height: auto !important;
    min-height: 80px !important;
    padding: 8px 12px !important;
}

/* JSON / code editor textarea — monospace, větší výška, zachovaný indent.
   Aktivováno přes EasyAdmin ->setCssClass('field-json-editor') nebo data-json-editor attribute.
   Fixed height + scrollable: user scrolluje uvnitř textarea když obsah přesáhne. */
.field-json-editor textarea,
textarea[data-json-editor] {
    font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    height: 240px !important;
    min-height: 240px !important;
    padding: 12px !important;
    tab-size: 2;
    -moz-tab-size: 2;
    white-space: pre;
    overflow-x: auto !important;
    overflow-y: auto !important;
    resize: none !important;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--s3-brand) !important;
    box-shadow: 0 0 0 3px rgba(0, 65, 55, 0.30) !important;
    background: var(--s3-surface) !important;
}

/* Filled-state — pouze text inputs (ne select, ne textarea) */
input[type="text"]:not(:placeholder-shown):not(:focus):not(:disabled):not([aria-invalid="true"]),
input[type="password"]:not(:placeholder-shown):not(:focus):not(:disabled):not([aria-invalid="true"]),
input[type="email"]:not(:placeholder-shown):not(:focus):not(:disabled):not([aria-invalid="true"]),
input[type="number"]:not(:placeholder-shown):not(:focus):not(:disabled):not([aria-invalid="true"]),
input[type="tel"]:not(:placeholder-shown):not(:focus):not(:disabled):not([aria-invalid="true"]),
input[type="url"]:not(:placeholder-shown):not(:focus):not(:disabled):not([aria-invalid="true"]) {
    background: var(--s3-surface-brand) !important;
    border-color: var(--s3-surface-brand) !important;
    color: var(--s3-text-brand) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Filled-state pro <select> — detekce přes :has() (select nepodporuje :placeholder-shown).
   Filled = nejsou vybrány options s value="" ani options bez value atributu (placeholder pattern).
   Pro selecty bez placeholder option (required, vždy mají value) platí filled vždy.
   Chevron je tmavě brand color pro lepší kontrast na zeleném podkladu. */
select:not(:focus):not(:disabled):not(:has(option[value=""]:checked)):not(:has(option:not([value]):checked)) {
    background-color: var(--s3-surface-brand) !important;
    border-color: var(--s3-surface-brand) !important;
    color: var(--s3-text-brand) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004137' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

/* Filled-state pro TomSelect (EasyAdmin ea-autocomplete) — `.has-items` třída
   je přítomna na .ts-wrapper když je vybraná jakákoli položka. Nativní <select>
   je skrytý přes .ts-hidden-accessible, viditelný UI = .ts-wrapper > .ts-control. */
.ts-wrapper.form-select.has-items,
.ts-wrapper.has-items .ts-control {
    background-color: var(--s3-surface-brand) !important;
    border-color: var(--s3-surface-brand) !important;
    color: var(--s3-text-brand) !important;
    font-weight: 600 !important;
}

.ts-wrapper.has-items .ts-control .item {
    color: var(--s3-text-brand) !important;
    font-weight: 600 !important;
}

/* Chevron arrow pro filled TomSelect — tmavě brand color (lepší kontrast na zeleném podkladu) */
.ts-wrapper.form-select.has-items {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004137' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

/* Disabled */
.form-control:disabled,
.form-select:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    background: var(--s3-surface-muted) !important;
    color: var(--s3-text-muted) !important;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Error / aria-invalid */
.form-control.is-invalid,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--s3-border-danger) !important;
    box-shadow: 0 0 0 3px rgba(245, 0, 55, 0.20) !important;
    background: var(--s3-surface) !important;
}

/* Custom <select> chevron-down arrow (lucide stroke-only) — jednotná napříč prohlížeči */
select,
.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    padding-right: 36px !important;
}

select::-ms-expand,
.form-select::-ms-expand {
    display: none;
}

/* Globální checkbox + radio — sjednotí vzhled napříč formuláři (per uxhub: 18px, brand bg po check)
   :not(.form-check-input) vylučuje Bootstrap form-switch / form-check (řešeno níže samostatně). */
input[type="checkbox"]:not(.form-check-input),
input[type="radio"]:not(.form-check-input) {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--s3-border-default);
    background: var(--s3-surface);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background 0.12s ease, border-color 0.12s ease;
    margin: 0;
    vertical-align: middle;
}

input[type="checkbox"]:not(.form-check-input) {
    border-radius: var(--s3-radius-sm);
}

input[type="radio"]:not(.form-check-input) {
    border-radius: 50%;
}

input[type="checkbox"]:not(.form-check-input):hover,
input[type="radio"]:not(.form-check-input):hover {
    border-color: var(--s3-brand);
}

input[type="checkbox"]:not(.form-check-input):focus-visible,
input[type="radio"]:not(.form-check-input):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 65, 55, 0.30);
}

input[type="checkbox"]:not(.form-check-input):checked,
input[type="radio"]:not(.form-check-input):checked {
    background: var(--s3-brand);
    border-color: var(--s3-brand);
}

/* Checkbox checkmark (rotovaná pseudo-element border) */
input[type="checkbox"]:not(.form-check-input):checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid var(--s3-brand-accent);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

/* Radio center dot */
input[type="radio"]:not(.form-check-input):checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--s3-brand-accent);
    transform: translate(-50%, -50%);
}

input[type="checkbox"]:not(.form-check-input):disabled,
input[type="radio"]:not(.form-check-input):disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

::placeholder {
    color: var(--s3-text-muted) !important;
    opacity: 1;
}

.form-control::selection,
input::selection,
textarea::selection {
    background: var(--s3-brand);
    color: var(--s3-brand-accent);
}

/* ============================================================
   Form labels & help text — uxhub: label.tsx + InputExamples.tsx
   Labels: 13px, font-weight 500, text-primary (#0D0D0D)
   Helper: 12px, text-tertiary (#686868)
   ============================================================ */
.form-label,
label.form-label,
label.required,
.form-group > label {
    font-size: 13px;
    font-weight: 500;
    color: var(--s3-text-primary);
    margin-bottom: 4px;
    display: block;
    line-height: 1.3;
}

label.required::after {
    content: " *";
    color: var(--s3-text-danger);
}

.form-text,
small.form-help,
.help-block {
    font-size: 12px;
    color: var(--s3-text-tertiary);
    margin-top: 4px;
    display: block;
}

.invalid-feedback,
.form-error-message {
    color: var(--s3-text-danger);
    font-size: 12px;
    margin-top: 4px;
}

.form-group,
.mb-3,
.field-group {
    margin-bottom: 16px;
}

.form-tab-pane,
form .row {
    background: var(--s3-surface);
    border: 1px solid var(--s3-border-default);
    border-radius: var(--s3-radius-lg);
    padding: 20px;
}

/* Form footer actions — only inside actual forms, NOT in .page-actions
   (EasyAdmin uses .global-actions in both contexts) */
form > .form-actions,
form > .global-actions,
.ea-edit .form-actions,
.ea-new .form-actions {
    background: transparent;
    padding: 16px 0;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid var(--s3-border-default);
    margin-top: 16px;
}

/* Inside page-actions (content header), .global-actions is just an inline
   wrapper around the primary action — no padding/margin/border decoration. */
.page-actions .global-actions,
.page-actions .datagrid-filters {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   Toggle switch (BooleanField) — iOS-style s pohyblivým thumb circlem
   ============================================================ */
.form-check.form-switch .form-check-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 36px !important;
    height: 20px !important;
    background-color: var(--s3-surface-disabled) !important;
    border: 1px solid var(--s3-border-default) !important;
    border-radius: 9999px !important;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, background-position 0.18s ease;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23ffffff'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 2px center !important;
    background-size: 14px 14px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) inset !important;
    margin: 0;
    flex-shrink: 0;
    position: relative;
}

.form-check.form-switch .form-check-input:checked {
    background-color: var(--s3-brand) !important;
    border-color: var(--s3-brand) !important;
    background-position: right 2px center !important;
}

.form-check.form-switch .form-check-input:hover:not(:disabled) {
    border-color: var(--s3-brand);
}

.form-check.form-switch .form-check-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 65, 55, 0.25) !important;
}

.form-check.form-switch .form-check-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Žádný pseudo-element checkmark uvnitř switche (kdyby přežil z dřívější verze) */
.form-check.form-switch .form-check-input::after,
.form-check.form-switch .form-check-input::before {
    content: none !important;
}

/* ============================================================
   Datagrid (index/list table)
   ============================================================ */
table.datagrid,
.datagrid-wrapper table {
    background: var(--s3-surface);
    border-radius: var(--s3-radius-lg);
    overflow: hidden;
    box-shadow: var(--s3-shadow-sm);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-top: 16px;
}

table.datagrid thead th {
    background: var(--s3-surface);
    color: var(--s3-text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 1px solid var(--s3-border-default);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    /* Sticky header — zůstává viditelný při scrollu dlouhých listů */
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 0 var(--s3-border-default);
}

table.datagrid thead th.sorted {
    color: var(--s3-text-brand);
}

table.datagrid tbody td {
    padding: 14px 16px;
    color: var(--s3-text-primary);
    font-size: 15px;
    border-bottom: 1px solid var(--s3-border-default);
    vertical-align: middle;
}

table.datagrid tbody tr:last-child td {
    border-bottom: none;
}

table.datagrid tbody tr:hover {
    background: var(--s3-surface-page);
}

/* Empty state — když filter/list vrátí 0 záznamů. EasyAdmin renderuje <tr class="no-results"><td>{trans}</td></tr>.
   Vystředěný layout s lucide inbox ikonou v brand kruhu nad textem. */
table.datagrid tbody tr.no-results:hover {
    background: transparent;
}

table.datagrid tbody tr.no-results td {
    text-align: center;
    padding: 64px 24px;
    color: var(--s3-text-muted);
    font-size: 15px;
    border-bottom: none;
}

table.datagrid tbody tr.no-results td::before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background-color: var(--s3-surface-brand);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004137' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    border-radius: 9999px;
}

table.datagrid .field-id a {
    color: var(--s3-text-brand);
    font-weight: 500;
    text-decoration: none;
}

table.datagrid .field-id a:hover {
    text-decoration: underline;
}

.datagrid .actions-column .btn-link,
.datagrid .actions-column .dropdown-toggle {
    color: var(--s3-icon-muted);
    width: 32px;
    height: 32px;
    border-radius: var(--s3-radius-md);
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.datagrid .actions-column .btn-link:hover {
    background: var(--s3-surface-muted);
    color: var(--s3-text-brand);
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 16px;
    justify-content: flex-end;
}

.pagination .page-item .page-link {
    border: 1px solid var(--s3-border-default);
    border-radius: var(--s3-radius-md);
    background: var(--s3-surface);
    color: var(--s3-text-primary);
    padding: 6px 12px;
    font-size: 13px;
    transition: all 0.15s ease;
    text-decoration: none;
}

.pagination .page-item .page-link:hover {
    background: var(--s3-surface-muted);
    color: var(--s3-text-brand);
}

.pagination .page-item.active .page-link {
    background: var(--s3-brand);
    color: var(--s3-brand-accent);
    border-color: var(--s3-brand);
}

.pagination .page-item.disabled .page-link {
    color: var(--s3-text-muted);
    background: transparent;
    border-color: var(--s3-border-default);
    opacity: 0.5;
}

/* ============================================================
   Search bar + filter button
   EasyAdmin renders <span class="icon content-search-icon"> natively —
   we style that span, NOT add a duplicate via ::before.
   ============================================================ */
.form-action-search,
.content-search {
    position: relative;
}

.form-action-search .form-widget,
.content-search .form-widget {
    position: relative;
}

.form-action-search .content-search-icon,
.content-search .content-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--s3-icon-muted);
    pointer-events: none;
    z-index: 1;
}

.form-action-search .content-search-icon svg,
.content-search .content-search-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.form-action-search input,
.content-search input,
.form-action-search .content-search-label input {
    padding: 0 12px 0 38px !important;
    width: 280px;
}

.form-action-search input:focus,
.content-search input:focus {
    border-color: var(--s3-brand) !important;
    box-shadow: 0 0 0 3px rgba(0, 65, 55, 0.30) !important;
}


/* ============================================================
   Content panel (card for detail page sections)
   ============================================================ */
.content-panel {
    background: var(--s3-surface);
    border: 1px solid var(--s3-border-default);
    border-radius: var(--s3-radius-lg);
    box-shadow: var(--s3-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}

.content-panel-header {
    background: transparent;
    border-bottom: 1px solid var(--s3-border-default);
    padding: 16px 20px;
}

.content-panel-header h2,
.content-panel-header .content-panel-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--s3-text-primary);
    margin: 0;
    line-height: 1.4;
}

.content-panel-body {
    padding: 20px;
}

/* Field label + value layout (detail page) */
.ea-detail .field-group {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--s3-border-default);
    gap: 16px;
}

.ea-detail .field-group:last-child {
    border-bottom: none;
}

.ea-detail .field-group .field-label {
    flex: 0 0 200px !important;
    margin: 0 !important;
    color: var(--s3-text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    padding-top: 2px;
}

.ea-detail .field-group .field-value {
    flex: 1;
    color: var(--s3-text-primary);
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
}

.ea-detail .field-group.field-boolean {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.ea-detail .field-group.field-boolean .field-label {
    flex: 0 0 200px !important;
    min-inline-size: 0 !important;
    text-align: right !important;
    align-self: center !important;
    margin: 0 !important;
}

.ea-detail .field-group.field-boolean .field-value {
    flex: 1 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    inline-size: auto !important;
    min-inline-size: 0 !important;
}

/* JSON/code blocks inside detail panels */
.content-panel pre,
.content-panel code {
    background: var(--s3-surface-muted);
    border: 1px solid var(--s3-border-default);
    border-radius: var(--s3-radius-md);
    padding: 12px 16px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--s3-text-primary);
    overflow-x: auto;
}

/* Wrap long JSON lines so they don't overflow the viewport (only on <pre>,
   inline <code> holds short IDs and should not wrap). */
.content-panel pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Existing custom detail templates use <div class="title"> inside content-panel-header.
   Make that selector match the same heading style. */
.content-panel-header .title {
    font-size: 17px;
    font-weight: 700;
    color: var(--s3-text-primary);
    margin: 0;
    line-height: 1.4;
}

/* Detail panel data lists (used in custom detail templates) */
.content-panel .datalist {
    margin: 0;
    padding: 0;
}
.content-panel .data-row {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--s3-border-default);
    align-items: flex-start;
}
.content-panel .data-row:last-child {
    border-bottom: none;
}
.content-panel .data-row dt {
    flex: 0 0 200px;
    color: var(--s3-text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    margin: 0;
    padding-top: 2px;
}
.content-panel .data-row dd {
    flex: 1;
    color: var(--s3-text-primary);
    font-size: 15px;
    margin: 0;
    word-break: break-word;
}
.content-panel .data-row dd code {
    background: var(--s3-surface-muted);
    border-radius: var(--s3-radius-sm);
    padding: 2px 6px;
    font-size: 12px;
    border: none;
}

/* Detail panel inner tables (e.g. transcription parts) */
.content-panel .table {
    margin-top: 8px;
    background: var(--s3-surface);
    border-radius: var(--s3-radius-md);
    overflow: hidden;
}
.content-panel .table thead th {
    background: var(--s3-surface-page);
    color: var(--s3-text-secondary);
    font-size: 13px;
    font-weight: 600;
    border: none;
    padding: 10px 12px;
}
.content-panel .table tbody td {
    border-top: 1px solid var(--s3-border-default);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--s3-text-primary);
}

/* ============================================================
   Badges — matches Stormm DS Badge variants
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 6px;
    letter-spacing: 0;
    text-transform: none;
}

.badge.bg-primary,
.badge-primary {
    background: var(--s3-brand) !important;
    color: var(--s3-brand-accent) !important;
}

.badge.bg-success,
.badge-success {
    background: var(--s3-surface-brand) !important;
    color: var(--s3-text-brand) !important;
}

.badge.bg-secondary,
.badge-secondary {
    background: var(--s3-surface-muted) !important;
    color: var(--s3-text-secondary) !important;
}

.badge.bg-warning,
.badge-warning {
    background: #fff4d6 !important;
    color: #8a6800 !important;
}

.badge.bg-danger,
.badge-danger {
    background: var(--s3-text-danger) !important;
    color: #ffffff !important;
}

.badge.bg-info,
.badge-info {
    background: #e0f2fe !important;
    color: #075985 !important;
}

/* ============================================================
   Flash messages / alerts
   ============================================================ */
.alert {
    border: 1px solid;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.alert-success {
    background: var(--s3-surface-brand);
    border-color: var(--s3-border-brand);
    color: var(--s3-text-brand-dark);
}

.alert-warning {
    background: #fff8e0;
    border-color: #f0d57a;
    color: #6b4f00;
}

.alert-danger {
    background: var(--s3-surface-danger);
    border-color: var(--s3-border-danger);
    color: var(--s3-text-danger);
}

.alert-info {
    background: #e8f4fc;
    border-color: #b3d8f0;
    color: #0a5494;
}


/* ============================================================
   Modal — filter modal, delete confirmation, etc.
   ============================================================ */
.modal {
    --bs-modal-border-radius: var(--s3-radius-xl);
    --bs-modal-border-color: var(--s3-border-default);
    --bs-modal-bg: var(--s3-surface);
}

.modal-content {
    background: var(--s3-surface);
    border: 1px solid var(--s3-border-default);
    border-radius: var(--s3-radius-xl);
    box-shadow: var(--s3-shadow-modal);
    overflow: hidden;
}

.modal-header,
.modal-header.justify-content-between {
    background: var(--s3-surface);
    border-bottom: 1px solid var(--s3-border-default);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Modal header buttons (Zrušit / Aplikovat) — flat, no extra borders */
.modal-header .btn.btn-secondary,
#modal-clear-button {
    background: transparent !important;
    border: 1px solid var(--s3-border-default) !important;
    color: var(--s3-text-secondary) !important;
}
.modal-header .btn.btn-secondary:hover,
#modal-clear-button:hover {
    background: var(--s3-surface-muted) !important;
}

.modal-header .btn.btn-primary,
#modal-apply-button {
    background: var(--s3-brand) !important;
    color: var(--s3-brand-accent) !important;
    border: 1px solid var(--s3-brand) !important;
}
.modal-header .btn.btn-primary:hover,
#modal-apply-button:hover {
    background: var(--s3-brand-hover) !important;
    border-color: var(--s3-brand-hover) !important;
}

/* Sjednotit velikost modal action buttonů (Zrušit / Aplikovat) s adminem 36 px, přebít vendor btn-sm */
.modal-header .btn,
.modal-header .btn.btn-sm,
.modal-header #modal-clear-button,
.modal-header #modal-apply-button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1 !important;
    white-space: nowrap;
}

/* Box-shadow per uxhub: outline + primary */
.modal-header #modal-clear-button {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.modal-header #modal-apply-button {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Modal title funnel ikona — fill-based FA SVG, force viditelnost */
.modal-header .modal-title .icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
    color: var(--s3-text-primary);
    vertical-align: middle;
}

.modal-body {
    background: var(--s3-surface);
    padding: 12px !important;
    color: var(--s3-text-primary);
}

.modal-body h4 {
    color: var(--s3-text-primary);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 12px;
}


.modal-footer {
    background: transparent;
    border-top: 1px solid var(--s3-border-default);
    padding: 12px 20px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ============================================================
   Dropdown overlay — user menu, settings, row actions
   ============================================================ */
.dropdown-menu {
    background: var(--s3-surface);
    border: 1px solid var(--s3-border-default);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 4px;
    min-width: 160px;
    margin-top: 6px;
}

.dropdown-menu li {
    list-style: none;
    border-radius: 2px;
}

.dropdown-menu .dropdown-item,
.dropdown-menu a,
.dropdown-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 2px;
    color: var(--s3-text-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    transition: background 0.1s ease, color 0.1s ease;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
    background: var(--s3-surface-muted);
    color: var(--s3-text-brand);
}

.dropdown-menu .dropdown-item .icon,
.dropdown-menu .icon {
    width: 16px;
    height: 16px;
    color: var(--s3-icon-muted);
    margin: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dropdown-menu .dropdown-item:hover .icon,
.dropdown-menu .dropdown-item:hover svg {
    color: var(--s3-text-brand);
}

.dropdown-menu .dropdown-item svg,
.dropdown-menu .icon svg {
    width: 14px;
    height: 14px;
}

/* Destructive item (Odhlásit se, Smazat) — vždy poslední v menu, oddělená divider linkou */
.dropdown-menu .dropdown-item-variant-danger,
.dropdown-menu .action-delete {
    color: var(--s3-text-danger);
}

/* Divider — border-top + spacing, kromě případu kdy je destructive jediná položka */
.dropdown-menu .dropdown-item-variant-danger:not(:first-child),
.dropdown-menu .action-delete:not(:first-child),
.dropdown-menu li:has(> .dropdown-item-variant-danger):not(:first-child),
.dropdown-menu li:has(> .action-delete):not(:first-child) {
    border-top: 1px solid var(--s3-border-default);
    margin-top: 4px;
    padding-top: 4px;
}

.dropdown-menu .dropdown-item-variant-danger:hover,
.dropdown-menu .action-delete:hover {
    background: var(--s3-surface-danger);
    color: var(--s3-text-danger);
}
.dropdown-menu .dropdown-item-variant-danger:hover .icon,
.dropdown-menu .dropdown-item-variant-danger:hover svg,
.dropdown-menu .action-delete:hover .icon,
.dropdown-menu .action-delete:hover svg {
    color: var(--s3-text-danger);
}

/* User details (avatar + label + name) inside user dropdown — clean minimal header */
.dropdown-menu .dropdown-user-details {
    padding: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--s3-border-default);
    background: transparent;
    border-radius: 0;
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: default;
}

.dropdown-menu .dropdown-user-details:hover {
    background: transparent;
}

.dropdown-menu .dropdown-user-details > div:first-child {
    flex-shrink: 0;
}

.dropdown-menu .dropdown-user-details .user-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    border-radius: var(--s3-radius-full) !important;
    background: var(--s3-brand) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    position: relative;
}

/* Skrýt vendor FA user SVG */
.dropdown-menu .dropdown-user-details .user-avatar svg,
.dropdown-menu .dropdown-user-details .user-avatar .icon > svg {
    display: none !important;
}

/* Lucide user ikona jako background-image — absolutně vystředěná v kruhu */
.dropdown-menu .dropdown-user-details .user-avatar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BEF06E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

.dropdown-menu .dropdown-user-details .user-label {
    color: var(--s3-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    display: block;
    margin: 0 0 2px;
}

.dropdown-menu .dropdown-user-details .user-name {
    color: var(--s3-text-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    display: block;
    margin: 0;
}

.dropdown-menu hr.dropdown-divider {
    margin: 4px 0;
    border: none;
    border-top: 1px solid var(--s3-border-default);
}

/* Row action dropdowns (3-dot menu) — same styling as above applies */
.actions-column .dropdown-menu {
    min-width: 140px;
}

/* ============================================================
   Modal — refined to match Stormm DS dialog patterns
   ============================================================ */

/* Larger modal width + vertical center */
.modal-dialog {
    max-width: 480px;
    margin: 1.75rem auto;
}

.modal.show .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 3.5rem);
}

/* Bootstrap modal fade animace způsobuje glitch (slide nahoru) když filter Apply/Clear
   triggeruje page reload uprostřed animace. Vypnutí transitions → modal zmizí okamžitě. */
.modal.fade .modal-dialog,
.modal.fade,
.modal-backdrop.fade {
    transition: none !important;
    transform: none !important;
}

/* Backdrop — darker + blur for Stormm DS feel */
.modal-backdrop {
    background-color: #000 !important;
}

.modal-backdrop.show {
    opacity: 0.45 !important;
}

body.modal-open {
    overflow: hidden;
}

/* Header refined */
.modal-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--s3-border-default);
    background: var(--s3-surface) !important;
    gap: 8px;
}

.modal-header .modal-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--s3-text-primary);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 8px;
}

.modal-header .modal-title .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-header .modal-title .icon svg {
    width: 16px;
    height: 16px;
    color: var(--s3-icon-muted);
}

/* Force apply button text color (override any vendor color on .btn-label) */
.modal-header #modal-apply-button,
.modal-header #modal-apply-button .btn-label,
.modal-header #modal-apply-button .action-label {
    color: var(--s3-brand-accent) !important;
}

.modal-header #modal-clear-button,
.modal-header #modal-clear-button .btn-label {
    color: var(--s3-text-secondary) !important;
}

/* Apply/clear button icons */
.modal-header .btn .icon svg {
    width: 13px;
    height: 13px;
}

.modal-header #modal-apply-button .icon svg {
    color: var(--s3-brand-accent);
}

/* Filter items — polished */
.modal-body > a,
.modal-body .filter-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 2px 0;
    border-radius: var(--s3-radius-md);
    color: var(--s3-text-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.12s ease;
}

.modal-body > a:hover,
.modal-body .filter-item:hover {
    background: var(--s3-surface-muted);
    color: var(--s3-text-primary) !important;
    text-decoration: none !important;
}

.modal-body input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--s3-border-default);
    border-radius: var(--s3-radius-sm);
    background: var(--s3-surface);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background 0.12s ease, border-color 0.12s ease;
    margin: 0;
}

.modal-body input[type="checkbox"]:hover {
    border-color: var(--s3-brand);
}

.modal-body input[type="checkbox"]:checked {
    background: var(--s3-brand);
    border-color: var(--s3-brand);
}

.modal-body input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid var(--s3-brand-accent);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

/* ============================================================
   Sidebar — zobrazit i při 768–991px (EasyAdmin default je 992px+)
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
    .wrapper {
        display: grid !important;
        grid-template-columns: 260px auto !important;
        min-block-size: 100vh;
    }

    .sidebar {
        position: static !important;
        box-shadow: inset -1px 0 0 var(--sidebar-border-color) !important;
        max-inline-size: 260px !important;
        inline-size: initial !important;
        padding: 0 var(--sidebar-padding-right) 0 var(--sidebar-padding-left) !important;
        z-index: auto !important;
        overscroll-behavior: auto !important;
    }
}