/* Module.Configuration Styles - Module-specific only */
/* Common styles (buttons, forms, utilities) are in components.css */

/* Layout */
.configuration-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.configuration-content {
    flex: 1;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* PDF Templates Page - Two-column layout */
.pdf-templates-page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.templates-container {
    display: flex;
    gap: var(--space-20);
    flex: 1;
    overflow: hidden;
}

.templates-sidebar {
    width: 30%;
    border-right: 1px solid var(--color-border-subtle);
    padding-right: var(--space-20);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.template-editor {
    width: 70%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Settings & Preview Split */
.editor-preview-container {
    display: flex;
    gap: var(--space-20);
    flex: 1;
    overflow: hidden;
}

.editor-settings {
    width: 43%; /* ~30% of total width (43% of 70% ≈ 30%) */
    overflow-y: auto;
}

.editor-preview {
    width: 57%; /* ~40% of total width (57% of 70% ≈ 40%) */
    overflow: hidden;
    display: flex;
}

/* Filters Section */
.filters-section {
    margin-bottom: var(--space-24);
    flex-shrink: 0;
}

.filter-group {
    margin-bottom: var(--space-16);
}

.filter-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-4);
    color: var(--color-text-primary);
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.action-buttons button {
    flex: 0 0 auto;
}

/* Fix for dropdowns covering the whole page */
.filter-group .form-select,
.editor-section .form-select {
    max-width: 100%;
    width: 100%;
}

/* Ensure scrollbars are visible */
.templates-sidebar {
    overflow-y: scroll !important; /* Force scrollbar to always show */
}

.editor-settings {
    overflow-y: scroll !important; /* Force scrollbar to always show */
}

.pdf-preview-content {
    overflow-y: scroll !important; /* Force scrollbar to always show */
}

/* Template List */
.templates-list {
    flex: 1;
    overflow-y: auto;
}

.template-group {
    margin-bottom: var(--space-24);
}

.template-group h4 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-12);
}

.template-item {
    padding: var(--space-12);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-8);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.template-item:hover {
    background-color: var(--color-grey-50);
}

.template-item.active {
    background-color: var(--color-brand-primary-light);
    border-color: var(--color-brand-primary);
    color: var(--color-white);
}

.template-name {
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.template-preset {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}

.template-item.active .template-preset {
    color: rgba(255, 255, 255, 0.8);
}

.template-actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.template-actions button {
    font-size: 0.75rem;
    padding: var(--space-4) var(--space-8);
}

/* Template Editor */
.editor-content {
    background: var(--color-white);
    padding: var(--space-24);
    border-radius: var(--radius-medium);
    border: 1px solid var(--color-border-subtle);
}

.editor-content h2 {
    color: var(--color-text-primary);
    margin-bottom: var(--space-24);
}

.editor-section {
    margin-bottom: var(--space-32);
}

.editor-section h3 {
    font-size: 1.125rem;
    color: var(--color-text-primary);
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border-subtle);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
}

.checkbox-group {
    display: flex;
    gap: var(--space-16);
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-weight: normal;
}

/* Logos Section */
.logos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
}

.logo-item {
    padding: var(--space-12);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    text-align: center;
}

.logo-item label {
    display: block;
    margin-bottom: var(--space-8);
    font-weight: 600;
}

/* Elements Section */
.elements-buttons {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
}

/* Editor Actions */
.editor-actions {
    display: flex;
    gap: var(--space-12);
    padding-top: var(--space-24);
    border-top: 1px solid var(--color-border-subtle);
}

/* Base .empty-state and .empty-state p defined in components.css */

/* PDF Preview */
.pdf-preview-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.pdf-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-16);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-grey-50);
}

.pdf-preview-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.pdf-preview-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-24);
}

.pdf-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.preview-icon {
    font-size: 4rem;
    margin-bottom: var(--space-16);
}

.preview-message {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-24);
}

.preview-info {
    text-align: left;
    padding: var(--space-16);
    background: var(--color-grey-50);
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border-subtle);
}

.preview-info p {
    margin: var(--space-8) 0;
    font-size: 0.875rem;
}

.pdf-preview-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.pdf-preview-empty p {
    font-size: 1.125rem;
}

/* Placeholder Pages */
.user-management-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Removed overflow: hidden to allow scrollbar to show */
}

