@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&display=swap');

:root {
    /* --- Paleta da Marca ProForma --- */

    /* Cor Primária: Azul Marinho Profundo (Usado em textos principais e fundos escuros) */
    --primary-color: #0F172A;
    /* Hover: Um tom ligeiramente mais claro do marinho */
    --primary-hover: #1E293B;
    /* Light: Um cinza-azulado muito claro para fundos sutis */
    --primary-light: #F1F5F9;

    /* Cor de Destaque: Azul Violeta Vibrante (Do "pixel" no logo) */
    /* Use para botões de ação principal (CTAs), links ou elementos ativos */
    --accent-color: #5A45FF;

    /* --- Cores Semânticas (Ajustadas para combinar) --- */
    --success-color: #10B981; /* Verde Esmeralda */
    --danger-color: #EF4444;  /* Vermelho Sólido */
    --warning-color: #F59E0B; /* Âmbar */

    /* --- Tipografia e Fundos (Tema Claro) --- */
    /* Texto principal usa a cor primária para contraste máximo */
    --text-color: #0F172A;
    /* Texto secundário em um tom de cinza-azulado */
    --text-secondary: #475569;

    /* Fundos limpos */
    --background-color: #FFFFFF;
    --background-secondary: #F8FAFC;
    --container-background: #FFFFFF;

    /* --- Bordas e Sombras (Tons frios) --- */
    --border-color: #E2E8F0;
    --border-hover: #CBD5E1;

    /* Sombras com um leve tom azulado para modernidade */
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.1);

    /* Mantendo o raio original */
    --radius: 2px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', -apple-system, system-ui, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.4;
    font-size: 14px;
    overflow-x: hidden;
}

/* ==================== Typography ==================== */
h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color);
    margin: 20px 0;
    text-align: center;
    line-height: 1.3;
}

h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 12px;
    line-height: 1.3;
}

