/**
 * ImmigraSuite Admin - Documents & Profiles
 * Document styles, Payslips, Profile pages
 */

/* ==========================================================================
   Document / Payslip Styles
   ========================================================================== */

.is-document {
    background-color: white;
    border: 2px solid rgb(229 231 235);
    border-radius: 8px;
    overflow: hidden;
    padding: 16px;
}

.dark .is-document {
    background-color: rgb(17 24 39);
    border-color: rgb(55 65 81);
}

.is-document-header {
    padding: 24px;
    margin: -16px -16px 16px -16px;
    border-radius: 6px 6px 0 0;
}

.is-document-footer {
    padding: 24px;
    margin: 16px -16px -16px -16px;
    border-radius: 0 0 6px 6px;
}

.is-document-body {
    padding: 0;
}

/* ==========================================================================
   List Items with Borders
   ========================================================================== */

.is-list-item {
    padding: 8px 0;
    border-bottom: 1px solid rgb(229 231 235);
}

.is-list-item:last-child {
    border-bottom: none;
}

.is-list-item-green {
    padding: 8px 0;
    border-bottom: 1px solid rgb(187 247 208);
}

.is-list-item-red {
    padding: 8px 0;
    border-bottom: 1px solid rgb(254 202 202);
}

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

.dark .is-list-item-green {
    border-color: rgba(34, 197, 94, 0.3);
}

.dark .is-list-item-red {
    border-color: rgba(239, 68, 68, 0.3);
}

/* ==========================================================================
   Highlight Boxes (for totals)
   ========================================================================== */

.is-highlight-success {
    padding: 12px;
    background: rgba(22, 163, 74, 0.1);
    border-radius: 8px;
}

.is-highlight-danger {
    padding: 12px;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 8px;
}

.is-highlight-primary {
    padding: 12px;
    background: rgba(234, 88, 12, 0.1);
    border-radius: 8px;
}

.is-highlight-info {
    padding: 12px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
}

.dark .is-highlight-success { background: rgba(22, 163, 74, 0.2); }
.dark .is-highlight-danger { background: rgba(220, 38, 38, 0.2); }
.dark .is-highlight-primary { background: rgba(234, 88, 12, 0.2); }
.dark .is-highlight-info { background: rgba(59, 130, 246, 0.2); }

/* ==========================================================================
   Text Colors - Orange (for overtime)
   ========================================================================== */

.is-text-orange {
    color: rgb(234 88 12);
}

.is-icon-orange {
    color: rgb(234 88 12);
}

/* ==========================================================================
   Alignment & Centering
   ========================================================================== */

.is-items-center {
    align-items: center;
}

.is-justify-center {
    justify-content: center;
}

/* ==========================================================================
   Additional Padding
   ========================================================================== */

.is-p-6 { padding: 24px; }
.is-p-8 { padding: 32px; }
.is-p-12 { padding: 48px; }

.is-px-4 { padding-left: 16px; padding-right: 16px; }
.is-py-2 { padding-top: 8px; padding-bottom: 8px; }
.is-py-3 { padding-top: 12px; padding-bottom: 12px; }

/* ==========================================================================
   White Text (for gradient backgrounds)
   ========================================================================== */

.is-text-white {
    color: white;
}

.is-text-white-muted {
    color: rgba(255, 255, 255, 0.9);
}

