/* ==========================================================================
   ONE UI 9.0 CONFIGURATION & CORE THEME SYSTEM (LIGHT & DARK MODE MURNI)
   ========================================================================== */
:root {
    --oneui-bg: #F4F5F8;
    --oneui-surface: #FFFFFF;
    --oneui-surface-card: #F9FAFC;
    --oneui-text-primary: #1A1C1E;
    --oneui-text-secondary: #72777F;
    --oneui-brand: #1B66FF; 
    --oneui-brand-light: #E8F0FF;
    --oneui-success: #00AA5B;
    --oneui-success-bg: rgba(0, 170, 91, 0.08);
    --oneui-warning: #FF9F0A;
    --oneui-warning-bg: rgba(255, 159, 10, 0.12);
    --oneui-danger: #DF2438;
    --oneui-danger-bg: rgba(223, 36, 56, 0.08);
    --oneui-border: #E1E2E5;
    --oneui-radius-big: 24px;
    --oneui-radius-small: 16px;
    --oneui-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --oneui-fluid: cubic-bezier(0.22, 1, 0.36, 1);
}

body.dark-mode {
    --oneui-bg: #0A0B0D;
    --oneui-surface: #16181C;
    --oneui-surface-card: #212429;
    --oneui-text-primary: #F0F1F5;
    --oneui-text-secondary: #8C9199;
    --oneui-brand: #4C8CFF;
    --oneui-brand-light: #1A263E;
    --oneui-success-bg: rgba(0, 170, 91, 0.15);
    --oneui-warning-bg: rgba(255, 159, 10, 0.2);
    --oneui-danger-bg: rgba(223, 36, 56, 0.18);
    --oneui-border: #2C3036;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--oneui-bg);
    color: var(--oneui-text-primary);
    transition: background-color 0.4s var(--oneui-fluid), color 0.4s var(--oneui-fluid);
    padding-bottom: 100px;
    overflow-x: hidden;
}

/* Helper Manajemen Sesi Navigasi/Menu Utama */
.oneui-view-section {
    display: none;
    animation: fadeIn 0.4s var(--oneui-fluid);
}
.oneui-view-section.active {
    display: block;
}

.hidden { 
    display: none !important; 
}

/* ==========================================================================
   HEADER SEPARATION ARCHITECTURE
   ========================================================================== */
.oneui-large-header-premium {
    padding: 20px 24px 12px 24px;
    background: transparent;
}

.header-profile-account-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--oneui-surface);
    border: 1px solid var(--oneui-border);
    border-radius: var(--oneui-radius-small);
    box-shadow: 0 4px 16px rgba(0,0,0,0.015);
}

.header-user-profile-left h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--oneui-text-primary);
}

.header-user-profile-left p {
    font-size: 11px;
    color: var(--oneui-text-secondary);
    margin-top: 2px;
}

.header-controls-right {
    display: flex;
    gap: 8px;
}

.oneui-circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--oneui-bg);
    color: var(--oneui-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s var(--oneui-spring), background-color 0.3s;
}

.oneui-circle-btn:active { transform: scale(0.9); }
.header-title-container h1 { font-size: 28px; font-weight: 800; margin-top: 4px; letter-spacing: -0.5px; }
.oneui-subtitle { font-size: 13px; color: var(--oneui-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* ==========================================================================
   LIVE DASHBOARD AUTOMATIC NOTIFICATION BANNER
   ========================================================================== */
.oneui-notification-wrapper {
    padding: 0 24px;
    margin-bottom: 20px;
}

.notification-banner-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: var(--oneui-radius-small);
    border-left: 5px solid transparent;
    animation: fadeInUp 0.4s var(--oneui-fluid);
}

.notification-banner-card.banner-safe {
    background: var(--oneui-success-bg);
    border-left-color: var(--oneui-success);
    color: var(--oneui-success);
}

.notification-banner-card.banner-warning {
    background: var(--oneui-warning-bg);
    border-left-color: var(--oneui-warning);
    color: #E08500;
}

body.dark-mode .notification-banner-card.banner-warning { color: var(--oneui-warning); }

.notification-banner-card h5 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.notification-banner-card p { font-size: 12px; line-height: 1.4; opacity: 0.9; }

/* ==========================================================================
   OPERATIONAL BUTTON ROWS
   ========================================================================== */
.oneui-action-row { display: grid; gap: 12px; margin-bottom: 20px; }
.khusus-dua-kolom { grid-template-columns: repeat(2, 1fr) !important; padding: 0 24px !important; gap: 12px !important; }

.oneui-card-btn {
    background: var(--oneui-surface);
    border: 1px solid var(--oneui-border);
    border-radius: var(--oneui-radius-small);
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--oneui-text-primary);
    cursor: pointer;
    transition: transform 0.2s var(--oneui-spring), background-color 0.3s;
}

