/* ===============================
   GLOBAL THEME & TOKENS
   =============================== */

:root {
    --accent: #c1440e;        /* burnt orange with red undertone */
    --button-bg: #e2caa2; /* warm beige with golden undertone */
    --button-text: #222;
    --button-border: #ccc;
}
button {
  background: linear-gradient(to bottom, #e2caa2, #d4b78f);
  color: var(--button-text);
  border: 1px solid var(--button-border);
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    background: #0f0f0f;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.theme-light {
    background: #f4f4f4;
    color: #222;
}

.theme-dark {
    background: #0f0f0f;
    color: #fff;
}

/* ===============================
   GLOBAL BUTTON STYLES
   =============================== */

button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--button-border);
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

button:hover,
button:focus,
button:active {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Dark theme dropdown fix */
.panel-section select,
.theme-dark select {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Dropdown options */
.panel-section select option {
    background: #1a1a1a;
    color: #fff;
}

/* ===============================
   TOP HEADER
   =============================== */

.top-header {
    width: 100%;
    height: 70px;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    box-sizing: border-box;
}

.logo-area .logo {
    height: auto;
    width: 120px;
    border-radius: 6px;
}

.top-header h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
}

/* Accent bar under header (brand line) */
.accent-bar {
    width: 100%;
    height: 6px;
    background-color: var(--accent);
}

/* Theme Toggle */
.theme-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.theme-toggle input {
    display: none;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    background: #555;
    border-radius: 24px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.3s;
}

.toggle-slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.theme-toggle input:checked + .toggle-slider {
    background: var(--accent);
}

.theme-toggle input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* ===============================
   LAYOUT
   =============================== */

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

/* ===============================
   SIDEBAR
   =============================== */

:root {
    --accent: #c75b12; /* Burnt orange */
    --text-main: #ffffff;
    --text-muted: rgba(255,255,255,0.6);
}

.sidebar {
    width: 300px;
    background: rgba(30, 30, 30, 0.55);
    backdrop-filter: blur(14px);
    border-right: 1px solid rgba(255,255,255,0.08);
    padding: 18px;
    overflow-y: auto;
    box-sizing: border-box;
    color: var(--text-main);
}

.sidebar-card {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,0.08);
}

.sidebar-card h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 6px;
    color: var(--text-main);
}

.sidebar-body {
    font-size: 14px;
    color: var(--text-main);
}

.placeholder-text {
    opacity: 0.6;
    color: var(--text-muted);
}


/* Sidebar button uses global button styling; only width/margin here */
.sidebar-button {
    width: 100%;
    margin-top: 10px;
}

/* Radar box */
.radar-box {
    width: 100%;
    height: 180px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

/* ===============================
   MAIN GRID
   =============================== */

.main-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 22px;
    overflow-y: auto;
    box-sizing: border-box;
}

.panel {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.08);
}
.panel-section:first-of-type {
    padding-bottom: 16px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.panel-section:first-of-type {
    padding-bottom: 16px;
    margin-bottom: 22px;
    border-bottom: 5px solid rgba(193, 68, 14, 0.45); /* #c1440e with subtle opacity */
}

.panel h2 {
    margin-top: 0;
    font-size: 20px;
    font-weight: 600;
}

.panel-section {
    margin-bottom: 18px;
}

.panel-section label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}

.panel-section input,
.panel-section select {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: none;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* Button row for Generate URLs + Generate JSON */
.button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.panel-section input,
.panel-section select,
.panel-section textarea {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: none;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 0.95rem;
}
.panel-section h3 {
    margin-bottom: 10px;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ===============================
   UPLOAD GROUPS
   =============================== */

.upload-group {
    margin-bottom: 18px;
}

.upload-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}

.upload-group input[type="file"],
.upload-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    margin-bottom: 8px;
}

/* Status indicator uses accent color */
.status-indicator {
    margin-left: 8px;
    font-weight: 700;
    color: var(--accent);
}

/* ===============================
   OUTPUT BOXES
   =============================== */

.output-box {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 12px;
    border-radius: 6px;
    margin-top: 12px;
    font-size: 0.9rem;
    color: #fff;
    word-break: break-word;
}


/* ===============================
   READINESS STATUS
   =============================== */

.readiness-indicator {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

#missingList {
    padding-left: 18px;
    font-size: 14px;
}

/* ===============================
   LIGHT THEME OVERRIDES
   =============================== */

.theme-light .sidebar,
.theme-light .panel {
    background: rgba(255,255,255,0.7);
    color: #222;
}

.theme-light .sidebar-card {
    background: rgba(255,255,255,0.9);
}

.theme-light input,
.theme-light select {
    background: rgba(0,0,0,0.1);
    color: #222;
}

.theme-light .output-box {
    background: rgba(0,0,0,0.1);
}