.is-text-white-subtle {
    color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Section Label - Green variant
   ========================================================================== */

.is-section-label-green {
    font-size: 12px;
    font-weight: 600;
    color: rgb(22 101 52);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

/* ==========================================================================
   Responsive Grid for Self-Service Pages
   ========================================================================== */

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

    .is-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .is-grid-3 {
        grid-template-columns: 1fr;
    }

    .is-grid-2 {
        grid-template-columns: 1fr;
    }

    .is-document-header,
    .is-document-footer {
        padding: 16px;
    }
}

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

.is-table-container {
    overflow-x: auto;
}

.is-table {
    width: 100%;
    font-size: 14px;
    text-align: left;
    border-collapse: collapse;
}

.is-table-th {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(55 65 81);
    background-color: rgb(249 250 251);
    border-bottom: 2px solid rgb(229 231 235);
}

.dark .is-table-th {
    color: rgb(209 213 219);
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.is-table-td {
    padding: 12px 16px;
    color: rgb(17 24 39);
    border-bottom: 1px solid rgb(229 231 235);
}

.dark .is-table-td {
    color: rgb(243 244 246);
    border-color: rgb(55 65 81);
}

.is-table-row:hover {
    background-color: rgb(249 250 251);
}

.dark .is-table-row:hover {
    background-color: rgb(31 41 55);
}

.is-table-footer {
    background-color: rgb(249 250 251);
    border-top: 2px solid rgb(229 231 235);
}

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

/* ==========================================================================
   Badge Styles
   ========================================================================== */

.is-badge-department {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: rgb(55 65 81);
    background-color: rgb(243 244 246);
    border-radius: 9999px;
}

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

/* ==========================================================================
   Profile Page Styles
   ========================================================================== */

.is-profile-section {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    overflow: hidden;
}

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

.is-profile-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgb(229 231 235);
}

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

.is-profile-title {
    font-size: 18px;
    font-weight: 600;
    color: rgb(17 24 39);
    margin: 0 0 4px 0;
}

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

.is-profile-description {
    font-size: 14px;
    color: rgb(107 114 128);
    margin: 0;
}

.dark .is-profile-description {
    color: rgb(156 163 175);
}

.is-profile-body {
    padding: 24px;
}

.is-profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

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

.is-profile-form-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.is-profile-footer {
    padding: 16px 24px;
    background-color: rgb(249 250 251);
    border-top: 1px solid rgb(229 231 235);
}

.dark .is-profile-footer {
    background-color: rgb(17 24 39);
    border-color: rgb(55 65 81);
}

/* ==========================================================================
   Calendar Page Styles
   ========================================================================== */

.is-calendar-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 1024px) {
    .is-calendar-container {
        grid-template-columns: 3fr 1fr;
    }
}

