@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    background-color: #FEF7FF; /* M3 surface */
    color: #1D1B20;
}

/* Navbar */
.navbar.bg-dark, .navbar.bg-primary {
    background-color: #F3EDF7 !important; /* Surface Container */
    color: #1D1B20 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.navbar-brand, .navbar-dark .navbar-nav .nav-link, .nav-link {
    color: #1D1B20 !important;
}

/* Cards */
.card {
    background-color: #FDF7FF; /* Surface */
    border: 1px solid #CAC4D0; /* Outline variant */
    border-radius: 12px;
    box-shadow: none !important;
}
.card-header.bg-primary {
    background-color: #F3EDF7 !important;
    color: #1D1B20 !important;
    border-bottom: 1px solid #CAC4D0;
}
.bg-primary {
    background-color: #6750A4 !important;
    color: #FFFFFF !important;
}
.bg-secondary {
    background-color: #E8DEF8 !important;
    color: #1D192B !important;
}
.text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Buttons */
.btn {
    border-radius: 100px; /* Fully rounded for M3 */
    font-weight: 500;
    padding: 10px 24px;
    text-transform: none;
    box-shadow: none !important;
    transition: background-color 0.2s, box-shadow 0.2s;
}
.btn-sm {
    padding: 6px 16px;
}
.btn-primary {
    background-color: #6750A4; /* Primary */
    color: #FFFFFF;
    border: none;
}
.btn-primary:hover {
    background-color: #553f87;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
.btn-secondary {
    background-color: #E8DEF8; /* Secondary container */
    color: #1D192B; /* On secondary container */
    border: none;
}
.btn-secondary:hover {
    background-color: #d3c4e8;
}
.btn-danger {
    background-color: #B3261E; /* Error */
    color: #FFFFFF;
    border: none;
}
.btn-warning {
    background-color: #F2B8B5; /* Custom warning to fit M3 tones */
    color: #601410;
    border: none;
}
.btn-outline-light {
    border-color: #79747E;
    color: #6750A4;
}
.btn-outline-light:hover {
    background-color: #EADDFF;
    color: #21005D;
}

/* Inputs */
.form-control {
    border-radius: 4px 4px 0 0;
    border: none;
    border-bottom: 1px solid #79747E;
    background-color: #E7E0EC;
    padding: 12px 16px;
}
.form-control:focus {
    background-color: #E7E0EC;
    border-bottom: 2px solid #6750A4;
    box-shadow: none;
}

/* Table */
.table {
    --bs-table-bg: transparent;
}
.table thead th, .table-dark, .table-primary {
    background-color: #F3EDF7 !important; /* Surface container */
    color: #1D1B20 !important;
    font-weight: 500;
    border-bottom: 1px solid #CAC4D0;
}
.table-bordered > :not(caption) > * > * {
    border-width: 0 0 1px 0;
    border-color: #CAC4D0;
}

/* Modal */
.modal-content {
    border-radius: 28px;
    background-color: #FEF7FF;
    border: none;
}
.modal-header {
    border-bottom: none;
}
.modal-footer {
    border-top: none;
}

/* Sticky Columns for Matrix Table */
.sticky-col-0 {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #FEF7FF !important;
}
.sticky-col-1 {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #FEF7FF !important;
}
.sticky-col-2 {
    position: sticky;
    left: 50px;
    z-index: 2;
    background-color: #FEF7FF !important;
}
thead .sticky-col-0, thead .sticky-col-1, thead .sticky-col-2 {
    z-index: 3;
    background-color: #F3EDF7 !important;
}
.table-hover tbody tr:hover .sticky-col-0,
.table-hover tbody tr:hover .sticky-col-1,
.table-hover tbody tr:hover .sticky-col-2 {
    background-color: #E8DEF8 !important;
}