/*
╔══════════════════════════════════════════════════════════════════════════════╗
║  ADMIN DASHBOARD - STYLESHEET                                                 ║
╚══════════════════════════════════════════════════════════════════════════════╝

PURPOSE:
    All visual styling for the Stocklow Admin Dashboard.
    Handles layout, colors, typography, animations, and responsive design.

WHAT IT HANDLES:
    • Reset & base styles (*, body, typography)
    • Accessibility (focus indicators, skip links, screen reader classes)
    • Login screen styling (gradient background, login box, portal toggle)
    • Dashboard layout (header, sidebar, main content grid)
    • Navigation menu (sidebar items, active states, hover effects)
    • Form components (inputs, buttons, textareas, selects)
    • Cards & containers (form cards, settings cards, dashboard cards)
    • Tables (history table, inventory table, responsive layout)
    • Modals (overlays, dialog boxes, animations)
    • Toasts & notifications (success, error, warning styles)
    • Loading states (spinners, overlays, skeleton screens)
    • Trial banner (subscription prompt at top)
    • Order items & inventory display (status colors, categories)
    • Buttons (primary, danger, success variants)
    • Animations (fade-in, slide-in, spinner rotation)
    • Mobile responsive (breakpoints, touch-friendly sizing)

COLOR SCHEME:
    • Primary: #6b7280 (purple/blue gradient)
    • Success: #48bb78 (green)
    • Danger: #f56565 (red)
    • Warning: #ed8936 (orange)
    • Backgrounds: #e5e7eb (light gray), white, gradients

LAYOUT APPROACH:
    • Flexbox for component alignment
    • CSS Grid for dashboard layout
    • Mobile-first responsive design
    • Breakpoint at 768px for mobile

FILE SIZE: ~1,627 lines
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: #e5e7eb;
min-height: 100vh;
padding: 0;
    }

    /* ADA: Skip Navigation Link */
    .skip-link {
position: absolute;
top: -40px;
left: 0;
background: #6b7280;
color: white;
padding: 8px 16px;
z-index: 100000;
text-decoration: none;
font-weight: 600;
    }
    .skip-link:focus {
top: 0;
    }

    /* ADA: Visually Hidden Class for Screen Readers */
    .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
    }

    /* ADA: Focus Indicators */
    *:focus {
outline: 3px solid #6b7280;
outline-offset: 2px;
    }

    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
