/* Project Manager (pm) iframe styles */
:root {
    --pm-bg: #1a1a1a;         /* Match agent body background */
    --pm-surface: #222222;    /* Surface for header (match agent) */
    --pm-border: #444;        /* Borders */
    --pm-text: #ffffff;       /* Primary text */
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--pm-bg);
    color: var(--pm-text);
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
}

.pm-header {
    background: var(--pm-surface);
    border-bottom: 1px solid var(--pm-border);
    height: 27px;               /* Adjusted from 25px to 27px */
    display: flex;              /* Layout for title and button */
    align-items: center;        /* Center content vertically */
    justify-content: space-between; /* Space between title and collapse button */
    padding: 0 8px 0 16px;      /* Left 16px; right 8px to fit button */
    font-size: 11px;            /* Slightly smaller */
    font-weight: normal;        /* Not bold */
    color: #cccccc;             /* Light grey text */
}

.pm-title {
    font-size: 11px;
    color: #cccccc;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.pm-title:hover {
    color: #ffffff;
}

.pm-title.active {
    color: #ffffff;
}

.pm-collapse-btn {
    background: transparent;
    color: #cccccc;
    border: 1px solid var(--pm-border);
    border-radius: 4px;
    width: 18px;
    height: 18px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;            /* Perfect centering */
    align-items: center;
    justify-content: center;
    line-height: 1;                 /* Remove font baseline bias */
    padding: 0;                     /* Ensure exact box size */
}

.pm-collapse-btn:hover { background: rgba(255,255,255,0.06); }

.pm-body {
    flex: 1;
    overflow: auto;
    background: transparent;
    display: flex;                 /* Enable centering */
    align-items: center;           /* Vertical center */
    justify-content: center;       /* Horizontal center */
}

/* Simple top toolbar inside Explorer body */
/* Removed toolbar; using full-body centering */

.pm-btn {
    background: #1a1a1a;           /* Match App body */
    color: #76B900;                /* NVIDIA green text */
    border: 1px solid #76B900;     /* NVIDIA green border */
    border-radius: 6px;            /* Slightly rounder corners */
    padding: 8px 10px;             /* Slightly narrower width */
    font-size: 12px;               /* Slightly larger for tap target */
    cursor: pointer;               /* Pointer on hover */
    font-weight: normal;           /* Normal (not bold) */
    font-style: normal;            /* Ensure not italic */
}

.pm-btn:hover {
    background: #333333;           /* Slightly lighter dark grey on hover */
}

/* File Tree Styles */
.file-tree {
    width: 100%;
    height: 100%;
    padding: 4px 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    color: #cccccc;
    overflow-y: auto;
}

.tree-item {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.tree-item:hover {
    background-color: #2a2d2e;
}

.tree-item.selected {
    background-color: #37373d;
    color: #ffffff;
}

.tree-arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    margin-right: 2px;
    font-size: 10px;
    transition: transform 0.1s ease;
    color: #cccccc;
}

.tree-item.collapsed .tree-arrow {
    transform: rotate(-90deg);
}

.tree-icon {
    margin-right: 6px;
    width: 16px;
    text-align: center;
}

.tree-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-label.bold {
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.tree-children {
    display: block;
}

.tree-children.hidden {
    display: none;
}

/* Indentation levels */
.indent-1 { padding-left: 6px; }
.indent-2 { padding-left: 14px; }

/* File type specific colors/icons could go here */

/* Sub-header */
.pm-sub-header {
    flex: 0 0 auto;
    height: 27px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--pm-surface);
    border-bottom: 1px solid var(--pm-border);
}

.pm-app-name {
    font-size: 11px;
    color: #cccccc;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.pm-app-name:hover {
    color: var(--pm-text);
}

.pm-app-name.active {
    color: #ffffff;
}

/* App View */
.pm-app-view {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    padding: 0;
}

.pm-app-view img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* Arrow */
.pm-app-arrow {
    font-size: 10px;
    color: #cccccc;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    cursor: pointer;
    transform: rotate(90deg); /* Default to Down (Expanded) */
}

.pm-app-arrow svg {
    width: 12px;
    height: 12px;
    display: block;
}

.pm-app-arrow:hover {
    color: var(--pm-text);
}

.pm-app-arrow.collapsed {
    transform: rotate(0deg);
}