/* ============================================
   JCJenson (IN SPACE!) Corporate Style System
   Version: 4.0.0 (Phase 2 - "Operation: Grid")
   BUDGET CUTS: Designer was replaced by an intern
   UPDATE: Intern promoted to "Senior Pixel Aligner"
   ============================================ */

/* === GLOBAL RESET === */
/* IT Department says this is "best practice" */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === THE CLASSIC DESKTOP === */
body {
    background-color: #008080;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* MEMO: Do NOT change the teal. CEO loves teal. */
}

body.dashboard-body {
    align-items: flex-start;
    padding: 10px;
}

/* === WINDOWS 95 WINDOW === */
/* Reverse-engineered from a screenshot. Legal says this is fine. */
.win95-window {
    background-color: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
    padding: 3px;
}

/* === TITLE BAR === */
/* The beautiful gradient that screams "enterprise software" */
.title-bar {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #ffffff;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 3px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    margin-bottom: 4px;
}

.title-bar-text {
    letter-spacing: 0.5px;
}

.title-bar-controls {
    display: flex;
    gap: 2px;
}

.title-bar-controls button {
    width: 16px;
    height: 14px;
    background-color: #c0c0c0;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    font-size: 8px;
    line-height: 10px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    font-family: "Marlett", Arial, sans-serif;
}

.title-bar-controls button:active {
    border-top: 1px solid #404040;
    border-left: 1px solid #404040;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

/* === WINDOW BODY === */
.window-body {
    padding: 12px;
    background-color: #c0c0c0;
}

/* === THE BEVELED BUTTON === */
/* 47 hours of CSS to make a button look like 1995. Worth it. */
.beveled-btn {
    background-color: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
    padding: 4px 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    cursor: pointer;
    min-width: 75px;
    text-align: center;
    color: #000000;
    text-decoration: none;
    display: inline-block;
}

.beveled-btn:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    box-shadow: inset -1px -1px 0 #dfdfdf, inset 1px 1px 0 #808080;
    padding: 5px 15px 3px 17px;
}

.beveled-btn:focus {
    outline: 1px dotted #000000;
    outline-offset: -4px;
}

/* Disabled buttons: greyed out, no click, no hope */
.beveled-btn:disabled,
.beveled-btn.disabled {
    color: #808080;
    text-shadow: 1px 1px 0 #ffffff;
    cursor: not-allowed;
}

.beveled-btn:disabled:active,
.beveled-btn.disabled:active {
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
    padding: 4px 16px;
}

/* === FORM INPUTS === */
/* MEMO FROM IT: "Stop asking for rounded corners. The budget doesn't cover curves." */
.win95-input {
    background-color: #ffffff;
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
    padding: 3px 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    outline: none;
    width: 100%;
}

textarea.win95-input {
    resize: vertical;
    min-height: 60px;
}

/* === FORM LAYOUT === */
.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
}

.form-actions {
    text-align: right;
    margin-top: 12px;
    padding-top: 8px;
}

/* === SECTION HEADINGS === */
/* Times New Roman: The font of AUTHORITY */
h1, h2, h3 {
    font-family: "Times New Roman", Times, serif;
    color: #000080;
}

h1 { font-size: 20px; margin-bottom: 8px; }
h2 { font-size: 16px; margin-bottom: 6px; }
h3 { font-size: 14px; margin-bottom: 4px; }

/* ============================================
   DASHBOARD LAYOUT (Phase 2: CSS Grid Edition)
   MEMO: "The intern discovered CSS Grid. Promoted."
   ============================================ */
.dashboard-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 15px;
    padding: 10px;
    margin-bottom: 40px;
    width: 100%;
    max-width: 960px;
}

/* === SIDEBAR === */
/* Permanent fixture. Like the coffee stain on Sector 4's ceiling. */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar .win95-window {
    width: 100%;
}

.sidebar-nav {
    list-style: none;
    padding: 0;
}

.sidebar-nav li {
    margin-bottom: 2px;
}

.sidebar-nav a {
    display: block;
    padding: 4px 8px;
    color: #000000;
    text-decoration: none;
    font-size: 12px;
}

.sidebar-nav a:hover {
    background-color: #000080;
    color: #ffffff;
}

/* === MAIN CONTENT === */
.main-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.main-content .win95-window {
    width: 100%;
}

/* === INSET PANEL === */
/* For lists, text areas, and other "sunken" UI elements */
.inset-panel {
    background-color: #ffffff;
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    box-shadow: inset 1px 1px 0 #808080;
    padding: 8px;
    margin: 6px 0;
    font-size: 12px;
}

