/**
 * ImmigraSuite Admin - Widgets
 * Dashboard widgets, Stats, Timelines, Progress, Profiles
 */

/* ==========================================================================
   Widget - Milestone Timeline
   ========================================================================== */

.is-milestone-container {
    position: relative;
    max-height: 500px;
    overflow-y: auto;
}

.is-milestone-line {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: rgb(229 231 235);
}

.is-milestone-item {
    position: relative;
    display: flex;
    gap: 16px;
}

.is-milestone-dot {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px white;
}

.is-milestone-card {
    flex: 1;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid;
}

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

.is-milestone-type {
    font-size: 11px;
    padding: 2px 8px;
    background-color: white;
    border-radius: 4px;
    color: rgb(55 65 81);
    border: 1px solid rgb(229 231 235);
}

.is-milestone-date {
    font-size: 13px;
    font-weight: 500;
    color: rgb(55 65 81);
}

.is-milestone-time {
    font-size: 12px;
    color: rgb(107 114 128);
}

.is-milestone-description {
    font-size: 13px;
    color: rgb(75 85 99);
    margin-bottom: 10px;
    padding: 8px;
    background-color: white;
    border-radius: 6px;
    border-left: 3px solid;
}

.is-milestone-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: rgb(107 114 128);
}

.is-milestone-conditions {
    margin-top: 10px;
    padding: 10px;
    background-color: rgb(254 249 195);
    border-radius: 6px;
}

.is-milestone-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed;
    font-size: 11px;
    color: rgb(156 163 175);
}

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

.dark .is-milestone-dot {
    box-shadow: 0 0 0 4px rgb(17 24 39);
}

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

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

.dark .is-milestone-date {
    color: rgb(209 213 219);
}

.dark .is-milestone-description {
    background-color: rgb(31 41 55);
    color: rgb(209 213 219);
}

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

.dark .is-milestone-conditions {
    background-color: rgba(234, 179, 8, 0.15);
}

/* Milestone color variants */
.is-milestone-success { background-color: rgb(240 253 244); border-color: rgb(187 247 208); }
.is-milestone-danger { background-color: rgb(254 242 242); border-color: rgb(254 202 202); }
.is-milestone-warning { background-color: rgb(254 252 232); border-color: rgb(253 224 71); }
.is-milestone-info { background-color: rgb(239 246 255); border-color: rgb(191 219 254); }
.is-milestone-primary { background-color: rgb(250 245 255); border-color: rgb(233 213 255); }
.is-milestone-gray { background-color: rgb(249 250 251); border-color: rgb(229 231 235); }

.dark .is-milestone-success { background-color: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }
.dark .is-milestone-danger { background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }
.dark .is-milestone-warning { background-color: rgba(234, 179, 8, 0.1); border-color: rgba(234, 179, 8, 0.3); }
.dark .is-milestone-info { background-color: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); }
.dark .is-milestone-primary { background-color: rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.3); }
.dark .is-milestone-gray { background-color: rgba(156, 163, 175, 0.1); border-color: rgba(156, 163, 175, 0.3); }

/* ==========================================================================
   Widget - Stats Pills (horizontal)
   ========================================================================== */

.is-stats-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.is-stats-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
}

.is-stats-pill-gray {
    background-color: rgb(249 250 251);
}

.is-stats-pill-green {
    background-color: rgb(220 252 231);
}

.is-stats-pill-yellow {
    background-color: rgb(254 249 195);
}

.is-stats-pill-value {
    font-size: 14px;
    font-weight: 600;
}

.is-stats-pill-label {
    font-size: 12px;
}

.dark .is-stats-pill-gray {
    background-color: rgb(55 65 81);
}

.dark .is-stats-pill-green {
    background-color: rgba(34, 197, 94, 0.2);
}

.dark .is-stats-pill-yellow {
    background-color: rgba(234, 179, 8, 0.2);
}

/* ==========================================================================
   Widget - Event Cards (Case Timeline)
   ========================================================================== */

.is-event-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background-color: rgb(249 250 251);
    border-radius: 8px;
    border-left: 3px solid;
}

.is-event-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.is-event-description {
    font-size: 13px;
    color: rgb(75 85 99);
    margin-top: 2px;
}

.is-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
    color: rgb(107 114 128);
}

.is-event-separator {
    color: rgb(209 213 219);
}

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

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

.dark .is-event-description {
    color: rgb(209 213 219);
}

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

.dark .is-event-separator {
    color: rgb(75 85 99);
}

