/* ── Grid System (Bootstrap-compatible) ── */
*, *::before, *::after { box-sizing: border-box; }

.container { width: 100%; padding-right: 1rem; padding-left: 1rem; margin-right: auto; margin-left: auto; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

.row { display: flex; flex-wrap: wrap; margin-right: -0.75rem; margin-left: -0.75rem; }
.row > * { padding-right: 0.75rem; padding-left: 0.75rem; }
.col, .col-12, .col-6 { flex: 1 0 0%; min-width: 0; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-auto { flex: 0 0 auto; width: auto; }

@media (min-width: 576px) {
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
  .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ── Spacing Utilities ── */
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 0.75rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 0.75rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.5rem !important; }
.p-2 { padding: 0.75rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

.gap-1 { gap: 0.5rem !important; }
.gap-2 { gap: 0.75rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.g-2 { gap: 0.75rem !important; }
.g-3 { gap: 1rem !important; }
.g-4 { gap: 1.5rem !important; }

/* ── Display Utilities ── */
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-column { flex-direction: column !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-start { text-align: left !important; }
.text-muted { color: var(--text-muted, #94a3b8) !important; }
.text-danger { color: var(--danger-color, #ef4444) !important; }
.text-success { color: var(--success-color, #16a34a) !important; }
.text-warning { color: var(--warning-color, #f59e0b) !important; }
.text-primary { color: var(--primary-color, #4cb04f) !important; }
.fw-bold { font-weight: 700 !important; }
.fw-normal { font-weight: 400 !important; }
.fst-italic { font-style: italic !important; }
.nowrap { white-space: nowrap !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 700; line-height: 1.5; text-align: center; text-decoration: none;
  vertical-align: middle; cursor: pointer; user-select: none; border: 1px solid transparent;
  padding: 0.625rem 1.25rem; font-size: 0.875rem; border-radius: var(--radius, 0.75rem);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; pointer-events: none; }
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.75rem; border-radius: var(--radius-sm, 0.375rem); }
.btn-lg { padding: 0.875rem 1.75rem; font-size: 1rem; border-radius: var(--radius-lg, 1rem); }
.btn-primary { background: var(--primary-color, #4cb04f); color: #fff; border-color: var(--primary-color, #4cb04f); }
.btn-primary:hover { background: var(--primary-hover, #3d9240); border-color: var(--primary-hover, #3d9240); }
.btn-secondary { background: var(--secondary-color, #64748b); color: #fff; border-color: var(--secondary-color, #64748b); }
.btn-secondary:hover { background: #475569; border-color: #475569; }
.btn-success { background: var(--success-color, #16a34a); color: #fff; border-color: var(--success-color, #16a34a); }
.btn-success:hover { background: #15803d; border-color: #15803d; }
.btn-danger { background: var(--danger-color, #ef4444); color: #fff; border-color: var(--danger-color, #ef4444); }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.btn-warning { background: var(--warning-color, #f59e0b); color: #fff; border-color: var(--warning-color, #f59e0b); }
.btn-warning:hover { background: #d97706; border-color: #d97706; }
.btn-info { background: var(--accent-color, #3b82f6); color: #fff; border-color: var(--accent-color, #3b82f6); }
.btn-info:hover { background: #2563eb; border-color: #2563eb; }
.btn-outline-primary { background: transparent; color: var(--primary-color, #4cb04f); border-color: var(--primary-color, #4cb04f); }
.btn-outline-primary:hover { background: var(--primary-color, #4cb04f); color: #fff; }
.btn-outline-secondary { background: transparent; color: var(--text-secondary, #64748b); border-color: var(--border-color, #e2e8f0); }
.btn-outline-secondary:hover { background: var(--border-color, #e2e8f0); }
.btn-outline-danger { background: transparent; color: var(--danger-color, #ef4444); border-color: var(--danger-color, #ef4444); }
.btn-outline-danger:hover { background: var(--danger-color, #ef4444); color: #fff; }
.btn-outline-success { background: transparent; color: var(--success-color, #16a34a); border-color: var(--success-color, #16a34a); }
.btn-outline-success:hover { background: var(--success-color, #16a34a); color: #fff; }
.btn-outline-info { background: transparent; color: var(--accent-color, #3b82f6); border-color: var(--accent-color, #3b82f6); }
.btn-outline-info:hover { background: var(--accent-color, #3b82f6); color: #fff; }
.btn-outline-primary:focus, .btn-outline-danger:focus, .btn-outline-success:focus { box-shadow: 0 0 0 0.15rem rgba(var(--primary-color), 0.3); }

/* ── Forms ── */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; margin-bottom: 0.375rem; font-weight: 700; font-size: 0.85rem; color: var(--text-secondary, #64748b); }
.form-control, .form-input { display: block; width: 100%; padding: 0.75rem 1rem; font-size: 0.9rem;
  font-weight: 500; line-height: 1.5; color: var(--text-main, #1e293b); background: var(--card-background, #fff);
  border: 1.5px solid var(--border-color, #e2e8f0); border-radius: var(--radius, 0.75rem);
  transition: border-color 0.2s, box-shadow 0.2s; appearance: none; }
.form-control:focus, .form-input:focus { outline: none; border-color: var(--primary-color, #4cb04f);
  box-shadow: 0 0 0 3px rgba(76, 176, 79, 0.15); }
.form-control::placeholder, .form-input::placeholder { color: var(--text-muted, #94a3b8); }
textarea.form-control { min-height: 100px; resize: vertical; }
select.form-control, select.form-input { cursor: pointer; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; padding-right: 2.5rem; }
.form-check { display: flex; align-items: center; gap: 0.5rem; min-height: 1.5rem; padding-left: 0; }
.form-check-input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--primary-color, #4cb04f); cursor: pointer; }
.form-check-label { font-weight: 600; font-size: 0.9rem; color: var(--text-main, #1e293b); cursor: pointer; }

/* ── Cards ── */
.card { position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--card-background, #fff); border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-lg, 1rem); box-shadow: 0 1px 3px var(--shadow-color, rgba(0,0,0,0.05));
  margin-bottom: 1.25rem; }
.card-header { padding: 1rem 1.25rem; margin-bottom: 0; border-bottom: 1px solid var(--border-color, #e2e8f0);
  background: transparent; font-weight: 700; }
.card-body { flex: 1 1 auto; padding: 1.25rem; }
.card-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border-color, #e2e8f0); background: transparent; }
.card-title { margin-bottom: 0.5rem; font-weight: 800; font-size: 1.05rem; }
.card-text { color: var(--text-secondary, #64748b); }

/* ── Alerts ── */
.alert { position: relative; padding: 1rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent;
  border-radius: var(--radius, 0.75rem); font-weight: 600; }
.alert-success { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.alert-danger { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
.alert-warning { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.alert-info { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; font-size: 0.75rem;
  font-weight: 800; line-height: 1.4; text-align: center; white-space: nowrap; border-radius: 999px; }
.badge.bg-primary, .badge.bg-success { background: var(--success-color, #16a34a); color: #fff; }
.badge.bg-danger { background: var(--danger-color, #ef4444); color: #fff; }
.badge.bg-warning { background: var(--warning-color, #f59e0b); color: #fff; }
.badge.bg-secondary { background: var(--text-muted, #94a3b8); color: #fff; }
.badge.bg-info { background: var(--accent-color, #3b82f6); color: #fff; }
.badge.text-dark { color: #1e293b !important; }

/* ── Table Responsive (Mobile Cards) ── */
.table { width: 100%; margin-bottom: 0; border-collapse: collapse; }
.table th { padding: 0.75rem 1rem; font-weight: 800; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-secondary, #64748b); background: var(--background-color, #f8fafc);
  border-bottom: 2px solid var(--border-color, #e2e8f0); text-align: left; white-space: nowrap; }
.table td { padding: 0.85rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--border-color, #e2e8f0); }
.table tr:hover td { background: rgba(0,0,0,0.02); }
.table-mobile-cards thead { display: table-header-group; }

@media (max-width: 768px) {
  .table-mobile-cards { border: 0; }
  .table-mobile-cards thead { display: none; }
  .table-mobile-cards tr { display: block; margin-bottom: 0.85rem; padding: 1rem;
    background: var(--card-background, #fff); border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius, 0.75rem); box-shadow: 0 1px 3px var(--shadow-color); }
  .table-mobile-cards td { display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0; border: none; text-align: right; gap: 0.5rem; }
  .table-mobile-cards td:not(:last-child) { border-bottom: 1px solid var(--border-color, #e2e8f0); }
  .table-mobile-cards td::before { content: attr(data-label); font-weight: 700; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary, #64748b);
    text-align: left; flex: 1; }
  .table-mobile-cards td:first-child { padding-top: 0; }
  .table-mobile-cards td:last-child { padding-bottom: 0; }

  .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-12,
  .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ── Status Bar ── */
.status-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius, 0.75rem);
  color: #15803d; font-weight: 700; font-size: 0.9rem; }
[data-theme="dark"] .status-bar { background: rgba(22, 163, 74, 0.1); border-color: rgba(22, 163, 74, 0.2); }

/* ── Page Header ── */
.page-header { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.page-title h2 { font-size: 1.5rem; font-weight: 900; color: var(--text-main, #1e293b); margin-bottom: 0.25rem; }
.page-title p { color: var(--text-secondary, #64748b); margin: 0; font-size: 0.9rem; }

/* ── Input Group ── */
.input-group { display: flex; align-items: center; }
.input-group .btn { border-radius: var(--radius-sm, 0.375rem); }
.input-group .form-control { flex: 1; min-width: 0; border-radius: 0; }
.input-group > :first-child { border-radius: var(--radius, 0.75rem) 0 0 var(--radius, 0.75rem); }
.input-group > :last-child { border-radius: 0 var(--radius, 0.75rem) var(--radius, 0.75rem) 0; }
.input-group > :not(:first-child):not(:last-child) { border-radius: 0; }

/* ── Search Filter Premium ── */
.search-filter-premium { margin-bottom: 1.5rem; }
.premium-search-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.search-inner-group { position: relative; flex: 1; min-width: 250px; }
.search-inner-group i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted, #94a3b8); }
.premium-search-input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.75rem; font-size: 0.9rem;
  border: 1.5px solid var(--border-color, #e2e8f0); border-radius: var(--radius, 0.75rem);
  background: var(--card-background, #fff); color: var(--text-main, #1e293b);
  transition: border-color 0.2s, box-shadow 0.2s; }
.premium-search-input:focus { outline: none; border-color: var(--primary-color, #4cb04f);
  box-shadow: 0 0 0 3px rgba(76, 176, 79, 0.15); }
.premium-filter-select { min-width: 180px; padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 1.5px solid var(--border-color, #e2e8f0); border-radius: var(--radius, 0.75rem);
  background: var(--card-background, #fff); color: var(--text-main, #1e293b); font-weight: 600;
  appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; }

@media (max-width: 768px) {
  .page-header { flex-direction: column; align-items: stretch; }
  .premium-search-row { flex-direction: column; }
  .premium-filter-select { min-width: 100%; }
  .search-inner-group { min-width: 100%; }
  .btn-new-product { width: 100%; justify-content: center; }
}

/* ── Hidden ── */
.hidden { display: none !important; }

/* ── Pagination ── */
.pagination { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: center; }
.page-item { display: inline-flex; }
.page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem;
  height: 2.25rem; padding: 0.375rem 0.625rem; font-size: 0.85rem; font-weight: 700;
  border: 1px solid var(--border-color, #e2e8f0); border-radius: var(--radius-sm, 0.375rem);
  background: var(--card-background, #fff); color: var(--text-main, #1e293b); text-decoration: none; }
.page-item.active .page-link { background: var(--primary-color, #4cb04f); border-color: var(--primary-color, #4cb04f); color: #fff; }
.page-item.disabled .page-link { opacity: 0.5; pointer-events: none; }

/* ── Responsive Helpe rs ── */
@media (max-width: 480px) {
  .user-name { display: none; }
  .user-menu .branch-name { display: none; }
  .tracker-info { display: none; }
  .nav-bar h1 { font-size: 1rem; }
}
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
}