.is-calendar-section {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

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

.is-calendar-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgb(229 231 235);
    font-size: 16px;
    font-weight: 600;
    color: rgb(17 24 39);
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.is-calendar-body {
    padding: 16px;
}

.is-calendar-table {
    width: 100%;
    border-collapse: collapse;
}

.is-calendar-th {
    padding: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: rgb(107 114 128);
    border: 1px solid rgb(229 231 235);
}

.dark .is-calendar-th {
    color: rgb(156 163 175);
    border-color: rgb(55 65 81);
}

.is-calendar-th-weekend {
    background-color: rgb(249 250 251);
}

.dark .is-calendar-th-weekend {
    background-color: rgba(31, 41, 55, 0.5);
}

.is-calendar-td {
    border: 1px solid rgb(229 231 235);
    padding: 4px;
    vertical-align: top;
    height: 96px;
    min-width: 100px;
}

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

.is-calendar-td-other-month {
    background-color: rgb(249 250 251);
}

.dark .is-calendar-td-other-month {
    background-color: rgba(31, 41, 55, 0.3);
}

.is-calendar-td-weekend {
    background-color: rgb(249 250 251);
}

.dark .is-calendar-td-weekend {
    background-color: rgba(31, 41, 55, 0.5);
}

.is-calendar-td-holiday {
    background-color: rgb(254 242 242);
}

.dark .is-calendar-td-holiday {
    background-color: rgba(127, 29, 29, 0.2);
}

.is-calendar-td-today {
    box-shadow: inset 0 0 0 2px rgb(234 179 8);
}

.is-calendar-day-number {
    font-size: 14px;
    font-weight: 500;
    color: rgb(17 24 39);
}

.dark .is-calendar-day-number {
    color: rgb(243 244 246);
}

.is-calendar-day-number-other {
    color: rgb(156 163 175);
}

.dark .is-calendar-day-number-other {
    color: rgb(75 85 99);
}

.is-calendar-day-number-today {
    background-color: rgb(234 179 8);
    color: white;
    border-radius: 9999px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-calendar-holiday-label {
    font-size: 11px;
    color: rgb(220 38 38);
}

.dark .is-calendar-holiday-label {
    color: rgb(248 113 113);
}

.is-calendar-leave-item {
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.is-calendar-leave-item:hover {
    opacity: 0.8;
}

.is-calendar-leaves-container {
    flex: 1;
    overflow-y: auto;
    max-height: 64px;
}

/* Sidebar Styles */
.is-sidebar-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    overflow: hidden;
}

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

.is-sidebar-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgb(229 231 235);
    font-size: 14px;
    font-weight: 600;
    color: rgb(17 24 39);
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.is-sidebar-body {
    padding: 12px 16px;
}

.is-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    background-color: rgb(249 250 251);
    margin-bottom: 8px;
}

.dark .is-sidebar-item {
    background-color: rgb(17 24 39);
}

.is-sidebar-item:last-child {
    margin-bottom: 0;
}

.is-sidebar-item-indicator {
    width: 4px;
    min-height: 100%;
    border-radius: 2px;
}

.is-sidebar-item-content {
    flex: 1;
    min-width: 0;
}

.is-sidebar-item-title {
    font-size: 14px;
    font-weight: 500;
    color: rgb(17 24 39);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.is-sidebar-item-subtitle {
    font-size: 12px;
    color: rgb(107 114 128);
}

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

.is-sidebar-badge {
    font-size: 12px;
    padding: 2px 8px;
    background-color: rgb(254 243 199);
    color: rgb(161 98 7);
    border-radius: 9999px;
}

.dark .is-sidebar-badge {
    background-color: rgba(161, 98, 7, 0.2);
    color: rgb(253 224 71);
}

.is-sidebar-empty {
    font-size: 14px;
    color: rgb(107 114 128);
    text-align: center;
    padding: 16px 0;
}

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

/* Filter Section */
.is-filter-section {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    padding: 16px 20px;
    margin-bottom: 24px;
}

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

/* ==========================================================================
   Organization Chart Page
   ========================================================================== */

/* Stats Cards Container */
.is-orgchart-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 640px) {
    .is-orgchart-stats {
        grid-template-columns: 1fr;
    }
}

/* Individual Stat Card */
.is-orgchart-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
}

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

/* Stat Icon */
.is-orgchart-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.is-orgchart-stat-icon-primary {
    background-color: rgb(254 243 199);
    color: rgb(161 98 7);
}

.dark .is-orgchart-stat-icon-primary {
    background-color: rgba(161, 98, 7, 0.2);
    color: rgb(253 224 71);
}

.is-orgchart-stat-icon-success {
    background-color: rgb(220 252 231);
    color: rgb(22 163 74);
}

.dark .is-orgchart-stat-icon-success {
    background-color: rgba(22, 163, 74, 0.2);
    color: rgb(74 222 128);
}

/* Stat Content */
.is-orgchart-stat-content {
    display: flex;
    flex-direction: column;
}

.is-orgchart-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: rgb(17 24 39);
    line-height: 1.2;
}

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

.is-orgchart-stat-label {
    font-size: 14px;
    color: rgb(107 114 128);
}

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

/* Main Section */
.is-orgchart-section {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

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

.is-orgchart-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid rgb(229 231 235);
    font-weight: 600;
    font-size: 16px;
    color: rgb(17 24 39);
}

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

.is-orgchart-section-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Department Card */
.is-orgchart-department {
    border: 1px solid rgb(229 231 235);
    border-radius: 12px;
    overflow: hidden;
}

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

.is-orgchart-department-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(to right, rgb(234 179 8), rgb(202 138 4));
}

.is-orgchart-department-header-gray {
    background: linear-gradient(to right, rgb(156 163 175), rgb(107 114 128));
}

.is-orgchart-department-name {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.is-orgchart-department-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin: 4px 0 0 0;
}

.is-orgchart-department-badge {
    padding: 6px 12px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    color: white;
    font-size: 14px;
}

