/* ============================================================
   Sistem Stok Sayım — Application Styles
   ============================================================ */

/* ── CSS Custom Properties ───────────────────────────────────── */
:root {
    --ss-primary:          #0d6efd;
    --ss-primary-dark:     #0a58ca;
    --ss-success:          #198754;
    --ss-danger:           #dc3545;
    --ss-warning:          #ffc107;
    --ss-info:             #0dcaf0;

    --ss-body-bg:          #f8f9fa;
    --ss-card-radius:      0.75rem;
    --ss-btn-radius:       0.5rem;
    --ss-staff-btn-height: 5rem;
    --ss-staff-btn-fs:     1.1rem;

    --ss-gps-ok:           #198754;
    --ss-gps-error:        #dc3545;
    --ss-gps-pending:      #ffc107;
}

/* ── Base ────────────────────────────────────────────────────── */
body {
    background-color: var(--ss-body-bg);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Auth layout ─────────────────────────────────────────────── */
.auth-body {
    min-height: 100vh;
}

.auth-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Staff action buttons ─────────────────────────────────────── */
.btn-staff-action {
    height: var(--ss-staff-btn-height);
    font-size: var(--ss-staff-btn-fs);
    font-weight: 600;
    border-radius: var(--ss-btn-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-staff-action:active {
    transform: scale(0.98);
}

.btn-staff-action .bi {
    font-size: 1.5rem;
}

/* Staff action button variants */
.btn-staff-qr      { background-color: #0d6efd; color: #fff; border: none; }
.btn-staff-qr:hover { background-color: #0a58ca; color: #fff; }

.btn-staff-receipt      { background-color: #198754; color: #fff; border: none; }
.btn-staff-receipt:hover { background-color: #146c43; color: #fff; }

.btn-staff-timesheet      { background-color: #fd7e14; color: #fff; border: none; }
.btn-staff-timesheet:hover { background-color: #d66b0e; color: #fff; }

.btn-staff-earnings      { background-color: #6f42c1; color: #fff; border: none; }
.btn-staff-earnings:hover { background-color: #5a359a; color: #fff; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
    border-radius: var(--ss-card-radius);
}

.card-stats {
    border-left: 4px solid var(--ss-primary);
}

.card-stats-success {
    border-left-color: var(--ss-success);
}

.card-stats-warning {
    border-left-color: var(--ss-warning);
}

.card-stats-danger {
    border-left-color: var(--ss-danger);
}

/* ── GPS Status Indicator ────────────────────────────────────── */
.gps-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--ss-btn-radius);
    font-size: 0.875rem;
    font-weight: 500;
}

.gps-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gps-status.pending .gps-status-dot {
    background-color: var(--ss-gps-pending);
    animation: gps-pulse 1.2s infinite;
}

.gps-status.ok .gps-status-dot {
    background-color: var(--ss-gps-ok);
}

.gps-status.error .gps-status-dot {
    background-color: var(--ss-gps-error);
}

@keyframes gps-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

/* ── QR Scanner overlay ──────────────────────────────────────── */
.qr-scanner-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.qr-scanner-container video {
    width: 100%;
    border-radius: var(--ss-card-radius);
    background: #000;
}

.qr-scanner-overlay {
    position: absolute;
    inset: 0;
    border: 3px solid var(--ss-primary);
    border-radius: var(--ss-card-radius);
    pointer-events: none;
}

.qr-scanner-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border-color: var(--ss-primary);
    border-style: solid;
}

.qr-scanner-corner.tl { top: 10px; left: 10px;  border-width: 3px 0 0 3px; }
.qr-scanner-corner.tr { top: 10px; right: 10px; border-width: 3px 3px 0 0; }
.qr-scanner-corner.bl { bottom: 10px; left: 10px;  border-width: 0 0 3px 3px; }
.qr-scanner-corner.br { bottom: 10px; right: 10px; border-width: 0 3px 3px 0; }

/* ── Table utilities ─────────────────────────────────────────── */
.table-responsive {
    border-radius: var(--ss-card-radius);
    overflow: hidden;
}

/* ── Badge utilities ─────────────────────────────────────────── */
.badge-status-pending  { background-color: var(--ss-warning); color: #000; }
.badge-status-approved { background-color: var(--ss-success); color: #fff; }
.badge-status-rejected { background-color: var(--ss-danger);  color: #fff; }
.badge-status-review   { background-color: var(--ss-info);    color: #000; }

/* ── Mobile responsive tweaks ────────────────────────────────── */
@media (max-width: 576px) {
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .btn-staff-action {
        height: 4.5rem;
        font-size: 1rem;
    }

    .table th,
    .table td {
        font-size: 0.8rem;
        padding: 0.4rem;
    }
}