.inset-panel ul {
    list-style: none;
    padding: 0;
}

.inset-panel li {
    padding: 3px 0;
    border-bottom: 1px solid #c0c0c0;
}

.inset-panel li:last-child {
    border-bottom: none;
}

/* === HORIZONTAL RULE === */
/* The classic separator. HR stands for "Human Resources" right? */
hr.win95-hr {
    border: none;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #ffffff;
    margin: 10px 0;
}

/* === STATUS BAR (TASKBAR) === */
/* Fixed at the bottom. Like your employment contract. */
.status-bar {
    background-color: #c0c0c0;
    padding: 2px 6px;
    font-size: 11px;
    display: flex;
    gap: 4px;
}

.status-bar-field {
    border-top: 1px solid #404040;
    border-left: 1px solid #404040;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    padding: 1px 6px;
    flex: 1;
}

.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 2px solid #ffffff;
    z-index: 999;
}

/* === ALERT BOX === */
.alert-box {
    background-color: #ffffcc;
    border: 1px solid #808080;
    padding: 6px 10px;
    margin: 8px 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-box.success {
    background-color: #ccffcc;
}

.alert-box .icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* === MARQUEE CONTAINER === */
/* Because it's 1999 and we have STANDARDS */
.marquee-container {
    background-color: #800000;
    border-top: 1px solid #404040;
    border-left: 1px solid #404040;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    padding: 4px 0;
}

.marquee-container marquee {
    color: #ffff00;
    font-weight: bold;
    font-size: 11px;
    white-space: nowrap;
}

/* === FRAMED IMAGE === */
/* The CRT monitor look. For displaying "Employee of the Month". */
/* MEMO: "Make it look like a TV so people think we have a budget." */
.framed-image {
    display: inline-block;
    border: 3px inset #ffffff;
    background: #000000;
    padding: 12px 24px;
    margin: 10px 0;
    font-size: 80px;
    line-height: 1;
    /* Simulated CRT glow. The intern is showing off again. */
    box-shadow: inset 0 0 20px rgba(0, 128, 255, 0.15);
}

/* === CEO MESSAGE === */
.ceo-message {
    font-style: italic;
    padding: 8px;
    line-height: 1.6;
}

/* === LOGIN SPECIFIC === */
.login-wrapper {
    text-align: center;
}

.login-wrapper .win95-window {
    min-width: 350px;
    max-width: 400px;
}

.login-icon {
    font-size: 48px;
    margin: 10px 0;
}

.login-footer {
    font-size: 10px;
    color: #808080;
    margin-top: 12px;
    text-align: center;
}

/* === GRIEVANCE ITEM === */
.grievance-item {
    padding: 4px 0;
}

.grievance-item .employee-name {
    font-weight: bold;
    color: #000080;
}

.grievance-item .timestamp {
    font-size: 10px;
    color: #808080;
    float: right;
}

.grievance-item .message {
    margin-top: 2px;
    font-size: 12px;
}

.grievance-item .grievance-status {
    font-size: 9px;
    color: #808080;
    margin-top: 2px;
}

/* ============================================
   COMPANY STORE (Phase 2)
   MEMO: "E-commerce? We can barely do email."
   ============================================ */
.store-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 8px 0;
}

.store-item {
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    padding: 10px;
    text-align: center;
    background-color: #d4d0c8;
}

.store-item .item-icon {
    font-size: 40px;
    margin-bottom: 6px;
}

.store-item .item-name {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    color: #000080;
    margin-bottom: 4px;
}

.store-item .item-price {
    font-size: 16px;
    font-weight: bold;
    color: #800000;
    margin-bottom: 8px;
}

.store-item .item-desc {
    font-size: 10px;
    color: #404040;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* === MOTIVATION QUOTE WIDGET === */
/* CORPORATE MANDATE #447: "Morale is mandatory." */
.quote-text {
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;
    padding: 8px;
    text-align: center;
    color: #000080;
}

.quote-attribution {
    text-align: center;
    font-size: 10px;
    color: #808080;
    margin-top: 4px;
}

/* === TRANSACTION PAGE === */
.transaction-message {
    text-align: center;
    padding: 20px 12px;
    line-height: 1.8;
}

.transaction-message h2 {
    margin-bottom: 12px;
}

.transaction-message .actions {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* === EASTER EGG 404 === */
.error-404 {
    text-align: center;
    padding: 40px 20px;
}

.error-404 h1 {
    font-size: 48px;
    color: #000080;
}