/* HR Payroll pages rendered inside the Gull shell. */
:root {
    --hr-bg: #f6f8fb;
    --hr-surface: #ffffff;
    --hr-surface-soft: #f9fbfd;
    --hr-text: #172033;
    --hr-muted: #65758b;
    --hr-border: #e5eaf1;
    --hr-primary: #663399;
    --hr-primary-dark: #4f2778;
    --hr-primary-soft: #f3edf9;
    --hrms-accent: #2563eb;
    --hrms-accent-dark: #1d4ed8;
    --hrms-success: #14804a;
    --hrms-warning: #b7791f;
    --hrms-danger: #c2413b;
    --hrms-info: #0e7490;
    --hrms-border: #e5e7eb;
    --hrms-soft: #f8fafc;
    --hrms-text: #172033;
    --hrms-muted: #65758b;
}

body.gull-hrms-app {
    background: #f7f8fb;
    color: var(--hrms-text);
    letter-spacing: 0;
}

.gull-layout3-active .layout-horizontal-bar,
.gull-layout3-active .layout-horizontal-bar .main-header,
.gull-layout3-active .layout-horizontal-bar .header-topnav,
.gull-layout3-active .layout-horizontal-bar .header-topnav .container-fluid,
.gull-layout3-active .layout-horizontal-bar .header-topnav .topnav {
    overflow: visible !important;
}

.gull-layout3-active .layout-horizontal-bar .main-header {
    z-index: 1040;
}

.gull-layout3-active .layout-horizontal-bar .header-topnav {
    z-index: 1035;
}

.gull-layout3-active .layout-horizontal-bar .main-content-wrap {
    background: #f7f8fb;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.gull-layout3-active .layout-horizontal-bar .main-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 1.5rem;
}

.gull-layout3-active .layout-horizontal-bar .header-topnav .topnav ul ul {
    z-index: 1036 !important;
    min-width: 220px;
}

.gull-layout3-active .layout-horizontal-bar .header-topnav .topnav ul li:hover > div > div > ul,
.gull-layout3-active .layout-horizontal-bar .header-topnav .topnav ul li:hover > div > ul,
.gull-layout3-active .layout-horizontal-bar .topnav [id^=drop]:checked + ul {
    z-index: 1036 !important;
}

.gull-layout3-active .dropdown-menu {
    z-index: 1050;
}

.gull-layout3-active .hrms-layout3-header .logo img {
    object-fit: contain;
}

.gull-layout3-active .hrms-layout3-header .hrms-header-search {
    cursor: pointer;
}

.gull-layout3-active .hrms-layout3-header .hrms-header-search:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .45);
    outline-offset: 3px;
}

.gull-layout3-active .hrms-layout3-header .hrms-header-search-input {
    cursor: pointer;
    pointer-events: none;
}

.gull-layout3-active .hrms-layout3-menu .topnav .menu {
    padding-right: 0;
}

.hrms-search-ui .search-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .75rem;
}

.hrms-search-result {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 76px;
    padding: .9rem 1rem;
    border: 1px solid var(--hrms-border);
    border-radius: 8px;
    color: var(--hrms-text);
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
    text-decoration: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.hrms-search-result:hover,
.hrms-search-result:focus-visible {
    color: var(--hrms-text);
    border-color: #c7d2fe;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
    text-decoration: none;
    transform: translateY(-2px);
    outline: none;
}

.hrms-search-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
    color: #fff;
    background: var(--hrms-accent);
    font-size: 1.1rem;
}

.hrms-search-result-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.hrms-search-result-title {
    display: block;
    color: var(--hrms-text);
    font-weight: 800;
    line-height: 1.25;
}

.hrms-search-result-category {
    display: block;
    margin-top: .15rem;
    color: var(--hrms-muted);
    font-size: .82rem;
}

.hrms-search-result-arrow {
    color: var(--hrms-muted);
    font-size: 1.35rem;
}

.hrms-search-empty {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 96px;
    padding: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: var(--hrms-muted);
    background: var(--hrms-soft);
    font-weight: 700;
}

.hrms-search-empty.is-static {
    display: flex;
    grid-column: 1 / -1;
}