.oneui-card-btn:active { transform: scale(0.95); }
.btn-scan { color: var(--oneui-brand); background: var(--oneui-brand-light); border-color: transparent; }
body.dark-mode .btn-scan { background: var(--oneui-brand-light); color: var(--oneui-brand); }

/* ==========================================================================
   INVENTORY COMPONENT LIST CARDS WITH MOBILE AUTO-ALIGNMENT
   ========================================================================== */
.oneui-list-section { padding: 0 24px; }
.oneui-list-container { display: flex; flex-direction: column; gap: 10px; }

.oneui-item-card {
    background: var(--oneui-surface);
    border-radius: var(--oneui-radius-small);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--oneui-border);
    cursor: pointer;
    transition: transform 0.2s var(--oneui-spring);
    animation: fadeInUp 0.4s var(--oneui-fluid);
}

.oneui-item-card:active { transform: scale(0.98); background-color: var(--oneui-surface-card); }
.card-left h4 { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.card-meta { font-size: 11px; color: var(--oneui-text-secondary); }

/* Unified Corporate Adaptive Stock Badges */
.stock-badge-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 12px;
    min-width: 80px;
    text-align: right;
}

.stock-badge-container.badge-safe { background: var(--oneui-success-bg); color: var(--oneui-success); }
.stock-badge-container.badge-critical { background: var(--oneui-danger-bg); color: var(--oneui-danger); }
.stock-badge-amount { font-size: 15px; font-weight: 800; }
.stock-badge-unit { font-size: 10px; font-weight: 600; text-transform: uppercase; margin-top: 1px; color: var(--oneui-text-secondary); opacity: 0.9; }

/* ==========================================================================
   COMPACT & MOBILE ADAPTIVE FORM INTERFACES
   ========================================================================== */
.oneui-input-group { position: relative; margin-bottom: 14px; width: 100%; }
.oneui-input-group input, .oneui-select {
    width: 100%; padding: 16px 14px 6px 14px; font-size: 14px; font-weight: 500;
    border-radius: 12px; border: 1.5px solid var(--oneui-border);
    background: var(--oneui-surface-card); color: var(--oneui-text-primary); outline: none;
    transition: border-color 0.2s ease;
}
.oneui-select { appearance: none; }
.oneui-input-group input:focus, .oneui-select:focus { border-color: var(--oneui-brand); }
.oneui-input-group label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--oneui-text-secondary); pointer-events: none; transition: 0.2s; font-size: 13px; }

.oneui-input-group input:focus ~ label,
.oneui-input-group input:not(:placeholder-shown) ~ label,
.select-label { top: 12px !important; font-size: 10px !important; color: var(--oneui-brand) !important; font-weight: 700; }

/* Mobile View Select Dropdown Tuning Resizer */
.compact-mobile-dropdown .oneui-select {
    padding-top: 18px;
    padding-bottom: 6px;
    font-size: 13px;
}

/* ==========================================================================
   MODAL DIALOGS & SHEET CONTAINERS
   ========================================================================== */
.oneui-modal, .oneui-sheet { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; flex-direction: column; justify-content: flex-end; }
.oneui-modal-overlay, .oneui-sheet-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); }

