/* =========================================================
   TAMARA v1 - NEOBRUTALISME
   Lapisan gaya bersama untuk semua halaman (Admin, UMKM, Mitra, Auth).
   Dimuat paling akhir di <head>, sehingga menimpa gaya halaman.

   Prinsip:
   - border hitam tebal, bayangan keras tanpa blur
   - warna datar: violet (merek), kuning (aktif/sorotan), mint, pink
   - tombol "menekan" saat diklik (bergeser ke arah bayangan)
   - tanpa blur, tanpa gradient, tanpa mode gelap
========================================================= */

:root {
    color-scheme: light;

    --ink: #000000;
    --accent: #ffd93d;
    --accent-soft: #fff2a8;
    --pink: #ff8fb1;
    --mint: #b8f2d0;

    --primary: #6c4dff;
    --primary-dark: #4b2fd6;
    --primary-soft: #ddd6ff;
    --background: #efebff;
    --surface: #ffffff;
    --surface-soft: #f6f3ff;
    --text: #000000;
    --text-soft: #4a4560;
    --border: #000000;

    --shadow-sm: 2px 2px 0 #000000;
    --shadow-soft: 4px 4px 0 #000000;
    --shadow: 7px 7px 0 #000000;
    --shadow-focus: 4px 4px 0 #6c4dff;
    --ease: 120ms ease-out;
}

html {
    color-scheme: light;
}

body {
    font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-weight: 500;
    color: #000000;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

::selection {
    background: var(--accent);
    color: #000000;
}

:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 3px;
}

/* ---------------------------------------------------------
   TIPOGRAFI
--------------------------------------------------------- */

h1,
h2,
h3,
h4,
.page-title,
.card-title,
.section-title,
.card-heading,
.section-heading,
.page-heading,
.toolbar-title {
    font-weight: 800 !important;
    letter-spacing: -.02em;
}

h1,
.page-title {
    font-weight: 900 !important;
    letter-spacing: -.035em;
}

strong,
b {
    font-weight: 800;
}

/* ---------------------------------------------------------
   DEKORASI LEMBUT -> DIHILANGKAN
--------------------------------------------------------- */

.ripple,
.shine,
.hero-glow,
.hero-glow-one,
.hero-glow-two,
.hero-orbit,
.hero-orbit-one,
.hero-orbit-two {
    display: none !important;
}

[class*="backdrop"],
.overlay,
.sidebar-overlay,
.preview-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.modal-backdrop,
.success-backdrop,
.preview-overlay {
    background: rgba(0, 0, 0, .6) !important;
}

/* ---------------------------------------------------------
   SIDEBAR + NAVIGASI
--------------------------------------------------------- */

.sidebar {
    background: #ffffff !important;
    border-right: 3px solid #000000 !important;
}

.brand-logo-wrap,
.sidebar-logo {
    border: 3px solid #000000 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: var(--shadow-sm) !important;
}

.brand-text strong,
.brand-name,
.brand-copy strong,
.sidebar-brand-copy strong {
    font-weight: 900 !important;
    letter-spacing: -.02em;
}

.menu-label,
.nav-label {
    font-weight: 800 !important;
    color: #000000 !important;
}

.nav-item {
    border: 2px solid transparent;
    border-radius: 10px !important;
    font-weight: 700 !important;
    color: #000000;
    transition: transform 90ms ease-out, box-shadow 90ms ease-out, background 90ms ease-out;
}

.nav-item .nav-icon,
.nav-item svg {
    color: inherit;
}

.nav-item:hover {
    background: var(--accent-soft) !important;
    border-color: #000000;
    box-shadow: 3px 3px 0 #000000;
    transform: translate(-1px, -1px);
    color: #000000 !important;
}

.nav-item.active,
.nav-item.active:hover {
    background: var(--accent) !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    box-shadow: 4px 4px 0 #000000 !important;
    font-weight: 800 !important;
    transform: none;
}

.nav-item.active::before,
.nav-item.active::after {
    background: transparent !important;
}

.nav-item.disabled,
.nav-item.disabled-link,
.nav-item.disabled:hover {
    background: transparent !important;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    opacity: .5;
}

.logout,
.logout-btn,
.logout-link,
.nav-logout {
    border: 2px solid #000000 !important;
    border-radius: 10px !important;
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    font-weight: 800 !important;
    box-shadow: 3px 3px 0 #000000;
}

.logout:hover,
.logout-btn:hover,
.logout-link:hover,
.nav-logout:hover {
    background: var(--danger) !important;
    color: #ffffff !important;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #000000;
}

