/* ASPAK Connect v4.9.1
 * Theme-aware text + global text-shadow removal + credential page dark mode.
 */

/* Requirement: hilangkan seluruh bayangan teks di aplikasi. */
html body *,
html body *::before,
html body *::after {
    text-shadow: none !important;
}

/* Jangan biarkan browser memaksa warna teks form yang tidak sesuai tema. */
input, select, textarea, button {
    text-shadow: none !important;
}

/* Deteksi dark mode dilakukan juga oleh JS melalui class aspak-v491-dark. */
html.aspak-v491-dark {
    --aspak-v491-bg: #071524;
    --aspak-v491-surface: #0f2238;
    --aspak-v491-surface-2: #132b46;
    --aspak-v491-border: #294761;
    --aspak-v491-text: #f2f7fc;
    --aspak-v491-muted: #a9bdd1;
    --aspak-v491-link: #63b3ff;
    --aspak-v491-input: #0b1e32;
}

/* Fix utama halaman Kredensial API pada mode gelap. */
html.aspak-v491-dark .v490-card,
html.aspak-v491-dark .v490-modal-panel {
    background: var(--aspak-v491-surface) !important;
    color: var(--aspak-v491-text) !important;
    border-color: var(--aspak-v491-border) !important;
}

html.aspak-v491-dark .v490-card h1,
html.aspak-v491-dark .v490-card h2,
html.aspak-v491-dark .v490-card h3,
html.aspak-v491-dark .v490-card p,
html.aspak-v491-dark .v490-card span,
html.aspak-v491-dark .v490-card td,
html.aspak-v491-dark .v490-card th,
html.aspak-v491-dark .v490-card label,
html.aspak-v491-dark .v490-card li,
html.aspak-v491-dark .v490-card code,
html.aspak-v491-dark .v490-modal-panel h1,
html.aspak-v491-dark .v490-modal-panel h2,
html.aspak-v491-dark .v490-modal-panel h3,
html.aspak-v491-dark .v490-modal-panel p,
html.aspak-v491-dark .v490-modal-panel span,
html.aspak-v491-dark .v490-modal-panel label,
html.aspak-v491-dark .v490-modal-panel code {
    color: var(--aspak-v491-text) !important;
}

html.aspak-v491-dark .v490-muted,
html.aspak-v491-dark .v490-eyebrow,
html.aspak-v491-dark .v490-help {
    color: var(--aspak-v491-muted) !important;
    opacity: 1 !important;
}

html.aspak-v491-dark .v490-table th {
    color: #b9cbe0 !important;
}

html.aspak-v491-dark .v490-table td {
    color: #edf5fc !important;
}

html.aspak-v491-dark .v490-table td code,
html.aspak-v491-dark .v490-page-head code {
    color: #75baff !important;
}

html.aspak-v491-dark .v490-card a:not(.v490-btn),
html.aspak-v491-dark .v490-back {
    color: var(--aspak-v491-link) !important;
}

html.aspak-v491-dark .v490-modal input,
html.aspak-v491-dark .v490-modal textarea,
html.aspak-v491-dark .v490-modal select {
    background: var(--aspak-v491-input) !important;
    color: var(--aspak-v491-text) !important;
    border-color: var(--aspak-v491-border) !important;
}

html.aspak-v491-dark .v490-modal input::placeholder,
html.aspak-v491-dark .v490-modal textarea::placeholder {
    color: #8299b2 !important;
    opacity: 1 !important;
}

/* Komponen tabel/card umum: hanya koreksi warna teks, tidak memaksa layout. */
html.aspak-v491-dark table,
html.aspak-v491-dark .table,
html.aspak-v491-dark .dataTable {
    color: var(--aspak-v491-text);
}

html.aspak-v491-dark table th,
html.aspak-v491-dark .table th,
html.aspak-v491-dark .dataTable th {
    color: #b8c9da !important;
}

html.aspak-v491-dark table td,
html.aspak-v491-dark .table td,
html.aspak-v491-dark .dataTable td {
    color: #eaf2f9;
}

html.aspak-v491-dark input,
html.aspak-v491-dark select,
html.aspak-v491-dark textarea {
    color-scheme: dark;
}

/* Light mode: tegaskan warna pada card v4.9.x agar tidak mewarisi teks putih. */
html:not(.aspak-v491-dark) .v490-card,
html:not(.aspak-v491-dark) .v490-modal-panel {
    color: #1f2937 !important;
}

html:not(.aspak-v491-dark) .v490-card td,
html:not(.aspak-v491-dark) .v490-card th,
html:not(.aspak-v491-dark) .v490-card p,
html:not(.aspak-v491-dark) .v490-card h1,
html:not(.aspak-v491-dark) .v490-card h2,
html:not(.aspak-v491-dark) .v490-card h3,
html:not(.aspak-v491-dark) .v490-card label,
html:not(.aspak-v491-dark) .v490-card li {
    color: #1f2937;
}

html:not(.aspak-v491-dark) .v490-muted,
html:not(.aspak-v491-dark) .v490-eyebrow,
html:not(.aspak-v491-dark) .v490-help {
    color: #64748b !important;
    opacity: 1 !important;
}

/* Menu vendor yang diinjeksikan patch. */
.aspak-v491-credential-menu {
    text-decoration: none !important;
}

/* Pagination Katalog Produk Vendor */
.aspak-v491-catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, .25);
}

.aspak-v491-catalog-summary {
    font-size: .9rem;
    opacity: .82;
}

.aspak-v491-catalog-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.aspak-v491-page-btn,
.aspak-v491-page-size {
    min-height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, .35);
    background: transparent;
    color: inherit;
    padding: 6px 10px;
    font: inherit;
    cursor: pointer;
    text-shadow: none !important;
}

.aspak-v491-page-btn[disabled] {
    cursor: not-allowed;
    opacity: .4;
}

.aspak-v491-page-btn.is-active {
    background: #0f9189;
    border-color: #0f9189;
    color: #fff !important;
    font-weight: 700;
}

html.aspak-v491-dark .aspak-v491-page-btn,
html.aspak-v491-dark .aspak-v491-page-size {
    background: #0b1d31;
    border-color: #31506d;
    color: #eaf3fb !important;
}

html.aspak-v491-dark .aspak-v491-page-size option {
    background: #0b1d31;
    color: #eaf3fb;
}

@media (max-width: 700px) {
    .aspak-v491-catalog-pagination {
        align-items: stretch;
    }
    .aspak-v491-catalog-controls {
        width: 100%;
    }
}