/* ==================== CSS Variables (Dark Theme) ==================== */
:root {
    /* Background Colors */
    --bg-primary: #171a1f;
    --bg-secondary: #1e232b;
    --bg-tertiary: #262d37;
    --bg-hover: #303845;
    --bg-active: #394559;
    --bg-elevated: #202731;
    --bg-control: #2b3340;
    --bg-canvas: #3a424e;

    /* Text Colors */
    --text-primary: #e4e8ef;
    --text-secondary: #aab4c3;
    --text-muted: #7c8798;

    /* Accent Colors */
    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;
    --accent-blue-soft: #8cc6ff;
    --accent-orange: #ff9f0a;
    --accent-orange-hover: #ffb340;
    --accent-orange-soft: rgba(255, 159, 10, 0.18);
    --accent-orange-strong: rgba(255, 159, 10, 0.3);
    --accent-green: #35c59a;
    --accent-yellow: #f2c66d;
    --accent-red: #ef7d63;
    --accent-purple: #b48ef7;

    /* Border Colors */
    --border-color: #343d49;
    --border-light: #46515f;

    /* Status Colors */
    --status-success: #4ec9b0;
    --status-warning: #dcdcaa;
    --status-error: #f48771;
    --status-info: #007acc;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Sidebar */
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 56px;
    --status-bar-height: 24px;
    --breadcrumb-height: 40px;
    --shell-header-height: 52px;

    /* Surfaces */
    --surface-color: #202731;
    --hover-color: #303845;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;

    /* Shadows */
    --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.28);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
}

html.app-theme-ios {
    --bg-primary: #0f131a;
    --bg-secondary: rgba(24, 30, 40, 0.82);
    --bg-tertiary: rgba(31, 39, 52, 0.84);
    --bg-hover: rgba(82, 124, 178, 0.16);
    --bg-active: rgba(105, 153, 217, 0.2);
    --bg-elevated: rgba(28, 35, 47, 0.86);
    --bg-control: rgba(42, 51, 66, 0.88);
    --bg-canvas: #2d3744;
    --text-primary: #eef4fb;
    --text-secondary: #bfd0e5;
    --text-muted: #8ea1b8;
    --accent-blue: #6fb6ff;
    --accent-blue-hover: #8cc8ff;
    --accent-blue-soft: #d8eeff;
    --accent-orange: #ffb65a;
    --accent-orange-hover: #ffc27b;
    --accent-orange-soft: rgba(255, 182, 90, 0.2);
    --accent-orange-strong: rgba(255, 182, 90, 0.34);
    --accent-green: #63d7be;
    --accent-yellow: #ffd57f;
    --accent-red: #ff9b84;
    --border-color: rgba(173, 196, 224, 0.16);
    --border-light: rgba(196, 214, 236, 0.28);
    --surface-color: rgba(28, 35, 47, 0.88);
    --hover-color: rgba(82, 124, 178, 0.16);
    --radius-sm: 12px;
    --radius-md: 18px;
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.34);
}

html.app-theme-ios body {
    background:
        radial-gradient(circle at top left, rgba(111, 182, 255, 0.18), transparent 36%),
        radial-gradient(circle at top right, rgba(99, 215, 190, 0.14), transparent 30%),
        linear-gradient(180deg, #0f131a 0%, #0b1016 100%);
}

html.app-theme-ios .sidebar,
html.app-theme-ios .breadcrumbs,
html.app-theme-ios .page-header,
html.app-theme-ios .module-content,
html.app-theme-ios .status-bar {
    backdrop-filter: blur(22px) saturate(1.12);
}

html.app-theme-ios .sidebar {
    background: linear-gradient(180deg, rgba(26, 32, 43, 0.88) 0%, rgba(18, 24, 34, 0.88) 100%);
    border-right: 1px solid var(--border-color);
}

html.app-theme-ios .sidebar-header,
html.app-theme-ios .sidebar-footer {
    border-color: var(--border-color);
}

html.app-theme-ios .nav-item {
    margin: 1px 8px;
    border-radius: var(--ios-radius-sm);
}

html.app-theme-ios .nav-item.active {
    border-left: none;
    box-shadow: inset 0 0 0 1px rgba(143, 197, 255, 0.38);
}

html.app-theme-ios .page-header,
html.app-theme-ios .breadcrumbs {
    background: linear-gradient(180deg, rgba(27, 34, 45, 0.84) 0%, rgba(20, 27, 38, 0.84) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--ios-radius-md);
}

html.app-theme-ios .status-bar {
    background: linear-gradient(90deg, rgba(44, 76, 114, 0.92) 0%, rgba(86, 149, 219, 0.92) 55%, rgba(61, 123, 202, 0.92) 100%);
    border-top: 1px solid rgba(173, 196, 224, 0.18);
}

/* ==================== Reset & Base Styles ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    scrollbar-gutter: stable;
}

body {
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow: hidden;
}

body,
body *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]):not([contenteditable=""]):not(.allow-text-select) {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

input,
textarea,
select,
option,
[contenteditable="true"],
[contenteditable=""],
.allow-text-select {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* ==================== App Container ==================== */
.app-container {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 1fr var(--status-bar-height);
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    width: auto;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

/* ==================== Sidebar ==================== */
.sidebar {
    grid-row: 1 / 3;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
}

.sidebar-header {
    padding: 0 var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    position: relative;
    height: var(--shell-header-height);
    flex-shrink: 0;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar-toggle i,
.sidebar-toggle svg {
    width: 18px;
    height: 18px;
}

.app-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--accent-blue);
    margin-bottom: var(--spacing-xs);
}

.app-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
}

.sidebar-nav {
    flex: 1;
    padding: 6px 0;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 7px var(--spacing-md);
    min-height: 40px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background var(--transition-fast);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nav-item:hover {
    background: var(--bg-hover);
}

.nav-item.active {
    background: var(--bg-active);
    border-left: 2px solid var(--accent-blue);
}

.nav-item i,
.nav-item > svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    margin-right: var(--spacing-sm);
}

/* Reserve icon space before feather replaces <i data-feather>, avoiding visual jumps */
i[data-feather] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 0;
    flex: 0 0 auto;
}

.sidebar-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.status-indicator {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-success);
    margin-right: var(--spacing-sm);
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ==================== Sidebar Collapsed State ==================== */
.sidebar.collapsed,
.sidebar-is-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
}

.sidebar.collapsed ~ .content-area,
.sidebar-is-collapsed .sidebar ~ .content-area {
    width: auto;
}

.sidebar.collapsed .sidebar-header,
.sidebar-is-collapsed .sidebar .sidebar-header {
    justify-content: center;
    padding: var(--spacing-sm);
}

.sidebar.collapsed .app-title,
.sidebar.collapsed .app-subtitle,
.sidebar-is-collapsed .sidebar .app-title,
.sidebar-is-collapsed .sidebar .app-subtitle {
    display: none;
}

.sidebar.collapsed .sidebar-toggle,
.sidebar-is-collapsed .sidebar .sidebar-toggle {
    margin-left: 0;
}

.sidebar.collapsed .nav-item,
.sidebar-is-collapsed .sidebar .nav-item {
    justify-content: center;
    padding: var(--spacing-sm);
}

.sidebar.collapsed .nav-item i,
.sidebar.collapsed .nav-item svg,
.sidebar-is-collapsed .sidebar .nav-item i,
.sidebar-is-collapsed .sidebar .nav-item svg {
    margin-right: 0;
}

.sidebar.collapsed .nav-item span,
.sidebar-is-collapsed .sidebar .nav-item span {
    display: none;
}

.sidebar.collapsed .nav-item.active,
.sidebar-is-collapsed .sidebar .nav-item.active {
    border-left-width: 2px;
}

.sidebar.collapsed .sidebar-footer,
.sidebar-is-collapsed .sidebar .sidebar-footer {
    padding: var(--spacing-sm);
}

.sidebar.collapsed .status-text,
.sidebar-is-collapsed .sidebar .status-text {
    display: none;
}

.sidebar.collapsed .status-indicator,
.sidebar-is-collapsed .sidebar .status-indicator {
    justify-content: center;
}

.sidebar.collapsed .status-dot,
.sidebar-is-collapsed .sidebar .status-dot {
    margin-right: 0;
}

