@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400&display=swap');

:root {
    --brand-pink: #f22f9c;
    --brand-pink-dark: #cc167b;
    --brand-black: #0b0b0c;
    --brand-panel: #1b1b1e;
    --brand-paper: #ffffff;
    --brand-soft: #f4f4f5;
    --brand-line: #dedee2;
    --brand-ink: #202024;
    --brand-muted: #707078;
}

body,
button,
input,
select,
textarea {
    font-family: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body.admin-shell,
body.employee-shell {
    color: var(--brand-ink);
    background: var(--brand-soft);
}

.admin-shell .menu-sidebar,
.employee-shell .menu-sidebar {
    background: var(--brand-black);
    border-right-color: var(--brand-black) !important;
    box-shadow: none !important;
}

.admin-shell .menu-sidebar .logo,
.employee-shell .menu-sidebar .logo {
    background: var(--brand-black);
    border-bottom: 3px solid var(--brand-pink) !important;
}

.admin-shell .menu-sidebar .logo > a,
.employee-shell .menu-sidebar .logo > a,
.admin-shell .header-mobile .logo,
.employee-shell .header-mobile .logo {
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.admin-shell .navbar__list li a,
.admin-shell .navbar-mobile__list li a,
.employee-shell .navbar__list li a,
.employee-shell .navbar-mobile__list li a,
.employee-shell .employee-nav-button {
    border-radius: 0 !important;
    color: #d8d8dc !important;
    font-weight: 600 !important;
}

.admin-shell .navbar__list li a i,
.admin-shell .navbar-mobile__list li a i,
.employee-shell .navbar__list li a i,
.employee-shell .navbar-mobile__list li a i,
.employee-shell .employee-nav-button i {
    color: #a9a9b0 !important;
}

.admin-shell .navbar__list li.active > a,
.admin-shell .navbar-mobile__list li.active > a,
.employee-shell .navbar__list li.active > a,
.employee-shell .navbar-mobile__list li.active > a {
    color: #fff !important;
    background: var(--brand-panel) !important;
    box-shadow: inset 4px 0 0 var(--brand-pink) !important;
}

.admin-shell .navbar__list li.active > a i,
.admin-shell .navbar-mobile__list li.active > a i,
.employee-shell .navbar__list li.active > a i,
.employee-shell .navbar-mobile__list li.active > a i,
.admin-shell .navbar__list li a:hover i,
.employee-shell .navbar__list li a:hover i,
.employee-shell .employee-nav-button:hover i {
    color: var(--brand-pink) !important;
}

.admin-shell .navbar__list li a:hover,
.admin-shell .navbar-mobile__list li a:hover,
.employee-shell .navbar__list li a:hover,
.employee-shell .navbar-mobile__list li a:hover,
.employee-shell .employee-nav-button:hover {
    color: #fff !important;
    background: var(--brand-panel) !important;
}

.header-desktop,
.header-mobile .header-mobile__bar {
    background: var(--brand-paper);
    border-bottom: 3px solid var(--brand-pink);
    box-shadow: none;
}

.header-mobile .hamburger {
    background: transparent;
}

.main-content {
    background: var(--brand-soft);
}

h1,
h2,
h3,
h4,
h5,
h6,
.title-1,
.dashboard-title {
    font-family: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    color: var(--brand-ink);
}

.title-1,
.dashboard-title,
.attendance-page .page-header h2 {
    font-weight: 300 !important;
    letter-spacing: -0.025em !important;
}

.title-1::after,
.dashboard-title::after,
.attendance-page .page-header h2::after {
    content: "";
    display: block;
    width: 96px;
    height: 3px;
    margin-top: 10px;
    background: var(--brand-pink);
}

.card,
.overview-item,
.au-card,
.attendance-page .panel,
.attendance-page .filter-panel,
.holiday-card,
.leave-card,
.stat-card {
    border: 1px solid var(--brand-line) !important;
    border-top: 3px solid var(--brand-pink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--brand-paper) !important;
}

.dashboard-shell {
    padding: 28px 24px 32px;
    border-radius: 0 !important;
    background: var(--brand-soft) !important;
}

.dashboard-date,
.stat-icon,
.leave-action .btn {
    border-radius: 0 !important;
}

.stat-icon--employees,
.stat-icon--present,
.stat-icon--leave {
    background: var(--brand-black) !important;
    border-bottom: 3px solid var(--brand-pink);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11, 11, 12, .08) !important;
}

.btn,
.au-btn,
.form-control,
.au-input,
.select2-container .select2-selection--single,
.modal-content,
.alert,
.badge {
    border-radius: 0 !important;
}

.btn-primary,
.au-btn--green,
.au-btn--blue,
.au-btn--submit {
    border-color: var(--brand-pink) !important;
    background: var(--brand-pink) !important;
    color: #fff !important;
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.au-btn--green:hover,
.au-btn--blue:hover,
.au-btn--submit:hover {
    border-color: var(--brand-pink-dark) !important;
    background: var(--brand-pink-dark) !important;
}

.btn-secondary,
.btn-outline-secondary {
    border-color: var(--brand-black) !important;
    background: var(--brand-black) !important;
    color: #fff !important;
}

.btn-link,
a:not(.btn):not(.logo) {
    color: var(--brand-pink-dark);
}

.form-control:focus,
.au-input:focus,
.select2-container--focus .select2-selection--single {
    border-color: var(--brand-pink) !important;
    box-shadow: 0 0 0 3px rgba(242, 47, 156, .12) !important;
}

.table thead th,
.table-data3 thead,
.table-earning thead {
    border-color: var(--brand-pink) !important;
    background: var(--brand-black) !important;
    color: #fff !important;
    font-weight: 700;
}

.table tbody tr:hover {
    background: rgba(242, 47, 156, .045);
}

.pagination .page-item.active .page-link {
    border-color: var(--brand-pink);
    background: var(--brand-pink);
}

.pagination .page-link {
    color: var(--brand-pink-dark);
}

.account-dropdown,
.mess-dropdown,
.notifi-dropdown {
    border-radius: 0 !important;
    border-top: 3px solid var(--brand-pink);
}

/* Brand-led sign-in screen */
body.login .page-content--bge5 {
    position: relative;
    background: var(--brand-black);
}

body.login .page-content--bge5::before,
body.login .page-content--bge5::after {
    content: "";
    position: absolute;
    height: 4px;
    background: var(--brand-pink);
}

body.login .page-content--bge5::before {
    inset: 0 0 auto 0;
}

body.login .page-content--bge5::after {
    inset: auto 0 0 55%;
}

body.login .login-wrap {
    max-width: 460px;
    padding-top: 9vh;
}

body.login .login-content {
    padding: 42px;
    border: 1px solid #303035;
    border-top: 4px solid var(--brand-pink);
    border-radius: 0;
    background: var(--brand-panel);
    box-shadow: none;
}

body.login .login-logo {
    padding-bottom: 28px;
    text-align: left;
}

body.login .login-logo img {
    display: block;
    width: 220px;
    max-width: 100%;
}

body.login .login-kicker {
    display: block;
    margin-top: 16px;
    color: var(--brand-pink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.login label {
    color: #fff;
    font-weight: 700;
}

body.login .au-input {
    border-color: #46464c;
    background: #111113;
    color: #fff;
}

/* Laravel Breeze profile and fallback dashboard */
.brand-breeze .min-h-screen {
    background: var(--brand-soft) !important;
}

.brand-breeze header {
    border-bottom: 3px solid var(--brand-pink);
    background: var(--brand-black) !important;
    box-shadow: none !important;
}

.brand-breeze header h2,
.brand-breeze header h1 {
    color: #fff !important;
    font-weight: 300 !important;
}

.brand-breeze main .bg-white,
.brand-breeze main .dark\:bg-gray-800 {
    border: 1px solid var(--brand-line);
    border-top: 3px solid var(--brand-pink);
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

.brand-breeze input:focus,
.brand-breeze select:focus,
.brand-breeze textarea:focus {
    border-color: var(--brand-pink) !important;
    --tw-ring-color: rgba(242, 47, 156, .22) !important;
}

.brand-breeze button.bg-gray-800,
.brand-breeze button.dark\:bg-gray-200 {
    border-radius: 0 !important;
    background: var(--brand-pink) !important;
    color: #fff !important;
}

@media (max-width: 991px) {
    .header-mobile .header-mobile__bar {
        background: var(--brand-black);
    }

    .header-mobile .hamburger .hamburger-box .hamburger-inner,
    .header-mobile .hamburger .hamburger-box .hamburger-inner::before,
    .header-mobile .hamburger .hamburger-box .hamburger-inner::after {
        background: #fff;
    }
}