/* Kitalisa Enterprise — project-specific overrides only. Keep this file short; prefer existing
   Cassie utility classes (pd-*, mg-*, tx-*, bd-*, bg-*) over adding new rules here. */

/* The wordmark is the company logo rather than text. Sized by height and left to find
   its own width, so the artwork's aspect ratio is never distorted; the 230px sidebar is
   the constraint, hence max-width rather than a fixed width. */
.bakery-logo { display: block; height: 34px; width: auto; max-width: 100%; }
/* Cassie pins .sidebar-logo to height:24px for its 28px wordmark text. The logo is an
   image and taller than that, so the container is released to size to its content —
   otherwise the artwork overflows the sidebar header and spills across the page. */
.sidebar-logo { display: flex; align-items: center; height: auto; }

/* The sign-in card gives the logo more room than the sidebar does — it is the first
   thing anyone sees on the way in. */
.bakery-auth-card .bakery-logo { height: 52px; margin: 0 auto; }

/* Toggle switches: cassie.css places the knob with calc(-2.25rem+2px), and its minifier
   stripped the spaces calc() requires around "+", so browsers drop the rule. The knob
   falls back to the checkbox position (-1.5rem) and, when switched on, slides off the
   right edge of the track, leaving a bite out of it. Same values, written validly. */
.custom-switch .custom-control-label::after { left: calc(-2.25rem + 2px); }

/* Every .table-responsive table shows a pointless horizontal scrollbar even when nothing
   actually overflows: the <table> renders with border-collapse:separate (a 1px left/right
   border) but box-sizing:content-box — DataTables' own stylesheet sets that explicitly on
   table.dataTable, and it loads after this file so it wins on source order despite equal
   selector specificity — so that border adds 2px on top of the width:100% DataTables sets,
   making the table exactly 2px wider than its wrapper. border-box (forced with !important
   to beat DataTables' rule regardless of include order) folds the border back inside the
   100% instead of adding to it. */
.table-responsive table { box-sizing: border-box !important; }

/* Mobile nav drawer: Cassie's default .toggle-sidebar behavior below 992px both slides
   the sidebar in AND pushes .content sideways by the sidebar's width — the sidebar is
   already position:fixed/z-index:20, so the push just shifts the page and leaves a bare
   gap behind it instead of overlaying like a real drawer. Cancel the push and dim the
   page behind the sidebar instead; includes/navigation.php renders the backdrop div,
   bakery.js closes the drawer when it's tapped. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(33, 43, 53, .6);
  z-index: 15;
}
@media (max-width: 991.98px) {
  .toggle-sidebar .content { transform: none; }
  .toggle-sidebar .sidebar-backdrop { display: block; }
}

/* Small screens: turn every list/report table into stacked cards (one per row) instead
   of a table that needs horizontal scrolling. Applies only to tables bakery.js has
   labeled (.table-card-view, data-label per cell, taken from the table's own <thead>) —
   see the labeling pass in bakery.js for why that's driven from JS, not markup. */
@media (max-width: 767.98px) {
  .table-responsive table.table-card-view thead { display: none; }
  .table-responsive table.table-card-view,
  .table-responsive table.table-card-view tbody,
  .table-responsive table.table-card-view tr,
  .table-responsive table.table-card-view td {
    display: block;
    width: 100%;
  }
  .table-responsive table.table-card-view.table-striped tr {
    background-color: transparent !important;
  }
  .table-responsive table.table-card-view tbody tr {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid #e6e7ef;
    border-radius: 6px;
  }
  .table-responsive table.table-card-view tbody tr:last-child { margin-bottom: 0; }
  .table-responsive table.table-card-view td {
    padding: 5px 0;
    border: none !important;
    text-align: left;
  }
  .table-responsive table.table-card-view td[data-label]:not([data-label=""]) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .table-responsive table.table-card-view td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-weight: 600;
    color: #373857;
    flex-shrink: 0;
  }
  /* First cell doubles as the card's title (see bakery.js — it's left unlabeled). */
  .table-responsive table.table-card-view td:first-child {
    font-weight: 600;
    font-size: 14px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid #e6e7ef !important;
  }
  /* A colspan row (e.g. "No products yet.") is a plain message, not a titled card. */
  .table-responsive table.table-card-view td[colspan] {
    font-weight: 400;
    font-size: inherit;
    text-align: center;
    border-bottom: none !important;
    margin-bottom: 0;
    padding-bottom: 5px;
  }
}

/* Auth pages (sign-in, forgot-password): a single centered card, no left/right image
   panel — replaces Cassie's default edge-pinned .signin-sidebar/.forgot-sidebar layout. */
.bakery-auth-panel {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9fd;
  padding: 30px 15px;
}
.bakery-auth-card {
  width: 100%;
  max-width: 420px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px 0 rgba(131, 146, 165, 0.15), 2px 2px 5px 0 rgba(60, 70, 83, 0.04);
  padding: 40px;
  text-align: center;
}
.bakery-auth-card .sidebar-logo { display: inline-block; }
.bakery-auth-card form,
.bakery-auth-card .alert { text-align: left; }