.border-red {
  border-color: #EA6759 !important; }

.badge-red {
  color: #ffffff;
  background-color: #EA6759; }
  a.badge-info:hover, a.badge-info:focus {
    color: #ffffff;
    background-color: #EA6759; }
  a.badge-info:focus, a.badge-info.focus {
    outline: 0;
    box-shadow: 0 0 0 1px rgba(234, 103, 89, 1); }

.message-text{
    border: none;
    box-shadow: none;
    background-color: white!important;
    padding-bottom:unset;
}

.h-31{
    height: 31.25rem
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #B76BA3;
}

.alert-red {
    color: #e70b47;
    background-color: #fbf6f6;
    border-color: #e70b47;
}

/* Bootstrap dropdowns (.dropdown-menu/.dropdown-item — nav user menu, app
   switcher, and row/detail-page action menus) and the default select2 widget
   (used across most forms/filters) were still hardcoded to the old 1rem
   baseline in theme.css/select2-bootstrap.css, while .form-control and tables
   were already shrunk to 0.75rem/font-size-sm — making every dropdown look
   oversized next to a regular input. Re-align them here instead of editing
   those vendor/theme files directly. */
.dropdown-menu {
    font-size: 0.75rem;
}

.select2-container--bootstrap .select2-selection,
.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
    font-size: 0.75rem;
}

/* ==========================================================================
   Shared card design system — used by the dashboard and, project-wide, by any
   page that wraps its content block in `.dashboard-page` and includes
   templates/partials/_tile_card.html (currently: dashboard, and the
   attendance/leave/appraisal_ccl2/people navigator pages).
   Tokens live at :root (not scoped to a page wrapper) so the card classes
   render correctly even without `.dashboard-page`; `.dashboard-page` itself
   still carries the page-chrome overrides (spacing, section-title, etc.).
   ========================================================================== */
:root {
    --dash-accent: #346CB0;
    --dash-radius: 10px;
    --dash-radius-sm: 8px;
    --dash-border: #e6e9f0;
    --dash-muted: #7c8496;
    --dash-shadow: 0 1px 2px rgba(20, 20, 31, 0.05), 0 1px 3px rgba(20, 20, 31, 0.06);
    --dash-shadow-hover: 0 10px 20px rgba(20, 20, 31, 0.10), 0 3px 6px rgba(20, 20, 31, 0.08);
}

.dashboard-page {
    /* .page-inner (theme.css, sitewide) adds 1.5rem top padding — cancel it here
       so the dashboard title bar/back-link sits flush under the nav, without
       touching .page-inner itself and affecting other pages. */
    margin-top: -1.5rem;
}

.dashboard-page .page-title-bar {
    padding: 1.1rem 1.5rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #f5f8fd 0%, #ffffff 100%);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.dashboard-header-user {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.dashboard-header-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--dash-accent);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

.dashboard-header-greeting {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2a2f3c;
}

.dashboard-header-subtitle {
    font-size: .8rem;
    color: var(--dash-muted);
}

.dashboard-header-date {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--dash-accent);
    background: rgba(52, 108, 176, 0.08);
    border-radius: 999px;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .dashboard-header-avatar {
        width: 2.25rem;
        height: 2.25rem;
        font-size: .95rem;
    }

    .dashboard-header-greeting {
        font-size: 1rem;
    }
}

.dashboard-back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--dash-muted);
    text-decoration: none;
}

.dashboard-back-link:hover,
.dashboard-back-link:focus {
    color: var(--dash-accent);
    text-decoration: none;
}

.dashboard-page .section-block {
    margin: 0 0 2rem 0;
}

/* Pages that have no back-link/page-title-bar above the section (currently the
   attendance/leave/appraisal_ccl2/people navigator pages) — the section-title
   would otherwise sit flush against the tab nav above, so give it some room. */
.dashboard-page > .page-section:first-child {
    padding-top: 1.5rem;
}

.dashboard-page .section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 0 1rem 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #2a2f3c;
    border-bottom: 1px solid var(--dash-border);
    margin-bottom: 1rem;
}

.dashboard-page .section-title .oi,
.dashboard-page .section-title .fas,
.dashboard-page .section-title .far {
    color: var(--dash-accent);
}

/* Quick-link / task tile cards */
.dashboard-tile-col {
    margin-bottom: .65rem;
}

.dashboard-tile-link {
    color: #2a2f3c;
    text-decoration: none;
    display: block;
    height: 100%;
}

.dashboard-tile-link:hover,
.dashboard-tile-link:focus {
    color: #2a2f3c;
    text-decoration: none;
}