/* Grid transition for collapsed sidebar */
.app-container:has(.sidebar.collapsed),
.sidebar-is-collapsed .app-container {
    grid-template-columns: var(--sidebar-collapsed-width) 1fr;
}

/* Smooth transition */
.sidebar {
    transition: width var(--transition-normal), min-width var(--transition-normal);
}

.app-container {
    transition: grid-template-columns var(--transition-normal);
}

/* ==================== Content Area ==================== */
.content-area {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

/* Page Header */
.page-header {
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    height: var(--shell-header-height);
    flex-shrink: 0;
}

.page-header .btn {
    padding: 4px 12px;
    font-size: 13px;
}

.page-header .btn i,
.page-header .btn svg {
    width: 14px;
    height: 14px;
}

.page-header .page-title {
    font-size: 18px;
}

.page-header-left {
    flex: 1;
    min-width: 0;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.page-header-user {
    min-width: 0;
    max-width: min(34vw, 420px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-secondary, #aaa);
}

.page-header-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--border-color, #3e3e42);
    background: var(--bg-primary, #1e1e1e);
    color: var(--text-primary, #ccc);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.page-header-logout:hover {
    background: var(--bg-secondary, #252526);
    border-color: var(--accent-blue, #007acc);
}

.page-header-logout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.22);
}

.page-header-logout:active {
    transform: translateY(1px);
}

.page-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.module-content {
    flex: 1;
    min-height: 0;
    padding: var(--spacing-lg);
    overflow-y: auto;
    scrollbar-gutter: stable;
    background: var(--bg-primary);
}

/* Full-workspace modules manage their own inner scrolling/layout.
   Disable reserved gutter here to avoid visible "extra border" strips. */
body.page-editor-construcao .module-content,
body.page-gestao-modelos .module-content,
body.page-producao .module-content {
    scrollbar-gutter: auto;
}

/* Workspace modules: no visible shell frame / outer scrollbar line */
body.page-editor-construcao .content-area,
body.page-gestao-modelos .content-area,
body.page-producao .content-area,
body.page-editor-construcao .module-content,
body.page-gestao-modelos .module-content,
body.page-producao .module-content {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

body.page-editor-construcao .module-content,
body.page-gestao-modelos .module-content,
body.page-producao .module-content {
    scrollbar-width: none; /* Firefox */
}

body.page-editor-construcao .module-content::-webkit-scrollbar,
body.page-gestao-modelos .module-content::-webkit-scrollbar,
body.page-producao .module-content::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

body.page-gestao-modelos .page-header,
body.page-producao .page-header {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Prevent first-paint shell animation/reflow flicker */
.app-shell-preinit .sidebar,
.app-shell-preinit .app-container {
    transition: none !important;
}

/* ==================== Status Bar ==================== */
.status-bar {
    grid-column: 2;
    background: linear-gradient(90deg, #20446f 0%, var(--accent-blue) 55%, #2d6cdf 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--spacing-md);
    font-size: 12px;
}

.status-left,
.status-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
}

.status-right {
    justify-content: flex-end;
}

.status-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.status-version {
    font-size: 11px;
    opacity: 0.7;
    letter-spacing: 0.5px;
}

/* ==================== Common Components ==================== */

/* Buttons */
.btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-primary {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-blue-hover);
    border-color: var(--accent-blue-hover);
}

.btn-secondary {
    background: var(--bg-control);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
}

.btn-success {
    background: var(--accent-green);
    color: var(--bg-primary);
}

.btn-danger {
    background: var(--accent-red);
    color: var(--bg-primary);
}

/* Cards */
.card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.card-body {
    color: var(--text-primary);
}

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.table thead {
    background: var(--bg-elevated);
}

.table th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
}

.table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.table tbody tr:hover {
    background: var(--bg-hover);
}

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

/* Forms */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 13px;
}

.form-control {
    width: 100%;
    padding: var(--spacing-sm);
    background: var(--bg-control);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.form-control::placeholder {
    color: var(--text-muted);
}

select.form-control {
    cursor: pointer;
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* Form Validation Styles */
.form-control.is-invalid {
    border-color: var(--status-error);
    background-color: rgba(244, 135, 113, 0.05);
}

.form-control.is-valid {
    border-color: var(--status-success);
    background-color: rgba(78, 201, 176, 0.05);
}

.form-control.is-invalid:focus {
    border-color: var(--status-error);
    box-shadow: 0 0 0 2px rgba(244, 135, 113, 0.1);
}

.form-control.is-valid:focus {
    border-color: var(--status-success);
    box-shadow: 0 0 0 2px rgba(78, 201, 176, 0.1);
}

.invalid-feedback {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: 12px;
    color: var(--status-error);
    font-weight: 500;
}

.valid-feedback {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: 12px;
    color: var(--status-success);
}

.form-group.has-error .form-label {
    color: var(--status-error);
}

/* Component Error Highlighting - Validates: Requirement 4.6 */
.component-item.has-error,
[data-component-index].has-error {
    border-color: var(--status-error) !important;
    background-color: rgba(244, 135, 113, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(244, 135, 113, 0.2);
    animation: errorPulse 0.5s ease-in-out;
}

@keyframes errorPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Disabled button state for validation */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.toast {
    min-width: 300px;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-blue);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
}

.toast.success {
    border-left-color: var(--status-success);
}

.toast.error {
    border-left-color: var(--status-error);
}

.toast.warning {
    border-left-color: var(--status-warning);
}

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

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(30, 30, 30, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.loading-overlay.active {
    display: flex;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ==================== Utility Classes ==================== */
.text-muted {
    color: var(--text-muted);
}

.text-success {
    color: var(--status-success);
}

.text-warning {
    color: var(--status-warning);
}

.text-error {
    color: var(--status-error);
}

.mt-1 {
    margin-top: var(--spacing-sm);
}

.mt-2 {
    margin-top: var(--spacing-md);
}

.mt-3 {
    margin-top: var(--spacing-lg);
}

.mb-1 {
    margin-bottom: var(--spacing-sm);
}

.mb-2 {
    margin-bottom: var(--spacing-md);
}

.mb-3 {
    margin-bottom: var(--spacing-lg);
}

.flex {
    display: flex;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gap-1 {
    gap: var(--spacing-sm);
}

.gap-2 {
    gap: var(--spacing-md);
}

.gap-3 {
    gap: var(--spacing-lg);
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 5px;
}

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

/*
 ==================== Modal ==================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(8, 12, 18, 0.74);
    backdrop-filter: blur(6px);
}

.modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 12, 18, 0.74);
    backdrop-filter: blur(6px);
}

.modal-content {
    position: relative;
    background: linear-gradient(180deg, var(--surface-color) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    min-width: 500px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 0 0 1px rgba(255, 159, 10, 0.1),
        0 0 24px var(--accent-orange-soft),
        var(--shadow-lg);
    animation: modalSlideIn 0.3s ease;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .modal-content,
    .modal-content.modal-lg,
    .modal-content.modal-xl,
    .modal-large {
        width: min(92vw, 1100px);
        max-height: 88vh;
    }
}

.modal-content.modal-xl {
    min-width: 1200px;
    max-width: 95vw;
    max-height: 95vh;
}

.modal-content.modal-lg {
    min-width: 800px;
    max-width: 90vw;
}

.modal-content.modal-sm {
    min-width: 400px;
    max-width: 500px;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    min-width: 34px;
    min-height: 34px;
    background: linear-gradient(180deg, var(--accent-orange-hover) 0%, var(--accent-orange) 100%);
    border: 1px solid rgba(255, 206, 140, 0.82);
    color: #2d1b04;
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(255, 159, 10, 0.18);
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.modal-close i,
.modal-close svg {
    width: 16px;
    height: 16px;
}

.modal-close:hover {
    background: linear-gradient(180deg, #ffc46c 0%, var(--accent-orange-hover) 100%);
    border-color: rgba(255, 227, 187, 0.9);
    color: #201302;
    transform: translateY(-1px);
    box-shadow: 0 0 24px var(--accent-orange-strong);
}

.modal-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.app-dialog-content {
    min-width: min(440px, calc(100vw - 32px));
}

.app-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.app-dialog-message {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.55;
    white-space: pre-line;
}

.app-dialog-note {
    margin: -6px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.app-dialog-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-dialog-field label {
    font-size: 12px;
    color: var(--text-secondary);
}

.app-dialog-input,
.app-dialog-select,
.app-dialog-textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background: rgba(19, 25, 34, 0.9);
    color: var(--text-primary);
    padding: 10px 12px;
    font: inherit;
}

.app-dialog-input:focus,
.app-dialog-select:focus,
.app-dialog-textarea:focus {
    outline: none;
    border-color: rgba(255, 188, 94, 0.82);
    box-shadow: 0 0 0 1px rgba(255, 188, 94, 0.28), 0 0 16px rgba(255, 159, 10, 0.14);
}

.app-dialog-textarea {
    min-height: 110px;
    resize: vertical;
}

.app-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.app-dialog-btn {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background: var(--bg-control);
    color: var(--text-primary);
    font: 600 13px/1 inherit;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.app-dialog-btn:hover {
    border-color: rgba(255, 188, 94, 0.7);
    box-shadow: 0 0 16px rgba(255, 159, 10, 0.12);
    transform: translateY(-1px);
}

.app-dialog-btn-primary {
    background: linear-gradient(180deg, var(--accent-orange-hover) 0%, var(--accent-orange) 100%);
    border-color: rgba(255, 206, 140, 0.86);
    color: #251704;
}

.app-dialog-btn-primary:hover {
    background: linear-gradient(180deg, #ffc46c 0%, var(--accent-orange-hover) 100%);
    border-color: rgba(255, 229, 193, 0.92);
    box-shadow: 0 0 22px var(--accent-orange-strong);
}

.app-dialog-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.app-dialog-choice-btn {
    min-height: 44px;
    justify-content: center;
}

/* ==================== Pagination ==================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--spacing-md);
}

/* ==================== Search Bar ==================== */
.search-bar {
    margin-bottom: var(--spacing-md);
}

.search-bar input {
    max-width: 400px;
}

/* ==================== Stats Grid ==================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-blue);
    border-radius: 4px;
    padding: var(--spacing-md);
}

.stat-value {
    font-size: 32px;
    font-weight: 600;
    color: var(--accent-green);
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    color: var(--text-secondary);
    font-size: 13px;
}

/* ==================== Badge ==================== */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    background: #ff9800;
    color: #000;
}

.badge-success,
.badge-warning,
.badge-error,
.badge-info {
    background: #ff9800;
    color: #000;
}

/* ==================== Action Buttons ==================== */
.action-buttons {
    display: flex;
    gap: var(--spacing-xs);
}

.btn-icon {
    padding: var(--spacing-xs);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 3px;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-icon.danger:hover {
    background: var(--accent-red);
    color: var(--bg-primary);
}

/* ==================== Template Manager Styles ==================== */

.template-category {
    margin-bottom: var(--spacing-sm);
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    cursor: pointer;
    user-select: none;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    transition: all var(--transition-fast);
}

.category-header:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.category-icon {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast);
}

.template-list {
    padding: var(--spacing-xs) 0;
}

.template-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    margin: 2px 0;
    border-radius: 3px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    border: 1px solid transparent;
}

.template-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.template-item.selected {
    background: var(--bg-active);
    border-color: var(--accent-blue);
}

.template-item.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-blue);
    border-radius: 3px 0 0 3px;
}

.template-icon {
    width: 20px;
    height: 20px;
    color: var(--accent-blue);
    flex-shrink: 0;
    margin-top: 2px;
}

.template-info {
    flex: 1;
    min-width: 0;
}

.template-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-code {
    font-size: 10px;
    color: var(--accent-green);
    font-family: 'Consolas', monospace;
    margin-bottom: 2px;
}

.template-dims {
    font-size: 10px;
    color: var(--text-secondary);
}

.template-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--accent-blue);
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.template-badge.custom {
    background: var(--accent-purple);
}

.empty-state-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    color: var(--text-muted);
    font-size: 11px;
}

.empty-state-small i {
    width: 32px;
    height: 32px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}

.empty-state-small p {
    margin: 0;
}

.template-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
}

.comparison-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.comparison-column h4 {
    margin: 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--accent-blue);
    color: var(--text-primary);
}