outline: 3px solid #6b7280;
outline-offset: 2px;
    }

    .login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    }

    .login-box {
background: white;
border-radius: 16px;
padding: 48px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
max-width: 420px;
width: 100%;
    }

    .login-header h1 {
font-size: 28px;
margin-bottom: 8px;
color: #1a202c;
font-weight: 700;
    }

    .login-header p {
color: #4a5568;
font-size: 15px;
margin-bottom: 32px;
    }

    .form-group {
margin-bottom: 16px;
    }

    .form-label {
display: block;
font-weight: 600;
color: #2d3748;
margin-bottom: 6px;
font-size: 14px;
    }

    .input-field {
width: 100%;
padding: 14px 16px;
font-size: 15px;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
transition: all 0.2s;
background: #f7fafc;
    }

    .input-field:focus {
outline: none;
border-color: #fbbf24;
background: white;
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.15);
    }

    .password-container {
position: relative;
    }

    .password-field {
width: 100%;
padding: 14px 50px 14px 16px;
font-size: 15px;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
transition: all 0.2s;
background: #f7fafc;
    }

    .password-field:focus {
outline: none;
border-color: #fbbf24;
background: white;
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.15);
    }

    .password-toggle {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 20px;
color: #a0aec0;
    }

    .login-btn {
width: 100%;
padding: 14px;
font-size: 15px;
font-weight: 600;
color: white;
background: linear-gradient(135deg, #6b7280, #4b5563);
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
margin-top: 8px;
    }

    .login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }

    .login-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
    }

    .portal-toggle {
flex: 1;
padding: 10px;
border: none;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
    }

    .portal-toggle:not(.active) {
background: transparent;
color: #4a5568;
    }

    .portal-toggle:not(.active):hover {
background: rgba(102, 126, 234, 0.1);
color: #6b7280;
    }

    .portal-toggle.active {
background: white;
color: #6b7280;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .error-message, .loading-message {
padding: 12px;
border-radius: 8px;
margin-top: 16px;
display: none;
font-size: 14px;
    }

    .error-message {
color: #e53e3e;
background: #fff5f5;
border: 1px solid #feb2b2;
    }

    .loading-message {
color: #6b7280;
background: #eef2ff;
border: 1px solid #c3dafe;
    }

    .legal-links {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #e2e8f0;
text-align: center;
font-size: 12px;
    }

    .legal-links a {
color: #6b7280;
text-decoration: none;
margin: 0 8px;
    }

    .legal-links a:hover {
text-decoration: underline;
    }

    .dashboard {
display: none;
    }
    
    .header {
background: #f9fafb;
padding: 16px 24px;
border-bottom: 1px solid #d1d5db;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .header-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
    }
    
    .header h1 {
font-size: 20px;
color: #1a202c;
font-weight: 700;
    }

    .header p {
color: #2d3748;
font-size: 15px;
margin-top: 2px;
font-weight: 600;
    }

    .header-right {
display: flex;
gap: 12px;
align-items: center;
    }

    .logout-btn {
padding: 10px 20px;
font-size: 14px;
color: #2d3748;
background: white;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
    }

    .logout-btn:hover {
background: #f7fafc;
border-color: #cbd5e0;
    }

    .content {
max-width: 1200px;
margin: 0 auto;
padding: 32px;
    }

    .tabs {
display: flex;
gap: 8px;
margin-bottom: 32px;
background: white;
border-radius: 12px;
padding: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
position: relative;
    }
    
    .tab {
flex: 1;
padding: 14px 20px;
text-align: center;
cursor: pointer;
border-radius: 8px;
transition: all 0.2s;
font-weight: 600;
color: #2d3748;
border: none;
background: transparent;
font-size: 15px;
    }

    .tab:hover {
background: #f7fafc;
color: #2d3748;
    }
    
    .tab.active {
background: #6b7280;
color: white;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

    .settings-dropdown-wrapper {
flex: 1;
position: relative;
    }

    .settings-tab-btn {
width: 100%;
padding: 14px 20px;
text-align: center;
cursor: pointer;
border-radius: 8px;
transition: all 0.2s;
font-weight: 600;
color: #2d3748;
border: none;
background: transparent;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
    }

    .settings-tab-btn:hover {
background: #f7fafc;
color: #2d3748;
    }

    .settings-tab-btn.active {
background: #6b7280;
color: white;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

    .settings-dropdown-arrow {
transition: transform 0.2s;
    }

    .settings-dropdown-arrow.open {
transform: rotate(180deg);
    }

    .settings-dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 8px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
overflow: hidden;
border: 1px solid #e5e7eb;
    }

    .settings-dropdown-menu.show {
display: block;
    }

    .settings-dropdown-item {
padding: 12px 20px;
cursor: pointer;
transition: all 0.2s;
font-weight: 600;
font-size: 14px;
color: #2d3748;
background: white;
border: none;
width: 100%;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
    }

    .settings-dropdown-item:hover {
background: #f7fafc;
color: #6b7280;
    }

    .settings-dropdown-item.active {
background: #eef2ff;
color: #6b7280;
    }

    .tab-content {
display: none;
    }
    
    .tab-content.active {
display: block;
    }

    .settings-content {
display: none;
    }

    .settings-content.active {
display: block;
    }

    .settings-section {
background: #f9fafb;
padding: 24px;
border-radius: 12px;
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
border: 1px solid #e5e7eb;
    }

    .settings-section h3 {
font-size: 18px;
color: #1a202c;
margin-bottom: 12px;
font-weight: 600;
    }

    .visual-guide {
background: #eef2ff;
border: 2px solid #c3dafe;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    }

    .visual-guide.show {
max-height: 2000px;
opacity: 1;
padding: 20px;
margin-bottom: 20px;
    }

    .visual-guide-title {
font-size: 16px;
font-weight: 700;
color: #1a202c;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
    }

    .toggle-guide-btn {
background: #6b7280;
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
margin-bottom: 20px;
    }

    .toggle-guide-btn:hover {
background: #5568d3;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    }

    .toggle-guide-btn .arrow {
transition: transform 0.3s;
    }

    .toggle-guide-btn.open .arrow {
transform: rotate(180deg);
    }

    .step-label {
display: inline-block;
background: rgba(255, 255, 255, 0.9);
padding: 4px 10px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
    }

    .collapsible-section {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
    }

    .collapsible-section.show {
max-height: 500px;
opacity: 1;
margin-bottom: 24px;
    }

    .form-header-clickable {
cursor: pointer;
transition: all 0.2s;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
    }

    .form-header-clickable:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .form-header-left {
flex: 1;
    }

    .form-header-actions {
display: flex;
gap: 12px;
align-items: center;
    }

    .header-delete-btn {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
    }

    .header-delete-btn:hover {
background: rgba(239, 68, 68, 0.9);
border-color: rgba(239, 68, 68, 1);
    }

    .collapse-indicator {
font-size: 14px;
transition: transform 0.3s;
color: rgba(255, 255, 255, 0.8);
    }

    .collapse-indicator.open {
transform: rotate(180deg);
    }

    #editFormTitle::placeholder,
    #editFormCadence::placeholder {
color: rgba(255, 255, 255, 0.6);
    }

    #editFormTitle:focus,
    #editFormCadence:focus {
outline: none;
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.6);
    }

    .history-section {
background: #f9fafb;
padding: 24px;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
border: 1px solid #e5e7eb;
    }

    .sync-info {
background: #c6f6d5;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
color: #22543d;
font-weight: 500;
font-size: 14px;
border-left: 4px solid #48bb78;
    }

    .filter-controls {
background: #ffffff;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
border: 1px solid #e5e7eb;
    }

    .filter-controls label {
font-weight: 600;
color: #2d3748;
font-size: 14px;
    }

    .filter-controls select,
    .filter-controls input {
padding: 8px 12px;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
background: #f7fafc;
transition: all 0.2s;
    }

    .filter-controls select:focus,
    .filter-controls input:focus {
outline: none;
border-color: #fbbf24;
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.15);
    }

    .history-table {
width: 100%;
border-collapse: collapse;
border-radius: 10px;
overflow: hidden;
    }

    .history-table th {
background: #6b7280;
color: white;
padding: 15px;
text-align: left;
font-weight: 600;
    }

    .history-table td {
padding: 12px 15px;
border-bottom: 1px solid #e2e8f0;
    }

    .history-table tr:hover {
background: #f7fafc;
    }
    @media (max-width: 768px) {
.visual-guide [style*="grid-template-columns: 140px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.visual-guide [style*="grid-template-columns: 140px 1fr"] > div:first-child {
    display: none !important;
}
    }

    .guide-example {
background: white;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
    }

    .guide-label {
font-size: 12px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
margin-bottom: 6px;
letter-spacing: 0.5px;
    }

    .guide-content {
font-size: 14px;
color: #2d3748;
font-weight: 500;
    }

    .guide-arrow {
text-align: center;
color: #6b7280;
font-size: 20px;
margin: 8px 0;
    }

    .btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
    }

    .btn-primary {
background: #6b7280;
color: white;
    }

    .btn-secondary {
background: white;
color: #2d3748;
border: 1.5px solid #e2e8f0;
    }

    .btn-success {
background: #48bb78;
color: white;
    }

    .btn-danger {
background: #f56565;
color: white;
    }

    .order-suggestion {
background: #f9fafb;
padding: 24px;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
border: 1px solid #e5e7eb;
    }

    .form-toggles {
display: flex;
gap: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
    }

    .toggle-btn {
flex: 1;
min-width: 200px;
padding: 14px 20px;
background: white;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
color: #2d3748;
transition: all 0.2s;
font-size: 14px;
    }

    .toggle-btn:hover:not(.active) {
border-color: #cbd5e0;
    }

    .toggle-btn.active {
background: #6b7280;
color: white;
border-color: #6b7280;
    }

    .order-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid #f7fafc;