/* Event icon colors */
.is-event-icon-green { background-color: rgb(220 252 231); }
.is-event-icon-blue { background-color: rgb(219 234 254); }
.is-event-icon-purple { background-color: rgb(243 232 255); }
.is-event-icon-orange { background-color: rgb(255 237 213); }
.is-event-icon-gray { background-color: rgb(243 244 246); }

.dark .is-event-icon-green { background-color: rgba(34, 197, 94, 0.2); }
.dark .is-event-icon-blue { background-color: rgba(59, 130, 246, 0.2); }
.dark .is-event-icon-purple { background-color: rgba(168, 85, 247, 0.2); }
.dark .is-event-icon-orange { background-color: rgba(234, 88, 12, 0.2); }
.dark .is-event-icon-gray { background-color: rgba(156, 163, 175, 0.2); }

/* ==========================================================================
   Widget - Info Box
   ========================================================================== */

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

.is-info-box-content {
    display: flex;
    align-items: start;
    gap: 8px;
}

.is-info-box-text {
    font-size: 12px;
    color: rgb(107 114 128);
}

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

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

/* ==========================================================================
   Widget - Verified Badge
   ========================================================================== */

.is-verified-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgb(22 163 74);
    font-weight: 500;
}

/* ==========================================================================
   Settings - Alert Boxes
   ========================================================================== */

.is-alert {
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid;
}

.is-alert-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.is-alert-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.is-alert-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.is-alert-text {
    font-size: 14px;
}

/* Alert variants */
.is-alert-purple {
    background-color: rgb(250 245 255);
    border-color: rgb(168 85 247);
}

.is-alert-purple .is-alert-title {
    color: rgb(107 33 168);
}

.is-alert-purple .is-alert-text {
    color: rgb(126 34 206);
}

.is-alert-yellow {
    background-color: rgb(254 252 232);
    border-color: rgb(234 179 8);
}

.is-alert-yellow .is-alert-title {
    color: rgb(161 98 7);
}

.is-alert-yellow .is-alert-text {
    color: rgb(133 77 14);
}

.is-alert-blue {
    background-color: rgb(239 246 255);
    border-color: rgb(59 130 246);
}

.is-alert-blue .is-alert-title {
    color: rgb(30 64 175);
}

.is-alert-blue .is-alert-text {
    color: rgb(30 64 175);
}

.is-alert-green {
    background-color: rgb(240 253 244);
    border-color: rgb(34 197 94);
}

.is-alert-green .is-alert-title {
    color: rgb(22 101 52);
}

.is-alert-green .is-alert-text {
    color: rgb(22 101 52);
}

.is-alert-red {
    background-color: rgb(254 242 242);
    border-color: rgb(239 68 68);
}

.is-alert-red .is-alert-title {
    color: rgb(153 27 27);
}

.is-alert-red .is-alert-text {
    color: rgb(185 28 28);
}

/* Dark mode for alerts */
.dark .is-alert-purple {
    background-color: rgba(168, 85, 247, 0.1);
}

.dark .is-alert-yellow {
    background-color: rgba(234, 179, 8, 0.1);
}

.dark .is-alert-blue {
    background-color: rgba(59, 130, 246, 0.1);
}

.dark .is-alert-green {
    background-color: rgba(34, 197, 94, 0.1);
}

.dark .is-alert-red {
    background-color: rgba(239, 68, 68, 0.1);
}

.is-alert-gray {
    background-color: rgb(243 244 246);
    border: 1px solid rgb(209 213 219);
}

.is-alert-gray .is-alert-title {
    color: rgb(55 65 81);
}

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

.dark .is-alert-gray {
    background-color: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.3);
}

.dark .is-alert-gray .is-alert-title {
    color: rgb(209 213 219);
}

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

/* ==========================================================================
   Salary Component Cards (Grade View)
   ========================================================================== */

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

.is-salary-card {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgb(249 250 251);
    border-radius: 8px;
    border-left: 3px solid rgb(34 197 94);
    gap: 12px;
}

.is-salary-card.is-deduction {
    border-left-color: rgb(239 68 68);
}

.is-salary-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

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

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

.is-salary-card-content {
    flex: 1;
    min-width: 0;
}

.is-salary-card-title {
    font-weight: 600;
    font-size: 14px;
    color: rgb(17 24 39);
    margin-bottom: 2px;
}

.is-salary-card-meta {
    font-size: 12px;
    color: rgb(107 114 128);
}

.is-salary-card-value {
    text-align: right;
    flex-shrink: 0;
}

.is-salary-card-amount {
    font-weight: 600;
    font-size: 14px;
    color: rgb(22 163 74);
}

