/* ==========================================================================
   corromate custom styling
   Scoped, CSS-only overrides layered over the compiled app (no bundle changes).
   Loaded only for the corromate host (see index.php). Light / high-contrast
   for daylight field use.

   Dashboard landing: turn the two plain top-left boxes (Reports / Address Book)
   into centred, branded navigation tiles. Selectors are scoped to the two
   dashboard card links so the generic .card / .grid classes elsewhere in the
   app are untouched.
   ========================================================================== */

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

:root {
  --cm-ink: #1A2129;
  --cm-accent: #E8620F;
  --cm-accent-soft: #FBDDC9;
  --cm-good: #268A5D;
  --cm-good-soft: #D5ECDF;
  --cm-surface: #ffffff;
  --cm-line: #D9E0E7;
  --cm-line-2: #C2CAD3;
}

/* Tile row: centred, responsive, sensible max width. Scoped to the grid that
   contains the Address Book card, i.e. the dashboard. */
.grid.gutter:has(> .card > a[href="/clients/"]) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  align-items: stretch;
  max-width: 740px;
  margin: 74px auto 0 !important;
  padding: 0 20px !important;
  float: none !important;
  width: auto !important;
}

/* The two dashboard tiles */
.card:has(> a[href="/generalinspection/"]),
.card:has(> a[href="/clients/"]) {
  flex: 1 1 290px !important;
  max-width: 340px;
  min-height: 172px;
  background: var(--cm-surface) !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 28, 36, .05), 0 12px 26px rgba(20, 28, 36, .08) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.card:has(> a[href="/generalinspection/"]):hover,
.card:has(> a[href="/clients/"]):hover {
  transform: translateY(-3px);
  border-color: var(--cm-line-2) !important;
  box-shadow: 0 3px 8px rgba(20, 28, 36, .10), 0 22px 50px rgba(20, 28, 36, .15) !important;
}

/* Tile link = column layout: icon chip top, label bottom */
.card:has(> a[href="/generalinspection/"]) > a,
.card:has(> a[href="/clients/"]) > a {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  height: 100%;
  padding: 28px 26px 26px !important;
  text-decoration: none;
  color: var(--cm-ink) !important;
}

/* Icon chip (the div wrapping the svg) */
.card:has(> a[href="/generalinspection/"]) > a > div,
.card:has(> a[href="/clients/"]) > a > div {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: auto;
}

.card:has(> a[href="/generalinspection/"]) > a > div { background: var(--cm-accent-soft); }
.card:has(> a[href="/clients/"]) > a > div          { background: var(--cm-good-soft); }

.card:has(> a[href="/generalinspection/"]) svg.svgIcon { fill: var(--cm-accent) !important; }
.card:has(> a[href="/clients/"]) svg.svgIcon           { fill: var(--cm-good) !important; }

.card:has(> a[href="/generalinspection/"]) svg.svgIcon,
.card:has(> a[href="/clients/"]) svg.svgIcon {
  width: 31px !important;
  height: 31px !important;
}

/* Tile label */
.card:has(> a[href="/generalinspection/"]) span,
.card:has(> a[href="/clients/"]) span {
  margin-top: 20px;
  font-family: 'Sora', system-ui, sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--cm-ink) !important;
}