/* =========================================
   RESET & BASE (Technical Document Style)
   ========================================= */
body {
    font-family: 'Arial', sans-serif; /* Standard technical font */
    background-color: #e9e9e9; /* Gray background outside the paper */
    margin: 0;
    padding: 20px;
    color: #000; /* Absolute black text */
}

/* Container simulates an A4/Letter paper sheet */
.container {
    background: white;
    max-width: 1200px;       /* Limit width on large screens */
    margin: 0 auto;          /* Center horizontally */
    padding: 25px;
    border: 1px solid #000;  /* Thin black border to outline the sheet */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2); /* Subtle shadow for depth */
}

/* =========================================
   HEADER & SEARCH (Monochrome style)
   ========================================= */
header h1 {
    text-transform: uppercase;
    border-bottom: 3px solid #000; /* Thick black underline */
    padding-bottom: 10px;
    margin-top: 0;
    font-size: 1.5rem;
}

.search-container input {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 2px solid #000; /* Solid black border */
    border-radius: 0;       /* Square corners for a serious look */
    font-size: 16px;        /* Prevents zoom on iPhone */
    box-sizing: border-box;
    background-color: #fff;
    color: #000;
}

.search-container input::placeholder {
    color: #555;
    font-style: italic;
}

/* =========================================
   TABLE STYLE (Excel-like, core of RDO)
   ========================================= */
/* Wrapper allows horizontal scroll on mobile */
.table-wrapper {
    width: 100%;
    overflow-x: auto;  /* Enables side scrolling */
    border: 2px solid #000; /* Thick outer border */
}

table {
    width: 100%;
    border-collapse: collapse; /* Compact like Excel */
    min-width: 800px; /* Prevents data from being squeezed */
}

/* Table Header */
thead th {
    background-color: #000; /* Black background */
    color: #fff;            /* White text */
    text-transform: uppercase;
    text-align: left;
    padding: 10px;
    border: 1px solid #fff; /* Subtle white dividers */
    font-size: 0.9rem;
    white-space: nowrap;    /* Prevents line breaks */
}

/* Table Body */
tbody td {
    padding: 8px 10px;
    border: 1px solid #000; /* Black grid lines */
    font-size: 0.95rem;
    vertical-align: middle;
}

/* Zebra rows in gray tones (better readability without colors) */
tbody tr:nth-child(even) {
    background-color: #f2f2f2; 
}

/* Hover effect to highlight row */
tbody tr:hover {
    background-color: #ddd; 
    cursor: default;
}

/* Status & Alignment */
.status-ok {
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

.text-center { text-align: center; }

/* =========================================
   RESPONSIVENESS (Media Queries)
   Adapts layout without losing identity
   ========================================= */

/* Tablets & smaller laptops */
@media screen and (max-width: 1024px) {
    .container {
        width: 95%;
        padding: 15px;
    }
}

/* Mobile (Compact mode) */
@media screen and (max-width: 600px) {
    body {
        padding: 0; /* Remove body margin */
        background-color: #fff;
    }

    .container {
        width: 100%;
        border: none; /* Remove sheet border */
        box-shadow: none;
        padding: 10px;
    }

    header h1 {
        font-size: 1.2rem; /* Smaller title */
        text-align: center;
    }

    /* Adjust table cells for touch interaction */
    tbody td {
        padding: 12px 8px; /* More height for finger tap */
        font-size: 0.85rem;
    }
    
    /* First column (Name) highlighted */
    td:first-child {
        font-weight: bold;
        background-color: #e0e0e0; /* Gray highlight for names */
    }
}