.oneui-modal-content, .oneui-sheet-content {
    position: relative; background: var(--oneui-surface); border-top-left-radius: var(--oneui-radius-big); border-top-right-radius: var(--oneui-radius-big);
    padding: 24px; max-height: 85vh; overflow-y: auto; animation: slideUp 0.3s var(--oneui-fluid);
}

.oneui-modal { justify-content: center; padding: 20px; }
.oneui-modal-content { border-radius: var(--oneui-radius-big); }
.standard-width-popup { max-width: 480px; margin: 0 auto; width: 100%; }
.large-table-popup { max-width: 800px; margin: 0 auto; width: 100%; max-height: 90vh; }
.modal-handle, .oneui-sheet-handle { width: 36px; height: 4px; background: var(--oneui-border); border-radius: 2px; margin: -10px auto 16px auto; }
.modal-clean-header-box { border-bottom: 1px solid var(--oneui-border); padding-bottom: 12px; margin-bottom: 16px; }
.modal-clean-header-box h3 { font-size: 16px; font-weight: 700; }
.modal-clean-header-box p { font-size: 12px; color: var(--oneui-text-secondary); margin-top: 2px; }

.modal-action-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal-action-row .oneui-btn-flat { padding: 10px 16px; border: none; background: transparent; color: var(--oneui-text-secondary); font-weight: 600; cursor: pointer; font-size: 13px; }
.modal-action-row .oneui-btn-primary { padding: 10px 20px; border: none; background: var(--oneui-brand); color: #fff; font-weight: 700; border-radius: 10px; cursor: pointer; font-size: 13px; }

/* Premium QR Scanner Frame Box */
.premium-scanner-frame { border-radius: 16px; overflow: hidden; border: 2px solid var(--oneui-border); background: #000; }

/* ==========================================================================
   VERTICAL CORPORATE TRANSACTION DATA TABLE MANAGER
   ========================================================================== */
.vertical-table-container { width: 100%; overflow-x: auto; margin-top: 10px; border: 1px solid var(--oneui-border); border-radius: 12px; background: var(--oneui-surface-card); }
.corporate-premium-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.corporate-premium-table th { background: var(--oneui-bg); color: var(--oneui-text-primary); padding: 12px; font-weight: 700; border-bottom: 2px solid var(--oneui-border); }
.corporate-premium-table td { padding: 12px; border-bottom: 1px solid var(--oneui-border); color: var(--oneui-text-primary); vertical-align: middle; }
.corporate-premium-table tr:last-child td { border-bottom: none; }

.table-cell-bold { font-weight: 700; color: var(--oneui-text-primary); }
.table-cell-subtext { font-size: 10px; color: var(--oneui-text-secondary); margin-top: 2px; display: block; }

.table-badge-in { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--oneui-success-bg); color: var(--oneui-success); font-size: 10px; font-weight: 700; }
.table-badge-out { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--oneui-danger-bg); color: var(--oneui-danger); font-size: 10px; font-weight: 700; }

.table-actions-flex { display: flex; gap: 6px; justify-content: center; }
.btn-table-action { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--oneui-border); background: var(--oneui-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--oneui-text-secondary); transition: 0.2s; }
.btn-table-action:hover { color: var(--oneui-brand); border-color: var(--oneui-brand); }
.btn-table-action.delete-action:hover { color: var(--oneui-danger); border-color: var(--oneui-danger); }
.btn-table-action i { width: 14px; height: 14px; }

/* ==========================================================================
   PRODUCT SECURITY ASSISTANT REDESIGN CARD
   ========================================================================== */