.comparison-specs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.comparison-specs p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.comparison-specs strong {
    color: var(--text-primary);
    margin-right: var(--spacing-xs);
}

.comparison-divider {
    width: 1px;
    background: var(--border-color);
}

/* ==================== Component Editor Styles ==================== */

.components-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-height: 400px;
    overflow-y: auto;
}

.component-group {
    margin-bottom: var(--spacing-xs);
}

.component-group-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: var(--surface-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.component-group-header:hover {
    background: var(--hover-color);
}

.component-group-header i {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}

.component-group-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.component-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    position: relative;
}

.component-item:hover {
    background: var(--hover-color);
    border-color: var(--accent-blue);
}

.component-item.selected {
    background: rgba(0, 122, 204, 0.15);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px var(--accent-blue);
}

/* Left border indicator for selected component - Requirements: 4.1 */
.component-item.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-blue);
    border-radius: 3px 0 0 3px;
}

.component-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(0, 122, 204, 0.1);
    border-radius: var(--radius-sm);
}

.component-item-icon i {
    width: 14px;
    height: 14px;
    color: var(--accent-blue);
}

.component-item-info {
    flex: 1;
    min-width: 0;
}

.component-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.component-item-dims {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.component-item-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.2s;
}

.component-item:hover .component-item-actions {
    opacity: 1;
}

.btn-icon-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-icon-sm:hover {
    background: var(--hover-color);
}

.btn-icon-sm i {
    width: 12px;
    height: 12px;
    color: var(--text-secondary);
}

.validation-error {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: #ef4444;
}

.validation-error div {
    margin-bottom: 4px;
}

.validation-error div:last-child {
    margin-bottom: 0;
}

.empty-state-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    text-align: center;
}

.empty-state-small i {
    width: 32px;
    height: 32px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
}

.empty-state-small p {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* Auto-save Indicator */
.autosave-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(16, 185, 129, 0.9);
    color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    animation: slideInRight 0.3s ease;
}

.autosave-indicator i {
    width: 16px;
    height: 16px;
}

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

/* ==================== Dirty/Unsaved Changes Indicator ==================== */
/* Requirements: 4.4 - Show visual indicator of unsaved changes */

/* Floating dirty indicator */
.dirty-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(234, 179, 8, 0.95);
    color: #1a1a1a;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.dirty-indicator.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.dirty-indicator i {
    width: 16px;
    height: 16px;
    color: #1a1a1a;
}

.dirty-indicator span {
    font-size: 13px;
    font-weight: 500;
}

/* Asterisk indicator for dirty state in titles */
.dirty-asterisk {
    color: var(--status-warning);
    font-weight: bold;
    font-size: 1.2em;
    margin-left: 4px;
    animation: pulse-asterisk 1.5s ease-in-out infinite;
}

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

/* Unsaved badge on save button */
.unsaved-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: var(--status-warning);
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
    animation: pulse-badge 1.5s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 4px rgba(234, 179, 8, 0);
    }
}

/* Action button with unsaved changes */
.action-btn.has-unsaved-changes {
    position: relative;
    border-color: var(--status-warning);
}

.action-btn.has-unsaved-changes:hover {
    background: rgba(234, 179, 8, 0.1);
}

/* ==================== Histórico Page Styles ==================== */

/* Page Container */
.historico-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Filters Section */
.historico-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: var(--spacing-md);
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.filter-group label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-top: var(--spacing-lg);
}

.empty-state i {
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.empty-state p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

/* KPI Grid */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.kpi-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: var(--spacing-md);
    display: flex;
    gap: var(--spacing-md);
    transition: all var(--transition-normal);
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--border-light);
}

.kpi-icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--spacing-xs);
}

.kpi-icon i {
    width: 24px;
    height: 24px;
    color: var(--accent-blue);
}

.kpi-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.kpi-title {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.kpi-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
}

.kpi-diff {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.kpi-diff.positive {
    color: var(--status-success);
}

.kpi-diff.negative {
    color: var(--status-error);
}

.kpi-diff.neutral {
    color: var(--text-secondary);
}

/* Section Title */
.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

/* Paletes Grid */
.paletes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.palete-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-normal);
    overflow: hidden;
}

