/**
 * ImmigraSuite Admin - Components
 * Section Cards, Buttons, Tabs, Tables, Modals, Forms, Messages
 */

/* ==========================================================================
   Section Cards (White with shadow)
   ========================================================================== */

.is-section-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid rgb(229 231 235);
    padding: 24px;
}

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

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

/* ==========================================================================
   Buttons
   ========================================================================== */

.is-btn {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    transition: opacity 0.2s;
}

.is-btn:hover {
    opacity: 0.9;
}

.is-btn-sm {
    padding: 6px 14px;
    font-size: 13px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.is-btn-lg {
    padding: 10px 24px;
    font-size: 14px;
}

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

.is-btn-danger {
    background: rgb(239 68 68);
    color: white;
}

.is-btn-success {
    background: rgb(34 197 94);
    color: white;
}

.is-btn-secondary {
    background: rgb(243 244 246);
    color: rgb(55 65 81);
    border: 1px solid rgb(209 213 219);
}

.is-btn-ghost {
    background: none;
    color: rgb(107 114 128);
    padding: 4px;
}

.is-btn-icon {
    padding: 6px;
    border-radius: 6px;
}

.is-btn-icon-primary {
    background: rgb(234 88 12) !important;
    color: white !important;
    border: none;
}

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

.is-btn.is-btn-icon {
    padding: 8px;
    min-width: auto;
    width: 36px;
    height: 36px;
}

.dark .is-btn-secondary {
    background: rgb(55 65 81);
    color: rgb(209 213 219);
    border-color: rgb(75 85 99);
}

/* Empty State */
.is-empty-state {
    display: flex;
    align-items: center;
    gap: 12px;
}

.is-empty-state-text {
    color: rgb(107 114 128);
}

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

/* Icon Sizes */
.is-icon-sm {
    width: 16px;
    height: 16px;
}

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

.is-icon-lg {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.is-tabs-nav {
    display: flex;
    gap: 32px;
    padding: 0 24px;
    border-bottom: 1px solid rgb(229 231 235);
}

.is-tab {
    padding: 16px 4px;
    font-size: 14px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: rgb(107 114 128);
}

.is-tab:hover {
    color: rgb(234 88 12);
}

.is-tab-active {
    color: rgb(234 88 12);
    border-bottom-color: rgb(234 88 12);
}

.is-tab-count {
    margin-left: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
    background: rgb(243 244 246);
    color: rgb(107 114 128);
}

.is-tab-count-active {
    background: rgb(255 237 213);
    color: rgb(234 88 12);
}

.is-tab-content {
    padding: 24px;
}

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

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

.dark .is-tab-active {
    color: rgb(234 88 12);
}

.dark .is-tab-count {
    background: rgb(55 65 81);
    color: rgb(156 163 175);
}

/* ==========================================================================
   Tables
   ========================================================================== */

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

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

.is-th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 500;
    color: rgb(107 114 128);
    text-transform: uppercase;
    border-bottom: 1px solid rgb(229 231 235);
}

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

.is-td {
    padding: 12px 16px;
    font-size: 14px;
    color: rgb(55 65 81);
    border-bottom: 1px solid rgb(243 244 246);
}

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

.is-tr:last-child .is-td {
    border-bottom: none;
}

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

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

/* ==========================================================================
   Modals
   ========================================================================== */

.is-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.is-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.is-modal {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.is-modal-lg {
    max-width: 700px;
}

.is-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgb(229 231 235);
}

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

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

.is-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgb(229 231 235);
    background: rgb(249 250 251);
}

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

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

.dark .is-modal-footer {
    background: rgb(31 41 55);
}

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

/* ==========================================================================
   Badges / Tags
   ========================================================================== */

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

.is-badge-sm {
    padding: 2px 8px;
    font-size: 11px;
}

.is-badge-success {
    background: rgb(220 252 231);
    color: rgb(22 101 52);
}

.is-badge-warning {
    background: rgb(254 249 195);
    color: rgb(133 77 14);
}