.dashboard-tile {
    height: 100%;
    border-radius: var(--dash-radius-sm) !important;
    border-top-width: 3px !important;
    box-shadow: var(--dash-shadow);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.dashboard-tile.is-hoverable:hover,
.dashboard-tile.is-hoverable:focus {
    box-shadow: var(--dash-shadow-hover);
    transform: translateY(-2px);
}

.dashboard-tile .card-body {
    padding: .65rem .5rem;
    text-align: center;
    position: relative;
}

.dashboard-tile-icon {
    font-size: 1.1rem;
    color: var(--dash-accent);
    margin-bottom: .3rem;
}

.dashboard-tile-label {
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.25;
}

.dashboard-tile-badge {
    display: inline-block;
    margin-top: .25rem;
    font-size: .65rem;
    padding: .25em .5em;
}

/* Compact list rows — "Quick Links" / "My Tasks" */
.dashboard-list-col {
    margin-bottom: .4rem;
}

.dashboard-list-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .55rem;
    height: 100%;
    background: #fff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    color: #2a2f3c;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.dashboard-list-item:hover,
.dashboard-list-item:focus {
    color: #2a2f3c;
    text-decoration: none;
    background: #f5f8fd;
    border-color: var(--dash-accent);
    transform: translateY(-1px);
}

.dashboard-list-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 5px;
    background: rgba(52, 108, 176, 0.1);
    color: var(--dash-accent);
    font-size: .7rem;
}

.dashboard-list-label {
    flex: 1 1 auto;
    font-size: .65rem;
    font-weight: 500;
    line-height: 1.2;
}

.dashboard-list-badge {
    flex: 0 0 auto;
    font-size: .6rem;
    padding: .25em .45em;
}

@media (max-width: 767.98px) {
    .dashboard-list-item {
        padding: .4rem .5rem;
    }

    .dashboard-list-icon {
        width: 1.3rem;
        height: 1.3rem;
        font-size: .65rem;
    }

    .dashboard-list-label {
        font-size: .6rem;
    }
}

/* At a Glance — compact stat bar */
.dashboard-statbar {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow);
    overflow: hidden;
}

.dashboard-statbar-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex: 1 1 9rem;
    padding: .65rem .9rem;
    color: #2a2f3c;
    text-decoration: none;
    border-right: 1px solid var(--dash-border);
    transition: background-color 120ms ease;
}

.dashboard-statbar-item:last-child {
    border-right: none;
}

.dashboard-statbar-item:hover,
.dashboard-statbar-item:focus {
    color: #2a2f3c;
    text-decoration: none;
    background: #f5f8fd;
}

.dashboard-statbar-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(52, 108, 176, 0.1);
    color: var(--dash-accent);
    font-size: .9rem;
}

.dashboard-statbar-item.is-dark .dashboard-statbar-icon { background: rgba(38, 42, 51, .1); color: #262a33; }
.dashboard-statbar-item.is-primary .dashboard-statbar-icon { background: rgba(52, 108, 176, .12); color: #346CB0; }
.dashboard-statbar-item.is-danger .dashboard-statbar-icon { background: rgba(220, 68, 82, .12); color: #dc4452; }
.dashboard-statbar-item.is-warning .dashboard-statbar-icon { background: rgba(230, 162, 60, .15); color: #b3781f; }
.dashboard-statbar-item.is-success .dashboard-statbar-icon { background: rgba(40, 167, 100, .12); color: #1f8a54; }

.dashboard-statbar-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.dashboard-statbar-value {
    font-size: 1.15rem;
    font-weight: 700;
}

.dashboard-statbar-label {
    font-size: .68rem;
    color: var(--dash-muted);
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .dashboard-statbar-item {
        flex: 1 1 45%;
        border-right: none;
        border-bottom: 1px solid var(--dash-border);
    }
}

/* Birthday Announcement — avatar chip grid */
.dashboard-bday-wrap {
    max-height: 40vh;
    overflow-y: auto;
}

.dashboard-bday-col {
    margin-bottom: .4rem;
}

.dashboard-bday-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .55rem;
    height: 100%;
    background: #fff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    transition: background-color 120ms ease, border-color 120ms ease;
}

.dashboard-bday-chip:hover {
    background: #fff8ee;
    border-color: #e6a23c;
}

.dashboard-bday-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(52, 108, 176, 0.12);
    color: var(--dash-accent);
    font-size: .68rem;
    font-weight: 700;
}

.dashboard-bday-name {
    flex: 1 1 auto;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-bday-notify {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    color: #e6a23c;
    font-size: .7rem;
}

.dashboard-bday-notify:hover,
.dashboard-bday-notify:focus {
    background: rgba(230, 162, 60, .15);
}

@media (max-width: 767.98px) {
    .dashboard-page .page-title-bar {
        padding: 1.1rem 1.25rem;
    }

    .dashboard-tile .card-body {
        padding: .5rem .4rem;
    }

    .dashboard-tile-icon {
        font-size: 1rem;
    }

    .dashboard-tile-label {
        font-size: .65rem;
    }
}