/* ============================================================================
   shadcn-ui.css — Soft, compact UI primitives inspired by shadcn/ui.
   Namespaced with .sui-* so it never leaks into legacy pages.
   Use by wrapping a refactored page in <div class="sui-scope"> ... </div>
   ============================================================================ */

.sui-scope {
    /* design tokens */
    --sui-bg:            #f8fafc;
    --sui-card:          #ffffff;
    --sui-card-alt:      #f9fafb;
    --sui-border:        #e5e7eb;
    --sui-border-strong: #d1d5db;
    --sui-muted:         #f1f5f9;
    --sui-muted-fg:      #64748b;
    --sui-fg:            #0f172a;
    --sui-fg-soft:       #334155;

    --sui-primary:       #16a34a;        /* keeps brand green */
    --sui-primary-fg:    #ffffff;
    --sui-primary-soft:  #dcfce7;
    --sui-primary-hover: #15803d;

    --sui-danger:        #dc2626;
    --sui-warning:       #f59e0b;
    --sui-info:          #0ea5e9;

    --sui-radius-sm: 6px;
    --sui-radius:    8px;
    --sui-radius-lg: 12px;

    --sui-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --sui-shadow:    0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --sui-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .05);

    --sui-text-xs: 11px;
    --sui-text-sm: 12.5px;
    --sui-text-md: 14px;
    --sui-text-lg: 16px;

    --sui-gap-1: 4px;
    --sui-gap-2: 8px;
    --sui-gap-3: 12px;
    --sui-gap-4: 16px;
    --sui-gap-5: 20px;
    --sui-gap-6: 24px;

    color: var(--sui-fg);
    font-size: var(--sui-text-md);
    line-height: 1.45;
}

/* ---- Layout helpers ---- */
.sui-scope .sui-row     { display: flex; flex-wrap: wrap; gap: var(--sui-gap-4); margin: 0; }
.sui-scope .sui-col     { flex: 1 1 0; min-width: 0; }
.sui-scope .sui-stack   { display: flex; flex-direction: column; gap: var(--sui-gap-3); }
.sui-scope .sui-inline  { display: inline-flex; align-items: center; gap: var(--sui-gap-2); }
.sui-scope .sui-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sui-gap-3); }

/* ---- Card ---- */
.sui-scope .sui-card {
    background: var(--sui-card);
    border: 1px solid var(--sui-border);
    border-radius: var(--sui-radius-lg);
    box-shadow: var(--sui-shadow-sm);
    overflow: hidden;
}
.sui-scope .sui-card-header {
    padding: var(--sui-gap-3) var(--sui-gap-4);
    border-bottom: 1px solid var(--sui-border);
    background: var(--sui-card-alt);
}
.sui-scope .sui-card-title {
    margin: 0;
    font-size: var(--sui-text-md);
    font-weight: 600;
    color: var(--sui-fg);
    letter-spacing: -.01em;
}
.sui-scope .sui-card-desc {
    margin: 2px 0 0;
    font-size: var(--sui-text-sm);
    color: var(--sui-muted-fg);
}
.sui-scope .sui-card-body    { padding: var(--sui-gap-4); }
.sui-scope .sui-card-body-sm { padding: var(--sui-gap-3); }
.sui-scope .sui-card-footer {
    padding: var(--sui-gap-3) var(--sui-gap-4);
    border-top: 1px solid var(--sui-border);
    background: var(--sui-card-alt);
}