font-size: 14px;
gap: 16px;
cursor: pointer;
transition: background 0.2s;
    }

    @media (hover: hover) and (pointer: fine) {
.order-item:hover {
    background: #f7fafc;
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 12px;
}
    }

    .item-info {
flex: 1;
min-width: 0;
    }

    .item-name {
font-weight: 600;
color: #2d3748;
margin-bottom: 4px;
    }

    .item-details {
font-size: 13px;
color: #4a5568;
word-spacing: -2px;
    }

    .need-order {
background: #fed7e2;
color: #97266d;
padding: 6px 12px;
border-radius: 6px;
font-weight: 600;
font-size: 13px;
white-space: nowrap;
    }

    .need-order::before {
content: "⚠️ ";
    }

    .stock-good {
background: #c6f6d5;
color: #22543d;
padding: 6px 12px;
border-radius: 6px;
font-weight: 600;
font-size: 13px;
white-space: nowrap;
    }

    .stock-good::before {
content: "✓ ";
    }

    .critical-warning {
background: #fc8181;
color: white;
padding: 6px 12px;
border-radius: 6px;
font-weight: 600;
font-size: 13px;
white-space: nowrap;
    }

    .critical-warning::before {
content: "🚨 ";
    }

    .set-targets {
background: #fef3c7;
color: #92400e;
padding: 6px 12px;
border-radius: 6px;
font-weight: 600;
font-size: 13px;
white-space: nowrap;
    }

    .set-targets::before {
content: "⚙️ ";
    }

    .form-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 24px;
    }

    .form-card {
background: #fafbfc;
padding: 20px;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
border: 2px solid #e5e7eb;
    }

    .form-card:hover:not(.active) {
border-color: #cbd5e0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .form-card.active {
border-color: #6b7280;
background: white;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
cursor: default;
    }

    .add-form-section {
background: #f7fafc;
padding: 20px;
border-radius: 12px;
margin-bottom: 20px;
border: 1.5px solid #e2e8f0;
    }

    .add-form-grid {
display: grid;
grid-template-columns: 2fr 2fr 1fr;
gap: 12px;
    }

    .add-item-input {
padding: 10px 12px;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
background: white;
transition: all 0.2s;
    }

    .add-item-input:focus {
outline: none;
border-color: #fbbf24;
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.15);
    }

    .add-item-input.required {
border-left: 3px solid #f56565;
    }

    .bulk-add-hint {
font-size: 12px;
color: #4a5568;
margin-top: 6px;
font-style: italic;
    }

    .toast {
position: fixed;
bottom: 24px;
right: 24px;
background: white;
padding: 16px 20px;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
gap: 12px;
z-index: 10000;
animation: slideIn 0.3s ease;
border-left: 4px solid #48bb78;
max-width: 400px;
    }

    @keyframes slideIn {
from { transform: translateX(400px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
    }

    .toast-success { border-left-color: #48bb78; }
    .toast-warning { border-left-color: #ed8936; }
    .toast-error { border-left-color: #f56565; }

    /* ENHANCED MODAL STYLES */
    .modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 20000;
align-items: center;
justify-content: center;
animation: fadeIn 0.2s ease;
    }

    @keyframes fadeIn {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
    }

    .modal-overlay.show {
display: flex;
    }

    .modal-box {
background: white;
border-radius: 20px;
padding: 40px;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
animation: modalSlideIn 0.3s ease;
transform-origin: center;
    }

    @keyframes modalSlideIn {
from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
}
to {
    opacity: 1;
    transform: scale(1) translateY(0);
}
    }

    .modal-header {
font-size: 26px;
font-weight: 700;
color: #1a202c;
margin-bottom: 28px;
text-align: center;
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
    }

    .modal-field {
margin-bottom: 24px;
    }

    .modal-label {
display: block;
font-weight: 600;
color: #2d3748;
margin-bottom: 10px;
font-size: 14px;
    }

    .modal-input, .modal-select {
width: 100%;
padding: 14px 16px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 15px;
background: #f7fafc;
transition: all 0.2s;
    }

    .modal-input:focus, .modal-select:focus {
outline: none;
border-color: #fbbf24;
background: white;
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.15);
transform: translateY(-1px);
    }

    .modal-input::placeholder {
color: #a0aec0;
    }

    .modal-buttons {
display: flex;
gap: 12px;
margin-top: 32px;
    }

    .modal-buttons button {
flex: 1;
padding: 14px 20px;
font-size: 15px;
font-weight: 600;
border-radius: 10px;
transition: all 0.2s;
    }

    .step-box {
background: white;
border-radius: 16px;
padding: 24px;
margin-bottom: 20px;
border: 2px solid #e5e7eb;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: flex-start;
gap: 20px;
    }

    .step-box:hover {
border-color: #6b7280;
box-shadow: 0 10px 30px -10px rgba(102, 126, 234, 0.3);
transform: translateY(-2px);
    }

    .step-checkbox {
width: 28px;
height: 28px;
border: 2px solid #e2e8f0;
border-radius: 8px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
font-size: 18px;
    }

    .step-checkbox.checked {
background: linear-gradient(135deg, #48bb78, #38a169);
border-color: #48bb78;
color: white;
transform: scale(1.1);
    }

    .step-content {
flex: 1;
    }

    .step-title {
font-weight: 700;
font-size: 17px;
color: #1a202c;
margin-bottom: 10px;
    }

    .step-description {
color: #4a5568;
font-size: 14px;
line-height: 1.6;
    }

    .step-action {
margin-top: 16px;
    }

    .info-step {
background: #f0f9ff;
border-color: #bae6fd;
cursor: default;
    }

    .info-step:hover {
border-color: #bae6fd;
box-shadow: none;
transform: none;
    }

    .info-step[onclick] {
cursor: pointer;
    }

    .info-step[onclick]:hover {
border-color: #60a5fa;
box-shadow: 0 10px 30px -10px rgba(96, 165, 250, 0.3);
transform: translateY(-2px);
    }

    .target-headers {
position: sticky;
top: 0;
background: #ffffff;
z-index: 10;
padding: 12px;
border-radius: 8px;
margin-bottom: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
display: none;
align-items: center;
justify-content: center;
z-index: 15000;
backdrop-filter: blur(4px);
    }

    .loading-overlay.show {
display: flex;
    }

    .spinner {
border: 4px solid #e2e8f0;
border-top: 4px solid #6b7280;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
    }

    @keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
    }

    .empty-state {
text-align: center;
padding: 60px 20px;
color: #4a5568;
    }

    .empty-state-icon {
font-size: 48px;
margin-bottom: 16px;
    }

    .info-box {
background: #eef2ff;
padding: 20px;
border-radius: 12px;
border-left: 4px solid #6b7280;
margin-bottom: 20px;
    }

    .info-box-title {
font-weight: 700;
font-size: 15px;
color: #1a202c;
margin-bottom: 10px;
    }

    .info-box-content {
color: #2d3748;
font-size: 14px;
line-height: 1.6;
    }

    .info-box ul {
margin-left: 20px;
margin-top: 8px;
    }

    .info-box li {
margin-bottom: 4px;
    }

    .template-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 24px;
    }

    .template-card {
background: white;
border: 2px solid #e5e7eb;
border-radius: 16px;
padding: 28px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
    }

    .template-card:hover {
border-color: #6b7280;
box-shadow: 0 10px 30px -10px rgba(102, 126, 234, 0.3);
transform: translateY(-4px);
    }

    .template-icon {
font-size: 48px;
margin-bottom: 20px;
display: block;
    }

    .template-name {
font-size: 20px;
font-weight: 700;
color: #1a202c;
margin-bottom: 10px;
    }

    .template-description {
font-size: 14px;
color: #4a5568;
line-height: 1.6;
margin-bottom: 16px;
    }

    .template-meta {
display: flex;
gap: 12px;
flex-wrap: wrap;
    }

    .template-badge {
display: inline-block;
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
    }

    .badge-cadence {
background: #dbeafe;
color: #1e40af;
    }

    .badge-type {
background: #f3e8ff;
color: #6b21a8;
    }

    .template-card.custom {
border: 2px dashed #cbd5e0;
background: #f7fafc;
    }

    .template-card.custom:hover {
border-color: #6b7280;
background: white;
    }

    .template-modal .modal-box {
max-width: 900px;
    }

    @media (max-width: 768px) {
.add-form-grid { 
    grid-template-columns: 1fr; 
}

#currentFormEditor > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
}

#currentFormEditor .add-form-section > div[style*="grid-template-columns: 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
}

