.erp-page .erp-hero {
    background: linear-gradient(135deg, rgba(247, 58, 11, 0.12), rgba(63, 76, 254, 0.1));
    border: 1px solid rgba(247, 58, 11, 0.12);
}

.erp-page .erp-kpi,
.erp-page .erp-panel {
    height: 100%;
}

.erp-page .erp-kpi .display-6 {
    font-weight: 700;
}

.erp-page .erp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(247, 58, 11, 0.1);
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.erp-page .erp-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.erp-page .erp-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(130, 134, 144, 0.12);
}

.erp-page .erp-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.erp-page .erp-list li::before {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: var(--primary);
    flex: 0 0 auto;
}

.erp-page .erp-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #828690;
}

.erp-page .erp-form-note {
    font-size: 0.875rem;
    color: #828690;
}

.erp-page .form-floating > .form-control,
.erp-page .form-floating > .form-select {
    min-height: 3.75rem;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
    border-radius: 0.75rem;
}

.erp-page .form-floating > textarea.form-control {
    min-height: 7rem;
}

.erp-page .form-floating > label {
    padding: 0.95rem 0.95rem;
    color: #828690;
}

.erp-page .erp-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px dashed rgba(130, 134, 144, 0.2);
}

.erp-page .erp-stat:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.erp-page .erp-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.875rem;
    background: rgba(63, 76, 254, 0.08);
    color: #3f4cfe;
    font-size: 1.1rem;
}

.erp-page .erp-roadmap {
    position: relative;
    padding-left: 1.5rem;
}

.erp-page .erp-roadmap::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 2px;
    background: rgba(63, 76, 254, 0.12);
}

.erp-page .erp-roadmap li {
    position: relative;
}

.erp-page .erp-roadmap li::before {
    position: absolute;
    left: -1.1rem;
}

.erp-page .erp-tag {
    display: inline-block;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(40, 167, 69, 0.12);
    color: #1f8f4c;
    font-size: 0.75rem;
    font-weight: 600;
}

.erp-page .erp-subtle {
    color: #828690;
}

.erp-page .erp-card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ==============================================
   Floating Label — universal pattern
   All floating-label inputs use the .mui-floating class
   defined in style.css (highlight + bar animation).
   No overriding needed here — defer to style.css.
   ============================================== */

/* Password eye icon — sits above the floating label, clickable */
.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #828690;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #f93a0b;
}

/* Login auth card — white background with soft shadow */
.auth-card {
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 24px 48px rgba(247, 58, 11, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.auth-card:hover {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.10),
        0 32px 64px rgba(247, 58, 11, 0.10);
    transform: translateY(-2px);
}

/* ==============================================
   Fix: date input label collides with ddmmyy value
   Native date pickers render dd/mm/yyyy in the
   input field. The floating label normally
   floats up and overlaps this text. We push the
   label higher so the date value remains readable.
   Applies to both .mui-floating and .form-floating.
   ============================================== */
.mui-floating > input[type="date"].form-control {
    padding-top: 1.25rem !important;
    padding-bottom: 0.5rem !important;
    min-height: 56px;
}

.mui-floating.mui-floating-active > input[type="date"].form-control ~ label,
.mui-floating.mui-floating-active > input[type="date"].form-control ~ .form-label {
    top: 0 !important;
    padding-top: 0 !important;
    line-height: 1 !important;
    transform: scale(0.82) !important;
}

/* Bootstrap .form-floating date label fix */
.form-floating > input[type="date"].form-control {
    padding-top: 1.25rem !important;
    padding-bottom: 0.5rem !important;
    min-height: 56px;
}

.form-floating > input[type="date"].form-control ~ label {
    line-height: 1 !important;
}

.form-floating > input[type="date"].form-control:focus ~ label,
.form-floating > input[type="date"].form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.82) translateY(-10px) !important;
}

/* ====== Financial Report ====== */

/* Samakan tinggi tombol Generate dengan floating input (56px) */
.btn-equal {
    min-height: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: 4px;
}

/* Hapus margin-bottom bawaan .mui-floating agar sejajar dengan baris tombol */
.filter-row .mui-floating { margin-bottom: 0; }
.filter-row .col-md-3 { display: flex; }
.filter-row .col-md-3 > * { width: 100%; }
.filter-row .col-md-3 .btn-equal { margin-bottom: 1.25rem; } /* samakan dengan input */

/* Summary card: label di atas, nilai besar di bawah, dengan border accent kiri */
.erp-summary-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-left: 4px solid #888;
    border-radius: 6px;
    padding: 14px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 84px;
}
.erp-summary-label {
    font-size: 0.78rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    line-height: 1.2;
    font-weight: 600;
}
.erp-summary-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: #202124;
    word-break: break-word;
}

.erp-summary-primary { border-left-color: #3f4cfe; }
.erp-summary-primary .erp-summary-value { color: #3f4cfe; }
.erp-summary-info    { border-left-color: #1d8cf8; }
.erp-summary-info    .erp-summary-value { color: #1d8cf8; }
.erp-summary-warning { border-left-color: #f6a623; }
.erp-summary-warning .erp-summary-value { color: #c97b00; }
.erp-summary-success { border-left-color: #2bc155; }
.erp-summary-success .erp-summary-value { color: #1f9c43; }
.erp-summary-danger  { border-left-color: #e74c3c; }
.erp-summary-danger  .erp-summary-value { color: #c0392b; }