/* Application-specific styles */

/* ===== VIRT MANAGER (VirtualBox-style) ===== */
.virt-manager {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.virt-manager .vm-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: linear-gradient(180deg, #F7F5EF 0%, #E8E4D8 100%);
    border-bottom: 1px solid #C5C2B8;
}

.virt-manager .vm-toolbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    color: #333;
    min-width: 50px;
}

.virt-manager .vm-toolbar-btn .btn-icon {
    font-size: 20px;
    margin-bottom: 2px;
}

.virt-manager .vm-toolbar-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #FFF 0%, #E8E4D8 100%);
    border-color: #A8A8A8;
}

.virt-manager .vm-toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.virt-manager .vm-toolbar-btn.active {
    background: linear-gradient(180deg, #E0E0E0 0%, #C8C4B8 100%);
    border-color: #888;
}

.virt-manager .vm-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.virt-manager .vm-list {
    width: 280px;
    min-width: 200px;
    background: #E8E4D8;
    border-right: 1px solid #C5C2B8;
    overflow: auto;
}

.virt-manager .vm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #D8D4C8;
}

.virt-manager .vm-item:hover {
    background: #F0ECE0;
}

.virt-manager .vm-item.selected {
    background: #C0D0E8;
    border-color: #A0B8D0;
}

.virt-manager .vm-item-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: linear-gradient(180deg, #E0E8F0 0%, #B8C8D8 100%);
    border: 2px solid #8898A8;
    border-radius: 4px;
}

.virt-manager .vm-item-info {
    flex: 1;
    min-width: 0;
}

.virt-manager .vm-item-name {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
}

.virt-manager .vm-item-status {
    font-size: 10px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
}

.virt-manager .vm-item-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.virt-manager .vm-item-status .status-dot.running {
    background: #4CAF50;
    box-shadow: 0 0 4px #4CAF50;
}

.virt-manager .vm-item-status .status-dot.stopped {
    background: #9E9E9E;
}

.virt-manager .vm-item-status .status-dot.paused {
    background: #FF9800;
}

.virt-manager .vm-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #F5F3ED;
    overflow: hidden;
}

/* VM Tabs */
.virt-manager .vm-tabs {
    display: flex;
    background: linear-gradient(180deg, #E8E4D8 0%, #D8D4C8 100%);
    border-bottom: 1px solid #A8A4A0;
    padding: 0 8px;
}

.virt-manager .vm-tab {
    padding: 6px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 11px;
    font-family: var(--xp-font-ui);
    color: #444;
    margin-bottom: -1px;
}

.virt-manager .vm-tab:hover {
    background: rgba(255, 255, 255, 0.3);
}

.virt-manager .vm-tab.active {
    background: #F5F3ED;
    border-color: #A8A4A0;
    color: #000;
}

.virt-manager .vm-tab-content {
    flex: 1;
    overflow: auto;
    padding: 16px;
}

.virt-manager .vm-tab-content.hidden {
    display: none;
}

/* VNC Console */
.virt-manager .vnc-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #000;
    padding: 0;
    overflow: hidden;
}

.virt-manager .vnc-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #333;
    border-bottom: 1px solid #555;
}

.virt-manager .vnc-toolbar button {
    padding: 4px 8px;
    background: #555;
    border: 1px solid #777;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
}

.virt-manager .vnc-toolbar button:hover {
    background: #666;
}

.virt-manager .vnc-toolbar .vnc-status {
    color: #aaa;
    font-size: 11px;
    margin-left: auto;
}

.virt-manager .vnc-toolbar .vnc-status.connected {
    color: #4CAF50;
}

.virt-manager .vnc-toolbar .vnc-status.disconnected {
    color: #f44336;
}

.virt-manager .vnc-screen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    overflow: hidden;
}

.virt-manager .vnc-screen canvas {
    max-width: 100%;
    max-height: 100%;
}

.virt-manager .vnc-placeholder {
    color: #888;
    text-align: center;
}

.virt-manager .vnc-placeholder .icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.virt-manager .vm-details-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #D8D4C8;
    margin-bottom: 16px;
}

.virt-manager .vm-details-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: linear-gradient(180deg, #E0E8F0 0%, #B8C8D8 100%);
    border: 2px solid #8898A8;
    border-radius: 6px;
}

.virt-manager .vm-details-title h2 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}

.virt-manager .vm-details-title p {
    font-size: 11px;
    color: #666;
}

.virt-manager .vm-details-section {
    margin-bottom: 16px;
}

.virt-manager .vm-details-section h3 {
    font-size: 11px;
    font-weight: bold;
    color: #1E4E8A;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #C6D3E7;
}

.virt-manager .vm-details-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 4px 12px;
    font-size: 11px;
}

.virt-manager .vm-details-grid dt {
    color: #666;
}

.virt-manager .vm-details-grid dd {
    color: #333;
}

.virt-manager .vm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888;
}

