/**
 * Stock Scanner — Styles frontend
 * Aesthetic : Industrial / Utilitarian — mobile-first
 * Font : IBM Plex Mono (monospace technique) + IBM Plex Sans
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ─── Variables ────────────────────────────────────────────────────────────── */
:root {
    --ss-bg           : #0e0f11;
    --ss-surface      : #161820;
    --ss-surface-2    : #1e2028;
    --ss-border       : #2a2d38;
    --ss-text         : #e8eaf0;
    --ss-text-muted   : #6b7080;
    --ss-accent       : #00e5a0;   /* vert scan */
    --ss-accent-dim   : #00b37f;
    --ss-danger       : #ff4d6d;
    --ss-warning      : #ffb347;
    --ss-info         : #5b9cf6;
    --ss-radius       : 6px;
    --ss-radius-lg    : 12px;
    --ss-font-mono    : 'IBM Plex Mono', 'Courier New', monospace;
    --ss-font-sans    : 'IBM Plex Sans', system-ui, sans-serif;
    --ss-shadow       : 0 4px 24px rgba(0,0,0,.5);
    --ss-transition   : 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reset ciblé ─────────────────────────────────────────────────────────── */
.ss-app *, .ss-app *::before, .ss-app *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ss-app button { cursor: pointer; font-family: var(--ss-font-sans); border: none; background: none; }
.ss-app svg    { display: inline-block; vertical-align: middle; }

/* ─── Conteneur principal ─────────────────────────────────────────────────── */
.ss-app {
    font-family    : var(--ss-font-sans);
    background     : var(--ss-bg);
    color          : var(--ss-text);
    min-height     : 100vh;
    display        : flex;
    flex-direction : column;
    gap            : 0;
    max-width      : 520px;
    margin         : 0 auto;
    padding        : 0 0 env(safe-area-inset-bottom);
}

/* ─── En-tête ─────────────────────────────────────────────────────────────── */
.ss-header {
    display         : flex;
    align-items     : center;
    gap             : 12px;
    padding         : 16px;
    background      : var(--ss-surface);
    border-bottom   : 1px solid var(--ss-border);
    position        : sticky;
    top             : 0;
    z-index         : 100;
}

.ss-logo {
    width           : 36px;
    height          : 36px;
    background      : var(--ss-accent);
    border-radius   : var(--ss-radius);
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
}
.ss-logo svg {
    width  : 20px;
    height : 20px;
    stroke : var(--ss-bg);
}

.ss-title {
    font-family : var(--ss-font-mono);
    font-size   : 1rem;
    font-weight : 600;
    letter-spacing: 0.04em;
    flex        : 1;
    text-transform: uppercase;
}

/* ─── Badge statut ────────────────────────────────────────────────────────── */
.ss-badge {
    font-family   : var(--ss-font-mono);
    font-size     : 0.7rem;
    font-weight   : 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding       : 4px 10px;
    border-radius : 20px;
    border        : 1px solid currentColor;
    transition    : var(--ss-transition);
}
.ss-badge--idle   { color: var(--ss-text-muted); border-color: var(--ss-border); }
.ss-badge--active { color: var(--ss-accent); border-color: var(--ss-accent);
    animation: ss-pulse 1.5s ease-in-out infinite; }

@keyframes ss-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ─── Section scan ────────────────────────────────────────────────────────── */
.ss-scan-section {
    background  : var(--ss-surface);
    border-bottom: 1px solid var(--ss-border);
    padding-bottom: 16px;
}

.ss-video-container {
    position    : relative;
    width       : 100%;
    aspect-ratio: 16/10;
    background  : #000;
    overflow    : hidden;
}

/* Neutraliser les styles injectés par Html5Qrcode */
#ss-reader {
    border  : none !important;
    padding : 0 !important;
    width   : 100% !important;
    height  : 100% !important;
}
#ss-reader video {
    width   : 100% !important;
    height  : 100% !important;
    object-fit: cover !important;
}
#ss-reader img { display: none !important; }

/* Overlay : viseur */
.ss-scan-overlay {
    position        : absolute;
    inset           : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    pointer-events  : none;
    transition      : background var(--ss-transition);
}
.ss-scan-overlay--success {
    background: rgba(0, 229, 160, 0.25);
}

.ss-scan-frame {
    position: relative;
    width   : 260px;
    height  : 160px;
}

