/* Sistem Produksi - Custom Styles */
:root {
    --app-primary: #1f6feb;
    --app-dark:    #0d2c54;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main.container {
    flex: 1 0 auto;
    width: 100%;
    max-width: 100%;
}

.navbar-app {
    background: linear-gradient(135deg, var(--app-dark), var(--app-primary));
}

.navbar-app .navbar-brand { font-size: 1.15rem; }

.card { border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.05); border-radius: .6rem; }
.card-header { background: #fff; border-bottom: 1px solid #eef0f4; font-weight: 600; }

.stat-card {
    border-radius: .75rem;
    border: 0;
    overflow: hidden;
    color: #fff;
    position: relative;
}
.stat-card .stat-icon {
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 3rem; opacity: .25;
}
.stat-card .stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { font-size: .85rem; opacity: .9; }

.stat-blue   { background: linear-gradient(135deg,#1f6feb,#0d2c54); }
.stat-green  { background: linear-gradient(135deg,#10b981,#047857); }
.stat-orange { background: linear-gradient(135deg,#f59e0b,#b45309); }
.stat-red    { background: linear-gradient(135deg,#ef4444,#991b1b); }

.table thead th { background: #f8f9fc; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.table td, .table th { vertical-align: middle; }

.badge-role-superadmin { background: #1f6feb; }
.badge-role-user { background: #6b7280; }

.btn-app-primary { background: var(--app-primary); color: #fff; }
.btn-app-primary:hover { background: var(--app-dark); color: #fff; }

.login-card {
    max-width: 420px; margin: 0 auto;
    border: 0; border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.hero {
    background: linear-gradient(135deg,var(--app-dark),var(--app-primary));
    color: #fff; border-radius: 1rem; padding: 3rem 2rem;
}
.hero h1 { font-weight: 700; }

.empty-state { text-align: center; padding: 3rem 1rem; color: #6b7280; }
.empty-state i { font-size: 3.5rem; opacity: .35; }

/* Footer */
.app-footer { flex-shrink: 0; }
.footer-wa {
    color: #198754;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.footer-wa:hover,
.footer-wa:focus {
    color: #146c43;
    text-decoration: underline;
}

/* ---------- Mobile-friendly ---------- */
@media (max-width: 767.98px) {
    main.container {
        padding-left: .875rem;
        padding-right: .875rem;
        padding-top: 1rem;
        padding-bottom: 1.25rem;
    }

    .navbar-app .navbar-brand {
        font-size: 1rem;
        max-width: 70%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar-app .nav-link {
        padding: .65rem .75rem;
    }

    .navbar-app .btn {
        display: block;
        width: calc(100% - 1.5rem);
        margin: .5rem .75rem .75rem;
        text-align: center;
    }

    .hero {
        padding: 1.75rem 1.25rem;
        border-radius: .75rem;
    }
    .hero h1 {
        font-size: 1.65rem;
    }
    .hero .lead {
        font-size: 1rem;
    }
    .hero .btn-lg {
        width: 100%;
        margin-bottom: .5rem;
    }
    .hero .d-flex.gap-2 {
        flex-direction: column;
    }

    .stat-card .stat-value { font-size: 1.45rem; }
    .stat-card .stat-icon { font-size: 2.25rem; right: .75rem; }

    .card-body { padding: 1rem; }

    .login-card {
        max-width: 100%;
        border-radius: .75rem;
    }
    .login-card .card-body {
        padding: 1.25rem !important;
    }

    /* Tabel: scroll horizontal nyaman */
    .table-responsive {
        margin: 0 -0.25rem;
        -webkit-overflow-scrolling: touch;
    }
    .table {
        font-size: .85rem;
        min-width: 640px;
    }
    .table thead th {
        font-size: .7rem;
        white-space: nowrap;
    }
    .table td {
        white-space: nowrap;
    }

    /* Header halaman & aksi */
    .d-flex.justify-content-between.align-items-center {
        align-items: flex-start !important;
        gap: .75rem;
    }
    .d-flex.justify-content-between.align-items-center > .btn {
        flex-shrink: 0;
    }

    /* Form: tombol full width di mobile */
    form .d-flex.justify-content-end {
        flex-direction: column-reverse;
        gap: .5rem !important;
    }
    form .d-flex.justify-content-end .btn {
        width: 100%;
    }

    /* Progress bar di tabel tidak terlalu sempit */
    .progress { min-width: 64px !important; }

    .empty-state { padding: 2rem .75rem; }
    .empty-state i { font-size: 2.75rem; }

    .app-footer {
        padding-left: .75rem;
        padding-right: .75rem;
    }
    .footer-dev {
        line-height: 1.6;
    }

    /* Input lebih nyaman disentuh */
    .form-control,
    .form-select,
    .btn {
        min-height: 42px;
    }
    .btn-sm {
        min-height: 34px;
    }
}

@media (max-width: 575.98px) {
    h3 { font-size: 1.25rem; }

    .stat-card .card-body {
        padding: .9rem 1rem;
    }
}