/* Personal IFrame widget icon */
.icon-personal-iframewidget,
.icon-iframe {
    background-image: url('../img/iframewidget-dark.svg');
    filter: var(--background-invert-if-dark);
}

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="personal-iframewidget"] {
    width: 640px;
}

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

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

.panel.ifw-title-empty[data-widget-id="personal-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 */
.panel[data-widget-id="personal-iframewidget"] {
    transition: width 0.3s ease-in-out;
    will-change: width;
    transform: translateZ(0); /* Forces hardware acceleration */
}

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

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

.panel--header h2 .widget-icon + .icon-personal-iframewidget,
.panel--header h2 .widget-icon + .icon-iframe,
.panel--header h2 .icon-personal-iframewidget.hidden,
.panel--header h2 .icon-iframe.hidden {
    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;
    width: 100% !important;
}

/* Use Nextcloud's default dashboard widget header styles */
.panel[data-widget-id="iframewidget"] .panel--header h2,
.panel[data-widget-id="personal-iframewidget"] .panel--header h2 {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    padding-left: 0 !important;
}

/* Extra-wide grid column span for personal widget */
@media (min-width: 1024px) {
    body .app-dashboard .panel.ifw-widget-extra-wide[data-widget-id="personal-iframewidget"] {
        grid-column: span 2 !important;
        width: 100% !important;
        max-width: none !important;
    }
}