.ss-corner {
    position : absolute;
    width    : 20px;
    height   : 20px;
    border-color: var(--ss-accent);
    border-style: solid;
}
.ss-corner--tl { top: 0; left: 0;  border-width: 3px 0 0 3px; }
.ss-corner--tr { top: 0; right: 0; border-width: 3px 3px 0 0; }
.ss-corner--bl { bottom: 0; left: 0;  border-width: 0 0 3px 3px; }
.ss-corner--br { bottom: 0; right: 0; border-width: 0 3px 3px 0; }

.ss-scan-line {
    position   : absolute;
    left       : 4px;
    right      : 4px;
    height     : 2px;
    background : linear-gradient(90deg, transparent, var(--ss-accent), transparent);
    top        : 50%;
    animation  : ss-scan 2s ease-in-out infinite;
}
@keyframes ss-scan {
    0%   { top: 10%; opacity: 0.4; }
    50%  { top: 90%; opacity: 1; }
    100% { top: 10%; opacity: 0.4; }
}

/* ─── Contrôles ───────────────────────────────────────────────────────────── */
.ss-controls {
    display        : flex;
    justify-content: center;
    gap            : 12px;
    padding        : 16px 16px 0;
}

/* ─── Boutons ─────────────────────────────────────────────────────────────── */
.ss-btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    padding        : 11px 20px;
    border-radius  : var(--ss-radius);
    font-size      : 0.875rem;
    font-weight    : 600;
    transition     : var(--ss-transition);
    white-space    : nowrap;
    letter-spacing : 0.02em;
}
.ss-btn svg { width: 16px; height: 16px; }

.ss-btn--primary {
    background : var(--ss-accent);
    color      : var(--ss-bg);
}
.ss-btn--primary:hover:not(:disabled) { background: var(--ss-accent-dim); }

.ss-btn--secondary {
    background : var(--ss-surface-2);
    color      : var(--ss-text);
    border     : 1px solid var(--ss-border);
}
.ss-btn--secondary:hover:not(:disabled) { border-color: var(--ss-text-muted); }

.ss-btn--success {
    background : var(--ss-accent);
    color      : var(--ss-bg);
    font-size  : 1rem;
    padding    : 14px 20px;
}
.ss-btn--success:hover:not(:disabled) { background: var(--ss-accent-dim); }

.ss-btn--ghost {
    color      : var(--ss-text-muted);
    border     : 1px solid var(--ss-border);
}
.ss-btn--ghost:hover { color: var(--ss-text); border-color: var(--ss-text-muted); }

.ss-btn--sm     { padding: 6px 12px; font-size: 0.8rem; }
.ss-btn--full   { width: 100%; }

.ss-btn:disabled {
    opacity : 0.5;
    cursor  : not-allowed;
}

/* ─── Feedback ────────────────────────────────────────────────────────────── */
.ss-feedback {
    margin          : 12px 16px 0;
    padding         : 10px 14px;
    border-radius   : var(--ss-radius);
    font-family     : var(--ss-font-mono);
    font-size       : 0.8rem;
    opacity         : 0;
    transform       : translateY(-4px);
    transition      : opacity var(--ss-transition), transform var(--ss-transition);
    min-height      : 40px;
    border-left     : 3px solid transparent;
}
.ss-feedback--visible {
    opacity   : 1;
    transform : translateY(0);
}
.ss-feedback--success { background: rgba(0,229,160,.1); border-color: var(--ss-accent); color: var(--ss-accent); }
.ss-feedback--error   { background: rgba(255,77,109,.1); border-color: var(--ss-danger); color: var(--ss-danger); }
.ss-feedback--warning { background: rgba(255,179,71,.1); border-color: var(--ss-warning); color: var(--ss-warning); }

/* ─── Section panier ──────────────────────────────────────────────────────── */
.ss-cart-section {
    flex : 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap    : 12px;
}

.ss-cart-header {
    display      : flex;
    align-items  : center;
    justify-content: space-between;
}

.ss-cart-title {
    font-family : var(--ss-font-mono);
    font-size   : 0.85rem;
    font-weight : 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color       : var(--ss-text-muted);
    display     : flex;
    align-items : center;
    gap         : 8px;
}

.ss-cart-count {
    background    : var(--ss-accent);
    color         : var(--ss-bg);
    font-size     : 0.72rem;
    font-weight   : 700;
    padding       : 2px 7px;
    border-radius : 20px;
    min-width     : 22px;
    text-align    : center;
    transition    : transform var(--ss-transition);
}