/* ---- Form controls ---- */
.sui-scope .sui-label {
    display: block;
    font-size: var(--sui-text-sm);
    font-weight: 500;
    color: var(--sui-fg-soft);
    margin-bottom: 6px;
}
.sui-scope .sui-input,
.sui-scope .sui-select,
.sui-scope .sui-textarea {
    width: 100%;
    height: 34px;
    padding: 6px 10px;
    font-size: var(--sui-text-sm);
    color: var(--sui-fg);
    background: var(--sui-card);
    border: 1px solid var(--sui-border-strong);
    border-radius: var(--sui-radius-sm);
    box-shadow: var(--sui-shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.sui-scope .sui-textarea { height: auto; min-height: 72px; }
.sui-scope .sui-input:focus,
.sui-scope .sui-select:focus,
.sui-scope .sui-textarea:focus {
    outline: none;
    border-color: var(--sui-primary);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}

/* Input group (icon + field) */
.sui-scope .sui-field {
    position: relative;
    display: flex;
    align-items: center;
}
.sui-scope .sui-field .sui-field-icon {
    position: absolute;
    left: 10px;
    color: var(--sui-muted-fg);
    font-size: 13px;
    pointer-events: none;
}
.sui-scope .sui-field .sui-input { padding-left: 30px; }

/* ---- Buttons ---- */
.sui-scope .sui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    font-size: var(--sui-text-sm);
    font-weight: 500;
    line-height: 1;
    color: var(--sui-fg);
    background: var(--sui-card);
    border: 1px solid var(--sui-border-strong);
    border-radius: var(--sui-radius-sm);
    box-shadow: var(--sui-shadow-sm);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .05s;
    text-decoration: none;
}
.sui-scope .sui-btn:hover { background: var(--sui-muted); }
.sui-scope .sui-btn:active { transform: translateY(1px); }
.sui-scope .sui-btn:disabled,
.sui-scope .sui-btn.disabled { opacity: .55; cursor: not-allowed; }

.sui-scope .sui-btn-sm  { height: 28px; padding: 0 10px; font-size: var(--sui-text-xs); }
.sui-scope .sui-btn-lg  { height: 40px; padding: 0 16px; font-size: var(--sui-text-md); }
.sui-scope .sui-btn-icon { width: 34px; padding: 0; }

.sui-scope .sui-btn-primary {
    background: var(--sui-primary);
    color: var(--sui-primary-fg);
    border-color: var(--sui-primary);
}
.sui-scope .sui-btn-primary:hover {
    background: var(--sui-primary-hover);
    border-color: var(--sui-primary-hover);
    color: #fff;
}
.sui-scope .sui-btn-ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.sui-scope .sui-btn-ghost:hover { background: var(--sui-muted); }
.sui-scope .sui-btn-outline { background: var(--sui-card); }
.sui-scope .sui-btn-danger {
    background: var(--sui-danger);
    color: #fff;
    border-color: var(--sui-danger);
}
.sui-scope .sui-btn-danger:hover { filter: brightness(.92); }

/* ---- Floating action button ---- */
.sui-scope .sui-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--sui-primary);
    color: #fff;
    border: none;
    box-shadow: 0 10px 25px rgba(22, 163, 74, .35), 0 4px 10px rgba(15, 23, 42, .1);
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.sui-scope .sui-fab:hover {
    background: var(--sui-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(22, 163, 74, .4), 0 6px 14px rgba(15, 23, 42, .12);
}

/* ---- Pill FAB (icon nempel di kiri + label) ---- */
.sui-scope .sui-fab-pill {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 4px 22px 4px 4px;
    background: var(--sui-primary);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
    border: none;
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(22, 163, 74, .35), 0 4px 10px rgba(15, 23, 42, .1);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s;
    white-space: nowrap;
}
.sui-scope .sui-fab-pill:hover {
    background: var(--sui-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(22, 163, 74, .4), 0 6px 14px rgba(15, 23, 42, .12);
    color: #fff;
}
.sui-scope .sui-fab-pill:active { transform: translateY(0); }
.sui-scope .sui-fab-pill-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}

/* ---- Badges ---- */
.sui-scope .sui-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--sui-text-xs);
    font-weight: 500;
    line-height: 1.4;
    border-radius: 999px;
    background: var(--sui-muted);
    color: var(--sui-fg-soft);
    border: 1px solid var(--sui-border);
}
.sui-scope .sui-badge-primary { background: var(--sui-primary-soft); color: var(--sui-primary-hover); border-color: transparent; }
.sui-scope .sui-badge-danger  { background: #fee2e2; color: #b91c1c; border-color: transparent; }
.sui-scope .sui-badge-warn    { background: #fef3c7; color: #b45309; border-color: transparent; }
.sui-scope .sui-badge-info    { background: #e0f2fe; color: #0369a1; border-color: transparent; }

/* ---- Tabs (segmented) ---- */
.sui-scope .sui-tabs {
    display: inline-flex;
    padding: 4px;
    background: var(--sui-muted);
    border: 1px solid var(--sui-border);
    border-radius: var(--sui-radius);
    gap: 2px;
}
.sui-scope .sui-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: var(--sui-text-sm);
    font-weight: 500;
    color: var(--sui-muted-fg);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s, box-shadow .15s;
}
.sui-scope .sui-tab:hover { color: var(--sui-fg); }
.sui-scope .sui-tab.active {
    background: var(--sui-card);
    color: var(--sui-fg);
    box-shadow: var(--sui-shadow-sm);
}

/* ---- Stat / KPI tile ---- */
.sui-scope .sui-stat {
    display: flex;
    align-items: center;
    gap: var(--sui-gap-3);
    padding: var(--sui-gap-3) var(--sui-gap-4);
    background: var(--sui-card);
    border: 1px solid var(--sui-border);
    border-radius: var(--sui-radius-lg);
    box-shadow: var(--sui-shadow-sm);
}
.sui-scope .sui-stat-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sui-radius);
    background: var(--sui-primary-soft);
    color: var(--sui-primary-hover);
    font-size: 18px;
}
.sui-scope .sui-stat-icon img { max-width: 24px; max-height: 24px; }
.sui-scope .sui-stat-body  { display: flex; flex-direction: column; min-width: 0; }
.sui-scope .sui-stat-label {
    font-size: var(--sui-text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sui-muted-fg);
    font-weight: 500;
}
.sui-scope .sui-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--sui-fg);
    letter-spacing: -.01em;
}
.sui-scope .sui-stat-foot {
    font-size: var(--sui-text-xs);
    color: var(--sui-muted-fg);
    margin-top: 2px;
}