.is-orgchart-department-content {
    padding: 24px;
    background-color: white;
}

.dark .is-orgchart-department-content {
    background-color: rgb(31 41 55);
}

/* Department Head */
.is-orgchart-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.is-orgchart-head-avatar {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, rgb(251 191 36), rgb(217 119 6));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: 700;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    ring: 4px solid rgb(254 243 199);
}

.dark .is-orgchart-head-avatar {
    ring: 4px solid rgba(161, 98, 7, 0.3);
}

.is-orgchart-head-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.is-orgchart-head-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    background-color: rgb(245 158 11);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-orgchart-head-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
    text-align: center;
}

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

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

.is-orgchart-head-title {
    font-size: 14px;
    color: rgb(245 158 11);
}

.dark .is-orgchart-head-title {
    color: rgb(251 191 36);
}

/* Connector Lines */
.is-orgchart-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}

.is-orgchart-connector-vertical {
    width: 2px;
    height: 24px;
    background-color: rgb(209 213 219);
}

.dark .is-orgchart-connector-vertical {
    background-color: rgb(75 85 99);
}

.is-orgchart-connector-horizontal {
    width: 60%;
    max-width: 400px;
    height: 2px;
    background-color: rgb(209 213 219);
}

.dark .is-orgchart-connector-horizontal {
    background-color: rgb(75 85 99);
}

/* Team Members Grid */
.is-orgchart-team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

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

/* Individual Team Member */
.is-orgchart-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background-color: rgb(249 250 251);
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

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

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

.dark .is-orgchart-member:hover {
    background-color: rgb(75 85 99);
}

.is-orgchart-member-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, rgb(156 163 175), rgb(107 114 128));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.is-orgchart-member-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.is-orgchart-member-name {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgb(17 24 39);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

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

.is-orgchart-member-title {
    font-size: 12px;
    color: rgb(107 114 128);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.dark .is-orgchart-member-title {
    color: rgb(156 163 175);
}

/* Empty State */
.is-orgchart-empty {
    text-align: center;
    color: rgb(107 114 128);
    padding: 24px;
    font-size: 14px;
}

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

/* ==========================================================================
   Payroll Generation Page
   ========================================================================== */

/* Section Container */
.is-payroll-section {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 24px;
}

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

/* Section Header */
.is-payroll-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid rgb(229 231 235);
    font-weight: 600;
    font-size: 16px;
    color: rgb(17 24 39);
}

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

.is-payroll-section-header-success {
    background: linear-gradient(to right, rgb(34 197 94), rgb(22 163 74));
    color: white;
    border-bottom: none;
}

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

.is-payroll-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
}

/* Small badges for employee status in table */
.is-payroll-badge-small {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 500;
    margin-left: 6px;
    vertical-align: middle;
}

.is-payroll-badge-warning {
    background-color: rgb(254 243 199);
    color: rgb(161 98 7);
}

.dark .is-payroll-badge-warning {
    background-color: rgba(234, 179, 8, 0.2);
    color: rgb(253 224 71);
}

.is-payroll-badge-danger {
    background-color: rgb(254 226 226);
    color: rgb(185 28 28);
}

.dark .is-payroll-badge-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: rgb(252 165 165);
}

.is-payroll-badge-info {
    background-color: rgb(219 234 254);
    color: rgb(29 78 216);
}

.dark .is-payroll-badge-info {
    background-color: rgba(59, 130, 246, 0.2);
    color: rgb(147 197 253);
}

/* Section Body */
.is-payroll-section-body {
    padding: 20px;
}

.is-payroll-section-body-table {
    padding: 0;
}

/* D2: Filament renders `{{ $this->table }}` inside its own `.fi-ta`
   wrapper which has its own rounded top corners + subtle background,
   creating a visible corner gap against our .is-payroll-section
   rounded container. Reset the inner wrapper so it flows edge-to-edge
   below our own header. */
