/* --- COMPLETE AND ROBUST STYLESHEET --- */

/* 1. Foundational Rules & Modern Reset */
* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden; /* This is the ultimate failsafe to prevent horizontal scrollbars on the page */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 2. Main Layout Containers */
.container {
    width: 90%;
    /* max-width: 800px; */ /* Old value */
    max-width: 1240px;   /* New, wider value 1140 1240*/
    margin: 2rem auto;
    background: #fff;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    flex-grow: 1;
}

.form-wrapper {
    max-width: 450px;
    margin: 0 auto;
}

.control-panel-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fafafa;
}

/* --- ADD THESE NEW RULES --- */

/* 1. Foundational Rules & Modern Reset */
* {
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    /* Set the new font from Google Fonts */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.6;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* IMPORTANT: Add padding to the top of the body to prevent content from being hidden by the fixed navbar */
    padding-top: 80px; 
}

/* 3. New Header Styles */
/* --- UPDATE THESE LOGO/BRAND STYLES --- */

.navbar-brand {
    display: flex;
    align-items: center;
    font-weight: 700;
    /* font-size: 1.5rem; */ /* Old value */
    font-size: 2.5rem;   /* New value to match main site */
}

.navbar-brand img {
    height: 48px;
    width: auto;
    
    /* This is the key: it forces the browser to respect the height/width */
    /* and stops the buggy flexbox calculations. */
    flex: none;

    margin-right: 12px;
}

/* Adjust nav link styling for a cleaner look */
.navbar .nav-item .nav-link {
    font-weight: 600;
    color: #555;
    transition: color 0.3s ease;
}

.navbar .nav-item .nav-link:hover {
    color: #0d6efd; /* Bootstrap primary blue on hover */
}

.main-footer {
    text-align: center;
    padding: 1.5rem;
    margin-top: auto;
    background: #343a40;
    color: #fff;
}

/* 4. Forms & Buttons (REVISED LOGIC) */
.form-group {
    margin-bottom: 1.5rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #555;
}
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="search"],
.form-group select {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

.btn {
    display: inline-block;
    background: #007bff;
    color: #fff;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
    text-align: center;
    transition: background-color 0.3s;
    /* Removed 'width: 100%' - buttons are now only as wide as their content by default */
    white-space: normal; /* Allows button text to wrap */
    word-break: break-word;
}
.btn:hover { background: #0056b3; }

/* NEW modifier class for buttons that SHOULD be full-width */
.btn-block {
    display: block;
    width: 100%;
}

.btn-secondary { background-color: #6c757d; }
.btn-secondary:hover { background-color: #5a6268; }
.btn-delete { background: #dc3545; color: white; }
.btn-delete:hover { background: #c82333; }


/* 5. Tables (REVISED LOGIC) */
/* This wrapper will create a horizontal scrollbar for the table if needed */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
}
.data-table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
    /* table-layout: fixed is crucial for preventing content from breaking the layout */
    table-layout: fixed;
}
.data-table th, .data-table td {
    word-wrap: break-word;
    /* The word-break rule is now handled by the scrollable box */
}
.data-table th { background-color: #f2f2f2; }


/* 6. Alerts & Misc */
.alert { padding: 1rem; margin-bottom: 1rem; border-radius: 4px; border: 1px solid transparent; }
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }


/* --- NEW FIX: SCROLLABLE BOX FOR LONG IDs --- */
.scrollable-id {
    max-width: 200px;  /* Adjust this width if you want the box wider or narrower */
    overflow-x: auto;  /* Creates the horizontal scrollbar if content is too long */
    white-space: nowrap; /* Prevents the long ID from wrapping to a new line */
    background-color: #f1f1f1;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

/* --- NEW FIX: FLEXIBLE WRAPPER FOR BUTTONS --- */
.button-wrapper {
    display: flex;
    flex-wrap: wrap; /* This is the key: allows buttons to drop to the next line */
    gap: 10px;       /* Adds a nice space between buttons */
    margin-top: 1rem;
}


/* --- NEW: Scrollable Box for Long IDs --- */
.scrollable-id-box {
    max-width: 250px;  /* The max width of the box before scrolling starts */
    overflow-x: auto;  /* Creates the horizontal scrollbar if the ID is too long */
    white-space: nowrap; /* Keeps the ID on a single line, forcing it to scroll */
    background-color: #f1f1f1;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}