.is-salary-card-amount.is-deduction {
    color: rgb(220 38 38);
}

.is-salary-card-type {
    font-size: 11px;
    color: rgb(107 114 128);
}

/* Dark mode */
.dark .is-salary-card {
    background: rgba(255, 255, 255, 0.05);
}

.dark .is-salary-card-icon.is-earning {
    background: rgba(34, 197, 94, 0.15);
}

.dark .is-salary-card-icon.is-deduction {
    background: rgba(239, 68, 68, 0.15);
}

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

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

.dark .is-salary-card-amount {
    color: rgb(74 222 128);
}

.dark .is-salary-card-amount.is-deduction {
    color: rgb(248 113 113);
}

/* ==========================================================================
   Settings - Webhook URL Box
   ========================================================================== */

.is-webhook-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.is-webhook-url {
    background-color: rgb(243 244 246);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-family: monospace;
    flex: 1;
    word-break: break-all;
}

.is-webhook-copy-btn {
    padding: 8px 12px;
    background: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
}

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

.is-webhook-hint {
    font-size: 12px;
    color: rgb(107 114 128);
    margin-top: 6px;
}

.dark .is-webhook-url {
    background-color: rgb(55 65 81);
    color: rgb(243 244 246);
}

.dark .is-webhook-copy-btn {
    background-color: rgb(55 65 81);
    border-color: rgb(75 85 99);
    color: rgb(243 244 246);
}

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

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

/* ==========================================================================
   Settings - Setup Guide
   ========================================================================== */

.is-setup-guide {
    font-size: 14px;
}

.is-setup-section {
    margin-bottom: 16px;
}

.is-setup-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.is-setup-list {
    padding-left: 20px;
    line-height: 1.8;
}

.is-setup-list-disc {
    list-style: disc;
}

.is-setup-list-decimal {
    list-style: decimal;
}

.is-setup-link {
    color: rgb(37 99 235);
    text-decoration: none;
}

.is-setup-link:hover {
    text-decoration: underline;
}

.is-setup-link-underline {
    text-decoration: underline;
}

.is-code-inline {
    background: rgb(243 244 246);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
}

.is-test-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 8px;
}

.is-test-card-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark .is-setup-link {
    color: rgb(96 165 250);
}

.dark .is-code-inline {
    background-color: rgb(55 65 81);
    color: rgb(243 244 246);
}

/* ==========================================================================
   Additional Text Colors
   ========================================================================== */

.is-text-amber {
    color: rgb(133 77 14);
}

.dark .is-text-amber {
    color: rgb(251 191 36);
}

/* ==========================================================================
   Attendance Calendar
   ========================================================================== */

.is-attendance-calendar {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid rgb(229 231 235);
    overflow: hidden;
}

.is-attendance-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px;
    background: rgb(249 250 251);
    border-bottom: 1px solid rgb(229 231 235);
}

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

@media (max-width: 480px) {
    .is-attendance-filters {
        grid-template-columns: 1fr;
    }
}

.is-attendance-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.is-attendance-filter-select {
    padding: 8px 12px;
    border: 1px solid rgb(209 213 219);
    border-radius: 8px;
    font-size: 14px;
    background: white;
    color: rgb(17 24 39);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.is-attendance-filter-select:focus {
    outline: none;
    border-color: rgb(234 88 12);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}

.is-attendance-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: white;
    border-bottom: 1px solid rgb(229 231 235);
}

.is-attendance-legend-title {
    font-size: 12px;
    font-weight: 600;
    color: rgb(107 114 128);
    text-transform: uppercase;
}

.is-attendance-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgb(75 85 99);
}

.is-attendance-legend-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.is-attendance-table-wrap {
    overflow-x: auto;
}

.is-attendance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.is-attendance-table thead {
    background: rgb(249 250 251);
    position: sticky;
    top: 0;
    z-index: 10;
}

.is-attendance-th {
    padding: 12px 4px;
    text-align: center;
    font-weight: 500;
    color: rgb(107 114 128);
    border-bottom: 2px solid rgb(229 231 235);
    min-width: 36px;
}

.is-attendance-th-employee {
    position: sticky;
    left: 0;
    z-index: 20;
    background: rgb(249 250 251);
    text-align: left;
    padding: 12px 16px;
    min-width: 220px;
    border-right: 1px solid rgb(229 231 235);
}

.is-attendance-th-total {
    min-width: 80px;
    border-left: 1px solid rgb(229 231 235);
}