.is-payroll-section-body-table .fi-ta,
.is-payroll-section-body-table .fi-ta-ctn {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    box-shadow: none !important;
    ring-width: 0 !important;
    border-top: none !important;
    background: transparent !important;
}

/* Form Grid */
.is-payroll-form-grid {
    margin-bottom: 20px;
}

/* Form Actions */
.is-payroll-form-actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgb(229 231 235);
}

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

/* Table Wrapper */
.is-payroll-table-wrapper {
    overflow-x: auto;
}

/* Table Styles */
.is-payroll-table {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;
}

/* Table Header */
.is-payroll-th {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: rgb(107 114 128);
    background-color: rgb(249 250 251);
    border-bottom: 1px solid rgb(229 231 235);
    white-space: nowrap;
}

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

.is-payroll-th-left {
    text-align: left;
}

.is-payroll-th-right {
    text-align: right;
}

.is-payroll-th-danger {
    color: rgb(239 68 68);
}

.dark .is-payroll-th-danger {
    color: rgb(248 113 113);
}

.is-payroll-th-success {
    color: rgb(34 197 94);
    background-color: rgb(240 253 244);
}

.dark .is-payroll-th-success {
    color: rgb(74 222 128);
    background-color: rgba(34, 197, 94, 0.1);
}

/* Table Row */
.is-payroll-tr {
    transition: background-color 0.15s ease;
}

.is-payroll-tr:hover {
    background-color: rgb(249 250 251);
}

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

.is-payroll-tr-total {
    background-color: rgb(243 244 246);
}

.dark .is-payroll-tr-total {
    background-color: rgb(55 65 81);
}

/* Table Data */
.is-payroll-td {
    padding: 12px 16px;
    color: rgb(107 114 128);
    border-bottom: 1px solid rgb(229 231 235);
    white-space: nowrap;
}

.dark .is-payroll-td {
    color: rgb(156 163 175);
    border-bottom-color: rgb(55 65 81);
}

.is-payroll-td-name {
    font-weight: 500;
    color: rgb(17 24 39);
}

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

.is-payroll-td-right {
    text-align: right;
}

.is-payroll-td-danger {
    color: rgb(239 68 68);
}

.dark .is-payroll-td-danger {
    color: rgb(248 113 113);
}

.is-payroll-td-success {
    color: rgb(34 197 94);
    background-color: rgb(240 253 244);
}

.dark .is-payroll-td-success {
    color: rgb(74 222 128);
    background-color: rgba(34, 197, 94, 0.1);
}

.is-payroll-td-bold {
    font-weight: 700;
}

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

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

/* ==========================================================================
   My Expense Claims Page
   ========================================================================== */

/* Stats Grid */
.is-expense-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1024px) {
    .is-expense-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .is-expense-stats {
        grid-template-columns: 1fr;
    }
}

/* Stat Card */
.is-expense-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
}

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

/* Stat Icon */
.is-expense-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.is-expense-stat-icon-gray {
    background-color: rgb(243 244 246);
    color: rgb(107 114 128);
}

.dark .is-expense-stat-icon-gray {
    background-color: rgb(55 65 81);
    color: rgb(156 163 175);
}

.is-expense-stat-icon-warning {
    background-color: rgb(254 243 199);
    color: rgb(161 98 7);
}

.dark .is-expense-stat-icon-warning {
    background-color: rgba(161, 98, 7, 0.2);
    color: rgb(253 224 71);
}

.is-expense-stat-icon-info {
    background-color: rgb(219 234 254);
    color: rgb(29 78 216);
}

.dark .is-expense-stat-icon-info {
    background-color: rgba(29, 78, 216, 0.2);
    color: rgb(96 165 250);
}

.is-expense-stat-icon-success {
    background-color: rgb(220 252 231);
    color: rgb(22 163 74);
}

.dark .is-expense-stat-icon-success {
    background-color: rgba(22, 163, 74, 0.2);
    color: rgb(74 222 128);
}

/* Stat Content */
.is-expense-stat-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.is-expense-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: rgb(17 24 39);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.is-expense-stat-label {
    font-size: 14px;
    color: rgb(107 114 128);
}

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