.add-form-section > div[style*="display: flex"] {
    display: flex !important;
    flex-direction: column !important;
}

.add-form-section > div[style*="display: flex"] input {
    flex: 1 !important;
    width: 100% !important;
}

.add-form-section > div[style*="display: flex"] button {
    width: 100% !important;
}

.settings-dropdown-wrapper { 
    width: 100%;
    flex: none;
}
.settings-dropdown-menu { 
    position: relative; 
    margin-top: 8px; 
}
.settings-tab-btn {
    width: 100%;
}
.tabs {
    flex-direction: column;
}

#targetItemsList {
    overflow-x: visible;
}

#targetItemsList h4 {
    position: static;
}

#targetItemsList [style*="grid-template-columns"] {
    display: block !important;
    min-width: auto !important;
    background: white;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#targetItemsList [style*="grid-template-columns"] > div:first-child {
    position: static;
    box-shadow: none;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

#targetItemsList [style*="grid-template-columns"] > div:not(:first-child) {
    margin-bottom: 12px;
}

#targetItemsList [style*="grid-template-columns"] > div label {
    font-size: 12px !important;
    margin-bottom: 4px;
}

#targetItemsList [style*="grid-template-columns"] input {
    display: block;
    width: 100% !important;
    position: relative;
}

#targetItemsList [style*="grid-template-columns"] > div:last-child {
    margin-bottom: 0;
}

