/* ==========================================================================
   POS Visual Theme Extension for StockFlow
   Integrates Java POS iconic action buttons, nav icons, and status badges.
   Includes Rock-Solid Mobile Bottom Navigation & Compact Mobile User Header.
   ========================================================================== */

/* --- POS Icon Helper Classes --- */
.sf-pos-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
    transition: transform 0.15s ease;
}

.sf-pos-icon-lg {
    width: 28px;
    height: 28px;
    margin-right: 8px;
}

.sf-pos-icon-sm {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

/* --- POS Iconic Buttons --- */
.sf-btn-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #d0d7de;
    background: #ffffff;
    color: #24292f;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease-in-out;
    user-select: none;
    line-height: 1.2;
}

.sf-btn-pos:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.sf-btn-pos:hover .sf-pos-icon {
    transform: scale(1.08);
}

/* Save / Add Primary Button */
.sf-btn-pos-save {
    background: linear-gradient(180deg, #2da44e 0%, #2c974b 100%);
    color: #ffffff;
    border-color: #2a8f47;
    box-shadow: 0 1px 3px rgba(45, 164, 78, 0.2);
}

.sf-btn-pos-save:hover {
    background: linear-gradient(180deg, #2c974b 0%, #24823d 100%);
    color: #ffffff;
}

/* Update / Edit Secondary Button */
.sf-btn-pos-update {
    background: linear-gradient(180deg, #0969da 0%, #0860c4 100%);
    color: #ffffff;
    border-color: #0855af;
    box-shadow: 0 1px 3px rgba(9, 105, 218, 0.2);
}

.sf-btn-pos-update:hover {
    background: linear-gradient(180deg, #0860c4 0%, #0751a7 100%);
    color: #ffffff;
}

/* Delete / Remove Danger Button */
.sf-btn-pos-delete {
    background: linear-gradient(180deg, #cf222e 0%, #c11d27 100%);
    color: #ffffff;
    border-color: #b11b24;
    box-shadow: 0 1px 3px rgba(207, 34, 46, 0.2);
}

.sf-btn-pos-delete:hover {
    background: linear-gradient(180deg, #c11d27 0%, #a81921 100%);
    color: #ffffff;
}

/* Search Input Group with POS Search Icon */
.sf-pos-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.sf-pos-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: #64748b !important;
    opacity: 0.85;
    z-index: 2;
}

.sf-pos-search-input {
    padding-left: 38px !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
}

/* --- POS Styled Navigation Header --- */
.sf-pos-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
    color: var(--sf-text-muted, #57606a);
    text-decoration: none;
    transition: all 0.15s ease;
}

.sf-pos-nav-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--sf-text-main, #1f2328);
}

.sf-pos-nav-item.active {
    background: #ffffff;
    border-color: #d0d7de;
    color: var(--sf-brand, #0969da);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Dark mode adjustments */
body.dark-mode .sf-btn-pos {
    background: #21262d;
    border-color: #363b42;
    color: #c9d1d9;
}

body.dark-mode .sf-btn-pos:hover {
    background: #30363d;
}

body.dark-mode .sf-pos-nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f0f6fc;
}

body.dark-mode .sf-pos-nav-item.active {
    background: #161b22;
    border-color: #30363d;
    color: #58a6ff;
}

/* --- POS Badges & Stock Indicator Pills --- */
.sf-pos-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-pos-badge-success {
    background: #dafbe1;
    color: #1a7f37;
    border: 1px solid #aceebb;
}

.sf-pos-badge-warning {
    background: #fff8c5;
    color: #9a6700;
    border: 1px solid #f1e05a;
}

.sf-pos-badge-danger {
    background: #ffebe9;
    color: #cf222e;
    border: 1px solid #ffc1c0;
}

/* Hide mobile FAB by default on desktop */
.sf-mobile-fab {
    display: none;
}

/* ==========================================================================
   SHOP HEALTH BRIEF & DYNAMIC GUIDE STYLES
   ========================================================================== */

.sf-health-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-light, #e1e4e8);
    border-radius: var(--radius-lg, 12px);
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.sf-health-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sf-health-card-body {
    color: var(--text-primary, #24292f);
}

.sf-shop-health-banner {
    background: linear-gradient(135deg, rgba(9, 105, 218, 0.08) 0%, rgba(45, 164, 78, 0.08) 100%);
    border: 1px solid rgba(9, 105, 218, 0.2);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
}

.sf-health-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark, #1f2328);
    margin-bottom: 8px;
}

.sf-health-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12.5px;
    color: var(--text-secondary, #57606a);
}

.sf-step-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    background: #dafbe1;
    color: #1a7f37;
    margin-left: 6px;
    vertical-align: middle;
}

.sf-guide-steps li.sf-guide-step-complete::before {
    background: #2da44e !important;
    content: "✓" !important;
}

.sf-guide-steps li.sf-guide-step-active::before {
    background: #0969da !important;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.25);
}

/* ==========================================================================
   OPENSOURCEPOS (OSPOS) INSPIRED UI & CSS ENHANCEMENTS
   ========================================================================== */

/* OSPOS Title Bar & Header Typography */
.sf-ospos-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #ffffff;
    border: 2px solid #dce4ec;
    border-radius: 8px;
}

.sf-ospos-title {
    font-size: 20px;
    font-weight: 500;
    color: #182735;
    margin: 0;
}

/* OSPOS Filter Pills & Control Buttons */
.sf-ospos-filter-btn {
    background-color: #ffffff;
    color: #182735;
    border: 2px solid #dce4ec;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sf-ospos-filter-btn:hover,
.sf-ospos-filter-btn.active {
    background-color: #182735;
    color: #ffffff;
    border-color: #182735;
}

/* OSPOS Card Frame styling for Setup & Dashboard grids */
.sf-ospos-card {
    background: #ffffff;
    border: 2px solid #dce4ec;
    border-radius: 8px;
    padding: 18px;
    transition: all 0.18s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.sf-ospos-card:hover {
    border-color: #182735;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(24, 39, 53, 0.1);
}

/* OSPOS Summary Totals & Register Table Styling */
.sf-ospos-summary-table {
    width: 100%;
    border-collapse: collapse;
}

.sf-ospos-summary-table th {
    background: #182735;
    color: #ffffff;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.sf-ospos-summary-table td {
    padding: 10px;
    border-bottom: 1px solid #dce4ec;
    font-size: 13.5px;
}

/* ==========================================================================
   MOBILE RESPONSIVE & STABLE BOTTOM NAV (<= 768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* --- 1. Rectified Compact User & Logout Menu on Mobile --- */
  .sf-user-menu-wrapper {
    margin-left: auto !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }

  .sf-header-user {
    padding: 4px 8px !important;
    gap: 4px !important;
    font-size: 12px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
  }

  #header-username {
    display: none !important;
  }

  .sf-user-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 140px !important;
    width: auto !important;
    max-width: 180px !important;
    padding: 4px !important;
    background: var(--bg-card, #1c1e22) !important;
    border: 1px solid var(--border-light, rgba(255, 255, 255, 0.15)) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    z-index: 3000 !important;
  }

  .sf-dropdown-item {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    border-radius: 6px !important;
  }

  .sf-header-actions {
    gap: 6px !important;
  }

  .sf-btn-add {
    display: none !important;
  }

  /* --- 2. Rock-Solid Mobile Bottom Navigation Bar (Matching User Screenshot) --- */
  .sf-side-logo {
    display: none !important;
  }

  .sf-sidebar {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 62px !important;
    height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    background: #18191c !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 4px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    margin: 0 !important;

    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
    touch-action: manipulation !important;
  }

  .sf-nav {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .sf-nav-item {
    flex: 1 1 0px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 5px 2px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #8e8e93 !important;
    gap: 3px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .sf-nav-item .sf-pos-icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    filter: grayscale(1) opacity(0.6);
    transition: transform 0.15s ease, filter 0.15s ease !important;
  }

  .sf-nav-item span {
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: inherit !important;
    letter-spacing: -0.2px !important;
  }

  .sf-nav-item.active {
    color: #ff7a00 !important;
  }

  .sf-nav-item.active .sf-pos-icon {
    filter: none !important;
    transform: scale(1.12) !important;
  }

  /* --- 3. Stable Mobile Floating Action Button (FAB) --- */
  .sf-mobile-fab {
    display: flex !important;
    position: fixed !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ff8c00 0%, #ff5500 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(255, 85, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    z-index: 10000 !important;
    cursor: pointer !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }

  .sf-mobile-fab:active {
    transform: scale(0.92) translateZ(0) !important;
  }

  .sf-content {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --- 5. A modal must outrank the bottom bar and the FAB ---
     The bar is z-index 9999 and the FAB 10000, but .sf-modal-overlay is 2000,
     so both floated over any open modal. That was not cosmetic: on a 390px
     phone the bar sat directly on "Complete Sale", so tapping the pay button
     switched tabs instead of recording the sale, and the FAB covered the
     guide's "Add Product". Lifting the overlay above them puts both behind the
     backdrop, where they are neither visible nor tappable while a modal is up. */
  .sf-modal-overlay {
    z-index: 10002 !important;
  }
}