/**
 * Blacktech Shelfflow – Shared Template Styles
 * Dashboard-inspired styling applied globally to all templates.
 * All colour tokens come from base.css CSS variables so dark-mode is automatic.
 */

/* Content wrappers */
.content-wrapper,
.content-wrapper-narrow,
.content-wrapper-full {
  background-color: var(--white);
  color: var(--text-color);
}

/* ── Welcome Banner ───────────────────────────────────────────── */
.welcome-banner {
    background: linear-gradient(135deg, var(--primary-color, #3b82f6), #6366f1);
    border-radius: 1rem;
    color: #fff;
    padding: 2rem 2.5rem;
    position: relative;
    overflow: hidden;
}
.welcome-banner::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    pointer-events: none;
}
.welcome-banner .welcome-subtitle { opacity: 0.85; }

/* ── Stat Cards ───────────────────────────────────────────────── */
.stat-card {
    border: none;
    border-radius: 0.875rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    overflow: hidden;
    cursor: default;
}
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15);
}
.stat-card .card-body { padding: 1.5rem; }
.stat-card .stat-icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.2);
    font-size: 1.4rem;
    flex-shrink: 0;
}
.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.stat-card .stat-label {
    font-size: 0.8rem;
    opacity: 0.88;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stat-card .stat-sub {
    font-size: 0.75rem;
    opacity: 0.75;
    color: #fff;
}

/* Gradient presets */
.stat-card-blue    { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.stat-card-green   { background: linear-gradient(135deg, #10b981, #059669); }
.stat-card-orange  { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.stat-card-purple  { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.stat-card-red     { background: linear-gradient(135deg, #dc2626, #e11d48); }

/* ── Section Cards ────────────────────────────────────────────── */
.section-card {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0.875rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.05);
    background-color: var(--card-bg, #fff);
}
.section-card .section-card-header {
    background-color: var(--card-bg, #fff);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0.875rem 0.875rem 0 0;
    padding: 1rem 1.25rem;
}
.section-card .section-card-header h5 {
    color: var(--text-color, #111827);
    margin: 0;
}

/* ── Activity / Timeline Feed ─────────────────────────────────── */
.activity-feed { padding: 0.25rem 0; }
.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    transition: background-color 0.15s ease;
}
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background-color: var(--gray-50, #f9fafb); }
.activity-dot {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
}
.activity-dot-sale    { background: rgba(16,185,129,0.12); color: #059669; }
.activity-dot-stock   { background: rgba(245,158,11,0.12); color: #d97706; }
.activity-dot-alert   { background: rgba(239,68,68,0.12);  color: #dc2626; }
.activity-dot-info    { background: rgba(59,130,246,0.12); color: #2563eb; }
.activity-text        { font-size: 0.875rem; color: var(--text-color, #374151); line-height: 1.4; }
.activity-time        { font-size: 0.75rem; color: var(--muted-text-color, #9ca3af); margin-top: 0.15rem; }

/* ── Quick Actions ────────────────────────────────────────────── */
.quick-action-btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.4rem;
    padding: 1rem 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    background-color: var(--card-bg, #fff);
    color: var(--text-color, #374151);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.quick-action-btn:hover {
    background-color: var(--primary-color, #3b82f6);
    border-color: var(--primary-color, #3b82f6);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}
.quick-action-btn i { font-size: 1.3rem; }

/* ── Low-Stock Rows ───────────────────────────────────────────── */
.low-stock-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    gap: 0.5rem;
    transition: background-color 0.15s ease;
}
.low-stock-item:last-child { border-bottom: none; }
.low-stock-item:hover { background-color: var(--gray-50, #f9fafb); }
.low-stock-name { font-size: 0.875rem; font-weight: 600; color: var(--text-color, #111827); }
.low-stock-vendor { font-size: 0.75rem; color: var(--muted-text-color, #9ca3af); }

/* ── Refresh Button Spinner ───────────────────────────────────── */
.refresh-btn { transition: opacity 0.2s ease; }
.refresh-btn.loading { opacity: 0.6; pointer-events: none; }
.refresh-btn.loading .fa-sync { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Dark Mode ────────────────────────────────────────────────── */
[data-theme="dark"] .section-card,
[data-theme="dark"] .section-card .section-card-header {
    background-color: var(--card-bg, #1e1e2e);
    border-color: var(--border-color, #334155);
}
[data-theme="dark"] .quick-action-btn {
    background-color: var(--card-bg, #1e1e2e);
    border-color: var(--border-color, #334155);
    color: var(--text-color, #e5e7eb);
}
[data-theme="dark"] .activity-item:hover,
[data-theme="dark"] .low-stock-item:hover {
    background-color: rgba(255,255,255,0.04);
}
[data-theme="dark"] .welcome-banner {
    background: linear-gradient(135deg, #1e3a8a, #312e81);
}

/* ── Page Header Banner (inner pages) ────────────────────────── */
.page-header-banner {
    background: linear-gradient(135deg, var(--card-header-bg, #2563eb), #6366f1);
    border-radius: 0.875rem;
    padding: 1.25rem 1.75rem;
    color: #fff;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.page-header-banner::after {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 130px; height: 130px;
    background: rgba(255,255,255,0.07);
    border-radius: 50%;
    pointer-events: none;
}
.page-header-banner h1,
.page-header-banner .page-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.2rem;
}
.page-header-banner .page-subtitle {
    opacity: 0.85;
    font-size: 0.875rem;
    color: #fff;
    margin-bottom: 0;
}
/* Buttons inside the banner */
.page-header-banner .btn-outline-light {
    border-color: rgba(255,255,255,0.55);
    color: #fff;
}
.page-header-banner .btn-outline-light:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.page-header-banner .btn-light {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}
.page-header-banner .btn-light:hover {
    background: rgba(255,255,255,0.28);
    color: #fff;
}
[data-theme="dark"] .page-header-banner {
    background: linear-gradient(135deg, #1e3a8a, #312e81);
}

/* Shop filter select inside page header banner */
.page-header-banner .banner-shop-filter {
    min-width: 160px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}
.page-header-banner .banner-shop-filter option {
    color: #111;
    background: #fff;
}
[data-theme="dark"] .page-header-banner .banner-shop-filter {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}
[data-theme="dark"] .page-header-banner .banner-shop-filter option {
    color: #fff;
    background: var(--card-bg, #1e1b4b);
}

/* ── Filter / Toolbar Cards ──────────────────────────────────── */
.filter-card {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0.75rem;
    background-color: var(--card-bg, #fff);
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.04);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
[data-theme="dark"] .filter-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* ── Form Section Blocks ─────────────────────────────────────── */
.form-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color, #2563eb);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    margin-bottom: 1rem;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .content-wrapper, .content-wrapper-narrow, .content-wrapper-full {
    width: 95%;
    padding: 1rem;
  }
  .stat-card .stat-value {
    font-size: 1.5rem;
  }
  .welcome-banner {
    padding: 1.5rem;
  }
}

/* ── Sale Creation Components ─────────────────────────────────── */

/* Product picker area replaces .card.bg-light */
.sale-picker-card {
    background-color: var(--gray-50, #f8fafc);
    border-color: var(--border-color, #e5e7eb) !important;
}
[data-theme="dark"] .sale-picker-card {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color, #334155) !important;
}

/* Subtotal row in the items table replaces table-info */
.sale-subtotal-row th,
.sale-subtotal-row td {
    background-color: rgba(37, 99, 235, 0.08);
    color: var(--text-color, #111827);
    font-weight: 600;
    border-top: 2px solid var(--border-color, #e5e7eb);
}
[data-theme="dark"] .sale-subtotal-row th,
[data-theme="dark"] .sale-subtotal-row td {
    background-color: rgba(96, 165, 250, 0.12);
    color: var(--text-color, #e5e7eb);
    border-top-color: var(--border-color, #334155);
}

/* Sale summary banner replaces card.bg-success.text-white */
.sale-summary-banner {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}
[data-theme="dark"] .sale-summary-banner {
    background: linear-gradient(135deg, #065f46, #047857);
}

/* ── Shop Assignment Checkbox Cards ────────────────────────────── */
.shop-check-card {
    border-color: var(--border-color, #e5e7eb) !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.shop-check-card:hover {
    border-color: var(--primary-color, #2563eb) !important;
    background-color: rgba(37, 99, 235, 0.04);
}

.shop-check-card:has(input:checked) {
    border-color: var(--primary-color, #2563eb) !important;
    background-color: rgba(37, 99, 235, 0.07);
}

[data-theme="dark"] .shop-check-card:has(input:checked) {
    background-color: rgba(96, 165, 250, 0.12);
}

/* ── Quill Rich-Text Editor (Feedback form) ─────────────────────── */
.quill-editor-container {
    min-height: 220px;
    border-radius: 0 0 0.375rem 0.375rem;
}

/* Quill toolbar inherits card background */
.ql-toolbar.ql-snow {
    background-color: var(--card-bg, #f8fafc);
    border-color: var(--border-color, #e5e7eb) !important;
    border-radius: 0.375rem 0.375rem 0 0;
}

.ql-container.ql-snow {
    background-color: var(--white, #fff);
    border-color: var(--border-color, #e5e7eb) !important;
    border-radius: 0 0 0.375rem 0.375rem;
    font-size: 0.95rem;
    color: var(--text-color, #111827);
    min-height: 220px;
}

.ql-editor {
    min-height: 220px;
    color: var(--text-color, #111827);
}

.ql-editor.ql-blank::before {
    color: var(--muted-text-color, #9ca3af) !important;
    font-style: normal;
}

/* Dark mode Quill overrides */
[data-theme="dark"] .ql-toolbar.ql-snow {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color, #334155) !important;
}

[data-theme="dark"] .ql-toolbar .ql-stroke {
    stroke: var(--text-color, #e5e7eb);
}

[data-theme="dark"] .ql-toolbar .ql-fill {
    fill: var(--text-color, #e5e7eb);
}

[data-theme="dark"] .ql-toolbar .ql-picker-label,
[data-theme="dark"] .ql-toolbar .ql-picker-item {
    color: var(--text-color, #e5e7eb);
}

[data-theme="dark"] .ql-toolbar .ql-picker-options {
    background-color: var(--card-bg, #1e293b);
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .ql-container.ql-snow {
    background-color: var(--card-bg, #1e293b);
    border-color: var(--border-color, #334155) !important;
    color: var(--text-color, #e5e7eb);
}

[data-theme="dark"] .ql-editor {
    color: var(--text-color, #e5e7eb);
}

/* ── List pagination footer ─────────────────────────────────────────────── */
.list-pagination-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.list-pagination-footer .pagination {
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
}

.list-pagination-footer .page-link {
    min-width: 2.25rem;
    text-align: center;
    line-height: 1.25;
}

.list-pagination-footer .page-item.active .page-link {
    font-weight: 600;
    white-space: nowrap;
    min-width: 3.25rem;
}

.list-pagination-summary {
    line-height: 1.4;
}