/* HiCloud Portal Custom Styles */

html, body {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/*
 * a11y: <MudText Color="Color.Secondary"> renders with class .mud-secondary-text, which paints
 * text in the teal brand Secondary (#00897B) — only ~3.95:1 on the page background and ~4.32:1
 * on white, both below WCAG AA (4.5:1). The pattern is used app-wide for muted captions /
 * descriptions / empty-states (591+ sites). Repoint the class to the muted TextSecondary token
 * (#616161 → 5.68:1 / 6.19:1; theme-aware, so dark mode keeps its lighter grey) so every
 * secondary-text element clears AA in one place instead of editing hundreds of call sites.
 * Buttons/chips/avatars use Color.Secondary via different classes and are unaffected.
 */
.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Custom utility classes */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }

/* VM Status badges */
.vm-status-running {
    background-color: #4CAF50 !important;
}

.vm-status-stopped {
    background-color: #9E9E9E !important;
}

.vm-status-suspended {
    background-color: #FF9800 !important;
}

.vm-status-error {
    background-color: #F44336 !important;
}

.vm-status-pending {
    background-color: #2196F3 !important;
}

/* Card hover effects */
.mud-card {
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.mud-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Navigation highlighting */
.mud-nav-item.active {
    background-color: rgba(25, 118, 210, 0.08);
}

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

/* ==========================================
   VM Console - VCD Classic Style UI
   ========================================== */

.vcd-console-layout {
    position: relative; /* Changed from absolute to relative */
    width: 100vw;      /* Explicit viewport width */
    height: 100vh;     /* Explicit viewport height */
    background: #000000; /* Dark background better for console */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vcd-console-header {
    background: #ffffff;
    padding: 12px 24px;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.vcd-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.vcd-vm-title {
    font-size: 18px;
    font-weight: 400;
    color: #333;
    margin: 0;
}

.vcd-fullscreen-link {
    font-size: 12px;
    color: #0099cc;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.vcd-fullscreen-link:hover {
    text-decoration: underline;
}

.vcd-toolbar {
    display: flex;
    gap: 12px;
}

/* VCD Button Style - Blue Outline */
.vcd-btn {
    background: transparent;
    border: 1px solid #0099cc;
    color: #0099cc;
    padding: 4px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    height: 32px;
}

.vcd-btn:hover {
    background: #0099cc;
    color: #ffffff;
}

.vcd-console-body {
    flex: 1;
    background: #000000;
    position: relative;  /* For absolute positioning of child */
    overflow: auto;      /* Allow scrolling if canvas > container */
    padding: 0;
    margin: 0;
}

/* Container fills parent completely */
#console-container,
.vcd-canvas-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;  /* Scroll if canvas bigger */
    display: flex;
    justify-content: center;
    align-items: center; /* Center the console canvas in the black area */
    padding: 10px;
}

/* WMKS Canvas - NATIVE SIZE, NO SCALING */
.vcd-canvas-wrapper canvas,
#console-container canvas {
    /* Let WMKS set the size, don't override */
    display: block !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    
    /* CRITICAL: Prevent ALL CSS scaling */
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
    object-fit: none !important;
    /* Center the native-size canvas. WMKS sets inline `position:relative; top/left:<half>; margin:auto`
       to self-center, but the flex container ALSO centers it, so the two offsets stacked and pushed the
       canvas into a corner. Neutralise WMKS's offset (top/left/margin = 0) and let the flex container do
       the centering. transform:none keeps native size (no scaling), input mapping stays correct. */
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    
    /* Touch */
    touch-action: none;
    user-select: none;
}

.vcd-canvas-wrapper canvas:focus,
#console-container canvas:focus {
    outline: 2px solid #0099cc;
}

.vcd-status-bar {
    background: #ffffff;
    padding: 4px 16px;
    border-top: 1px solid #e0e0e0;
    font-size: 11px;
    color: #666;
    display: flex;
}

.console-loading-overlay, .console-error-state {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* DataGrid enhancements */
.mud-table-row:hover {
    background-color: rgba(25, 118, 210, 0.04) !important;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .mud-drawer {
        width: 100% !important;
    }
    
    .hide-on-mobile {
        display: none !important;
    }
}

/* Print styles */
@media print {
    .mud-appbar,
    .mud-drawer,
    .no-print {
        display: none !important;
    }
    
    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Security 2-column dialogs (Firewall/NAT/Route redesign) — form + preview sidebar.
   Explicit flex (not MudGrid): MudGrid min-width:auto pushes the sidebar below (cf. vmwizard-cols). */
.fw-dialog-cols { display: flex; flex-wrap: wrap; gap: 16px; }
.fw-dialog-main { flex: 1.4 1 340px; min-width: 0; }
.fw-dialog-side { flex: 1 1 240px; min-width: 0; }
@media (min-width: 960px) {
    .fw-dialog-side { border-left: 0.5px solid var(--mud-palette-lines-default); padding-left: 16px; }
}
/* Source/Destination match-mode segmented toggle (Groups | IP addresses) — full width, even halves
   so it fits the narrow md=6 columns cleanly instead of the overflowing MudTabs it replaced. */
.fw-match-toggle { width: 100%; }
.fw-match-toggle .mud-toggle-item { flex: 1 1 0; justify-content: center; }
.selectable-card { transition: transform 0.15s ease-in-out; }
.selectable-card:hover { transform: translateY(-2px); }

/* Firewall rules table — CSS grid (fills width, Service flexible, actions pushed far-right). */
.fw-rule-grid {
    display: grid;
    grid-template-columns: 48px minmax(110px,1.2fr) minmax(80px,1fr) minmax(80px,1fr) minmax(130px,1.6fr) 96px 132px;
    align-items: center;
    column-gap: 10px;
}
.fw-rule-grid > * { min-width: 0; }

/* ── Portal row expander ─────────────────────────────────────────────────────────
   Datagrid row expand toggle styled like the NavMenu group chevron: a single
   KeyboardArrowRight chevron that rotates 90deg smoothly (0.3s) and turns primary
   when the row is open — replacing the plain swapped '>' of MudBlazor HierarchyColumn.
   Applied via <PortalRowExpander> inside a TemplateColumn Tag="hierarchy-column". */
.mud-icon-button.portal-expander {
    color: var(--mud-palette-action-default);
}
.portal-expander .mud-icon-root {
    transition: transform .3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.mud-icon-button.portal-expander:hover {
    color: var(--mud-palette-primary);
}
.mud-icon-button.portal-expander.portal-expander--open {
    color: var(--mud-palette-primary);
}
.portal-expander.portal-expander--open .mud-icon-root {
    transform: rotate(90deg);
}
/* keep the expander column tight, like the old HierarchyColumn */
.portal-expander-col {
    width: 44px;
    text-align: center;
}