.virt-manager .vm-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* ===== FILE EXPLORER (Windows XP Explorer-style) ===== */
.file-explorer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.file-explorer .fe-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background: linear-gradient(180deg, #FAFAFA 0%, #ECE9D8 100%);
    border-bottom: 1px solid #C5C2B8;
}

.file-explorer .fe-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.file-explorer .fe-toolbar-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #FFF 0%, #E8E4D8 100%);
    border-color: #A8A8A8;
}

.file-explorer .fe-toolbar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.file-explorer .fe-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.file-explorer .fe-sidebar {
    width: 200px;
    min-width: 120px;
    background: linear-gradient(180deg, #7BA2D4 0%, #6892C4 100%);
    display: flex;
    flex-direction: column;
}

.file-explorer .fe-sidebar-section {
    padding: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.file-explorer .fe-sidebar-title {
    font-size: 11px;
    font-weight: bold;
    color: #FFF;
    margin-bottom: 6px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.file-explorer .fe-sidebar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    color: #FFF;
    font-size: 11px;
    cursor: pointer;
    border-radius: 3px;
}

.file-explorer .fe-sidebar-item:hover {
    background: rgba(255,255,255,0.2);
}

.file-explorer .fe-sidebar-item.selected {
    background: rgba(255,255,255,0.3);
}

.file-explorer .fe-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
}

.file-explorer .fe-file-list {
    flex: 1;
    overflow: auto;
    padding: 4px;
}

.file-explorer .fe-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 3px;
}

.file-explorer .fe-file-item:hover {
    background: #E8E8F0;
}

.file-explorer .fe-file-item.selected {
    background: var(--xp-selection-bg);
    color: white;
}

.file-explorer .fe-file-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.file-explorer .fe-file-name {
    flex: 1;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-explorer .fe-file-size {
    font-size: 11px;
    color: #666;
    min-width: 80px;
    text-align: right;
}

.file-explorer .fe-file-date {
    font-size: 11px;
    color: #666;
    min-width: 100px;
    text-align: right;
}

.file-explorer .fe-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888;
    font-size: 12px;
}

.file-explorer .fe-restores-list {
    padding: 8px;
    overflow: auto;
    flex: 1;
}

.file-explorer .fe-restore-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin-bottom: 4px;
    background: #F5F3ED;
    border: 1px solid #D8D4C8;
    border-radius: 4px;
    cursor: pointer;
}

.file-explorer .fe-restore-item:hover {
    background: #E8E4D8;
}

.file-explorer .fe-restore-item.selected {
    background: #C0D0E8;
    border-color: #A0B8D0;
}

.file-explorer .fe-restore-icon {
    font-size: 24px;
}

.file-explorer .fe-restore-info {
    flex: 1;
}

.file-explorer .fe-restore-id {
    font-size: 11px;
    font-weight: bold;
    color: #333;
}

.file-explorer .fe-restore-details {
    font-size: 10px;
    color: #666;
}

/* ===== IMAGE EXPORT MANAGER ===== */
.image-export-manager {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.image-export-manager .iem-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: linear-gradient(180deg, #F7F5EF 0%, #E8E4D8 100%);
    border-bottom: 1px solid #C5C2B8;
}

.image-export-manager .iem-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.image-export-manager .iem-list {
    flex: 1;
    overflow: auto;
    padding: 8px;
}

.image-export-manager .iem-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3ED 100%);
    border: 1px solid #D8D4C8;
    border-radius: 4px;
    cursor: pointer;
}

.image-export-manager .iem-item:hover {
    background: linear-gradient(180deg, #F8F6F0 0%, #E8E4D8 100%);
}

.image-export-manager .iem-item.selected {
    background: #C0D0E8;
    border-color: #A0B8D0;
}

.image-export-manager .iem-item-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: linear-gradient(180deg, #F0E8D0 0%, #D8C8A0 100%);
    border: 2px solid #B8A888;
    border-radius: 4px;
}

.image-export-manager .iem-item-info {
    flex: 1;
}

.image-export-manager .iem-item-id {
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

.image-export-manager .iem-item-details {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

.image-export-manager .iem-item-type {
    padding: 2px 8px;
    background: #E0D8C8;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    color: #666;
}

.image-export-manager .iem-details {
    width: 220px;
    padding: 16px;
    background: #F5F3ED;
    border-left: 1px solid #D8D4C8;
    overflow: auto;
}

.image-export-manager .iem-details h3 {
    font-size: 12px;
    font-weight: bold;
    color: #1E4E8A;
    margin-bottom: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid #C6D3E7;
}

.image-export-manager .iem-details-row {
    margin-bottom: 8px;
}

.image-export-manager .iem-details-label {
    font-size: 10px;
    color: #888;
    margin-bottom: 2px;
}

.image-export-manager .iem-details-value {
    font-size: 11px;
    color: #333;
    word-break: break-all;
}

.image-export-manager .iem-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888;
}

.image-export-manager .iem-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* ===== COMMON APP ELEMENTS ===== */
.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: #666;
}

.app-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    color: #C00;
    padding: 20px;
    text-align: center;
}

.app-error .error-icon {
    font-size: 32px;
}