/* ============================================================================
   Base Styles
   Reset, layout, header, main content, and core game styling
   ============================================================================ */

/* Reset en basis styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    overflow: hidden;
    background-color: #2c3e50; /* Donkergrijsblauw i.p.v. zwart */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Game Container - Responsive with 16:9 aspect ratio */
#game-container {
    width: min(90vw, calc((100vh - 40px) * 16 / 9));
    max-width: 1920px;
    min-width: 960px;
    aspect-ratio: 16 / 9;
    position: relative;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    container-type: inline-size;
    overflow: hidden;
}

/* Game Status Display Panel - Position (460, 13), Size 140x70 in 1280x640 */
#gameStatusDisplay {
    position: absolute;
    left: 35.94%;       /* 460/1280 */
    top: 2.03%;         /* 13/640 */
    width: 10.94%;      /* 140/1280 */
    height: 10.94%;     /* 70/640 */
    display: flex;
    flex-direction: column;
    border: 3px solid #000;
    border-radius: 4px;
    overflow: hidden;
    z-index: 150;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    font-family: 'Segoe UI Symbol', Arial, sans-serif;
}

/* Black header bar */
.game-status-header {
    background-color: #000;
    color: #fff;
    padding: 6px 10px;
    font-size: clamp(9px, 0.94cqi, 12px);
    font-weight: bold;
    display: flex;
    gap: 5px;
    align-items: center;
}

.game-status-text {
    text-transform: capitalize;
}

/* Icon area - colored based on status */
.game-status-icon-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

.game-status-icon {
    font-size: clamp(16px, 1.875cqi, 24px);
    line-height: 1;
    color: #333;
    transition: color 0.3s ease;
    transform-origin: center center;
}

/* Spinning animation for busy state */
.game-status-icon.spinning {
    animation: spin 1s linear infinite;
}

/* Header Section - Responsive */
#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 11.11%; /* 80/720 = 11.11% */
    display: flex;
    background-color: #f0f0f0;
    border-bottom: 2px solid #ccc;
}

/* Logo Section - Responsive */
/* Width adjusted to center the menu: (100% - 35.16%) / 2 = 32.42% */
#logo-section {
    width: 32.42%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    padding-left: 20px;
    overflow: hidden;
    min-width: 0;
    flex-shrink: 1;
}

#logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* User Info Section - Responsive */
/* Width adjusted to center the menu: (100% - 35.16%) / 2 = 32.42% */
#userinfo-section {
    width: 32.42%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    gap: 10px;
}

#user-picture {
    height: 80%;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

#user-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    min-width: 0;
}

#user-text-line1,
#user-text-line2,
#user-text-line3 {
    font-size: clamp(9px, 0.85vw, 12px);
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#user-text-line1 {
    font-weight: bold;
}

#user-text-line2 {
    margin-top: 1px;
}

#user-text-line3 {
    margin-top: 1px;
}

/* Main Content Section - Responsive */
#main-content {
    position: absolute;
    top: 11.11%; /* 80/720 */
    left: 0;
    width: 100%;
    height: 88.89%; /* 640/720 */
    overflow: hidden;
}