.fw-normal { font-weight: 400 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: 800 !important; }
.text-end { text-align: right !important; }
.text-start { text-align: left !important; }
.rounded-pill { border-radius: 999px !important; }
.rounded-3 { border-radius: 8px !important; }
.rounded-4 { border-radius: 12px !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.pe-1 { padding-right: .25rem !important; }
.pe-2 { padding-right: .5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.ps-1 { padding-left: .25rem !important; }
.ps-2 { padding-left: .5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }

.gull-hrms-app .main-content-wrap {
    min-height: calc(100vh - 80px);
}

.gull-hrms-app .main-content {
    padding-bottom: 2rem;
}

.gull-hrms-app .main-content > .py-4 {
    padding-top: 1.25rem !important;
    padding-bottom: 2rem !important;
}

.gull-hrms-app .breadcrumb {
    margin-bottom: .9rem;
}

.gull-hrms-app .separator-breadcrumb {
    margin-bottom: 0;
}

.hrms-page-heading h1,
.hrms-page-heading h2,
.hrms-page-heading h3 {
    letter-spacing: 0;
}

.hrms-page-heading .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.page-card,
.stat-card,
.dashboard-card,
.filter-card,
.payroll-card,
.permission-card,
.self-attendance-card {
    background: #fff;
    border: 1px solid var(--hrms-border);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.filter-card,
.payroll-card,
.permission-card,
.self-attendance-card {
    padding: 1rem;
}

.page-card {
    color: var(--hrms-text);
    margin-bottom: 0;
}

.page-card:not(.metric-card):not(.overflow-hidden):not([class^="p-"]):not([class*=" p-"]) {
    padding: 1rem;
}

.page-card > .border-bottom:last-child {
    border-bottom: 0 !important;
}

.page-card.overflow-hidden > .table-responsive {
    border-radius: 0;
}

.page-card.overflow-hidden > .table-responsive > .table {
    margin-bottom: 0;
}

.page-card .table thead th:first-child,
.page-card .table tbody td:first-child {
    padding-left: 1.25rem;
}

.page-card .table thead th:last-child,
.page-card .table tbody td:last-child {
    padding-right: 1.25rem;
}

.actionable-card {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.actionable-card:hover,
.actionable-card:focus-visible {
    color: inherit;
    border-color: #decdf1 !important;
    box-shadow: 0 14px 34px rgba(102, 51, 153, 0.14);
    text-decoration: none;
    transform: translateY(-2px);
    outline: none;
}

.quick-action-panel {
    padding: 1.25rem;
    border: 1px solid var(--hrms-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.quick-action-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
}

.quick-action-button {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 74px;
    padding: .9rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: var(--hrms-text);
    background: var(--hrms-soft);
    text-decoration: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background 140ms ease;
}

.quick-action-button:hover,
.quick-action-button:focus-visible {
    color: var(--hrms-text);
    border-color: #c7d2fe;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
    text-decoration: none;
    transform: translateY(-2px);
    outline: none;
}

.quick-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
    color: #fff;
    font-size: 1.1rem;
}

.quick-action-copy {
    min-width: 0;
}

.quick-action-label {
    display: block;
    color: var(--hrms-text);
    font-weight: 800;
    line-height: 1.25;
}

.quick-action-description {
    display: block;
    margin-top: .15rem;
    color: var(--hrms-muted);
    font-size: .82rem;
    line-height: 1.3;
}

.quick-action-button-primary .quick-action-icon { background: var(--hrms-accent); }
.quick-action-button-success .quick-action-icon { background: var(--hrms-success); }
.quick-action-button-warning .quick-action-icon { background: var(--hrms-warning); }
.quick-action-button-danger .quick-action-icon { background: var(--hrms-danger); }
.quick-action-button-info .quick-action-icon { background: var(--hrms-info); }
.quick-action-button-secondary .quick-action-icon { background: #64748b; }

.metric-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-height: 128px;
    padding: 1.25rem;
}

.metric-label {
    color: var(--hrms-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.metric-value {
    margin-top: 0.35rem;
    color: var(--hrms-text);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}

.metric-note {
    margin-top: 0.55rem;
    color: var(--hrms-muted);
    font-size: 0.86rem;
}

.metric-icon,
.summary-card .icon-wrap {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #663399;
    background: #f3edf9;
    font-size: 1.15rem;
}

.summary-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 8px !important;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.summary-card .card-body {
    position: relative;
    z-index: 1;
}

.section-title {
    color: var(--hrms-text);
    font-weight: 800;
}

.avatar,
.hrms-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #663399, #8b5cf6);
    font-weight: 800;
    text-transform: uppercase;
}

.avatar-sm {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 0.82rem;
}

@media (min-width: 768px) {
    .filter-card,
    .payroll-card,
    .permission-card,
    .self-attendance-card {
        padding: 1.25rem;
    }

    .page-card:not(.metric-card):not(.overflow-hidden):not([class^="p-"]):not([class*=" p-"]) {
        padding: 1.25rem;
    }
}

.card {
    border-radius: 8px;
}

.btn {
    border-radius: 6px;
    font-weight: 700;
}

.btn-primary {
    background-color: var(--hrms-accent);
    border-color: var(--hrms-accent);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--hrms-accent-dark);
    border-color: var(--hrms-accent-dark);
}

.btn-outline-primary {
    color: var(--hrms-accent);
    border-color: var(--hrms-accent);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--hrms-accent);
    border-color: var(--hrms-accent);
}

.form-control,
.form-select,
select.form-control,
textarea.form-control {
    border-color: #d9dee8;
    border-radius: 6px;
    color: var(--hrms-text);
    min-height: 38px;
}

.form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, #65758b 50%), linear-gradient(135deg, #65758b 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    appearance: none;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(37, 99, 235, .55);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .13);
}

.invalid-feedback,
.text-danger {
    color: var(--hrms-danger) !important;
}

.alert {
    border-radius: 8px;
}

.table {
    color: var(--hrms-text);
}

.table thead th {
    border-bottom: 1px solid var(--hrms-border);
    color: #4b5563;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.table td,
.table th {
    vertical-align: middle;
}

.table-responsive {
    border-radius: 8px;
}

.badge {
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0;
}

.text-bg-primary,
.badge.bg-primary {
    color: #fff !important;
    background-color: var(--hrms-accent) !important;
}

.text-bg-success,
.badge.bg-success {
    color: #fff !important;
    background-color: var(--hrms-success) !important;
}

.text-bg-warning,
.badge.bg-warning {
    color: #1f2937 !important;
    background-color: #f5c542 !important;
}

.text-bg-danger,
.badge.bg-danger {
    color: #fff !important;
    background-color: var(--hrms-danger) !important;
}

.text-bg-info,
.badge.bg-info {
    color: #fff !important;
    background-color: var(--hrms-info) !important;
}

.text-bg-secondary,
.badge.bg-secondary {
    color: #fff !important;
    background-color: #64748b !important;
}

.bg-light-subtle {
    background-color: var(--hrms-soft) !important;
}

.border-subtle,
.border-light-subtle {
    border-color: var(--hrms-border) !important;
}

.text-muted {
    color: var(--hrms-muted) !important;
}

.dropdown-menu {
    border-radius: 8px;
    border-color: var(--hrms-border);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .12);
}

.modal-content {
    border: 0;
    border-radius: 8px;
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em;
    color: #000;
    background: transparent;
    border: 0;
    opacity: .55;
}

.btn-close::before {
    content: "x";
    display: block;
    font-size: 1.35rem;
    line-height: .75;
}

.btn-close:hover {
    opacity: .85;
}

.modal-header,
.modal-footer {
    border-color: var(--hrms-border);
}

.pagination .page-link {
    color: var(--hrms-accent);
}

.pagination .active .page-link,
.page-item.active .page-link {
    background-color: var(--hrms-accent);
    border-color: var(--hrms-accent);
}

.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.gull-hrms-app .row.g-0 {
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
}

.gull-hrms-app .row.g-0 > [class^="col"],
.gull-hrms-app .row.g-0 > [class*=" col"] {
    padding-right: 0;
    padding-left: 0;
    margin-top: 0;
}

.gull-hrms-app .row.g-1,
.gull-hrms-app .row.g-2,
.gull-hrms-app .row.g-3,
.gull-hrms-app .row.g-4,
.gull-hrms-app .row.g-5 {
    margin-right: calc(var(--hrms-gutter-x, 1rem) * -.5);
    margin-left: calc(var(--hrms-gutter-x, 1rem) * -.5);
    margin-top: calc(var(--hrms-gutter-y, 1rem) * -1);
}

.gull-hrms-app .row.g-1 > [class^="col"],
.gull-hrms-app .row.g-1 > [class*=" col"],
.gull-hrms-app .row.g-2 > [class^="col"],
.gull-hrms-app .row.g-2 > [class*=" col"],
.gull-hrms-app .row.g-3 > [class^="col"],
.gull-hrms-app .row.g-3 > [class*=" col"],
.gull-hrms-app .row.g-4 > [class^="col"],
.gull-hrms-app .row.g-4 > [class*=" col"],
.gull-hrms-app .row.g-5 > [class^="col"],
.gull-hrms-app .row.g-5 > [class*=" col"] {
    padding-right: calc(var(--hrms-gutter-x, 1rem) * .5);
    padding-left: calc(var(--hrms-gutter-x, 1rem) * .5);
    margin-top: var(--hrms-gutter-y, 1rem);
}

.gull-hrms-app .row.g-1 { --hrms-gutter-x: .25rem; --hrms-gutter-y: .25rem; }
.gull-hrms-app .row.g-2 { --hrms-gutter-x: .5rem; --hrms-gutter-y: .5rem; }
.gull-hrms-app .row.g-3 { --hrms-gutter-x: 1rem; --hrms-gutter-y: 1rem; }
.gull-hrms-app .row.g-4 { --hrms-gutter-x: 1.5rem; --hrms-gutter-y: 1.5rem; }
.gull-hrms-app .row.g-5 { --hrms-gutter-x: 3rem; --hrms-gutter-y: 3rem; }

@media (min-width: 1200px) {
    .gull-hrms-app .row.g-xl-4 {
        --hrms-gutter-x: 1.5rem;
        --hrms-gutter-y: 1.5rem;
    }
}

.vstack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch;
}

.hstack {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
}

.hrms-sidebar-logo {
    max-width: 46px;
    max-height: 46px;
    object-fit: contain;
}

.auth-layout-wrap {
    min-height: 100vh;
}

.login-card,
.guest-card {
    background: #fff;
    border: 1px solid var(--hrms-border);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
}

.login-logo img {
    max-height: 72px;
    object-fit: contain;
}

.self-attendance-actions,
.payroll-action-row,
.button-row,
.action-stack {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.empty-state {
    padding: 3rem 1.25rem;
    text-align: center;
}

.empty-state i {
    color: #663399;
    font-size: 2.4rem;
}

.form-panel {
    padding: 1.25rem;
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1rem;
    color: var(--hrms-text);
    font-size: .95rem;
    font-weight: 900;
}

.form-section-title i {
    color: #663399;
}

.self-attendance-photo {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 8px;
    object-fit: cover;
}

.self-attendance-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 1rem;
    align-items: stretch;
}

.self-break-table {
    min-width: 560px;
}

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
}

