/* ==========================================================================
   ACCMAST.master - global chrome styles
   Top band + horizontal drill-down menu bar + content area.
   Plain CSS, no external framework dependency.
   ========================================================================== */

:root {
  --am-primary-dark: #0f2540;
  --am-primary: #163b64;
  --am-primary-light: #1f4f83;
  --am-accent: #21c7b0;
  --am-accent-dark: #17a08d;
  --am-btn-green: #7ed9a4;       /* lighter green - Login/Logout buttons */
  --am-btn-green-dark: #5cc189;  /* hover shade */
  --am-topband-bg: #d8dbdf;
  --am-text-on-primary: #262b31;
  --am-text-muted-on-primary: #52585f;

  --am-bg: #f2f5f8;
  --am-surface: #ffffff;
  --am-border: #e1e7ee;
  --am-text: #1c2b3a;
  --am-text-muted: #647184;

  --am-topband-height: 112px; /* 140px reduced by 20%; app logo below sized down to match */
  --am-radius: 8px;
  --am-shadow: 0 2px 10px rgba(15, 37, 64, 0.08);
  --am-transition: 200ms ease;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--am-bg);
  color: var(--am-text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }

/* ---------------------------------------------------------------------- */
/* Top band                                                                */
/* ---------------------------------------------------------------------- */

.am-topband {
  position: sticky; /* also serves as the positioning context for .am-center below */
  top: 0;
  z-index: 100;
  height: var(--am-topband-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  background: var(--am-topband-bg);
  color: var(--am-text-on-primary);
  box-shadow: var(--am-shadow);
}

/* Left/right clusters - each its own flex box so the two can be any width
   without affecting where .am-center lands (it's positioned off the band
   itself, not off these). */
.am-topband-side {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  flex: 0 0 auto;
}

.am-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.am-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--am-text-on-primary);
  border-radius: 2px;
}
.am-menu-toggle:hover { background: rgba(0, 0, 0, 0.06); }

/* Left: small CCSAi logo */
.am-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}
.am-logo-link { display: flex; align-items: center; }
.am-logo {
  height: 60px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* Left-of-center: currently logged-in user (post-login only) */
.am-user-context {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  line-height: 1.25;
}
.am-user-context-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--am-text-muted-on-primary);
}
.am-user-context-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--am-text-on-primary);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Center: product title / company brand (swapped after login).
   Positioned dead-center on the FULL top band (not just centered in
   whatever space is left between the left/right clusters) by taking it
   out of flex flow and centering the box itself against .am-topband. */
.am-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: min(620px, 55%);
  overflow: hidden;
  pointer-events: none; /* the panels/links inside re-enable it */
}
.am-center > * { pointer-events: auto; }
.am-center-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Pre-login center greeting */
.am-welcome-greeting {
  display: flex;
  align-items: center;
  gap: 14px;
}
.am-welcome-emoji {
  font-size: 40px;
  line-height: 1;
  transform: translateY(-1px);
}
.am-welcome-text {
  font-family: "Poppins", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--am-primary);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.am-company-logo {
  /* Sized to match .am-company-name's font-size, so the logo and the
     name sit at the same visual height. ImageUrl is set in code-behind
     from the selected company's own companies.logoUrl column. */
  height: 30px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  border-radius: 4px;
}
.am-company-name {
  /* Stylish display serif - distinct from the Poppins used for "Welcome"
     and the rest of the sans-serif chrome. */
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #00008b; /* dark blue */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px;
}

/* Right-of-center: selected financial year (post-login only) - area and
   font doubled from the original pill; no "FY" caption, just the value,
   on a light-yellow pill. */
.am-fy {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 10px 24px;
  background: #fff6cc;
  border: 1px solid rgba(38, 43, 49, 0.18);
  border-radius: 40px;
}
.am-fy-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--am-text-on-primary);
  white-space: nowrap;
}