.is-attendance-th-day {
    font-size: 10px;
    color: rgb(156 163 175);
    font-weight: 400;
}

.is-attendance-th-date {
    font-size: 14px;
    font-weight: 600;
    color: rgb(55 65 81);
}

.is-attendance-th-weekend {
    background: rgb(243 244 246);
}

.is-attendance-th-today {
    background: rgb(255 237 213);
}

.is-attendance-th-today .is-attendance-th-date {
    color: rgb(234 88 12);
}

.is-attendance-tr {
    transition: background-color 0.15s;
}

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

.is-attendance-td {
    padding: 8px 4px;
    text-align: center;
    border-bottom: 1px solid rgb(243 244 246);
}

.is-attendance-td-employee {
    position: sticky;
    left: 0;
    z-index: 5;
    background: white;
    text-align: left;
    padding: 12px 16px;
    border-right: 1px solid rgb(229 231 235);
}

.is-attendance-tr:hover .is-attendance-td-employee {
    background: rgb(249 250 251);
}

.is-attendance-td-total {
    border-left: 1px solid rgb(229 231 235);
    font-weight: 600;
}

.is-attendance-td-weekend {
    background: rgb(250 250 250);
}

.is-attendance-td-today {
    background: rgb(255 251 235);
}

.is-attendance-employee {
    display: flex;
    align-items: center;
    gap: 12px;
}

.is-attendance-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(234 88 12), rgb(249 115 22));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.is-attendance-avatar-text {
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.is-attendance-employee-info {
    min-width: 0;
}

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

.is-attendance-headcount {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: rgb(107 114 128);
    text-transform: none;
    letter-spacing: 0;
}

.is-attendance-headcount-split {
    font-weight: 400;
    color: rgb(156 163 175);
}

.dark .is-attendance-headcount {
    color: rgb(156 163 175);
}

.dark .is-attendance-headcount-split {
    color: rgb(107 114 128);
}

/* Item #9 — a leaver shown for their tenure. Amber, not red: they are not
   an error, they are history, and the grid must not read as current staff. */
.is-attendance-left-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    color: rgb(146 64 14);
    background-color: rgb(254 243 199);
    vertical-align: middle;
}

.is-attendance-employee-role {
    font-size: 11px;
    color: rgb(107 114 128);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.is-attendance-status-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.is-attendance-status-btn:hover:not(:disabled) {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.is-attendance-status-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.is-attendance-status-present {
    background: rgb(220 252 231);
    color: rgb(22 163 74);
}

.is-attendance-status-late {
    background: rgb(254 249 195);
    color: rgb(161 98 7);
}

.is-attendance-status-absent {
    background: rgb(254 226 226);
    color: rgb(220 38 38);
}

.is-attendance-status-half {
    background: rgb(255 237 213);
    color: rgb(234 88 12);
}

.is-attendance-status-leave {
    background: rgb(243 232 255);
    color: rgb(147 51 234);
}

.is-attendance-status-weekend {
    background: rgb(219 234 254);
    color: rgb(37 99 235);
}

.is-attendance-status-holiday {
    background: rgb(254 249 195);
    color: rgb(202 138 4);
}

.is-attendance-status-empty {
    background: rgb(243 244 246);
    color: rgb(156 163 175);
}

/* Outside the employment window — before joining, or after leaving.
   Deliberately flatter and fainter than an empty cell: an empty cell is a
   day that needs an answer, this is a day that has no question. Striped so
   it reads as "not applicable" at a glance across a 31-column row. */
.is-attendance-status-not-employed {
    background: repeating-linear-gradient(
        45deg,
        rgb(248 250 252),
        rgb(248 250 252) 3px,
        rgb(241 245 249) 3px,
        rgb(241 245 249) 6px
    );
    color: rgb(203 213 225);
    cursor: not-allowed;
}

.is-attendance-total-good {
    color: rgb(22 163 74);
}

.is-attendance-total-warning {
    color: rgb(234 179 8);
}

.is-attendance-total-danger {
    color: rgb(220 38 38);
}

.is-attendance-empty {
    padding: 48px 24px;
    text-align: center;
    color: rgb(107 114 128);
}

.is-attendance-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    opacity: 0.4;
}

/* Attendance Summary Stats */
.is-attendance-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}

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

.is-attendance-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
}

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

.is-attendance-stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.is-attendance-stat-label {
    font-size: 13px;
    margin-top: 4px;
}

.is-attendance-stat-green {
    background: rgb(240 253 244);
}

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

.is-attendance-stat-green .is-attendance-stat-value {
    color: rgb(22 163 74);
}

