/* =========================================================
   Travel & Expense Report
   Main Application Styles
   ========================================================= */


/* ---------------------------------------------------------
   Base / Global
   --------------------------------------------------------- */

:root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;

    color: #172033;
    background: #f4f7fb;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

a {
    color: #1769aa;
}


/* ---------------------------------------------------------
   Header / Navigation
   --------------------------------------------------------- */

header {
    background: #173b68;
    color: #ffffff;

    padding:
        1rem
        max(1rem, calc((100% - 1100px) / 2));

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 1rem;
}

.brand {
    font-weight: 800;
}

.brand,
header a {
    color: #ffffff;
    text-decoration: none;
}

header a:hover {
    text-decoration: underline;
}

nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 1rem;
}


/* ---------------------------------------------------------
   Main Page Layout
   --------------------------------------------------------- */

main {
    max-width: 1100px;

    min-height: 75vh;

    margin: 2rem auto;
    padding: 0 1rem;
}

h1 {
    margin-top: 0;
}

h2 {
    margin-top: 1.5rem;
}


/* ---------------------------------------------------------
   Cards / Containers
   --------------------------------------------------------- */

.card {
    background: #ffffff;

    border: 1px solid #dce4ef;
    border-radius: 12px;

    padding: 1.25rem;
    margin: 1rem 0;

    box-shadow: 0 3px 12px #19324a0d;
}

.narrow {
    max-width: 440px;
}


/* ---------------------------------------------------------
   Grid Layout
   --------------------------------------------------------- */

.grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 1rem;
}


/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */

label {
    display: block;

    font-weight: 650;

    margin: 0.8rem 0;
}

input,
select,
textarea {
    width: 100%;

    padding: 0.7rem;
    margin-top: 0.35rem;

    border: 1px solid #aebbc9;
    border-radius: 7px;

    font: inherit;

    background: #ffffff;
    color: #172033;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #1769aa;
    outline-offset: 1px;
}

textarea {
    min-height: 90px;
    resize: vertical;
}


/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

button,
.button {
    display: inline-block;

    border: 0;
    border-radius: 7px;

    background: #1769aa;
    color: #ffffff;

    padding: 0.7rem 1rem;

    font-weight: 700;
    font: inherit;

    text-decoration: none;

    cursor: pointer;
}

button:hover,
.button:hover {
    background: #12598f;
}

button:focus,
.button:focus {
    outline: 2px solid #173b68;
    outline-offset: 2px;
}


/* Destructive / return actions */

.danger {
    background: #a72828;
}

.danger:hover {
    background: #861f1f;
}


/* ---------------------------------------------------------
   Toolbars / Button Groups
   --------------------------------------------------------- */

.toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.7rem;
}

.inline {
    display: inline;
}


/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;

    border-collapse: collapse;
}

th,
td {
    text-align: left;

    padding: 0.75rem;

    border-bottom: 1px solid #e3e8ef;

    white-space: nowrap;
}

th {
    font-weight: 700;
}

tbody tr:hover {
    background: #f8fafc;
}

.num {
    text-align: right;
}


/* ---------------------------------------------------------
   Report Status Badges
   --------------------------------------------------------- */

.status {
    display: inline-block;

    padding: 0.2rem 0.55rem;

    border-radius: 999px;

    background: #dde5ee;
}


/* Draft */

.status.draft {
    background: #dde5ee;
    color: #334155;
}


/* Submitted */

.status.submitted {
    background: #fff0c7;
    color: #725400;
}


/* Approved */

.status.approved {
    background: #d5f4df;
    color: #146531;
}


/* Returned for correction */

.status.returned {
    background: #f9d9d9;
    color: #842020;
}


/*
   Legacy rejected status.

   This can remain temporarily in case an old report
   still uses the former "rejected" status.
*/

.status.rejected {
    background: #f9d9d9;
    color: #842020;
}


/* ---------------------------------------------------------
   Flash / Alert Messages
   --------------------------------------------------------- */

.flash {
    padding: 0.8rem 1rem;

    margin: 1rem 0;

    border-radius: 8px;
}


/* Error / warning */

.flash.error {
    background: #f9d9d9;
    color: #842020;
}


/* Success */

.flash.success {
    background: #d5f4df;
    color: #146531;
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

footer {
    text-align: center;

    color: #667;

    padding: 2rem;
}


/* ---------------------------------------------------------
   Mobile / Small Screens
   --------------------------------------------------------- */

@media (max-width: 650px) {

    header {
        flex-direction: column;
        align-items: flex-start;
    }

    nav {
        width: 100%;
    }

    nav span {
        width: 100%;
    }

    main {
        margin-top: 1rem;
    }

    .toolbar {
        align-items: stretch;
    }
}