/**
 * ImmigraSuite Admin - HR Module
 * HR Settings, Salary, Payroll, Self-service
 */

/* ==========================================================================
   HR Module Styles
   ========================================================================== */

/* Quick Actions */
.is-hr-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px 20px;
}

.is-hr-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background-color: rgb(249 250 251);
    border-radius: 8px;
    color: rgb(17 24 39);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.15s ease;
}

.is-hr-action-btn:hover {
    background-color: rgb(243 244 246);
}

.dark .is-hr-action-btn {
    background-color: rgb(55 65 81);
    color: rgb(243 244 246);
}

.dark .is-hr-action-btn:hover {
    background-color: rgb(75 85 99);
}

/* Empty State */
.is-hr-empty {
    text-align: center;
    color: rgb(156 163 175);
    padding: 24px;
    font-size: 14px;
}

/* ==========================================================================
   HR Settings - Leave Quotas Grid
   ========================================================================== */

.is-leave-quotas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.is-leave-quota-card {
    display: block;
    padding: 16px;
    background-color: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.is-leave-quota-card:hover {
    background-color: rgb(243 244 246);
    border-color: rgb(209 213 219);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dark .is-leave-quota-card {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.dark .is-leave-quota-card:hover {
    background-color: rgb(55 65 81);
    border-color: rgb(75 85 99);
}

.is-leave-quota-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.is-leave-quota-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.is-leave-quota-name {
    font-weight: 600;
    font-size: 15px;
    color: rgb(17 24 39);
    flex-grow: 1;
}

.dark .is-leave-quota-name {
    color: rgb(243 244 246);
}

.is-leave-quota-code {
    font-size: 11px;
    font-weight: 600;
    color: rgb(107 114 128);
    background-color: rgb(229 231 235);
    padding: 2px 8px;
    border-radius: 4px;
}

.dark .is-leave-quota-code {
    background-color: rgb(55 65 81);
    color: rgb(156 163 175);
}

.is-leave-quota-days {
    font-size: 24px;
    font-weight: 700;
    color: rgb(79 70 229);
    margin-bottom: 12px;
}

.dark .is-leave-quota-days {
    color: rgb(129 140 248);
}

.is-leave-quota-features {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.is-leave-quota-feature {
    font-size: 12px;
    color: rgb(107 114 128);
}

.dark .is-leave-quota-feature {
    color: rgb(156 163 175);
}

/* Inherited leave quota card styling */
.is-leave-quota-inherited {
    border-style: dashed;
    border-color: rgb(251 191 36);
    background-color: rgb(254 252 232);
    cursor: default;
}

.is-leave-quota-inherited:hover {
    transform: none;
    box-shadow: none;
    background-color: rgb(254 252 232);
    border-color: rgb(251 191 36);
}

.dark .is-leave-quota-inherited {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: rgb(180 83 9);
}

.dark .is-leave-quota-inherited:hover {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: rgb(180 83 9);
}

/* Leave Actions Section */
.is-leave-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgb(229 231 235);
}

.dark .is-leave-actions {
    border-top-color: rgb(55 65 81);
}

.is-leave-actions-hint {
    font-size: 13px;
    color: rgb(107 114 128);
}

.dark .is-leave-actions-hint {
    color: rgb(156 163 175);
}

/* Button Styles */
.is-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.is-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.is-btn:active {
    transform: translateY(0);
}

.is-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.is-btn-lg {
    padding: 12px 24px;
    font-size: 15px;
}

.is-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* Primary Button */
.is-btn-primary {
    background: linear-gradient(135deg, rgb(234 88 12) 0%, rgb(249 115 22) 100%);
    color: white;
}

.is-btn-primary:hover {
    background: linear-gradient(135deg, rgb(194 65 12) 0%, rgb(234 88 12) 100%);
    color: white;
}

.dark .is-btn-primary {
    background: linear-gradient(135deg, rgb(249 115 22) 0%, rgb(251 146 60) 100%);
}

.dark .is-btn-primary:hover {
    background: linear-gradient(135deg, rgb(234 88 12) 0%, rgb(249 115 22) 100%);
}

/* Warning Button */
.is-btn-warning {
    background: linear-gradient(135deg, rgb(245 158 11) 0%, rgb(251 191 36) 100%);
    color: white;
}

.is-btn-warning:hover {
    background: linear-gradient(135deg, rgb(217 119 6) 0%, rgb(245 158 11) 100%);
    color: white;
}

.dark .is-btn-warning {
    background: linear-gradient(135deg, rgb(251 191 36) 0%, rgb(252 211 77) 100%);
    color: rgb(120 53 15);
}

.dark .is-btn-warning:hover {
    background: linear-gradient(135deg, rgb(245 158 11) 0%, rgb(251 191 36) 100%);
}

/* Secondary Button */
.is-btn-secondary {
    background: rgb(249 250 251);
    color: rgb(55 65 81);
    border: 1px solid rgb(209 213 219);
}

.is-btn-secondary:hover {
    background: rgb(243 244 246);
    border-color: rgb(156 163 175);
}

.dark .is-btn-secondary {
    background: rgb(55 65 81);
    color: rgb(229 231 235);
    border-color: rgb(75 85 99);
}

.dark .is-btn-secondary:hover {
    background: rgb(75 85 99);
    border-color: rgb(107 114 128);
}

/* ==========================================================================
   HR Settings - Tax Configuration Summary
   ========================================================================== */

.is-tax-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.is-tax-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background-color: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    border-radius: 12px;
}

.dark .is-tax-summary-card {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.is-tax-regime-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 9999px;
}

.is-tax-regime-new {
    background-color: rgb(220 252 231);
    color: rgb(22 163 74);
}

.dark .is-tax-regime-new {
    background-color: rgba(22, 163, 74, 0.2);
    color: rgb(74 222 128);
}

.is-tax-regime-old {
    background-color: rgb(254 243 199);
    color: rgb(180 83 9);
}

.dark .is-tax-regime-old {
    background-color: rgba(180, 83, 9, 0.2);
    color: rgb(251 191 36);
}

.is-tax-slab-count {
    font-size: 14px;
    color: rgb(107 114 128);
}

.dark .is-tax-slab-count {
    color: rgb(156 163 175);
}

/* ==========================================================================
   Salary Components Resource
   ========================================================================== */

.is-salary-type-earning {
    background-color: rgb(220 252 231);
    color: rgb(22 163 74);
}

.is-salary-type-deduction {
    background-color: rgb(254 226 226);
    color: rgb(220 38 38);
}

.is-salary-type-employer {
    background-color: rgb(219 234 254);
    color: rgb(37 99 235);
}

/* ==========================================================================
   Payroll Report Styles
   ========================================================================== */

.is-payroll-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.is-payroll-stat {
    padding: 16px;
    background-color: rgb(249 250 251);
    border-radius: 12px;
    text-align: center;
}

.dark .is-payroll-stat {
    background-color: rgb(31 41 55);
}

.is-payroll-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: rgb(17 24 39);
}

.dark .is-payroll-stat-value {
    color: rgb(243 244 246);
}

.is-payroll-stat-label {
    font-size: 12px;
    color: rgb(107 114 128);
    margin-top: 4px;
}

.dark .is-payroll-stat-label {
    color: rgb(156 163 175);
}

.is-payroll-breakdown {
    border: 1px solid rgb(229 231 235);
    border-radius: 12px;
    overflow: hidden;
}

.dark .is-payroll-breakdown {
    border-color: rgb(55 65 81);
}

.is-payroll-section {
    padding: 16px 20px;
    border-bottom: 1px solid rgb(229 231 235);
}

.dark .is-payroll-section {
    border-bottom-color: rgb(55 65 81);
}

.is-payroll-section:last-child {
    border-bottom: none;
}

.is-payroll-section-title {
    font-weight: 600;
    font-size: 14px;
    color: rgb(17 24 39);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark .is-payroll-section-title {
    color: rgb(243 244 246);
}

.is-payroll-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
}

.is-payroll-item-name {
    color: rgb(75 85 99);
}

.dark .is-payroll-item-name {
    color: rgb(156 163 175);
}

.is-payroll-item-amount {
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .is-payroll-item-amount {
    color: rgb(243 244 246);
}

.is-payroll-item-amount.is-earning {
    color: rgb(22 163 74);
}

.is-payroll-item-amount.is-deduction {
    color: rgb(220 38 38);
}

.is-payroll-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background-color: rgb(249 250 251);
    font-weight: 600;
}

.dark .is-payroll-total {
    background-color: rgb(31 41 55);
}

.is-payroll-net {
    font-size: 18px;
    color: rgb(22 163 74);
}

.dark .is-payroll-net {
    color: rgb(74 222 128);
}

/* ==========================================================================
   Tabs Carousel with Arrow Navigation
   ========================================================================== */

/* Navigation wrapper - the bordered container with arrows and tabs */
.is-tabs-nav-wrapper {
    display: flex;
    align-items: center;
    background-color: rgb(255 255 255);
    border: 1px solid rgb(229 231 235);
    border-radius: 12px;
    padding: 6px 10px;
    gap: 10px;
    margin-bottom: 0;
}

.dark .is-tabs-nav-wrapper {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

/* Scroll area - contains the tablist */
.is-tabs-scroll-area {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Arrow buttons */
.is-tabs-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background-color: rgb(243 244 246);
    border: 1px solid rgb(229 231 235);
    border-radius: 8px;
    color: rgb(107 114 128);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.is-tabs-arrow:hover {
    background-color: rgb(229 231 235);
    color: rgb(55 65 81);
    border-color: rgb(209 213 219);
}

.is-tabs-arrow:active {
    background-color: rgb(209 213 219);
}

.is-tabs-arrow.is-hidden {
    opacity: 0.3;
    pointer-events: none;
}

.is-tabs-arrow svg {
    width: 16px;
    height: 16px;
}

.dark .is-tabs-arrow {
    background-color: rgb(55 65 81);
    border-color: rgb(75 85 99);
    color: rgb(156 163 175);
}

.dark .is-tabs-arrow:hover {
    background-color: rgb(75 85 99);
    color: rgb(209 213 219);
    border-color: rgb(107 114 128);
}

.dark .is-tabs-arrow:active {
    background-color: rgb(107 114 128);
}

/* Override Filament's fi-tabs border-radius */
.is-tabs-nav-wrapper .fi-tabs,
.is-tabs-nav-wrapper nav.fi-tabs,
.is-tabs-scrollable .fi-tabs,
.is-tabs-scrollable nav.fi-tabs {
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* The scrolling tablist inside nav wrapper */
.is-tabs-nav-wrapper [role="tablist"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    gap: 4px !important;
}

.is-tabs-nav-wrapper [role="tablist"]::-webkit-scrollbar {
    display: none;
}

/* Tab buttons inside nav wrapper */
.is-tabs-nav-wrapper [role="tab"] {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease;
}

/* Default scrollable tabs (without arrows) */
.is-tabs-scrollable [role="tablist"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 4px !important;
    margin: 0 !important;
    gap: 4px !important;
}

.is-tabs-scrollable [role="tablist"]::-webkit-scrollbar {
    display: none;
}

.is-tabs-scrollable [role="tab"] {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ==========================================================================
   Salary Components Tab Styles
   ========================================================================== */

.is-salary-components-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.is-salary-type-section {
    background-color: rgb(255 255 255);
    border: 1px solid rgb(229 231 235);
    border-radius: 12px;
    overflow: hidden;
}

.dark .is-salary-type-section {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.is-salary-type-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background-color: rgb(249 250 251);
    border-bottom: 1px solid rgb(229 231 235);
    font-size: 15px;
    font-weight: 600;
    color: rgb(17 24 39);
    margin: 0;
}

.dark .is-salary-type-header {
    background-color: rgb(55 65 81);
    border-bottom-color: rgb(75 85 99);
    color: rgb(243 244 246);
}

.is-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    padding: 2px 6px;
    background-color: rgb(243 244 246);
    border-radius: 4px;
    color: rgb(79 70 229);
}

.dark .is-code {
    background-color: rgb(55 65 81);
    color: rgb(129 140 248);
}

.is-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    transition: background-color 0.15s ease;
    text-decoration: none;
}

.is-btn-icon:hover {
    background-color: rgb(243 244 246);
}

.dark .is-btn-icon:hover {
    background-color: rgb(55 65 81);
}

/* ==========================================================================
   Tax Slabs Tab Styles
   ========================================================================== */

.is-tax-slabs-header {
    margin-bottom: 16px;
}

.is-tax-regime-card {
    background-color: rgb(255 255 255);
    border: 1px solid rgb(229 231 235);
    border-radius: 12px;
    padding: 16px;
}

.dark .is-tax-regime-card {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.is-tax-regime-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgb(229 231 235);
}

.dark .is-tax-regime-header {
    border-bottom-color: rgb(55 65 81);
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.is-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.is-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.is-empty-text {
    font-size: 15px;
    color: rgb(107 114 128);
    margin: 0;
}

.dark .is-empty-text {
    color: rgb(156 163 175);
}

.is-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.is-btn-primary {
    background-color: rgb(234 88 12);
    color: white;
}

.is-btn-primary:hover {
    background-color: rgb(194 65 12);
}

/* ==========================================================================
   Compact Table Styles
   ========================================================================== */

.is-table-compact th,
.is-table-compact td {
    padding: 10px 12px;
    font-size: 13px;
}

.is-table-compact th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   Salary Breakdown Styles
   ========================================================================== */

.is-salary-breakdown {
    background-color: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.dark .is-salary-breakdown {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.is-salary-breakdown-header {
    font-size: 16px;
    font-weight: 600;
    color: rgb(17 24 39);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgb(229 231 235);
}

.dark .is-salary-breakdown-header {
    color: rgb(243 244 246);
    border-bottom-color: rgb(55 65 81);
}

.is-salary-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgb(229 231 235);
}

.dark .is-salary-section {
    border-bottom-color: rgb(55 65 81);
}

.is-salary-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.is-salary-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.is-salary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.is-salary-label {
    font-size: 14px;
    color: rgb(75 85 99);
}

.dark .is-salary-label {
    color: rgb(156 163 175);
}

.is-salary-value {
    font-size: 14px;
    font-weight: 500;
    color: rgb(17 24 39);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dark .is-salary-value {
    color: rgb(243 244 246);
}

.is-salary-subtotal {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgb(209 213 219);
}

.dark .is-salary-subtotal {
    border-top-color: rgb(75 85 99);
}

.is-salary-subtotal .is-salary-label,
.is-salary-subtotal .is-salary-value {
    font-weight: 600;
}

.is-salary-net {
    background-color: rgb(243 244 246);
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
    border: none;
}

.dark .is-salary-net {
    background-color: rgb(55 65 81);
}

.is-salary-total .is-salary-label,
.is-salary-total .is-salary-value {
    font-size: 16px;
    font-weight: 700;
    color: rgb(17 24 39);
}

.dark .is-salary-total .is-salary-label,
.dark .is-salary-total .is-salary-value {
    color: rgb(243 244 246);
}

/* ==========================================================================
   Salary Grades / Packages
   ========================================================================== */

.is-salary-grades-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.is-salary-grade-card {
    background-color: rgb(255 255 255);
    border: 1px solid rgb(229 231 235);
    border-radius: 12px;
    padding: 20px;
    transition: box-shadow 0.2s ease;
}

.dark .is-salary-grade-card {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.is-salary-grade-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dark .is-salary-grade-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.is-salary-grade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.is-salary-grade-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.is-salary-grade-actions {
    display: flex;
    gap: 8px;
}

.is-salary-grade-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid rgb(229 231 235);
    border-bottom: 1px solid rgb(229 231 235);
    margin: 12px 0;
}

.dark .is-salary-grade-stats {
    border-color: rgb(55 65 81);
}

.is-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.is-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(107 114 128);
}

.dark .is-stat-label {
    color: rgb(156 163 175);
}

.is-stat-value {
    font-size: 16px;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .is-stat-value {
    color: rgb(243 244 246);
}

.is-salary-grade-components {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.is-component-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.is-component-group-label {
    font-size: 12px;
    font-weight: 600;
}

.is-component-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.is-component-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background-color: rgb(243 244 246);
    border-radius: 6px;
    font-size: 12px;
    color: rgb(55 65 81);
}

.dark .is-component-tag {
    background-color: rgb(55 65 81);
    color: rgb(209 213 219);
}

.is-component-tag.is-text-gray {
    background-color: transparent;
    color: rgb(156 163 175);
    font-style: italic;
}

.dark .is-component-tag.is-text-gray {
    color: rgb(107 114 128);
}

/* ==========================================================================
   CTC Allocation Summary (Salary Grade Form)
   ========================================================================== */

.is-ctc-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Empty State */
.is-ctc-empty {
    padding: 16px;
    background-color: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    border-radius: 8px;
}

.dark .is-ctc-empty {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.is-ctc-empty-content {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgb(107 114 128);
}

.dark .is-ctc-empty-content {
    color: rgb(156 163 175);
}

.is-ctc-empty-content span {
    font-size: 14px;
}

/* Status Card (Summary Bar) */
.is-ctc-status {
    padding: 16px;
    border: 1px solid;
    border-radius: 8px;
}

.is-ctc-status-success {
    background-color: rgb(240 253 244);
    border-color: rgb(187 247 208);
}

.dark .is-ctc-status-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.is-ctc-status-warning {
    background-color: rgb(254 252 232);
    border-color: rgb(253 224 71);
}

.dark .is-ctc-status-warning {
    background-color: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.3);
}

.is-ctc-status-danger {
    background-color: rgb(254 242 242);
    border-color: rgb(254 202 202);
}

.dark .is-ctc-status-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.is-ctc-status-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.is-ctc-status-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.is-ctc-status-text {
    font-weight: 600;
}

.is-ctc-status-text-success {
    color: rgb(21 128 61);
}

.dark .is-ctc-status-text-success {
    color: rgb(74 222 128);
}

.is-ctc-status-text-warning {
    color: rgb(161 98 7);
}

.dark .is-ctc-status-text-warning {
    color: rgb(250 204 21);
}

.is-ctc-status-text-danger {
    color: rgb(185 28 28);
}

.dark .is-ctc-status-text-danger {
    color: rgb(248 113 113);
}

.is-ctc-status-remaining {
    font-size: 14px;
    color: rgb(75 85 99);
}

.dark .is-ctc-status-remaining {
    color: rgb(156 163 175);
}

/* Grid for Component Cards */
.is-ctc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .is-ctc-grid {
        grid-template-columns: 1fr;
    }
}

/* Component Cards */
.is-ctc-card {
    padding: 12px;
    border: 1px solid;
    border-radius: 8px;
}

.is-ctc-card-earnings {
    background-color: rgb(240 253 244);
    border-color: rgb(187 247 208);
}

.dark .is-ctc-card-earnings {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.is-ctc-card-deductions {
    background-color: rgb(254 242 242);
    border-color: rgb(254 202 202);
}

.dark .is-ctc-card-deductions {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.is-ctc-card-fixed {
    background-color: rgb(249 250 251);
    border-color: rgb(229 231 235);
}

.dark .is-ctc-card-fixed {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.is-ctc-card-auto {
    background-color: rgb(239 246 255);
    border-color: rgb(191 219 254);
}

.dark .is-ctc-card-auto {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Card Header/Label */
.is-ctc-card-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.is-ctc-card-label-earnings {
    color: rgb(21 128 61);
}

.dark .is-ctc-card-label-earnings {
    color: rgb(74 222 128);
}

.is-ctc-card-label-deductions {
    color: rgb(185 28 28);
}

.dark .is-ctc-card-label-deductions {
    color: rgb(248 113 113);
}

.is-ctc-card-label-fixed {
    color: rgb(55 65 81);
}

.dark .is-ctc-card-label-fixed {
    color: rgb(209 213 219);
}

.is-ctc-card-label-auto {
    color: rgb(29 78 216);
}

.dark .is-ctc-card-label-auto {
    color: rgb(96 165 250);
}

/* Card Row */
.is-ctc-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 4px 0;
    border-bottom: 1px solid;
}

.is-ctc-row:last-child {
    border-bottom: none;
}

.is-ctc-row-earnings {
    border-color: rgb(220 252 231);
}

.dark .is-ctc-row-earnings {
    border-color: rgba(34, 197, 94, 0.2);
}

.is-ctc-row-deductions {
    border-color: rgb(254 226 226);
}

.dark .is-ctc-row-deductions {
    border-color: rgba(239, 68, 68, 0.2);
}

.is-ctc-row-fixed {
    border-color: rgb(243 244 246);
}

.dark .is-ctc-row-fixed {
    border-color: rgb(55 65 81);
}

.is-ctc-row-auto {
    border-color: transparent;
}

/* Row Content */
.is-ctc-code {
    color: rgb(55 65 81);
}

.dark .is-ctc-code {
    color: rgb(209 213 219);
}

.is-ctc-value {
    font-weight: 500;
}

.is-ctc-value-earnings {
    color: rgb(21 128 61);
}

.dark .is-ctc-value-earnings {
    color: rgb(74 222 128);
}

.is-ctc-value-deductions {
    color: rgb(185 28 28);
}

.dark .is-ctc-value-deductions {
    color: rgb(248 113 113);
}

.is-ctc-value-fixed {
    color: rgb(55 65 81);
}

.dark .is-ctc-value-fixed {
    color: rgb(209 213 219);
}

.is-ctc-value-auto {
    color: rgb(29 78 216);
}

.dark .is-ctc-value-auto {
    color: rgb(96 165 250);
}

.is-ctc-basis {
    font-size: 12px;
    color: rgb(107 114 128);
    margin-left: 4px;
}

.dark .is-ctc-basis {
    color: rgb(156 163 175);
}

/* Icon */
.is-ctc-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.is-ctc-icon-success {
    color: rgb(34 197 94);
}

.dark .is-ctc-icon-success {
    color: rgb(74 222 128);
}

.is-ctc-icon-warning {
    color: rgb(234 179 8);
}

.dark .is-ctc-icon-warning {
    color: rgb(250 204 21);
}

.is-ctc-icon-danger {
    color: rgb(239 68 68);
}

.dark .is-ctc-icon-danger {
    color: rgb(248 113 113);
}

/* Auto Balance Info Box (in repeater) */
.is-auto-balance-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background-color: rgb(240 253 244);
    border: 1px solid rgb(187 247 208);
    border-radius: 8px;
}

.dark .is-auto-balance-info {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.is-auto-balance-info svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: rgb(34 197 94);
}

.dark .is-auto-balance-info svg {
    color: rgb(74 222 128);
}

.is-auto-balance-info span {
    color: rgb(21 128 61);
    font-size: 14px;
    font-weight: 500;
}

.dark .is-auto-balance-info span {
    color: rgb(74 222 128);
}

/* ==========================================================================
   Self Service - Leave Balance Cards
   ========================================================================== */

.is-leave-balances {
    margin-bottom: 24px;
}

.is-leave-balances-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.is-leave-balances-title {
    font-size: 18px;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .is-leave-balances-title {
    color: rgb(243 244 246);
}

.is-leave-balances-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

@media (min-width: 768px) {
    .is-leave-balances-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (min-width: 1024px) {
    .is-leave-balances-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

.is-leave-balance-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background-color: white;
    border: 1px solid rgb(229 231 235);
    border-radius: 12px;
    border-left: 4px solid rgb(107 114 128);
    transition: all 0.2s ease;
}

.is-leave-balance-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.dark .is-leave-balance-card {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.is-leave-balance-name {
    font-size: 13px;
    font-weight: 500;
    color: rgb(107 114 128);
    margin-bottom: 8px;
    line-height: 1.3;
}

.dark .is-leave-balance-name {
    color: rgb(156 163 175);
}

.is-leave-balance-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
}

.is-leave-balance-available {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.is-leave-balance-total {
    font-size: 14px;
    font-weight: 500;
    color: rgb(156 163 175);
}

.dark .is-leave-balance-total {
    color: rgb(107 114 128);
}

.is-leave-balance-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: rgb(107 114 128);
}

.dark .is-leave-balance-meta {
    color: rgb(156 163 175);
}

.is-leave-balance-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.is-leave-balance-meta-label {
    color: rgb(156 163 175);
}

.dark .is-leave-balance-meta-label {
    color: rgb(107 114 128);
}

.is-leave-balance-meta-value {
    font-weight: 600;
}

/* Leave Balance Progress Bar */
.is-leave-balance-progress {
    margin-top: 10px;
    height: 4px;
    background-color: rgb(229 231 235);
    border-radius: 2px;
    overflow: hidden;
}

.dark .is-leave-balance-progress {
    background-color: rgb(55 65 81);
}

.is-leave-balance-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Status colors for balance cards - used for border-left-color and text */
.is-leave-balance-card.is-status-healthy {
    border-left-color: rgb(34 197 94);
}

.is-leave-balance-card.is-status-warning {
    border-left-color: rgb(234 179 8);
}

.is-leave-balance-card.is-status-low {
    border-left-color: rgb(249 115 22);
}

.is-leave-balance-card.is-status-empty {
    border-left-color: rgb(239 68 68);
}

.is-leave-balance-card.is-status-healthy .is-leave-balance-available {
    color: rgb(22 163 74);
}

.is-leave-balance-card.is-status-warning .is-leave-balance-available {
    color: rgb(202 138 4);
}

.is-leave-balance-card.is-status-low .is-leave-balance-available {
    color: rgb(234 88 12);
}

.is-leave-balance-card.is-status-empty .is-leave-balance-available {
    color: rgb(220 38 38);
}

.dark .is-leave-balance-card.is-status-healthy .is-leave-balance-available {
    color: rgb(74 222 128);
}

.dark .is-leave-balance-card.is-status-warning .is-leave-balance-available {
    color: rgb(250 204 21);
}

.dark .is-leave-balance-card.is-status-low .is-leave-balance-available {
    color: rgb(251 146 60);
}

.dark .is-leave-balance-card.is-status-empty .is-leave-balance-available {
    color: rgb(248 113 113);
}

/* Progress bar colors */
.is-leave-balance-card.is-status-healthy .is-leave-balance-progress-bar {
    background-color: rgb(34 197 94);
}

.is-leave-balance-card.is-status-warning .is-leave-balance-progress-bar {
    background-color: rgb(234 179 8);
}

.is-leave-balance-card.is-status-low .is-leave-balance-progress-bar {
    background-color: rgb(249 115 22);
}

.is-leave-balance-card.is-status-empty .is-leave-balance-progress-bar {
    background-color: rgb(239 68 68);
}

/* Empty state for no leave balances */
.is-leave-balances-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background-color: rgb(249 250 251);
    border: 1px dashed rgb(209 213 219);
    border-radius: 12px;
    text-align: center;
}

.dark .is-leave-balances-empty {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.is-leave-balances-empty-icon {
    width: 48px;
    height: 48px;
    color: rgb(156 163 175);
    margin-bottom: 12px;
}

.dark .is-leave-balances-empty-icon {
    color: rgb(107 114 128);
}

.is-leave-balances-empty-text {
    font-size: 14px;
    color: rgb(107 114 128);
}

.dark .is-leave-balances-empty-text {
    color: rgb(156 163 175);
}

/* Section Header for Leave History */
.is-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgb(229 231 235);
}

.dark .is-section-header {
    border-bottom-color: rgb(55 65 81);
}

.is-section-header-icon {
    width: 20px;
    height: 20px;
    color: rgb(107 114 128);
}

.dark .is-section-header-icon {
    color: rgb(156 163 175);
}

.is-section-header-title {
    font-size: 16px;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .is-section-header-title {
    color: rgb(243 244 246);
}

/* ==========================================================================
   My Bonuses — intro / glossary banner
   ========================================================================== */
.is-bonus-intro {
    background: linear-gradient(135deg, rgb(238 242 255) 0%, rgb(243 244 246) 100%);
    border: 1px solid rgb(199 210 254);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 32px;
}
.is-bonus-intro-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.is-bonus-intro-icon {
    width: 20px;
    height: 20px;
    color: rgb(79 70 229);
    flex-shrink: 0;
}
.is-bonus-intro-title {
    font-size: 13px;
    font-weight: 600;
    color: rgb(55 48 163);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.is-bonus-intro-glossary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 20px;
    margin: 0;
}
.is-bonus-intro-glossary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.is-bonus-intro-glossary dt {
    font-size: 12px;
    font-weight: 600;
    color: rgb(55 48 163);
}
.is-bonus-intro-glossary dd {
    font-size: 12px;
    color: rgb(75 85 99);
    margin: 0;
    line-height: 1.4;
}

.dark .is-bonus-intro {
    background: linear-gradient(135deg, rgb(30 27 75) 0%, rgb(17 24 39) 100%);
    border-color: rgb(67 56 202);
}
.dark .is-bonus-intro-icon { color: rgb(165 180 252); }
.dark .is-bonus-intro-title { color: rgb(199 210 254); }
.dark .is-bonus-intro-glossary dt { color: rgb(199 210 254); }
.dark .is-bonus-intro-glossary dd { color: rgb(209 213 219); }

/* ==========================================================================

/* ---------------------------------------------------------------------------
   Attendance muster — the editable state cell
   ---------------------------------------------------------------------------
   The muster sheet replaced a Filament table, which took every row action with
   it (Jyoti, 2026-09-20). The state cell is now a button onto the same editor
   the Attendance Calendar uses.

   The pencil sits at low opacity rather than appearing on hover: a pencil that
   is only visible once you are already hovering is a pencil nobody discovers,
   and discovery was the whole point of adding it.
--------------------------------------------------------------------------- */
.is-muster-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    padding: 1px 2px;
    border-radius: 4px;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid transparent;
}

.is-muster-cell-btn {
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.is-muster-cell-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.18);
}

.is-muster-cell-btn:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 1px;
}

.is-muster-cell-locked {
    cursor: not-allowed;
    opacity: 0.55;
}

.is-muster-pencil {
    width: 9px;
    height: 9px;
    flex: none;
    opacity: 0.35;
    transition: opacity 120ms ease;
}

.is-muster-cell-btn:hover .is-muster-pencil {
    opacity: 0.95;
}

.dark .is-muster-cell-btn:hover {
    background: rgba(248, 250, 252, 0.10);
    border-color: rgba(248, 250, 252, 0.22);
}

.dark .is-muster-pencil {
    opacity: 0.45;
}

/* ---------------------------------------------------------------------------
   Muster — a day that was never clocked out
   ---------------------------------------------------------------------------
   1,359 rows carry a clock-in and no clock-out and read as ordinary full
   days. They still count as they did for pay — visible first, money later —
   but they must not look finished (Jyoti item #2, Ajay 26 Sep 2026).
--------------------------------------------------------------------------- */
.is-muster-openpunch {
    display: inline-block;
    margin-left: 2px;
    padding: 0 3px;
    border-radius: 3px;
    background: #fef3c7;
    color: #b45309;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    /* The cell's own tooltip explains it; the marker must not intercept the
       hover and show "click to edit" instead (Ajay, 26 Sep 2026). */
    pointer-events: none;
}

.dark .is-muster-openpunch {
    background: rgba(180, 83, 9, 0.28);
    color: #fcd34d;
}

/* ---------------------------------------------------------------------------
   Attendance calendar — a day that was never clocked out
   ---------------------------------------------------------------------------
   Same statement as the muster's "!", in the shape this grid can carry: one
   icon per day, so the marker is a corner flag rather than a character. The
   day still counts as it did for pay; it simply stops looking finished.
--------------------------------------------------------------------------- */
.is-attendance-openpunch {
    position: relative;
}

.is-attendance-openpunch::after {
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    width: 0;
    height: 0;
    border-top: 6px solid #d97706;
    border-left: 6px solid transparent;
    border-top-right-radius: 3px;
    pointer-events: none;
}

.dark .is-attendance-openpunch::after {
    border-top-color: #fbbf24;
}

/* ==========================================================================
   Payroll Generation — the four overview cards
   --------------------------------------------------------------------------
   These were written with inline colours and no dark variant, so on a dark
   theme the Payroll Period card rendered as a white box (the Filament form
   inside it brings its own light surface) while the muted labels in the
   other three — #64748b on a dark background — simply disappeared. Growmore
   runs dark mode daily. (Ajay, 29 Sep 2026: "I know this is not from this
   session. It is older one. But I request lets fix this also".)

   Classes rather than more inline styles: an inline colour cannot carry a
   `.dark` variant, which is how this happened in the first place.
   ========================================================================== */

.is-payroll-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px;
}

.dark .is-payroll-card {
    background: rgb(30 41 59);
    border-color: rgb(51 65 85);
}

/* The card's own heading — "⚙️ Payroll Period", "📅 Calendar — …" */
.is-payroll-card-title {
    font-size: 11px;
    font-weight: 600;
    color: rgb(100 116 139);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.dark .is-payroll-card-title { color: rgb(148 163 184); }

/* Body text inside a card: the readable default. */
.is-payroll-card-body { color: rgb(15 23 42); }
.dark .is-payroll-card-body { color: rgb(226 232 240); }

/* Secondary rows — counts, pattern codes, "attendance coverage". These are
   the ones that vanished outright. */
.is-payroll-card-muted { color: rgb(100 116 139); }
.dark .is-payroll-card-muted { color: rgb(148 163 184); }

/* Rules dividing a card into sections. */
.is-payroll-card-rule { border-top: 1px solid #e2e8f0; margin-top: 10px; padding-top: 10px; }
.dark .is-payroll-card-rule { border-top-color: rgb(51 65 85); }

/* "Frozen this period" when any payslip is frozen. #0369a1 is legible on the
   light card and close to unreadable on the dark one. */
.is-payroll-card-accent { color: rgb(3 105 161); font-weight: 600; }
.dark .is-payroll-card-accent { color: rgb(125 211 252); }