.is-attendance-stat-green .is-attendance-stat-label {
    color: rgb(22 101 52);
}

.is-attendance-stat-yellow {
    background: rgb(254 252 232);
}

.is-attendance-stat-yellow .is-attendance-stat-icon {
    background: rgb(254 249 195);
    color: rgb(202 138 4);
}

.is-attendance-stat-yellow .is-attendance-stat-value {
    color: rgb(202 138 4);
}

.is-attendance-stat-yellow .is-attendance-stat-label {
    color: rgb(133 77 14);
}

.is-attendance-stat-red {
    background: rgb(254 242 242);
}

.is-attendance-stat-red .is-attendance-stat-icon {
    background: rgb(254 226 226);
    color: rgb(220 38 38);
}

.is-attendance-stat-red .is-attendance-stat-value {
    color: rgb(220 38 38);
}

.is-attendance-stat-red .is-attendance-stat-label {
    color: rgb(153 27 27);
}

.is-attendance-stat-purple {
    background: rgb(250 245 255);
}

.is-attendance-stat-purple .is-attendance-stat-icon {
    background: rgb(243 232 255);
    color: rgb(147 51 234);
}

.is-attendance-stat-purple .is-attendance-stat-value {
    color: rgb(147 51 234);
}

.is-attendance-stat-purple .is-attendance-stat-label {
    color: rgb(107 33 168);
}

/* Dark mode */
.dark .is-attendance-calendar {
    background: rgb(17 24 39);
    border-color: rgb(55 65 81);
}

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

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

.dark .is-attendance-filter-select {
    background: rgb(17 24 39);
    border-color: rgb(55 65 81);
    color: rgb(243 244 246);
}

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

.dark .is-attendance-legend-item {
    color: rgb(209 213 219);
}

.dark .is-attendance-table thead {
    background: rgb(31 41 55);
}

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

.dark .is-attendance-th-employee {
    background: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.dark .is-attendance-th-weekend {
    background: rgb(55 65 81);
}

.dark .is-attendance-th-today {
    background: rgba(234, 88, 12, 0.2);
}

.dark .is-attendance-th-date {
    color: rgb(209 213 219);
}

.dark .is-attendance-tr:hover {
    background: rgb(31 41 55);
}

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

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

.dark .is-attendance-tr:hover .is-attendance-td-employee {
    background: rgb(31 41 55);
}

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

.dark .is-attendance-td-weekend {
    background: rgba(55, 65, 81, 0.5);
}

.dark .is-attendance-td-today {
    background: rgba(234, 88, 12, 0.1);
}

.dark .is-attendance-left-badge {
    color: rgb(253 230 138);
    background-color: rgb(120 53 15);
}

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

.dark .is-attendance-employee-role {
    color: rgb(156 163 175);
}

.dark .is-attendance-status-empty {
    background: rgb(55 65 81);
    color: rgb(107 114 128);
}

.dark .is-attendance-status-not-employed {
    background: repeating-linear-gradient(
        45deg,
        rgb(30 41 59),
        rgb(30 41 59) 3px,
        rgb(38 48 66) 3px,
        rgb(38 48 66) 6px
    );
    color: rgb(71 85 105);
    cursor: not-allowed;
}

.dark .is-attendance-stat-green {
    background: rgba(34, 197, 94, 0.1);
}

.dark .is-attendance-stat-yellow {
    background: rgba(234, 179, 8, 0.1);
}

.dark .is-attendance-stat-red {
    background: rgba(239, 68, 68, 0.1);
}

.dark .is-attendance-stat-purple {
    background: rgba(168, 85, 247, 0.1);
}

/* ==========================================================================
   Clock Widget - Clock In/Out Component
   ========================================================================== */

.is-clock-widget {
    position: relative;
    display: flex;
    align-items: center;
}

/* Trigger Button */
.is-clock-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.is-clock-trigger:hover {
    background: rgb(243 244 246);
}

.dark .is-clock-trigger:hover {
    background: rgb(55 65 81);
}

.is-clock-trigger.is-clock-active {
    background: rgba(34, 197, 94, 0.1);
}

.dark .is-clock-trigger.is-clock-active {
    background: rgba(34, 197, 94, 0.2);
}

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

.is-clock-trigger.is-clock-active .is-clock-icon {
    color: rgb(34 197 94);
}

.is-clock-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.3);
    animation: clockPulse 2s ease-in-out infinite;
}

@keyframes clockPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* Panel */
.is-clock-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgb(229 231 235);
    overflow: hidden;
    z-index: 100;
    animation: clockSlideIn 0.2s ease;
}

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