.user-card,
.sidebar-user,
.user-mini,
.admin-mini,
.topbar-profile,
.topbar-user {
    border: 2px solid #000000 !important;
    border-radius: 10px !important;
}

/* ---------------------------------------------------------
   KARTU / PANEL
--------------------------------------------------------- */

.card,
.stat-card,
.stats-card,
.summary-card,
.detail-card,
.content-card,
.page-card,
.form-card,
.list-card,
.info-card,
.result-card,
.profile-card,
.review-card,
.application-card,
.application-form-card,
.recommendation-card,
.analysis-card,
.simulation-card,
.insight-card,
.decision-card,
.action-card,
.quick-card,
.latest-card,
.upload-card,
.process-card,
.empty-card,
.error-card,
.success-card,
.business-card,
.dashboard-panel,
.modal-card,
.success-content,
.selected-card,
.welcome-card,
.hero-card,
.profile-hero {
    border: 3px solid #000000 !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-soft);
}

.stat-card:hover,
.action-card:hover,
.quick-card:hover,
.application-card:hover,
.recommendation-card:hover,
.page-card:hover {
    box-shadow: var(--shadow);
}

.hero-card,
.welcome-card,
.profile-hero {
    box-shadow: var(--shadow);
}

.modal-card,
.success-content {
    box-shadow: 10px 10px 0 #000000;
}

.card-header,
.page-card-header {
    border-bottom: 3px solid #000000 !important;
}

.empty-state,
.mobile-empty,
.summary-empty,
.empty-inline,
.empty-review {
    border: 3px dashed #000000;
    border-radius: 12px;
    background: #ffffff;
}

/* ---------------------------------------------------------
   IKON + AVATAR
--------------------------------------------------------- */

.stat-icon,
.mini-stat-icon,
.action-icon,
.page-card-icon,
.summary-icon,
.summary-note-icon,
.business-icon,
.product-icon,
.insight-icon,
.result-icon,
.review-icon,
.header-icon,
.title-icon,
.intro-icon,
.welcome-icon,
.decision-icon,
.empty-icon,
.alert-icon,
.info-icon,
.note-icon,
.file-icon,
.upload-icon,
.modal-icon,
.success-icon,
.error-icon {
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
}

.stat-icon-blue {
    background: var(--info-soft) !important;
    color: var(--info) !important;
}

.stat-icon-green {
    background: var(--success-soft) !important;
    color: var(--success) !important;
}

.stat-icon-orange {
    background: var(--accent) !important;
    color: #000000 !important;
}

.stat-icon-purple {
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
}

.user-avatar,
.avatar,
.topbar-avatar,
.sidebar-avatar,
.sidebar-user-avatar,
.business-avatar,
.table-avatar,
.profile-avatar,
.hero-avatar,
.blue-avatar {
    border: 2px solid #000000 !important;
    font-weight: 800;
}

/* ---------------------------------------------------------
   TOMBOL
--------------------------------------------------------- */

.primary-btn,
.primary-button,
.secondary-btn,
.secondary-button,
.action-btn,
.action-button,
.cancel-button,
.detail-btn,
.detail-button,
.filter-btn,
.filter-button,
.login-button,
.register-button,
.submit-button,
.reset-btn,
.reset-button,
.profile-button,
.modal-submit,
.success-close-button,
.mobile-detail-btn,
.hero-action,
.quick-action {
    border: 3px solid #000000 !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0;
    box-shadow: 4px 4px 0 #000000 !important;
    transition: transform 90ms ease-out, box-shadow 90ms ease-out, background 90ms ease-out !important;
    cursor: pointer;
}

.primary-btn,
.primary-button,
.login-button,
.register-button,
.submit-button,
.modal-submit,
.profile-button {
    background: var(--primary) !important;
    color: #ffffff !important;
}

.secondary-btn,
.secondary-button,
.action-btn,
.action-button,
.cancel-button,
.detail-btn,
.detail-button,
.filter-btn,
.filter-button,
.reset-btn,
.reset-button,
.success-close-button,
.mobile-detail-btn {
    background: #ffffff;
    color: #000000;
}

.hero-action {
    background: var(--accent) !important;
    color: #000000 !important;
}

.primary-btn:hover,
.primary-button:hover,
.login-button:hover,
.register-button:hover,
.submit-button:hover,
.modal-submit:hover,
.profile-button:hover,
.secondary-btn:hover,
.secondary-button:hover,
.action-btn:hover,
.action-button:hover,
.cancel-button:hover,
.detail-btn:hover,
.detail-button:hover,
.filter-btn:hover,
.filter-button:hover,
.reset-btn:hover,
.reset-button:hover,
.success-close-button:hover,
.mobile-detail-btn:hover,
.hero-action:hover,
.quick-action:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 #000000 !important;
}

