/* ==========================================================================
   Master Style Sheet - Online Quotation System
   ========================================================================== */

/* --- 1. Core Reset & Typography --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 16px; /* Text must be bigger than 12 or 14 pixels */
    line-height: 1.5;
    background-color: #ffffff; /* White background throughout the whole site */
    color: #333333;
    padding: 20px;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 15px;
    font-weight: bold;
    color: #222222;
}

/* --- 2. Layout Structure --- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* --- 3. UI Forms & Form Controls --- */
.form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 15px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 16px;
    padding: 8px 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #ffffff;
    width: 100%;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #5c7a8c;
}

/* --- 4. Buttons (Azure Grey with White Text, 10px Rounded, Bold) --- */
.btn {
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 16px;
    font-weight: bold; /* Button fonts must be bold */
    color: #ffffff; /* White text */
    background-color: #5c7a8c; /* Azure Grey background */
    border: none;
    border-radius: 10px; /* Rounded corners of 10 pixels */
    padding: 10px 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease;
}

/* Button Hover Actions */
.btn:hover {
    background-color: #465d6b; /* Darkened Azure Grey for distinct hover state */
}

.btn:active {
    transform: scale(0.98); /* Subtle click-press animation feedback */
}

/* --- 5. Navigation & Horizontal Sub-Product Tabs --- */
.tab-container {
    margin: 20px 0;
}

.tabs-horizontal {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* Enables swipe scroll on small mobile screens */
    border-bottom: 2px solid #5c7a8c;
    margin-bottom: 15px;
    -webkit-overflow-scrolling: touch;
}

.tab-item {
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    cursor: pointer;
    background: #f4f4f4;
    border: 1px solid #cccccc;
    border-bottom: none;
    margin-right: 4px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    white-space: nowrap;
    color: #333333;
}

.tab-item:hover {
    background-color: #e2e2e2;
}

.tab-item.active {
    background-color: #5c7a8c;
    color: #ffffff;
    border-color: #5c7a8c;
}

.tab-frame {
    border: 1px solid #cccccc;
    padding: 20px;
    background-color: #ffffff;
    min-height: 200px;
}

/* --- 6. Tables & Lists --- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

th {
    background-color: #f4f4f4;
    font-weight: bold;
}

/* --- 7. Print Settings & Quote Preview Styling --- */
@media print {
    body, .container {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    .no-print, .btn, .tabs-horizontal {
        display: none !important; /* Hide UI interfaces and buttons on physical output */
    }
    
    .tab-frame {
        border: none;
        padding: 0;
    }
}

/* --- 8. Mobile Responsiveness Breakpoints --- */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .grid-2, .grid-3 {
        grid-template-columns: 1fr; /* Drop elements down to a single columnar block on phone screens */
        gap: 10px;
    }
    
    .tabs-horizontal {
        padding-bottom: 5px; /* Spacing below the overflow slider bar */
    }
    
    .btn {
        width: 100%; /* Form buttons stretch out to clear thumb touch zones on phone layouts */
    }
}