.user-management-page .page-content {
    flex: 1;
    overflow-y: auto;
    /* Removed padding - let .configuration-content handle the 24px padding */
    max-width: 100%; /* Full width as requested */
    margin: 0 auto;
    width: 100%;
}

/* UserManagement 2-Column Layout */
.user-management-container {
    display: flex;
    gap: var(--space-20); /* 20px gap between columns */
    flex: 1;
    overflow: visible; /* Let parent handle scrolling */
}

.role-assignments-column {
    flex: 1; /* 50% width */
    display: flex;
    flex-direction: column;
}

.permission-matrix-column {
    flex: 1; /* 50% width */
    display: flex;
    flex-direction: column;
}

/* Section styling for better visual separation */
.role-assignments-section,
.permission-matrix-section {
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    padding: var(--space-20);
    display: flex;
    flex-direction: column;
}

.role-assignments-section h3,
.permission-matrix-section h3 {
    margin-top: 0;
    margin-bottom: var(--space-16);
    color: var(--color-text-primary);
}

.help-page {
    padding: var(--space-24);
}

.page-content {
    max-width: 100%; /* Full width as requested */
    margin: 0 auto;
}

.page-content h1 {
    color: var(--color-text-primary);
    margin-bottom: var(--space-16);
}

/* Permission Matrix Grid */
.permission-matrix-container {
    margin-top: var(--space-16);
    overflow-x: auto;
}

.permission-matrix-container table {
    margin-bottom: 0;
}

.permission-matrix-container .form-check-input {
    cursor: pointer;
    width: 20px;
    height: 20px;
    /* :disabled state covered by the .form-check-input:disabled rule below */
}

/* Scope selector (Global / Projektvorlagen toggle) */
.scope-selector {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-20);
}

/* Button group — horizontal run of adjacent buttons */
.btn-group {
    display: flex;
    align-items: center;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: var(--radius-small) 0 0 var(--radius-small);
}

.btn-group .btn:last-child {
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

/* Role Assignment Form — stacked form-group rows */
.role-assignment-form {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-16);
}

.role-assignment-form .form-group {
    flex: unset; /* Override the flex:1 from components.css inside this form */
}

/* Action row below the role assignment form */
.assignment-actions {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-20);
    padding-top: var(--space-8);
}

/* Permission matrix save bar (save button + badge) */
.matrix-save-bar {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
    padding-bottom: var(--space-4);
}

/* Table bordered variant */
.table-bordered td,
.table-bordered th {
    border: 1px solid var(--color-border-subtle);
}

/* Table category group row */
.table-secondary {
    background-color: var(--color-grey-50);
}

.table-secondary td {
    color: var(--color-text-secondary);
}

/* Checkbox cell centering in permission matrix table */
.permission-matrix-checkbox {
    text-align: center;
    vertical-align: middle;
}

/* form-check-input standalone (outside .permission-matrix-container) */
.form-check-input {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--color-brand-primary);
}

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

/* Base .modal-overlay, .modal-dialog, .modal-header, .modal-body, .modal-footer
   defined in App.Web/wwwroot/css/modal.css — removed duplicates.
   Scoped: Module.Configuration ConfirmDialog uses h3 inside modal-header */
.modal-header h3 {
    margin: 0;
    color: var(--color-text-primary);
}

/* Toast Notifications */
.toast {
    position: fixed;
    top: var(--space-20);
    right: var(--space-20);
    min-width: 300px;
    max-width: 500px;
    padding: var(--space-16);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1100;
    animation: slideIn 0.3s ease;
}

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

.toast-success {
    background: var(--color-success-light);
    border-left: 4px solid var(--color-success);
    color: var(--color-success);
}

.toast-error {
    background: var(--color-error-light);
    border-left: 4px solid var(--color-error);
    color: var(--color-error);
}

.toast-warning {
    background: var(--color-warning-light);
    border-left: 4px solid var(--color-warning);
    color: #946c00;
}

.toast-info {
    background: rgba(12, 119, 190, 0.1);
    border-left: 4px solid var(--color-brand-primary);
    color: var(--color-brand-primary);
}

.toast-message {
    flex: 1;
    font-weight: 500;
}

.toast-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: var(--space-12);
    opacity: 0.6;
}

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