/* ===== Salary Config Professional UI ===== */

.payroll-page {
    padding: 18px;
    max-width: 1250px;
    margin: 0 auto;
}

.payroll-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 16px;
}

.payroll-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .2px;
}

.payroll-subtitle {
    font-size: 12.5px;
    opacity: .75;
    margin-top: 5px;
}

.payroll-actions {
    display: flex;
    gap: 10px;
}

/* Main layout */
.payroll-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 992px) {
    .payroll-grid {
        grid-template-columns: 1fr;
    }
}

/* Cards */
.payroll-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    background: #fff;
}

    .payroll-card .e-card-content {
        padding: 16px;
    }

.card-head {
    display: flex;
    gap: 12px;
    padding: 16px 16px 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,.07);
    background: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,0));
}

.card-emoji {
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
}

.card-title {
    font-size: 14px;
    font-weight: 900;
}

.card-desc {
    font-size: 12px;
    opacity: .75;
    margin-top: 2px;
}

/* Grids */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.form-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px;
}

@media (max-width: 992px) {
    .form-grid-3 {
        grid-template-columns: 1fr;
    }

    .form-grid-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .form-grid-2, .form-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Syncfusion control size polish */
.payroll-page .e-input-group,
.payroll-page .e-control,
.payroll-page .e-dropdownlist,
.payroll-page .e-numerictextbox,
.payroll-page .e-textbox {
    border-radius: 12px !important;
}

    .payroll-page .e-input-group input,
    .payroll-page .e-control input {
        min-height: 40px !important;
        font-size: 13px;
    }

.payroll-page .e-float-input,
.payroll-page .e-float-textbox {
    margin-top: 2px;
}

/* Hint */
.hint {
    margin-top: 14px;
    background: rgba(0,0,0,.03);
    padding: 12px 12px;
    border-radius: 14px;
    font-size: 12.5px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    display: inline-block;
}

.divider {
    height: 1px;
    background: rgba(0,0,0,.10);
    margin: 14px 0;
}

/* Preview panel */
.preview .kv {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 13px;
}

    .preview .kv span {
        opacity: .75;
    }

    .preview .kv b {
        font-weight: 900;
    }

    .preview .kv.big b {
        font-size: 16px;
    }

/* Pill status */
.pill {
    margin-top: 14px;
    text-align: center;
    font-weight: 900;
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
}

    .pill.on {
        background: rgba(0,128,0,.10);
    }

    .pill.off {
        background: rgba(255,0,0,.07);
    }

/* Sticky summary */
.sticky {
    position: sticky;
    top: 14px;
}
.tb-orange .e-tbar-btn {
    background: #f59e0b !important;
    color: #fff !important;
    border-color: #f59e0b !important;
}

.tb-blue .e-tbar-btn {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}

.tb-green .e-tbar-btn {
    background: #16a34a !important;
    color: #fff !important;
    border-color: #16a34a !important;
}

.tb-Grey .e-tbar-btn {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}
.att-page {
    background: #f4f6fb;
    padding: 12px;
}

/* Header */
.att-header-card {
    border-radius: 16px;
    background: #fff;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
    margin-bottom: 12px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.ph-title {
    font-size: 16px;
    font-weight: 900;
}

.ph-subtitle {
    font-size: 12px;
    opacity: .7;
    margin-top: 2px;
}

.ph-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

@media (max-width:768px) {
    .panel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ph-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* KPI */
.kpi-row {
    margin-bottom: 10px;
}

.kpi-card {
    border-radius: 18px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 22px rgba(0,0,0,0.06);
    transition: all .25s ease;
}

    .kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 34px rgba(0,0,0,0.10);
    }

.kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}

.kpi-value {
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.kpi-label {
    font-size: 12px;
    opacity: .65;
    margin-top: 4px;
    font-weight: 700;
}

.kpi-card.total .kpi-icon {
    background: linear-gradient(135deg,#6366f1,#4f46e5);
}

.kpi-card.present .kpi-icon {
    background: linear-gradient(135deg,#22c55e,#16a34a);
}

.kpi-card.absent .kpi-icon {
    background: linear-gradient(135deg,#ef4444,#dc2626);
}

.kpi-card.late .kpi-icon {
    background: linear-gradient(135deg,#f59e0b,#d97706);
}

@media (max-width:768px) {
    .kpi-icon {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .kpi-value {
        font-size: 18px;
    }

    .kpi-card {
        padding: 12px;
    }
}

/* Action Bar */
.action-bar {
    border-radius: 16px;
    background: #fff;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
    margin-bottom: 12px;
}

.action-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.action-search {
    width: 320px;
}

.action-btns {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chip-row {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width:768px) {
    .action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .action-search {
        width: 100%;
    }

    .action-btns {
        width: 100%;
        justify-content: space-between;
    }
}

/* Desktop/Mobile switch */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width:768px) {
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }
}

/* Grid Shell */
.grid-shell {
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* Mobile Cards */
.mobile-container {
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.att-card {
    border-radius: 18px;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

.att-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.u-name {
    font-weight: 900;
    font-size: 14px;
}

.u-sub {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pill {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
}

.att-card-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.k {
    font-size: 11px;
    opacity: .7;
    font-weight: 700;
}

.v {
    font-size: 13px;
    font-weight: 900;
    margin-top: 2px;
}

.att-card-foot {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    opacity: .85;
}

.empty-card {
    border-radius: 16px;
    padding: 14px;
    border: 1px dashed rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.02);
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(0,0,0,0.08);
    white-space: nowrap;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-in {
    background: rgba(34,197,94,0.12);
    color: #15803d;
}

    .status-in .dot {
        background: #16a34a;
    }

.status-out {
    background: rgba(59,130,246,0.12);
    color: #1d4ed8;
}

    .status-out .dot {
        background: #2563eb;
    }

.status-not {
    background: rgba(239,68,68,0.10);
    color: #b91c1c;
}

    .status-not .dot {
        background: #ef4444;
    }
/* =========================
   APP NAV MENU - PRO STYLE
   ========================= */

.app-navmenu .mud-nav-link,
.app-navmenu .mud-nav-group {
    border-radius: 10px;
}

/* Link spacing + smooth hover */
.app-navmenu .mud-nav-link {
    margin: 3px 10px;
    padding: 10px 12px !important;
    transition: background-color .18s ease, transform .18s ease;
}

/* Indent submenu a bit (clean hierarchy) */
.app-navmenu .mud-nav-group .mud-nav-link {
    padding-left: 20px !important;
}

/* Hover effect (professional, not too flashy) */
.app-navmenu .mud-nav-link:hover {
    background: rgba(0,0,0,0.04);
    transform: translateX(2px);
}

/* ACTIVE LINK (MudBlazor adds 'active' class) */
.app-navmenu .mud-nav-link.active {
    background: rgba(33, 150, 243, 0.10);
    border-left: 4px solid rgba(33, 150, 243, 0.65);
    padding-left: 16px !important;
    font-weight: 600;
}

    /* Active text only (normal text stays default) */
    .app-navmenu .mud-nav-link.active .mud-nav-link-text {
        color: var(--mud-palette-text-primary) !important;
    }

/* Icon hover scale */
.app-navmenu .mud-nav-link-icon .mud-icon-root,
.app-navmenu .mud-nav-group-icon .mud-icon-root {
    transition: transform .18s ease, filter .18s ease;
}

.app-navmenu .mud-nav-link:hover .mud-nav-link-icon .mud-icon-root {
    transform: scale(1.12);
}

/* ACTIVE ICON GLOW (only active link) */
.app-navmenu .mud-nav-link.active .mud-nav-link-icon .mud-icon-root {
    filter: drop-shadow(0px 0px 6px rgba(33, 150, 243, 0.35));
    transform: scale(1.12);
}

/* =========================
   ICON COLORS (ONLY ICON)
   ========================= */

.menu-master .mud-icon-root,
.menu-master .mud-nav-link-icon svg,
.menu-master .mud-nav-group-icon svg {
    color: #6C63FF !important;
    fill: #6C63FF !important;
}

.menu-timetable .mud-icon-root,
.menu-timetable .mud-nav-link-icon svg,
.menu-timetable .mud-nav-group-icon svg {
    color: #00BFA6 !important;
    fill: #00BFA6 !important;
}

.menu-dashboard .mud-icon-root,
.menu-dashboard .mud-nav-link-icon svg,
.menu-dashboard .mud-nav-group-icon svg {
    color: #1E88E5 !important;
    fill: #1E88E5 !important;
}

.menu-syllabus .mud-icon-root,
.menu-syllabus .mud-nav-link-icon svg,
.menu-syllabus .mud-nav-group-icon svg {
    color: #FB8C00 !important;
    fill: #FB8C00 !important;
}

.menu-attendance .mud-icon-root,
.menu-attendance .mud-nav-link-icon svg,
.menu-attendance .mud-nav-group-icon svg {
    color: #43A047 !important;
    fill: #43A047 !important;
}

.menu-transaction .mud-icon-root,
.menu-transaction .mud-nav-link-icon svg,
.menu-transaction .mud-nav-group-icon svg {
    color: #E53935 !important;
    fill: #E53935 !important;
}

.menu-exam .mud-icon-root,
.menu-exam .mud-nav-link-icon svg,
.menu-exam .mud-nav-group-icon svg {
    color: #8E24AA !important;
    fill: #8E24AA !important;
}

.menu-fee .mud-icon-root,
.menu-fee .mud-nav-link-icon svg,
.menu-fee .mud-nav-group-icon svg {
    color: #FDD835 !important;
    fill: #FDD835 !important;
}

.menu-transport .mud-icon-root,
.menu-transport .mud-nav-link-icon svg,
.menu-transport .mud-nav-group-icon svg {
    color: #3949AB !important;
    fill: #3949AB !important;
}

.menu-student .mud-icon-root,
.menu-student .mud-nav-link-icon svg,
.menu-student .mud-nav-group-icon svg {
    color: #00897B !important;
    fill: #00897B !important;
}

.menu-holiday .mud-icon-root,
.menu-holiday .mud-nav-link-icon svg,
.menu-holiday .mud-nav-group-icon svg {
    color: #F4511E !important;
    fill: #F4511E !important;
}

.menu-homework .mud-icon-root,
.menu-homework .mud-nav-link-icon svg,
.menu-homework .mud-nav-group-icon svg {
    color: #5E35B1 !important;
    fill: #5E35B1 !important;
}

.menu-remarks .mud-icon-root,
.menu-remarks .mud-nav-link-icon svg,
.menu-remarks .mud-nav-group-icon svg {
    color: #546E7A !important;
    fill: #546E7A !important;
}

.menu-inventory .mud-icon-root,
.menu-inventory .mud-nav-link-icon svg,
.menu-inventory .mud-nav-group-icon svg {
    color: #2E7D32 !important;
    fill: #2E7D32 !important;
}

.menu-expense .mud-icon-root,
.menu-expense .mud-nav-link-icon svg,
.menu-expense .mud-nav-group-icon svg {
    color: #C62828 !important;
    fill: #C62828 !important;
}