.theme-light .status-indicator {
    color: #c47a00; /* optional: keep a slightly softer tone in light mode */
}
/* =============================== */
/* COMPACT MODE – HIGH SPECIFICITY */
/* =============================== */

.panel .panel-section {
    margin-bottom: 10px !important;
}

.panel .panel-section label,
.panel .upload-group label {
    font-size: 13px !important;
    margin-bottom: 3px !important;
}

.panel .panel-section input,
.panel .upload-group input,
.panel .panel-section select {
    font-size: 13px !important;
    padding: 5px 7px !important;
}

.panel button {
    font-size: 13px !important;
    padding: 6px 10px !important;
}

.panel .upload-group {
    margin-bottom: 8px !important;
}

.panel h2 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
}

.panel h3 {
    font-size: 15px !important;
    margin-bottom: 5px !important;
}
/* Compact horizontal layout for upload groups */
.upload-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.upload-group-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.upload-group-row input[type="file"],
.upload-group-row input[type="text"] {
    flex: 1;
}

.upload-group-row button {
    white-space: nowrap;
}
/* =============================== */
/* PORTFOLIO ADMIN LAYOUT FIXES    */
/* =============================== */

.main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

.panel {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
}

.panel-section {
    margin-bottom: 20px;
}

.panel-section h3 {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

input, select, textarea {
    width: 100%;
    margin-bottom: 12px;
    padding: 8px;
    background: #111;
    border: 1px solid #444;
    border-radius: 4px;
    color: #fff;
}

button {
    width: 100%;
    padding: 10px;
    background: #0078ff;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

button:hover {
    background: #005fcc;
}
/* ===============================
   PROJECTSPACE PANEL — CLEAN + PREMIUM
   =============================== */

.panel-section {
    margin-bottom: 22px;
    padding: 18px;
    background: #111;
    border: 1px solid #222;
    border-radius: 8px;
}

.panel-section h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #eaeaea;
    letter-spacing: 0.5px;
}

.panel-section label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: #cfcfcf;
}

.panel-section input[type="file"],
.panel-section select {
    width: 100%;
    padding: 10px;
    background: #0d0d0d;
    border: 1px solid #333;
    border-radius: 6px;
    color: #eaeaea;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.panel-section input[type="file"]:hover,
.panel-section select:hover {
    border-color: #555;
}

.panel-section button {
    width: 100%;
    padding: 12px;
    background: #1f6feb;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.panel-section button:hover {
    background: #2a7bff;
}

.hint {
    margin-top: 4px;
    font-size: 0.8rem;
    color: #888;
}
.building-item {
    padding: 12px;
    margin-bottom: 12px;
    background: #111;
    border: 1px solid #222;
    border-radius: 6px;
}

.building-item strong {
    display: block;
    margin-bottom: 8px;
    color: #eaeaea;
}

.building-item label {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #ccc;
}

.building-item select {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    background: #0d0d0d;
    border: 1px solid #333;
    border-radius: 6px;
    color: #eee;
}
/* =============================== */
/* CLEAN TWO-PANEL ADMIN LAYOUT   */
/* =============================== */

.admin-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 20px;
}

/* LEFT + RIGHT PANELS */
.left-panel,
.right-panel {
    background: #1b1b1b;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #333;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.left-panel h2,
.right-panel h2 {
    margin-top: 0;
    color: #fff;
    font-size: 22px;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
}

.left-panel h3,
.right-panel h3 {
    margin-top: 25px;
    color: #ddd;
    font-size: 18px;
}

/* LABELS */
.left-panel label,
.right-panel label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #ccc;
    font-size: 14px;
}

/* INPUTS + SELECTS + TEXTAREA */
.left-panel input,
.right-panel input,
.left-panel select,
.right-panel select,
.right-panel textarea {
    width: 100%;
    padding: 10px;
    background: #111;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
}

.left-panel input:focus,
.right-panel input:focus,
.left-panel select:focus,
.right-panel select:focus {
    outline: none;
    border-color: #00aaff;
}

/* BUTTONS */
.left-panel button,
.right-panel button {
    margin-top: 15px;
    padding: 10px 14px;
    background: #0077cc;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}

.left-panel button:hover,
.right-panel button:hover {
    background: #0099ff;
}

/* SPECIAL BUTTONS */
#addBuildingBtn {
    background: #28a745;
}
#addBuildingBtn:hover {
    background: #32c85a;
}

#savePortfolioBtn,
#saveProjectSpaceBtn {
    background: #ff8800;
}
#savePortfolioBtn:hover,
#saveProjectSpaceBtn:hover {
    background: #ffaa33;
}

/* BUILDINGS LIST */
#buildingsContainer {
    margin-top: 15px;
    padding: 10px;
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
}

.building-item {
    background: #222;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #333;
    margin-bottom: 15px;
}

