/* css/windows.css - Internal App Layouts */

/* 1. BASE WINDOW STRUCTURE */
.window { 
    position: absolute; 
    background: var(--window-bg); 
    display: none; 
    flex-direction: column; 
    min-width: 250px; 
    z-index: 100; 
    box-sizing: border-box;
}

.window.visible { display: flex; }

/* The Classic Dotted Resize Grip */
.window::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    cursor: se-resize;
    background-image: radial-gradient(circle, var(--window-border-dark) 1px, transparent 1px);
    background-size: 4px 4px;
    background-position: bottom right;
    z-index: 10;
}

.window-header { 
    height: 24px; 
    padding: 2px 4px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    background: linear-gradient(90deg, var(--active-titlebar-start), var(--active-titlebar-end)); 
    color: white; 
    font-weight: bold; 
    flex-shrink: 0; /* Prevents titlebar from shrinking on small heights */
    z-index: 10;
}

.window.inactive .window-header { 
    background: linear-gradient(90deg, #808080, #b5b5b5); 
}

.window-button {
    height: 16px;
    width: 16px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.window-button img {
    pointer-events: none;
    width: 12px;
    height: 12px;
}
.window-controls {
    display: flex;
    gap: 2px;
    z-index: 9999;
}
/* 2. EXPLORER & TOOLBARS */
.folder-toolbar {
    background: var(--window-bg);
    flex-shrink: 0;
}

.nav-buttons {
    display: flex;
    gap: 5px;
    padding: 5px;
    border-bottom: 1px solid #fff;
}

.nav-buttons button {
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.address-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 5px;
}

.address-bar {
    width: 100%;
    background: #fff;
    border: 2px inset #dfdfdf;
    align-items: center;
    padding: 2px 5px;
    display: flex;
    gap: 5px;
    overflow: hidden;
}

.explorer-layout { 
    display: flex; 
    flex: 1; 
    overflow: hidden; 
}

.left-side { 
    width: 170px; 
    background: linear-gradient(180deg, #000080 0%, #1084d0 100%); 
    color: white; 
    padding: 20px; 
    flex-shrink: 0; 
}

.underline-header { 
    height: 2px; 
    background: linear-gradient(90deg, red, yellow, green, cyan); 
    margin: 10px 0; 
}

.folder-container { 
    flex: 1; 
    padding: 20px; 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); 
    gap: 15px; 
    overflow-y: auto; 
}

/* 3. APP SPECIFIC CONTENT */
.status-bar { 
    height: 20px; 
    padding: 2px 10px; 
    background: var(--window-bg); 
    display: flex; 
    align-items: center; 
    border-top: 1px solid var(--window-border-dark);
    flex-shrink: 0;
}

/* MS-DOS Prompt Styling */
.cmd-body {
    background: #000 !important;
    color: #c0c0c0 !important; /* Classic light gray/silver text */
    font-family: 'Courier New', Courier, monospace !important;
    padding: 10px;
    line-height: 1.4;
    cursor: text;
    flex: 1; 
    overflow-y: auto;
}

.cmd-input-line {
    display: flex;
    gap: 8px;
    align-items: center;
}

#cmd-input {
    background: transparent; /* Makes the white box disappear */
    border: none;             /* Removes the 3D browser border */
    color: inherit;           /* Inherits the gray/white from parent */
    outline: none;            /* Removes the blue glow when clicked */
    flex: 1;                  /* Takes up the rest of the line */
    caret-color: #fff;        /* Optional: Makes the blinking cursor white */
}

/* Optional: Authentic blinking underscore cursor effect */
#cmd-input:focus {
    outline: none;
}

#notepad-text { 
    width: 100%; 
    height: 100%; 
    padding: 10px; 
    font-family: 'Courier New', monospace; 
    border: none; 
    resize: none; 
    outline: none; 
}

.pdf-viewport { 
    background: #525659; 
    padding: 20px; 
    display: flex; 
    justify-content: center; 
    flex: 1; 
    overflow-y: auto; 
}

.pdf-page { 
    background: white; 
    width: 100%; 
    max-width: 500px; 
    padding: 40px; 
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5); 
    font-family: 'Times New Roman', serif; 
}

/* 4. TABS & SYSTEM PROPERTIES (THE "ABOUT" WINDOW) */
#about-window {
    flex-direction: column;
    min-height: 300px;
}

.tab-container {
    display: flex;
    padding-left: 2px;
    margin-top: 5px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.tab {
    padding: 3px 10px;
    border: 1px solid var(--window-border-dark);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    background: var(--window-bg);
    margin-right: 2px;
    cursor: default;
}

.tab.active {
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: -2px; 
    z-index: 2;
    border-top: 1px solid var(--window-border-light);
    border-left: 1px solid var(--window-border-light);
}

.system-info-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tab-pane {
    display: none;
    padding: 15px;
    border: 2px outset var(--window-border-light);
    box-shadow: 1px 1px 0 #000;
    flex: 1;
    background: var(--window-bg);
    overflow-y: auto; /* Corrected to handle resizing internally */
}

.tab-pane.active {
    display: flex;
    flex-direction: column;
}

.device-manager-container {
    background: white;
    border: 2px inset #fff;
    flex: 1; /* Changed from height: 100% to flex: 1 for better resizing */
    min-height: 150px;
    padding: 5px;
    font-family: 'Courier New', monospace;
    overflow-y: auto;
    color: #000;
}

.client-column-list {
    column-count: 2;
    column-gap: 20px;
    list-style-type: disc;
    margin-left: 20px;
    line-height: 1.6;
}

/* 5. TREE VIEW (ACCORDION) */
.device-tree, .device-tree ul {
    list-style-type: none;
    padding-left: 15px;
    margin: 0;
}

.node-toggle {
    display: inline-block;
    width: 25px;
    cursor: pointer;
    font-weight: bold;
}

.node-text:hover {
    background-color: #000080;
    color: #fff;
}

.nested {
    display: none;
    padding: 5px 10px;
}

.active-node > .nested {
    display: block;
}