@keyframes clockSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header */
.is-clock-header {
    padding: 16px;
    background: linear-gradient(135deg, rgb(249 115 22) 0%, rgb(234 88 12) 100%);
    color: white;
    text-align: center;
}

.is-clock-time {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

.is-clock-date {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 4px;
}

/* Body */
.is-clock-body {
    padding: 16px;
}

/* Status Display */
.is-clock-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: rgb(249 250 251);
    margin-bottom: 16px;
}

.dark .is-clock-status {
    background: rgb(17 24 39);
}

.is-clock-status-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.is-clock-status-working {
    background: rgba(34, 197, 94, 0.1);
    color: rgb(34 197 94);
}

.is-clock-status-complete {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(59 130 246);
}

.is-clock-status-pending {
    background: rgba(107, 114, 128, 0.1);
    color: rgb(107 114 128);
}

.is-clock-status-info {
    flex: 1;
    min-width: 0;
}

.is-clock-status-label {
    font-weight: 600;
    font-size: 14px;
    color: rgb(17 24 39);
}

.dark .is-clock-status-label {
    color: rgb(243 244 246);
}

.is-clock-status-time {
    font-size: 12px;
    color: rgb(107 114 128);
    margin-top: 2px;
}

.is-clock-status-hours {
    font-size: 12px;
    color: rgb(34 197 94);
    font-weight: 600;
    margin-top: 2px;
}

/* Badges */
.is-clock-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.is-clock-badge-warning {
    background: rgba(234, 179, 8, 0.1);
    color: rgb(161 98 7);
}

.dark .is-clock-badge-warning {
    color: rgb(234 179 8);
}

.is-clock-badge-info {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(37 99 235);
}

.dark .is-clock-badge-info {
    color: rgb(96 165 250);
}

/* Form Fields */
.is-clock-field {
    margin-bottom: 16px;
}

.is-clock-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgb(107 114 128);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Work Type Buttons */
.is-clock-work-types {
    display: flex;
    gap: 8px;
}

.is-clock-work-type {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 8px;
    border: 2px solid rgb(229 231 235);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    color: rgb(107 114 128);
}

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

.is-clock-work-type:hover {
    border-color: rgb(249 115 22);
}

.is-clock-work-type.is-active {
    border-color: rgb(249 115 22);
    background: rgba(249, 115, 22, 0.05);
    color: rgb(249 115 22);
}

.is-clock-work-icon {
    width: 20px;
    height: 20px;
}

/* Textarea */
.is-clock-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgb(229 231 235);
    border-radius: 8px;
    font-size: 13px;
    resize: none;
    transition: border-color 0.2s ease;
}

.dark .is-clock-textarea {
    background: rgb(17 24 39);
    border-color: rgb(55 65 81);
    color: rgb(243 244 246);
}

.is-clock-textarea:focus {
    outline: none;
    border-color: rgb(249 115 22);
}

/* Location */
.is-clock-location {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgb(249 250 251);
    border-radius: 8px;
    font-size: 12px;
}

.dark .is-clock-location {
    background: rgb(17 24 39);
}

.is-clock-location-icon {
    width: 16px;
    height: 16px;
}

/* Actions */
.is-clock-actions {
    padding: 16px;
    padding-top: 0;
}

.is-clock-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

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

.is-clock-btn-icon {
    width: 18px;
    height: 18px;
}

.is-clock-btn-primary {
    background: linear-gradient(135deg, rgb(34 197 94) 0%, rgb(22 163 74) 100%);
    color: white;
}

.is-clock-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.is-clock-btn-danger {
    background: linear-gradient(135deg, rgb(239 68 68) 0%, rgb(220 38 38) 100%);
    color: white;
}

.is-clock-btn-danger:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

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

.is-clock-btn-warning:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.is-clock-btn-success {
    background: linear-gradient(135deg, rgb(34 197 94) 0%, rgb(22 163 74) 100%);
    color: white;
}

.is-clock-btn-success:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.is-clock-btn-group {
    display: flex;
    gap: 8px;
}

.is-clock-btn-group .is-clock-btn {
    flex: 1;
    padding: 10px 16px;
}

.is-clock-row-icon-warning {
    background: rgba(245, 158, 11, 0.1);
    color: rgb(217 119 6);
}

.dark .is-clock-row-icon-warning {
    background: rgba(245, 158, 11, 0.2);
    color: rgb(245 158 11);
}

/* Complete Message */
.is-clock-complete-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 10px;
    color: rgb(22 163 74);
    font-weight: 500;
}