/* Section */
.is-expense-section {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

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

.is-expense-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid rgb(229 231 235);
    font-weight: 600;
    font-size: 16px;
    color: rgb(17 24 39);
}

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

.is-expense-section-body {
    padding: 0;
}

/* ==========================================================================
   HR Dashboard Page
   ========================================================================== */

/* Quick Stats Row */
.is-hr-quick-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1024px) {
    .is-hr-quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .is-hr-quick-stats {
        grid-template-columns: 1fr;
    }
}

.is-hr-quick-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
}

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

.is-hr-quick-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
}

.is-hr-quick-stat-icon-primary {
    background-color: rgb(254 243 199);
    color: rgb(161 98 7);
}

.dark .is-hr-quick-stat-icon-primary {
    background-color: rgba(161, 98, 7, 0.2);
    color: rgb(253 224 71);
}

.is-hr-quick-stat-icon-success {
    background-color: rgb(220 252 231);
    color: rgb(22 163 74);
}

.dark .is-hr-quick-stat-icon-success {
    background-color: rgba(22, 163, 74, 0.2);
    color: rgb(74 222 128);
}

.is-hr-quick-stat-icon-warning {
    background-color: rgb(255 237 213);
    color: rgb(194 65 12);
}

.dark .is-hr-quick-stat-icon-warning {
    background-color: rgba(194, 65, 12, 0.2);
    color: rgb(251 146 60);
}

.is-hr-quick-stat-icon-info {
    background-color: rgb(219 234 254);
    color: rgb(29 78 216);
}

.dark .is-hr-quick-stat-icon-info {
    background-color: rgba(29, 78, 216, 0.2);
    color: rgb(96 165 250);
}

.is-hr-quick-stat-content {
    display: flex;
    flex-direction: column;
}

.is-hr-quick-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: rgb(17 24 39);
    line-height: 1.2;
}

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

.is-hr-quick-stat-label {
    font-size: 14px;
    color: rgb(107 114 128);
}

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

/* Dashboard Grid */
.is-hr-dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

@media (max-width: 1024px) {
    .is-hr-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.is-hr-dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.is-hr-dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Card */
.is-hr-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

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

.is-hr-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid rgb(229 231 235);
    font-weight: 600;
    font-size: 16px;
    color: rgb(17 24 39);
}

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

.is-hr-card-body {
    padding: 16px 20px;
}

/* Badge */
.is-hr-badge {
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
}

.is-hr-badge-warning {
    background-color: rgb(254 243 199);
    color: rgb(161 98 7);
}

.dark .is-hr-badge-warning {
    background-color: rgba(161, 98, 7, 0.2);
    color: rgb(253 224 71);
}

/* Approval Items */
.is-hr-approval-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgb(243 244 246);
}

.is-hr-approval-item:last-child {
    border-bottom: none;
}

.dark .is-hr-approval-item {
    border-bottom-color: rgb(55 65 81);
}

.is-hr-approval-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.is-hr-approval-icon-leave {
    background-color: rgb(219 234 254);
    color: rgb(29 78 216);
}

.dark .is-hr-approval-icon-leave {
    background-color: rgba(29, 78, 216, 0.2);
    color: rgb(96 165 250);
}

.is-hr-approval-icon-expense {
    background-color: rgb(220 252 231);
    color: rgb(22 163 74);
}

.dark .is-hr-approval-icon-expense {
    background-color: rgba(22, 163, 74, 0.2);
    color: rgb(74 222 128);
}