/* ---- Tables (DataTables-friendly) ---- */
.sui-scope .sui-table-wrap {
    border: 1px solid var(--sui-border);
    border-radius: var(--sui-radius);
    overflow: hidden;
    background: var(--sui-card);
}
.sui-scope .sui-table-wrap > table,
.sui-scope table.sui-table {
    width: 100% !important;
    margin: 0 !important;
    font-size: var(--sui-text-sm);
    border-collapse: separate;
    border-spacing: 0;
}
.sui-scope .sui-table-wrap thead th,
.sui-scope table.sui-table thead th {
    background: var(--sui-card-alt);
    color: var(--sui-muted-fg);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--sui-text-xs);
    letter-spacing: .04em;
    border-bottom: 1px solid var(--sui-border) !important;
    border-top: none !important;
    padding: 10px 12px !important;
}
.sui-scope .sui-table-wrap tbody td,
.sui-scope table.sui-table tbody td {
    padding: 10px 12px !important;
    border-top: 1px solid var(--sui-border) !important;
    color: var(--sui-fg-soft);
    vertical-align: middle;
}
.sui-scope .sui-table-wrap tbody tr:hover td,
.sui-scope table.sui-table tbody tr:hover td { background: var(--sui-card-alt); }

/* DataTables overrides inside scope */
.sui-scope .dataTables_wrapper .dataTables_length,
.sui-scope .dataTables_wrapper .dataTables_filter,
.sui-scope .dataTables_wrapper .dataTables_info,
.sui-scope .dataTables_wrapper .dataTables_paginate {
    font-size: var(--sui-text-sm);
    color: var(--sui-muted-fg);
    padding: 8px 4px;
}
.sui-scope .dataTables_wrapper .dataTables_filter input,
.sui-scope .dataTables_wrapper .dataTables_length select {
    height: 30px;
    padding: 4px 8px;
    font-size: var(--sui-text-sm);
    background: var(--sui-card);
    border: 1px solid var(--sui-border-strong);
    border-radius: var(--sui-radius-sm);
    box-shadow: var(--sui-shadow-sm);
}
.sui-scope .pagination > li > a,
.sui-scope .pagination > li > span {
    color: var(--sui-fg-soft);
    border: 1px solid var(--sui-border);
    background: var(--sui-card);
    padding: 4px 10px;
    font-size: var(--sui-text-sm);
}
.sui-scope .pagination > .active > a,
.sui-scope .pagination > .active > a:focus,
.sui-scope .pagination > .active > a:hover,
.sui-scope .pagination > .active > span,
.sui-scope .pagination > .active > span:focus,
.sui-scope .pagination > .active > span:hover {
    background: var(--sui-primary);
    border-color: var(--sui-primary);
    color: #fff;
}

/* ----------------------------------------------------------------------------
   Select2 — shadcn-style
   Two surfaces to skin:
   1. The closed control (lives inside .sui-scope)
   2. The open dropdown (Select2 appends it to <body>, so the selectors below
      are NOT scoped under .sui-scope; they activate only when the container
      has the "sui-select2" / "sui-select2-drop" class added at init time)
   ---------------------------------------------------------------------------- */