.dark .is-clock-complete-message {
    color: rgb(34 197 94);
}

.is-clock-complete-icon {
    width: 20px;
    height: 20px;
}

/* Footer */
.is-clock-footer {
    padding: 12px 16px;
    border-top: 1px solid rgb(229 231 235);
    background: rgb(249 250 251);
}

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

.is-clock-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: rgb(107 114 128);
    text-decoration: none;
    transition: color 0.2s ease;
}

.is-clock-link:hover {
    color: rgb(249 115 22);
}

.is-clock-link-icon {
    width: 16px;
    height: 16px;
}

/* Alert in Panel */
.is-clock-alert {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
}

.is-clock-alert-warning {
    background: rgba(234, 179, 8, 0.1);
}

.is-clock-alert-info {
    background: rgba(59, 130, 246, 0.1);
}

.is-clock-alert-info .is-clock-alert-icon {
    color: rgb(37 99 235);
}

.dark .is-clock-alert-info .is-clock-alert-icon {
    color: rgb(96 165 250);
}

.is-clock-alert-info .is-clock-alert-title {
    color: rgb(37 99 235);
}

.dark .is-clock-alert-info .is-clock-alert-title {
    color: rgb(96 165 250);
}

.is-clock-alert-icon {
    width: 20px;
    height: 20px;
    color: rgb(161 98 7);
    flex-shrink: 0;
}

.dark .is-clock-alert-icon {
    color: rgb(234 179 8);
}

.is-clock-alert-title {
    font-weight: 600;
    font-size: 13px;
    color: rgb(161 98 7);
}

.dark .is-clock-alert-title {
    color: rgb(234 179 8);
}

.is-clock-alert-text {
    font-size: 12px;
    color: rgb(107 114 128);
    margin-top: 2px;
}

/* Backdrop */
.is-clock-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* Clock Status - Two Row Layout */
.is-clock-status {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    background: rgb(249 250 251);
    margin-bottom: 16px;
}

.is-clock-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.is-clock-status-row:first-child {
    /* First row - Icon, Label, Badge */
}

.is-clock-status-row:last-child {
    /* Second row - Time, Hours */
    padding-left: 56px; /* Align with label (icon width 44px + gap 12px) */
}

.is-clock-status-label {
    flex: 1;
    font-weight: 600;
    font-size: 15px;
    color: rgb(17 24 39);
}

.dark .is-clock-status-label {
    color: rgb(243 244 246);
}

.is-clock-status-time {
    font-size: 13px;
    color: rgb(107 114 128);
}

.is-clock-status-hours {
    font-size: 13px;
    color: rgb(34 197 94);
    font-weight: 600;
    margin-left: auto;
}

/* Clock Status - Improved Two Row Layout */
.is-clock-row-1 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.is-clock-row-2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-left: 54px; /* Align with text (44px icon + 10px gap) */
}

.is-clock-time-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgb(243 244 246);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgb(55 65 81);
}

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

.is-clock-hours-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgb(22 163 74);
}

.dark .is-clock-hours-badge {
    background: rgba(34, 197, 94, 0.2);
    color: rgb(74 222 128);
}

.is-clock-status-message {
    font-size: 13px;
    color: rgb(107 114 128);
}

/* Clock Status - Compact Two Row Layout */
.is-clock-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.is-clock-row:first-child {
    border-bottom: 1px solid rgb(229 231 235);
    padding-bottom: 8px;
    margin-bottom: 2px;
}

.dark .is-clock-row:first-child {
    border-color: rgb(55 65 81);
}

/* Mini Icon Box */
.is-clock-mini-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    flex-shrink: 0;
}

.is-clock-mini-success {
    background: rgba(34, 197, 94, 0.15);
    color: rgb(22 163 74);
}

.is-clock-mini-gray {
    background: rgb(243 244 246);
    color: rgb(107 114 128);
}

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

/* Icon sizes */
.is-w-3 { width: 12px; }
.is-h-3 { height: 12px; }

/* Label */
.is-clock-label {
    font-size: 13px;
    font-weight: 600;
    color: rgb(17 24 39);
    flex: 1;
}

.dark .is-clock-label {
    color: rgb(243 244 246);
}

/* Time text */
.is-clock-time {
    font-size: 12px;
    color: rgb(107 114 128);
    flex: 1;
}

/* Pills */
.is-clock-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.is-clock-pill-success {
    background: rgba(34, 197, 94, 0.1);
    color: rgb(22 163 74);
}

.is-clock-pill-info {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(37 99 235);
}

