/* ==========================================================================
   ALPHA DIGITAL: UI/UX & MOTION DESIGN ENHANCEMENTS (SALES TABLE)
   ========================================================================== */

/* 1. Safka Table-ka & Motion Design (Smooth Zoom-in & Lift) */
.sales-grid tbody tr {
  cursor: pointer;
  transform-origin: center;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, box-shadow;
  position: relative;
}

/* Hover-ka safka: dhaqdhaqaaq fudud */
.sales-grid tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.015) !important;
}

/* 2. Beddelka Khadka Jaallaha ah -> Khad Gray ah oo 50% qafiif ah (Selected Row) */
.sales-grid tbody tr.sales-row-highlighted,
.sales-grid tbody tr.sales-row-highlighted > td {
  /* Gray jilicsan oo 50% reduced opacity leh */
  background-color: rgba(140, 149, 159, 0.12) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Dark Mode: Gray jilicsan oo qafiif ah */
.dark .sales-grid tbody tr.sales-row-highlighted,
.dark .sales-grid tbody tr.sales-row-highlighted > td {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 3. Motion Design: Zoom-In fiican marka la gujiyo safka gray-ga ah */
.sales-grid tbody tr.sales-row-highlighted {
  transform: scale(1.012) translateY(-1px) !important;
  z-index: 10 !important;
  box-shadow: 0 8px 22px -4px rgba(0, 0, 0, 0.08),
              0 3px 8px -2px rgba(0, 0, 0, 0.04) !important;
  border-radius: 8px;
}

.dark .sales-grid tbody tr.sales-row-highlighted {
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45) !important;
}

.sales-grid tbody tr.sales-row-highlighted:hover,
.sales-grid tbody tr.sales-row-highlighted:hover > td {
  background-color: rgba(140, 149, 159, 0.16) !important;
}

.dark .sales-grid tbody tr.sales-row-highlighted:hover,
.dark .sales-grid tbody tr.sales-row-highlighted:hover > td {
  background-color: rgba(255, 255, 255, 0.09) !important;
}

/* 4. Font-yada Lacagaha (SALE, COST, PROFIT, DEBT) - Soo jiidasho & Tabular */
.sales-grid td:nth-child(11), /* SALE ($) */
.sales-grid td:nth-child(12), /* COST ($) */
.sales-grid td:nth-child(13), /* PROFIT ($) */
.sales-grid td:nth-child(14)  /* DEBT ($) */ {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: -0.01em;
}

/* Midabka Profit ($) - Diirran oo soo jiidasho leh */
.sales-grid td:nth-child(13) {
  color: #e11d48 !important; /* Brand Red-ka Alpha Digital */
}

/* Midabka Debt ($) - Xarrago leh */
.sales-grid td:nth-child(14) {
  font-weight: 800 !important;
}

/* 5. Font-yada Taariikhaha (SALE DATE & EXPIRY DATE) */
.sales-grid td:nth-child(6),  /* SALE DATE */
.sales-grid td:nth-child(8)   /* EXPIRY DATE */ {
  font-family: 'Inter', monospace !important;
  font-size: 12.5px !important;
  color: var(--fin-muted, #64748b) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

/* Days & Remaining (sida 120d, 118d left) */
.sales-grid td:nth-child(7),
.sales-grid td:nth-child(9) {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   TABLE HEADER (SECTION-KAN): GRAY LINE 40% & UNIFIED MODERN FONTS
   ========================================================================== */

/* 1. Xariiqda Gray-ga ah ee 40% Opacity (Borders & Background line) */
.sales-grid thead tr,
.sales-grid thead th {
  border-top: 1px solid rgba(140, 149, 159, 0.4) !important;
  border-bottom: 1.5px solid rgba(140, 149, 159, 0.4) !important;
  background-color: rgba(248, 250, 252, 0.6) !important;
}

/* Dark mode-ka header-ka oo leh isla line-ka gray 40% */
.dark .sales-grid thead tr,
.dark .sales-grid thead th {
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  background-color: rgba(28, 28, 28, 0.6) !important;
}

/* 2. Fonts-ka Midaysan & Soo Jiidashada Leh ee Madaxa Miiska */
.sales-grid thead th {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #475569 !important; /* Midab gray xarrago leh */
  padding: 14px 10px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.dark .sales-grid thead th {
  color: #94a3b8 !important;
}

/* 3. Tiirarka Gaarka ah (PROFIT & DEBT Headers) - Si ay xarrago u yeeshaan */
.sales-grid thead th:nth-child(13) {
  /* PROFIT ($) */
  color: #e11d48 !important;
  background-color: rgba(225, 29, 72, 0.06) !important;
}

.sales-grid thead th:nth-child(14) {
  /* DEBT ($) */
  color: #b45309 !important;
  background-color: rgba(245, 158, 11, 0.08) !important;
}

/* Calaamadda fallaadha (Arrow) sida SERVICE ↑ */
.sales-grid thead th span,
.sales-grid thead th svg {
  display: inline-flex;
  vertical-align: middle;
  color: #e11d48;
}


/* ==========================================================================
   VERTICAL RED SHADOW DIVIDER LINES (34% CAPACITY)
   Meelaha cagaarka lagu calaamadeeyay:
   1. Client Email ka dib (Tiirka 4)
   2. Phone ka dib (Tiirka 5)
   3. Service ka dib (Tiirka 6)
   4. Expiry Date ka dib (Tiirka 9)
   ========================================================================== */

/* 1. Xariiqda Shadow-ga ah ee Header-ka (Madaxa Miiska) */
.sales-grid thead th:nth-child(4),
.sales-grid thead th:nth-child(5),
.sales-grid thead th:nth-child(6),
.sales-grid thead th:nth-child(9) {
  border-right: 1px solid rgba(225, 29, 72, 0.34) !important;
  box-shadow: 2px 0 6px -1px rgba(225, 29, 72, 0.34) !important;
  position: relative;
}

/* 2. Xariiqda Shadow-ga ah ee Safafka Xogta (Tbody Cells) */
.sales-grid tbody td:nth-child(4),
.sales-grid tbody td:nth-child(5),
.sales-grid tbody td:nth-child(6),
.sales-grid tbody td:nth-child(9) {
  border-right: 1px solid rgba(225, 29, 72, 0.34) !important;
  box-shadow: 2px 0 8px -1px rgba(225, 29, 72, 0.34) !important;
  position: relative;
}

/* 3. Marka safka la dul-istaago (Hover) ama la doorto (Highlight) - Shadow-gu wuu sii iftiimayaa */
.sales-grid tbody tr:hover td:nth-child(4),
.sales-grid tbody tr:hover td:nth-child(5),
.sales-grid tbody tr:hover td:nth-child(6),
.sales-grid tbody tr:hover td:nth-child(9),
.sales-grid tbody tr.sales-row-highlighted td:nth-child(4),
.sales-grid tbody tr.sales-row-highlighted td:nth-child(5),
.sales-grid tbody tr.sales-row-highlighted td:nth-child(6),
.sales-grid tbody tr.sales-row-highlighted td:nth-child(9) {
  border-right-color: rgba(225, 29, 72, 0.45) !important;
  box-shadow: 3px 0 10px -1px rgba(225, 29, 72, 0.4) !important;
}


/* ==========================================================================
   PRIVACY BLUR MODE (COST & PROFIT SCREENSHOT PROTECTION)
   ========================================================================== */

/* Marka Privacy Mode la shido, qarso tiirarka Cost iyo Profit */
body.privacy-mode-active .sales-grid th:nth-child(12),
body.privacy-mode-active .sales-grid td:nth-child(12), /* COST ($) */
body.privacy-mode-active .sales-grid th:nth-child(13),
body.privacy-mode-active .sales-grid td:nth-child(13), /* PROFIT ($) */
body.privacy-mode-active .card-zoomable:nth-child(2), /* Net Profit Card sare */
body.privacy-mode-active [class*="profit"],
body.privacy-mode-active [class*="cost"] {
  filter: blur(6px) !important;
  user-select: none !important;
  transition: filter 0.25s ease-in-out !important;
}

/* Badhanka Privacy Toggle ee shaashadda sare */
.fin-privacy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  color: #475569;
  border: 1px solid #e2e8f0;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fin-privacy-btn:hover {
  border-color: #e11d48;
  color: #e11d48;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.15);
}

.fin-privacy-btn.active {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #e11d48 !important;
}