.is-badge-danger {
    background: rgb(254 226 226);
    color: rgb(153 27 27);
}

.is-badge-info {
    background: rgb(255 237 213);
    color: rgb(154 52 18);
}

.is-badge-primary {
    background: rgb(219 234 254);
    color: rgb(30 64 175);
}

.is-badge-gray {
    background: rgb(243 244 246);
    color: rgb(55 65 81);
}

/* Empty inline state (for sections with no items) */
.is-empty-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgb(249 250 251);
    border-radius: 8px;
    border: 1px dashed rgb(229 231 235);
}

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

/* ==========================================================================
   Form Controls (Extended)
   ========================================================================== */

.is-form-select-sm {
    display: block;
    width: 100%;
    font-size: 13px;
    padding: 6px 28px 6px 10px;
    border: 1px solid rgb(209 213 219);
    border-radius: 6px;
    background-color: white;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    cursor: pointer;
    height: 36px;
}

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

.is-form-label-sm {
    display: block;
    font-size: 11px;
    color: rgb(107 114 128);
    margin-bottom: 2px;
}

.is-form-error {
    margin-top: 4px;
    font-size: 14px;
    color: rgb(220 38 38);
}

/* Form Input/Select Error State */
.is-form-input-error,
.is-form-select-error,
.is-form-textarea-error {
    border-color: rgb(220 38 38) !important;
    background-color: rgb(254 242 242) !important;
}

.is-form-input-error:focus,
.is-form-select-error:focus,
.is-form-textarea-error:focus {
    border-color: rgb(220 38 38) !important;
    box-shadow: 0 0 0 1px rgb(220 38 38) !important;
}

.dark .is-form-input-error,
.dark .is-form-select-error,
.dark .is-form-textarea-error {
    background-color: rgba(220, 38, 38, 0.1) !important;
}

.is-form-group {
    margin-bottom: 16px;
}

.is-form-group-sm {
    margin-bottom: 12px;
}

/* ==========================================================================
   File Upload / Drag Drop
   ========================================================================== */

.is-drag-drop {
    border: 2px dashed rgb(209 213 219);
    border-radius: 8px;
    padding: 32px 16px;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.is-drag-drop:hover,
.is-drag-drop-active {
    border-color: rgb(234 88 12);
    background: rgb(255 247 237);
}

.dark .is-drag-drop {
    border-color: rgb(75 85 99);
}

.dark .is-drag-drop:hover,
.dark .is-drag-drop-active {
    background: rgba(234, 88, 12, 0.1);
}

/* ==========================================================================
   Timeline (Extended)
   ========================================================================== */

.is-timeline-card {
    display: flex;
    gap: 16px;
    background: white;
    border: 1px solid rgb(229 231 235);
    border-radius: 8px;
    padding: 16px;
    transition: box-shadow 0.2s;
}

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

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

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

.is-timeline-icon-blue {
    background: rgb(219 234 254);
    color: rgb(37 99 235);
}

.is-timeline-icon-orange {
    background: rgb(255 237 213);
    color: rgb(234 88 12);
}

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

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

.is-timeline-icon-purple {
    background: rgb(243 232 255);
    color: rgb(168 85 247);
}

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

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

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

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

/* ==========================================================================
   Activity / History Items
   ========================================================================== */

.is-activity-item {
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid rgb(229 231 235);
}

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

/* ==========================================================================
   Chat / Messages
   ========================================================================== */

.is-chat-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 500px;
    overflow-y: auto;
    padding: 16px;
    background: rgb(249 250 251);
    border-radius: 8px;
}

.is-chat-message {
    max-width: 80%;
    border-radius: 8px;
    padding: 12px;
}

.is-chat-inbound {
    background: white;
    color: rgb(17 24 39);
    align-self: flex-start;
}

.is-chat-outbound {
    background: rgb(249 115 22);
    color: white;
    align-self: flex-end;
}

.is-chat-time {
    font-size: 12px;
    margin-top: 4px;
}

.is-chat-time-inbound {
    color: rgb(156 163 175);
}