.login-center {
    width: 100%;
    max-width: 1120px;
}

.login-suite {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(400px, .78fr);
    min-height: min(720px, calc(100vh - 2rem));
    overflow: hidden;
    border: 1px solid rgba(203, 213, 225, .9);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
}

.login-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 3rem;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, rgba(46, 31, 68, .98), rgba(102, 51, 153, .94));
}

.login-brand-panel > * {
    position: relative;
    z-index: 1;
}

.login-brand-mark {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    font-size: 1.45rem;
}

.login-eyebrow {
    margin-bottom: .75rem;
    color: #decdf1;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.login-brand-panel h1 {
    max-width: 560px;
    margin: 0;
    color: #fff;
    font-size: 3.25rem;
    font-weight: 900;
    line-height: 1;
}

.login-brand-panel p {
    max-width: 560px;
    margin: 1.2rem 0 0;
    color: #f3edf9;
    font-size: 1.08rem;
    line-height: 1.7;
}

.login-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.login-highlight {
    min-height: 94px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .55rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: 800;
}

.login-highlight i {
    color: #decdf1;
    font-size: 1.25rem;
}

.login-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
}

.login-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.login-form-header h2 {
    margin: 0;
    color: var(--hrms-text);
    font-size: 2rem;
    font-weight: 900;
}