#splash,
#process,
#screen-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Game Home Text Overlay */
.game-home-text {
    position: absolute;
    top: calc(12% - 30px);
    left: 8%;
    width: calc(55% - 150px);
    max-width: 600px;
    color: #333;
    font-size: clamp(10px, 1.0vw, 14px);
    line-height: 1.6;
    background-color: rgba(255, 255, 255, 0.9);
    padding: clamp(12px, 1.5vw, 22px) clamp(15px, 2vw, 28px);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.game-home-text p {
    margin-bottom: clamp(8px, 1vw, 14px);
}

.game-home-text p:last-child {
    margin-bottom: 0;
}

.game-home-text ul {
    margin: clamp(4px, 0.5vw, 8px) 0 clamp(6px, 0.8vw, 10px) clamp(18px, 2vw, 28px);
    padding: 0;
}

.game-home-text li {
    margin-bottom: 0;
}

.game-home-text .list-icon {
    font-size: 1.4em;
    margin-right: 5px;
    vertical-align: middle;
    line-height: 1;
}

.game-home-text strong {
    color: #2c5282;
}

/* ============================================================================
   Hot Area Styling (clickable regions)
   ============================================================================ */

.hot-areas-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hot-area-polygon {
    fill: transparent;
    stroke: transparent;
    stroke-width: 2;
    cursor: pointer;
    pointer-events: all;
    transition: all 0.2s ease;
}

.hot-area-polygon:hover {
    stroke: white;
    stroke-width: 3;
    fill: rgba(255, 255, 255, 0.15);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

/* Rectangular hot areas for screen interactions */
.hot-area-rect {
    fill: transparent;
    stroke: transparent;
    stroke-width: 1;
    cursor: pointer;
    pointer-events: all;
    transition: all 0.2s ease;
}

.hot-area-rect:hover {
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 1;
    fill: rgba(255, 255, 255, 0.35);
}

/* Circular hot areas for Customer and Vendor icons */
.hot-area-circle {
    fill: transparent;
    stroke: transparent;
    stroke-width: 1;
    cursor: pointer;
    pointer-events: all;
    transition: all 0.2s ease;
}

.hot-area-circle:hover {
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 2;
    fill: rgba(255, 255, 255, 0.25);
}

/* Pill-shaped hot areas (rounded rectangle) for Market */
.hot-area-pill {
    fill: transparent;
    stroke: transparent;
    stroke-width: 1;
    cursor: pointer;
    pointer-events: all;
    transition: all 0.2s ease;
}

.hot-area-pill:hover {
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 2;
    fill: rgba(255, 255, 255, 0.2);
}

/* ============================================================================
   Market Report Styling
   ============================================================================ */

.market-report h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #fff;
    border-bottom: 1px solid #4a4a6a;
    padding-bottom: 6px;
}

.market-report h4 {
    margin: 10px 0 6px 0;
    font-size: 14px;
    color: #aac;
}

.report-section {
    margin-bottom: 12px;
}

.report-section p {
    margin: 4px 0;
    font-size: 13px;
}

.report-section strong {
    color: #aac;
}

/* Demand chart image */
.demand-chart {
    width: 100%;
    height: auto;
    margin-top: 4px;
    border-radius: 4px;
}

/* Report header row - side by side layout */
.report-header-row {
    display: flex;
    gap: 15px;
    margin-bottom: 12px;
}

.report-header-left {
    flex: 1;
}

.report-header-left p {
    margin: 4px 0;
    font-size: 13px;
}

.report-header-left strong {
    color: #aac;
}

.report-header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    margin-right: 10px;
}

.demand-chart-small {
    width: 405px;
    height: auto;
    border-radius: 4px;
}

/* Full width demand chart */
.market-chart-container {
    width: 100%;
    text-align: center;
}

.demand-chart-full {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Market info row - companies and customers side by side */
.market-info-row {
    display: flex;
    gap: 30px;
    margin-bottom: 12px;
}

.market-info-left {
    flex: 1;
}

.market-info-left p {
    margin: 4px 0;
    font-size: 13px;
}

.market-info-left strong {
    color: #aac;
}

.market-info-right {
    flex: 1;
}

.market-info-right p {
    margin: 4px 0;
    font-size: 13px;
}

.market-info-right strong {
    color: #aac;
}

/* Elasticity info section under header row */
.elasticity-info {
    margin-top: 8px;
    margin-bottom: 12px;
}

.elasticity-info p {
    margin: 4px 0;
    font-size: 13px;
}

.elasticity-info .elasticity-title {
    margin-bottom: 4px;
}

.elasticity-info .elasticity-title strong {
    color: #aac;
}

.elasticity-info .hint,
.market-report .hint {
    color: #888;
    font-style: italic;
    font-size: 0.9em;
}

/* ============================================================================
   Responsive scaling
   ============================================================================ */

@media screen and (max-width: 1280px) {
    #game-container {
        transform-origin: top center;
        transform: scale(0.8);
    }
}