.is-chat-time-outbound {
    color: rgb(254 215 170);
}

.dark .is-chat-container {
    background: rgb(31 41 55);
}

.dark .is-chat-inbound {
    background: rgb(17 24 39);
    color: rgb(243 244 246);
}

/* ==========================================================================
   Misc / Helpers
   ========================================================================== */

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

.is-title-md {
    font-size: 16px;
    font-weight: 400;
    color: rgb(17 24 39);
    margin: 0;
}

.is-section-title {
    font-size: 16px;
    font-weight: 400;
    color: rgb(17 24 39);
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid rgb(234 88 12);
    margin-bottom: 16px;
}

.is-title-sm {
    font-size: 16px;
    font-weight: 500;
    color: rgb(17 24 39);
    margin: 0;
}

.is-subtitle {
    font-size: 14px;
    font-style: italic;
    color: rgb(107 114 128);
}

.is-min-w-0 {
    min-width: 0;
}

.is-w-full {
    width: 100%;
}

.is-m-0 {
    margin: 0;
}

.is-p-6 {
    padding: 24px;
}

.is-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.is-whitespace-pre {
    white-space: pre-wrap;
}

.is-accent-primary {
    accent-color: rgb(234 88 12);
}

.is-no-decoration {
    text-decoration: none;
}

.dark .is-title-lg,
.dark .is-title-md,
.dark .is-title-sm,
.dark .is-section-title {
    color: rgb(243 244 246);
}

/* ==========================================================================
   Loading / Spinner
   ========================================================================== */

@keyframes is-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.is-spinner {
    animation: is-spin 1s linear infinite;
}

/* ==========================================================================
   Action Links
   ========================================================================== */

.is-action-link {
    color: rgb(234 88 12);
    text-decoration: none;
}

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

.is-action-link-danger {
    color: rgb(220 38 38);
    background: none;
    border: none;
    cursor: pointer;
}

/* ==========================================================================
   Widget - Progress Summary
   ========================================================================== */

.is-progress-summary {
    text-align: center;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgb(249 250 251), rgb(243 244 246));
    border-radius: 12px;
}

.is-progress-value-huge {
    font-size: 48px;
    font-weight: 700;
}

.is-progress-bar-lg {
    height: 10px;
    background-color: rgb(229 231 235);
    border-radius: 5px;
    overflow: hidden;
}

.is-progress-fill-lg {
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s ease;
}

.dark .is-progress-summary {
    background: linear-gradient(135deg, rgb(31 41 55), rgb(17 24 39));
}

/* ==========================================================================
   Widget - Stat Boxes (Grid)
   ========================================================================== */

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

.is-stat-box-value {
    font-size: 28px;
    font-weight: 700;
}

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

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

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

/* ==========================================================================
   Widget - Current Stage Highlight
   ========================================================================== */

.is-current-stage {
    margin-bottom: 24px;
    padding: 16px;
    background-color: rgb(239 246 255);
    border-radius: 8px;
    border: 1px solid rgb(191 219 254);
}