#targetItemsList [style*="grid-template-columns"]:not([style*="margin-bottom: 8px"]) {
    border: 1px solid #e5e7eb;
}

#targetItemsList .target-headers {
    display: none !important;
}

.content {
    padding: 16px;
}

.header {
    padding: 12px 16px;
}

.header h1 {
    font-size: 16px;
}

.header p {
    font-size: 12px;
}

.header-right {
    flex-wrap: nowrap;
    gap: 8px;
}

.logout-btn {
    font-size: 11px;
    padding: 6px 10px;
    white-space: nowrap;
}

.header-right .btn-primary {
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap;
}

.order-item {
    padding: 12px 0;
    align-items: flex-start;
}

.item-info {
    flex: 1;
    min-width: 0;
}

.item-name {
    font-size: 14px;
}

.item-details {
    font-size: 12px;
}

.need-order,
.stock-good,
.critical-warning,
.set-targets {
    flex-shrink: 0;
}

#orderingSuggestions > div:first-child {
    flex-direction: column;
    align-items: stretch;
}

#orderingSuggestions > div:first-child button {
    width: 100%;
}

.form-toggles {
    flex-direction: column;
}

.toggle-btn {
    min-width: auto;
    width: 100%;
}

.history-section {
    overflow-x: auto;
}

