:root {
    --vf-nav-height: 50px; /* .form-editor-nav height; consumed by editor/builder body panes */
    --animation-duration: 0.3s;

    /* ViziForms design tokens — single source of truth for colors/radii used
       by widgets that may render on layouts without PicoCSS (notably
       _LayoutMinimal, used by the form editor). Each token tracks the
       PicoCSS variable when loaded and falls back to an explicit value
       otherwise, so styling stays consistent across both layouts and
       follows PicoCSS automatically wherever it IS loaded. */
    --vf-card-bg: var(--pico-card-background-color, #fff);
    --vf-text: var(--pico-color, #222);
    --vf-muted: var(--pico-muted-color, #6b7280);
    --vf-border: var(--pico-muted-border-color, #ccc);
    --vf-primary: var(--pico-primary, #2563eb);
    --vf-primary-hover: var(--pico-primary-hover, #1d4ed8);
    --vf-primary-inverse: var(--pico-primary-inverse, #fff);
    --vf-radius: var(--pico-border-radius, 6px);
    --vf-success: #16a34a;
    --vf-success-fg: #15803d;
    --vf-danger: #dc2626;
    --vf-danger-fg: #b91c1c;
    --vf-na: #6b7280;
    --vf-na-fg: #4b5563;
    --vf-font-family: var(--pico-font-family, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif);
    --vf-font-mono: var(--pico-font-family-monospace, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
}

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    width: 100%;
}

nav ul {
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
}

nav ul li {
    display: flex;
    align-items: center;
}

nav ul li a[role="button"] {
    display: flex;
    align-items: center;
    height: auto;
    line-height: normal;
    padding: 0.375rem 1rem;
    margin: 0;
}



.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    padding-left: 1rem;
}

.logo svg {
    width: 27px;
    height: 27px;
    transition: transform var(--animation-duration) ease;
}

.logo:hover svg {
    transform: rotate(5deg) scale(1.1);
}

nav li:has(details.dropdown) {
    position: relative;
}

nav details.dropdown {
    margin: 0;
    position: static;
}

nav details.dropdown summary {
    display: flex;
    align-items: center;
    height: auto;
    line-height: normal;
    padding: 0.375rem 1rem;
    margin: 0;
}

nav details.dropdown[open] > ul {
    position: absolute;
    right: 0;
    margin: 0;
    margin-right: 1rem;
    padding: 0;
    background: var(--pico-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    list-style: none;
    min-width: 220px;
    display: flex;
    flex-direction: column;
}

nav details.dropdown > ul li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    width: 100%;
}

nav details.dropdown > ul li a,
nav details.dropdown > ul li button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
    font-size: 0.875rem;
}

nav details.dropdown > ul li a:hover,
nav details.dropdown > ul li button:hover {
    background-color: var(--pico-dropdown-hover-background-color);
    text-decoration: none;
}

.signin-button {
    margin-top: 0.75rem;
}

/* SSO login */
.sso-request-access {
    text-align: center;
    margin-top: 0.5rem;
}

/* Logout form styling within dropdown */
.logout-form {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: stretch;
}

.logout-button {
    width: 100%;
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.875rem;
    color: var(--pico-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.logout-button:hover {
    background-color: var(--pico-dropdown-hover-background-color);
}

/* View All Forms toggle in dropdown */
.view-all-forms-toggle {
    padding: 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: stretch;
}

.view-all-forms-toggle label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin: 0;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    width: 100%;
    box-sizing: border-box;
}

.view-all-forms-toggle input[type="checkbox"][role="switch"] {
    margin: 0;
    flex-shrink: 0;
}

/* Dropdown action buttons (Export/Import) */
.dropdown-action-button {
    width: 100%;
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.875rem;
    color: var(--pico-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.dropdown-action-button:hover {
    background-color: var(--pico-dropdown-hover-background-color);
}

/* Import Dialog Styles */
#importDialog {
    max-width: 500px;
}

.import-warning {
    background-color: var(--pico-mark-background-color, #fff3cd);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* BigQuery Warning Banner */
.bq-warning-banner {
    background-color: var(--pico-mark-background-color, #fff3cd);
    border: 1px solid #f59e0b;
    border-radius: var(--pico-border-radius, 4px);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.bq-warning-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--pico-color, inherit);
}

.bq-warning-content svg {
    flex-shrink: 0;
    color: #f59e0b;
}

.bq-warning-content span {
    flex: 1;
}

.bq-warning-dismiss {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s;
    flex-shrink: 0;
}

.bq-warning-dismiss:hover {
    opacity: 1;
}

/* _LayoutMinimal has no PicoCSS — pin a sans-serif so every widget on the
   minimal-layout body inherits a consistent font instead of falling back
   to the browser serif default. */
.minimal-layout {
    font-family: var(--vf-font-family);
}

.minimal-layout .bq-warning-banner {
    margin: 0 1rem 0.5rem 1rem;
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    min-width: 300px;
    padding: 16px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    animation: slideIn var(--animation-duration) ease;
    position: relative;
    overflow: hidden;
}

@media (prefers-color-scheme: dark) {
    .toast {
        background: var(--pico-card-background-color);
    }
}

.minimal-layout .toast {
    min-width: 300px;
    padding: 16px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    animation: slideIn 0.3s ease;
    position: relative;
    overflow: hidden;
}

.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
}

.toast.success::before { background: var(--pico-color-green-550); }
.toast.error::before { background: var(--pico-color-red-550); }
.toast.warning::before { background: var(--pico-color-amber-550); }
.toast.info::before { background: var(--pico-color-pumpkin-550); }

.minimal-layout .toast.success::before { background: #28a745; }
.minimal-layout .toast.error::before { background: #dc3545; }
.minimal-layout .toast.warning::before { background: #ffc107; }
.minimal-layout .toast.info::before { background: #0066cc; }

.toast-icon {
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
    margin: 0;
}

.minimal-layout .toast-message {
    flex: 1;
    margin: 0;
}

.toast-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--animation-duration);
}

.toast-close:hover {
    opacity: 1;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.toast.removing {
    animation: slideOut var(--animation-duration) ease;
}

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.minimal-layout #loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.minimal-layout .spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Forms List Page Styles */
.forms-header {
    margin-bottom: 1.5rem;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.header-content h1 {
    margin: 0;
}

.header-content a[role="button"] {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.search-filter-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.search-box {
    position: relative;
    flex: 1;
}

.search-box svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
}

.search-box input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    height: auto;
    margin: 0;
}

/* Forms Table */
.forms-table-container {
    overflow-x: auto;
    max-width: 100%;
}

.forms-table {
    width: 100%;
    table-layout: auto;
}

.forms-table th {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding-inline: 0.4rem;
}

.forms-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.forms-table th.sortable:hover {
    opacity: 0.7;
}

.forms-table th.sortable::after {
    content: '⇅';
    opacity: 0.3;
    font-size: 0.75rem;
    margin-left: 0.5rem;
    position: relative;
    top: -0.1em;
}

.forms-table th.sortable.sort-asc::after {
    content: '↑';
    opacity: 1;
}

.forms-table th.sortable.sort-desc::after {
    content: '↓';
    opacity: 1;
}

.forms-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding-inline: 0.4rem;
}


/* Column widths */
/* Icon column - fixed width */
.forms-table th:nth-child(1),
.forms-table td:nth-child(1) {
    width: 60px;
    text-align: center;
}

.form-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
}

.form-icon-placeholder {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pico-muted-border-color);
    border-radius: 4px;
    opacity: 0.5;
}

.form-icon-placeholder svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

/* Name column - flexible width */
.forms-table th:nth-child(2),
.forms-table td:nth-child(2) {
    width: auto;
}

/* Status column - fixed width */
.forms-table th:nth-child(3),
.forms-table td:nth-child(3) {
    width: 100px;
    text-align: center;
}

/* Active switch in status column */
.forms-table td:nth-child(3) input[type="checkbox"][role="switch"] {
    margin: 0;
    vertical-align: middle;
}

/* User column - fixed width, shown only in view-all mode */
.forms-table th.user-column,
.forms-table td.user-column {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forms-table th.public-column,
.forms-table td.public-column {
    width: 100px;
    text-align: center;
    white-space: nowrap;
}

.forms-table td.public-column input[type="checkbox"][role="switch"] {
    margin: 0;
    vertical-align: middle;
}

.form-public-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background-color: #d1fadf;
    color: #027a48;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    cursor: help;
}

.form-name-with-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
}

/* Generalised pill used for form-leaf metadata badges (active/public/owner/date). */
.vf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    cursor: help;
}

.vf-badge svg {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
}

.vf-badge-label {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vf-badge--active   { background-color: #d1fadf; color: #027a48; }
.vf-badge--public   { background-color: #d1e9ff; color: #1849a9; }
.vf-badge--inactive,
.vf-badge--private  { background-color: #f2f4f7; color: #667085; }
.vf-badge--owner    { background-color: #f4ebff; color: #6941c6; text-transform: none; letter-spacing: 0; }
.vf-badge--date     { background-color: #fef0c7; color: #b54708; text-transform: none; letter-spacing: 0; }
.vf-badge--folder   { background-color: #fff1e6; color: #b54708; text-transform: none; letter-spacing: 0; }

.form-leaf-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    min-width: 0;
}

/* Push actions to the right of the badges. */
.form-leaf-item .form-leaf-actions {
    margin-left: auto;
}

/* Smart-with-space: hide labels on narrow viewports — icons + tooltips still carry meaning. */
@media (max-width: 768px) {
    .vf-badge-label { display: none; }
    .vf-badge { padding: 0.15rem 0.35rem; }
}

.form-name-locked {
    font-weight: 600;
    color: var(--pico-color);
    cursor: help;
}

/* Last Modified column - fixed width */
.forms-table th:nth-child(4),
.forms-table td:nth-child(4),
.forms-table th:nth-child(5),
.forms-table td:nth-child(5),
.forms-table .date-cell {
    width: 110px;
    white-space: nowrap;
}

/* Actions column - fixed width, right aligned */
.forms-table th:nth-child(5),
.forms-table td:nth-child(5),
.forms-table th:nth-child(6),
.forms-table td:nth-child(6),
.forms-table .actions-cell {
    width: 195px;
    white-space: nowrap;
}

.form-name-cell {
    overflow: hidden;
}

.form-name-link {
    font-weight: 600;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-description {
    opacity: 0.7;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.date-cell {
    opacity: 0.7;
    font-size: 0.85rem;
    white-space: nowrap;
}

.actions-cell {
    white-space: nowrap;
    text-align: right;
}

.actions-cell button {
    margin-left: 0.5rem;
}

.actions-cell button:first-child {
    margin-left: 0;
}

/* Icon-only buttons in table */
.icon-button {
    padding: 0.5rem;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: transparent !important;
    border-color: var(--pico-muted-border-color) !important;
    color: var(--pico-tooltip-background-color) !important;
    opacity: 0.85;
    width: 36px;
    height: 36px;
}

.icon-button:hover {
    background-color: transparent !important;
    opacity: 0.7;
}

.icon-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Delete button with red color */
button.icon-button.contrast {
    color: var(--pico-del-color) !important;
    border-color: var(--pico-del-color) !important;
    background-color: transparent !important;
}

button.icon-button.contrast:hover {
    background-color: transparent !important;
    opacity: 0.8;
}

/* Disabled icon buttons */
.icon-button:disabled,
.icon-button[disabled] {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

/* Save Indicator */
.save-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    padding: 10px 16px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--animation-duration) ease;
    z-index: 10001;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
}

.save-indicator.show {
    opacity: 1;
    transform: translateY(0);
}

.save-indicator.saving {
    color: var(--pico-primary);
    border-color: var(--pico-primary);
}

.save-indicator.saving .icon {
    animation: spin 1s linear infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.save-indicator .icon {
    width: 16px;
    height: 16px;
}

.save-indicator.saved {
    color: var(--pico-ins-color);
    border-color: var(--pico-ins-color);
}

.save-indicator.error {
    color: var(--pico-del-color);
    border-color: var(--pico-del-color);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
}

.empty-state svg {
    width: 120px;
    height: 120px;
    margin: 0 auto 0.5rem;
    opacity: 0.3;
}

.empty-state h3 {
    color: var(--muted-color);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.empty-state p {
    margin-bottom: 1rem;
}

.empty-state-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}


/* Main Content Container - widen beyond Pico's responsive gutters */
main.container {
    max-width: none;
    padding-inline: 0.75rem;
}

/* Smooth Page Transitions */
main {
    animation: fadeIn 0.5s ease;
}

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


/* Confirm Dialog */
.confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    animation: fadeIn var(--animation-duration) ease;
}

.confirm-dialog-content {
    background: var(--pico-card-background-color);
    padding: 2rem;
    border-radius: var(--border-radius);
    max-width: 400px;
    width: 90%;
    animation: slideUp var(--animation-duration) ease;
}

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

/* SQL Dry-Run Dialog — consumes the --vf-* tokens at the top of this file
   so colors track PicoCSS where it's loaded and fall back to explicit
   values on PicoCSS-less layouts (e.g. the form editor's _LayoutMinimal). */
.dry-run-dialog .confirm-dialog-content {
    position: relative;
    max-width: 700px;
    background: var(--vf-card-bg);
    color: var(--vf-text);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
}

.dry-run-dialog h3 {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--vf-text);
    padding-right: 2rem;
}

.dry-run-dialog .dry-run-close {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--vf-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.dry-run-dialog .dry-run-close:hover {
    color: var(--vf-text);
}

.dry-run-dialog .action-buttons {
    justify-content: flex-end;
}

.dry-run-dialog .btn-primary {
    background: var(--vf-primary);
    color: var(--vf-primary-inverse);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--vf-radius);
    font-weight: 500;
    cursor: pointer;
}

.dry-run-dialog .btn-primary:hover {
    background: var(--vf-primary-hover);
}

.dry-run-dialog .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.dry-run-ceiling {
    margin: 0.5rem 0 1rem;
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--vf-primary) 8%, var(--vf-card-bg));
    color: var(--vf-text);
    border-radius: var(--vf-radius);
    font-size: 0.9rem;
}

.dry-run-textarea {
    width: 100%;
    min-height: 160px;
    font-family: var(--vf-font-mono);
    font-size: 0.9rem;
    padding: 0.75rem;
    border: 1px solid var(--vf-border);
    background: var(--vf-card-bg);
    color: var(--vf-text);
    border-radius: var(--vf-radius);
    resize: vertical;
}

.dry-run-textarea:focus {
    outline: none;
    border-color: var(--vf-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-primary) 15%, transparent);
}

.dry-run-results {
    margin-top: 1rem;
}

.dry-run-check-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.4rem;
    border-radius: var(--vf-radius);
    font-size: 0.9rem;
}

.dry-run-check-icon {
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.dry-run-check-body code {
    background: rgba(0, 0, 0, 0.08);
    padding: 0 0.25rem;
    border-radius: 3px;
}

.dry-run-check-pass {
    background: color-mix(in srgb, var(--vf-success) 12%, transparent);
    color: var(--vf-success-fg);
}

.dry-run-check-fail {
    background: color-mix(in srgb, var(--vf-danger) 12%, transparent);
    color: var(--vf-danger-fg);
}

.dry-run-check-na {
    background: color-mix(in srgb, var(--vf-na) 12%, transparent);
    color: var(--vf-na-fg);
}

.dry-run-error {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: color-mix(in srgb, var(--vf-danger) 10%, transparent);
    color: var(--vf-danger-fg);
    border-radius: var(--vf-radius);
    font-size: 0.9rem;
}

/* Focus States */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--pico-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pico-primary) 10%, transparent);
}

/* Login Page Styles */
.login-container {
    max-width: 480px;
    margin: 1rem auto;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header svg {
    width: 48px;
    height: 48px;
    color: var(--primary);
    margin-bottom: 1rem;
}

.demo-hint {
    background: var(--secondary-focus);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-top: 1rem;
    font-size: 0.875rem;
}

.demo-hint code {
    background: var(--code-background-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

/* Form Editor Styles */
.form-editor-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--vf-nav-height);
    background: var(--pico-card-background-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-editor-nav .nav-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.form-editor-nav .nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.form-editor-nav button {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    margin: 0;
}

#surveyCreatorContainer {
    position: absolute;
    top: var(--vf-nav-height);
    height: calc(100% - var(--vf-nav-height));
    width: 100%;
}

/* Form Preview Styles */
.preview-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
}

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

.preview-header h1 {
    margin: 0;
    color: #333;
    font-size: 2rem;
}

.preview-header p {
    margin: 0.5rem 0 0 0;
    color: #6c757d;
}

.preview-badge {
    display: inline-block;
    background: #17a2b8;
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

#surveyContainer {
    margin: 0 auto;
}

.no-form-message {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
}

.no-form-message svg {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    stroke: #dee2e6;
}

/* Share link button styles */
.share-link-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    background: var(--pico-primary);
    color: var(--pico-color-pumpkin-550);
    border: none;
    border-radius: var(--pico-border-radius);
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all var(--animation-duration) ease;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 600;
}

.share-link-btn:hover {
    background: var(--pico-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.share-link-btn svg {
    width: 16px;
    height: 16px;
}

/* Share link dialog styles */
.share-link-container {
    margin: 1rem 0;
    position: relative;
}

.share-link-input {
    width: 100%;
    padding-right: 70px;
}

.share-link-copy-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    padding: 0 10px;
    font-size: 0.8rem;
}

.share-link-description {
    font-size: 0.9rem;
    color: var(--pico-muted-color);
    margin-top: 0;
}

/* Form Submission Styles */
.submit-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.submit-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
}

.submit-header h1 {
    margin: 0;
    color: #333;
    font-size: 2rem;
}

.submit-header p {
    margin: 0.5rem 0 0 0;
    color: #6c757d;
}

.thank-you-message {
    text-align: center;
    padding: 3rem;
    color: var(--survey-brand-primary-backcolor);
}

.thank-you-message svg {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    stroke: var(--survey-brand-primary-backcolor);
}

.loading {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
}

/* Responses Page Styles */
.responses-header {
    margin-bottom: 2rem;
}

.responses-header .header-content h1 {
    margin-bottom: 0.5rem;
}

.responses-header .header-content p {
    color: var(--pico-muted-color);
    margin: 0;
}

.responses-table-container {
    margin-top: 2rem;
    overflow-x: auto;
    width: 100%;
}

.responses-table {
    width: 100%;
    table-layout: auto;
}

.responses-table th {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.responses-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Sortable header styles for responses table */
.responses-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.responses-table th.sortable:hover {
    opacity: 0.7;
}

.responses-table th.sortable::after {
    content: '⇅';
    opacity: 0.3;
    font-size: 0.75rem;
    margin-left: 0.5rem;
    position: relative;
    top: -0.1em;
}

.responses-table th.sortable.sort-asc::after {
    content: '↑';
    opacity: 1;
}

.responses-table th.sortable.sort-desc::after {
    content: '↓';
    opacity: 1;
}

/* Column widths for responses table */
.responses-table th:nth-child(1),
.responses-table td:nth-child(1) {
    width: auto; /* Form Name - flexible */
}

.responses-table th.user-column,
.responses-table td.user-column {
    width: 200px;
}

.responses-table th:nth-child(3),
.responses-table td:nth-child(3) {
    width: 150px; /* Total Responses */
    text-align: center;
}

.responses-table th:nth-child(4),
.responses-table td:nth-child(4) {
    width: 180px; /* Last Response */
}

.responses-table th:nth-child(5),
.responses-table td:nth-child(5) {
    width: 195px; /* Actions */
}

.response-card {
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.response-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.response-metadata {
    font-size: 0.9rem;
    color: var(--pico-muted-color);
}

.response-data {
    background: var(--pico-background-color);
    padding: 1rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    white-space: pre-wrap;
    border: 1px solid var(--pico-muted-border-color);
}

.response-number {
    background: var(--pico-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.share-link {
    font-family: monospace;
    font-size: 0.85rem;
    background: var(--pico-background-color);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--pico-muted-border-color);
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.response-count {
    font-weight: 600;
}

.response-count.zero {
    color: var(--pico-muted-color);
}

.response-count.has-responses {
    color: var(--pico-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
    #toast-container {
        left: 10px;
        right: 10px;
    }

    .toast {
        min-width: auto;
    }

    .forms-grid {
        grid-template-columns: 1fr;
    }

    .forms-header {
        padding: 1rem;
    }

    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .search-filter-bar {
        flex-direction: column;
        width: 100%;
    }

    .search-box {
        max-width: 100%;
    }

    .forms-table {
        font-size: 0.8rem;
    }

    .forms-table th,
    .forms-table td {
        padding: 0.5rem;
    }

    .actions-cell {
        flex-wrap: wrap;
    }

    #formsContainer {
        padding: 0 1rem;
    }
    
    /* Responses table responsive styles */
    #responsesContainer {
        padding: 0 1rem;
    }

    .responses-header {
        padding: 1rem;
    }

    .responses-table {
        font-size: 0.8rem;
        min-width: 600px;
    }

    .responses-table th,
    .responses-table td {
        padding: 0.5rem;
    }

    .share-link {
        max-width: 120px;
        font-size: 0.75rem;
    }

    .actions-column {
        width: 120px;
    }
    
    .responses-table .actions-cell {
        gap: 0.5rem;
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .responses-table {
        font-size: 0.7rem;
        min-width: 500px;
    }

    .responses-table th,
    .responses-table td {
        padding: 0.4rem;
    }

    .share-link {
        max-width: 100px;
        font-size: 0.7rem;
    }
}

/* Print Styles */
@media print {
    nav, footer, .action-buttons, .theme-toggle {
        display: none !important;
    }
}

/* Minimal Layout Styles (for SurveyJS pages) */
body.minimal-layout {
    margin: 0;
    background: #f8f9fa;
}

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.minimal-layout #loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.minimal-layout .spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ==========================================
   Share Dialog Styles
   ========================================== */

.share-dialog-content {
    max-width: 500px;
}

.share-user-search {
    position: relative;
    margin-bottom: 1rem;
}

.share-user-search input {
    width: 100%;
    margin-bottom: 0;
}

.user-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-top: none;
    border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.user-result {
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.user-result:last-child {
    border-bottom: none;
}

.user-result:hover {
    background: var(--pico-dropdown-hover-background-color);
}

.user-name {
    font-weight: 600;
}

.user-email {
    font-size: 0.85rem;
    color: var(--pico-muted-color);
}

.no-results {
    padding: 0.75rem 1rem;
    color: var(--pico-muted-color);
    text-align: center;
}

.selected-user-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    padding: 0.75rem 1rem;
    border-radius: var(--pico-border-radius);
    margin-bottom: 1rem;
}

/* Cancel button - outline style */
.share-dialog-content .action-buttons button.secondary {
    background: transparent;
    border: 1px solid var(--pico-muted-border-color);
    color: var(--pico-color);
}

.share-dialog-content .action-buttons button.secondary:hover {
    background: var(--pico-muted-border-color);
}

.clear-selection {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
    opacity: 0.7;
    width: auto;
    color: inherit;
}

.clear-selection:hover {
    opacity: 1;
}

.share-info {
    font-size: 0.875rem;
    color: var(--pico-muted-color);
    margin-bottom: 1rem;
}

/* ==========================================
   Folders Page Styles
   ========================================== */

.folders-header {
    margin-bottom: 2rem;
}

.folders-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.folders-header h1 {
    margin: 0;
}

.folders-description {
    color: var(--pico-muted-color);
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.folder-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0.5rem;
    font-size: 0.85rem;
}

.folder-filters label {
    color: var(--pico-muted-color);
}

.folder-filters select {
    padding: 0.15rem 0.5rem;
    font-size: 0.85rem;
    min-width: 7rem;
    margin: 0;
    height: auto;
}

.folder-tree-container {
    background: var(--pico-card-background-color);
    border-radius: var(--pico-border-radius);
    padding: 1rem;
}

.folder-tree {
    font-size: 0.95rem;
}

.folder-node {
    margin-bottom: 2px;
}

.folder-item,
.form-leaf-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--pico-border-radius);
    transition: background-color 0.15s;
}

.folder-item {
    cursor: pointer;
}

.folder-item:hover,
.form-leaf-item:hover {
    background: var(--pico-muted-border-color);
}

.folder-item:focus-within,
.form-leaf-item:focus-within {
    outline: 2px solid var(--pico-primary-focus, var(--pico-primary));
    outline-offset: -2px;
}

.folder-expand {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, opacity 0.15s;
}

.folder-expand.is-empty {
    visibility: hidden;
}

.folder-expand.expanded svg {
    transform: rotate(90deg);
}

.folder-icon,
.folder-icon-img {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.folder-icon {
    color: var(--pico-primary);
}

.folder-icon-img {
    border-radius: 4px;
    object-fit: cover;
}

.folder-text {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.15;
}

.folder-name {
    font-weight: 500;
    flex: 0 0 auto;
}

.folder-subtitle {
    font-style: italic;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.folder-count {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--pico-muted-color);
    margin-right: 0.5rem;
    margin-left: auto;
}

.folder-actions,
.form-leaf-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0.55;
    transition: opacity 0.15s;
}

.folder-item:hover .folder-actions,
.form-leaf-item:hover .form-leaf-actions,
.folder-actions:focus-within,
.form-leaf-actions:focus-within {
    opacity: 1;
}

.folder-actions .icon-button.small,
.form-leaf-actions .icon-button.small {
    padding: 0.25rem;
    font-size: 0.8rem;
}

.folder-actions .icon-button.small svg,
.form-leaf-actions .icon-button.small svg {
    width: 14px;
    height: 14px;
}

/* Hierarchy guide: vertical line anchoring children to parent. */
.folder-children {
    border-left: 1px solid var(--pico-muted-border-color);
    margin-left: 22px;
    padding-left: 16px;
}

.folder-children-empty {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    font-style: italic;
}

/* Delete warning */
.delete-warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--pico-border-radius);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--pico-color);
}

/* Move Form Dialog Styles */
.move-current-folder {
    font-size: 0.9rem;
    color: var(--pico-muted-color);
    margin-bottom: 1rem;
}

/* Form leaf rows */
.form-leaf-item .form-leaf-icon-img,
.form-leaf-item .form-leaf-icon-placeholder {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-leaf-item .form-leaf-icon-img {
    border-radius: 4px;
    object-fit: cover;
}

.form-leaf-item .form-leaf-icon-placeholder {
    color: var(--pico-muted-color);
}

.form-leaf-item .form-leaf-name {
    flex: 1;
    font-weight: 400;
    color: var(--pico-color);
}

/* Align form icon under folder icon: folder rows have an extra chevron column. */
.form-leaf-item {
    padding-left: calc(0.75rem + 24px + 0.5rem);
}