.building-item button {
    background: #cc0000;
}
.building-item button:hover {
    background: #ff0000;
}

/* VIEWER LINK AREA */
#viewerUrlOutput {
    margin-top: 10px;
    padding: 10px;
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    color: #0af;
    font-size: 14px;
    word-break: break-all;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .admin-container {
        grid-template-columns: 1fr;
    }
}
/* Allow scrolling for the main admin layout */
.layout {
    overflow-y: auto;
    height: calc(100vh - 120px); /* fits under header */
    padding-right: 10px;
}

/* Ensure admin container can grow and scroll */
.admin-container {
    overflow-y: auto;
    max-height: calc(100vh - 140px);
    padding-bottom: 40px;
}
.layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: calc(100vh - 100px); /* header height */
}
/* =============================== */
/* TIGHTER, BALANCED ADMIN LAYOUT */
/* =============================== */

/* Main layout: sidebar + content */
.layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px; /* tighter */
    height: calc(100vh - 100px);
    overflow: hidden;
    padding: 0 20px; /* pulls content inward */
}

/* Admin container: centered two-panel layout */
.admin-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* equal width */
    gap: 20px; /* tighter */
    padding: 10px 0;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}

/* Panels */
.left-panel,
.right-panel {
    background: #1b1b1b;
    padding: 16px; /* tighter */
    border-radius: 10px;
    border: 1px solid #333;
    box-shadow: 0 0 8px rgba(0,0,0,0.35);
}

/* Headings */
.left-panel h2,
.right-panel h2 {
    margin-top: 0;
    margin-bottom: 12px; /* tighter */
    font-size: 20px;
}

.left-panel h3,
.right-panel h3 {
    margin-top: 18px; /* tighter */
    margin-bottom: 8px;
    font-size: 16px;
}

/* Labels */
.left-panel label,
.right-panel label {
    margin-top: 10px; /* tighter */
    margin-bottom: 4px;
    font-size: 13px;
}

/* Inputs + selects */
.left-panel input,
.right-panel input,
.left-panel select,
.right-panel select {
    padding: 8px; /* tighter */
    font-size: 13px;
}

/* Buttons */
.left-panel button,
.right-panel button {
    margin-top: 10px; /* tighter */
    padding: 8px 12px;
    font-size: 13px;
}

/* Building list container */
#buildingsContainer {
    margin-top: 10px;
    padding: 10px;
}

/* Individual building card */
.building-item {
    padding: 12px; /* tighter */
    margin-bottom: 12px;
}

/* Scroll fixes */
.left-panel,
.right-panel {
    overflow-y: auto;
    max-height: calc(100vh - 160px);
    padding-bottom: 30px;
}

/* Responsive */
@media (max-width: 900px) {
    .admin-container {
        grid-template-columns: 1fr;
    }
}
/* =============================== */
/* FIX SIDEBAR OVERLAP + BALANCE  */
/* =============================== */

/* Main layout: sidebar + content */
.layout {
    display: grid;
    grid-template-columns: 220px 1fr; /* narrower sidebar */
    gap: 20px;
    height: calc(100vh - 100px);
    overflow: hidden;
    padding: 0 20px;
}

/* Sidebar */
.sidebar {
    width: 220px; /* hard lock width */
    min-width: 220px;
    max-width: 220px;
    overflow-y: auto;
}

/* Admin container: centered two-panel layout */
.admin-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px; /* tighter */
    padding: 10px 10px 40px 10px;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}

/* Panels */
.left-panel,
.right-panel {
    background: #1b1b1b;
    padding: 14px; /* tighter */
    border-radius: 10px;
    border: 1px solid #333;
    box-shadow: 0 0 8px rgba(0,0,0,0.35);
}

/* Headings */
.left-panel h2,
.right-panel h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 19px;
}

.left-panel h3,
.right-panel h3 {
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 15px;
}

/* Labels */
.left-panel label,
.right-panel label {
    margin-top: 8px;
    margin-bottom: 3px;
    font-size: 13px;
}

/* Inputs + selects */
.left-panel input,
.right-panel input,
.left-panel select,
.right-panel select {
    padding: 7px;
    font-size: 13px;
}

/* Buttons */
.left-panel button,
.right-panel button {
    margin-top: 8px;
    padding: 7px 10px;
    font-size: 13px;
}

/* Building list container */
#buildingsContainer {
    margin-top: 8px;
    padding: 8px;
}

/* Individual building card */
.building-item {
    padding: 10px;
    margin-bottom: 10px;
}

/* Scroll fixes */
.left-panel,
.right-panel {
    overflow-y: auto;
    max-height: calc(100vh - 160px);
    padding-bottom: 30px;
}

/* Responsive */
@media (max-width: 900px) {
    .admin-container {
        grid-template-columns: 1fr;
    }
}