@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@700&display=swap');
/* 1. Import official GOV.UK Design System CSS */
@import url('https://unpkg.com/govuk-frontend/dist/govuk/govuk-frontend.min.css');

/* 2. Custom Application Styles */

h1.govuk-heading-xl {
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 700 !important; /* Bold */
    background-color: #572300;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 30px; /* Adds breathing room inside the colored box */
    border-radius: 8px; /* Softens the corners to match the rounded Fredoka font */
    margin-top: 15px;
    color:#fff;
    text-shadow: 2px 2px 0px #000000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}
.app-dashboard-header {
    display: flex;
    flex-wrap: wrap; /* Allows the buttons to drop below the heading if needed */
    justify-content: space-between;
    align-items: center;
}
body {
    background-color: #f3f2f1; 
}

/* Dashboard Header */
.app-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 1px solid #b1b4b6;
    padding-bottom: 15px;
}

/* Dashboard Cards */
.app-card-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.app-card {
    background: #ffffff;
    padding: 20px;
    border: 1px solid #b1b4b6;
    border-top: 5px solid #1d70b8; 
    flex: 1;
    min-width: 280px; /* Reduced slightly to fit older iPhones perfectly */
}

/* Traffic Light Card Borders & Text */
.app-card--success { border-top-color: #00703c; } 
.app-card--warning { border-top-color: #f47738; } 
.app-card--danger  { border-top-color: #d4351c; } 
.app-status-text--success { color: #00703c; font-weight: bold; }
.app-status-text--warning { color: #f47738; font-weight: bold; }
.app-status-text--danger  { color: #d4351c; font-weight: bold; }

/* Missing Records List */
.app-missing-list { list-style-type: none; padding: 0; margin: 0; }
.app-missing-list li {
    padding: 15px 0;
    border-bottom: 1px solid #b1b4b6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allows the dropdown to drop to the next line on mobile */
    gap: 10px;
}
.app-missing-list li:last-child { border-bottom: none; }

/* 3. MOBILE RESPONSIVENESS MEDIA QUERIES */

/* Responsive Table Wrapper - allows swiping left/right on tables */
.table-container {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch; /* Smooth swiping on iOS */
}

@media (max-width: 768px) {
    /* Stack the header text and buttons vertically on phones */
    .app-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .app-dashboard-header > div {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Make buttons full width for easy thumb tapping */
    .app-dashboard-header .govuk-button {
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        text-align: center;
    }

    /* Make action buttons at the bottom of the dashboard stack */
    .govuk-button-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .govuk-button-group .govuk-button {
        width: 100%;
        margin-bottom: 0 !important;
    }
}