.palete-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.palete-header {
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--bg-tertiary);
}

.palete-header i {
    width: 20px;
    height: 20px;
}

.palete-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}

.palete-body {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.palete-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.palete-stat .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.palete-stat .stat-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

.palete-orders {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.mini-order {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-primary);
    border-radius: 3px;
    font-size: 12px;
    color: var(--text-secondary);
}

.palete-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* Timeline */
#timeline-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.timeline-item {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.timeline-item:last-child {
    border-bottom: none;
}

.timeline-item:hover {
    background: var(--bg-hover);
}

.timeline-date {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.timeline-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.timeline-numero {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.timeline-numero:hover {
    color: var(--accent-blue-hover);
    text-decoration: underline;
}

.timeline-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.timeline-paletes {
    font-size: 13px;
    color: var(--text-primary);
    flex: 1;
}

.timeline-valor {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-green);
}

/* Timeline Pagination */
#timeline-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

.pagination-info {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 0 var(--spacing-md);
}

/* Modal Large Variant */
.modal-large {
    min-width: 700px;
    max-width: 95vw;
}

/* Modal Content Specific Styles */
.modelo-detalhes {
    display: flex;
    flex-direction: column;
}

.modelo-header {
    margin-bottom: var(--spacing-lg);
}

.modelo-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.modelo-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stat-box {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.stat-box .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-box .stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Table Responsive */
.table-responsive {
    overflow-x: auto;
    margin-top: var(--spacing-md);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .historico-filters {
        grid-template-columns: 1fr 1fr;
    }
    
    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .paletes-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    .modal-large {
        min-width: 90vw;
    }
}

@media (max-width: 768px) {
    .historico-filters {
        grid-template-columns: 1fr;
    }
    
    .kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .paletes-grid {
        grid-template-columns: 1fr;
    }
    
    .timeline-item {
        grid-template-columns: 1fr;
    }
    
    .modelo-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* ==================== Reencomendar Modal ==================== */
.reencomendar-form .form-section {
    margin-bottom: 16px;
}

.reencomendar-form .form-section h4 {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.reencomendar-form .modelo-info-card {
    transition: all 0.2s ease;
}

.reencomendar-form .linha-encomenda {
    transition: all 0.2s ease;
}

.reencomendar-form .linha-encomenda:hover {
    background: var(--bg-secondary) !important;
}

.reencomendar-form .form-group label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    display: block;
}

.reencomendar-form .form-control {
    font-size: 13px;
}

/* Palete card footer buttons */
.palete-footer {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border-color);
}

.palete-footer .btn {
    flex: 1;
}


/* ==================== Custom Images Grid Styles ==================== */
/* Requisitos: 3.1, 3.2 - Integração de Paletes Personalizadas */

.custom-images-container {
    padding: var(--spacing-sm);
}

.custom-images-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.custom-images-actions .btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.custom-images-actions .btn i {
    width: 14px;
    height: 14px;
}

.custom-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-sm);
    max-height: 400px;
    overflow-y: auto;
    padding: var(--spacing-xs);
}

.custom-image-item {
    display: flex;
    flex-direction: column;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.custom-image-item:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.custom-image-item.selected {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.3);
}

.custom-image-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.custom-image-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.custom-image-item:hover .custom-image-thumbnail img {
    transform: scale(1.05);
}

.custom-image-thumbnail .image-associated-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--accent-green);
    color: var(--bg-primary);
    padding: 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-image-thumbnail .image-associated-badge i {
    width: 12px;
    height: 12px;
}

.custom-image-info {
    padding: var(--spacing-xs);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.custom-image-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-category-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 2px;
    background: var(--accent-purple);
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    align-self: flex-start;
}

.custom-image-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.custom-image-item:hover .custom-image-actions {
    opacity: 1;
}

.custom-image-actions .btn-icon-sm {
    width: 24px;
    height: 24px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.custom-image-actions .btn-icon-sm:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.custom-image-actions .btn-icon-sm:hover i {
    color: white;
}

/* Image Preview Modal Styles */
.image-preview-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-lg);
    min-height: 400px;
}