/* ─── Panier vide ─────────────────────────────────────────────────────────── */
.ss-cart-empty {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 12px;
    padding        : 40px 20px;
    color          : var(--ss-text-muted);
    text-align     : center;
}
.ss-cart-empty svg { width: 48px; height: 48px; opacity: 0.3; }
.ss-cart-empty p   { font-size: 0.9rem; }

/* ─── Liste des articles ──────────────────────────────────────────────────── */
.ss-cart-list {
    list-style  : none;
    display     : flex;
    flex-direction: column;
    gap         : 8px;
    overflow-y  : auto;
    max-height  : 40vh;
}

.ss-cart-item {
    display         : grid;
    grid-template-columns: 1fr auto auto auto;
    align-items     : center;
    gap             : 8px;
    background      : var(--ss-surface-2);
    border          : 1px solid var(--ss-border);
    border-radius   : var(--ss-radius);
    padding         : 10px 12px;
    animation       : ss-slide-in 200ms ease;
}

@keyframes ss-slide-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.ss-item-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.ss-item-nom  { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item-barcode { font-family: var(--ss-font-mono); font-size: 0.72rem; color: var(--ss-text-muted); }

.ss-item-controls {
    display    : flex;
    align-items: center;
    gap        : 4px;
}
.ss-qty-btn {
    width           : 26px;
    height          : 26px;
    border-radius   : var(--ss-radius);
    background      : var(--ss-surface);
    border          : 1px solid var(--ss-border);
    color           : var(--ss-text);
    font-size       : 1.1rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    transition      : var(--ss-transition);
}
.ss-qty-btn:hover { background: var(--ss-border); }
.ss-item-qty {
    font-family : var(--ss-font-mono);
    font-size   : 0.9rem;
    min-width   : 22px;
    text-align  : center;
}
.ss-item-prix {
    font-family : var(--ss-font-mono);
    font-size   : 0.85rem;
    color       : var(--ss-accent);
    min-width   : 70px;
    text-align  : right;
}
.ss-item-remove {
    width           : 26px;
    height          : 26px;
    border-radius   : var(--ss-radius);
    color           : var(--ss-text-muted);
    font-size       : 1.2rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    transition      : var(--ss-transition);
}
.ss-item-remove:hover { color: var(--ss-danger); background: rgba(255,77,109,.1); }

/* ─── Pied de panier ──────────────────────────────────────────────────────── */
.ss-cart-footer {
    border-top  : 1px solid var(--ss-border);
    padding-top : 12px;
    display     : flex;
    flex-direction: column;
    gap         : 12px;
}
.ss-total-row {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    font-size       : 0.875rem;
    color           : var(--ss-text-muted);
}
.ss-total-price {
    font-family : var(--ss-font-mono);
    font-size   : 1.25rem;
    color       : var(--ss-text);
}

/* ─── Spinner ─────────────────────────────────────────────────────────────── */
.ss-spinner {
    width           : 16px;
    height          : 16px;
    border          : 2px solid rgba(0,0,0,0.3);
    border-top-color: var(--ss-bg);
    border-radius   : 50%;
    animation       : ss-spin 0.7s linear infinite;
    display         : inline-block;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }

/* ─── Modal ───────────────────────────────────────────────────────────────── */
.ss-modal {
    position   : fixed;
    inset      : 0;
    z-index    : 1000;
    display    : flex;
    align-items: center;
    justify-content: center;
    padding    : 20px;
}
.ss-modal-backdrop {
    position   : absolute;
    inset      : 0;
    background : rgba(0,0,0,.75);
    backdrop-filter: blur(4px);
}
.ss-modal-content {
    position        : relative;
    background      : var(--ss-surface-2);
    border          : 1px solid var(--ss-border);
    border-radius   : var(--ss-radius-lg);
    padding         : 32px 24px 24px;
    max-width       : 360px;
    width           : 100%;
    text-align      : center;
    box-shadow      : var(--ss-shadow);
    animation       : ss-modal-in 250ms cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes ss-modal-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
.ss-modal-icon {
    width           : 60px;
    height          : 60px;
    border-radius   : 50%;
    font-size       : 1.75rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    margin          : 0 auto 16px;
}
.ss-modal-icon--success { background: rgba(0,229,160,.15); color: var(--ss-accent); }
.ss-modal-icon--error   { background: rgba(255,77,109,.15); color: var(--ss-danger); }
.ss-modal-icon--info    { background: rgba(91,156,246,.15); color: var(--ss-info); }

.ss-modal-title {
    font-size   : 1.1rem;
    font-weight : 600;
    margin-bottom: 8px;
}
.ss-modal-body {
    font-size  : 0.875rem;
    color      : var(--ss-text-muted);
    white-space: pre-line;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ─── Message d'erreur accès ─────────────────────────────────────────────── */
.ss-error {
    padding     : 16px;
    background  : rgba(255,77,109,.1);
    border      : 1px solid var(--ss-danger);
    border-radius: var(--ss-radius);
    color       : var(--ss-danger);
    font-size   : 0.875rem;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .ss-cart-item { grid-template-columns: 1fr auto auto; }
    .ss-item-prix { display: none; }
}

/* ── Saisie manuelle du code-barres ───────────────────────────────────── */
.ss-manual-form {
    margin-top  : 12px;
    padding     : 12px 16px;
    background  : rgba(255,255,255,0.06);
    border-radius: 10px;
    border      : 1px solid rgba(255,255,255,0.12);
}

.ss-manual-label {
    display     : block;
    font-size   : 0.72rem;
    font-weight : 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color       : var(--ss-text-muted, #9ca3af);
    margin-bottom: 8px;
}

.ss-manual-row {
    display : flex;
    gap     : 8px;
    align-items: center;
}

.ss-manual-input {
    flex        : 1;
    height      : 40px;
    padding     : 0 12px;
    border      : 1.5px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    background  : rgba(0,0,0,0.3);
    color       : #fff;
    font-size   : 0.95rem;
    font-family : monospace;
    outline     : none;
    transition  : border-color 0.2s;
}

.ss-manual-input::placeholder { color: rgba(255,255,255,0.3); }
.ss-manual-input:focus { border-color: var(--ss-primary, #10b981); }

/* ── Modal Nouveau Produit ─────────────────────────────────────────────── */
.ss-np-content {
    width       : min(420px, 92vw);
    padding     : 0;
    overflow    : hidden;
    border-radius: var(--ss-radius-lg, 16px);
}

.ss-np-header {
    background  : linear-gradient(135deg, var(--ss-primary, #10b981) 0%, #059669 100%);
    padding     : 28px 24px 20px;
    text-align  : center;
}
.ss-np-icon {
    font-size   : 2rem;
    line-height : 1;
    margin-bottom: 8px;
    display     : block;
}
.ss-np-header .ss-modal-title {
    color       : #fff;
    font-size   : 1.2rem;
    margin      : 0 0 4px;
}
.ss-np-subtitle {
    color       : rgba(255,255,255,0.8);
    font-size   : 0.8rem;
    margin      : 0;
}

.ss-np-body {
    padding     : 20px 24px;
    display     : flex;
    flex-direction: column;
    gap         : 14px;
}

.ss-np-field {
    display     : flex;
    flex-direction: column;
    gap         : 5px;
    flex        : 1;
}

.ss-np-row {
    display     : flex;
    gap         : 12px;
}

.ss-np-label {
    font-size   : 0.75rem;
    font-weight : 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color       : var(--ss-text-muted, #9ca3af);
}
.ss-np-required { color: var(--ss-danger, #ef4444); margin-left: 2px; }

.ss-np-input {
    height      : 42px;
    padding     : 0 12px;
    border      : 1.5px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    background  : rgba(255,255,255,0.07);
    color       : #fff;
    font-size   : 0.95rem;
    outline     : none;
    transition  : border-color 0.2s, background 0.2s;
    width       : 100%;
    box-sizing  : border-box;
}
.ss-np-input:focus {
    border-color: var(--ss-primary, #10b981);
    background  : rgba(16,185,129,0.08);
}
.ss-np-input[readonly] {
    opacity     : 0.6;
    cursor      : default;
}
.ss-np-input--mono { font-family: monospace; letter-spacing: 0.05em; }
.ss-np-input::placeholder { color: rgba(255,255,255,0.25); }

.ss-np-error {
    font-size   : 0.82rem;
    color       : var(--ss-danger, #ef4444);
    background  : rgba(239,68,68,0.1);
    border      : 1px solid rgba(239,68,68,0.3);
    border-radius: 6px;
    padding     : 8px 12px;
    margin      : 0;
}

.ss-np-footer {
    padding     : 16px 24px 20px;
    display     : flex;
    gap         : 10px;
    justify-content: flex-end;
    border-top  : 1px solid rgba(255,255,255,0.08);
}