/* Locked financial year (2026-10-26): red pill, everything is view only */
.am-fy.am-fy-locked { background: #fde2e1; border-color: #c62828; }
.am-fy.am-fy-locked .am-fy-value { color: #b71c1c; }

/* Financial year switcher (2026-10-26): the pill's value is now a dropdown of the
   company's years - same yellow pill, same 26px bold text, no box of its own. */
.am-fy-select {
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  color: var(--am-text-on-primary);
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0 30px 0 0;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* small dark chevron on the right */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23262b31' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 20px 20px;
}
.am-fy-select:focus-visible { outline: 2px solid #b45309; outline-offset: 4px; border-radius: 4px; }
.am-fy-select:disabled { opacity: 0.6; cursor: wait; }
.am-fy-select option { font-size: 16px; font-weight: 700; color: #262b31; background: #fff6cc; }
.am-fy:hover { border-color: #b45309; }
.am-fy.am-fy-locked .am-fy-select { color: #b71c1c; }

/* Locked financial year: popups open view only (ACCMAST.master.cs FinYearReadOnlyScript) */
.am-fy-readonly .am-ro { pointer-events: none; background-color: #f2f2f2 !important; color: #444; }
.am-fy-ro-note {
  margin: 0 0 10px;
  padding: 8px 12px;
  background: #fde2e1;
  border: 1px solid #c62828;
  border-radius: 6px;
  color: #b71c1c;
  font-weight: 600;
}

/* Far right: login button / logout, then the app logo */
.am-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.am-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--am-transition), border-color var(--am-transition), color var(--am-transition);
}
.am-btn-login,
.am-btn-logout {
  background: var(--am-btn-green);
  color: #0b3d24;
  border-color: transparent;
}
.am-btn-login:hover,
.am-btn-logout:hover {
  background: var(--am-btn-green-dark);
}

/* Application logo (full logo incl. tagline), pinned to the far right */
.am-app-logo-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.am-app-logo {
  /* Scaled down 20% along with --am-topband-height (100px -> 80px). */
  height: 80px;
  width: auto;
  max-width: 208px;
  object-fit: contain;
}

/* ---------------------------------------------------------------------- */
/* Menu bar: horizontal drill-down menu, directly below the top band       */
/* ---------------------------------------------------------------------- */

.am-navbar {
  background: var(--am-surface);
  border-bottom: 1px solid var(--am-border);
  box-shadow: var(--am-shadow);
  /* 2026-10-19: pinned right under the (sticky) top band, so the menu and the Cash/Bank balances stay on
     screen while the page scrolls. The band is exactly --am-topband-height tall at desktop widths. */
  position: sticky;
  top: var(--am-topband-height);
  z-index: 90;
}

.am-menu-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 16px;
}

.am-menu-item { position: relative; }

.am-menu-link,
.am-menu-parent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--am-text);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--am-transition), color var(--am-transition), border-color var(--am-transition);
}
.am-menu-link:hover,
.am-menu-parent:hover {
  background: var(--am-bg);
  color: var(--am-primary);
}
.am-menu-icon {
  font-size: 6px;
  color: var(--am-accent-dark);
  flex: 0 0 auto;
}
.am-menu-caret {
  transition: transform var(--am-transition);
  color: var(--am-text-muted);
}
.am-menu-item.open > .am-menu-parent .am-menu-caret { transform: rotate(90deg); }
.am-menu-item.open > .am-menu-parent {
  color: var(--am-primary);
  background: var(--am-bg);
  border-bottom-color: var(--am-accent);
}

/* Desktop: submenu is a dropdown panel under its parent item */
.am-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  flex-direction: column;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--am-shadow);
  padding: 6px 0;
}
.am-menu-item.open > .am-submenu { display: flex; }
.am-submenu a {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  color: var(--am-text-muted);
  transition: background var(--am-transition), color var(--am-transition);
}
.am-submenu a:hover {
  background: var(--am-bg);
  color: var(--am-primary);
}

/* Lays the menu links and the balances strip out on one row, links on the left (unchanged, still its own
   internal flex/wrap via .am-menu-list) and the balances strip pushed to the far right. */
.am-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Live Cash/Bank balances (2026-10-16): right side of the menu bar, always shown once logged in - see
   ACCMAST.master.cs BindCashBankBalances() for what populates it (one <span class="am-bal-item"> per
   Cash/Bank account) and why this is the one place this master page queries the database directly. */
.am-menu-balances {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  padding: 0 16px;
  font-size: 11px; /* 2026-10-16: 13px -> 19.5px -> 22px; 2026-10-19: halved to 11px (Chidambar), kept bold */
  font-weight: 700;
  white-space: nowrap;
  overflow-x: auto;
  max-width: 55%;
}
.am-bal-item { display: inline-flex; gap: 5px; align-items: baseline; }
/* 2026-10-16: caption ("Cash", "Bank", ...) in dark bold blue - reuses the app's own darkest brand blue
   (--am-primary-dark, the top-band color) rather than a one-off hex so it stays in sync with the rest of the
   theme; the amount is dark black per Chidambar's "captions dark bold blue, amounts dark black" request. */
