/* CHC Billing - DOS Style Theme */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    min-height: 100vh;
}

body {
    background: #FF69B4;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    color: #000;
}

/* ========== TOP NAV BAR ========== */
.topbar {
    background: #FF69B4;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #CC0099;
    width: 100%;
}

.topbar a {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.topbar a:hover {
    color: #000055;
    text-decoration: underline;
}

.topbar .year-badge {
    background: #000;
    color: #FFD700;
    font-weight: bold;
    padding: 3px 14px;
    font-size: 14px;
    margin-left: auto;
    white-space: nowrap;
}

/* ========== NAVIGATION ========== */
.nav-menu {
    background: #FF69B4;
    padding: 5px 12px;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    position: relative;
    flex-wrap: wrap;
    width: 100%;
}

.nav-btn {
    background: #C0C0C0;
    border: 2px outset #E0E0E0;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 18px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}

.nav-btn:hover, .nav-btn.active {
    background: #0000AA;
    color: #FFD700;
    border: 2px inset #0000AA;
}

.nav-btn.active-highlight {
    background: #0000AA;
    color: #FFD700;
    border: 2px inset #0000AA;
}

/* ========== DROPDOWN MENUS ========== */
.dropdown { position: relative; display: inline-block; }

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #C0C0C0;
    border: 2px outset #E0E0E0;
    min-width: 240px;
    z-index: 1000;
}

.dropdown-content a,
.dropdown-content .sub-menu-trigger {
    display: block;
    padding: 7px 16px;
    color: #000;
    text-decoration: none;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
    background: #C0C0C0;
}

.dropdown-content a:hover,
.dropdown-content .sub-menu-trigger:hover {
    background: #0000AA;
    color: #FFD700;
}

.dropdown:hover .dropdown-content { display: block; }

.sub-dropdown { position: relative; }

.sub-dropdown-content {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background: #C0C0C0;
    border: 2px outset #E0E0E0;
    min-width: 260px;
    z-index: 1001;
}

.sub-dropdown:hover .sub-dropdown-content { display: block; }

.sub-dropdown-content a {
    display: block;
    padding: 7px 16px;
    color: #000;
    text-decoration: none;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.sub-dropdown-content a:hover { background: #0000AA; color: #FFD700; }

.separator { border-top: 1px solid #888; margin: 3px 0; }

/* ========== CONTENT AREA ========== */
.content {
    padding: 12px 16px;
    width: 100%;
}

/* ========== WINDOW / PANEL ========== */
.window {
    background: #0000AA;
    color: #FFFFFF;
    border: 2px solid #6666FF;
    margin-bottom: 8px;
    width: 100%;
}

.window-title {
    background: #C0C0C0;
    color: #000;
    font-weight: bold;
    padding: 6px 14px;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.window-body { padding: 12px 16px; }

/* ========== DATA TABLES ========== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

.data-table th {
    background: #0000AA;
    color: #FFFFFF;
    border: 1px solid #4444CC;
    padding: 7px 12px;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
}

.data-table td {
    background: #0000AA;
    color: #FFFFFF;
    border: 1px solid #3333AA;
    padding: 6px 12px;
    white-space: nowrap;
}

.data-table tr:hover td { background: #0055AA; cursor: pointer; }
.data-table tr.selected td { background: #0000CC; color: #FFD700; }

.data-table tfoot td {
    background: #000066;
    color: #FFFFFF;
    font-weight: bold;
    border-top: 2px solid #6666FF;
    padding: 7px 12px;
}

/* ========== FORMS ========== */
.form-panel {
    background: #0000AA;
    border: 2px solid #6666FF;
    padding: 14px 18px;
    width: 100%;
}

.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 8px;
    flex-wrap: wrap;
}

.form-label {
    background: #000;
    color: #FFD700;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 12px;
    min-width: 180px;
    display: inline-block;
    white-space: nowrap;
}

.form-input {
    background: #1E90FF;
    color: #FFFFFF;
    border: none;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    padding: 5px 10px;
    outline: none;
    min-width: 200px;
}

.form-input:focus { background: #4169E1; }

.form-input-sm  { min-width: 90px; }
.form-input-md  { min-width: 150px; }
.form-input-lg  { min-width: 340px; }

select.form-input { cursor: pointer; }

/* ========== BUTTONS ========== */
.btn {
    background: #C0C0C0;
    border: 2px outset #E0E0E0;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 20px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}

.btn:hover { background: #A0A0A0; border: 2px inset #808080; }

.btn-blue { background: #0000AA; color: #FFD700; border: 2px outset #0000FF; }
.btn-blue:hover { background: #0000CC; border: 2px inset #000088; }

.btn-red { background: #AA0000; color: #FFD700; border: 2px outset #FF0000; }
.btn-red:hover { background: #CC0000; border: 2px inset #880000; }

.btn-sm { padding: 4px 12px; font-size: 13px; }

/* ========== TITLE BAR ========== */
.title-bar {
    background: #000;
    color: #FFD700;
    font-weight: bold;
    padding: 6px 14px;
    font-size: 14px;
    text-align: center;
    letter-spacing: 1px;
    width: 100%;
}

/* ========== FILTER BAR ========== */
.filter-bar {
    background: #0000AA;
    color: #FFD700;
    padding: 8px 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    flex-wrap: wrap;
    width: 100%;
}

.filter-bar label { color: #FFD700; font-weight: bold; white-space: nowrap; }

.filter-bar input,
.filter-bar select {
    background: #000;
    color: #FFD700;
    border: 1px solid #6666FF;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    padding: 4px 8px;
}

/* ========== HOME SCREEN ========== */
.home-logo {
    background: #FF8C00;
    border: 3px solid #000;
    text-align: center;
    padding: 30px 50px;
    display: inline-block;
    margin: 40px auto;
}

.home-logo h1 {
    font-size: 32px;
    font-weight: bold;
    color: #000;
    letter-spacing: 2px;
}

.home-logo p {
    font-size: 16px;
    color: #000;
    text-decoration: underline;
    margin-top: 10px;
}

.home-center { text-align: center; width: 100%; }

/* ========== ALERTS ========== */
.alert-box {
    background: #AA0000;
    color: #FFFFFF;
    padding: 9px 16px;
    margin: 6px 0;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
}

.success-box {
    background: #006600;
    color: #FFFFFF;
    padding: 9px 16px;
    margin: 6px 0;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
}

/* ========== MISC UTILITIES ========== */
.text-yellow { color: #FFD700; }
.text-white  { color: #FFFFFF; }
.text-green  { color: #00FF00; }
.text-red    { color: #FF4444; }
.bg-black    { background: #000; }

/* ========== SCROLLABLE TABLE WRAP ========== */
.table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 520px;
    width: 100%;
}

/* ========== BILL ITEMS TABLE ========== */
.bill-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: auto;
}

.bill-items-table th {
    background: #000088;
    color: #FFD700;
    padding: 6px 8px;
    border: 1px solid #4444CC;
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
}

.bill-items-table td {
    background: #0000AA;
    color: #fff;
    border: 1px solid #3333AA;
    padding: 3px 4px;
}

.bill-items-table td input,
.bill-items-table td select {
    background: #1E90FF;
    color: #fff;
    border: none;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 3px 5px;
    width: 100%;
    outline: none;
}

.bill-items-table tr.active-row td { background: #004400; }
.bill-items-table tr.active-row td input { background: #006600; }

/* ========== TOTALS PANEL ========== */
.totals-panel {
    background: #000066;
    color: #FFD700;
    padding: 10px 16px;
    text-align: right;
    font-size: 14px;
    border-top: 2px solid #6666FF;
    width: 100%;
}

.totals-panel table { margin-left: auto; }

.totals-panel td {
    padding: 4px 12px;
    color: #FFD700;
    font-size: 14px;
}

.totals-panel td:first-child { text-align: right; }
.totals-panel td:last-child  { text-align: right; min-width: 110px; }

/* ========== MODAL ========== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9000;
}
.modal-overlay.show { display: flex; align-items: center; justify-content: center; }

.modal-box {
    background: #0000AA;
    border: 2px solid #6666FF;
    min-width: 440px;
    max-width: 92vw;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
}

.modal-title {
    background: #C0C0C0;
    color: #000;
    font-weight: bold;
    font-size: 14px;
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
}

.modal-body { overflow: auto; flex: 1; padding: 12px; }

/* ========== PRINT STYLES ========== */
@media print {
    body { background: #fff; color: #000; font-size: 10pt; }
    .nav-menu, .topbar, .no-print { display: none !important; }
    .data-table th { background: #ddd !important; color: #000 !important; }
    .data-table td { background: #fff !important; color: #000 !important; border: 1px solid #ccc !important; }
    .window { border: 1px solid #ccc; background: #fff; color: #000; width: 100%; }
    .title-bar { background: #fff; color: #000; border-bottom: 2px solid #000; }
    .content { padding: 0; }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
    body { font-size: 14px; }
    .nav-btn { font-size: 13px; padding: 4px 12px; }
    .dropdown-content a,
    .dropdown-content .sub-menu-trigger,
    .sub-dropdown-content a { font-size: 13px; padding: 6px 12px; }
    .form-label { min-width: 140px; font-size: 13px; }
    .form-input { font-size: 13px; }
    .data-table th, .data-table td { font-size: 13px; padding: 5px 8px; }
    .btn { font-size: 13px; padding: 5px 14px; }
}

@media (max-width: 600px) {
    body { font-size: 13px; }
    .nav-menu { gap: 4px; }
    .nav-btn { font-size: 12px; padding: 4px 10px; }
    .form-row { flex-direction: column; align-items: flex-start; }
    .form-label { min-width: unset; width: 100%; }
    .form-input { width: 100%; min-width: unset; }
    .filter-bar { gap: 6px; }
}