@media screen and (max-width: 1024px) {
    #game-container {
        transform: scale(0.6);
    }
}

@media screen and (max-width: 768px) {
    #game-container {
        transform: scale(0.5);
    }
}

/* ============================================================================
   Login Box Styling
   ============================================================================ */

/* Login overlay - darkens background to focus on login */
#login-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

/* Login Box - Centered and responsive */
#login-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(280px, 30cqi, 375px);
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 1);
    border: 3px solid #4CAF50;
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 0 30px rgba(76, 175, 80, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
    z-index: 10000;
}

.login-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(8px, 0.9cqi, 12px) clamp(12px, 1.4cqi, 18px);
    background: #4CAF50;
    border-radius: 8px 8px 0 0;
    cursor: move;
}

.login-title {
    margin: 0;
    padding: 0;
    font-size: clamp(16px, 1.64cqi, 21px);
    font-weight: bold;
    color: #fff;
}

.login-content {
    padding: clamp(12px, 1.4cqi, 18px);
}

#login-form {
    display: flex;
    flex-direction: column;
}

.login-field {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: clamp(8px, 0.9cqi, 12px);
    flex-wrap: wrap;
}

.login-field label {
    font-size: clamp(14px, 1.4cqi, 18px);
    font-weight: bold;
    color: #333;
    width: clamp(100px, 12cqi, 150px);
    text-align: left;
    flex-shrink: 0;
}

.login-field input {
    padding: 6px 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: clamp(14px, 1.4cqi, 18px);
    flex: 1;
    min-width: 100px;
    max-width: 150px;
}

.login-field input:focus {
    outline: none;
    border-color: #4CAF50;
}

.login-buttons {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    justify-content: space-between;
}

.btn-login {
    flex: 2;
    padding: 9px 12px;
    border: none;
    border-radius: 5px;
    font-size: clamp(14px, 1.4cqi, 18px);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    background-color: #4CAF50;
    color: white;
}

.btn-login:hover {
    background-color: #45a049;
}

.btn-exit {
    flex: 1;
    padding: 9px 12px;
    border: none;
    border-radius: 5px;
    font-size: clamp(14px, 1.4cqi, 18px);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    background-color: #f44336;
    color: white;
}

.btn-exit:hover {
    background-color: #d32f2f;
}

/* ============================================================================
   Utility classes
   ============================================================================ */

.hidden {
    display: none !important;
}

/* ============================================================================
   Content Panel Styling
   ============================================================================ */

.content-panel {
    background-color: #fff;
    padding: 40px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.content-panel h2 {
    color: #333;
    margin-bottom: 30px;
    font-size: 32px;
    border-bottom: 3px solid #4CAF50;
    padding-bottom: 10px;
}

.content-panel h3 {
    color: #555;
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 24px;
}

.content-panel h4 {
    color: #666;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 18px;
}

/* ============================================================================
   Form Styling
   ============================================================================ */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: bold;
    font-size: 16px;
}