.am-bal-name { color: var(--am-primary-dark); font-weight: 700; }
.am-bal-value { color: #000000; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------- */
/* Body: main content                                                      */
/* ---------------------------------------------------------------------- */

.am-body {
  min-height: calc(100vh - var(--am-topband-height));
}

.am-content {
  padding: 24px;
}

/* A light card shell content pages can opt into. */
.am-card {
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  box-shadow: var(--am-shadow);
  padding: 20px;
}

/* ---------------------------------------------------------------------- */
/* Responsive behaviour                                                    */
/* ---------------------------------------------------------------------- */

/* Tablet (and any resized desktop window this narrow): the centered company name + logo
   (or, pre-login, the "Welcome" panel) is only absolutely centered on wide windows, where
   there is reliably enough room either side of it. Below this width the left/right clusters
   can run wide enough to collide with it, so .am-center instead becomes a normal, full-width
   flex item pinned to the front of the band (order: -1); combined with .am-topband wrapping,
   that puts it on its own first line, with the left/right clusters wrapping to a second line
   underneath instead of overlapping it. */
@media (max-width: 992px) {
  :root { --am-topband-height: 100px; } /* base .am-company-name/.am-company-logo are already small (30px) */

  .am-topband {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--am-topband-height);
    row-gap: 6px;
    /* 2026-10-19: the band wraps to a height that varies here, so it scrolls away at these widths and the
       menu bar (with the Cash/Bank balances) pins to the very top instead - see .am-navbar below. */
    position: relative;
  }
  .am-navbar { top: 0; }
  .am-center {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    order: -1;
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
  }
  /* The band can now be taller than --am-topband-height (it wraps to two lines), so a hard
     "100vh minus one line" floor on the content area would be slightly too tall; let it size
     naturally at these widths instead. */
  .am-body { min-height: auto; }

  .am-app-logo { height: 80px; max-width: 210px; }

  .am-fy { padding: 8px 18px; gap: 8px; }
  .am-fy-value { font-size: 20px; }
  .am-fy-select { font-size: 20px; padding-right: 26px; background-size: 16px 16px; }

  .am-welcome-text,
  .am-welcome-emoji { font-size: 30px; }
}

/* Phone / narrow tablet: menu bar collapses under the hamburger toggle */
@media (max-width: 768px) {
  :root { --am-topband-height: 96px; }

  .am-menu-toggle { display: flex; }

  .am-topband { padding: 10px 16px; }

  .am-user-context,
  .am-fy { display: none; }
  .am-company-logo { display: block; height: 64px; max-width: 220px; }
  .am-company-name { font-size: 22px; max-width: 65vw; }

  .am-logo { height: 40px; max-width: 130px; }
  .am-app-logo { height: 56px; max-width: 150px; }

  .am-navbar { display: none; }
  /* Pinned at the top when opened; a long menu scrolls inside itself instead of running off the screen. */
  body.am-menu-open .am-navbar { display: block; max-height: 100vh; overflow-y: auto; }

  .am-menu { flex-direction: column; align-items: stretch; }
  .am-menu-list { flex-direction: column; padding: 4px 0; }
  .am-menu-link,
  .am-menu-parent { border-bottom: none; padding: 11px 20px; }
  .am-menu-item.open > .am-menu-parent { border-bottom: none; }

  /* Same balance strip, stacked under the menu links instead of beside them - still shown as soon as the
     hamburger is opened (body.am-menu-open), same as the links themselves; see the .am-navbar rule above. */
  .am-menu-balances {
    margin-left: 0;
    max-width: none;
    overflow-x: visible;
    white-space: normal;
    padding: 10px 20px;
    border-top: 1px solid var(--am-border);
    font-size: 10px; /* 2026-10-16: 12.5px -> 18.75px -> 20px; 2026-10-19: halved to 10px, matching .am-menu-balances above */
  }

  .am-submenu {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: #fafbfc;
    padding: 0;
  }
  .am-menu-item.open > .am-submenu { display: flex; }
  .am-submenu a { padding: 9px 20px 9px 46px; }

  .am-content { padding: 16px; }
}

@media (max-width: 480px) {
  :root { --am-topband-height: 84px; }

  .am-topband { gap: 8px; padding: 8px 10px; }
  .am-right { gap: 10px; }
  .am-logo { display: none; }
  .am-app-logo { height: 46px; max-width: 130px; }
  .am-company-logo { height: 52px; max-width: 170px; }
  .am-company-name { font-size: 17px; max-width: 58vw; }
  .am-center-inner { gap: 6px; }
}