/* ---
    Dark Inspector | M3 Expressive Redesign v2 by Principal Material You Designer
    Refinement: Replaced Outlined components with softer Text/Filled variants.
    --- */

/* --- Part 1: M3 System Tokens (The Foundation) --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    /* Color Palette (Dark Theme, Expressive) */
    --md-sys-color-primary-rgb: 168, 199, 250;
    --md-sys-color-primary: #A8C7FA;
    --md-sys-color-on-primary: #003355;
    --md-sys-color-primary-container: #004A77;
    --md-sys-color-on-primary-container: #D3E4FF;
    --md-sys-color-secondary-container: #3E4659;
    --md-sys-color-tertiary-container: #56443A;

    --md-sys-color-error: #F2B8B5;
    --md-sys-color-on-error: #601410;

    --md-sys-color-surface-dim: #111114;
    --md-sys-color-surface: #141218;
    --md-sys-color-surface-bright: #3A383E;
    
    --md-sys-color-surface-container-lowest: #0C0D11;
    --md-sys-color-surface-container-low: #1C1B20;
    --md-sys-color-surface-container: #201F24;
    --md-sys-color-surface-container-high: #2B2930;
    --md-sys-color-surface-container-highest: #36343B;

    --md-sys-color-on-surface: #E6E1E5;
    --md-sys-color-on-surface-variant: #C9C5D0;

    --md-sys-color-outline: #938F99;
    --md-sys-color-outline-variant: #49454F;

    /* Glass/Translucent Effect Colors */
    --md-sys-color-surface-container-alpha: rgba(28, 27, 32, 0.7);
    --md-sys-color-surface-container-high-alpha: rgba(43, 41, 48, 0.85);
    --md-sys-color-outline-variant-alpha: rgba(73, 69, 79, 0.5);

    /* Shape & Corner Radius Scale */
    --md-sys-shape-corner-xs: 8px;
    --md-sys-shape-corner-s: 12px;
    --md-sys-shape-corner-m: 16px;
    --md-sys-shape-corner-l: 20px;
    --md-sys-shape-corner-xl: 28px;
    --md-sys-shape-corner-full: 9999px;

    /* Motion & Animation Easing */
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
    --md-sys-motion-duration-short: 200ms;
    --md-sys-motion-duration-medium: 400ms;

    /* Typography */
    --md-sys-typescale-font-family: 'Roboto', sans-serif;
}

/* --- Part 2: Base & Global Styles --- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--md-sys-typescale-font-family);
    background-color: var(--md-sys-color-surface-dim);
    color: var(--md-sys-color-on-surface);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden; /* Prevent scrollbars from the aurora */
}

/* The "Liquid Glass" animated background */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 25%, var(--md-sys-color-primary-container) 0%, transparent 25%),
        radial-gradient(circle at 85% 35%, var(--md-sys-color-secondary-container) 0%, transparent 30%),
        radial-gradient(circle at 60% 80%, var(--md-sys-color-tertiary-container) 0%, transparent 25%),
        radial-gradient(circle at 30% 90%, var(--md-sys-color-primary) 0%, transparent 30%);
    background-color: var(--md-sys-color-surface-dim);
    filter: blur(100px);
    opacity: 0.25;
    animation: aurora 25s linear infinite alternate;
}

@keyframes aurora {
    from { transform: scale(1) rotate(0deg) translateX(0); }
    to { transform: scale(1.2) rotate(20deg) translateX(-5%); }
}

h1 {
    font-size: 22px;
    font-weight: 700; /* Expressive typography */
    color: var(--md-sys-color-on-surface);
}

/* --- Part 3: M3 Component Styles --- */

