/* =====================================================
   Part to Label V2 — Application Styles
   ===================================================== */

:root {
    --p2l-primary:   #0d6efd;
    --p2l-dark:      #1a1a2e;
    --p2l-darker:    #16213e;
    --p2l-sidebar-w: 0px;          /* reserved for future sidebar */
    --p2l-radius:    0.5rem;
    --p2l-shadow:    0 1px 4px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
    --p2l-transition: 0.15s ease;
}

/* =========================================================
   OPERATOR LAYOUT
   ========================================================= */

body.operator-body {
    background: #f0f2f5;
    min-height: 100vh;
}

.operator-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
}

.operator-container {
    width: 100%;
    max-width: 560px;
    padding-top: 0.5rem;
    padding-bottom: 2.5rem;
}

.operator-card {
    border-radius: 1rem;
    border: none;
    box-shadow: var(--p2l-shadow);
}

.operator-logo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--p2l-dark);
    letter-spacing: -0.02em;
}

/* Progress bar — thicker, rounded */
.operator-progress {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

/* Large touch-friendly buttons for factory use */
.choice-btn {
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
    border-radius: 0.75rem;
    text-align: left;
    transition: transform var(--p2l-transition), box-shadow var(--p2l-transition);
}

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

/* Barcode input — large, monospace */
.barcode-input {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* =========================================================
   CAMERA / PHOTO CAPTURE
   ========================================================= */

.cam-container {
    background: #1a1a2e;
    border-radius: 0.75rem;
    overflow: hidden;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#cam-placeholder {
    text-align: center;
    padding: 2rem;
}

.cam-video {
    width: 100%;
    border-radius: 0.75rem;
    display: block;
}

/* =========================================================
   GUIDE IMAGE LIGHTBOX
   ========================================================= */

.guide-image-wrap img {
    border-radius: 0.5rem;
    border: 1px solid rgba(0,0,0,0.1);
    transition: opacity var(--p2l-transition);
}

.guide-image-wrap img:hover {
    opacity: 0.9;
}

/* =========================================================
   COMPLETE / SUCCESS SCREEN
   ========================================================= */

.success-icon {
    animation: bounce-in 0.5s ease;
}

@keyframes bounce-in {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* =========================================================
   ADMIN LAYOUT
   ========================================================= */

body.admin-body {
    background: #f5f6fa;
    color: #212529;
}

/* Sticky top nav */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.navbar-brand {
    letter-spacing: -0.02em;
}

/* Nav dropdown — slightly wider, rounded */
.navbar .dropdown-menu {
    border-radius: var(--p2l-radius);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 220px;
    padding: 0.5rem 0;
}

.navbar .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: 0;
    transition: background-color var(--p2l-transition);
}

.navbar .dropdown-header {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c757d;
    padding: 0.4rem 1rem 0.2rem;
}

.admin-content {
    padding-top: 0;
}

.admin-content .col-12 {
    max-width: 1440px;
}

/* Cards */
.card {
    border-radius: var(--p2l-radius);
    border-color: rgba(0,0,0,0.08);
}

.card.shadow-sm {
    box-shadow: var(--p2l-shadow) !important;
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    font-size: 0.9rem;
}

/* KPI metric cards */
.kpi-card .card-body {
    padding: 1.1rem 1.25rem;
}

/* =========================================================
   ADMIN LOGIN
   ========================================================= */

body.admin-login-body {
    background: linear-gradient(135deg, var(--p2l-dark) 0%, var(--p2l-darker) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-card-wrap {
    width: 100%;
    max-width: 420px;
}

/* =========================================================
   WORKFLOW STEP TYPE PICKER
   ========================================================= */

.type-picker-card {
    transition: border-color var(--p2l-transition), transform var(--p2l-transition), box-shadow var(--p2l-transition);
    cursor: pointer;
}

.type-picker-card:hover {
    border-color: var(--p2l-primary) !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(13,110,253,0.18);
}

/* =========================================================
   MISC UTILITIES
   ========================================================= */

code {
    color: #0a58ca;
    background: #e8f0fe;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.87em;
}

/* Drag handle for step reordering */
.drag-handle {
    cursor: grab;
    user-select: none;
    color: #adb5bd;
    transition: color var(--p2l-transition);
}

.drag-handle:hover { color: #495057; }
.drag-handle:active { cursor: grabbing; }

tr.dragging {
    opacity: 0.5;
    background: #e8f0fe;
}

/* Chart containers — prevent layout shift; needed with maintainAspectRatio:false */
.chart-wrap {
    position: relative;
    height: 240px;
}

@media (max-width: 576px) {
    .chart-wrap { height: 180px; }
}

.chart-wrap canvas {
    display: block;
}

/* Alert badge animation */
@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

.badge-pulse {
    animation: pulse-badge 2s ease-in-out infinite;
}

/* Admin page header */
.page-header {
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* Table enhancements */
.table > :not(caption) > * > * {
    vertical-align: middle;
}

.table-responsive {
    border-radius: 0 0 var(--p2l-radius) var(--p2l-radius);
}

/* Collapsible help panel */
.help-panel .card-header {
    border-radius: var(--p2l-radius) var(--p2l-radius) 0 0;
}

.help-panel.collapse-open .card-header {
    border-radius: var(--p2l-radius) var(--p2l-radius) 0 0;
}

/* Admin footer */
.admin-footer {
    margin-top: 3rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.07);
    font-size: 0.78rem;
    color: #adb5bd;
    text-align: center;
}

/* =========================================================
   RESPONSIVE — Mobile & tablet tweaks
   ========================================================= */

@media (max-width: 576px) {
    /* Operator */
    .operator-wrap {
        padding: 0;
    }

    .operator-container {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }

    .operator-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .choice-btn {
        font-size: 1rem;
        padding: 0.875rem 1rem;
    }

    /* Admin — collapse px on small screens */
    .admin-content .col-12 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Full-width filter forms on mobile */
    .filter-form .col-sm-2,
    .filter-form .col-sm-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Stacked page header on xs */
    .page-header-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
}

@media (max-width: 768px) {
    /* KPI cards — 2 per row already via col-6, keep icon smaller */
    .kpi-icon { display: none; }

    /* Navbar brand — hide "Admin" badge on mobile */
    .navbar-brand .badge { display: none !important; }
}

@media (min-width: 992px) {
    .admin-content .col-12 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print {
    .navbar, .admin-footer, .btn, form { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ccc !important; }
    .chart-wrap { page-break-inside: avoid; }
}

/* Quality check step toggle — more reliable than inline style="display:none" */
.qc-hidden { display: none !important; }