/* Global text wrapping rules */
p, div, span, li, td, th {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Prevent long URLs or text from breaking layout */
a, code, pre {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
}

/* ==================== Buttons ==================== */
button {
    background-color: var(--container-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 7px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.1s;
}

button.secondary {
    background-color: var(--background-secondary);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

/* Ensure consistent button height in user-controls */
.user-controls button {
    height: 36px; /* Slightly taller for better touch target */
    padding: 0 16px; /* Standard horizontal padding */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Icon-only buttons (must have class .icon-only) */
.user-controls button.icon-only { 
    width: 36px;
    padding: 0;
}

button.secondary:hover {
    background-color: #e2e6ea;
    border-color: #adb5bd;
}

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

button:hover:not(:disabled) {
    background-color: var(--background-secondary);
    border-color: var(--border-hover);
}

button:active:not(:disabled) {
    background-color: var(--border-color);
}

button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

button.primary {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

button.primary:hover:not(:disabled) {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

button.danger {
    background-color: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

button.danger:hover:not(:disabled) {
    background-color: #a92b2e;
    border-color: #a92b2e;
}

button.success {
    background-color: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

button.success:hover:not(:disabled) {
    background-color: #0d660d;
    border-color: #0d660d;
}

/* ==================== Page Layout ==================== */
.page-header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--container-background);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    height: 48px;
}

.page-header h1 {
    font-size: 14px;
    margin-left: 8px;
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.back-button {
    font-size: 13px;
    padding: 5px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-header .save-indicator {
    margin: 0 16px;
}

/* ==================== Ribbon Style Toolbar ==================== */
.toolbar {
    background: var(--background-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.toolbar-group {
    display: flex;
    gap: 4px;
    padding: 0 12px;
    border-right: 1px solid var(--border-color);
}

.toolbar-group:last-child {
    border-right: none;
}

.toolbar button {
    min-width: 28px;
    padding: 5px 8px;
}

/* ==================== Document Viewer ==================== */
.document-viewer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--background-secondary);
    overflow: auto;
    padding: 20px;
}

/* ==================== Model Cards ==================== */
#models-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Responsive grid */
    gap: 20px;
    padding: 20px;
    align-items: stretch; /* Stretch items to fill grid cell height */
}

.model-card {
    background: var(--container-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 15px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push buttons to bottom */
    min-height: 150px; /* Standard minimum height */
    max-height: 150px; /* Standard maximum height */
    overflow: hidden; /* Hide overflowing content, especially text */
    text-align: left;
    transition: transform 0.1s ease-in-out;
}

.model-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.model-card .card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    flex-grow: 1; /* Allow header to take available space */
    min-height: 40px; /* Ensure space for title even if short */
}

.model-card h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    line-height: 1.35; 
    flex-grow: 1; 
    
    /* Strict 2-line limit */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Removed max-height to prevent clipping. line-clamp handles the height. */
    
    padding-right: 5px; 
    word-break: break-word; 
}

.model-card h2 i {
    margin-right: 8px;
    font-size: 18px;
    vertical-align: middle;
}

.model-card .context-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    padding: 0;
    height: 24px; /* Ensure clickable area */
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Don't shrink the button */
}

.model-card .context-btn:hover {
    color: var(--primary-color);
    background-color: var(--background-secondary);
}

.model-card .card-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px; /* Space between title/menu and buttons */
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.model-card .card-buttons button {
    flex: 1; /* Distribute space equally among buttons */
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
}

.model-card .card-buttons button i {
    margin-right: 5px;
}

.page-container {
    width: 8.5in;
    min-height: 12.02in; /* Proporcional a uma folha A4 (8.5in * 1.414) */
    max-width: calc(100vw - 400px);
    background: var(--container-background);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    padding: 1in;
    margin: 0 auto 20px auto;
    position: relative;
    box-sizing: border-box;
    /* FIX: Force no internal scrollbars on the page itself. */
    overflow: visible !important; 
    /* FIX: Revert to block, ensure it doesn't shrink in flex container */
    display: block;
    flex-shrink: 0;
    height: auto !important; /* Ensure it grows with content */
}

/* Clearfix to ensure container wraps floated content */
.page-container::after {
    content: "";
    display: table;
    clear: both;
}

/* Force aggressive containment for all children */
.page-container * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Ensure content inside doesn't create horizontal overflow */
    word-break: break-word; /* Aggressive word breaking */
    overflow-wrap: break-word; /* Standard word breaking */
    /* Prevent child elements from creating their own scroll containers */
    overflow: visible !important; 
    /* NUCLEAR FIX: Neutralize absolute positioning from Word text boxes */
    /* This forces 'ghost' elements back into the document flow so the page grows */
    position: static !important;
    float: none !important; /* Optional: flatten floats too if they cause issues, though floats usually handle ok with clearfix */
}

/* Exception: We might want relative positioning for specific known elements if needed, 
   but for raw doc conversion, static is safest to prevent overflow. 
   If images break, we can specifically target 'img' to allow float, 
   but 'page-container::after' handles floats. 'position: absolute' is the real enemy. */

/* Ensure images never overflow */
.page-container img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain; 
    display: block; /* Treat images as blocks to avoid line-height weirdness */
    margin: 10px auto; /* Center images */
}

/* ==================== Form Sections ==================== */
.form-section {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 24px;
    background: var(--background-color);
    position: relative;
}

.form-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 16px;
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: 4px;
    display: block;
}

/* ==================== Form Elements ==================== */
fieldset {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 16px;
    background: var(--background-color);
}

fieldset legend {
    font-weight: 600;
    font-size: 13px;
    padding: 0 6px;
    color: var(--text-color);
}

.panel-warning {
    background-color: #fff4ce;
    border: 1px solid var(--warning-color);
    padding: 12px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: 16px;
}

.field-config-group,
.field-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.field-config-group label,
.field-input-group label {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
}

.field-config-group select,
.field-config-group textarea,
.field-config-group input[type="number"],
.field-config-group input[type="text"],
.field-input-group input[type="text"],
.field-input-group input[type="number"],
.field-input-group input[type="date"],
.field-input-group textarea {
    width: 100%;
    padding: 6px 8px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    font-size: 14px;
    font-family: inherit;
    background-color: var(--container-background);
    transition: border-color 0.1s;
}

.field-config-group select:focus,
.field-config-group textarea:focus,
.field-config-group input:focus,
.field-input-group input:focus,
.field-input-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.field-config-group textarea,
.field-input-group textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.field-input-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 4px 0;
}

/* Radio group styles */
.radio-group {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 400;
}

.radio-group input[type="radio"] {
    accent-color: var(--primary-color);
    width: 16px;
    height: 16px;
}

/* ==================== Save Indicator ==================== */
.save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 16px;
}

