@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap'); 



html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    height: 100%;
}

 /*✅ GLOBAL BACKGROUND*/ 
body {
    background: linear-gradient(135deg, #cfd3d3, #f8fafc);
}

 /*✅ HEADINGS*/ 
h1:focus {
    outline: none;
}

 /*✅ LINKS*/ 
a, .btn-link {
    color: #2563eb;
}

 /*✅ CARDS (MAIN UI PANELS)*/ 
.card {
    background-color: #eef0f3 !important;
    border: none;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

 /*✅ FORM INPUTS*/ 
.form-control {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    text-transform: capitalize;
}

    .form-control[type="email"] {
        text-transform: lowercase !important;
    }
    .form-control[type="subject"] {
        text-transform: none;
    }

.notes-subject {
    text-transform: none;
}
    .notes-text {
        text-transform: none;
    }

    .form-control[type="date"] {
        text-transform: none;
    }

    .form-control[name="subject"] {
        text-transform: none;
    }

    .form-control[type="tel"] {
        text-transform: none;
    }

    .form-control[type="url"] {
        text-transform: none;
    }

    .form-control[type="text"] {
        text-transform: none;
    }

    select.form-control {
        text-transform: none;
    }
    /*✅ PRIMARY BUTTON*/
    .btn-primary {
        color: #fff;
        background-color: #2563eb;
        border-color: #2563eb;
        border-radius: 6px;
    }

        .btn-primary:hover {
            background-color: #1e4fd8;
            border-color: #1e4fd8;
        }
    /*✅ OUTLINE BUTTONS*/
    .btn-outline-danger {
        border-radius: 6px;
    }

    .btn-outline-secondary {
        border-radius: 6px;
    }
    /*✅ TAB CONTENT AREA*/
    .tab-content {
        background: #ffffff;
        border-radius: 0 0 10px 10px;
    }
    /*✅ NAV TABS*/
    .nav-tabs .nav-link {
        color: #6b7280;
    }

        .nav-tabs .nav-link.active {
            color: #2563eb;
            font-weight: 500;
        }
    /*✅ LIST GROUP (for lists)*/
    .list-group-item {
        border-radius: 6px;
        margin-bottom: 6px;
    }
    /*✅ GROUP LIST (if you keep it)*/
    .group-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
    }

    .group-item {
        padding: 18px;
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .group-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(0,0,0,0.12);
        }
    /*✅ CONTENT SPACING*/
    .content {
        padding-top: 1.1rem;
    }
    /*✅ VALIDATION*/
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #16a34a;
    }

    .invalid {
        outline: 1px solid #dc2626;
    }

    .validation-message {
        color: #dc2626;
    }
    /*✅ LOADER this is also the background color when it loads. go to index to change text and postitions*/
    .app-loader {
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: #160000ca;
    }

    .loader-card {
        width: min(420px, 92vw);
        padding: 24px;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
    }
    /*✅ ERROR UI*/
    #blazor-error-ui {
        background: #fde68a;
        color: #92400e;
    }
}
/*html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    height: 100%;
}*/

/* ✅ GLOBAL BACKGROUND */
/*body {
    background: linear-gradient(135deg, #cfd1d3, #f8fafc);
}*/

/* ✅ HEADINGS */
/*h1:focus {
    outline: none;
}*/

/* ✅ LINKS */
/*a, .btn-link {
    color: #2563eb;
}*/

/* ✅ CARDS (MAIN UI PANELS) */
/*.card {
    background-color: #eef0f3 !important;
    border: none;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}*/

/* ✅ FORM INPUTS */
/*.form-control {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    text-transform: capitalize;
}

    .form-control[type="email"] {
        text-transform: lowercase !important;
    }

    .form-control[type="subject"] {
        text-transform: none;
    }

.notes-subject {
    text-transform: none;
}

.form-control[type="date"] {
    text-transform: none;
}

.form-control[name="subject"] {
    text-transform: none;
}

.form-control[type="tel"] {
    text-transform: none;
}

.form-control[type="url"] {
    text-transform: none;
}

.form-control[type="text"] {
    text-transform: none;
}

select.form-control {
    text-transform: none;
}*/


/* ✅ PRIMARY BUTTON */
/*.btn-primary {
    color: #fff;
    background-color: #2563eb;
    border-color: #2563eb;
    border-radius: 6px;
}

    .btn-primary:hover {
        background-color: #1e4fd8;
        border-color: #1e4fd8;
    }*/

/* ✅ OUTLINE BUTTONS */
/*.btn-outline-danger {
    border-radius: 6px;
}

.btn-outline-secondary {
    border-radius: 6px;
}*/

/* ✅ TAB CONTENT AREA */
/*.tab-content {
    background: #ffffff;
    border-radius: 0 0 10px 10px;
}*/

/* ✅ NAV TABS */
/*.nav-tabs .nav-link {
    color: #6b7280;
}

    .nav-tabs .nav-link.active {
        color: #2563eb;
        font-weight: 500;
    }*/

/* ✅ LIST GROUP (for lists) */
/*.list-group-item {
    border-radius: 6px;
    margin-bottom: 6px;
}*/

/* ✅ GROUP LIST (if you keep it) */
/*.group-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}*/

/*.group-item {
    padding: 18px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .group-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.12);
    }*/

/* ✅ CONTENT SPACING */
/*.content {
    padding-top: 1.1rem;
}*/

/* ✅ VALIDATION */
/*.valid.modified:not([type=checkbox]) {
    outline: 1px solid #16a34a;
}

.invalid {
    outline: 1px solid #dc2626;
}

.validation-message {
    color: #dc2626;
}*/

/* ✅ LOADER */
/*.app-loader {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #160000ca;
}

.loader-card {
    width: min(420px, 92vw);
    padding: 24px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}*/

/* ✅ ERROR UI */
/*#blazor-error-ui {
    background: #fde68a;
    color: #92400e;
}*/