.form-group input {
    width: 100%;
    max-width: 400px;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.form-group input:focus {
    outline: none;
    border-color: #4CAF50;
}

/* ============================================================================
   Button Styling
   ============================================================================ */

.btn-primary,
.btn-secondary {
    padding: 12px 30px;
    margin: 10px 10px 10px 0;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-primary {
    background-color: #4CAF50;
    color: white;
}

.btn-primary:hover {
    background-color: #45a049;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: #757575;
    color: white;
}

.btn-secondary:hover {
    background-color: #616161;
    transform: translateY(-2px);
}

.btn-primary:active,
.btn-secondary:active {
    transform: translateY(0);
}

/* ============================================================================
   Help Content
   ============================================================================ */

.help-content {
    line-height: 1.6;
    color: #333;
}

.help-content ul {
    margin-left: 20px;
    margin-bottom: 20px;
}

.help-content li {
    margin-bottom: 10px;
}

.help-content p {
    margin-bottom: 15px;
}

/* ============================================================================
   Admin Panel Styles
   ============================================================================ */

.admin-panel {
    background-color: #fff;
    padding: 30px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.admin-panel-title {
    color: #333;
    margin-bottom: 30px;
    font-size: 28px;
    border-bottom: 3px solid #4CAF50;
    padding-bottom: 10px;
}

/* Admin Block */
.admin-block {
    margin-bottom: 20px;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

.admin-block-header {
    background-color: #4CAF50;
    color: white;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
    user-select: none;
}

.admin-block-header:hover {
    background-color: #45a049;
}

.admin-block-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.admin-block-toggle {
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.3s;
}

.admin-block-content {
    padding: 20px;
    background-color: #f9f9f9;
    max-height: 2000px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.admin-block-content.collapsed {
    max-height: 0;
    padding: 0 20px;
    overflow: hidden;
}

/* Admin Field */
.admin-field {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.admin-field label {
    min-width: 200px;
    font-weight: bold;
    color: #333;
    font-size: 14px;
}

.admin-field input,
.admin-field select {
    flex: 1;
    max-width: 400px;
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.admin-field input:focus,
.admin-field select:focus {
    outline: none;
    border-color: #4CAF50;
}

/* Admin Buttons */
.admin-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-admin {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-admin.btn-primary {
    background-color: #4CAF50;
    color: white;
}

.btn-admin.btn-primary:hover {
    background-color: #45a049;
    transform: translateY(-2px);
}

.btn-admin.btn-secondary {
    background-color: #757575;
    color: white;
}

.btn-admin.btn-secondary:hover {
    background-color: #616161;
    transform: translateY(-2px);
}

.btn-admin.btn-danger {
    background-color: #f44336;
    color: white;
}

.btn-admin.btn-danger:hover {
    background-color: #da190b;
    transform: translateY(-2px);
}

.btn-admin:active {
    transform: translateY(0);
}

.btn-admin.btn-success {
    background-color: #2196F3;
    color: white;
}

.btn-admin.btn-success:hover:not(:disabled) {
    background-color: #0b7dda;
    transform: translateY(-2px);
}

.btn-admin:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Game Settings Structure */
.structure-intro {
    background-color: #f5f5f5;
    padding: 15px;
    border-left: 4px solid #4CAF50;
    margin-bottom: 20px;
    line-height: 1.6;
}

.company-description {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.company-description:focus {
    outline: none;
    border-color: #4CAF50;
}

.btn-type-toggle {
    padding: 8px 16px;
    border: 2px solid #4CAF50;
    border-radius: 5px;
    background-color: white;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.btn-type-toggle:hover {
    background-color: #4CAF50;
    color: white;
}

.btn-delete {
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    background-color: #f44336;
    color: white;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}

.btn-delete:hover {
    background-color: #da190b;
    transform: scale(1.1);
}

/* User Management Styles */
.company-users-block {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.company-users-block h4 {
    margin: 0 0 15px 0;
    color: #4CAF50;
    font-size: 16px;
    border-bottom: 2px solid #4CAF50;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.company-type-badge {
    font-size: 13px;
    color: #666;
    font-weight: normal;
    background-color: #f0f0f0;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid #ddd;
}

/* Warning messages */
.warning-message {
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 5px;
    font-size: 13px;
    font-weight: bold;
}

.warning-robot {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

.warning-no-users {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* User input fields */
.user-password,
.user-username,
.user-email {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

.user-password:focus,
.user-username:focus,
.user-email:focus {
    outline: none;
    border-color: #4CAF50;
}

.user-ceo {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

/* Runtime Settings Styles */
.runtime-section {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.runtime-section-title {
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    font-size: 16px;
    color: #4CAF50;
    border-bottom: 2px solid #4CAF50;
}

/* Disruptive Events Subsection */
.disruptive-subsection {
    margin-top: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border-left: 3px solid #ff9800;
    border-radius: 0 5px 5px 0;
}

.subsection-details {
    margin-top: 10px;
    padding-left: 20px;
    border-left: 2px dashed #ddd;
}

.admin-field.sub-field {
    margin-bottom: 10px;
}

.admin-field.sub-field label {
    min-width: 250px;
    font-size: 13px;
    color: #666;
}

/* Field Unit (e.g., % symbol directly after input/select) */
.field-unit {
    font-size: 14px;
    color: #333;
    margin-left: 2px;
}

/* Field Hints */
.field-hint {
    font-size: 13px;
    color: #888;
    margin-left: 10px;
    font-style: italic;
}

/* Input number styling for runtime settings */
#game-settings-runtime .admin-field input[type="number"] {
    width: 100px;
    text-align: right;
    flex: none;
}

/* Dropdown styling for runtime */
#game-settings-runtime .admin-field select {
    width: 80px;
    flex: none;
}

/* Smaller dropdowns for market trend and seasonal pattern */
#runtime-market-trend,
#runtime-seasonal-pattern {
    width: 62px !important;
    padding: 8px 4px !important;
}

/* % symbol closer to market-trend and seasonal-pattern dropdowns */
#runtime-market-trend + .field-unit,
#runtime-seasonal-pattern + .field-unit {
    margin-left: -10px;
}

/* Dropdowns for end-year and elasticity fields */
#runtime-end-year,
#runtime-elasticity-price,
#runtime-elasticity-deliverytime,
#runtime-elasticity-deliveryreliability {
    width: 50px;
}

/* ============================================================================
   Forecast Report Styles
   ============================================================================ */

.forecast-report {
    padding: 10px;
}

.forecast-header {
    font-size: 14px;
    color: #fff;
    margin-bottom: 15px;
}

.forecast-chart-container {
    width: 100%;
    margin-bottom: 15px;
}

.forecast-chart {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.forecast-table-container {
    overflow-x: auto;
}

/* ============================================================================
   Orders Report Styles
   ============================================================================ */

.orders-report {
    padding: 10px;
}

.orders-header {
    font-size: 14px;
    color: #fff;
    margin-bottom: 15px;
}

.orders-header h2 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #8af;
}

.orders-header p {
    margin: 4px 0;
    font-size: 12px;
}

.orders-table-container {
    overflow-x: auto;
}

/* Order Detail Buttons */
.order-buttons-container {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #4a4a6a;
}

.order-detail-btn {
    padding: 8px 16px;
    background-color: #4a6a8a;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s;
}

.order-detail-btn:hover {
    background-color: #5a7a9a;
}

.order-detail-btn:active {
    background-color: #3a5a7a;
}

/* ============================================================================
   Order Promiser Report Styles
   ============================================================================ */

.orderpromiser-report {
    padding: 15px;
    color: #fff;
}

.orderpromiser-report .report-header {
    margin-bottom: 20px;
}

.orderpromiser-report .report-header h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #8af;
}

.orderpromiser-report .report-header p {
    margin: 4px 0;
    font-size: 13px;
}

.orderpromiser-report .report-section {
    margin-bottom: 20px;
}

.orderpromiser-report .report-section h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #aac;
    border-bottom: 1px solid #4a4a6a;
    padding-bottom: 5px;
}

/* ============================================================================
   Game Clock Display
   ============================================================================ */

/* Clock display container - positioned to contain all clock elements */
.game-clock-display {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
}

/* Year display at position (20, 50) in 1280x640 coordinates */
.game-clock-display .clock-year {
    position: absolute;
    left: 1.56%;    /* 20/1280 */
    top: 7.81%;     /* 50/640 */
    font-family: 'Arial', sans-serif;
    font-size: clamp(12px, 1.72cqi, 22px);
    color: #444444;
    font-weight: normal;
}

/* Week number display at position (94, 50) in 1280x640 coordinates */
.game-clock-display .clock-week {
    position: absolute;
    left: 7.34%;    /* 94/1280 */
    top: 7.81%;     /* 50/640 */
    font-family: 'Arial', sans-serif;
    font-size: clamp(13px, 1.875cqi, 24px);
    color: #444444;
    font-weight: normal;
}

/* Day of week display at position (148, 50) in 1280x640 coordinates */
.game-clock-display .clock-day {
    position: absolute;
    left: 11.56%;   /* 148/1280 */
    top: 7.81%;     /* 50/640 */
    font-family: 'Arial', sans-serif;
    font-size: clamp(12px, 1.72cqi, 22px);
    color: #444444;
    font-weight: normal;
}

/* Days simulated display at position (220, 50) in 1280x640 coordinates */
.game-clock-display .clock-days-sim {
    position: absolute;
    left: 17.19%;   /* 220/1280 */
    top: 7.81%;     /* 50/640 */
    font-family: 'Arial', sans-serif;
    font-size: clamp(13px, 1.875cqi, 24px);
    color: #444444;
    font-weight: normal;
}

/* ============================================================================
   Display Options Checkboxes (Process and Organization screens)
   Positioned at (911, 62) and (911, 72) in 1280x640 coordinates
   ============================================================================ */

/* Container for display option checkboxes */
.display-options-container {
    position: absolute;
    left: 71.25%;   /* 912/1280 */
    top: 7.97%;     /* 51/640 (was 66, -15px) */
    z-index: 60;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Title "Display:" above the checkboxes */
.display-options-title {
    font-size: clamp(8px, 0.86cqi, 11px);
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
}

/* Label wrapper for checkbox + text */
.display-option-label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* Small checkbox styling */
.display-option-checkbox {
    width: clamp(9px, 0.94cqi, 12px);
    height: clamp(9px, 0.94cqi, 12px);
    margin: 0;
    cursor: pointer;
    accent-color: #333;
}

/* Text label next to checkbox */
.display-option-text {
    font-size: clamp(8px, 0.86cqi, 11px);
    color: #333;
}

/* ============================================================================
   Company Charts
   ============================================================================ */

.company-charts {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
}

.chart-container {
    background: #1e1e3a;
    border-radius: 6px;
    padding: 12px;
    border: 1px solid #3a3a5a;
}

.chart-container h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #aac;
    text-align: center;
}

.chart-container canvas {
    width: 100% !important;
    height: 200px !important;
}

/* ============================================================================
   Display Mode Selector (Process Screen)
   ============================================================================ */

.display-mode-selector {
    position: absolute;
    /* Position at (1091, 484) in game-container (1280x720), main-content is 1280x640 starting at y=80 */
    /* Relative: x=1091/1280=85.23%, y=404/640=63.125% */
    left: 85.23%;
    top: 63.125%;
    background: transparent;
    padding: 0.6% 0.9%;
    font-size: clamp(11px, 1vw, 14px);
    color: #e0e0e0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.3%;
}

.display-mode-label {
    font-weight: bold;
    color: #aac;
    margin-bottom: 2px;
}

.display-mode-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 2px 0;
}

.display-mode-option:hover {
    color: #fff;
}

.display-mode-option input[type="radio"],
.display-mode-option input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: #4fc3f7;
}

.display-mode-option span {
    user-select: none;
}

/* ============================================================================
   Statistics Section Styles (Salesmarket popup)
   ============================================================================ */

.statistics-section {
    margin-top: 10px;
    padding: 12px;
    background: #2a2a4e;
    border-radius: 6px;
    border: 1px solid #3a3a5a;
}

.statistics-section h4 {
    color: #aac;
    font-size: 14px;
    margin: 0 0 6px 0;
}

.statistics-buttons-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.statistics-label {
    color: #ddd;
    font-size: 13px;
    min-width: 100px;
}

.stats-btn {
    padding: 6px 14px;
    background-color: #4a6a8a;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s;
}

.stats-btn:hover {
    background-color: #5a7a9a;
}

.stats-btn:active {
    background-color: #3a5a7a;
}

/* Statistics Report Styles */
.statistics-report {
    padding: 10px;
    color: #e0e0e0;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13px;
}

.stats-table th {
    background: #2a2a4e;
    color: #fff;
    padding: 8px 10px;
    text-align: left;
    border: 1px solid #3a3a5a;
    font-weight: bold;
}

.stats-table td {
    padding: 6px 10px;
    border: 1px solid #3a3a5a;
}

.stats-table td.num {
    text-align: right;
}

.stats-table tbody tr:hover {
    background: #2a2a4e;
}