/**
 * QRLink Custom Theme for 3D Viewer
 * Temă personalizată qrlink.ro - Stil minimal întunecat
 *
 * IMPORTANT: Suprascriem variabilele CSS ale O3DV pentru a aplica tema întunecată
 */

/* ============================================== */
/* === VARIABILE CSS O3DV - SUPRASCRIERE TEMĂ === */
/* ============================================== */

:root {
    /* Culorile brandului QRLink */
    --qrlink-yellow: #fbbf24;
    --qrlink-indigo: #6366f1;
    --qrlink-purple: #a855f7;
    --qrlink-dark: #1e1b4b;
    --qrlink-darker: #0f0d24;
    --qrlink-light: #f9fafb;
    --qrlink-gray: #6b7280;
    --qrlink-text: #e5e7eb;
    --qrlink-text-muted: #9ca3af;

    /* === SUPRASCRIERE VARIABILE O3DV - MOD ÎNTUNECAT === */

    /* Culori principale */
    --ov_foreground_color: #e5e7eb !important;
    --ov_background_color: #0f0d24 !important;
    --ov_disabled_foreground_color: #6b7280 !important;

    /* Culori butoane */
    --ov_button_color: #fbbf24 !important;
    --ov_button_hover_color: #f59e0b !important;
    --ov_button_text_color: #1e1b4b !important;

    /* Butoane outline */
    --ov_outline_button_color: #fbbf24 !important;
    --ov_outline_button_hover_color: rgba(251, 191, 36, 0.15) !important;
    --ov_outline_button_text_color: #fbbf24 !important;

    /* Culori iconițe */
    --ov_icon_color: #e5e7eb !important;
    --ov_light_icon_color: #9ca3af !important;
    --ov_selected_icon_color: #fbbf24 !important;
    --ov_disabled_icon_color: #4b5563 !important;

    /* Culori hover */
    --ov_hover_color: rgba(251, 191, 36, 0.1) !important;
    --ov_hover_text_color: #fbbf24 !important;

    /* Logo */
    --ov_logo_text_color: #e5e7eb !important;
    --ov_logo_border_color: #1e1b4b !important;

    /* Toolbar */
    --ov_toolbar_background_color: #0f0d24 !important;
    --ov_toolbar_selected_color: rgba(251, 191, 36, 0.15) !important;
    --ov_toolbar_separator_color: rgba(255, 255, 255, 0.1) !important;

    /* TreeView */
    --ov_treeview_selected_color: rgba(251, 191, 36, 0.1) !important;

    /* Dialog */
    --ov_dialog_foreground_color: #e5e7eb !important;
    --ov_dialog_background_color: #1e1b4b !important;
    --ov_dialog_control_border_color: rgba(255, 255, 255, 0.15) !important;

    /* Borduri și umbre */
    --ov_border_color: rgba(255, 255, 255, 0.1) !important;
    --ov_shadow: 0px 0px 20px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================== */
/* === STILURI SUPLIMENTARE PENTRU COMPONENTE === */
/* ============================================== */

/* === BODY & HTML === */
html, body {
    color: var(--qrlink-text) !important;
    background: var(--qrlink-darker) !important;
}

/* === HEADER === */
.header {
    background: var(--qrlink-dark) !important;
    border-bottom: 1px solid rgba(251, 191, 36, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.header .title {
    background: transparent !important;
}

/* Header Buttons - Stil Minimal */
.header_button {
    background: transparent !important;
    color: var(--qrlink-text-muted) !important;
    border: none !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.header_button:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--qrlink-yellow) !important;
}

.header_button.active,
.header_button:active {
    background: rgba(251, 191, 36, 0.1) !important;
    color: var(--qrlink-yellow) !important;
}

/* === TOOLBAR === */
.toolbar {
    background: var(--qrlink-darker) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ov_toolbar {
    background: var(--qrlink-darker) !important;
}

.ov_toolbar_button {
    color: var(--qrlink-text-muted) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.ov_toolbar_button:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--qrlink-text) !important;
}

.ov_toolbar_button.selected {
    background: rgba(251, 191, 36, 0.1) !important;
    color: var(--qrlink-yellow) !important;
}

.ov_toolbar_separator {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* === MAIN AREAS === */
.main {
    background: var(--qrlink-darker) !important;
}

.main_navigator,
.main_sidebar {
    background: var(--qrlink-darker) !important;
}

.main_viewer {
    background: #151225 !important;
}

.main_viewer canvas {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.main_file_name {
    color: var(--qrlink-text-muted) !important;
}

.main_splitter {
    background: transparent !important;
}

.main_splitter:hover {
    background: rgba(251, 191, 36, 0.2) !important;
}

/* === INTRO SCREEN === */
.intro {
    background: var(--qrlink-dark) !important;
    border: 2px dashed rgba(255, 255, 255, 0.1) !important;
}

.intro_logo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.intro_dragdrop_text {
    color: var(--qrlink-text-muted) !important;
}

.intro_formats_title {
    color: var(--qrlink-text-muted) !important;
}

.intro_file_formats a {
    background: transparent !important;
    color: var(--qrlink-text-muted) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.intro_file_formats a:hover {
    background: rgba(251, 191, 36, 0.1) !important;
    color: var(--qrlink-yellow) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

/* === PANEL SECTIONS === */
.ov_panel_section_title {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--qrlink-text-muted) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ov_panel_section {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.ov_panel_set_content {
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ov_panel_set_menu_button {
    color: var(--qrlink-text-muted) !important;
}

.ov_panel_set_menu_button:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* === PANEL BUTTONS === */
.ov_panel_button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

.ov_panel_button:hover {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

.ov_panel_button_text {
    color: var(--qrlink-text-muted) !important;
}

.ov_panel_button:hover .ov_panel_button_text {
    color: var(--qrlink-yellow) !important;
}

.ov_panel_button_icon,
.ov_panel_button_left_icon {
    color: var(--qrlink-text-muted) !important;
}

.ov_panel_button:hover .ov_panel_button_icon,
.ov_panel_button:hover .ov_panel_button_left_icon {
    color: var(--qrlink-yellow) !important;
}

/* === TREE VIEW === */
.ov_tree_view {
    color: var(--qrlink-text-muted) !important;
}

.ov_tree_item {
    color: var(--qrlink-text-muted) !important;
    border-radius: 4px !important;
}

.ov_tree_item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--qrlink-text) !important;
}

.ov_tree_item.selected {
    background: rgba(251, 191, 36, 0.1) !important;
    color: var(--qrlink-yellow) !important;
}

.ov_tree_item_name {
    color: inherit !important;
}

.ov_tree_item_icon {
    color: inherit !important;
}

.ov_tree_item_button {
    color: var(--qrlink-text-muted) !important;
}

.ov_tree_item_button:hover {
    color: var(--qrlink-yellow) !important;
}

.ov_tree_view_children {
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* === NAVIGATOR === */
.ov_navigator_buttons {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ov_navigator_button {
    color: var(--qrlink-text-muted) !important;
    border-radius: 4px !important;
}

.ov_navigator_button:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--qrlink-yellow) !important;
}

.ov_navigator_buttons_separator {
    background: rgba(255, 255, 255, 0.1) !important;
}

.ov_navigator_tree_title {
    color: var(--qrlink-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ov_navigator_info_panel {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* === SIDEBAR === */
.ov_sidebar_title {
    color: var(--qrlink-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ov_sidebar_title_img {
    color: var(--qrlink-text-muted) !important;
}

.ov_sidebar_title_img:hover {
    color: var(--qrlink-yellow) !important;
}

.ov_sidebar_parameter {
    color: var(--qrlink-text-muted) !important;
}

.ov_sidebar_settings_section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* === BUTTONS === */
.ov_button {
    background: var(--qrlink-yellow) !important;
    color: var(--qrlink-dark) !important;
    border: none !important;
    border-radius: 4px !important;
}

.ov_button:hover {
    background: #f59e0b !important;
}

.ov_button.outline {
    background: transparent !important;
    color: var(--qrlink-yellow) !important;
    border: 1px solid var(--qrlink-yellow) !important;
}

.ov_button.outline:hover {
    background: rgba(251, 191, 36, 0.1) !important;
}

/* === DIALOG === */
.ov_dialog {
    background: var(--qrlink-dark) !important;
    color: var(--qrlink-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.ov_dialog_title {
    color: var(--qrlink-text) !important;
}

.ov_dialog_inner_title {
    color: var(--qrlink-text) !important;
}

.ov_dialog_content {
    color: var(--qrlink-text-muted) !important;
}

.ov_dialog_message {
    color: var(--qrlink-text) !important;
}

.ov_dialog_submessage {
    color: var(--qrlink-text-muted) !important;
}

.ov_dialog_row_name {
    color: var(--qrlink-text) !important;
}

.ov_dialog_row_value {
    color: var(--qrlink-text-muted) !important;
}

.ov_dialog_file_link {
    color: var(--qrlink-yellow) !important;
}

.ov_dialog_file_link:hover {
    background: rgba(251, 191, 36, 0.1) !important;
}

/* === POPUP === */
.ov_popup {
    background: var(--qrlink-dark) !important;
    color: var(--qrlink-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.ov_popup_list_item {
    color: var(--qrlink-text-muted) !important;
    border-radius: 4px !important;
}

.ov_popup_list_item:hover {
    background: rgba(251, 191, 36, 0.1) !important;
    color: var(--qrlink-yellow) !important;
}

/* === PROGRESS === */
.ov_progress {
    background: var(--qrlink-dark) !important;
    color: var(--qrlink-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
}

.ov_progress_text {
    color: var(--qrlink-text) !important;
}

/* === PROPERTY TABLE === */
.ov_property_table {
    color: var(--qrlink-text-muted) !important;
}

.ov_property_table_name {
    color: var(--qrlink-text) !important;
}

.ov_property_table_value {
    color: var(--qrlink-text-muted) !important;
}

.ov_property_table_button {
    color: var(--qrlink-yellow) !important;
}

.ov_property_table_custom {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* === TOOLTIP === */
.ov_tooltip {
    background: var(--qrlink-darker) !important;
    color: var(--qrlink-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

/* === ICONS === */
.ov_svg_icon {
    color: var(--qrlink-text-muted) !important;
}

.ov_svg_icon.light {
    color: var(--qrlink-text-muted) !important;
}

.ov_svg_icon.selected {
    color: var(--qrlink-yellow) !important;
}

.ov_svg_icon.disabled {
    color: rgba(255, 255, 255, 0.2) !important;
}

/* === FORM ELEMENTS === */
input[type="text"],
input[type="number"],
textarea {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--qrlink-text) !important;
    border-radius: 4px !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
    border-color: rgba(251, 191, 36, 0.3) !important;
    outline: none !important;
}

.ov_select {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--qrlink-text) !important;
}

.ov_select_container:after {
    color: var(--qrlink-text-muted) !important;
}

/* === TOGGLE === */
.ov_toggle {
    border: 1px solid var(--qrlink-text-muted) !important;
}

.ov_toggle_slider {
    border: 1px solid var(--qrlink-text-muted) !important;
}

.ov_toggle.on {
    background: var(--qrlink-yellow) !important;
    border-color: var(--qrlink-yellow) !important;
}

.ov_toggle.on .ov_toggle_slider {
    background: var(--qrlink-dark) !important;
    border-color: var(--qrlink-dark) !important;
}

/* === SLIDER === */
.ov_slider {
    background: rgba(255, 255, 255, 0.1) !important;
}

.ov_slider::-webkit-slider-thumb {
    background: var(--qrlink-yellow) !important;
}

.ov_slider::-moz-range-thumb {
    background: var(--qrlink-yellow) !important;
}

.ov_slider_label {
    color: var(--qrlink-text-muted) !important;
}

/* === CHECKBOX & RADIO === */
.ov_checkbox {
    border: 1px solid var(--qrlink-text-muted) !important;
}

.ov_checkbox:checked {
    background-color: var(--qrlink-yellow) !important;
    border: none !important;
}

.ov_radio_button {
    border: 1px solid var(--qrlink-text-muted) !important;
}

.ov_radio_button:checked {
    border: 5px solid var(--qrlink-yellow) !important;
}

/* === COLOR PICKER === */
.pcr-app {
    background: var(--qrlink-dark) !important;
    color: var(--qrlink-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
}

.pcr-app input.pcr-result {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--qrlink-text) !important;
}

.pcr-app .pcr-interaction input {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--qrlink-text) !important;
}

.pcr-app .pcr-interaction .pcr-save {
    background: var(--qrlink-yellow) !important;
    color: var(--qrlink-dark) !important;
}

.pcr-app .pcr-interaction .pcr-cancel,
.pcr-app .pcr-interaction .pcr-clear {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--qrlink-text-muted) !important;
}

/* === ENVIRONMENT MAP === */
.ov_environment_map_preview {
    border: 4px solid transparent !important;
    border-radius: 4px !important;
}

.ov_environment_map_preview:hover {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

.ov_environment_map_preview.selected {
    border-color: var(--qrlink-yellow) !important;
}

.ov_environment_map_preview_no_color {
    background: linear-gradient(to top left, var(--qrlink-darker) calc(50% - 1px), rgba(255,255,255,0.1), var(--qrlink-darker) calc(50% + 1px)) !important;
}

/* === MEASURE PANEL === */
.ov_measure_panel {
    background: var(--qrlink-dark) !important;
    color: var(--qrlink-yellow) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

/* === BOTTOM FLOATING PANEL === */
.ov_bottom_floating_panel {
    background: var(--qrlink-darker) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ov_floating_panel_text {
    color: var(--qrlink-text-muted) !important;
}

/* === SNAPSHOT DIALOG === */
.ov_snapshot_dialog_preview {
    background: var(--qrlink-darker) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ov_snapshot_dialog_separator {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ov_snapshot_dialog_param_name {
    color: var(--qrlink-text-muted) !important;
}

.ov_snapshot_dialog_param_value {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--qrlink-text) !important;
}

/* === SCROLLBAR === */
.ov_thin_scrollbar {
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent !important;
}

.ov_thin_scrollbar::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.ov_thin_scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02) !important;
}

.ov_thin_scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
}

.ov_thin_scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(251, 191, 36, 0.3) !important;
}

/* === COLOR CIRCLE === */
.ov_color_circle {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* === LINKS === */
a {
    color: var(--qrlink-yellow) !important;
}

/* === MODAL OVERLAY === */
.ov_modal_overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* === QR BUTTON STYLING === */
.header_button[title="Generează Cod QR"] {
    color: var(--qrlink-yellow) !important;
}

.header_button[title="Generează Cod QR"]:hover {
    background: rgba(251, 191, 36, 0.1) !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .header {
        padding: 6px !important;
    }
}