.login-form-header p {
    margin: .35rem 0 0;
    color: var(--hrms-muted);
}

.login-secure-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .7rem;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    color: #15803d;
    background: #f0fdf4;
    font-size: .78rem;
    font-weight: 900;
}

.permission-grid,
.permission-matrix {
    overflow-x: auto;
}

.permission-grid .form-check,
.permission-matrix .form-check {
    min-height: 1.6rem;
}

@media (max-width: 767.98px) {
    .gull-layout3-active .layout-horizontal-bar .main-content-wrap {
        padding-right: .85rem;
        padding-left: .85rem;
    }

    .gull-layout3-active .layout-horizontal-bar .main-content {
        padding-top: 1rem;
    }

    .gull-hrms-app .main-content > .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1.25rem !important;
    }

    .gull-hrms-app .main-content-wrap {
        margin-left: 0;
    }

    .hrms-page-heading {
        display: block !important;
    }

    .hrms-page-heading h1,
    .hrms-page-heading h2 {
        font-size: 1.35rem;
    }

    .btn,
    .form-control,
    .form-select {
        max-width: 100%;
        white-space: normal;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }

    .table {
        min-width: 760px;
    }
}

@media (max-width: 991.98px) {
    .login-shell {
        align-items: flex-start;
        padding: .75rem;
    }

    .login-suite {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .login-brand-panel {
        min-height: 330px;
        padding: 1.5rem;
    }

    .login-brand-panel h1 {
        font-size: 2.35rem;
    }

    .login-highlights {
        grid-template-columns: 1fr;
    }

    .login-highlight {
        min-height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .login-form-panel {
        padding: 1.25rem;
    }

    .login-form-header {
        flex-direction: column;
    }

    .self-attendance-board {
        grid-template-columns: 1fr;
    }
}