.primary-btn:hover,
.primary-button:hover,
.login-button:hover,
.register-button:hover,
.submit-button:hover,
.modal-submit:hover,
.profile-button:hover {
    background: var(--primary-dark) !important;
}

.secondary-btn:hover,
.secondary-button:hover,
.action-btn:hover,
.action-button:hover,
.cancel-button:hover,
.detail-btn:hover,
.detail-button:hover,
.filter-btn:hover,
.filter-button:hover,
.reset-btn:hover,
.reset-button:hover,
.success-close-button:hover,
.mobile-detail-btn:hover {
    background: var(--accent-soft);
}

.primary-btn:active,
.primary-button:active,
.login-button:active,
.register-button:active,
.submit-button:active,
.modal-submit:active,
.profile-button:active,
.secondary-btn:active,
.secondary-button:active,
.action-btn:active,
.action-button:active,
.cancel-button:active,
.detail-btn:active,
.detail-button:active,
.filter-btn:active,
.filter-button:active,
.reset-btn:active,
.reset-button:active,
.success-close-button:active,
.mobile-detail-btn:active,
.hero-action:active,
.quick-action:active {
    transform: translate(3px, 3px) !important;
    box-shadow: 0 0 0 #000000 !important;
}

button:disabled,
.primary-btn:disabled,
.primary-button:disabled,
.submit-button:disabled,
.login-button:disabled,
.register-button:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: 2px 2px 0 #000000 !important;
    transform: none !important;
}

.menu-btn,
.menu-button,
.mobile-menu-button,
.topbar-icon,
.modal-close,
.password-toggle {
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    background: #ffffff;
    color: #000000;
    box-shadow: 2px 2px 0 #000000;
}

.menu-btn:hover,
.menu-button:hover,
.mobile-menu-button:hover,
.topbar-icon:hover,
.modal-close:hover,
.password-toggle:hover {
    background: var(--accent);
}

/* ---------------------------------------------------------
   BADGE / STATUS / CHIP
--------------------------------------------------------- */

.status-badge,
.status-pill,
.meta-chip,
.hero-badge,
.role-badge,
.tenor-badge,
.match-badge,
.application-badge,
.application-status,
.analysis-status,
.simulation-status,
.intro-status,
.data-status,
.profile-badges span,
.status-active,
.status-inactive,
.status-neutral,
.status-success,
.status-warning,
.selected-label {
    border: 2px solid #000000 !important;
    font-weight: 800 !important;
}

.hero-badge,
.hero-card .meta-chip,
.profile-hero .meta-chip {
    background: var(--accent) !important;
    color: #000000 !important;
}

.eyebrow,
.section-kicker {
    font-weight: 800 !important;
}

/* ---------------------------------------------------------
   FORM
--------------------------------------------------------- */

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea {
    font-weight: 600;
    color: #000000;
}

input::placeholder,
textarea::placeholder {
    color: #6b6580;
    font-weight: 500;
}

.input-wrapper,
.select-wrapper,
.filter-select-wrap,
.search-box,
.money-input,
.number-input,
.form-input,
.form-select,
.filter-select,
.field input,
.field select,
.field textarea {
    border-color: #000000;
}

.input-wrapper:focus-within,
.select-wrapper:focus-within,
.filter-select-wrap:focus-within,
.search-box:focus-within,
.money-input:focus-within,
.number-input:focus-within,
.form-input:focus,
.form-select:focus,
.filter-select:focus,
textarea:focus,
select:focus {
    background: var(--accent-soft);
    border-color: #000000 !important;
    box-shadow: var(--shadow-focus) !important;
    outline: none;
}

.input-wrapper:focus-within .form-input:focus,
.input-wrapper .form-input:focus {
    background: transparent;
    box-shadow: none !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary);
}

.field-error,
.form-message.error,
.error {
    font-weight: 700;
}