/* Closed control — inside .sui-scope */
.sui-scope .select2-container--default .select2-selection--single,
.sui-scope .select2-container--default .select2-selection--multiple {
    min-height: 34px;
    border: 1px solid var(--sui-border-strong);
    border-radius: var(--sui-radius-sm);
    background: var(--sui-card);
    box-shadow: var(--sui-shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.sui-scope .select2-container--default .select2-selection--single {
    height: 34px;
    padding: 0;
}
.sui-scope .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    color: var(--sui-fg);
    font-size: var(--sui-text-sm);
    padding-left: 12px;
    padding-right: 28px;
}
.sui-scope .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--sui-muted-fg);
}
.sui-scope .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
    right: 6px;
}
.sui-scope .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--sui-muted-fg) transparent transparent transparent;
}
.sui-scope .select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent var(--sui-muted-fg) transparent;
}
.sui-scope .select2-container--default.select2-container--focus .select2-selection--single,
.sui-scope .select2-container--default.select2-container--focus .select2-selection--multiple,
.sui-scope .select2-container--default.select2-container--open .select2-selection--single,
.sui-scope .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--sui-primary);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
    outline: none;
}
.sui-scope .select2-container--default .select2-selection--multiple {
    padding: 2px 6px;
}
.sui-scope .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--sui-primary-soft);
    color: var(--sui-primary-hover);
    border: none;
    border-radius: 999px;
    padding: 2px 10px 2px 22px;
    font-size: var(--sui-text-xs);
    margin: 3px 4px 3px 0;
    line-height: 1.6;
}
.sui-scope .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--sui-primary-hover);
    margin-right: 6px;
    position: absolute;
    left: 8px;
}

/* Open dropdown — NOT scoped (Select2 appends to body).
   Activated via dropdownCssClass: 'sui-select2-drop' at init time. */
.select2-container.sui-select2-drop {
    z-index: 1060;
}
.select2-container.sui-select2-drop .select2-dropdown {
    border: 1px solid var(--sui-border-strong, #d1d5db);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .12), 0 4px 10px rgba(15, 23, 42, .06);
    overflow: hidden;
    background: #ffffff;
    padding: 4px;
}
.select2-container.sui-select2-drop .select2-search--dropdown {
    padding: 4px;
}
.select2-container.sui-select2-drop .select2-search--dropdown .select2-search__field {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12.5px;
    color: #0f172a;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.select2-container.sui-select2-drop .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}
.select2-container.sui-select2-drop .select2-results__options {
    max-height: 280px;
    padding: 2px 0;
}
.select2-container.sui-select2-drop .select2-results__option {
    padding: 7px 12px;
    font-size: 12.5px;
    color: #334155;
    border-radius: 6px;
    margin: 1px 0;
    line-height: 1.4;
    transition: background .12s, color .12s;
}
.select2-container.sui-select2-drop .select2-results__option--highlighted[aria-selected],
.select2-container.sui-select2-drop .select2-results__option--highlighted {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
.select2-container.sui-select2-drop .select2-results__option[aria-selected=true] {
    background: #dcfce7 !important;
    color: #15803d !important;
    font-weight: 500;
}
.select2-container.sui-select2-drop .select2-results__option[aria-selected=true].select2-results__option--highlighted {
    background: #bbf7d0 !important;
}
.select2-container.sui-select2-drop .select2-results__message {
    color: #94a3b8;
    font-size: 12.5px;
    padding: 8px 12px;
}

/* ---- Spacing/utility ---- */
.sui-scope .sui-mt-1 { margin-top: var(--sui-gap-1); }
.sui-scope .sui-mt-2 { margin-top: var(--sui-gap-2); }
.sui-scope .sui-mt-3 { margin-top: var(--sui-gap-3); }
.sui-scope .sui-mt-4 { margin-top: var(--sui-gap-4); }
.sui-scope .sui-mb-2 { margin-bottom: var(--sui-gap-2); }
.sui-scope .sui-mb-3 { margin-bottom: var(--sui-gap-3); }
.sui-scope .sui-mb-4 { margin-bottom: var(--sui-gap-4); }
.sui-scope .sui-text-muted { color: var(--sui-muted-fg); }
.sui-scope .sui-text-sm    { font-size: var(--sui-text-sm); }
.sui-scope .sui-text-xs    { font-size: var(--sui-text-xs); }
.sui-scope .sui-divider    { height: 1px; background: var(--sui-border); margin: var(--sui-gap-3) 0; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .sui-scope .sui-row { gap: var(--sui-gap-3); }
    .sui-scope .sui-col-resp { flex-basis: 100%; }
}