/**
 * Rosea Material Tracker - Frontend Admin Stylesheet
 *
 * VERSION 2.0 - Modernized look with card layout and branding
 */

/* --- Main Wrapper (Card Layout) --- */
.rosea-fe-admin-wrapper {
    max-width: 1200px;
    margin: 30px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    background: #ffffff; /* Changed to white */
    border: 1px solid #e0e0e0; /* Lighter border */
    padding: 0; /* Padding will be on inner elements */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Subtle shadow */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* To contain rounded corners */
}

/* --- Notices (Alerts) --- */
.rosea-notice {
    padding: 12px 20px;
    margin: 20px; /* Add margin to fit inside content padding */
    border-left-width: 4px;
    border-left-style: solid;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    border-radius: 4px;
}
.rosea-notice.success {
    background: #f0fff4;
    border-left-color: #4CAF50;
}
.rosea-notice.error {
    background: #fff0f0;
    border-left-color: #DC3232;
}
.rosea-notice.warning {
    background: #fffaf0;
    border-left-color: #ffb900;
}
.rosea-notice p {
    margin: 0;
    padding: 0;
    font-weight: 500;
}

/* --- Navigation Tabs --- */
.rosea-fe-nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #e0e0e0; /* Thicker border */
    margin-bottom: 0;
    padding: 0 15px; /* Padding for the nav bar itself */
    background: #fdfdfd;
}
.rosea-fe-nav a {
    padding: 14px 18px;
    text-decoration: none;
    color: #555; /* Darker, neutral color */
    border: none;
    border-bottom: 3px solid transparent; /* Placeholder for active state */
    margin-bottom: -2px; /* Pulls link down to overlap border */
    font-weight: 500;
    font-size: 15px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.rosea-fe-nav a.active,
.rosea-fe-nav a:hover {
    color: #6f42c1; /* Brand Purple */
    border-bottom-color: #6f42c1; /* Brand Purple */
    background: none;
    font-weight: 600;
}

/* --- Project Selector --- */
.rosea-project-selector {
    padding: 20px 25px;
    background: #f8f9fa; /* Light background */
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}
.rosea-project-selector label {
    margin-right: 0;
    font-weight: 600;
}
.rosea-project-selector select {
    min-width: 300px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ced4da;
}

/* --- Main Content Area --- */
.rosea-fe-content {
    padding: 25px;
}
.rosea-fe-content h2 {
    font-size: 24px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    color: #333;
}
.rosea-fe-content hr {
    margin: 25px 0;
    border: 0;
    border-top: 1px solid #eee;
}

/* --- Forms --- */
.rosea-fe-form p {
    margin-bottom: 18px;
}
.rosea-fe-form label {
    display: block;
    font-weight: 600; /* Bolder labels */
    margin-bottom: 6px;
    color: #444;
}
.rosea-fe-form input[type="text"],
.rosea-fe-form input[type="number"],
.rosea-fe-form input[type="date"],
.rosea-fe-form select,
.rosea-fe-form textarea {
    width: 100%;
    max-width: 450px;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #ced4da;
    background: #fff;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.rosea-fe-form input[type="text"]:focus,
.rosea-fe-form input[type="number"]:focus,
.rosea-fe-form input[type="date"]:focus,
.rosea-fe-form select:focus,
.rosea-fe-form textarea:focus {
    border-color: #6f42c1;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, .25);
    outline: 0;
}
.rosea-fe-form .description {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 5px;
}

/* --- Tables --- */
.rosea-data-table,
.rosea-report-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px; /* Rounded corners for table */
    overflow: hidden; /* Clips content to rounded corners */
}
.rosea-data-table th,
.rosea-data-table td,
.rosea-report-table th, 
.rosea-report-table td {
    padding: 12px 15px; /* More padding */
    border: none;
    border-bottom: 1px solid #e0e0e0; /* Row lines only */
    text-align: left;
    vertical-align: top;
}
.rosea-data-table th,
.rosea-report-table th {
    background: #f8f9fa; /* Light header */
    font-weight: 600;
    color: #333;
}
.rosea-data-table tbody tr:nth-child(even),
.rosea-report-table tbody tr:nth-child(even) {
    background: #fdfdfd;
}
.rosea-data-table tbody tr:hover,
.rosea-report-table tbody tr:hover {
    background-color: #f5f0ff; /* Light purple hover */
}
.rosea-data-table .check-column {
    width: 40px;
    text-align: center;
}
a.rosea-delete-link {
    color: #a00;
    font-weight: 500;
}
a.rosea-delete-link:hover {
    color: #d00;
}

/* --- Buttons --- */
.rosea-button,
.rosea-project-selector button {
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600; /* Bolder buttons */
    line-height: 34px; /* Match height */
    height: 36px;
    margin: 0;
    padding: 0 16px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 4px;
    white-space: nowrap;
    box-sizing: border-box;
    background: #f7f7f7;
    border-color: #ccc;
    color: #555;
    transition: all 0.15s ease-in-out;
}
.rosea-button:hover,
.rosea-project-selector button:hover {
    background: #fafafa;
    border-color: #999;
    color: #23282d;
}
.rosea-button.primary {
    background: #6f42c1; /* Brand Purple */
    border-color: #6f42c1;
    color: #fff;
}
.rosea-button.primary:hover {
    background: #5a359e; /* Darker purple */
    border-color: #5a359e;
    color: #fff;
}
.rosea-button.secondary {
    background: #fff;
    border-color: #ccc;
    color: #0073aa;
}
.rosea-button.secondary:hover {
    background: #f8f8f8;
    color: #005a80;
}

/* --- Table Navigation (Pagination/Bulk) --- */
.rosea-table-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    padding: 5px;
}
.rosea-per-page-form {
    float: right;
    margin-bottom: 10px;
}
.rosea-tablenav-pages {
    display: inline-block;
}
.rosea-tablenav-pages .pagination-links {
    display: inline-block;
    margin-left: 10px;
}
.rosea-tablenav-pages .pagination-links a,
.rosea-tablenav-pages .pagination-links span {
    padding: 5px 10px;
    border: 1px solid #ccc;
    text-decoration: none;
    background: #fff;
    border-radius: 3px;
    margin: 0 2px;
}
.rosea-tablenav-pages .pagination-links span.current {
    background: #f0f0f0;
    font-weight: bold;
    border-color: #999;
}
.clear { clear: both; }