.save-indicator.saving {
    color: var(--warning-color);
}

.save-indicator.saved {
    color: var(--success-color);
}

.save-indicator.error {
    color: var(--danger-color);
}

/* ==================== Loop Sections ==================== */
.loop-section {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 12px;
    background: var(--background-color);
}

.loop-section legend {
    font-weight: 600;
    font-size: 14px;
    padding: 0 8px;
}

.loop-items-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.loop-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px;
    background: var(--container-background);
    position: relative;
}

.add-loop-item-btn {
    margin-top: 8px;
    width: 100%;
    justify-content: center;
}

.remove-loop-item-btn {
    padding: 4px 8px;
    font-size: 12px;
}

/* ==================== Tabs (Generic) ==================== */
.tab-header {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.tab-link {
    padding: 8px 10px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 14px;
    white-space: normal; /* Allow text wrapping */
    text-align: left;
    height: auto;
    flex: 1; /* Distribute space equally */
}

.tab-link.active {
    border-bottom-color: var(--primary-color);
    font-weight: 600;
    color: var(--primary-color);
}

.tab-link:hover:not(.active) {
    background-color: var(--background-secondary);
}

.tab-content {
    display: none;
    animation: fadeIn 0.2s ease-in-out;
}

.tab-content.active {
    display: block;
}

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

/* ==================== Navigation Tabs (App Specific) ==================== */
.tabs-container {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

.tabs-container .tab-header {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    border-bottom: none; /* Handled by container */
}

.tabs-container .tab-link {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    flex: initial; /* Don't stretch */
}

.tabs-container .tab-link:hover {
    color: var(--primary-color);
    background: rgba(0,0,0,0.02);
}

.tabs-container .tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Settings Grid */
.settings-grid .form-section {
    background: var(--container-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 0; /* Let grid handle gap */
}

.settings-grid .form-section:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.settings-grid h3 {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: none; /* Override default form-section style */
}


/* ==================== Field Styles ==================== */
.static-field {
    /* Fundo sutil usando o cinza-azulado muito claro */
    background-color: var(--primary-light);
    padding: 2px 5px;
    border-radius: var(--radius);
    cursor: pointer;
    /* Transição suave para todas as propriedades alteráveis */
    transition: all 0.15s ease-in-out;
    display: inline; /* Flow with text */
    white-space: pre-wrap; /* Preserve spaces */
    box-decoration-break: clone; /* Style across line breaks */
    -webkit-box-decoration-break: clone;
    font-size: 0.95em;
    /* Borda sutil usando a cor de borda padrão */
    border: 1px solid var(--border-color);
    /* Cor do texto principal para garantir contraste */
    color: var(--primary-color);
    margin: 0 2px;
    line-height: 1.6;
    vertical-align: baseline;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.static-field:hover {
    /* No hover, a borda assume a cor de destaque vibrante */
    border-color: var(--accent-color);
    /* O fundo muda para um tom muito leve de violeta para feedback (hardcoded pois não temos essa var) */
    background-color: #eef2ff;
}

.static-field.focused,
.static-field.selected {
    /* Estado selecionado preenchido com a cor de destaque */
    background-color: var(--accent-color);
    color: #ffffff; /* Texto branco para contraste */
    border-color: var(--accent-color);
}

/* ==================== Loading States ==================== */
.loading-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* ==================== Empty States ==================== */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ==================== Scrollbar ==================== */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: var(--background-color);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border: 3px solid var(--background-color);
    border-radius: 7px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* ==================== Status Bar ==================== */
.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: var(--accent-color);
    color: white;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 12px;
    gap: 16px;
    z-index: 1000;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==================== Dropdown Menu ==================== */
select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L6 5L11 1' stroke='%23605E5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

/* ==================== Context Menu Style ==================== */
.context-menu {
    position: fixed;
    background: var(--container-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 4px 0;
    min-width: 180px;
    z-index: 10000;
}

.context-menu-item {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.context-menu-item:hover {
    background-color: var(--background-secondary);
}

.context-menu-separator {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

.info-tooltip {
    margin-left: 6px;
    color: var(--text-secondary);
    cursor: help;
}

/* ==================== Responsive ==================== */
@media (max-width: 1024px) {
    .page-container {
        width: calc(100vw - 40px);
        max-width: 8.5in;
        padding: 0.75in;
    }

    .document-viewer {
        padding: 12px;
    }
}

@media (max-width: 768px) {
    .page-container {
        padding: 0.5in;
        width: calc(100vw - 24px);
    }

    .document-viewer {
        padding: 8px;
    }

    .page-header {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 12px;
    }

    .page-header h1 {
        font-size: 14px;
        width: 100%;
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    .page-container {
        padding: 0.25in;
        font-size: 13px;
        width: calc(100vw - 16px);
    }

    .static-field {
        font-size: 0.9em;
        padding: 2px 4px;
        margin: 1px 2px;
    }

    .page-container table {
        font-size: 12px;
    }

    .page-container th,
    .page-container td {
        padding: 4px 6px;
    }
}

/* ==================== Print ==================== */
@media print {
    body {
        background: white;
    }

    #edit-panel,
    #fill-panel,
    .back-button,
    button,
    .toolbar,
    .status-bar {
        display: none;
    }

    .page-container {
        box-shadow: none;
        border: none;
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: visible;
    }

    .document-viewer {
        padding: 0;
        background: white;
    }
}

/* ==================== Force Content Containment ==================== */
.page-container table * {
    max-width: 100% !important;
}

/* Prevent any element from overflowing horizontally */
.page-container,
.page-container * {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important; /* Force content to wrap within bounds */
}

/* Specific handling for inline elements */
.page-container span,
.page-container a,
.page-container strong,
.page-container em {
    display: inline;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* Aggressive fix for elements that might act as problematic wrappers */
.page-container div,
.page-container p {
    display: block; /* Ensure standard block behavior */
    white-space: normal !important;
}

/* Forcing problematic elements to 'display: contents' if they are mere wrappers,
   allowing their children to flow directly into the parent.
   Use with caution, as it effectively removes the element from the box tree. */
.page-container .mammoth-generated-wrapper-div { /* Adjust selector as needed based on actual generated HTML */
    display: contents;
}

/* ==================== Document Content Formatting ==================== */
.page-container ul,
.page-container ol {
    margin: 6px 0 6px 24px;
    padding-left: 20px;
}

.page-container li {
    margin: 2px 0;
    line-height: 1.4;
}

.page-container p {
    margin: 6px 0;
    line-height: 1.4;
}

.page-container h1,
.page-container h2,
.page-container h3,
.page-container h4 {
    margin: 12px 0 6px 0;
    line-height: 1.3;
}

.page-container hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 12px 0;
}

/* Spacing between fields */
.page-container .static-field + .static-field {
    margin-left: 3px;
}

/* Better spacing in complex layouts */
.page-container > * + * {
    margin-top: 6px;
}

/* Images should not overflow */
.page-container img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain; 
    display: block; /* Treat images as blocks to avoid line-height weirdness */
    margin: 10px auto; /* Center images */
}

/* ==================== Table Styling ==================== */
.page-container table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 14px;
    table-layout: fixed !important;
    word-wrap: break-word;
}

.page-container th,
.page-container td {
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    text-align: left;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto;
    vertical-align: top;
    line-height: 1.4;
    overflow: hidden !important;
}

.page-container th {
    background-color: var(--background-secondary);
    font-weight: 600;
}

.page-container tr:hover {
    background-color: var(--background-color);
}

/* Nested tables support */
.page-container table table {
    margin: 0;
    width: 100% !important;
}

.page-container table .static-field {
    display: inline; /* Changed from inline-block to allow text wrapping */
    margin: 0 2px;
}

/* ==================== Text Input with Tags (Filename Input) ==================== */
.text-input-with-tags {
    display: block;
    padding: 6px 8px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background-color: var(--container-background);
    min-height: 35px; /* Same as a normal input */
    cursor: text;
    line-height: 1.5;
    white-space: pre-wrap; /* Allow wrapping */
}

.text-input-with-tags:focus,
.text-input-with-tags:focus-within {
    outline: none;
    border-color: var(--accent-color);
}

.text-input-with-tags .field-tag {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary-light);
    border: 1px solid var(--primary-color);
    color: var(--primary-hover);
    border-radius: var(--radius);
    padding: 2px 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

.text-input-with-tags .field-tag .remove-tag {
    margin-left: 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px;
}

.text-input-with-tags .remove-tag:hover {
    color: var(--danger-color);
}

.suggestions-dropdown {
    position: absolute;
    background: var(--container-background);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1001; /* Ensure it's above other elements */
    /* width: 300px; Removed fixed width to allow dynamic sizing */
}

.suggestions-dropdown .suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}

.suggestions-dropdown .suggestion-item:hover,
.suggestions-dropdown .suggestion-item.highlighted {
    background-color: var(--background-secondary);
}

/* ==================== Modal Styles ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: var(--container-background);
    padding: 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 500px;
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.2s;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: var(--text-color);
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
}

.modal-close:hover {
    color: var(--text-color);
    background-color: var(--background-secondary);
}

.modal-body {
    margin-bottom: 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* File Input Styling */
.file-drop-area {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    margin-bottom: 16px;
}

.file-drop-area:hover, .file-drop-area.drag-over {
    border-color: var(--primary-color);
    background-color: var(--primary-light);
}

.file-msg {
    font-size: 14px;
    color: var(--text-secondary);
    display: block;
    margin-top: 8px;
}

.file-input {
    display: none;
}

.selected-file-name {
    margin-top: 8px;
    font-weight: 600;
    color: var(--primary-color);
    display: none;
}

/* ==================== Model Helper Info ==================== */
.info-helper-container {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.info-icon {
    color: var(--text-secondary);
    font-size: 16px;
    cursor: help;
    transition: color 0.2s;
}

.info-icon:hover {
    color: var(--primary-color);
}

.info-popover {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    background-color: var(--container-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    text-align: left;
    font-size: 13px;
    color: var(--text-color);
}

/* Show on hover */
.info-helper-container:hover .info-popover {
    opacity: 1;
    visibility: visible;
}

/* Triangle pointer for popover */
.info-popover::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background-color: var(--container-background);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: translateX(-50%) rotate(45deg);
}

.info-popover h4 {
    margin: 0 0 8px 0;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
}

.info-popover p {
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.info-popover ul {
    margin: 8px 0 12px 20px;
    padding: 0;
}

.info-popover li {
    margin-bottom: 4px;
}

.info-popover pre {
    background-color: var(--background-secondary);
    padding: 4px 8px;
    border-radius: var(--radius);
    font-family: monospace;
    font-size: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
}

/* ==================== Folder Tree Picker ==================== */
.folder-tree ul {
    list-style: none;
    padding-left: 20px;
    margin: 0;
}

.folder-tree > ul {
    padding-left: 0;
}

.tree-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: var(--radius);
    margin-bottom: 2px;
    transition: background-color 0.1s;
    font-size: 13px;
}

.tree-item:hover {
    background-color: var(--background-secondary);
}

.tree-item.selected {
    background-color: var(--primary-light);
    color: var(--primary-hover);
    font-weight: 600;
}

.tree-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    margin-right: 4px;
    cursor: pointer;
}

.tree-icon {
    color: #f8d775;
    margin-right: 8px;
    font-size: 16px;
}

.tree-item.selected .tree-icon {
    color: var(--primary-color);
}