.history-table {
    min-width: 600px;
    font-size: 13px;
}

.history-table th,
.history-table td {
    padding: 10px 8px;
}

.filter-controls {
    flex-direction: column;
    align-items: stretch;
}

.filter-controls select,
.filter-controls input {
    width: 100%;
}

.modal-box {
    padding: 28px;
    border-radius: 16px;
}

.modal-header {
    font-size: 22px;
}

.step-box {
    padding: 20px;
}
    }


/* Environment indicator banner */
#envBanner {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 12px 24px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001; /* Above everything including trial banner */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 3px solid #b45309;
}

#envBanner.dev {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

#envBanner.staging {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border-bottom-color: #0e7490;
}

/* Adjust body padding when env banner is shown */
body.has-env-banner {
    padding-top: 45px;
}

body.has-env-banner.has-banner {
    padding-top: 110px; /* Both env banner + trial banner */
}

@media (max-width: 768px) {
    #envBanner {
        font-size: 11px;
        padding: 10px 16px;
    }

    body.has-env-banner {
        padding-top: 40px;
    }

    body.has-env-banner.has-banner {
        padding-top: 135px; /* Both banners on mobile */
    }
}

/* Subscription banner - full width design */
#trialBanner {
    background: #fef3c7;
    color: #92400e;
    padding: 16px 24px;
    border-radius: 0; /* Changed from 8px to 0 for true full width */
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: none; /* Removed border */
    border-bottom: 3px solid #f59e0b; /* Added bottom border instead */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#trialBanner.active-subscription {
    background: #d4edda;
    color: #155724;
    border-bottom-color: #28a745; /* Changed from border-color */
}

