/* Aaseenu Investment Intranet - supplemental styles (Tailwind handles most) */

:root { --sb-w: 18rem; --sb-w-collapsed: 5rem; }
html { -webkit-tap-highlight-color: transparent; }
body { overflow-x: hidden; }
[x-cloak], [hidden] { display: none !important; }

/* Sidebar: mobile off-canvas */
body.sb-open #sidebar { transform: translateX(0); }
body.sb-open #sb-backdrop { opacity: 1; pointer-events: auto; }
body.sb-open { overflow: hidden; }

/* Sales: cart becomes a full-screen sheet on phones/tablets */
@media (max-width: 1023px) {
  body.cart-open #cart-panel { transform: translateY(0) !important; }
  body.cart-open { overflow: hidden; }
}

/* Sidebar: desktop collapsed (icon rail) */
@media (min-width: 1024px) {
  html.sb-collapsed #sidebar { width: var(--sb-w-collapsed); }
  html.sb-collapsed .content-wrap { padding-left: var(--sb-w-collapsed); }
  html.sb-collapsed #sidebar .sb-label { display: none; }
  html.sb-collapsed #sidebar .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-collapsed #sidebar nav { padding-left: .75rem; padding-right: .75rem; }
  html.sb-collapsed #sidebar .nav-link + .nav-section,
  html.sb-collapsed #sidebar nav > .nav-section { display: block; height: 1px; padding: 0; margin: 1rem .5rem; background: rgba(255,255,255,.06); }
  html.sb-collapsed #sidebar > div:first-of-type + div { justify-content: center; padding: 0; }
}

.sb-scroll::-webkit-scrollbar { width: 6px; }
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 9px; }
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9px; }

/* Native <dialog> as modal / bottom sheet on phones */
dialog.modal {
  border: 0; padding: 0; border-radius: 1.25rem; width: calc(100% - 2rem);
  box-shadow: 0 24px 64px -16px rgba(2, 44, 39, .35);
  color: inherit; max-height: calc(100dvh - 2rem);
}
dialog.modal::backdrop { background: rgba(2, 15, 18, .55); backdrop-filter: blur(4px); }
dialog.modal[open] { animation: modal-in .22s cubic-bezier(.2,.9,.3,1.1); }
@media (max-width: 639px) {
  dialog.modal {
    width: 100%; max-width: 100% !important; margin: auto 0 0 0;
    border-radius: 1.25rem 1.25rem 0 0; max-height: 92dvh;
  }
  dialog.modal[open] { animation: sheet-in .25s ease-out; }
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }

/* Toasts */
.toast { animation: toast-in .25s ease-out; }
.toast.leaving { animation: toast-out .2s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* Skeleton shimmer */
.skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: .75rem; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.spinner { width: 1rem; height: 1rem; border-radius: 9999px; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Login backdrop pattern */
.grid-pattern {
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 30% 30%, #000 30%, transparent 75%);
}

/* Numeric inputs: hide spinners */
input[type=number].no-spin::-webkit-outer-spin-button,
input[type=number].no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number].no-spin { -moz-appearance: textfield; }

.safe-bottom { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }

/* ---------- A4 invoice sheet (classic layout; identical on screen, print and PDF) ---------- */
.inv {
  width: 210mm; min-height: 296mm; padding: 11mm 12mm 7mm; box-sizing: border-box;
  display: flex; flex-direction: column; background: #fff; color: #000;
  font-family: Arial, Helvetica, sans-serif; font-size: 10pt; line-height: 1.35;
}
.inv *, .inv *::before, .inv *::after { box-sizing: border-box; }
.inv-spacer.has-stamp { display: flex; align-items: center; justify-content: flex-end; min-height: 40mm; padding: 4mm 22mm 4mm 0; }
.inv-paid {
  transform: rotate(-10deg); border: 2.2mm double #c8102e; border-radius: 4mm; padding: 2mm 9mm 2.5mm; color: #c8102e; text-align: center;
  opacity: .85; pointer-events: none; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.inv-paid-word { font-size: 40pt; font-weight: 900; letter-spacing: 6mm; margin-right: -6mm; line-height: 1; }
.inv-paid-line { margin-top: 1mm; font-size: 9pt; font-weight: 700; letter-spacing: .5mm; white-space: nowrap; }
.inv b { font-weight: 700; }
.inv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6mm; align-items: flex-start; }
.inv-company { font-size: 21pt; font-weight: 800; letter-spacing: .2px; line-height: 1.1; }
.inv-addr { margin-top: 1.5mm; font-size: 9pt; line-height: 1.4; }
.inv-logo-wrap { display: flex; justify-content: center; }
.inv-logo { display: block; max-height: 26mm; max-width: 42mm; object-fit: contain; }
.inv-title { font-size: 21pt; font-weight: 800; text-align: right; line-height: 1.1; }
.inv-tin { margin-top: 1mm; text-align: right; font-size: 9.5pt; }
.inv-parties { display: flex; justify-content: space-between; align-items: flex-end; gap: 10mm; margin-top: 3mm; }
.inv-label { font-weight: 700; font-size: 8.5pt; }
.inv-to { max-width: 95mm; }
.inv-to-line { margin-top: 1.6mm; }
.inv-meta { display: grid; grid-template-columns: auto auto; column-gap: 16mm; row-gap: 1.2mm; margin: 0; min-width: 72mm; }
.inv-meta dt { font-weight: 400; }
.inv-meta dd { margin: 0; text-align: right; }
.inv-tinno { margin-top: 6mm; font-weight: 700; font-size: 8.5pt; }
.inv-tinno span { font-weight: 400; font-size: 10pt; margin-left: 2mm; }
.inv-table { width: 100%; margin-top: 2mm; border-collapse: collapse; border: 1px solid #000; table-layout: fixed; }
.inv-table th { border: 1px solid #000; padding: 1.4mm 1.5mm; font-size: 8.5pt; font-weight: 700; text-align: center; }
.inv-table td { border-left: 1px solid #000; border-right: 1px solid #000; padding: 1.1mm 1.8mm; vertical-align: top; word-wrap: break-word; }
.inv-table td.c { text-align: center; }
.inv-table td.r { text-align: right; white-space: nowrap; }
.inv-table tbody tr:last-child td { border-bottom: 1px solid #000; padding-bottom: 2mm; }
.inv-table tr.inv-fill td { height: 6.2mm; }
.inv-desc { font-size: 8.5pt; color: #333; white-space: pre-line; }
.inv-sum { display: flex; justify-content: space-between; gap: 6mm; }
.inv-words { padding-top: 1.5mm; flex: 1; }
.inv-remarks { margin-top: 5mm; white-space: pre-line; }
.inv-totals { border-collapse: collapse; font-size: 10pt; }
.inv-totals th { text-align: right; padding: .3mm 1.5mm; font-weight: 700; border-right: 1px solid #000; }
.inv-totals td { text-align: right; padding: .3mm 1.5mm; min-width: 30mm; width: 30mm; border-right: 1px solid #000; }
.inv-totals tr:last-child td { border-bottom: 1px solid #000; border-top: 1px solid #000; border-left: 1px solid #000; }
.inv-totals tr.inv-pay th { font-weight: 400; font-style: italic; }
.inv-totals tr.inv-pay th span { display: block; font-size: 7.5pt; color: #444; font-style: normal; }
.inv-totals tr.inv-pay td { font-style: italic; }
.inv-totals tr.inv-due th { font-size: 11pt; padding-top: 1.2mm; }
.inv-totals tr.inv-due td { font-size: 11pt; font-weight: 800; border: 1.5px solid #000; padding-top: 1.2mm; }
.inv-spacer { flex: 1; min-height: 8mm; }
.inv-sign { border-top: 1px solid #000; padding-top: 4mm; }
.inv-sign-row { display: flex; justify-content: space-between; align-items: flex-end; }
.inv-sign-bottom { margin-top: 12mm; }
.inv-printed { font-size: 9.5pt; }
.inv-sigline { width: 75mm; border-top: 2px dashed #000; padding-top: .8mm; text-align: center; font-size: 9.5pt; }
.inv-notice { margin-top: 3mm; background: #e6e6e6; padding: 2mm 4mm; text-align: center; font-size: 8.5pt; line-height: 1.45;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv-foot { margin-top: 2mm; border-top: 2px solid #000; padding-top: 1.5mm; text-align: center; font-size: 8pt; }

/* Print */
@media print {
  @page { size: A4; margin: 0; }
  #sheet-scale { transform: none !important; }
  #sheet-wrap { height: auto !important; overflow: visible !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
  html, body { background: #fff !important; }
  #sidebar, #sb-backdrop, header, footer, #toasts, .no-print { display: none !important; }
  .content-wrap { padding-left: 0 !important; }
  main { padding: 0 !important; }
  .print-sheet { box-shadow: none !important; border: 0 !important; margin: 0 !important; max-width: none !important; padding: 0 !important; }
}