.is-clock-pill-warning {
    background: rgba(234, 179, 8, 0.1);
    color: rgb(161 98 7);
}

.dark .is-clock-pill-success {
    background: rgba(34, 197, 94, 0.2);
    color: rgb(74 222 128);
}

.dark .is-clock-pill-info {
    background: rgba(59, 130, 246, 0.2);
    color: rgb(96 165 250);
}

.dark .is-clock-pill-warning {
    background: rgba(234, 179, 8, 0.2);
    color: rgb(250 204 21);
}

/* ==========================================================================
   Clock Widget - Fixed Styles (no conflicts)
   ========================================================================== */

/* Header Time (orange section) */
.is-clock-header-time {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    color: white;
}

.is-clock-header-date {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 4px;
    color: white;
}

/* Status container - Two Row Layout */
.is-clock-status {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgb(249 250 251);
    margin-bottom: 12px;
}

.dark .is-clock-status {
    background: rgb(17 24 39);
}

/* Each row in status */
.is-clock-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.is-clock-row:first-child {
    border-bottom: 1px solid rgb(229 231 235);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.dark .is-clock-row:first-child {
    border-color: rgb(55 65 81);
}

/* Row Icon - Fixed size box */
.is-clock-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 5px;
    flex-shrink: 0;
}

.is-clock-row-icon-success {
    background: rgba(34, 197, 94, 0.15);
    color: rgb(22 163 74);
}

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

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

/* Small icon size */
.is-icon-sm {
    width: 12px;
    height: 12px;
}

/* Row Label - takes remaining space */
.is-clock-row-label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .is-clock-row-label {
    color: rgb(243 244 246);
}

/* Row Text - takes remaining space */
.is-clock-row-text {
    flex: 1;
    font-size: 12px;
    color: rgb(107 114 128);
}

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

/* Row Badge - Fixed width for alignment */
.is-clock-row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    text-align: center;
}

.is-clock-row-badge-success {
    background: rgba(34, 197, 94, 0.1);
    color: rgb(22 163 74);
}

.is-clock-row-badge-info {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(37 99 235);
}

.is-clock-row-badge-warning {
    background: rgba(234, 179, 8, 0.1);
    color: rgb(161 98 7);
}

.dark .is-clock-row-badge-success {
    background: rgba(34, 197, 94, 0.2);
    color: rgb(74 222 128);
}

.dark .is-clock-row-badge-info {
    background: rgba(59, 130, 246, 0.2);
    color: rgb(96 165 250);
}

.dark .is-clock-row-badge-warning {
    background: rgba(234, 179, 8, 0.2);
    color: rgb(250 204 21);
}

/* Form Field Label */
.is-clock-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgb(107 114 128);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Icon Background Containers (for stat cards, headers)
   ========================================================================== */

.is-icon-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 12px;
}

.is-icon-bg-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
}

.is-icon-bg-primary {
    background: rgba(234, 88, 12, 0.1);
}

.is-icon-bg-success {
    background: rgba(22, 163, 74, 0.15);
}

.is-icon-bg-danger {
    background: rgba(220, 38, 38, 0.15);
}

.is-icon-bg-warning {
    background: rgba(234, 88, 12, 0.15);
}

.is-icon-bg-info {
    background: rgba(59, 130, 246, 0.15);
}

.is-icon-bg-purple {
    background: rgba(168, 85, 247, 0.15);
}

.dark .is-icon-bg-primary { background: rgba(234, 88, 12, 0.2); }
.dark .is-icon-bg-success { background: rgba(22, 163, 74, 0.25); }
.dark .is-icon-bg-danger { background: rgba(220, 38, 38, 0.25); }
.dark .is-icon-bg-warning { background: rgba(234, 88, 12, 0.25); }
.dark .is-icon-bg-info { background: rgba(59, 130, 246, 0.25); }
.dark .is-icon-bg-purple { background: rgba(168, 85, 247, 0.25); }

/* ==========================================================================
   Stat Labels (uppercase small text)
   ========================================================================== */

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

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

/* ==========================================================================
   Gradient Backgrounds
   ========================================================================== */

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

.is-gradient-success {
    background: linear-gradient(135deg, rgb(22 101 52) 0%, rgb(34 197 94) 100%);
}

.is-gradient-danger {
    background: linear-gradient(135deg, rgb(185 28 28) 0%, rgb(239 68 68) 100%);
}

.is-gradient-info {
    background: linear-gradient(135deg, rgb(30 64 175) 0%, rgb(59 130 246) 100%);
}

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