.form-message,
.alert,
.server-message {
    border: 3px solid #000000 !important;
    border-radius: 10px !important;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.form-message.error {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
}

.form-message.success {
    background: var(--success-soft) !important;
    color: var(--success) !important;
}

.upload-area,
.upload-preview,
.file-preview {
    border: 3px dashed #000000 !important;
    border-radius: 12px !important;
    background: #ffffff;
}

.upload-area:hover,
.upload-area.dragover {
    background: var(--accent-soft);
}

/* opsi pilihan (akad, tenor, keputusan) */
.akad-option,
.tenor-option,
.decision-option,
.purpose-box {
    border: 3px solid #000000 !important;
    border-radius: 10px !important;
}

.akad-option:hover,
.tenor-option:hover,
.decision-option:hover {
    background: var(--accent-soft);
    box-shadow: var(--shadow-sm);
}

input:checked + .akad-option-content,
input:checked + .tenor-option-content,
.akad-option.selected,
.tenor-option.selected,
.decision-option.selected,
.akad-option.active,
.tenor-option.active,
.decision-option.active {
    background: var(--accent);
    box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------
   TABEL
--------------------------------------------------------- */

table {
    border-collapse: collapse;
}

th {
    background: var(--accent) !important;
    color: #000000 !important;
    font-weight: 800 !important;
    border-bottom: 3px solid #000000 !important;
}

tbody tr:hover td {
    background: var(--accent-soft) !important;
}

/* ---------------------------------------------------------
   PROGRESS
--------------------------------------------------------- */

.progress,
.progress-track {
    background: #ffffff !important;
    border-radius: 999px;
    box-shadow: 0 0 0 2px #000000 !important;
}

.progress-bar {
    background: var(--primary) !important;
    border-radius: 999px;
}

.progress-ring {
    box-shadow: 0 0 0 2px #000000 !important;
}

/* ---------------------------------------------------------
   MODAL
--------------------------------------------------------- */

.sidebar-overlay,
.overlay {
    background: rgba(0, 0, 0, .55) !important;
}

/* ---------------------------------------------------------
   HALAMAN AUTH (login / register)
--------------------------------------------------------- */

body > .page {
    background-image: radial-gradient(circle, rgba(0, 0, 0, .16) 1.3px, transparent 1.6px);
    background-size: 22px 22px;
}

.auth-container {
    border: 4px solid #000000 !important;
    border-radius: 16px !important;
    box-shadow: 10px 10px 0 #000000 !important;
}

.brand-panel {
    border-right: 4px solid #000000;
}

.brand-panel .brand-logo {
    background: #ffffff !important;
    border: 3px solid #000000 !important;
    border-radius: 10px !important;
    box-shadow: 4px 4px 0 #000000;
}

.brand-panel .flow span {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    font-weight: 800 !important;
    box-shadow: 3px 3px 0 #000000;
}

.brand-panel .shape {
    border: 3px solid #000000;
    opacity: 1;
}

.brand-panel .shape-one {
    background: var(--accent) !important;
}

.brand-panel .shape-two {
    background: var(--pink) !important;
}

.brand-panel .shape-three {
    background: var(--mint) !important;
}

.form-label {
    font-weight: 800 !important;
}

.login-link,
.back-link,
.view-link,
.forgot {
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   SCROLLBAR
--------------------------------------------------------- */

* {
    scrollbar-width: thin;
    scrollbar-color: #000000 #ffffff;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #ffffff;
    border-left: 2px solid #000000;
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border: 2px solid #000000;
    border-radius: 0;
}

/* ---------------------------------------------------------
   RESPONSIF
--------------------------------------------------------- */

@media (max-width: 640px) {
    :root {
        --shadow: 5px 5px 0 #000000;
        --shadow-soft: 3px 3px 0 #000000;
    }

    .auth-container {
        box-shadow: 6px 6px 0 #000000 !important;
    }

    .modal-card,
    .success-content {
        box-shadow: 6px 6px 0 #000000;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.password-toggle {
    box-shadow: none !important;
    border-radius: 6px !important;
}

/* bentuk dekoratif login: di belakang teks, jauh dari teks */
.brand-panel > * {
    position: relative;
    z-index: 2;
}

.brand-panel .shape {
    position: absolute;
    z-index: 0 !important;
    pointer-events: none;
}

.brand-panel .shape-one {
    left: auto !important;
    top: auto !important;
    right: -100px !important;
    bottom: -100px !important;
    width: 200px !important;
    height: 200px !important;
    border-radius: 50% !important;
}

.brand-panel .shape-two {
    left: auto !important;
    bottom: auto !important;
    top: 56px !important;
    right: 36px !important;
    width: 84px !important;
    height: 84px !important;
    border-radius: 14px !important;
    transform: rotate(12deg);
}

.brand-panel .shape-three {
    left: auto !important;
    bottom: auto !important;
    top: 46% !important;
    right: 22px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    transform: rotate(45deg);
}

/* ikon hero */
.hero-symbol {
    background: var(--accent) !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    border-radius: 12px !important;
    box-shadow: 5px 5px 0 #000000 !important;
}

.hero-symbol svg {
    stroke: #000000;
}

@media (max-width: 700px) {
    .brand-panel .shape-one {
        display: none !important;
    }
}