:root {
    --accent-color: #003b68;
    --primary-color: #00a1b0;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Lato', sans-serif;
}
/* ============================
   Custom Button Styling
   ============================ */
.custom-btn {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.55rem 1.2rem;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

    .custom-btn:hover {
        background-color: rgba(var(--primary-color-rgb), 0.85);
        transform: translateY(-1px);
    }

    .custom-btn:active {
        transform: translateY(0);
        background-color: rgba(var(--primary-color-rgb), 0.75);
    }

    .custom-btn:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }


/* ================================
   Layout + Global
   ================================ */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-body);
    background-color: #f7f9fb;
    color: #1c1f22;
}

main {
    flex: 1 0 auto;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* ================================
   Footer (Sticky)
   ================================ */
.footer {
    background-color: var(--accent-color);
    color: #00a1b0;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 300;
}

    .footer a {
        color: var(--primary-color);
        text-decoration: none;
    }

        .footer a:hover {
            text-decoration: underline;
        }

/* ================================
   Workflow
   ================================ */
.workflow-progress {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
}

.workflow-step {
    text-align: center;
    flex: 1;
    position: relative;
}

    .workflow-step .circle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #ccc;
        margin: auto;
    }

    .workflow-step.completed .circle {
        background: #28a745;
    }

    .workflow-step.active .circle {
        background: #007bff;
    }

    .workflow-step .label {
        margin-top: 5px;
        font-size: 12px;
    }

.timeline {
    list-style: none;
    padding: 0;
}

    .timeline li {
        padding: 10px 20px;
        border-left: 3px solid #007bff;
        margin-bottom: 15px;
    }

/* ================================
   Navbar
   ================================ */
.navbar {
    background-color: var(--accent-color) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.navbar-brand {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.4rem;
}

    .navbar-brand img {
        background-color: #fff;
        border-radius: 4px;
        padding: 4px;
    }

.navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 700;
    transition: color 0.3s ease;
}

    .navbar-nav .nav-link:hover {
        color: var(--primary-color) !important;
    }

/* ================================
   Form Grid (Responsive + Two-Column)
   ================================ */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    column-gap: 20px;
    row-gap: 4px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

    .form-group label {
        font-weight: 600;
    }

    .form-group.notes {
        grid-column: span 2; /* span both columns */
    }

        .form-group.notes textarea {
            width: 100%;
            resize: vertical;
        }

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 vertical columns */
    column-gap: 50px;
    row-gap: 8px;
}

.detail-group {
    display: grid;
    grid-template-columns: 160px 1fr; /* fixed label, flexible value */
    align-items: center;
    gap: 12px;
}

    .detail-group dt {
        font-weight: 600;
        text-align: left; /* label left-aligned */
    }

    .detail-group dd {
        margin: 0;
        text-align: left; /* data left-aligned */
    }

    .detail-group.notes dd {
        white-space: pre-wrap; /* preserve line breaks */
        text-align: left; /* notes left-aligned */
    }

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .details-grid {
        grid-template-columns: 1fr; /* single column */
    }

    .detail-group dt,
    .detail-group dd {
        text-align: left; /* all left-aligned on small screens */
    }
}



/* Stack form on mobile */
@media (max-width: 600px) {
    .form-group {
        grid-template-columns: 1fr;
    }

        .form-group label {
            text-align: left;
        }
        /* Notes spans full width across both columns */
        .form-group.notes {
            grid-column: span 2;
        }
}






/* ================================
   Modern Table Styling
   ================================ */
.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

    .table-modern thead {
        background: var(--accent-color);
        color: #ffffff;
    }

    .table-modern th {
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0.04em;
        padding: 14px 16px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .table-modern td {
        padding: 14px 16px;
        border-bottom: 1px solid #e6e6e6;
        font-size: 0.92rem;
    }

    .table-modern tbody tr:hover {
        background: rgba(0, 161, 176, 0.08);
        cursor: pointer;
    }

    .table-modern tbody tr:last-child td {
        border-bottom: none;
    }

    .table-modern tbody tr:nth-child(odd) {
        background: #fafafa;
    }


    /* ================================
   Compact Modern Table for Long Tables
   ================================ */
    .table-modern.compact {
        font-size: 0.30rem; /* smaller font */
    }

        /* Allow headers to wrap */
        .table-modern.compact th {
            padding: 3px 8px;
            max-width: 120px;
            white-space: normal; /* allow line breaks */
        }

        .table-modern.compact td {
            padding: 3px 4px; /* smaller cell padding */
            max-width: 120px; /* limit column width */
            white-space: nowrap; /* prevent wrapping */
            overflow: hidden;
            /*text-overflow: ellipsis;*/ /* show ... for overflow */
        }

        .table-modern.compact tbody tr:hover {
            background: rgba(0, 161, 176, 0.05); /* lighter hover effect for compact */
        }

/* Responsive table */
@media (max-width: 768px) {
    .table-modern thead {
        display: none;
    }

    .table-modern tbody tr {
        display: block;
        border-bottom: 2px solid #ddd;
        margin-bottom: 8px;
        padding: 8px 0;
    }

    .table-modern td {
        display: flex;
        justify-content: space-between;
        padding: 10px 12px;
        font-size: 0.9rem;
    }

        .table-modern td::before {
            content: attr(data-label);
            font-weight: 600;
            color: var(--accent-color);
            margin-right: 10px;
        }
}