/* Push content down when banner is present */
body.has-banner {
    padding-top: 65px; /* Increased slightly from 60px */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #trialBanner {
padding: 12px 16px;
font-size: 13px;
flex-wrap: wrap;
justify-content: center;
text-align: center;
    }
    
    #trialBanner button {
margin-top: 8px;
width: 100%;
max-width: 200px;
    }

    body.has-banner {
padding-top: 95px; /* More space on mobile since it wraps */
    }
}

/* Footer styles */
#mainDashboard {
    padding-bottom: 50px; /* Make room for fixed footer */
}

footer {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


/* Red Delete Selected Button */
.bulk-delete-btn-red {
    background: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2) !important;
}
.bulk-delete-btn-red:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3) !important;
}

/* Category delete button top-right */
.category-delete-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #fff;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
    z-index: 10;
}
.category-delete-btn:hover {
    color: #dc2626;
    background: #fee2e2;
    border-color: #fca5a5;
}

/* Light grey category headers instead of purple */
.category-header-grey {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    position: relative;
}
.category-header-grey .category-title {
    color: #1f2937 !important;
}
.category-header-grey .collapse-icon {
    color: #6b7280 !important;
}

/* Modern Add Items button */
.add-items-btn-modern {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    background: #ffffff;
    color: #6b7280;
    border: 1.5px solid #6b7280;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.add-items-btn-modern:hover {
    background: #eef2ff;
    border-color: #5a67d8;
}

/* Better empty state for no forms */
.empty-state-prominent {
    padding: 80px 20px;
    text-align: center;
}
.empty-state-prominent .empty-state-icon {
    font-size: 64px;
    margin-bottom: 24px;
}
.empty-state-prominent h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}
.empty-state-prominent p {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 32px;
}
.empty-state-prominent .btn-primary {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Modern add category section */
.add-category-modern {
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    border: 1px dashed #d1d5db;
}
.add-category-modern input {
    transition: all 0.2s;
}
.add-category-modern input:focus {
    border-color: #6b7280;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ========== MODERN REDESIGN STYLES - STEP 1 & 2 ========== */

/* Step Header Styling */
.step-header-modern {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.step-badge-modern {
    background: #6b7280;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.step-title-modern {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.step-description-modern {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 24px;
}

/* Create Form Header */
.create-form-header-modern {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* Forms Grid */
.forms-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Modern Form Card Overrides */
.forms-grid-modern .form-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    transition: all 0.2s;
}

.forms-grid-modern .form-card:hover {
    border-color: #6b7280;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.forms-grid-modern .form-card.active {
    border-color: #6b7280;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.2);
}

/* Modern Button Styles for Forms */
.forms-grid-modern .btn-primary.btn-small-modern {
    padding: 8px 14px;
    font-size: 13px;
    background: #6b7280;
    border: none;
}

.forms-grid-modern .btn-primary.btn-small-modern:hover {
    background: #4b5563;
    transform: translateY(-1px);
}

.forms-grid-modern .btn-delete-modern {
    background: white;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    padding: 8px 12px;
    font-size: 18px;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 400;
}

.forms-grid-modern .btn-delete-modern:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Items Count Styling */
.items-count-modern {
    color: #6b7280;
    font-size: 14px;
    padding: 10px 0;
}

.items-count-modern strong {
    color: #111827;
    font-weight: 600;
}

/* Add Category Section - Simplified Modern Design */
.add-category-section-modern {
    background: white;
    padding: 28px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    margin-top: 40px;
}

.add-category-header-modern {
    margin-bottom: 20px;
}

.add-category-header-modern h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.add-category-form-modern {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}

.add-category-input-wrapper-modern {
    flex: 1;
    min-width: 250px;
}

.add-category-input-wrapper-modern input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s;
}

.add-category-input-wrapper-modern input:focus {
    outline: none;
    border-color: #6b7280;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .forms-grid-modern {
        grid-template-columns: 1fr;
    }
    
    .create-form-header-modern {
        flex-direction: column;
        align-items: stretch;
    }
    
    .add-category-form-modern {
        flex-direction: column;
    }
    
    .add-category-input-wrapper-modern {
        min-width: 100%;
    }
}