/* This CSS file needs to be called out first before the other CSS files */

/* need ng proper rename */
:root {
    --brand-blue: #087293;
    --brand-blue-hover: #075a76;
    --brand-mint: #3fc7a2;
    --brand-ink: #063f58;
    --primary-blue: var(--brand-blue);
    --primary-blue-dark: var(--brand-blue-hover);
    --primary-blue-soft: #dceef3;
    --teal-accent: var(--brand-mint);
    --teal-soft: #d9f5ec;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;
    --gray-dark: #111827;
    --gray-medium: #475569;
    --gray-light: #eef2f7;
    --gray-border: #dfe5ee;
    --background-color: #f4f7fb;
    --background-color-white: #ffffff;
    --background-color-avatar: #e2e8f0;
    --background-hover: #e2e8f0;
    --box-shadow: rgba(15, 23, 42, 0.12);
    --login-container-h2: #1f2937;
    --form-group-label: #334155;
    --form-group-border: #d8dee8;
    --form-group-input-shadow: rgba(8, 114, 147, 0.2);
    --error-message: #dc2626;
    --error-background-color: #fee2e2;
}

/* RESET */
/* Reset the browser's default spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
    width: 100%;
}

table th,
table td {
    border-right: none;
}

table tbody tr {
    border-bottom: 1px solid var(--gray-border);
}

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

body {
    background: linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
    color: var(--gray-dark);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.card,
.modal-panel,
.sidebar,
.app-container,
.page-content {
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    transition: all 0.2s ease;
}

.confirm-modal {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:10000;

    justify-content:center;

    align-items:center;

}


.confirm-modal.active {

    display:flex;

}


.confirm-box {

    background:white;

    width:350px;

    padding:25px;

    border-radius:12px;

    box-shadow:0 5px 20px rgba(0,0,0,.25);

    text-align:center;

}


.confirm-box h3 {

    margin-bottom:10px;

}


.confirm-box p {

    color:#555;

    margin-bottom:20px;

}


.confirm-actions {

    display:flex;

    justify-content:center;

    gap:15px;

}


.confirm-actions button {

    padding:10px 20px;

    border:none;

    border-radius:6px;

    cursor:pointer;

}


.cancel-btn {

    background:#ccc;

}


.confirm-btn {

    background:#dc3545;

    color:white;

}

#confirmModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;

    justify-content: center;
    align-items: center;
}

#confirmModal.active {
    display: flex;
}

.confirm-box {
    background: white;
    padding: 25px;
    border-radius: 10px;
    width: 300px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.confirm-box button {
    margin: 10px;
    padding: 8px 20px;
    cursor: pointer;
}