.premium-security-card { background: linear-gradient(145deg, var(--oneui-surface), var(--oneui-surface-card)); border: 1px solid var(--oneui-border); }
.security-premium-header { text-align: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--oneui-border); }
.shield-badge-icon { width: 54px; height: 54px; background: var(--oneui-brand-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px auto; font-size: 24px; }
.security-premium-header h3 { font-size: 18px; font-weight: 800; color: var(--oneui-text-primary); }
.security-premium-header p { font-size: 12px; color: var(--oneui-text-secondary); margin-top: 3px; }
.secure-btn-theme { width: 100% !important; padding: 14px !important; background: var(--oneui-text-primary) !important; color: var(--oneui-surface) !important; border-radius: 12px !important; }

/* ==========================================================================
   TRANSACTION SHEET COMPONENTS & TIMESTAMPS MODALS
   ========================================================================== */
.sheet-header-clean { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--oneui-border); }
.oneui-badge-premium { width: max-content; padding: 4px 8px; border-radius: 6px; background: var(--oneui-brand-light); color: var(--oneui-brand); font-size: 11px; font-weight: 700; }
.sheet-title-text { font-size: 18px; font-weight: 700; }

.oneui-clean-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.grid-box { padding: 8px; background: var(--oneui-surface-card); border: 1px solid var(--oneui-border); border-radius: 10px; text-align: center; }
.grid-box small { font-size: 10px; color: var(--oneui-text-secondary); display: block; }
.grid-box p { font-size: 12px; font-weight: 700; margin-top: 2px; }
.grid-box.highlight-blue { background: var(--oneui-brand-light); border-color: transparent; color: var(--oneui-brand); }

.oneui-form-clean { display: flex; flex-direction: column; gap: 12px; }
.input-row-locked, .input-row-action { display: flex; flex-direction: column; gap: 4px; }
.input-row-locked label, .input-row-action label { font-size: 11px; font-weight: 700; color: var(--oneui-text-secondary); }
.input-row-locked input { background: var(--oneui-bg) !important; border: 1px solid var(--oneui-border); padding: 10px; border-radius: 8px; font-size: 13px; color: var(--oneui-text-secondary); pointer-events: none; }
.input-row-action input { background: var(--oneui-surface-card); border: 2px solid var(--oneui-brand); padding: 12px; border-radius: 8px; font-size: 16px; font-weight: 700; text-align: center; outline: none; color: var(--oneui-text-primary); }