.image-preview-main {
    background: var(--bg-primary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-preview-main img {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
}

.image-preview-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.image-preview-details h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.image-preview-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.image-preview-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.image-preview-info strong {
    color: var(--text-primary);
}

.image-preview-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.image-preview-actions .btn {
    justify-content: center;
}

.image-preview-actions .btn i {
    width: 16px;
    height: 16px;
}

/* Associate Image Form Styles */
.associate-image-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.associate-image-form p {
    margin: 0;
    color: var(--text-secondary);
}

.associate-image-form strong {
    color: var(--text-primary);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* Responsive adjustments for custom images grid */
@media (max-width: 768px) {
    .custom-images-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
    
    .image-preview-container {
        grid-template-columns: 1fr;
    }
    
    .image-preview-main img {
        max-height: 300px;
    }
}

/* ==================== Breadcrumbs Navigation ==================== */
/* Breadcrumbs - hidden */
.breadcrumbs {
    display: none;
}

.breadcrumb-item {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.breadcrumb-item:hover {
    color: var(--accent-blue);
}

.breadcrumb-home {
    color: var(--text-muted);
}

.breadcrumb-home:hover {
    color: var(--accent-blue);
}

.breadcrumb-separator {
    color: var(--text-muted);
    font-size: 11px;
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 500;
}

.breadcrumb-link {
    color: var(--accent-blue);
}

/* ==================== Skeleton Loaders ==================== */
/* Validates: Requirement 10.6 - Skeleton loaders */

@keyframes skeleton-pulse {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.6;
    }
}

.skeleton {
    background: var(--bg-tertiary);
    border-radius: 4px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-text {
    height: 14px;
    margin-bottom: var(--spacing-xs);
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-text.medium {
    width: 80%;
}

.skeleton-text.long {
    width: 100%;
}

.skeleton-title {
    height: 24px;
    width: 40%;
    margin-bottom: var(--spacing-md);
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-button {
    height: 32px;
    width: 100px;
}

.skeleton-card {
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.skeleton-table-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.skeleton-table-cell {
    height: 16px;
}

/* Skeleton for KPI cards */
.skeleton-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.skeleton-kpi .skeleton-value {
    height: 32px;
    width: 60%;
}

.skeleton-kpi .skeleton-label {
    height: 12px;
    width: 80%;
}

/* ==================== Enhanced Toast Styles ==================== */
/* Validates: Requirements 10.3, 10.4 - Feedback visual melhorado */

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    margin-bottom: var(--spacing-sm);
    animation: slideIn 0.3s ease;
    max-width: 400px;
}

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

.toast.success .toast-icon {
    color: var(--status-success);
}

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

.toast.error .toast-icon {
    color: var(--status-error);
}

.toast.warning {
    border-left: 4px solid var(--status-warning);
}

.toast.warning .toast-icon {
    color: var(--status-warning);
}

.toast.info {
    border-left: 4px solid var(--status-info);
}

.toast.info .toast-icon {
    color: var(--status-info);
}

.toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.toast-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}

.toast-message {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.toast-suggestion {
    font-size: 11px;
    color: var(--accent-blue);
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--border-color);
}

.toast-close {
    background: linear-gradient(180deg, var(--accent-orange-hover) 0%, var(--accent-orange) 100%);
    border: 1px solid rgba(255, 206, 140, 0.82);
    color: #2d1b04;
    cursor: pointer;
    padding: 0;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(255, 159, 10, 0.16);
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.toast-close:hover {
    color: #201302;
    background: linear-gradient(180deg, #ffc46c 0%, var(--accent-orange-hover) 100%);
    border-color: rgba(255, 227, 187, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(255, 159, 10, 0.22);
}

.toast-close i,
.toast-close svg {
    width: 14px;
    height: 14px;
}

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

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

/* Toast container positioning */
.toast-container {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ==================== Production Module ==================== */

/* btn-info (blue action button) */
.btn-info {
    background: var(--accent-blue);
    color: white;
    border: 1px solid transparent;
}

.btn-info:hover {
    background: var(--accent-blue-hover);
}

/* Flag Badges (CQ / TT) */
.flag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1;
}

.flag-badge svg,
.flag-badge i {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.flag-qc {
    background: rgba(0, 122, 204, 0.15);
    color: var(--accent-blue);
    border: 1px solid rgba(0, 122, 204, 0.3);
}

.flag-ht {
    background: rgba(244, 135, 113, 0.15);
    color: var(--accent-red);
    border: 1px solid rgba(244, 135, 113, 0.3);
}

/* Production Status Indicators */
.status-producao {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.status-producao svg,
.status-producao i {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.status-pendente {
    color: var(--status-warning);
    background: rgba(220, 220, 170, 0.1);
}

.status-em-producao {
    color: var(--accent-blue);
    background: rgba(0, 122, 204, 0.1);
}

.status-produzido {
    color: var(--status-success);
    background: rgba(78, 201, 176, 0.1);
}

/* Progress Bar (production list) */
.progresso-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progresso-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.progresso-fill {
    height: 100%;
    background: var(--accent-green);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.progresso-texto {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
}

/* Encomenda Row Selection */
.encomenda-row {
    transition: background var(--transition-fast);
}

.encomenda-row:hover {
    background: var(--bg-hover) !important;
}

.encomenda-selected {
    background: rgba(0, 122, 204, 0.08) !important;
    border-left: 2px solid var(--accent-blue);
}

/* Detail Actions Bar */
.detalhe-acoes {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

/* Lotes Container (expandable sub-table) */
.lotes-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: var(--spacing-sm);
    margin: var(--spacing-xs) 0;
}

.lotes-container .table {
    border: none;
    background: transparent;
}

/* Checkbox Labels for CQ/TT Flags */
.flag-checkbox-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    padding: 2px 4px;
    border-radius: 3px;
}

.flag-checkbox-label:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.flag-checkbox-label input[type="checkbox"] {
    accent-color: var(--accent-blue);
}

/* Inline Icons (small feather icons within text) */
.inline-icon,
.inline-icon svg {
    width: 13px;
    height: 13px;
    vertical-align: -1px;
    flex-shrink: 0;
}

/* Small button icon sizing */
.btn-sm svg,
.btn-sm i {
    width: 14px;
    height: 14px;
}

/* ============================================================================
   Histórico Tree (Feature 001)
============================================================================ */

.historico-tree-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.historico-tree-layout.with-painel {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.historico-tree-main {
    min-height: calc(100vh - 220px);
    width: 100%;
}

.historico-tree-main .card-body {
    display: flex;
    flex-direction: column;
    min-height: inherit;
}

.historico-tree-toolbar {
    display: grid;
    grid-template-columns: minmax(320px, 1.5fr) minmax(240px, 1fr) minmax(240px, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.historico-tree-layout.with-painel .historico-tree-toolbar {
    grid-template-columns: minmax(260px, 1.15fr) minmax(200px, 0.95fr) minmax(200px, 0.95fr) 48px;
}

.historico-tree-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.historico-tree-filter label {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    margin: 0;
    min-width: 68px;
    white-space: nowrap;
    color: var(--text-secondary);
}

.historico-tree-filter .form-control {
    flex: 1;
}

.historico-tree-actions {
    display: flex;
    align-items: center;
}

.historico-tree-actions .btn {
    height: 44px;
    white-space: nowrap;
}

.historico-tree-layout.with-painel .historico-tree-actions .btn {
    width: 44px;
    min-width: 44px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    gap: 0;
}

.historico-tree-layout.with-painel .historico-tree-actions .btn .hist-aplicar-text {
    display: none;
}

.tree-root {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    padding: 10px;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.tree-node {
    margin-bottom: 6px;
}

.tree-node__header {
    width: 100%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tree-node__header:hover {
    border-color: var(--accent-blue);
}

.tree-node__toggle {
    width: 14px;
    display: inline-block;
    color: var(--text-secondary);
    transition: transform 0.15s ease;
}

.tree-node__toggle.open {
    transform: rotate(90deg);
}

.tree-node__label {
    text-align: left;
    flex: 1;
    font-size: 13px;
}

.tree-node__label small {
    color: var(--text-secondary);
    font-size: 11px;
}

.tree-kpis {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tree-children {
    margin-top: 6px;
    margin-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tree-node--modelo .tree-node__header {
    background: var(--bg-tertiary);
}

.tree-leaf {
    width: 100%;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    border-radius: 6px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr 0.65fr 0.8fr;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

.tree-leaf:hover {
    border-color: var(--accent-blue);
    background: rgba(0, 122, 204, 0.08);
}

.tree-leaf.selected {
    border-color: var(--accent-blue);
    background: rgba(0, 122, 204, 0.16);
}

.tree-leaf__ref {
    font-weight: 600;
}

.tree-leaf__date,
.tree-leaf__delivery,
.tree-leaf__qty,
.tree-leaf__status {
    font-size: 12px;
    color: var(--text-secondary);
}

.tree-loading,
.tree-empty {
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    padding: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
}

.historico-empty {
    text-align: center;
    padding: 30px 16px;
    color: var(--text-secondary);
}

.historico-empty.hidden {
    display: none;
}

.historico-empty i {
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
}

.historico-painel {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    min-height: 520px;
    position: sticky;
    top: calc(var(--header-height) + 12px);
    transform: translateX(20px);
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
}

.historico-painel.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.historico-painel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 12px;
}

.historico-painel-header h3 {
    margin: 0;
    font-size: 14px;
}

.historico-painel-conteudo {
    padding: 12px;
    max-height: calc(100vh - 200px);
    overflow: auto;
}

.historico-painel-empty {
    color: var(--text-secondary);
    font-size: 13px;
}

.detalhe-bloco {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
    background: var(--bg-primary);
}

.detalhe-linha {
    margin-bottom: 6px;
    font-size: 13px;
}

.detalhe-linhas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detalhe-linha-card {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    background: var(--bg-primary);
    font-size: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}

.detalhe-linha-card__head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.detalhe-linha-card__preview {
    padding: 4px 6px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.detalhe-linha-card__preview i {
    width: 15px;
    height: 15px;
}

@media (max-width: 1180px) {
    .historico-tree-layout,
    .historico-tree-layout.with-painel {
        grid-template-columns: 1fr;
    }

    .historico-tree-toolbar {
        grid-template-columns: 1fr;
    }

    .historico-tree-layout.with-painel .historico-tree-toolbar {
        grid-template-columns: 1fr;
    }

    .historico-tree-actions {
        justify-content: flex-end;
    }

    .historico-tree-layout.with-painel .historico-tree-actions .btn {
        width: auto;
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
        gap: 8px;
    }

    .historico-tree-layout.with-painel .historico-tree-actions .btn .hist-aplicar-text {
        display: inline;
    }

    .historico-painel {
        position: static;
        min-height: 0;
        display: none;
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    .historico-painel.open {
        display: block;
    }
}

@media (max-width: 700px) {
    .historico-tree-filter {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .historico-tree-filter label {
        min-width: 0;
    }

    .tree-leaf {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .detalhe-linha-card {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   Unified Tabs (Config style)
============================================================================ */

.cfg-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color, #3e3e42);
    margin-bottom: 20px;
    gap: 0;
}

.cfg-tab {
    padding: 10px 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary, #888);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all .15s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cfg-tab:hover {
    color: var(--text-primary, #ccc);
}

.cfg-tab.active {
    color: var(--accent-blue, #007acc);
    border-bottom-color: var(--accent-blue, #007acc);
}

.cfg-tab i,
.cfg-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.dashboard-tabs {
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.dashboard-tab-btn {
    padding: 8px 14px;
}

/* ============================================================================
   iOS Theme Refinement
============================================================================ */

html.app-theme-ios {
    --ios-surface: linear-gradient(180deg, rgba(34, 42, 56, 0.88) 0%, rgba(24, 31, 43, 0.9) 100%);
    --ios-surface-soft: linear-gradient(180deg, rgba(43, 53, 69, 0.78) 0%, rgba(29, 37, 50, 0.8) 100%);
    --ios-surface-strong: linear-gradient(180deg, rgba(30, 38, 52, 0.96) 0%, rgba(20, 27, 38, 0.98) 100%);
    --ios-field-bg: rgba(17, 23, 32, 0.82);
    --ios-field-bg-soft: rgba(19, 26, 36, 0.66);
    --ios-field-border: rgba(183, 204, 229, 0.2);
    --ios-field-border-strong: rgba(194, 216, 241, 0.34);
    --ios-chip-bg: rgba(23, 31, 43, 0.66);
    --ios-chip-active: rgba(104, 166, 242, 0.2);
    --ios-shadow-md: 0 18px 44px rgba(2, 8, 18, 0.26);
    --ios-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --ios-radius-hero: 20px;
    --ios-radius-xl: 17px;
    --ios-radius-lg: 14px;
    --ios-radius-md: 12px;
    --ios-radius-sm: 11px;
    --ios-radius-control: 10px;
    --ios-radius-xs: 9px;
}

html.app-theme-ios .page-header-actions .btn,
html.app-theme-ios .page-header-logout,
html.app-theme-ios .btn,
html.app-theme-ios .cfg-btn,
html.app-theme-ios .cfg-btn-sm,
html.app-theme-ios .gm-btn {
    border-radius: var(--ios-radius-sm);
    border-color: var(--ios-field-border);
    box-shadow: var(--ios-shadow-inset);
    backdrop-filter: blur(16px) saturate(1.12);
}

html.app-theme-ios .btn,
html.app-theme-ios .cfg-btn,
html.app-theme-ios .gm-btn {
    min-height: 38px;
    background: var(--ios-surface-soft);
    color: var(--text-primary);
}

html.app-theme-ios .btn:hover,
html.app-theme-ios .cfg-btn:hover,
html.app-theme-ios .gm-btn:hover {
    background: rgba(73, 112, 160, 0.24);
    border-color: var(--ios-field-border-strong);
}

html.app-theme-ios .btn-primary,
html.app-theme-ios .cfg-btn-primary,
html.app-theme-ios .gm-btn-primary {
    background: linear-gradient(180deg, #7ec8ff 0%, #4f9fff 100%);
    border-color: rgba(155, 211, 255, 0.62);
    color: #06111e;
    box-shadow: 0 10px 22px rgba(57, 128, 214, 0.28);
}

html.app-theme-ios .btn-primary:hover,
html.app-theme-ios .cfg-btn-primary:hover,
html.app-theme-ios .gm-btn-primary:hover {
    background: linear-gradient(180deg, #94d3ff 0%, #63acff 100%);
    border-color: rgba(177, 224, 255, 0.78);
    color: #06111e;
}

html.app-theme-ios .btn-secondary {
    background: var(--ios-surface-soft);
    border-color: var(--ios-field-border);
    color: var(--text-primary);
}

html.app-theme-ios .btn-success {
    background: linear-gradient(180deg, #8de5d0 0%, #5ccbb0 100%);
    border-color: rgba(145, 236, 213, 0.58);
    color: #071712;
}

html.app-theme-ios .btn-danger,
html.app-theme-ios .gm-btn-danger {
    background: rgba(108, 45, 49, 0.26);
    border-color: rgba(255, 157, 145, 0.36);
    color: #ffd3cc;
}

html.app-theme-ios .btn-danger:hover,
html.app-theme-ios .gm-btn-danger:hover {
    background: rgba(125, 54, 59, 0.34);
    border-color: rgba(255, 174, 164, 0.5);
    color: #ffe5df;
}

html.app-theme-ios .card,
html.app-theme-ios .table,
html.app-theme-ios .modal-content,
html.app-theme-ios .credits-dialog,
html.app-theme-ios .cfg-card,
html.app-theme-ios .cfg-print-section,
html.app-theme-ios .cfg-modal-card,
html.app-theme-ios .cfg-table-wrap,
html.app-theme-ios .gm-sidebar,
html.app-theme-ios .gm-main,
html.app-theme-ios .gm-modal-content,
html.app-theme-ios .ec-panel,
html.app-theme-ios .mdl-section,
html.app-theme-ios .prod-section {
    background: var(--ios-surface);
    border-color: var(--ios-field-border);
    box-shadow:
        0 0 0 1px rgba(255, 182, 90, 0.12),
        0 0 28px rgba(255, 182, 90, 0.12),
        var(--ios-shadow-md),
        var(--ios-shadow-inset);
    backdrop-filter: blur(20px) saturate(1.1);
}

html.app-theme-ios .card,
html.app-theme-ios .modal-content,
html.app-theme-ios .cfg-card,
html.app-theme-ios .cfg-modal-card,
html.app-theme-ios .gm-sidebar,
html.app-theme-ios .gm-main,
html.app-theme-ios .gm-modal-content,
html.app-theme-ios .ec-panel,
html.app-theme-ios .mdl-section,
html.app-theme-ios .prod-section {
    border-radius: var(--ios-radius-lg);
}

html.app-theme-ios .card-header,
html.app-theme-ios .modal-header,
html.app-theme-ios .cfg-card h3,
html.app-theme-ios .cfg-print-header,
html.app-theme-ios .gm-sidebar-header,
html.app-theme-ios .gm-toolbar,
html.app-theme-ios .gm-modal-header,
html.app-theme-ios .gm-detail,
html.app-theme-ios .ec-panel-header,
html.app-theme-ios .ec-model-bar,
html.app-theme-ios .ec-ribbon,
html.app-theme-ios .d2-subtabs,
html.app-theme-ios .mdl-subtabs,
html.app-theme-ios .sk-ribbon,
html.app-theme-ios .cmd-bar {
    background: var(--ios-surface-strong);
    border-color: var(--ios-field-border);
}

html.app-theme-ios .cfg-tabs,
html.app-theme-ios .dashboard-tabs,
html.app-theme-ios .sm-tabs,
html.app-theme-ios .producao-tabs {
    border-bottom: none;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

html.app-theme-ios .cfg-tab,
html.app-theme-ios .dashboard-tab-btn,
html.app-theme-ios .sm-tab,
html.app-theme-ios .producao-tab-btn {
    margin-bottom: 0;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--ios-radius-sm);
    background: var(--ios-chip-bg);
    color: var(--text-secondary);
    box-shadow: var(--ios-shadow-inset);
}

html.app-theme-ios .cfg-tab:hover,
html.app-theme-ios .dashboard-tab-btn:hover,
html.app-theme-ios .sm-tab:hover,
html.app-theme-ios .producao-tab-btn:hover {
    background: rgba(59, 83, 112, 0.22);
    color: var(--text-primary);
}

html.app-theme-ios .cfg-tab.active,
html.app-theme-ios .dashboard-tab-btn.active,
html.app-theme-ios .sm-tab.active,
html.app-theme-ios .producao-tab-btn.active {
    background: var(--ios-chip-active);
    border-bottom-color: transparent;
    border-color: rgba(127, 192, 255, 0.46);
    color: #eef7ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(36, 78, 132, 0.22);
}

html.app-theme-ios .form-control,
html.app-theme-ios .cfg-row input,
html.app-theme-ios .cfg-row select,
html.app-theme-ios .cfg-row textarea,
html.app-theme-ios .cfg-modal-field input,
html.app-theme-ios .cfg-modal-field select,
html.app-theme-ios .cfg-modal-field textarea,
html.app-theme-ios .gm-fg input,
html.app-theme-ios .gm-fg select,
html.app-theme-ios .gm-fg textarea,
html.app-theme-ios .ec-model-bar select,
html.app-theme-ios .mdl-field > input,
html.app-theme-ios .mdl-field > select,
html.app-theme-ios .mdl-control-row > input,
html.app-theme-ios .mdl-control-row > select,
html.app-theme-ios .prod-form-grid input,
html.app-theme-ios .prod-form-grid select,
html.app-theme-ios .prod-section input,
html.app-theme-ios .prod-section select,
html.app-theme-ios .sk-rbtn-field input,
html.app-theme-ios .sk-rbtn-sel,
html.app-theme-ios .ec-ge-field input {
    background: var(--ios-field-bg);
    border-color: var(--ios-field-border);
    color: var(--text-primary);
    border-radius: var(--ios-radius-control);
    box-shadow: var(--ios-shadow-inset);
}

html.app-theme-ios .form-control:focus,
html.app-theme-ios .cfg-row input:focus,
html.app-theme-ios .cfg-row select:focus,
html.app-theme-ios .cfg-row textarea:focus,
html.app-theme-ios .cfg-modal-field input:focus,
html.app-theme-ios .cfg-modal-field select:focus,
html.app-theme-ios .cfg-modal-field textarea:focus,
html.app-theme-ios .gm-fg input:focus,
html.app-theme-ios .gm-fg select:focus,
html.app-theme-ios .gm-fg textarea:focus,
html.app-theme-ios .ec-model-bar select:focus,
html.app-theme-ios .mdl-field > input:focus,
html.app-theme-ios .mdl-field > select:focus,
html.app-theme-ios .mdl-control-row > input:focus,
html.app-theme-ios .mdl-control-row > select:focus,
html.app-theme-ios .prod-form-grid input:focus,
html.app-theme-ios .prod-form-grid select:focus,
html.app-theme-ios .prod-section input:focus,
html.app-theme-ios .prod-section select:focus,
html.app-theme-ios .sk-rbtn-field input:focus,
html.app-theme-ios .sk-rbtn-sel:focus,
html.app-theme-ios .ec-ge-field input:focus {
    outline: none;
    border-color: rgba(132, 199, 255, 0.74);
    box-shadow: 0 0 0 3px rgba(111, 182, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.app-theme-ios .form-label,
html.app-theme-ios .cfg-row label,
html.app-theme-ios .cfg-modal-field label,
html.app-theme-ios .gm-fg label,
html.app-theme-ios .mdl-field > label,
html.app-theme-ios .prod-form-grid label,
html.app-theme-ios .prod-section label {
    color: #d7e6f7;
}

html.app-theme-ios .form-control::placeholder,
html.app-theme-ios .cfg-row input::placeholder,
html.app-theme-ios .cfg-row textarea::placeholder,
html.app-theme-ios .cfg-modal-field input::placeholder,
html.app-theme-ios .cfg-modal-field textarea::placeholder,
html.app-theme-ios .gm-fg input::placeholder,
html.app-theme-ios .gm-fg textarea::placeholder,
html.app-theme-ios .mdl-field > input::placeholder,
html.app-theme-ios .prod-form-grid input::placeholder,
html.app-theme-ios .prod-section input::placeholder {
    color: #88a0ba;
}

html.app-theme-ios .table,
html.app-theme-ios .cfg-table,
html.app-theme-ios .gm-table {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

html.app-theme-ios .table thead,
html.app-theme-ios .cfg-table th,
html.app-theme-ios .gm-table th {
    background: rgba(19, 27, 38, 0.72);
}

html.app-theme-ios .table th,
html.app-theme-ios .table td,
html.app-theme-ios .cfg-table th,
html.app-theme-ios .cfg-table td,
html.app-theme-ios .gm-table th,
html.app-theme-ios .gm-table td {
    border-bottom-color: rgba(188, 208, 230, 0.12);
}

html.app-theme-ios .table tbody tr:hover,
html.app-theme-ios .cfg-table tbody tr:hover,
html.app-theme-ios .gm-table tbody tr:hover {
    background: rgba(91, 134, 190, 0.12);
}

html.app-theme-ios .gm-table tbody tr.selected,
html.app-theme-ios .gm-group-item.active,
html.app-theme-ios .ec-piece-item.selected {
    background: rgba(104, 166, 242, 0.18);
    box-shadow: inset 0 0 0 1px rgba(135, 193, 255, 0.24);
}

html.app-theme-ios .cfg-mod-item,
html.app-theme-ios .cfg-print-body,
html.app-theme-ios .gm-group-item,
html.app-theme-ios .gm-detail,
html.app-theme-ios .ec-group-header,
html.app-theme-ios .ec-group-edit,
html.app-theme-ios .bbox-info,
html.app-theme-ios .prod-metric,
html.app-theme-ios .lotes-container,
html.app-theme-ios .opcao-checkbox {
    background: var(--ios-field-bg-soft);
    border-color: rgba(188, 208, 230, 0.12);
}

html.app-theme-ios .cfg-print-header:hover,
html.app-theme-ios .gm-group-item:hover,
html.app-theme-ios .ec-group-header:hover,
html.app-theme-ios .ec-piece-item:hover {
    background: rgba(86, 122, 168, 0.18);
}

html.app-theme-ios .cfg-mod-note,
html.app-theme-ios .cfg-inline-note,
html.app-theme-ios .gm-model-dims,
html.app-theme-ios .gm-group-code,
html.app-theme-ios .gm-empty,
html.app-theme-ios .bbox-info,
html.app-theme-ios .prod-field-hint {
    color: #a9bdd4;
}

html.app-theme-ios .gm-group-count,
html.app-theme-ios .cwz-hero-chip,
html.app-theme-ios .cwz-badge {
    background: rgba(29, 38, 52, 0.7);
    border-color: rgba(191, 211, 236, 0.18);
}

html.app-theme-ios .badge {
    background: #ff9800;
    border-color: rgba(0, 0, 0, 0.14);
    color: #000;
}

html.app-theme-ios .modal,
html.app-theme-ios .cfg-modal,
html.app-theme-ios .gm-modal,
html.app-theme-ios .credits-overlay {
    background: rgba(5, 10, 18, 0.58);
    backdrop-filter: blur(18px) saturate(1.08);
}

html.app-theme-ios .modal-content,
html.app-theme-ios .cfg-modal-card,
html.app-theme-ios .gm-modal-content,
html.app-theme-ios .credits-dialog {
    border-radius: var(--ios-radius-xl);
}

html.app-theme-ios .modal-close,
html.app-theme-ios .gm-modal-close,
html.app-theme-ios .credits-close,
html.app-theme-ios .toast-close {
    background: linear-gradient(180deg, #ffd08f 0%, var(--accent-orange) 100%);
    border: 1px solid rgba(255, 230, 198, 0.7);
    border-radius: 999px;
    color: #2b1b07;
    box-shadow: 0 0 20px rgba(255, 182, 90, 0.18);
}

html.app-theme-ios .modal-close:hover,
html.app-theme-ios .gm-modal-close:hover,
html.app-theme-ios .credits-close:hover,
html.app-theme-ios .toast-close:hover {
    background: linear-gradient(180deg, #ffddb0 0%, var(--accent-orange-hover) 100%);
    border-color: rgba(255, 239, 217, 0.82);
    box-shadow: 0 0 24px rgba(255, 182, 90, 0.24);
}

html.app-theme-ios .ec-panel,
html.app-theme-ios .ec-ribbon,
html.app-theme-ios .d2-subtabs,
html.app-theme-ios .mdl-subtabs,
html.app-theme-ios .sk-ribbon,
html.app-theme-ios .cmd-bar,
html.app-theme-ios .ec-model-bar {
    backdrop-filter: blur(20px) saturate(1.1);
}

html.app-theme-ios .ec-ribbon-label,
html.app-theme-ios .sk-ribbon-label,
html.app-theme-ios .d2-subtab.active,
html.app-theme-ios .mdl-subtab.active {
    background: rgba(91, 136, 196, 0.14);
}

html.app-theme-ios .ec-rbtn,
html.app-theme-ios .d2-subtab,
html.app-theme-ios .mdl-subtab,
html.app-theme-ios .sk-rbtn,
html.app-theme-ios .cmd-bar-opt,
html.app-theme-ios .cmd-bar-cancel,
html.app-theme-ios .cmd-bar-ok,
html.app-theme-ios .ec-ge-btn,
html.app-theme-ios .lock-btn,
html.app-theme-ios .prod-icon-action,
html.app-theme-ios .ec-btn {
    border-radius: var(--ios-radius-xs);
}

html.app-theme-ios .ec-rbtn,
html.app-theme-ios .d2-subtab,
html.app-theme-ios .mdl-subtab,
html.app-theme-ios .sk-rbtn,
html.app-theme-ios .cmd-bar-opt,
html.app-theme-ios .ec-ge-btn,
html.app-theme-ios .lock-btn {
    background: rgba(24, 31, 43, 0.76);
    border-color: rgba(189, 210, 234, 0.16);
    color: #dce9f7;
}

html.app-theme-ios .ec-rbtn:hover,
html.app-theme-ios .d2-subtab:hover,
html.app-theme-ios .mdl-subtab:hover,
html.app-theme-ios .sk-rbtn:hover,
html.app-theme-ios .cmd-bar-opt:hover,
html.app-theme-ios .ec-ge-btn:hover,
html.app-theme-ios .lock-btn:hover {
    background: rgba(87, 125, 173, 0.22);
    border-color: rgba(152, 200, 255, 0.34);
    color: #f5fbff;
}

html.app-theme-ios .ec-rbtn.active,
html.app-theme-ios .mdl-subtab.active,
html.app-theme-ios .d2-subtab.active,
html.app-theme-ios .sk-rbtn.active,
html.app-theme-ios .cmd-bar-opt.active {
    border-color: rgba(146, 204, 255, 0.48);
    color: #f3f9ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(32, 66, 110, 0.2);
}

html.app-theme-ios .lock-btn.locked,
html.app-theme-ios .input-locked {
    background: rgba(255, 206, 102, 0.18) !important;
    border-color: rgba(255, 219, 134, 0.54) !important;
    color: #ffe6a7 !important;
}

html.app-theme-ios .ec-btn {
    background: var(--ios-surface-soft);
    border-color: var(--ios-field-border);
    color: var(--text-primary);
    box-shadow: var(--ios-shadow-inset);
}

html.app-theme-ios .ec-btn:hover {
    background: rgba(79, 116, 160, 0.22);
    border-color: var(--ios-field-border-strong);
}

html.app-theme-ios .ec-btn-primary {
    background: linear-gradient(180deg, #7ec8ff 0%, #4f9fff 100%);
    border-color: rgba(155, 211, 255, 0.62);
    color: #08121d;
}

html.app-theme-ios .ec-btn-success {
    background: linear-gradient(180deg, #8de5d0 0%, #5ccbb0 100%);
    border-color: rgba(145, 236, 213, 0.58);
    color: #071712;
}

html.app-theme-ios .ec-btn-danger,
html.app-theme-ios .cmd-bar-cancel {
    background: rgba(109, 46, 49, 0.26);
    border-color: rgba(255, 157, 145, 0.36);
    color: #ffd3cc;
}

html.app-theme-ios .cmd-bar-ok {
    background: rgba(63, 132, 110, 0.2);
    border-color: rgba(129, 235, 201, 0.36);
    color: #c9ffeb;
}

html.app-theme-ios .prod-view {
    background:
        radial-gradient(circle at top left, rgba(111, 182, 255, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(17, 22, 31, 0.96) 0%, rgba(12, 18, 26, 0.98) 100%);
}

html.app-theme-ios .prod-icon-action {
    background: rgba(22, 28, 39, 0.84);
    border-color: rgba(189, 210, 234, 0.16);
    color: #eef6ff;
}

html.app-theme-ios .prod-icon-action:hover {
    background: rgba(88, 127, 176, 0.22);
    border-color: rgba(152, 200, 255, 0.34);
}

html.app-theme-ios .folha-producao-close-btn {
    background: rgba(20, 27, 38, 0.84);
    border-color: rgba(189, 210, 234, 0.16);
    color: #eef6ff !important;
    border-radius: var(--ios-radius-xs);
}

html.app-theme-ios .folha-producao-close-btn:hover,
html.app-theme-ios .folha-producao-close-btn:focus {
    background: rgba(88, 127, 176, 0.22);
    border-color: rgba(152, 200, 255, 0.34);
    color: #ffffff !important;
}

html.app-theme-ios .status-producao,
html.app-theme-ios .flag-badge {
    border-radius: 999px;
    border: 1px solid rgba(191, 211, 236, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.app-theme-ios .status-pendente {
    background: rgba(255, 206, 102, 0.16);
    color: #ffe2a3;
}

html.app-theme-ios .status-em-producao,
html.app-theme-ios .flag-qc {
    background: rgba(104, 166, 242, 0.16);
    color: #cde7ff;
}

html.app-theme-ios .status-produzido,
html.app-theme-ios .flag-ht {
    background: rgba(99, 215, 190, 0.16);
    color: #ccfff0;
}

html.app-theme-ios .opcao-checkbox:hover:not(.opcao-desactivada) {
    background: rgba(88, 127, 176, 0.18);
    border-color: rgba(152, 200, 255, 0.34);
}

html.app-theme-ios .opcao-desactivada {
    background: rgba(18, 24, 33, 0.42);
}

html.app-theme-ios .status-bar a,
html.app-theme-ios .credits-body h4 {
    color: #9fd0ff;
}

/* ============================================================================
   Cliente Info Modal
============================================================================ */

.cliente-info-modal {
    display: grid;
    gap: 12px;
    --cliente-tab-fixed-height: auto;
}

.cliente-info-tabs {
    margin-bottom: 8px;
}

.cliente-info-tab-panel {
    display: block;
    min-height: var(--cliente-tab-fixed-height);
}

.cliente-info-tab-panel[hidden] {
    display: none;
}

.cliente-info-tab-panel[data-tab-panel="modelos"] {
    height: var(--cliente-tab-fixed-height);
    overflow: hidden;
}

.cliente-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cliente-info-item {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    padding: 10px 12px;
}

.cliente-info-item--full {
    grid-column: 1 / -1;
}

.cliente-info-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.cliente-info-value {
    font-size: 13px;
    color: var(--text-primary);
}

.cliente-info-value--title {
    font-size: 16px;
    font-weight: 600;
}

.cliente-modelos-layout {
    display: grid;
    grid-template-columns: minmax(280px, 320px) minmax(420px, 1fr) minmax(360px, 430px);
    gap: 12px;
    min-height: 0;
    height: 100%;
}

.cliente-modelos-list-col {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cliente-modelos-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 12px;
    font-size: 12px;
}

.cliente-modelos-head small {
    color: var(--text-secondary);
    font-size: 11px;
}

.cliente-modelos-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    overflow: auto;
    min-height: 0;
}

.cliente-modelo-item {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 9px 10px;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 3px;
}

.cliente-modelo-item:hover {
    border-color: var(--accent-blue);
}

.cliente-modelo-item.active {
    border-color: var(--accent-blue);
    background: rgba(0, 122, 204, 0.16);
}

.cliente-modelo-item__name {
    font-size: 13px;
    font-weight: 600;
}

.cliente-modelo-item__meta {
    font-size: 11px;
    color: var(--text-secondary);
}

.cliente-modelos-center-col {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    min-height: 0;
}

.cliente-modelos-detail-box,
.cliente-modelos-preview-box,
.cliente-modelos-orders-box {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    padding: 8px;
}

.cliente-modelos-preview-col {
    min-width: 0;
    min-height: 0;
}

.cliente-modelos-preview-box {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cliente-modelo-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.cliente-modelo-stat {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cliente-modelo-stat--full {
    grid-column: 1 / -1;
}

.cliente-modelo-stat--full strong {
    text-align: left;
}

.cliente-modelo-stat__label {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cliente-modelo-stat strong {
    font-size: 11px;
    color: var(--text-primary);
    text-align: right;
}

.cliente-modelo-preview-viewport {
    width: 100%;
    height: min(34vh, 320px);
    min-height: 220px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #1a1d23;
    overflow: hidden;
}

.cliente-modelo-preview-status {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.cliente-modelo-orders-table th,
.cliente-modelo-orders-table td {
    font-size: 11px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.cliente-modelos-orders-box {
    max-height: none;
    min-height: 0;
    overflow: auto;
}

.cliente-modelo-empty {
    color: var(--text-secondary);
    font-size: 12px;
    padding: 3px 0;
}

@media (max-width: 1280px) {
    .cliente-modelos-layout {
        grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    }

    .cliente-modelos-preview-col {
        grid-column: 1 / -1;
    }

    .cliente-modelo-preview-viewport {
        height: min(30vh, 280px);
        min-height: 200px;
    }
}

@media (max-width: 1220px) {
    .cliente-modelos-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .cliente-modelos-preview-col {
        grid-column: auto;
    }

    .cliente-modelo-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .cliente-info-grid {
        grid-template-columns: 1fr;
    }

    .cliente-modelo-stats-grid {
        grid-template-columns: 1fr;
    }

    .cfg-tabs {
        overflow: auto;
        white-space: nowrap;
    }

    .cfg-tab {
        padding: 9px 14px;
        font-size: 13px;
    }
}