/* C4T Brand Visual Polish for EasyAdmin */

/* Prevent CLS (layout shift) when switching EasyAdmin form tabs.
   All tab panes stack in the same grid cell so the container height
   equals the tallest pane. Only the active pane is visible. */
.ea-edit .tab-content {
    display: grid;
}
.ea-edit .tab-content > .tab-pane {
    grid-area: 1 / 1;
    display: block !important;
    visibility: hidden;
    pointer-events: none;
}
.ea-edit .tab-content > .tab-pane.active {
    visibility: visible;
    pointer-events: auto;
}

:root {
    color-scheme: light;
    /* Colors */
    --c4t-primary: #EB1700;
    --c4t-primary-dark: #C41300;
    --c4t-bg: #F9F8F7;
    --c4t-border: #E8E6E3;
    --c4t-white: #FFFFFF;
    --c4t-light-red: #FEF2F2;
    
    /* Badges */
    --c4t-badge-green-bg: #dcfce7;
    --c4t-badge-green-text: #166534;
    --c4t-badge-blue-bg: #dbeafe;
    --c4t-badge-blue-text: #1e40af;
    --c4t-badge-orange-bg: #ffedd5;
    --c4t-badge-orange-text: #9a3412;
    --c4t-badge-purple-bg: #f3e8ff;
    --c4t-badge-purple-text: #7c3aed;
    --c4t-badge-red-bg: #fee2e2;
    --c4t-badge-red-text: #991b1b;

    /* EasyAdmin Overrides */
    --color-primary: var(--c4t-primary);
    --color-primary-dark: var(--c4t-primary-dark);
    --color-success: #166534;
    --color-info: #1e40af;
    --color-warning: #9a3412;
    --color-danger: var(--c4t-primary);

    /* Button overrides — EasyAdmin uses gradients, we need flat colors */
    --button-primary-bg: var(--c4t-primary);
    --button-primary-color: #fff;
    --button-primary-border-color: var(--c4t-primary);
    --button-primary-hover-bg: var(--c4t-primary-dark);
    --button-primary-hover-color: #fff;
    --button-primary-hover-border-color: var(--c4t-primary-dark);
    --button-primary-active-bg: var(--c4t-primary-dark);
    --button-primary-active-color: #fff;
    --button-primary-active-border-color: var(--c4t-primary-dark);
    --button-primary-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --button-focus-outline-color: var(--c4t-primary);

    /* Links */
    --link-color: var(--c4t-primary);
    --link-hover-color: var(--c4t-primary-dark);

    /* Sidebar */
    --sidebar-menu-active-item-bg: var(--c4t-light-red);
    --sidebar-menu-active-item-color: var(--c4t-primary);

    /* Form focus */
    --form-switch-checked-bg: var(--c4t-primary);
    --form-type-check-input-checked-bg: var(--c4t-primary);

    /* Pagination */
    --pagination-active-bg: var(--c4t-primary);

    /* Login */
    --page-login-form-control-button-bg: var(--c4t-primary);

    --body-bg: var(--c4t-bg);
    --sidebar-bg: var(--c4t-white);
    --sidebar-border-color: var(--c4t-border);
    --sidebar-max-width: 256px;

    --font-family-sans-serif: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-family-base: var(--font-family-sans-serif);

    --border-color: var(--c4t-border);
    --border-radius: 0.375rem;
    --box-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

body {
    font-family: var(--font-family-base);
    background-color: var(--c4t-bg);
    color: #1f2937;
    font-size: 1rem;
    margin: 0;
    overflow: hidden;
    height: 100vh;
}

body > .wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.sortable-ghost {
    opacity: 0.4;
    background: #e0f2fe;
}

.sortable-chosen {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.sortable-drag {
    opacity: 0.9;
}

.drag-handle {
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

h1, .title {
    font-family: var(--font-family-base);
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1f2937;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-max-width) !important;
    background-color: var(--c4t-white) !important;
    border-right: 1px solid var(--c4t-border);
    box-shadow: var(--box-shadow-sm);
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.sidebar .main-header {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid var(--c4t-border);
    background: var(--c4t-white);
    padding: 0 1.5rem;
}

.sidebar .main-header .navbar {
    width: 100%;
    height: 100%;
    padding: 0;
}

.sidebar #header-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sidebar .logo {
    color: var(--c4t-primary) !important;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: 100%;
}

.sidebar .logo i {
    font-size: 1.5rem;
}

/* Sidebar menu — scrollable area between header and user profile */
.sidebar .menu {
    padding: 0 !important;
    flex: 1;
    overflow-y: auto;
}
.sidebar .menu-header {
    text-transform: uppercase;
    color: #9ca3af;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1rem 1.5rem 0.5rem !important;
    margin: 0 !important;
}

.sidebar .menu-item {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 !important;
    margin: 0;
}

.sidebar .menu-item a {
    padding: 0 1.5rem !important;
    height: 100%;
    display: flex !important;
    align-items: center !important;
    color: #4b5563;
    transition: all 0.2s;
    width: 100%;
}

.sidebar .menu-item a:hover {
    background-color: var(--sidebar-menu-item-hover-bg);
    color: #111827;
    text-decoration: none;
}

.sidebar .menu-item.active a {
    background-color: var(--c4t-light-red);
    color: var(--c4t-primary);
    border-right: 3px solid var(--c4t-primary);
    font-weight: 600;
}

.sidebar .menu-item .menu-icon {
    width: 24px !important;
    min-width: 24px;
    text-align: center;
    margin-right: 0.75rem !important;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* User Profile in Sidebar */
.sidebar-user-profile {
    padding: 1rem;
    border-top: 1px solid var(--c4t-border);
    background-color: #f9fafb;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}

.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--c4t-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
    box-shadow: var(--box-shadow-sm);
}

.sidebar-user-info {
    overflow: hidden;
}

.sidebar-user-name {
    font-weight: 500;
    color: #111827;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-email {
    color: #6b7280;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Main content area */
.main-content .content-wrapper {
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1;
    overflow-y: auto;
}

.main-content {
    /* bg color set by shared work-pane rule */
    flex: 1 1 0%;
    min-width: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

article.content {
    max-width: 1400px;
    width: 100%;
}

/* Content top bar — repurposed as breadcrumb bar */
.content-top {
    min-block-size: auto;
    height: 4rem;
    background: #fff;
    border-block-end: 1px solid var(--c4t-border);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding-inline: 0;
    padding-block: 0;
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    align-items: center;
}

/* Hide the legacy user menu inside content-top - only the breadcrumb bar and (when a CRUD
   enables it) the search box remain. The search box used to be hidden here too, back when
   search was disabled on every list; it is now rendered by the custom content_top_header. */
.content-top .navbar-custom-menu,
.content-top .dropdown-settings {
    display: none !important;
}

.content-header {
    /* EasyAdmin's base CSS makes this sticky at top:-20px. With a transparent background
       the title scrolled partly out of view and the form content beneath bled through it.
       Pin it to the top with a solid background so it stays put as a clean header bar. */
    background: var(--c4t-bg, #f9f8f7);
    /* Bottom border + subtle shadow give the pinned bar a clear delimiter so it reads as
       a layered header (not blended into the page) when content scrolls underneath. */
    border-bottom: 1px solid var(--c4t-border, #e8e6e3);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: auto;
    margin: 0;
    padding: 1.5rem;
    /* !important: EasyAdmin's base CSS pins top:-20px / z-index:999 with higher specificity,
       which let the title drift 20px out of view on scroll. Force a clean top:0 sticky. */
    position: sticky;
    top: 0 !important;
    z-index: 20 !important;
}

.content-body {
    /* top padding so form content / tab strips aren't smooshed against the sticky header bar */
    padding: 1.5rem 1.5rem 1.5rem;
}

/* Full-bleed pages (workspace) — no padding on content-body */
.page-workspace .content-body {
    padding: 0;
}


.content-header .content-header-title {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.content-header .title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 2rem;
    color: #1f2937;
    padding-right: 0;
}

.content-header p {
    color: #6b7280;
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

.content-header > .mb-4 {
    margin-bottom: 2rem !important;
}

.content-header > .mb-4 > .title {
    line-height: 2rem;
    margin-bottom: 0 !important;
    padding-right: 0;
}

.content-header > .mb-4 > p {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    margin: 0 !important;
}

.page-actions {
    align-self: flex-start;
}

/* Breadcrumb bar inside content-top */

/* Content-top row: just the breadcrumb bar now (search moved into the index grid). */
.c4t-content-top-row {
    display: flex;
    align-items: center;
    background-color: #fff;
    }
    .c4t-content-top-row .c4t-breadcrumb-bar {
    flex: 1 1 auto;
    background: transparent;
}

    /* Index-grid search: a toolbar above the table, right-aligned, so it belongs to the list. */
.c4t-grid-search {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}
.c4t-grid-search .form-action-search,
.c4t-grid-search .form-group,
.c4t-grid-search .form-widget {
    margin: 0;
    padding: 0;
}
.c4t-grid-search .content-search-label {
    position: relative;
    display: block;
    margin: 0;
}
.c4t-grid-search .content-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.875rem;
    pointer-events: none;
}
/* Override EA's collapse-on-blur search input: keep it a full, always-visible field. */
.c4t-grid-search input[type="search"] {
    width: 280px;
    max-width: 32vw;
    height: 40px;
    padding: 0 2.25rem 0 2.5rem;
    /* !important: EA's .form-control sets border:0 and a transparent/expanding background,
       which left the search box borderless and blended into the page (no contrast). */
    border: 1px solid #d1d5db !important;
    border-radius: 8px;
    background-color: #fff !important;
    font-size: 0.9375rem;
    color: #111827;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Hide the browser's native search clear (X) - we render our own reset link, so the
   native control would show a second, duplicate cross. */
.c4t-grid-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.c4t-grid-search input[type="search"]::placeholder {
    color: #9ca3af;
    opacity: 1;
}
.c4t-grid-search input[type="search"]:focus {
    outline: none;
    border-color: var(--c4t-primary, #eb1700);
    box-shadow: 0 0 0 3px rgba(235, 23, 0, 0.12);
}
.c4t-grid-search .content-search-reset {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    text-decoration: none;
    font-size: 0.8125rem;
}
.c4t-grid-search .content-search-reset:hover {
    color: var(--c4t-primary, #eb1700);
}

.c4t-breadcrumb-bar {
    height: 4rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
}
.c4t-breadcrumb-bar nav {
    display: flex;
}
.c4t-breadcrumb-bar ol {
    list-style: none;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
.c4t-breadcrumb-bar li {
    display: inline-flex;
    align-items: center;
}
.c4t-breadcrumb-bar li i {
    color: #9ca3af;
    font-size: 0.625rem;
    margin: 0 0.5rem;
}
.c4t-breadcrumb-bar li a {
    color: #6b7280;
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.15s;
}
.c4t-breadcrumb-bar li a:hover {
    color: #374151;
}
.c4t-breadcrumb-bar .current {
    color: #374151;
    font-weight: 500;
    font-size: 1rem;
}

/* Stat Cards */
.stat-card {
    background-color: var(--c4t-white);
    border-radius: 0.5rem;
    border: 1px solid #f3f4f6;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--box-shadow-sm);
}

.stat-card-info {
    display: flex;
    flex-direction: column;
}

.stat-card-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.stat-card-number {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 2.25rem;
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1.5rem;
}

.stat-card-icon.red { background-color: #fef2f2; color: var(--c4t-primary); }
.stat-card-icon.green { background-color: #f0fdf4; color: #16a34a; }
.stat-card-icon.purple { background-color: #faf5ff; color: #9333ea; }
.stat-card-icon.blue { background-color: #eff6ff; color: #2563eb; }
.stat-card-icon.orange { background-color: #fff7ed; color: #ea580c; }

/* Tables */
.table {
    background-color: var(--c4t-white);
    border-radius: 0.5rem;
    border: 1px solid var(--c4t-border);
    overflow: hidden;
    box-shadow: var(--box-shadow-sm);
}

table.datagrid,
.datagrid {
    background-color: var(--c4t-white);
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: var(--box-shadow-sm);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 0;
}

.table thead th {
    background-color: #f9fafb;
    border-bottom: 1px solid var(--c4t-border);
    text-transform: uppercase;
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
    padding: 1rem 1.5rem;
    letter-spacing: 0.05em;
}

table.datagrid thead th,
.datagrid thead th {
    background-color: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb;
    text-transform: uppercase;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #6b7280;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1rem 1.5rem;
}

/* Remove EasyAdmin's inner span padding in th */
table.datagrid thead th span,
.datagrid thead th span,
table.datagrid thead th a,
.datagrid thead th a {
    padding: 0 !important;
}

.table tbody td {
    padding: 1rem 1.5rem;
    vertical-align: middle;
    border-bottom: 1px solid #f3f4f6;
}

table.datagrid tbody,
.datagrid tbody {
    border-top: none;
}

table.datagrid tbody tr,
.datagrid tbody tr {
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

table.datagrid tbody td,
.datagrid tbody td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
    color: #374151;
    font-size: 1rem;
    background-color: #fff;
}

.table tbody tr:hover {
    background-color: #f9fafb;
}

table.datagrid tbody tr:hover td,
.datagrid tbody tr:hover td {
    background-color: #f9fafb;
    transition: background-color 0.15s ease;
}

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

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

/* Action cells — layout */
td.actions,
.datagrid td:last-child {
    white-space: nowrap !important;
    text-align: right;
}

/* Row actions — matched icon buttons so Edit + Delete read as one tidy set */
td.actions a.btn,
td.actions button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0 !important;
    margin: 0 0 0 0.125rem !important;
    border: 1px solid transparent !important;
    border-radius: 0.5rem;
    background: transparent !important;
    box-shadow: none !important;
    color: #6b7280 !important;
    font-size: 0.875rem;
    line-height: 1;
    vertical-align: middle;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}

td.actions a.btn:hover,
td.actions button.btn:hover {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: var(--c4t-primary, #ef4444) !important;
}

td.actions a.btn:focus-visible,
td.actions button.btn:focus-visible {
    outline: 2px solid var(--c4t-primary, #ef4444);
    outline-offset: 1px;
}

/* Delete — neutral by default, red wash on hover */
td.actions a.btn.action-delete:hover,
td.actions button.btn.action-delete:hover,
td.actions a.btn.btn-danger:hover,
td.actions button.btn.btn-danger:hover {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #dc2626 !important;
}

/* Icon-only: keep the label for screen readers, hide it visually */
td.actions .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

table.datagrid td.batch-actions-selector,
.datagrid td.batch-actions-selector,
table.datagrid th .form-batch-checkbox-all,
.datagrid th .form-batch-checkbox-all {
    display: none;
}

.list-pagination-counter {
    display: none;
}

.content-panel-footer {
    border-top: 0 !important;
    padding-top: 0 !important;
}

.global-actions .btn,
.page-actions .btn {
    border-radius: 0.375rem;
    box-shadow: var(--box-shadow-sm);
    min-height: 2.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.c4t-logo-mark {
    align-items: center;
    border-radius: 0.375rem;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.c4t-name-with-logo {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.c4t-primary-cell {
    color: #111827;
    font-weight: 600;
    transition: color 0.15s ease;
}

.c4t-secondary-cell {
    color: #6b7280;
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

table.datagrid tbody tr:hover .c4t-primary-cell,
.datagrid tbody tr:hover .c4t-primary-cell,
table.datagrid tbody tr:hover .field-pathway-name,
.datagrid tbody tr:hover .field-pathway-name {
    color: var(--c4t-primary);
}

.c4t-badge {
    align-items: center;
    border-radius: 9999px;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 500;
    justify-content: center;
    line-height: 1.2;
    min-width: 2rem;
    padding: 0.125rem 0.625rem;
}

.c4t-badge-red {
    background: #fee2e2;
    color: #991b1b;
}

.c4t-badge-blue {
    background: #dbeafe;
    color: #1e40af;
}

.c4t-badge-neutral {
    background: #f3f4f6;
    color: #1f2937;
}

.c4t-user-cell {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.c4t-user-avatar {
    align-items: center;
    background: var(--c4t-primary);
    border-radius: 9999px;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.c4t-code-pill {
    background: #f3f4f6;
    border-radius: 0.375rem;
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.media-toolbar-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: var(--box-shadow-sm);
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
}

.media-toolbar-select,
.media-toolbar-search {
    align-items: center;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    color: #6b7280;
    display: flex;
    font-size: 0.875rem;
    line-height: 1.25rem;
    min-height: 2.5rem;
    padding: 0 0.75rem;
}

.media-toolbar-select {
    min-width: 6.5625rem;
    width: fit-content;
}

.media-toolbar-search {
    flex: 1 1 auto;
}

.c4t-media-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.c4t-media-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    color: inherit;
    display: block;
    padding: 0.75rem;
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.c4t-media-card:hover {
    border-color: #fca5a5;
    box-shadow: 0 4px 12px rgb(15 23 42 / 0.08);
}

.c4t-media-preview {
    aspect-ratio: 1 / 1;
    align-items: center;
    border-radius: 0.375rem;
    display: flex;
    font-size: 1rem;
    line-height: 1.5rem;
    justify-content: center;
    margin-bottom: 0.5rem;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.c4t-media-preview.is-image {
    background: #f3f4f6;
    color: #d1d5db;
}

.c4t-media-preview-image {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.c4t-media-preview.is-pdf {
    background: #fef2f2;
    color: #f87171;
}

.c4t-media-preview-overlay {
    background: rgb(0 0 0 / 0);
    inset: 0;
    position: absolute;
    transition: background-color 0.15s ease;
}

.c4t-media-card:hover .c4t-media-preview-overlay {
    background: rgb(0 0 0 / 0.06);
}

.c4t-media-meta p {
    margin: 0;
}

.c4t-media-name {
    color: #374151;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c4t-media-details {
    color: #9ca3af;
    font-size: 0.625rem;
    margin-top: 0.125rem;
}

.c4t-media-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.c4t-media-actions a {
    color: #9ca3af;
    margin-left: 0.5rem;
}

.c4t-media-actions a:hover {
    color: var(--c4t-primary);
}

.c4t-media-actions .action-delete:hover {
    color: #dc2626;
}

.content-body .field-group,
.form-panel,
.detail-panel {
    background-color: var(--c4t-white);
    border-radius: 0.5rem;
    border: 1px solid var(--c4t-border);
    box-shadow: var(--box-shadow-sm);
}

.content-body .field-group {
    padding: 1.5rem;
}

.form-panel .form-panel-header {
    background-color: #f9fafb;
    border-bottom: 1px solid var(--c4t-border);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.form-panel .form-panel-body {
    padding: 1.5rem;
}

.list-pagination {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--c4t-border);
}

.table .actions a.action-edit:hover { color: var(--c4t-primary); }
.table .actions a.action-delete:hover { color: #dc2626; }

/* Buttons — reinforce via CSS rules (variables handle most, these are fallback) */
.btn-primary {
    background: var(--c4t-primary) !important;
    border-color: var(--c4t-primary) !important;
    color: white !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--c4t-primary-dark) !important;
    border-color: var(--c4t-primary-dark) !important;
}

/* Form Inputs */
.form-control, .form-select {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus, .form-select:focus {
    border-color: var(--c4t-primary);
    box-shadow: 0 0 0 3px rgba(235, 23, 0, 0.15);
    outline: none;
}

/* Badges */
.badge {
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-success { background-color: var(--c4t-badge-green-bg); color: var(--c4t-badge-green-text); }
.badge-info { background-color: var(--c4t-badge-blue-bg); color: var(--c4t-badge-blue-text); }
.badge-warning { background-color: var(--c4t-badge-orange-bg); color: var(--c4t-badge-orange-text); }
.badge-danger { background-color: var(--c4t-badge-red-bg); color: var(--c4t-badge-red-text); }
.badge-secondary { background-color: #f3f4f6; color: #1f2937; }

.badge.badge-secondary {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
}

*:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

.action-edit:focus,
.action-delete:focus,
.btn:focus,
a:focus {
    outline: none !important;
    box-shadow: none !important;
}

*:focus-visible {
    outline: 2px solid var(--c4t-primary);
    outline-offset: 2px;
}

/* Login Page */
.page-login {
    color-scheme: light;
    background-color: var(--c4t-bg);
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-wrapper {
    width: 100%;
    max-width: 28rem;
    padding: 0 1rem;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}
.login-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #fef2f2;
    color: var(--c4t-primary);
    font-size: 1.875rem;
    margin-bottom: 1rem;
}
.login-subtitle {
    color: #6b7280;
    font-size: 1rem;
    margin: 0.25rem 0 0;
}

.login-card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid #e5e7eb;
    padding: 2rem;
}

.login-alert {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.login-field {
    display: flex;
    flex-direction: column;
}
.login-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}
.login-field input {
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #111827;
    background-color: white;
    color-scheme: light;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.login-field input:focus {
    outline: none;
    border-color: var(--c4t-primary);
    box-shadow: 0 0 0 3px rgba(235, 23, 0, 0.1);
}
.login-field input::placeholder {
    color: #9ca3af;
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin: 0;
}
.login-remember input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid #d1d5db;
    accent-color: var(--c4t-primary);
    cursor: pointer;
}
.login-remember span {
    font-size: 0.875rem;
    color: #4b5563;
}
.login-forgot {
    font-size: 0.875rem;
    color: var(--c4t-primary);
    font-weight: 500;
    text-decoration: none;
}
.login-forgot:hover {
    color: var(--c4t-primary-dark);
}

.login-submit {
    width: 100%;
    background: var(--c4t-primary);
    color: white;
    border: none;
    padding: 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.login-submit:hover {
    background: var(--c4t-primary-dark);
}

.login-footer {
    text-align: center;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 1.5rem;
}

/* Tabs */
.nav-tabs {
    border-bottom: 2px solid var(--c4t-border);
}
.nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px;
    color: #6b7280;
    font-weight: 600;
    padding: 1rem 1.5rem;
}
.nav-tabs .nav-link:hover {
    border-bottom-color: #9ca3af !important;
    color: #374151;
}
.nav-tabs .nav-link.active {
    border-bottom-color: var(--c4t-primary) !important;
    color: var(--c4t-primary);
    background: transparent;
}

/* Language Tabs */
.lang-tabs {
    display: flex;
    border-bottom: 1px solid var(--c4t-border);
    margin-bottom: 1.5rem;
}
.lang-tab {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    border: 1px solid transparent;
    border-bottom: none;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    cursor: pointer;
}
.lang-tab:hover {
    color: #374151;
}
.lang-tab.active {
    background-color: white;
    border-color: var(--c4t-border);
    border-top: 2px solid var(--c4t-primary);
    color: #1f2937;
    font-weight: 600;
    margin-bottom: -1px;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.status-dot.green { background-color: #22c55e; }
.status-dot.yellow { background-color: #eab308; }
.status-dot.red { background-color: #ef4444; }

@media (max-width: 767.98px) {
    .content-top {
        padding-inline: 1rem;
    }

    .c4t-breadcrumb-bar {
        padding: 0 1rem;
    }

    .content-header {
        flex-direction: column;
        align-items: stretch;
    }

    .content-body {
        padding-bottom: 1.5rem;
    }

    table.datagrid thead th,
    .datagrid thead th,
    table.datagrid tbody td,
    .datagrid tbody td {
        padding: 0.875rem 1rem;
    }
}

/* Hospital Detail Tabs */
.c4t-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1.5rem;
    gap: 0;
}
.c4t-tab {
    padding: 0.75rem 1.5rem;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}
.c4t-tab:hover { color: #374151; }
.c4t-tab.active {
    color: var(--c4t-primary, #EB1700);
    border-bottom-color: var(--c4t-primary, #EB1700);
    font-weight: 600;
}
.c4t-tab-content.hidden { display: none; }

table.datagrid tbody tr.empty-row,
table.datagrid tbody tr:has(td:empty:only-child),
table.datagrid tbody tr:not(.no-results):not(.datagrid-row-empty):not(:has(td:not(:empty))) {
    display: none;
}

table.datagrid tbody tr.no-results td,
table.datagrid tbody tr.datagrid-row-empty td,
table.datagrid tbody tr td[colspan] {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #9ca3af;
    font-size: 1rem;
    background-color: #fff;
}

.page-workspace .workspace-layout {
    display: flex;
    height: calc(100vh - 4rem);
    overflow: hidden;
}

.page-workspace .workspace-sidebar {
    width: 256px;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
}

.page-workspace .workspace-sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.page-workspace .workspace-sidebar-nav {
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    overflow-y: auto;
}

.page-workspace .workspace-content {
    flex: 1;
    padding: 2rem;
    height: 100%;
    overflow-y: auto;
    background: var(--c4t-bg);
}

.page-workspace .workspace-nav-item {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: transparent;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.page-workspace .workspace-nav-item-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.page-workspace .workspace-nav-item-left span {
    font-size: 0.9375rem;
    font-weight: 500;
}

.page-workspace .workspace-sub-nav:hover {
    background: #f9fafb;
    color: #111827;
}

.page-workspace .workspace-sub-nav.active {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #111827;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.page-workspace .workspace-sub-nav.active .c4t-badge {
    background: #f3f4f6;
    color: #374151;
}

.page-workspace .workspace-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-workspace .workspace-view-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

/* Workspace row wrapper: hosts a full-width content row (.material-row / checklist card)
   plus a sibling delete button. */
.page-workspace .workspace-row-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
}
.page-workspace .workspace-row-wrapper .material-row {
    flex: 1;
    padding-right: 0.5rem;
}
/* Base icon-button look, shared by every delete context. */
.page-workspace .workspace-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    color: #6b7280;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1;
    vertical-align: middle;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.page-workspace .workspace-delete-btn:hover {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}
.page-workspace .workspace-delete-btn:focus-visible {
    outline: 2px solid var(--c4t-primary, #ef4444);
    outline-offset: 1px;
}
/* Workspace rows: delete button is a normal flex sibling AFTER the <a> */
.page-workspace .workspace-row-wrapper > .workspace-delete-btn {
    align-self: center;
    margin-left: 0.5rem;
    margin-right: 1.5rem;
}
/* Checklist cards are taller than a row: pin the delete to the top-right corner. */
.page-workspace .workspace-checklist-row-wrapper {
    display: block;
}
.page-workspace .workspace-checklist-row-wrapper > .workspace-delete-btn {
    position: absolute;
    top: 1.125rem;
    right: 1.5rem;
    z-index: 2;
    margin: 0;
}
/* Lift the delete in sync with the card on hover so they move together, not detached. */
.page-workspace .workspace-checklist-row-wrapper:hover > .workspace-delete-btn {
    transform: translateY(-2px);
}
/* Phase/category card headers: the delete sits inline beside the Edit button. */
.page-workspace .workspace-card-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-workspace .material-row {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.page-workspace .material-row:last-child {
    border-bottom: none;
}

.page-workspace .material-row:hover {
    background: #f9fafb;
}

.page-workspace .material-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.125rem;
}

.page-workspace .icon-pdf {
    background: #fee2e2;
    color: #ef4444;
}

.page-workspace .icon-video {
    background: #f3e8ff;
    color: #a855f7;
}

.page-workspace .icon-audio {
    background: #fce7f3;
    color: #ec4899;
}

.page-workspace .icon-generic {
    background: #f3f4f6;
    color: #6b7280;
}

.page-workspace .add-dashed-btn {
    display: block;
    width: 100%;
    padding: 1rem;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    color: #6b7280;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    transition: all 0.15s ease;
}

.page-workspace .add-dashed-btn:hover {
    border-color: #9ca3af;
    color: #374151;
    background: #f9fafb;
}

.page-workspace .checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.page-workspace .checklist-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.page-workspace .workspace-checklist-row-wrapper:hover .checklist-card {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.page-workspace .hidden {
    display: none !important;
}

/* ---- Workspace page styles (extracted from inline) ---- */

/* Sidebar Header */
.page-workspace .workspace-sidebar-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
}

.page-workspace .workspace-sidebar-subtitle {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: #6b7280;
}

.page-workspace .workspace-sidebar-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #9ca3af;
    text-decoration: none;
}

.page-workspace .workspace-sidebar-edit-icon {
    font-size: 0.625rem;
}

/* Layout & Cards */
.page-workspace .workspace-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.page-workspace .workspace-card-flush {
    overflow: hidden;
    padding: 0;
}

.page-workspace .workspace-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-workspace .workspace-card-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-workspace .workspace-card-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

.page-workspace .workspace-card-icon {
    color: #9ca3af;
    font-size: 1.25rem;
}

.page-workspace .workspace-sortable-container {
    padding: 0;
}

.page-workspace .workspace-drag-handle {
    color: #d1d5db;
    margin-right: 1rem;
}

.page-workspace .workspace-item-content {
    flex: 1;
}

.page-workspace .workspace-item-title {
    font-weight: 500;
    color: #111827;
    margin-bottom: 0.125rem;
}

.page-workspace .workspace-item-title-no-margin {
    font-weight: 500;
    color: #111827;
}

.page-workspace .workspace-item-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    text-transform: capitalize;
}

.page-workspace .workspace-chevron-icon {
    color: #9ca3af;
}

.page-workspace .workspace-empty-state {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.page-workspace .workspace-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

.page-workspace .workspace-add-btn-flush {
    margin-top: 0;
}

.page-workspace .workspace-add-btn-icon {
    margin-right: 0.5rem;
}

/* Empty States (Large) */
.page-workspace .workspace-empty-card {
    padding: 4rem 2rem;
    text-align: center;
}

.page-workspace .workspace-empty-card-full {
    padding: 4rem 2rem;
    text-align: center;
    grid-column: 1 / -1;
}

.page-workspace .workspace-empty-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    font-size: 1.25rem;
}

.page-workspace .workspace-empty-icon-red {
    background: #fee2e2;
    color: #ef4444;
}

.page-workspace .workspace-empty-icon-gray {
    background: #f3f4f6;
    color: #6b7280;
}

.page-workspace .workspace-empty-icon-indigo {
    background: #e0e7ff;
    color: #4f46e5;
}

.page-workspace .workspace-empty-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

.page-workspace .workspace-empty-text {
    margin: 0 0 1.5rem 0;
    color: #6b7280;
}

/* Checklists */
.page-workspace .workspace-checklist-card-padded {
    padding: 1.5rem;
}

.page-workspace .workspace-checklist-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-right: 2.5rem;
}

.page-workspace .workspace-checklist-icon {
    width: 40px;
    height: 40px;
    background: #e0e7ff;
    color: #4f46e5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.page-workspace .workspace-checklist-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-workspace .workspace-checklist-drag {
    color: #cbd5e1;
}

.page-workspace .workspace-checklist-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

.page-workspace .workspace-checklist-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.page-workspace .workspace-checklist-footer-text {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

/* Usage Page Styles */
.usage-container {
    max-width: 1400px;
}

.usage-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.usage-filters {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.usage-filter-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.usage-filter-select {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
}

.usage-filter-select-lg {
    min-width: 200px;
}

.usage-filter-select-sm {
    min-width: 150px;
}

.usage-filter-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.usage-empty-state {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #9ca3af;
}

.usage-table {
    width: 100%;
}

.usage-table-right {
    text-align: right;
}

.usage-table-right-bold {
    text-align: right;
    font-weight: 600;
}

.usage-code-badge {
    background: #f3f4f6;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

/* Dashboard Page Styles */
.dashboard-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem;
}

.dashboard-subtitle {
    color: #6b7280;
    font-size: 0.875rem;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-alert-warning {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.dashboard-alert-icon {
    color: #f59e0b;
    margin-top: 0.125rem;
}

.dashboard-alert-content {
    font-size: 0.875rem;
    color: #92400e;
}

.dashboard-alert-title {
    font-weight: 500;
    margin: 0 0 0.25rem 0;
}

.dashboard-alert-text {
    color: #b45309;
    margin: 0;
}

/* Related Entity List Styles */
.related-entity-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.related-entity-table {
    width: 100%;
}

/* (actions handled by unified td.actions rules above) */

.related-entity-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
    border: 1px dashed #e5e7eb;
    border-radius: 0.5rem;
    background: #f9fafb;
}

/* Stat Cards Macros Styles */
.stat-card-clickable {
    cursor: pointer;
}

.stat-card-default {
    cursor: default;
}

.stat-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow 0.2s;
}

/* Utility Classes */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* ---- Form layout refinements ---- */
/* Give TipTap fields more breathing room */
.field-tiptap .tiptap-editor {
    min-height: 20rem;
}

/* Consistent form field spacing */
.ea-edit-form .form-group {
    margin-bottom: 1.25rem;
}

/* Labels */
.ea-edit-form .form-group label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.375rem;
}

/* Boolean toggle fields — align vertically with adjacent form groups */
.ea-edit-form .field-boolean {
    padding-top: 1.75rem; /* aligns toggle with input fields that have labels above */
}

/* === Media Modal + Card Overlay === */

.c4t-media-card {
    cursor: pointer;
    position: relative;
}

.c4t-media-card-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.375rem;
    padding: 0.5rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    background: linear-gradient(to top, rgb(0 0 0 / 0.4), transparent);
    border-radius: 0 0 calc(0.5rem - 1px) calc(0.5rem - 1px);
}

.c4t-media-card:hover .c4t-media-card-actions,
.c4t-media-card:focus-within .c4t-media-card-actions {
    opacity: 1;
}

.c4t-media-card-actions .action-delete,
.c4t-media-card-actions a.btn.action-delete {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: none;
    background: #dc2626 !important;
    color: #fff !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    margin: 0;
    padding: 0;
    transition: background-color 0.15s ease;
    text-decoration: none;
}

.c4t-media-card-actions .action-delete:hover,
.c4t-media-card-actions a.btn.action-delete:hover {
    background: #b91c1c !important;
    color: #fff !important;
}

.c4t-media-edit-dialog {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.3);
    max-width: 540px;
    width: 95%;
    max-height: 85vh;
    padding: 0;
    overflow: hidden;
    flex-direction: column;
}

.c4t-media-edit-dialog::backdrop {
    background: rgb(0 0 0 / 0.5);
}

.c4t-media-edit-dialog[open] {
    display: flex;
}

.c4t-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.c4t-modal-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: #111827;
}

.c4t-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #d1d5db;
    outline: none;
    background: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    color: #374151;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.c4t-modal-close:hover {
    color: #111827;
    background: #f3f4f6;
    border-color: #9ca3af;
}

.c4t-modal-close:focus-visible {
    outline: 2px solid var(--c4t-primary, #ef4444);
    outline-offset: 2px;
}

.c4t-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.c4t-modal-loading {
    text-align: center;
    color: #9ca3af;
    padding: 3rem;
    font-size: 1.5rem;
}

.c4t-modal-error {
    text-align: center;
    color: #dc2626;
    padding: 2rem;
}

.c4t-media-edit-preview {
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f3f4f6;
    text-align: center;
}

.c4t-media-edit-preview-image {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
}

.c4t-media-file-icon {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
}

.c4t-media-file-icon i {
    font-size: 2.5rem;
    color: #f87171;
}

.c4t-media-file-icon .c4t-media-file-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    word-break: break-all;
}

.c4t-media-file-icon .c4t-media-file-size {
    font-size: 0.75rem;
    color: #9ca3af;
}

.c4t-media-edit-new-preview {
    margin-bottom: 1rem;
    border: 2px dashed var(--c4t-primary, #ef4444);
    border-radius: 0.5rem;
    padding: 0.5rem;
    background: var(--c4t-light-red, #fef2f2);
}

.c4t-media-edit-new-preview img {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 0.375rem;
}

.c4t-media-edit-file-hint {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0.25rem 0 0.5rem;
}

.c4t-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 1.5rem;
}

.c4t-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    border: 1px solid transparent;
    text-decoration: none;
}

.c4t-btn > i.fa-solid,
.c4t-btn > i.fa-regular,
.c4t-btn > i.fa-light,
.c4t-btn > i.fa-brands {
    line-height: 1;
    flex-shrink: 0;
}

.c4t-btn-primary {
    background: var(--c4t-primary, #ef4444);
    color: #fff;
    border-color: var(--c4t-primary, #ef4444);
}

.c4t-btn-primary:hover {
    background: var(--c4t-primary-dark, #dc2626);
    border-color: var(--c4t-primary-dark, #dc2626);
}

.c4t-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.c4t-btn-secondary {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
}

.c4t-btn-secondary:hover {
    background: #f9fafb;
}


/* === Workspace Card Flush Borders === */
.c4t-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.c4t-card.workspace-card-flush {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Action buttons in entity detail pages (the "Edit" pill) */
.ea-detail .action-edit,
.ea-detail .action-edit.btn {
    background: var(--c4t-primary, #ef4444);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.ea-detail .action-edit:hover {
    background: var(--c4t-primary-dark, #dc2626);
    color: #fff;
}

/* Global .btn-secondary override (workspace Edit buttons, etc.) */
.btn.btn-secondary {
    color: #6b7280 !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem !important;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    transition: all 0.15s ease;
    line-height: 1.5;
}

.btn.btn-secondary:hover {
    color: var(--c4t-primary, #ef4444) !important;
    border-color: var(--c4t-primary, #ef4444) !important;
    background: #fef2f2 !important;
}

/* --- Clickable table rows --- */
.related-entity-row-clickable {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.related-entity-row-clickable:hover {
    background: #f9fafb;
}


.c4t-media-picker-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.c4t-media-picker-preview {
    width: 100%;
    min-height: 120px;
    max-height: 200px;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    background: #f9fafb;
    transition: border-color 0.15s ease;
}

.c4t-media-picker-preview:hover {
    border-color: var(--c4t-primary, #ef4444);
}

.c4t-media-picker-thumb {
    width: 100%;
    height: 100%;
    max-height: 200px;
    object-fit: contain;
}

.c4t-media-picker-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #9ca3af;
}

.c4t-media-picker-placeholder i {
    font-size: 2rem;
}

.c4t-media-picker-placeholder span {
    font-size: 0.8125rem;
}

.c4t-media-picker-file-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    color: #6b7280;
    padding: 1rem;
}

.c4t-media-picker-file-icon i {
    font-size: 1.5rem;
}

.c4t-media-picker-file-icon span {
    font-size: 0.75rem;
    word-break: break-all;
    text-align: center;
}

.c4t-media-picker-actions {
    display: flex;
    gap: 0.5rem;
}

.c4t-btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
}

.c4t-btn-danger {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

.c4t-btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

/* Media Picker Dialog */
.c4t-media-picker-dialog {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.3);
    max-width: 1200px;
    width: 92vw;
    max-height: 88vh;
    height: 88vh;
    padding: 0;
    overflow: hidden;
    flex-direction: column;
}

.c4t-media-picker-dialog::backdrop {
    background: rgb(0 0 0 / 0.5);
}

.c4t-media-picker-dialog[open] {
    display: flex;
}

.c4t-media-picker-dialog-body {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.c4t-media-picker-dialog-body .c4t-media-grid {
    gap: 0.75rem;
}

.c4t-media-picker-dialog-body .c4t-media-card {
    cursor: pointer;
}

.c4t-media-picker-dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.c4t-media-picker-upload-zone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*
 * EasyAdmin's `.form-group label { padding: 0 0 8px }` rule (Bootstrap form-group)
 * overrides any plain `.c4t-btn` padding when the button is a <label> inside a
 * form-group. Re-assert proper button-shaped padding for the upload <label>
 * (which wraps the hidden file input).
 */
.c4t-media-picker-upload-zone label.c4t-btn {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
}

.c4t-media-picker-upload-zone label.c4t-btn-sm {
    padding: 0.4rem 0.85rem;
}

.c4t-media-picker-upload-zone label.c4t-btn-primary {
    color: #fff;
}

.c4t-media-picker-upload-status {
    font-size: 0.75rem;
    color: #6b7280;
}

/* === Inline Edit (Stimulus inline-edit controller) === */
.inline-edit-display {
    cursor: text;
    border-radius: 4px;
    padding: 2px 6px;
    margin: -2px -6px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.inline-edit-display:hover {
    background-color: rgba(15, 23, 42, 0.04);
}
.inline-edit-display:focus-visible {
    box-shadow: 0 0 0 2px rgba(235, 23, 0, 0.35);
}
.inline-edit-display.inline-edit-saving {
    color: #6b7280;
    font-style: italic;
}
.inline-edit-display.inline-edit-saved {
    background-color: rgba(34, 197, 94, 0.12);
}
.inline-edit-display.inline-edit-error {
    background-color: rgba(235, 23, 0, 0.10);
    color: #991b1b;
}
.inline-edit-input {
    width: 100%;
    font-size: inherit;
    font-weight: inherit;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 4px;
    border: 1px solid var(--c4t-primary, #eb1700);
    box-shadow: 0 0 0 3px rgba(235, 23, 0, 0.15);
}

/* Per-locale translation editor rendered as pure-CSS tabs (c4t-translations).
   Deliberately NOT Bootstrap/EA tabs - see translations_inline.html.twig for why.
   Radios are visually hidden; per-index sibling selectors drive active tab + panel. */
.c4t-translations {
    width: 100%;
}
.c4t-translations__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.c4t-translations__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    margin-bottom: 16px;
}
.c4t-translations .c4t-translations__tab {
    /* !important: EasyAdmin's `.form-group label` rules win on specificity and zero out
       horizontal padding / force their own display, making tabs look like plain text. */
    display: inline-flex !important;
    align-items: center;
    cursor: pointer;
    padding: 8px 16px !important;
    margin: 0 0 -1px 0 !important;
    font-weight: 600 !important;
    color: var(--c4t-muted, #888);
    background: #f7f7f7;
    border: 1px solid var(--border-color, #e0e0e0);
    border-bottom-color: var(--border-color, #e0e0e0);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    user-select: none;
    white-space: nowrap;
    line-height: 1.4;
}
.c4t-translations .c4t-translations__tab:hover {
    color: var(--c4t-text, #333);
    background: #fff;
}
.c4t-translations__default {
    color: var(--c4t-muted, #888);
    font-weight: 400;
    margin-left: 4px;
}
/* Panels hidden by default; the matching :checked radio reveals one. */
.c4t-translations__panel {
    display: none;
}
/* Active tab + panel wiring for up to 13 enabled locales. */
.c4t-translations__radio--1:checked ~ .c4t-translations__tabs .c4t-translations__tab--1,
.c4t-translations__radio--2:checked ~ .c4t-translations__tabs .c4t-translations__tab--2,
.c4t-translations__radio--3:checked ~ .c4t-translations__tabs .c4t-translations__tab--3,
.c4t-translations__radio--4:checked ~ .c4t-translations__tabs .c4t-translations__tab--4,
.c4t-translations__radio--5:checked ~ .c4t-translations__tabs .c4t-translations__tab--5,
.c4t-translations__radio--6:checked ~ .c4t-translations__tabs .c4t-translations__tab--6,
.c4t-translations__radio--7:checked ~ .c4t-translations__tabs .c4t-translations__tab--7,
.c4t-translations__radio--8:checked ~ .c4t-translations__tabs .c4t-translations__tab--8,
.c4t-translations__radio--9:checked ~ .c4t-translations__tabs .c4t-translations__tab--9,
.c4t-translations__radio--10:checked ~ .c4t-translations__tabs .c4t-translations__tab--10,
.c4t-translations__radio--11:checked ~ .c4t-translations__tabs .c4t-translations__tab--11,
.c4t-translations__radio--12:checked ~ .c4t-translations__tabs .c4t-translations__tab--12,
.c4t-translations__radio--13:checked ~ .c4t-translations__tabs .c4t-translations__tab--13 {
    color: var(--c4t-primary, #eb1700) !important;
    background: #fff;
    border-color: var(--border-color, #e0e0e0);
    border-bottom-color: #fff;
}
.c4t-translations__radio--1:checked ~ .c4t-translations__panel--1,
.c4t-translations__radio--2:checked ~ .c4t-translations__panel--2,
.c4t-translations__radio--3:checked ~ .c4t-translations__panel--3,
.c4t-translations__radio--4:checked ~ .c4t-translations__panel--4,
.c4t-translations__radio--5:checked ~ .c4t-translations__panel--5,
.c4t-translations__radio--6:checked ~ .c4t-translations__panel--6,
.c4t-translations__radio--7:checked ~ .c4t-translations__panel--7,
.c4t-translations__radio--8:checked ~ .c4t-translations__panel--8,
.c4t-translations__radio--9:checked ~ .c4t-translations__panel--9,
.c4t-translations__radio--10:checked ~ .c4t-translations__panel--10,
.c4t-translations__radio--11:checked ~ .c4t-translations__panel--11,
.c4t-translations__radio--12:checked ~ .c4t-translations__panel--12,
.c4t-translations__radio--13:checked ~ .c4t-translations__panel--13 {
    display: block;
}
/* Languages tab hint - sits above the table card as a section description. */
.c4t-languages-hint {
    margin-bottom: 10px;
}