/* =====================================================================
   Avinyasai Business Suite - visual theme
   Loaded after Bootstrap 5.3's compiled CSS, so everything below is a
   deliberate override layer rather than a full rebuild - this keeps every
   existing template (which only uses stock Bootstrap classes like .card,
   .btn, .table, .badge, .form-control) working unchanged while giving the
   whole app a consistent, modern look from one file.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Blue/indigo primary accent - per your reference screenshot. The logo
     stays maroon on its own white header block; the rest of the UI (links,
     buttons, active states, charts) uses this blue family instead. */
  --brand-primary: #3D5FEE;
  --brand-primary-dark: #2A46C4;
  --brand-primary-bright: #6C89FF;
  --brand-primary-light: #EEF1FF;
  --brand-gradient: linear-gradient(135deg, var(--brand-primary-bright) 0%, var(--brand-primary-dark) 100%);
  --brand-success: #22A06B;
  --brand-warning: #FF8A3D;
  --brand-danger: #E5484D;
  --brand-ink: #1A1D29;
  --brand-muted: #6B7280;
  --brand-body-bg: #F4F6FB;
  --brand-border: #E7E9F2;
  --brand-radius: 12px;
  --doc-accent: #1f3d7a;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  background-color: var(--brand-body-bg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--brand-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
}

a {
  color: var(--brand-primary-dark);
}

a:hover {
  color: var(--brand-primary);
}

.text-muted {
  color: var(--brand-muted) !important;
}

/* --- Buttons --------------------------------------------------------- */
.btn {
  font-weight: 600;
  border-radius: 8px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.btn-sm {
  border-radius: 7px;
}

.btn-primary {
  background: var(--brand-gradient);
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: 0 3px 10px rgba(61,95,238,0.32);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  filter: brightness(1.06);
  background: var(--brand-gradient) !important;
  border-color: var(--brand-primary-dark) !important;
}

.btn-outline-primary {
  color: var(--brand-primary-dark);
  border-color: var(--brand-primary);
}

.btn-outline-primary:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn:active {
  transform: translateY(1px);
}

.btn-link {
  color: var(--brand-primary-dark);
  font-weight: 600;
  text-decoration: none;
}

.btn-link:hover {
  color: var(--brand-primary);
}

/* --- Cards ------------------------------------------------------------ */
.card {
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  box-shadow: 0 1px 3px rgba(16,24,64,0.05);
}

.card.shadow-sm {
  box-shadow: 0 2px 10px rgba(16,24,64,0.06) !important;
}

.card-body {
  padding: 1.25rem 1.4rem;
}

.card-header {
  background: #fff;
  border-bottom: 1px solid var(--brand-border);
  font-weight: 600;
  border-top-left-radius: var(--brand-radius) !important;
  border-top-right-radius: var(--brand-radius) !important;
}

/* --- Tables ------------------------------------------------------------ */
.table {
  --bs-table-bg: transparent;
  color: var(--brand-ink);
}

.table thead th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--brand-muted);
  border-bottom-width: 1px;
  border-bottom-color: var(--brand-border);
  background: #fafbfe;
  white-space: nowrap;
}

.table td, .table th {
  border-color: var(--brand-border);
  vertical-align: middle;
  padding: 0.7rem 0.9rem;
}

.table-hover tbody tr:hover {
  background-color: var(--brand-primary-light);
}

/* --- Forms -------------------------------------------------------------- */
.form-control, .form-select {
  border-radius: 8px;
  border-color: var(--brand-border);
  padding: 0.5rem 0.75rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(61,95,238,0.15);
}

label, .form-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brand-ink);
}