/* --- Buttons --- */
.md-button-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized-decelerate);
    position: relative;
    overflow: hidden;
    user-select: none;
}
.md-button-base:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.md-filled-button {
    composes: md-button-base;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 10px 30px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.md-filled-button:hover:not(:disabled) {
    box-shadow: 0 4px 15px -5px rgba(var(--md-sys-color-primary-rgb), 0.5);
    transform: translateY(-2px);
}

.md-text-button {
    composes: md-button-base;
    background-color: transparent;
    color: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 10px 12px;
}
.md-text-button:hover:not(:disabled) {
    background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
}

.md-icon-button {
    composes: md-button-base;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    color: var(--md-sys-color-on-surface-variant);
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.md-icon-button:hover:not(:disabled) {
    background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
    color: var(--md-sys-color-primary);
}
.md-icon-button.small { width: 32px; height: 32px; }
.md-icon-button.small .material-symbols-outlined { font-size: 20px; }


/* --- Text Field (FILLED variant) --- */
.md-filled-text-field {
    position: relative;
    background-color: var(--md-sys-color-surface-container);
    border-top-left-radius: var(--md-sys-shape-corner-s);
    border-top-right-radius: var(--md-sys-shape-corner-s);
    margin-bottom: 24px;
    transition: background-color var(--md-sys-motion-duration-short) ease;
}
.md-filled-text-field::after { /* Active indicator line */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--md-sys-color-on-surface-variant);
    transition: all var(--md-sys-motion-duration-short) ease;
}
.md-filled-text-field:focus-within {
    background-color: var(--md-sys-color-surface-container-high);
}
.md-filled-text-field:focus-within::after {
    height: 2px;
    background-color: var(--md-sys-color-primary);
}
.md-filled-text-field input {
    width: 100%;
    padding: 24px 16px 8px 16px;
    border: none;
    background: transparent;
    font-size: 16px;
    outline: none;
    color: var(--md-sys-color-on-surface);
}
.md-filled-text-field label {
    position: absolute;
    top: 16px;
    left: 16px;
    color: var(--md-sys-color-on-surface-variant);
    pointer-events: none;
    transition: all var(--md-sys-motion-duration-short) ease;
}
.md-filled-text-field input:focus + label,
.md-filled-text-field input:not(:placeholder-shown) + label {
    top: 6px;
    font-size: 12px;
    color: var(--md-sys-color-primary);
}

/* --- Login Page --- */
.login-page {
    background: transparent; /* The body::before handles the background */
}
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: var(--md-sys-color-surface-dim);
}
.login-box {
    background: var(--md-sys-color-surface-container-high-alpha);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--md-sys-color-outline-variant-alpha);
    padding: 40px;
    border-radius: var(--md-sys-shape-corner-l);
    width: 100%;
    max-width: 400px;
    text-align: center;
}
.login-box .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
    color: var(--md-sys-color-on-surface);
}
.login-box .logo .material-symbols-outlined {
    font-size: 40px;
    color: var(--md-sys-color-primary);
    animation: pulse-glow 3s infinite ease-in-out;
}
@keyframes pulse-glow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(var(--md-sys-color-primary-rgb), 0.3),
                     0 0 10px rgba(var(--md-sys-color-primary-rgb), 0.2);
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 15px rgba(var(--md-sys-color-primary-rgb), 0.5),
                     0 0 30px rgba(var(--md-sys-color-primary-rgb), 0.3);
        transform: scale(1.05);
    }
}
.login-error {
    color: var(--md-sys-color-error);
    background-color: rgba(242, 184, 181, 0.1);
    padding: 10px;
    border-radius: var(--md-sys-shape-corner-s);
    margin-bottom: 16px;
    font-size: 14px;
}

/* --- Main App Layout --- */
.app-container {
    width: 100%;
    max-width: 1400px;
    height: 95vh;
    background-color: var(--md-sys-color-surface-container-alpha);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--md-sys-color-outline-variant-alpha);
    border-radius: var(--md-sys-shape-corner-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.app-header {
    display: flex;
    align-items: center;
    padding: 12px 16px 12px 24px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}
.app-header .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--md-sys-color-primary);
}
.app-header .logo .material-symbols-outlined { font-size: 28px; }
.app-header .logo h1 { font-size: 22px; font-weight: 500; margin: 0; color: var(--md-sys-color-on-surface);}

/* --- Tabs --- */
.tabs {
    margin: 0 auto;
    display: flex;
    gap: 8px;
}
.tab-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--md-sys-shape-corner-full);
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized-decelerate);
    position: relative;
}
.tab-button.active {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.tab-button:not(.active):hover {
    background-color: var(--md-sys-color-surface-container-high);
}
.user-menu {
    margin-left: auto;
}

.main-content {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}
.view {
    display: none;
    flex-direction: column;
    height: 100%;
}
.view.active {
    display: flex;
}

/* --- File System View --- */
#fs-view {
    padding: 16px;
    gap: 16px;
}
.breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background-color: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-full);
    flex-shrink: 0;
}
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 8px;
}
.breadcrumb-item button {
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
    transition: all var(--md-sys-motion-duration-short) ease;
}
.breadcrumb-item button:hover:not(:disabled) {
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}
.breadcrumb-item button:disabled {
    color: var(--md-sys-color-on-surface);
    font-weight: 500;
    cursor: default;
}
.breadcrumb-separator {
    color: var(--md-sys-color-on-surface-variant);
}
.container-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    padding: 4px 4px 4px 12px;
    border-radius: var(--md-sys-shape-corner-full);
    font-weight: 500;
}

.file-list {
    flex-grow: 1;
    overflow-y: auto;
    /* NEW: For positioning context menu relative to the list */
    position: relative; 
}

/* --- M3 List Item Style (for Files & Docker) --- */
.md-list-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--md-sys-shape-corner-m);
    cursor: pointer;
    transition: background-color var(--md-sys-motion-duration-short) ease;
    gap: 16px;
    position: relative;
    overflow: hidden;
    user-select: none; /* Prevent text selection on right click */
}
.md-list-item:hover, .md-list-item.context-active {
    background-color: var(--md-sys-color-surface-container-high);
}
.md-list-item .material-symbols-outlined {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 24px;
}
.md-list-item .headline {
    flex-grow: 1;
    font-size: 16px;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none; /* Make sure click event bubbles up */
}
.md-list-item .supporting-text, .md-list-item .trailing-text {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
    white-space: nowrap;
    pointer-events: none;
}
.md-list-item .trailing-text {
    width: 120px;
    text-align: right;
}