.is-hr-approval-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.is-hr-approval-title {
    font-weight: 500;
    color: rgb(17 24 39);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.is-hr-approval-subtitle {
    font-size: 13px;
    color: rgb(107 114 128);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .is-hr-approval-subtitle {
    color: rgb(156 163 175);
}

.is-hr-approval-date {
    font-size: 12px;
    color: rgb(156 163 175);
    flex-shrink: 0;
}

/* Department Grid */
.is-hr-dept-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

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

.is-hr-dept-item {
    padding: 12px;
    background-color: rgb(249 250 251);
    border-radius: 8px;
}

.dark .is-hr-dept-item {
    background-color: rgb(55 65 81);
}

.is-hr-dept-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.is-hr-dept-name {
    font-weight: 600;
    color: rgb(17 24 39);
}

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

.is-hr-dept-count {
    font-weight: 700;
    color: rgb(234 179 8);
}

.is-hr-dept-manager {
    font-size: 12px;
    color: rgb(107 114 128);
    display: block;
    margin-bottom: 8px;
}

.dark .is-hr-dept-manager {
    color: rgb(156 163 175);
}

.is-hr-dept-bar {
    height: 4px;
    background-color: rgb(229 231 235);
    border-radius: 2px;
    overflow: hidden;
}

.dark .is-hr-dept-bar {
    background-color: rgb(75 85 99);
}

.is-hr-dept-bar-fill {
    height: 100%;
    background-color: rgb(234 179 8);
    border-radius: 2px;
}

/* Attendance Issues */
.is-hr-issue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgb(243 244 246);
}

.is-hr-issue-item:last-child {
    border-bottom: none;
}

.dark .is-hr-issue-item {
    border-bottom-color: rgb(55 65 81);
}

.is-hr-issue-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.is-hr-issue-badge-absent {
    background-color: rgb(254 226 226);
    color: rgb(185 28 28);
}

.dark .is-hr-issue-badge-absent {
    background-color: rgba(185, 28, 28, 0.2);
    color: rgb(248 113 113);
}

.is-hr-issue-badge-late {
    background-color: rgb(255 237 213);
    color: rgb(194 65 12);
}

.dark .is-hr-issue-badge-late {
    background-color: rgba(194, 65, 12, 0.2);
    color: rgb(251 146 60);
}

.is-hr-issue-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.is-hr-issue-name {
    font-weight: 500;
    color: rgb(17 24 39);
}

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

.is-hr-issue-details {
    font-size: 13px;
    color: rgb(107 114 128);
}

.dark .is-hr-issue-details {
    color: rgb(156 163 175);
}

.is-hr-issue-date {
    font-size: 12px;
    color: rgb(156 163 175);
    flex-shrink: 0;
}

/* Leave Items */
.is-hr-leave-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgb(243 244 246);
}

.is-hr-leave-item:last-child {
    border-bottom: none;
}

.dark .is-hr-leave-item {
    border-bottom-color: rgb(55 65 81);
}

.is-hr-leave-indicator {
    width: 4px;
    border-radius: 2px;
    flex-shrink: 0;
}

.is-hr-leave-content {
    display: flex;
    flex-direction: column;
}

.is-hr-leave-name {
    font-weight: 500;
    color: rgb(17 24 39);
}

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

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

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

.is-hr-leave-dates {
    font-size: 12px;
    color: rgb(156 163 175);
}

.is-hr-leave-days {
    color: rgb(234 179 8);
    font-weight: 500;
}

/* Birthday Items */
.is-hr-birthday-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgb(243 244 246);
}

.is-hr-birthday-item:last-child {
    border-bottom: none;
}

.dark .is-hr-birthday-item {
    border-bottom-color: rgb(55 65 81);
}

.is-hr-birthday-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, rgb(236 72 153), rgb(190 24 93));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.is-hr-birthday-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.is-hr-birthday-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.is-hr-birthday-name {
    font-weight: 500;
    color: rgb(17 24 39);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.is-hr-birthday-dept {
    font-size: 12px;
    color: rgb(107 114 128);
}

.dark .is-hr-birthday-dept {
    color: rgb(156 163 175);
}

.is-hr-birthday-date {
    text-align: right;
    flex-shrink: 0;
}

.is-hr-birthday-day {
    display: block;
    font-weight: 600;
    color: rgb(236 72 153);
}

.is-hr-birthday-label {
    font-size: 11px;
    color: rgb(156 163 175);
}

.is-hr-birthday-today {
    color: rgb(236 72 153);
    font-weight: 600;