/* --- Badges & alerts ----------------------------------------------------- */
.badge {
  font-weight: 600;
  padding: 0.4em 0.7em;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.alert {
  border: none;
  border-left: 4px solid transparent;
  border-radius: 10px;
}

.alert-info { border-left-color: var(--brand-primary); background: var(--brand-primary-light); color: #24346b; }
.alert-success { border-left-color: var(--brand-success); background: #E9F8F0; color: #135a3e; }
.alert-warning { border-left-color: var(--brand-warning); background: #FFF2E6; color: #7a4210; }
.alert-danger { border-left-color: var(--brand-danger); background: #FDEDEE; color: #7d1d20; }

/* --- Pagination ----------------------------------------------------------- */
.page-link {
  color: var(--brand-primary-dark);
  border-color: var(--brand-border);
}

.page-item.active .page-link {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* --- Left sidebar navigation ----------------------------------------
   On desktop (>= md) the sidebar sits as a fixed-width column alongside
   the page content; below that breakpoint Bootstrap's responsive
   offcanvas classes (offcanvas-md) turn it into a slide-in drawer
   triggered by the hamburger button in .mobile-topbar. */
.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  width: 260px;
  flex: 0 0 260px;
  background: linear-gradient(180deg, #171B2B 0%, #12141F 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.06);
}

@media (min-width: 768px) {
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
}

/* Below md: the sidebar becomes a slide-in drawer (custom, not Bootstrap's
   offcanvas component - see base.html for why), opened by #sidebarToggleBtn
   and closed via the backdrop, the X button, or clicking a nav link. */
@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1045;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }

  .sidebar.sidebar-open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* Most list screens put a wide <table> straight inside a .card without
     Bootstrap's .table-responsive wrapper div. On a phone that used to
     force the whole page to scroll sideways; this scopes the scrolling to
     just the card instead, so the rest of the page (nav, headings, filter
     row) stays put. :has() is supported on every current mobile browser;
     on the rare one that lacks it, this simply has no effect - no
     regression either way. */
  .card:has(> table.table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.sidebar-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-body {
  height: 100%;
}

/* White header block at the top of the (otherwise dark) sidebar, so the
   company logo - which comes on its own white background - sits on a
   matching surface instead of a dark one. */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #fff;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

.sidebar-brand:hover {
  color: inherit;
}

.sidebar-brand-logo {
  height: 34px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}

.sidebar-brand-text {
  line-height: 1.2;
}

.sidebar-brand-name {
  color: var(--brand-ink);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.sidebar-brand-tagline {
  color: var(--brand-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-nav {
  padding: 0.75rem 0.6rem;
  /* Bootstrap's .nav sets flex-wrap: wrap by default; combined with
     .flex-column and a height-constrained parent (the sidebar scrolls, it
     doesn't grow), that wraps overflowing items into a second column
     instead of just scrolling - force a single column and let .sidebar's
     own overflow-y: auto handle anything that doesn't fit on screen. */
  flex-wrap: nowrap;
  width: 100%;
}

.sidebar-submenu {
  flex-wrap: nowrap;
}

.sidebar-nav .nav-item {
  margin-bottom: 2px;
}

.sidebar-nav .nav-link {
  color: rgba(255,255,255,0.68);
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus {
  color: #fff;
  background: rgba(255,255,255,0.07);
}

.sidebar-nav .nav-link.active {
  color: #fff;
  background: var(--brand-gradient);
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(61,95,238,0.35);
}

.sidebar-link .caret {
  font-size: 0.7rem;
  transition: transform 0.15s ease;
  opacity: 0.6;
}

.sidebar-link[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

.sidebar-submenu {
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
  margin: 2px 0 6px;
  padding: 2px 0;
}

.sidebar-submenu .nav-link {
  padding-left: 1.9rem;
  font-size: 0.87rem;
  border-radius: 6px;
}

.sidebar-divider {
  border-color: rgba(255,255,255,0.1);
  margin: 0.25rem 1rem;
}

.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.sidebar-user {
  color: rgba(255,255,255,0.75) !important;
}

.mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #171B2B;
  padding: 0.6rem 1rem;
}

.mobile-brand {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-brand-logo {
  height: 22px;
  width: auto;
  background: #fff;
  padding: 2px 5px;
  border-radius: 5px;
  display: block;
}

.main-content {
  flex: 1 1 auto;
  min-width: 0;
}

@media print {
  .sidebar, .mobile-topbar { display: none !important; }
  .main-content { flex: 1 1 100%; }
}

/* --- Login page ---------------------------------------------------------- */
.login-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  overflow: hidden;
  /* A soft tint of the brand blue rather than a flat grey page - the plain
     .brand-body-bg background is fine once there's an app shell around it,
     but on its own (nothing else on screen but one card) it read as blank/
     unfinished. */
  background: radial-gradient(120% 120% at 50% -10%, var(--brand-primary-light) 0%, var(--brand-body-bg) 55%);
}

/* Purely decorative fill for the empty space around the card - approved in
   login_preview.html before landing here. All low-opacity so nothing here
   competes with the card itself. */
.login-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(61, 95, 238, 0.14) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}

.login-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
}

.login-bg-blob-1 {
  width: 460px;
  height: 460px;
  top: -180px;
  left: -140px;
  background: radial-gradient(circle at 35% 35%, rgba(108, 137, 255, 0.55), rgba(108, 137, 255, 0) 70%);
}

.login-bg-blob-2 {
  width: 520px;
  height: 520px;
  bottom: -220px;
  right: -180px;
  background: radial-gradient(circle at 60% 40%, rgba(124, 58, 237, 0.30), rgba(124, 58, 237, 0) 70%);
}

.login-bg-blob-3 {
  width: 280px;
  height: 280px;
  bottom: 8%;
  left: 6%;
  background: radial-gradient(circle at 50% 50%, rgba(34, 160, 107, 0.18), rgba(34, 160, 107, 0) 70%);
}

.login-bg-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(61, 95, 238, 0.16);
  pointer-events: none;
}

.login-bg-ring-1 { width: 620px; height: 620px; top: -260px; left: -200px; }
.login-bg-ring-2 { width: 340px; height: 340px; bottom: -120px; right: 8%; border-color: rgba(124, 58, 237, 0.16); }

.login-bg-shape {
  position: absolute;
  opacity: 0.10;
  pointer-events: none;
}

.login-bg-shape-1 { top: 12%; right: 12%; width: 46px; height: 46px; border-radius: 12px; background: var(--brand-primary); transform: rotate(18deg); }
.login-bg-shape-2 { bottom: 16%; right: 22%; width: 26px; height: 26px; border-radius: 8px; background: #7C3AED; transform: rotate(-12deg); }
.login-bg-shape-3 { top: 20%; left: 10%; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-success); }

.login-logo {
  width: 76px;
  height: 76px;
  object-fit: contain;
  background: #fff;
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 8px 20px rgba(16, 24, 64, 0.12);
}

.login-brand {
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
}

.login-tagline {
  color: var(--brand-muted);
  font-size: 1rem;
  line-height: 1.4;
}

.login-card {
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: none;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(16, 24, 64, 0.16);
}

.login-card::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--brand-gradient);
}

.login-card .card-body {
  padding: 2.25rem 2rem 2rem;
}

/* --- Dashboard stat tiles -------------------------------------------------- */
.stat-tile {
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--brand-primary);
}

.stat-tile .stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 4px 10px rgba(61,95,238,0.32);
}

.stat-tile.stat-success { border-top-color: var(--brand-success); }
.stat-tile.stat-success .stat-icon { background: linear-gradient(135deg, #22C58B, #0F9D6D); box-shadow: 0 4px 10px rgba(34,197,139,0.32); }
.stat-tile.stat-warning { border-top-color: var(--brand-warning); }
.stat-tile.stat-warning .stat-icon { background: linear-gradient(135deg, #FF9A3D, #E86A12); box-shadow: 0 4px 10px rgba(255,154,61,0.32); }

/* --- Dashboard hero banner -------------------------------------------------- */
.hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--brand-radius);
  background: linear-gradient(120deg, var(--brand-primary) 0%, #6D5EF5 55%, #7C3AED 100%);
  padding: 1.35rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-banner-blob {
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
}

.hero-banner-blob-1 { width: 180px; height: 180px; top: -70px; right: 60px; }
.hero-banner-blob-2 { width: 140px; height: 140px; bottom: -80px; right: 220px; background: rgba(255,255,255,0.08); }

.hero-banner-text { position: relative; z-index: 1; }

.hero-banner-title {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hero-banner-subtitle {
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.15rem;
}

.hero-banner-cta {
  position: relative;
  z-index: 1;
  background: #fff;
  color: var(--brand-primary-dark);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.55rem 1rem;
  border-radius: 9px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  white-space: nowrap;
}

.hero-banner-cta:hover {
  color: var(--brand-primary-dark);
  filter: brightness(0.97);
}

/* --- Kanban boards (Pipeline / Ticket / Incident / Task) ------------------- */
.kanban-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.kanban-column {
  background: #EEF0F7;
  border-radius: var(--brand-radius);
  min-width: 270px;
  max-width: 270px;
  padding: 0.85rem;
}

.kanban-column-header {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-muted);
  margin-bottom: 0.6rem;
  display: flex;
  justify-content: space-between;
}

.kanban-card {
  background: #fff;
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.6rem;
  box-shadow: 0 1px 3px rgba(16,24,64,0.08);
  cursor: grab;
  border: 1px solid var(--brand-border);
}

.kanban-card:hover {
  box-shadow: 0 4px 10px rgba(16,24,64,0.12);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-column.drag-over {
  outline: 2px dashed var(--brand-primary);
}

.kanban-card small {
  color: var(--brand-muted);
}

/* =====================================================================
   Printable documents (Vendor PO / Sales Order / Delivery Challan /
   Proforma Invoice / Invoice / Credit Note) - a shared branded letterhead
   driven by transactions.OrgProfile (name, logo, GSTIN, bank details), so
   every document type in the suite looks like it came from the same
   company. Layout mirrors the reference Delivery Challan format supplied
   2026-09-25: flat bordered sheet, logo+name beside a large plain-text
   doc title, a bordered "meta" strip (doc no/date/etc.), a shaded party
   label bar, a right-aligned totals block with a signature box under it,
   and a thank-you footer. Deliberately kept on its own navy accent
   (--doc-accent) rather than the app's blue brand color, since these are
   printed/official documents, not screen UI. Override --doc-accent per
   tenant later if per-company branding colors are ever needed.
   Structural note: nothing here uses display:flex - the logo-overlap bugs
   fixed earlier (both on-screen and in the emailed PDF, see
   templates/print_pdf_base.html's own comment) both traced back to flex
   not reliably clamping content to its box, so every multi-column block
   below uses a plain float (brand/title) or a real <table> (meta/parties/
   summary) instead - both render identically and predictably in browsers
   and in weasyprint (the emailed-PDF engine, which has no flex support
   worth trusting).
   ===================================================================== */
.doc-sheet {
  background: #fff;
  padding: 2rem;
  max-width: 850px;
  margin: 0 auto;
  border: 1px solid #495057;
  border-radius: 0;
}

.doc-header {
  border-bottom: 1px solid #495057;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.doc-header::after {
  content: '';
  display: table;
  clear: both;
}

.doc-header h2 {
  margin: 0 0 4px;
  color: var(--doc-accent);
  font-size: 1.15rem;
}

/* .doc-brand is deliberately NOT floated - it's a normal block given its
   own block-formatting context (overflow:hidden) so it sits beside the
   floated .doc-title instead of running under/over it. Proven pattern:
   this is the exact technique already used (and confirmed working, both
   on-screen and in emailed PDFs) for the logo sitting beside the address
   text one level down - see .doc-brand > div below. */
.doc-brand {
  overflow: hidden;
}

.doc-logo-box {
  float: left;
  margin-right: 1rem;
  /* Both width AND height pinned, with overflow:hidden on this wrapper
     rather than trusting the <img>'s own sizing - pinning size directly on
     a floated <img> wasn't reliably honored by the emailed-PDF engine even
     with object-fit set, so the box itself now clips whatever paints
     inside it. See templates/print_pdf_base.html's own comment for the
     full history. */
  width: 84px;
  height: 68px;
  overflow: hidden;
}

.doc-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.doc-brand > div {
  /* the un-classed text block next to the logo - overflow:hidden gives it
     its own block-formatting context so it sits beside the float instead
     of wrapping under it */
  overflow: hidden;
}

.doc-title {
  float: right;
  max-width: 42%;
  margin-top: 4px;
  text-align: right;
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #343a40;
}

/* Bordered "document number / date / place of supply / status" strip,
   directly under the letterhead - a real <table> (not flex/grid) so the
   outer border + single divider between the two columns render exactly
   the same in a browser and in the emailed PDF. */
.doc-meta {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ced4da;
  margin-bottom: 1rem;
}

.doc-meta td {
  width: 50%;
  vertical-align: top;
  padding: 10px 14px;
  border: none;
}

.doc-meta td + td {
  border-left: 1px solid #ced4da;
}

.doc-meta-row {
  margin-bottom: 3px;
}

.doc-meta-row:last-child {
  margin-bottom: 0;
}

.doc-meta-label {
  display: inline-block;
  min-width: 150px;
  color: #6c757d;
}

.doc-meta-label::after {
  content: ':';
}

.doc-meta-value {
  font-weight: 700;
}

/* Party block(s) - e.g. "Deliver To" / "Billed To" / "Vendor" - each with
   its own shaded label bar, side by side via a real <table> rather than
   flex (same reasoning as .doc-meta above). */
.doc-parties {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.doc-parties td {
  width: 50%;
  vertical-align: top;
  padding: 0;
  border: none;
}

.doc-parties td + td {
  padding-left: 1rem;
}

.doc-parties-label {
  background: #f1f3f5;
  color: #495057;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  margin-bottom: 6px;
}

/* A single party block (e.g. just "Billed To", no second column) - same
   label-bar look as .doc-parties-label but without the two-column table
   wrapper, capped to a reasonable width instead of running full-page. */
.doc-party-single {
  margin-bottom: 1rem;
  max-width: 60%;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.doc-table th, .doc-table td {
  border: 1px solid #adb5bd;
  padding: 6px 8px;
  font-size: 0.9rem;
}

.doc-table th {
  background: #f1f3f5;
}

.doc-table th.text-end, .doc-table td.text-end {
  text-align: right;
}

/* Notes (left) beside Totals + Signature (right), below the item table -
   again a real <table> rather than flex. */
.doc-summary {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.doc-summary td {
  width: 50%;
  vertical-align: top;
  padding: 0;
  border: none;
}

.doc-summary td + td {
  padding-left: 1rem;
}

.doc-totals {
  width: 100%;
}

.doc-totals table {
  width: 100%;
}

.doc-totals td {
  padding: 3px 6px;
}

.doc-totals tr.grand-total td {
  font-weight: 700;
  border-top: 2px solid #212529;
}

.doc-signature {
  border: 1px solid #ced4da;
  margin-top: 1rem;
  padding: 10px 14px 14px;
  text-align: center;
}

.doc-signature-space {
  height: 46px;
}

.doc-footer {
  border-top: 1px solid #ced4da;
  margin-top: 1.5rem;
  padding-top: 10px;
  text-align: center;
  font-size: 0.78rem;
  color: #6c757d;
}

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .doc-sheet { padding: 0; max-width: 100%; border-width: 0; }
  .doc-sheet, .doc-title {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Sales Follow-ups & Reminders calendar (crm:followup_list)
   table-layout: fixed is what makes this work: without it, a <td>'s
   percentage width is only a hint and the browser's auto table-layout
   algorithm expands a column to fit any nowrap content instead of
   respecting the width - which is exactly what broke the 28 Sep column
   (it stretched to fit long, unwrapped follow-up text and squeezed every
   other day off screen). Fixed layout forces every column to the width
   given below, so .text-truncate on the items inside can actually clip. */
.calendar-table {
  table-layout: fixed;
  width: 100%;
}

.calendar-table td {
  padding: 4px 6px;
  vertical-align: top;
  width: 14.28%;
  overflow: hidden;
}

.calendar-table td > div {
  line-height: 1.3;
}

.calendar-table .day-number {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--brand-muted);
}

.calendar-table .followup-item {
  display: block;
  color: inherit;
  text-decoration: none;
}

.calendar-table .followup-item:hover {
  text-decoration: underline;
}