.loading-indicator {
    padding: 20px;
    display: flex;
    justify-content: center;
}
.spinner {
    border: 4px solid var(--md-sys-color-surface-container-high);
    border-top: 4px solid var(--md-sys-color-primary);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Docker View --- */
#docker-view {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 8px;
}
.docker-container-list {
    flex-grow: 1;
    overflow-y: auto;
}
.list-header {
    display: grid;
    grid-template-columns: 3fr 1fr 1.5fr 1fr;
    gap: 16px;
    padding: 12px 16px;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--md-sys-color-on-surface-variant);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.docker-item {
    display: grid;
    grid-template-columns: 3fr 1fr 1.5fr 1fr;
    align-items: center;
    gap: 16px;
}
.docker-item .primary-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.docker-item .primary-content .headline {
    font-weight: 500;
    white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.docker-item .primary-content .supporting-text {
    font-size: 12px;
    white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}

.docker-item .status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.status-indicator .dot {
    width: 8px; height: 8px; border-radius: 50%;
}
.status-indicator.running .dot { background-color: #4CAF50; }
.status-indicator.exited .dot { background-color: #F44336; }
.status-indicator.created .dot { background-color: #FFC107; }

.docker-item .col-stats {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}
.docker-item .progress-bar {
    background-color: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-full);
    height: 6px;
    width: 100%;
    overflow: hidden;
    margin-top: 4px;
}
.docker-item .progress-bar-inner {
    background-color: var(--md-sys-color-primary);
    height: 100%;
    width: 0;
    transition: width 0.5s ease;
    border-radius: var(--md-sys-shape-corner-full);
}
.docker-item .col-actions { display: flex; justify-content: flex-end; }

/* --- Editor Modal --- */
.editor-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--md-sys-color-surface);
    z-index: 1000;
    display: none; /* JS toggles this */
    flex-direction: column;
}
.editor-header {
    display: flex;
    align-items: center;
    padding: 12px 16px 12px 24px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}
.editor-header .file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
}
.editor-status {
    margin: 0 auto;
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
}
.editor-actions { display: flex; align-items: center; gap: 8px; }
.monaco-editor-container { flex-grow: 1; }

/* --- Custom Alert (M3 Dialog) --- */
.custom-alert-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5); /* Scrim */
    display: none; /* JS toggles this */
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.custom-alert-box {
    background-color: var(--md-sys-color-surface-container-high);
    padding: 24px;
    border-radius: var(--md-sys-shape-corner-l);
    width: 90%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.custom-alert-box h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
}
.custom-alert-box p, .custom-alert-box .custom-alert-content {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.5;
}
.custom-alert-box .md-filled-text-field {
    margin: 16px 0 0 0;
}
.custom-alert-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* --- NEW: Context Menu --- */
.context-menu {
    position: fixed;
    z-index: 1500;
    min-width: 220px;
    background-color: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-s);
    border: 1px solid var(--md-sys-color-outline-variant);
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: none; /* Hidden by default */
    list-style: none;
    margin: 0;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--md-sys-color-on-surface);
    border-radius: var(--md-sys-shape-corner-xs);
    cursor: pointer;
    user-select: none;
}
.context-menu-item:hover {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.context-menu-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--md-sys-color-on-surface-variant);
}
.context-menu-item:hover .material-symbols-outlined {
    color: var(--md-sys-color-on-primary-container);
}
.context-menu-item.danger {
    color: var(--md-sys-color-error);
}
.context-menu-item.danger:hover {
    background-color: rgba(242, 184, 181, 0.15);
}
.context-menu-item.danger .material-symbols-outlined {
    color: var(--md-sys-color-error);
}
.context-menu-divider {
    height: 1px;
    background-color: var(--md-sys-color-outline-variant);
    margin: 8px 0;
}

/* --- NEW: Upload Modal --- */
.upload-modal-box {
    width: 90%;
    max-width: 600px;
}
#upload-drop-zone {
    border: 2px dashed var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-l);
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short) ease;
}
#upload-drop-zone.dragover {
    border-color: var(--md-sys-color-primary);
    background-color: rgba(var(--md-sys-color-primary-rgb), 0.1);
}
#upload-drop-zone .material-symbols-outlined {
    font-size: 48px;
    color: var(--md-sys-color-primary);
}
#upload-file-list {
    max-height: 250px;
    overflow-y: auto;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.upload-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    padding: 8px;
    background-color: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-s);
}
.upload-file-item .filename {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.upload-file-item .filesize {
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
}
.upload-progress-bar {
    width: 100%;
    height: 4px;
    background-color: var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
    margin-top: 4px;
    overflow: hidden;
}
.upload-progress-bar-inner {
    width: 0%;
    height: 100%;
    background-color: var(--md-sys-color-primary);
    transition: width 0.2s linear;
}