/**
 * LaptopRealm ERP - Brand Customization & Theme Overrides
 * Builds on top of Khamba's style.css
 * Primary: #333399 | Secondary: #EA1F25
 */

:root {
  --primary: #333399;
  --primary-rgb: 51, 51, 153;
  --primary-hover: #27277a;
  --primary-subtle: #ececf7;
  
  --brand-accent: #EA1F25;
  --brand-accent-rgb: 234, 31, 37;
  --brand-accent-hover: #c9171c;
  --brand-accent-subtle: #fde8e9;
}

/* Sidebar Logo Area */
.sidebar .logo,
.auth-art .logo,
.auth-card .logo {
  background: linear-gradient(135deg, #333399 0%, #1e1b4b 100%);
  box-shadow: 0 2px 8px rgba(51, 51, 153, 0.35);
}

/* Sidebar Active Link Highlights */
.sb-link.active {
  background: rgba(51, 51, 153, 0.28);
  color: #ffffff;
  border-left: 3px solid #818cf8;
}

.sb-link.active i {
  color: #a5b4fc;
}

/* Brand Button Styles */
.btn-primary-x {
  background: var(--primary);
  color: #ffffff;
  border: 1px solid var(--primary);
  height: 40px;
  padding: 0 14px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font: inherit;
  transition: all 0.15s ease-in-out;
}

.btn-primary-x:hover,
.btn-primary-x:focus {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(51, 51, 153, 0.25);
}

.btn-accent-x {
  background: var(--brand-accent);
  color: #ffffff;
  border: 1px solid var(--brand-accent);
  height: 40px;
  padding: 0 14px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font: inherit;
  transition: all 0.15s ease-in-out;
}

.btn-accent-x:hover,
.btn-accent-x:focus {
  background: var(--brand-accent-hover);
  border-color: var(--brand-accent-hover);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(234, 31, 37, 0.25);
}

/* Product Condition Badges */
.s-BrandNew {
  background: #d1fae5;
  color: #047857;
}

.s-UKUsed {
  background: #dbeafe;
  color: #1d4ed8;
}

.s-OpenBox {
  background: #fef3c7;
  color: #b45309;
}

[data-bs-theme=dark] .s-BrandNew {
  background: #0d2a20;
  color: #34d399;
}

[data-bs-theme=dark] .s-UKUsed {
  background: #1e293b;
  color: #60a5fa;
}

[data-bs-theme=dark] .s-OpenBox {
  background: #2a2110;
  color: #fbbf24;
}

/* Breadcrumb Styling matching Khamba */
.erp-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.erp-breadcrumbs a {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}

.erp-breadcrumbs a:hover {
  color: var(--primary);
}

.erp-breadcrumbs .sep {
  opacity: 0.5;
  font-size: 11px;
}

.erp-breadcrumbs .current {
  color: var(--text);
  font-weight: 600;
}

/* Placeholder and Empty States */
.erp-empty-state {
  padding: 48px 24px;
  text-align: center;
}

.erp-empty-state .empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--hover);
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  margin-bottom: 16px;
}

.erp-empty-state .empty-icon svg,
.erp-empty-state .empty-icon i {
  width: 32px;
  height: 32px;
}

.erp-empty-state h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.erp-empty-state p {
  color: var(--muted);
  max-width: 440px;
  margin: 0 auto 20px;
}

/* Module Implementation Banner */
.module-banner {
  background: linear-gradient(135deg, rgba(51, 51, 153, 0.08) 0%, rgba(234, 31, 37, 0.05) 100%);
  border: 1px solid rgba(51, 51, 153, 0.15);
  border-radius: var(--r);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.module-banner .meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.module-banner .meta .badge-status {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #333399;
  color: #fff;
}

/* POS Screen Fast Search / Barcode Input */
.pos-search-input {
  height: 48px;
  font-size: 16px;
  border-radius: 12px;
  padding-left: 44px;
}

/* ============================================================
   DOCUMENT VIEWERS (INVOICE, RECEIPT, DELIVERY NOTE)
   ============================================================ */
.doc-shell {
  max-width: 900px;
  margin: 0 auto;
}

.doc-paper {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 40px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}

.doc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.doc-brand .logo-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #333399 0%, #1e1b4b 100%);
  display: grid;
  place-items: center;
  color: #fff;
}

.doc-title {
  text-align: right;
}

.doc-title h2 {
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  color: #333399;
}

.doc-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  padding: 18px 20px;
  background: var(--hover);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.doc-meta-grid .item small {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}

.doc-meta-grid .item b {
  font-size: 14px;
}

.doc-table {
  width: 100%;
  margin-bottom: 24px;
}

.doc-table th {
  background: var(--hover);
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--border);
}

.doc-table td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}

.doc-summary {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
}

.doc-summary-table {
  width: 320px;
}

.doc-summary-table tr td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.doc-summary-table tr.grand-total td {
  font-weight: 800;
  font-size: 16px;
  color: #333399;
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  background: rgba(51, 51, 153, 0.04);
}

.doc-sign-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}

.doc-sign-box {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 24px 16px 12px;
  text-align: center;
}

.doc-sign-line {
  margin: 40px auto 8px;
  width: 80%;
  border-top: 1px solid var(--text);
}

/* POS Thermal Receipt Slip (80mm preview) */
.receipt-slip {
  width: 340px;
  margin: 0 auto;
  background: #fff;
  color: #111;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 24px 18px;
  font-family: 'Courier New', Courier, monospace;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.receipt-slip .r-center {
  text-align: center;
}

.receipt-slip .r-line {
  border-top: 1px dashed #666;
  margin: 10px 0;
}

.receipt-slip .r-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
}

.receipt-slip .r-total {
  display: flex;
  justify-content: space-between;
  font-weight: 900;
  font-size: 14px;
}

/* HR Module Elements */
.emp-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #333399, #1e1b4b);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}

.s-Present { background: #d1fae5; color: #047857; }
.s-Late { background: #fef3c7; color: #b45309; }
.s-Absent { background: #fee2e2; color: #b91c1c; }
.s-OnLeave { background: #e0e7ff; color: #4338ca; }
.s-Approved { background: #d1fae5; color: #047857; }
.s-Pending { background: #fef3c7; color: #b45309; }
.s-Paid { background: #d1fae5; color: #047857; }

/* Print Media Query */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .sidebar, .topbar, .footer-x, .sw-fab, .sw-panel, .btn-action-bar, .breadcrumb-bar, .backdrop, #mobileToggle, .toast-container {
    display: none !important;
  }
  .app-shell, .main-wrap, .content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .doc-paper, .receipt-slip {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
  }
}