.oneui-button-group-premium { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.btn-premium-out, .btn-premium-in { padding: 14px; border: none; font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; color: #fff; }
.btn-premium-out { background: var(--oneui-danger); }
.btn-premium-in { background: var(--oneui-success); }
.btn-premium-out:active, .btn-premium-in:active { opacity: 0.85; transform: scale(0.98); }

/* History Sheet Items Inner Logs */
.history-log-scroll { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.log-row { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-radius: 12px; background: var(--oneui-surface-card); border: 1px solid var(--oneui-border); }
.log-left p { font-size: 13px; font-weight: 700; }

/* Relocation of Timestamp underneath Operator Text */
.log-operator-session-block { display: flex; flex-direction: column; margin-top: 3px; gap: 1px; }
.log-user-id { font-size: 11px; color: var(--oneui-text-primary); font-weight: 600; }
.log-timestamp-date { font-size: 10px; color: var(--oneui-text-secondary); font-weight: 500; }

.log-right { font-weight: 800; font-size: 14px; }
.log-row.type-masuk .log-right { color: var(--oneui-success); }
.log-row.type-keluar .log-right { color: var(--oneui-danger); }

/* ==========================================================================
   SETUP VIEW PANELS & SYSTEM UTILITIES
   ========================================================================== */
.oneui-setup-section { padding: 0 24px; }
.setup-grid-container-premium { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.setup-tile { background: var(--oneui-surface); border: 1px solid var(--oneui-border); padding: 16px; border-radius: var(--oneui-radius-small); display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transition: transform 0.2s; }
.setup-tile:active { transform: scale(0.97); }
.tile-icon-box { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.tile-icon-box i { width: 20px; height: 20px; color: #fff; }
.tile-icon-box.btn-add { background: var(--oneui-brand); }
.tile-icon-box.btn-edit-item { background: var(--oneui-warning); }
.tile-icon-box.btn-tx-manager { background: #6F42C1; }
.tile-icon-box.btn-csv { background: var(--oneui-success); }

.setup-tile h4 { font-size: 13px; font-weight: 700; color: var(--oneui-text-primary); }
.setup-tile p { font-size: 11px; color: var(--oneui-text-secondary); margin-top: 4px; line-height: 1.3; }

.qr-output-container { background: var(--oneui-surface-card); border-radius: 16px; padding: 12px; text-align: center; margin-bottom: 14px; border: 2px dashed var(--oneui-brand); }
.qr-output-container img { width: 140px; height: 140px; }
.qr-output-container p { font-size: 11px; color: var(--oneui-success); font-weight: 700; margin-top: 4px; }

.export-options-list { display: flex; flex-direction: column; gap: 8px; }
.export-opt-btn { width: 100%; padding: 12px; border-radius: 10px; background: var(--oneui-surface-card); border: 1px solid var(--oneui-border); font-size: 13px; font-weight: 700; text-align: left; color: var(--oneui-text-primary); display: flex; align-items: center; gap: 10px; cursor: pointer; }

/* ==========================================================================
   ANALYTICS CHART CARD WRAPPERS
   ========================================================================== */
.oneui-recommendation-card { background: var(--oneui-brand-light); color: var(--oneui-brand); padding: 14px 16px; border-radius: var(--oneui-radius-small); margin: 0 24px 16px 24px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.rec-text h4 { font-size: 14px; font-weight: 700; }
.rec-text p { font-size: 11px; opacity: 0.9; }

.chart-wrapper-card { background: var(--oneui-surface); border: 1px solid var(--oneui-border); border-radius: var(--oneui-radius-big); padding: 16px; margin: 0 24px; }
.chart-wrapper-card h3 { font-size: 14px; font-weight: 700; color: var(--oneui-text-primary); }
.chart-header-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.filter-flex { display: flex; align-items: center; gap: 6px; }
.chart-select-filter { padding: 6px 8px; font-size: 11px; font-weight: 700; border-radius: 8px; border: 1px solid var(--oneui-border); background: var(--oneui-surface-card); color: var(--oneui-text-primary); outline: none; max-width: 120px; }
.btn-chart-reset { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--oneui-border); background: var(--oneui-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--oneui-text-primary); }
.btn-chart-reset i { width: 12px; height: 12px; }
.canvas-holder { position: relative; width: 100%; height: 220px; }

/* ==========================================================================
   GLOBAL BOTTOM TABS NAVIGATION CONTROLS
   ========================================================================== */
.oneui-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 72px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); border-top: 1px solid var(--oneui-border); display: flex; justify-content: space-around; align-items: center; z-index: 900; }
body.dark-mode .oneui-bottom-nav { background: rgba(22, 24, 28, 0.9); }
.nav-item { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--oneui-text-secondary); cursor: pointer; width: 20%; }
.nav-item i { width: 20px; height: 20px; transition: transform 0.2s var(--oneui-spring); }
.nav-item.active { color: var(--oneui-brand); }
.nav-item.active i { transform: scale(1.15); }
.nav-label { font-size: 10px; font-weight: 700; }

/* ==========================================================================
   SYSTEM CORE PHYSICS ANIMATIONS
   ========================================================================== */
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   RESPONSIVE DESIGN ADAPTATIONS (MOBILE MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 480px) {
    .oneui-item-card { padding: 14px; }
    .card-left h4 { font-size: 14px; }
    .stock-badge-container { padding: 6px 10px; min-width: 70px; }
    .stock-badge-amount { font-size: 13px; }
    .large-table-popup { padding: 16px; max-height: 95vh; }
    
    /* Responsive Mode Card-view untuk Tabel Koreksi Transaksi */
    .corporate-premium-table, 
    .corporate-premium-table thead, 
    .corporate-premium-table tbody, 
    .corporate-premium-table th, 
    .corporate-premium-table td, 
    .corporate-premium-table tr {
        display: block;
    }
    .corporate-premium-table thead {
        display: none;
    }
    .corporate-premium-table tr {
        border: 1px solid var(--oneui-border);
        border-radius: var(--oneui-radius-small);
        background: var(--oneui-surface);
        margin-bottom: 12px;
        padding: 12px;
    }
    .corporate-premium-table td {
        padding: 6px 0;
        border-bottom: none !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
    }
    .corporate-premium-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--oneui-text-secondary);
        font-size: 11px;
        text-transform: uppercase;
        text-align: left;
    }
    .table-actions-flex {
        justify-content: flex-end;
        width: 100%;
    }
    .btn-table-action { width: 32px; height: 32px; }
}

/* ==========================================================================
   DESAIN GRID FILTER LOG MUTASI PREMIUM
   ========================================================================== */
.tx-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    background: var(--oneui-surface-card);
    padding: 16px;
    border-radius: var(--oneui-radius-small);
    border: 1px solid var(--oneui-border);
}
.filter-group { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
}
.filter-group label { 
    font-size: 11px; 
    font-weight: 700; 
    color: var(--oneui-text-secondary); 
    text-transform: uppercase; 
}
.oneui-input-filter {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--oneui-border);
    background: var(--oneui-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--oneui-text-primary);
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
    appearance: auto;
}
.oneui-input-filter:focus { 
    border-color: var(--oneui-brand); 
    box-shadow: 0 0 0 3px rgba(27, 102, 255, 0.15);
}