.is-current-stage-icon {
    width: 40px;
    height: 40px;
    background-color: rgb(59 130 246);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.is-current-stage-title {
    font-size: 14px;
    font-weight: 600;
    color: rgb(30 64 175);
}

.is-current-stage-progress {
    font-size: 12px;
    color: rgb(59 130 246);
    margin-top: 2px;
}

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

/* ==========================================================================
   Widget - Stage Cards
   ========================================================================== */

.is-stage-card {
    padding: 14px;
    border-radius: 8px;
    border-left: 4px solid;
}

.is-stage-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

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

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

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

.is-stage-status-badge {
    padding: 2px 8px;
    background-color: white;
    border-radius: 4px;
    font-weight: 500;
}

.is-overdue-badge {
    font-size: 10px;
    padding: 2px 6px;
    background-color: rgb(254 226 226);
    color: rgb(185 28 28);
    border-radius: 4px;
    font-weight: 500;
}

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

.dark .is-stage-tasks {
    color: rgb(156 163 175);
}

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

.dark .is-stage-status-badge {
    background-color: rgb(31 41 55);
}

/* Status-specific stage card backgrounds */
.is-stage-completed { background-color: rgb(240 253 244); border-color: rgb(34 197 94); }
.is-stage-in-progress { background-color: rgb(239 246 255); border-color: rgb(59 130 246); }
.is-stage-blocked { background-color: rgb(254 242 242); border-color: rgb(239 68 68); }
.is-stage-skipped { background-color: rgb(254 252 232); border-color: rgb(234 179 8); }
.is-stage-pending { background-color: rgb(249 250 251); border-color: rgb(156 163 175); }

.dark .is-stage-completed { background-color: rgba(34, 197, 94, 0.1); }
.dark .is-stage-in-progress { background-color: rgba(59, 130, 246, 0.1); }
.dark .is-stage-blocked { background-color: rgba(239, 68, 68, 0.1); }
.dark .is-stage-skipped { background-color: rgba(234, 179, 8, 0.1); }
.dark .is-stage-pending { background-color: rgba(156, 163, 175, 0.1); }

/* ==========================================================================
   Start Process Modal
   ========================================================================== */

.is-start-process-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgb(239 246 255);
    border: 1px solid rgb(191 219 254);
    border-radius: 10px;
    margin-bottom: 16px;
}

.is-start-process-info .is-info-icon {
    flex-shrink: 0;
    color: rgb(59 130 246);
}

.is-start-process-info .is-info-text {
    font-size: 14px;
    color: rgb(30 64 175);
    line-height: 1.5;
}

.is-start-process-warning {
    padding: 16px;
    background: rgb(254 243 199);
    border: 1px solid rgb(252 211 77);
    border-radius: 10px;
    margin-bottom: 16px;
}

.is-start-process-warning .is-warning-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: rgb(146 64 14);
    margin-bottom: 8px;
}

.is-start-process-warning .is-warning-header svg {
    color: rgb(217 119 6);
}

.is-start-process-warning .is-warning-list {
    margin: 0;
    padding-left: 24px;
    color: rgb(146 64 14);
    font-size: 14px;
}

.is-start-process-warning .is-warning-list li {
    margin-bottom: 4px;
}

.is-start-process-warning .is-warning-note {
    margin: 12px 0 0 0;
    font-size: 13px;
    color: rgb(180 83 9);
    font-style: italic;
}

/* Dark mode */
.dark .is-start-process-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.dark .is-start-process-info .is-info-text {
    color: rgb(147 197 253);
}

.dark .is-start-process-warning {
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(217, 119, 6, 0.4);
}

.dark .is-start-process-warning .is-warning-header {
    color: rgb(253 224 71);
}

.dark .is-start-process-warning .is-warning-list {
    color: rgb(254 240 138);
}

.dark .is-start-process-warning .is-warning-note {
    color: rgb(253 224 71);
}



/* ==========================================================================
   Table text tones — theme-aware
   ==========================================================================
   Stacked table cells (Inwards, Deposit Requests, Credit Notes, Tax
   Invoices) render their own markup with inline styles. Colour must NOT be
   among those styles: a near-black hex reads fine on white and disappears
   entirely on black, which is exactly what happened to the DR number and
   the Total figure on the Deposit Requests list, and to the credit-note
   number and Source figure on the Credit Notes list.

   Growmore runs dark mode daily, so any text tone a table sets goes here
   with a .dark variant. Mid-tones (#6b7280, #9ca3af) and semantic colours
   (success green, warning amber) are fine inline — they read on both. It
   is only the near-blacks that vanish. */

.is-table-strong { color: rgb(15 23 42); }
.is-table-body   { color: rgb(51 65 85); }
.is-table-muted  { color: rgb(100 116 139); }

.dark .is-table-strong { color: rgb(241 245 249); }
.dark .is-table-body   { color: rgb(203 213 225); }
.dark .is-table-muted  { color: rgb(148 163 184); }