/* Main iFrame widget icons for both widgets */
.icon-iframewidget,
.icon-personal-iframewidget,
.icon-iframe {
    background-image: url('../img/iframewidget-dark.svg');
    filter: var(--background-invert-if-dark);
}

body.theme--dark .icon-iframewidget,
body.theme--dark .icon-personal-iframewidget,
body.theme--dark .icon-iframe {
    background-image: url('../img/iframewidget.svg');
}

/* Widget panel sizing and layout */
.panel.ifw-widget-extra-wide[data-widget-id="iframewidget"] {
    width: 100% !important;
}

.panel.ifw-title-empty[data-widget-id="iframewidget"] .panel--header {
    height: 16px;
    padding: 0;
}

.panel.ifw-title-empty[data-widget-id="iframewidget"] span.icon-iframewidget {
    display: none;
}

.panel.ifw-title-empty[data-widget-id="iframewidget"] .panel--content {
    height: calc(424px + 78px);
}

/* iFrame itself */
.iframewidget-frame {
    width: 100%;
    border: none;
    overflow: hidden;
}

.iframewidget-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.iframewidget-frame[style*="height: 100%"] {
    flex: 1;
    min-height: 100px;
}

/* Transition effects - apply to both widgets */
.panel[data-widget-id="iframewidget"],
.panel[data-widget-id="personal-iframewidget"] {
    transition: width 0.3s ease-in-out, max-width 0.3s ease-in-out;
    will-change: width, max-width;
    transform: translateZ(0); /* Forces hardware acceleration */
}

.iframewidget-container {
    transition: opacity 0.3s ease-in;
}

/* Custom Icon styling */
.panel--header h2 .widget-icon {
    float: left !important;
    display: inline-block !important;
    margin-right: 16px !important;
    margin-left: 0 !important;
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
}

/* Hide all original and custom icons when our widget icon is present */
.panel--header h2 .widget-icon + span,
.panel--header h2 span[class^="si:"],
.panel--header h2 span[class*=" si:"],
.panel--header h2 .widget-icon + .icon-iframewidget,
.panel--header h2 .widget-icon + .icon-personal-iframewidget,
.panel--header h2 .widget-icon + .icon-iframe {
    display: none !important;
}

.panel--header h2 .widget-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    vertical-align: middle;
}

.panel--header h2 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

/* Add specific styles to ensure header alignment */
.panel[data-widget-id="iframewidget"] .panel--header h2,
.panel[data-widget-id="personal-iframewidget"] .panel--header h2 {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Extra-wide fixed width approach for both widgets - double the standard width */
body .app-dashboard .panel.ifw-widget-extra-wide[data-widget-id="iframewidget"],
body .app-dashboard .panel.ifw-widget-extra-wide[data-widget-id="personal-iframewidget"] {
    width: 640px !important; /* Double the standard widget width of 320px */
    max-width: 640px !important;
}

/* Ensure widgets remain responsive on smaller screens */
@media (max-width: 767px) {
    body .app-dashboard .panel.ifw-widget-extra-wide[data-widget-id="iframewidget"],
    body .app-dashboard .panel.ifw-widget-extra-wide[data-widget-id="personal-iframewidget"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Special case for single-column dashboard layout */
body.dashboard-grid-1 .app-dashboard .panel.ifw-widget-extra-wide[data-widget-id="iframewidget"],
body.dashboard-grid-1 .app-dashboard .panel.ifw-widget-extra-wide[data-widget-id="personal-iframewidget"] {
    width: 100% !important;
    max-width: 100% !important;
}