/* ==========================================================================
   WORKFLOW PENGAJUAN LAPORAN PDF SYSTEM
   ========================================================================== */
.report-form-container {
    background: var(--oneui-surface-card);
    padding: 16px;
    border-radius: var(--oneui-radius-small);
    border: 1px solid var(--oneui-border);
    margin-bottom: 16px;
}
.report-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}
.report-requests-flow-scroll {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}
.report-workflow-card {
    background: var(--oneui-surface);
    border: 1px solid var(--oneui-border);
    border-radius: var(--oneui-radius-small);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.workflow-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.workflow-date-range-sub {
    display: block;
    font-size: 11px;
    color: var(--oneui-text-secondary);
    margin-top: 4px;
}
.workflow-status-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
}
.badge-workflow-pending { background: var(--oneui-warning-bg); color: var(--oneui-warning); }
.badge-workflow-approved { background: var(--oneui-success-bg); color: var(--oneui-success); }
.badge-workflow-rejected { background: var(--oneui-danger-bg); color: var(--oneui-danger); }
.manager-note-display {
    background: var(--oneui-surface-card);
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 8px !important;
    font-size: 12px;
    border-left: 3px solid var(--oneui-brand);
}
.compact-btn {
    font-size: 12px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
   ENGINE CONFIGURASI CETAK PDF BERKUALITAS (ELEGAN)
   ========================================================================== */
.only-print { display: none; }

@media print {
    /* Sembunyikan elemen app yang tidak perlu saat cetak */
    body * { visibility: hidden; }
    .no-print, .oneui-bottom-nav, .oneui-circle-btn, .oneui-modal, .oneui-sheet { display: none !important; }
    
    body { background: #ffffff !important; color: #000000 !important; }
    
    /* Tampilkan dan posisikan kanvas PDF secara absolut */
    #print-canvas-document, #print-canvas-document * { visibility: visible; }
    #print-canvas-document { 
        display: block !important;
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 100%; 
        padding: 20px;
    }
    
    /* Layout Dokumen Korporat PDF */
    .pdf-print-wrapper {
        font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    }
    .pdf-header {
        border-bottom: 3px double #1A1C1E;
        padding-bottom: 14px;
        margin-bottom: 24px;
    }
    .pdf-header h2 {
        font-size: 18px;
        font-weight: 800;
        margin: 0 0 8px 0;
        color: #1B66FF;
    }
    .pdf-meta-info {
        font-size: 12px;
        color: #1A1C1E;
        line-height: 1.6;
    }
    .pdf-meta-info p { margin: 0; }
    
    .pdf-manager-note {
        background-color: #F4F5F8 !important;
        border-left: 4px solid #00AA5B !important;
        padding: 12px;
        font-size: 12px;
        margin-bottom: 24px;
    }
    
    .pdf-data-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11px;
        margin-bottom: 40px;
    }
    .pdf-data-table th, .pdf-data-table td {
        border: 1px solid #D1D5DB;
        padding: 10px 12px;
        text-align: left;
    }
    .pdf-data-table th {
        background-color: #F9FAFC !important;
        -webkit-print-color-adjust: exact;
        font-weight: 700;
        color: #1A1C1E;
    }
    
    .pdf-signature-section {
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
        page-break-inside: avoid;
    }
    .sig-box {
        text-align: center;
        width: 40%;
    }
    .sig-box p { font-size: 12px; margin-bottom: 0; }
    .sig-space { height: 70px; border-bottom: 1px solid #1A1C1E; width: 80%; margin: 0 auto 6px auto; }
    .sig-box strong { font-size: 12px; display: block; }
    .sig-box span { font-size: 11px; color: #72777F; display: block; }
}

/* ==========================================================================
   MATERIAL YOU (M3) REDESIGN FOR REPORT MODAL
   ========================================================================== */
.m3-modal-content {
    position: relative;
    background: var(--oneui-bg);
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    padding: 24px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s var(--oneui-fluid);
}
body.dark-mode .m3-modal-content { background: #121316; }

.m3-drag-handle {
    width: 32px; height: 4px; border-radius: 2px;
    background: var(--oneui-text-secondary); opacity: 0.3;
    margin: -10px auto 20px auto;
}

.m3-header { margin-bottom: 24px; text-align: center; }
.m3-header h3 { font-size: 22px; font-weight: 600; color: var(--oneui-text-primary); letter-spacing: -0.5px; }
.m3-header p { font-size: 13px; color: var(--oneui-text-secondary); margin-top: 4px; }

.m3-form-card {
    background: var(--oneui-surface);
    padding: 16px; border-radius: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
body.dark-mode .m3-form-card { background: #1E1F22; }

.m3-input-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.m3-input-group label { font-size: 12px; font-weight: 700; color: var(--oneui-text-primary); padding-left: 4px; }
.m3-select, .m3-input-group input {
    padding: 14px 16px; border-radius: 16px;
    border: none; background: var(--oneui-bg);
    font-size: 14px; font-weight: 500; color: var(--oneui-text-primary);
    outline: none; transition: 0.2s; appearance: auto;
}
.m3-select:focus, .m3-input-group input:focus { box-shadow: inset 0 0 0 2px var(--oneui-brand); }
.m3-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.m3-btn-fab-extended {
    width: 100%; padding: 16px; border-radius: 100px;
    background: var(--oneui-brand-light); color: var(--oneui-brand);
    border: none; font-weight: 700; font-size: 14px;
    display: flex; justify-content: center; align-items: center; gap: 8px;
    cursor: pointer; transition: 0.2s; margin-top: 8px;
}
.m3-btn-fab-extended:active { transform: scale(0.98); background: var(--oneui-brand); color: #fff; }

.m3-list-header { padding-left: 8px; margin-bottom: 12px; }
.m3-list-header h4 { font-size: 14px; font-weight: 700; color: var(--oneui-text-secondary); }

.m3-requests-scroll { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px;}

.m3-workflow-card {
    background: var(--oneui-surface); border-radius: 20px;
    padding: 16px; border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
body.dark-mode .m3-workflow-card { background: #1E1F22; }

.m3-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.m3-card-title { font-weight: 700; font-size: 15px; color: var(--oneui-text-primary); }
.m3-card-subtitle { font-size: 11px; color: var(--oneui-text-secondary); margin-top: 2px; }

.m3-status-chip { padding: 6px 12px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.m3-chip-pending { background: var(--oneui-warning-bg); color: #E08500; }
.m3-chip-approved { background: var(--oneui-success-bg); color: var(--oneui-success); }
.m3-chip-rejected { background: var(--oneui-danger-bg); color: var(--oneui-danger); }
body.dark-mode .m3-chip-pending { color: var(--oneui-warning); }

.m3-card-body p { font-size: 13px; margin-bottom: 4px; color: var(--oneui-text-secondary); }
.m3-manager-note {
    background: var(--oneui-brand-light); color: var(--oneui-brand);
    padding: 12px 14px; border-radius: 16px; margin-top: 10px; font-size: 12px; line-height: 1.5;
}
body.dark-mode .m3-manager-note { background: #1A263E; color: #8DB2FF; }

.m3-action-row { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
.m3-btn-primary {
    flex: 1; padding: 12px; border-radius: 100px;
    background: var(--oneui-brand); color: #fff; border: none;
    font-weight: 700; font-size: 13px; display: flex; justify-content: center; align-items: center; gap: 6px; cursor: pointer;
}
.m3-btn-icon-danger {
    padding: 12px 16px; border-radius: 100px;
    background: var(--oneui-danger-bg); color: var(--oneui-danger); border: none;
    display: flex; justify-content: center; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; font-size: 13px;
}
.m3-btn-primary:active, .m3-btn-icon-danger:active { transform: scale(0.96); }

.m3-manager-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.m3-input-text { padding: 14px 16px; border-radius: 16px; border: none; background: var(--oneui-bg); color: var(--oneui-text-primary); font-size: 13px; outline:none; }
.m3-input-text:focus { box-shadow: inset 0 0 0 2px var(--oneui-brand); }
.m3-btn-group { display: flex; gap: 8px; }
.m3-btn-approve, .m3-btn-reject { flex: 1; padding: 14px; border-radius: 100px; border: none; font-weight: 700; font-size: 13px; cursor: pointer; }
.m3-btn-approve { background: var(--oneui-success-bg); color: var(--oneui-success); }
.m3-btn-reject { background: var(--oneui-danger-bg); color: var(--oneui-danger); }
.m3-btn-approve:active, .m3-btn-reject:active { transform: scale(0.96); }

.m3-footer-actions { text-align: center; margin-top: 16px; }
.m3-btn-text {
    padding: 12px 24px; border: none; background: transparent; color: var(--oneui-brand);
    font-weight: 700; font-size: 14px; border-radius: 100px; cursor: pointer;
}
.m3-btn-text:active { background: var(--oneui-brand-light); }

/* ==========================================================================
   MATERIAL YOU (M3) CUSTOM ALERT & CONFIRM DIALOGS
   ========================================================================== */
.m3-dialog-content {
    position: relative;
    background: var(--oneui-surface);
    border-radius: 28px;
    padding: 24px;
    width: 90%;
    max-width: 340px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    animation: scaleIn 0.2s var(--oneui-fluid);
    margin: auto;
}
body.dark-mode .m3-dialog-content { background: #1E1F22; box-shadow: 0 4px 24px rgba(0,0,0,0.4); }

.m3-dialog-icon { display: flex; justify-content: center; margin-bottom: 16px; }
.m3-dialog-icon i { width: 32px; height: 32px; }

.m3-dialog-content h3 { font-size: 18px; font-weight: 700; color: var(--oneui-text-primary); margin-bottom: 8px; }
.m3-dialog-content p { font-size: 13px; color: var(--oneui-text-secondary); margin-bottom: 24px; line-height: 1.5; }

.m3-dialog-actions { display: flex; justify-content: flex-end; }
.m3-btn-tonal { 
    padding: 12px 24px; border-radius: 100px; border: none; 
    background: var(--oneui-surface-card); color: var(--oneui-text-primary); 
    font-weight: 700; font-size: 13px; cursor: pointer; transition: 0.2s; 
}
.m3-btn-tonal:active { background: var(--oneui-border); transform: scale(0.96); }

@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }