:root {
  /* ── Surfaces ────────────────────────────────────────────────────────────
     Warmed off the blue axis. The old values (#0b0c10, #151720, #1c1f2e)
     carried a blue bias that fought the gold on every card edge. These are
     the same lightness, rotated to a neutral-warm hue. */
  --bg: #0D100E;
  --surface: #141917;
  --surface-2: #1B2220;

  --border: rgba(198, 165, 96, 0.14);
  --border-strong: rgba(198, 165, 96, 0.28);

  --text: #F2EEE6;
  --text-dim: #DCD8CE;
  --muted: #808B85;   /* 4.59:1 on --surface-2; #7C8781 was 4.35 */

  /* ── Brand ───────────────────────────────────────────────────────────────
     Gold is WHAT THINGS ARE: brand, section headers, totals, VIP, unread.
     Never a button you can press. */
  --gold: #C6A560;
  --gold-2: #D4B679;
  --gold-3: #B08F4A;

  /* ── Action ──────────────────────────────────────────────────────────────
     Action is WHAT YOU CAN DO: primary buttons, links, focus rings, active
     nav. The two-register split from the old file is kept exactly; only the
     hue changed. #00f5d4 at full chroma reads as a crypto exchange next to
     gold — this is the same colour desaturated into hospitality range. */
  --action: #5FA88F;
  --action-2: #77BFA5;
  --action-soft: rgba(95, 168, 143, 0.12);
  --action-border: rgba(95, 168, 143, 0.38);
  --action-contrast: #0D100E;

  /* ── State ───────────────────────────────────────────────────────────────
     One muted family. Success deliberately equals --action: "it worked" and
     "you can do this" are the same green here, which is one less hue. */
  /* Two surfaces the shell needs and the palette did not carry.
     --surface-hover is a nav row under the pointer, one step up from the
     sidebar it sits on. --surface-deep is the tab band, which reads as behind
     the content rather than on it: darker than content in dark, lighter in
     light. Both are declared per theme so no shell rule holds a literal. */
  --surface-hover: #232B28;
  --surface-deep: #090C0B;

  --danger: #C4635C;
  --danger-soft: rgba(196, 99, 92, 0.12);
  --danger-border: rgba(196, 99, 92, 0.34);
  --success: #5FA88F;
  --success-soft: rgba(95, 168, 143, 0.12);
  --success-border: rgba(95, 168, 143, 0.32);
  --warning: #C99A3E;
  --warning-soft: rgba(201, 154, 62, 0.13);

  /* ── Report categories ───────────────────────────────────────────────────
     Were #5bc0be / #3b82f6 / #7f8c8d / #f5b041 — four unrelated brand-strength
     colours filling whole banner rows. Now tints in the same family, used as a
     2px left rail plus a coloured label, not a filled row. */
  --cat-aloj: #5FA88F;
  --cat-fb: #7E9AAE;
  --cat-div: #7C7A72;
  --cat-total: #C6A560;

  /* ── Elevation ───────────────────────────────────────────────────────────
     Dark mode separates surfaces with shadow; light mode does not (see below).
     Both are declared so component rules can reference one token. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.32);
  --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.45);

  /* Deliberately empty. Referenced in ~20 rules; emptying the token removes
     every gold bloom in one line without touching those rules. */
  /* A gold wash for a selected row or a hovered link. Six rules carried it
     as a hand-written rgba on the pre-refresh gold, so they were all a shade
     off the token they were imitating. */
  --gold-soft: rgba(198, 165, 96, 0.08);
  /* Alternating table rows: a wash, lighter in the dark theme and
     darker in the light one, which no single colour token can be. */
  --row-stripe: rgba(255, 255, 255, 0.02);
  /* Behind a modal. Dark in both themes -- a scrim is shade, not a
     surface, so it does not invert. */
  --scrim: rgba(13, 16, 14, 0.66);

  --gold-glow: none;
  --action-glow: none;

  /* ── Type ────────────────────────────────────────────────────────────────
     All three are SIL Open Font License, so they can be self-hosted and the
     Google CDN / GDPR problem noted in the old file goes away. Serve as woff2
     from /assets/fonts/ with font-display: swap. */
  --font-display: 'Prata', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* ── Radius ──────────────────────────────────────────────────────────────
     Was 6/7/8/9/12/14/16/18/999 across the file. Three steps and a pill. */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ── Motion ──────────────────────────────────────────────────────────────
     One curve, two durations. No bounce (0.34,1.56,0.64,1) anywhere. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 0.15s;
  --slow: 0.3s;
}

.light-theme,
html[data-theme="light"] body {
  --bg: #F7F4ED;
  --surface: #FFFFFF;
  --surface-2: #F0ECE2;

  /* Solid, not alpha. A gold-tinted translucent border over white goes
     invisible; over #F0ECE2 it goes muddy. */
  --border: #E4DFD3;
  --border-strong: #D5CDB9;

  --text: #1A1814;
  --text-dim: #33302A;
  --muted: #6E695E;

  --gold: #82662C;      /* 5.40:1 on white, 4.58:1 on --surface-2 */
  --gold-2: #A38442;
  --gold-3: #6E5626;

  --action: #2E765F;    /* 5.42:1 on white, 4.60:1 on --surface-2 */
  --action-2: #256150;
  --action-soft: rgba(46, 118, 95, 0.09);
  --action-border: rgba(46, 118, 95, 0.34);
  --action-contrast: #FFFFFF;

  --surface-hover: #E7E1D4;
  --surface-deep: #FDFBF7;

  --danger: #96332E;
  --danger-soft: rgba(150, 51, 46, 0.08);
  --danger-border: rgba(150, 51, 46, 0.26);
  --success: #2E765F;
  --success-soft: rgba(46, 118, 95, 0.08);
  --success-border: rgba(46, 118, 95, 0.26);
  --warning: #8A6321;
  --warning-soft: rgba(138, 99, 33, 0.1);

  --cat-aloj: #2E765F;
  --cat-fb: #4C6B80;
  --cat-div: #5E5C55;
  --cat-total: #82662C;

  /* Light mode separates surfaces with BORDERS, not shadow. The old
     0 4px 12px rgba(0,0,0,.15) is a dark-mode technique; on paper it reads
     as smudge. These are hairlines, not clouds. */
  --shadow-sm: 0 1px 2px rgba(26, 24, 20, 0.06);
  --shadow-md: 0 2px 6px rgba(26, 24, 20, 0.07);
  --shadow-pop: 0 12px 32px rgba(26, 24, 20, 0.14);

  --gold-soft: rgba(138, 109, 47, 0.07);
  --row-stripe: rgba(26, 24, 20, 0.02);
  --scrim: rgba(26, 24, 20, 0.44);

  --gold-glow: none;
  --action-glow: none;
}

* { 
  box-sizing: border-box; 
}

body { 
  margin: 0; 
  background: var(--bg); 
  color: var(--text); 
  font-family: var(--font-body);
  /* Regular, not Light. This is read at 03:00 by someone at the end of a
     shift; a Light weight for body copy costs legibility for a refinement
     nobody notices at that hour. */
  font-weight: 400;
  -webkit-font-smoothing: antialiased; 
  min-height: 100vh;
}

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

body.light-theme {
  background: var(--bg);
}

/* The archive's filter card, which had four inputs and nothing naming them. */
.filter-heading {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Icons ──────────────────────────────────────────────────────────────────

   Every icon in the portal comes from js/icons.js, which is generated from the
   lucide package. The rules that make a set of 35 read as one language rather
   than 35 separate drawings are here, so no call site has to remember them.

   Three sizes and no others: 16 inline and in dense rows, 20 for default UI,
   24 for empty states and section heads. The size is an attribute on the
   element rather than a class, because it also has to be a real width for the
   moment before CSS arrives.

   Colour is always inherited. An icon is not a thing in its own right -- it
   belongs to the text beside it -- so it takes that text's colour and is
   legible in both themes without a single hardcoded value. The state icons are
   the sole exception, below. */
.icon {
  /* Never compressed by a flex parent. An icon squeezed to 11px is not a
     smaller icon, it is a different one. */
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}

/* Aligned to the optical centre of the adjacent text, not to its box. A line
   box is taller than the letters in it, so a mathematically centred icon reads
   as sitting slightly high; one pixel down fixes it. Only at 16, where the
   discrepancy is a visible fraction of the glyph. */
.icon[width="16"] {
  margin-top: 1px;
}

/* A search box with the glyph inside it rather than beside it. `search` is one
   of the four allowed to stand alone -- a magnifier in a text field needs no
   label, and adding one would say what the placeholder already says.

   The icon is positioned rather than laid out in flow so it sits over the
   field's own padding: a flex row would push the input sideways and leave the
   caret starting in a different place from every other input in the portal. */
.search-field {
  position: relative;
  display: block;
  width: 100%;
}

.search-field .icon {
  position: absolute;
  top: 50%;
  left: 12px;
  margin-top: 0;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.search-field .form-input {
  width: 100%;
  padding-left: 36px;
  margin-bottom: 0;
}

/* ── The state icons ────────────────────────────────────────────────────────

   The only icons that carry a colour of their own, because they are reporting
   a condition and the colour is the message rather than decoration.

   Gold here is not a contradiction of "nothing clickable is ever gold". These
   report what something IS -- pending, done, failed -- which is precisely the
   register gold owns. None of them is a control. */
.icon-success { color: var(--success); }
.icon-danger  { color: var(--danger); }
.icon-gold    { color: var(--gold); }

/* An icon and its word are one thing to read and one thing to click. Any
   control built from `icon() + label` gets this rather than repeating three
   declarations at every call site. */
.icon-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ── The shell ──────────────────────────────────────────────────────────────

   Two columns, and the sidebar owns the full height of the left one.

       "sidebar header"
       "sidebar main"

   The header does not span the sidebar, and that is the whole structural
   decision. It is why the maker's mark sits at the top of the sidebar rather
   than in the header: the top-left corner belongs to the column, so the header
   can begin at the content edge. A header spanning the full width would drive
   a horizontal rule straight through the sidebar and the column would stop
   reading as one object.

   Navigation lived in the header for a while, and moved back out because tabs
   want that horizontal band and two rows of horizontal navigation gives you
   two rows of similar-looking targets. A column also takes a seventh
   destination without a layout decision, where a bar fits until it does not
   and then hides half the app behind "mais". */
.dashboard {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

/* ── A page inside a tab reserves no room for chrome it does not draw ────────

   Every page carries both placeholders, because every page still has to work
   opened directly. Inside the workspace js/nav.js deliberately leaves them
   empty -- the shell already drew the sidebar and the header, and a second set
   inside the frame would be two of each.

   Empty is not the same as gone, though. The grid went on reserving the 230px
   column and the 56px row regardless, so every tab opened with an empty
   sidebar beside an empty header and the page pushed 230px to the right. It
   read as a second, ghostly tab sitting behind the real one, which is exactly
   what it looked like.

   `data-framed` is set in the pre-paint snippet in each page's <head> rather
   than from js/nav.js, for the same reason the theme is: a module runs late
   enough to paint the gap first and then close it. */
html[data-framed] .dashboard {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  grid-template-areas: "main";
}

html[data-framed] .dashboard-sidebar,
html[data-framed] .dashboard-header {
  display: none;
}

/* ── The header ─────────────────────────────────────────────────────────────

   56px, and exactly four things in it: the hotel's name, the product's name,
   the clock, the bell. Nothing else may enter -- no search, no user menu, no
   quick actions, no property switcher. Its job is to answer "where am I, what
   time is it, is anything waiting", and everything else has a home elsewhere.

   The gold bottom rule is gone. Gold says what a thing IS, and a 2px gold band
   under a header says the header is the important object on the screen, which
   it is not. A 1px border is a boundary; the old one was a claim. */
.dashboard-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 56px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* ── Co-branding ────────────────────────────────────────────────────────────

   The hotel's name is always larger than MAUJr's. Never equal, never a two-logo
   lockup. This is the rule the whole arrangement rests on: a duty manager who
   feels the system is theirs renews; one who feels they are renting somebody
   else's software does not.

   The signature is the smallest type in the bar. That is the point of it. */

.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  /* The bar is a flex row and flex children compress below their intrinsic
     width by default. Only the property name may truncate, and only after
     everything else has had its space. */
  min-width: 0;
  flex-shrink: 1;
}

/* The lead. Prata, because a serif at this size reads as the establishment's
   name rather than as a piece of software chrome. */
.brand-property {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-divider {
  width: 1px;
  align-self: stretch;
  min-height: 18px;
  background: var(--border-strong);
  flex-shrink: 0;
}

/* The descriptor. Demoted the moment a property is known -- it says what this
   is, not whose it is. */
/* Smaller than the hotel's name, always. That ordering is the rule the whole
   co-branding rests on: this is their system, not software they rent. */
.brand-product {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.brand-signature {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Four caps and a lowercase r, and the r is gold. That is the mark. */
.brand-signature-r {
  color: var(--gold);
}

.brand-logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* The wordmark, and the three things that may never be done to it.

   uppercase rendered it MAUJR. The mark is four caps and a lowercase r --
   MAUJR, Maujr and maujr are all wrong, and CSS was quietly producing the
   first of those on every page.

   letter-spacing re-spaced it, which the usage rules also forbid.

   font-weight 700 was the more damaging one: it is more specific than the
   h1-h6 reset, so it won, and Prata ships a single weight -- the browser was
   synthesising a fake bold on the one piece of type that carries the
   identity. */
.brand h1 {
  font-size: 18px;
  margin: 0;
  color: var(--gold);
  font-weight: 400;
}

/* Pushed to the far right, away from the menu. What is on the left is where you
   can go; what is on the right is the state of this session. */
.header-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}


/* Mono with tabular figures, because it reads out a new second every second
   and proportional digits make the whole line breathe in and out as the
   numbers change. Tabular gives every digit the same advance, so only the
   glyph changes and nothing beside it moves. */
.header-datetime {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

/* ── The sidebar ────────────────────────────────────────────────────────────

   230px, fixed, full height. Not resizable and not collapsible: a 64px rail of
   icons saves 166px and costs every new member of staff a week of guessing at
   what the pictures mean. On a 1366px reception screen 230px is affordable;
   the guessing is not.

   The colour split follows the portal's own rule: gold says what a thing IS,
   action says what you can DO. A nav item is something you can do, so the
   active rail is --action. The old `.dashboard-sidebar nav a.active` gold rule
   is gone. */

.dashboard-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  z-index: 40;
}

/* The maker's mark, and the only gold in this column. It sits here rather than
   in the header because the top-left corner belongs to the sidebar -- that is
   what lets the header start at the content edge. */
.sidebar-mark {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 20px;
  flex: 0 0 auto;
}

.sidebar-mark .brand-signature {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--text);
}

.sidebar-nav {
  flex: 1 1 auto;
  padding: 8px 0;
  min-height: 0;
}

.sidebar-nav-list,
.nav-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 20px;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* No movement and no border on hover. A row that shifts under the pointer is a
   row you have to re-aim at, and this list is used at speed. */
.nav-link:hover {
  background: var(--surface-hover);
}

.nav-link:focus-visible,
.nav-toggle:focus-visible,
.notification-bell:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: -2px;
}

/* Where you are. The rail is inset on the left edge and it is --action, never
   gold: this is a thing you can do. Also carried as aria-current in the
   markup, so the colour restates a fact rather than being the only one. */
.nav-link.active {
  background: var(--surface-hover);
  border-left-color: var(--action);
  font-weight: 500;
}

.nav-link > .icon {
  color: var(--muted);
  transition: color 0.15s ease;
}

.nav-link:hover > .icon,
.nav-link.active > .icon {
  color: var(--text);
}

/* The chevron on a group, and the lock on an item somebody cannot reach. */
.nav-link .dropdown-arrow {
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.nav-group-btn[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

.nav-link .nav-lock {
  margin-left: auto;
  color: var(--muted);
}

/* Disabled, never hidden. The sidebar has the same shape for everybody, so one
   person can tell another "third item down" over the phone and be right. A
   list that rearranges itself per role cannot be described out loud, and the
   staff member who cannot reach Administração still benefits from knowing it
   exists and who to ask. */
.nav-link.is-locked,
.nav-link.is-locked:hover {
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
}

.nav-link.is-locked > .icon {
  color: var(--muted);
}

/* Nested pages. Indented to the width of the parent's icon plus its gap, so a
   sublist label starts where the parent's label does and the column still
   reads down one axis. */
.nav-sub {
  padding-left: 34px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.nav-sublist[hidden] {
  display: none;
}

/* ── The account block ──────────────────────────────────────────────────────

   Pinned to the bottom. Who you are, what you are called on a rota, and the
   two controls that get set once and then forgotten -- which is exactly why
   neither of them deserved permanent space in the top band. */

.sidebar-account {
  flex: 0 0 auto;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-account .profile-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.sidebar-account .profile-email {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account .profile-hotel {
  font-size: 11px;
  color: var(--muted);
}

.sidebar-account .account-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sidebar-account .account-controls > * {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

/* ── Tema ───────────────────────────────────────────────────────────────────

   Three labelled segments and no icon. Sun-and-moon expresses two states and
   this control has three, so under the old single button Auto had nowhere to
   live and ended up behind a long press nobody could discover. It sits at the
   foot of the sidebar rather than in the header because it is set once and
   then forgotten, and that does not earn permanent space in the top band. */
.theme-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.theme-control-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.theme-option {
  padding: 6px 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.theme-option:hover {
  color: var(--action);
  background: var(--action-soft);
}

.theme-option:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: -2px;
}

/* Which one is on. Gold, because this states what the theme IS rather than
   offering something to do -- and in weight and background as well as colour,
   so it does not rest on colour perception alone. */
.theme-option[aria-pressed="true"] {
  color: var(--gold-2);
  background: var(--gold-soft);
}

/* The two buttons under it. Quiet: both are reached deliberately and neither
   is pressed twice in a shift. */
.sidebar-account .lang-toggle-btn,
.sidebar-account .logout-button-styled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.sidebar-account .lang-toggle-btn:hover {
  color: var(--action);
  border-color: var(--action-border);
}

.sidebar-account .logout-button-styled:hover {
  color: var(--danger);
  border-color: var(--danger-border);
}

.sidebar-account .app-version {
  text-align: center;
  font-size: 10.5px;
  color: var(--muted);
}

/* ── The narrow-screen menu button ──────────────────────────────────────────

   Hidden on a wide screen. Below the breakpoint it is the only way in, which is
   an improvement rather than a fallback: the sidebar it replaces was
   `display: none` under 768px, so a phone had no menu at all. */
.nav-toggle {
  display: none;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] {
  border-color: var(--action-border);
  color: var(--action);
}

.header-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-email {
  color: var(--gold-2);
  font-size: 14px;
  font-weight: 500;
}

/* Which property this session is scoped to. With several hotels on one
   deployment, "whose data am I looking at" should never be a guess. */
.profile-hotel {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

.profile-identity {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.duty-manager-card {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  display: flex;
  gap: 4px;
}

.duty-manager-label { color: var(--muted); }

.duty-manager-value {
  color: var(--gold-3);
  font-weight: 500;
}

.logout-button-styled {
  border: 1px solid var(--border-strong);
  background: var(--gold-soft);
  color: var(--gold-2);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logout-button-styled:hover {
  background: var(--action-border);
  border-color: var(--action);
  color: var(--action-2);
  box-shadow: var(--action-glow);
}

.theme-toggle {
  border: 1px solid var(--border-strong);
  background: var(--action-soft);
  color: var(--action);
  padding: 10px 14px;
  min-width: 96px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: var(--action-border);
  border-color: var(--action);
}

/* Dashboard Grid Layout (for concierge.html and backwards compatibility) */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

/* Main Content Layout */
.dashboard-main {
  grid-area: main;
  padding: 28px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Perfect 3-column Grid for Metric Cards */
.metrics-section {
  width: 100%;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.metrics-grid .dashboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}


.metrics-grid .dashboard-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.metrics-grid .dashboard-card .metric-label {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.metrics-grid .dashboard-card strong {
  font-size: 2.2rem;
  color: var(--text);
  font-weight: 500;
}

/* Generic Card Component */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-md);
}

.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.card h2 {
  color: var(--gold);
  margin-top: 0;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;
}

/* Details Section - Parallel Columns */
.details-section {
  width: 100%;
}

.report-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.details-card {
  composes: card;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-md);
  min-height: 320px;
}

.details-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.details-card h3 {
  color: var(--gold);
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 400;
}

.details-content {
  flex: 1;
  font-size: 14px;
}

/* Secondary Section - Notícias, Eventos, Links */
.secondary-section {
  width: 100%;
}

.secondary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Utilities */
.muted {
  color: var(--muted);
  font-size: 14px;
}

.loading {
  color: var(--gold);
  font-style: italic;
  font-size: 14px;
}

.content-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
}

/* Notícias & Eventos Items */
.noticia-item {
  background: var(--surface-2);
  padding: 16px;
  border-radius: 8px;
  border-left: 3px solid var(--gold);
  transition: 0.2s ease;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.noticia-item:hover {
  border-left-color: var(--gold-3);
  box-shadow: var(--shadow-md);
}

.noticia-item h3 {
  margin: 0 0 6px 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
}

.noticia-date {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
}

.noticia-item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Links List */
.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.link-list a {
  color: var(--text);
  text-decoration: none;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: 8px;
  display: block;
  transition: 0.2s ease;
  border: 1px solid var(--border);
  font-weight: 500;
  font-size: 14px;
}

.link-list a:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-soft);
  box-shadow: var(--gold-glow);
}

/* Report Table Styling */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13.5px;
}

.report-table th {
  color: var(--gold-2);
  font-weight: 500;
  padding: 12px 10px;
  border-bottom: 2px solid var(--gold);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.report-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.report-table tbody tr:last-child td {
  border-bottom: none;
}

/* Zebra Striping */
.report-table tbody tr:nth-child(even) {
  background: var(--row-stripe);
}

.light-theme .report-table tbody tr:nth-child(even) {
  background: var(--row-stripe);
}

/* Row Hover Effect */
.report-table tbody tr:hover {
  background: var(--gold-soft);
}

/* Cell specifics */
.cell-room {
  font-weight: 500;
  color: var(--gold);
}

.cell-pax {
  text-align: center;
}

.report-table th.cell-pax {
  text-align: center;
}

.cell-name strong {
  font-weight: 500;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .metrics-grid,
  .report-details-grid,
  .secondary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    padding: 12px 16px;
  }

  .header-controls {
    gap: 12px;
  }

  .header-datetime {
    display: none;
  }

  .metrics-grid,
  .report-details-grid,
  .secondary-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .dashboard-main {
    padding: 16px;
    gap: 16px;
  }
}

/* Login page styles */
body.login-page {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: var(--text);
}

.login-shell {
  width: 100%;
  max-width: 420px;
  padding: 24px;
}

/* Was a hardcoded dark card with a dark-mode shadow, which stayed dark in
   light theme and put a smudge under it. On paper, surfaces separate with
   a border. */
.login-card {
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.login-header h1 {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 2rem;
}

.login-header p {
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.6;
}

.login-form {
  display: grid;
  gap: 18px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: var(--muted);
}

.input-group input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1rem;
}

.input-group input:focus {
  outline: none;
  border-color: var(--action);
}

.primary-btn {
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 14px;
  background: var(--action);
  color: var(--action-contrast);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px var(--gold-soft);
}

.error-message {
  min-height: 1.4rem;
  color: var(--danger);
  font-size: 0.95rem;
}

.login-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ==========================================================================
   4-Column Dashboard Layout & Tables (Reconstructed)
   ========================================================================== */

.section-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
}

.section-header-block {
  text-align: center;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 20px;
  background: var(--surface-2);
}

.section-header-block h2 {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.section-header-block .section-title-desc {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  margin-top: 4px;
}

/* KPI metric cards row (Ocupação %, Residentes, Chegadas, Saídas) */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

/* Left-aligned, and no hover. Centring made the four figures impossible to
   compare -- the digits started in a different place on every card -- and a
   hover state on something you cannot click is a promise the card does not
   keep. */
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 15px 17px;
}

.kpi-card .kpi-label {
  display: block;
  font-size: 9.5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

/* The line that is the reason the card exists. One line, never wrapped: a
   context that runs to two lines is an explanation, and an explanation belongs
   somewhere a person has chosen to go looking. */
.kpi-context {
  margin-top: 6px;
  min-height: 1.35em;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-context-success { color: var(--success); }
.kpi-context-danger  { color: var(--danger); }

/* Mono with tabular figures, because these four are read as a set and a set
   that does not line up is four separate numbers. */
.kpi-card .kpi-value {
  font-family: var(--font-mono, monospace);
  font-size: 27px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
}

/* 4-column dashboard layout underneath */
.four-column-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Calendar Card & Tables */
.calendar-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.calendar-header span {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--gold-2);
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
}

.calendar-table td {
  width: calc(100% / 7);
  padding: 4px 2px;
  text-align: center;
  font-size: 11px;
}

.calendar-day-header {
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 500;
  border-radius: 4px 4px 0 0;
  padding: 6px 2px;
}

.calendar-day-count {
  background: var(--surface) !important;
  color: var(--text) !important;
  font-weight: 500;
  border-radius: 0 0 4px 4px;
  border: 1px solid var(--border);
  padding: 6px 2px;
}

/* Financial Card (Col 3) - Gold/Yellow styling */
.financials-card {
  background: var(--gold-soft);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.financials-table {
  width: 100%;
  border-collapse: collapse;
}

.financials-table tr {
  border-bottom: 1px solid var(--gold-soft);
}

.financials-table tr:last-child {
  border-bottom: none;
}

.financials-table td {
  padding: 12px 6px;
  font-size: 13px;
}

.financials-table td.fin-label {
  font-weight: 500;
  color: var(--text);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.financials-table td.fin-value {
  text-align: right;
  font-weight: 500;
  color: var(--gold-2);
}

/* Show rooms & status column (Col 4) */
.col4-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.showroom-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  flex: 1;
}

.showroom-card h4 {
  margin: 0 0 10px 0;
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--gold);
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.showroom-table {
  width: 100%;
  border-collapse: collapse;
}

.showroom-table td {
  padding: 6px 8px;
  font-size: 12px;
}

.showroom-table tr {
  border-bottom: 1px solid var(--border);
}

.showroom-table tr:last-child {
  border-bottom: none;
}

.showroom-type {
  font-weight: 500;
  color: var(--muted);
}

.showroom-value {
  text-align: right;
  font-weight: 500;
  color: var(--text);
}

.status-placeholder-card {
  background: linear-gradient(135deg, var(--success), var(--success));
  border-radius: 12px;
  height: 120px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--success);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 10px;
}

/* Block 2: Statistical & Budget table */
.stats-table-container {
  width: 100%;
  overflow-x: auto;
}

.stats-budget-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text);
}

.stats-budget-table th {
  padding: 12px;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 2px solid var(--border-strong);
  text-align: center;
}

.stats-budget-table th:first-child {
  text-align: left;
}

.stats-budget-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.stats-budget-table td:first-child {
  text-align: left;
  font-weight: 500;
}

/* Category headers */
.category-header-row {
  background: transparent;
}

.category-header-cell {
  text-align: center !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 12px !important;
  border-bottom: 2px solid var(--border);
}

/* Alojamento Category Color (Teal Green) */
.alojamento-header {
  color: var(--action-contrast);
  background-color: var(--cat-aloj) !important;
}

.alojamento-total-row {
  background-color: transparent !important;
  font-weight: 500;
}
.alojamento-total-row td {
  border-top: 1.5px solid var(--cat-aloj);
  border-bottom: 1.5px solid var(--cat-aloj);
}

/* F&B Category Color (Blue) */
.fb-header {
  color: var(--action-contrast);
  background-color: var(--cat-fb) !important;
}

.fb-total-row {
  background-color: transparent !important;
  font-weight: 500;
}
.fb-total-row td {
  border-top: 1.5px solid var(--cat-fb);
  border-bottom: 1.5px solid var(--cat-fb);
}

/* Diversos Category Color (Grey) */
.diversos-header {
  color: var(--action-contrast);
  background-color: var(--cat-div) !important;
}

.diversos-total-row {
  background-color: transparent !important;
  font-weight: 500;
}
.diversos-total-row td {
  border-top: 1.5px solid var(--cat-div);
  border-bottom: 1.5px solid var(--cat-div);
}

/* Total Geral Row (Yellow/Orange) */
.total-geral-row {
  background-color: var(--cat-total) !important;
  color: var(--action-contrast) !important;
  font-weight: 500;
}
.total-geral-row td {
  border-top: 2px solid var(--cat-total);
  border-bottom: 2px solid var(--cat-total);
  padding: 14px 12px !important;
}

/* Media Queries for Responsiveness */
@media (max-width: 1200px) {
  .four-column-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .four-column-grid {
    grid-template-columns: 1fr;
  }
  .kpi-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Checklist and Cash Counting Integration (styles from ChecklistApp)
   ========================================================================== */

/* Tabs Navigation styling if needed */
.tabs-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 12px 24px;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  font-size: 16px;
  transition: 0.3s;
  font-family: inherit;
}

.tab-btn:hover {
  background: var(--surface-2);
  color: var(--gold);
}

.tab-btn.active {
  background: var(--gold);
  color: var(--text);
  border-color: var(--gold);
  font-weight: 500;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Phase and final button styles */
.phase-btn, .final-btn, .pdf-btn, .secondary-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: .25s ease;
  font-family: inherit;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.phase-btn {
  margin-top: 10px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}

.phase-btn:hover {
  background: var(--surface);
  box-shadow: var(--shadow-md);
  border-color: var(--gold) !important;
  transform: translateY(-1px);
}

.phase-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 8px var(--gold-soft);
}



.phase-content {
  display: none;
  background: var(--surface-2);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 18px;
  margin-top: 8px;
  animation: phaseOpen .25s ease forwards;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

@keyframes phaseOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Inputs in checklist/caixa forms */
.form-select, .form-input, .form-textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 8px;
  color: var(--text);
  margin-top: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.3s ease;
}

.form-select:focus, .form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--action);
  box-shadow: var(--action-glow);
  background: var(--surface);
}

.form-select option {
  background: var(--surface);
  color: var(--text);
}

/* Checklist specific */
li.check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  line-height: 1.5;
  border-radius: 8px;
  padding: 8px 12px;
  transition: .2s ease;
  border: 1px solid transparent;
}

li.check-item:hover {
  background: var(--row-stripe);
  border-color: var(--border);
}

/* Red alone is not a signal for everyone who works a front desk. The row also
   carries a mark, so "you have missed this" is in shape as well as colour and
   is announced rather than only shown. */
li.unchecked-warning {
  background: var(--danger-soft) !important;
  border-color: var(--danger) !important;
}

.check-warning-mark {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  color: var(--danger);
}

li.optional-item {
  background: var(--gold-soft);
  border: 1px dashed var(--gold-soft);
}

.optional-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-2);
  border: 1px solid var(--gold-soft);
  font-weight: 500;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0 16px;
  color: var(--muted);
  font-size: 13px;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-mark {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--gold-soft);
  border: 1px dashed var(--gold-soft);
  display: inline-block;
}

/* `font-weight: bold` and `font-size: 12px` are gone with the character they
   were sizing. The ring stays: this button is a target as much as a mark, and
   24px of circle is what makes it reliably hittable on a touch screen. */
.help-btn {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--action);
  background: transparent;
  color: var(--action);
  cursor: pointer;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: all 0.2s ease;
}

.help-btn:hover {
  background: var(--action-border);
}

.help-btn[aria-expanded="true"] {
  background: var(--gold-soft);
  color: var(--text);
}

.check-wrap {
  display: block;
  flex: 1;
}

.check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  flex: 1;
}

.check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  cursor: pointer;
  accent-color: var(--gold);
}

.item-text {
  flex: 1;
  font-size: 14px;
}

.help-text {
  display: none;
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  color: var(--muted);
  font-size: 13.5px;
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
}

.help-text.open {
  display: block;
}

.path-box {
  background: var(--bg);
  border: 1px dashed var(--gold-soft);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: monospace;
  font-size: 13px;
}

.download-links {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.download-links a {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  display: inline-block;
  font-size: 13.5px;
  transition: all 0.2s ease;
}

.download-links a:hover {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: var(--gold-glow);
}

.actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
}

.final-btn {
  background: var(--gold);
  color: var(--action-contrast);
}

.final-btn:hover {
  background: var(--gold-2);
  box-shadow: var(--gold-glow);
}

.pdf-btn {
  background: var(--success);
  color: var(--text);
}

.pdf-btn:hover {
  filter: brightness(1.1);
  box-shadow: none;
}

.secondary-btn {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

.secondary-btn:hover {
  background: var(--surface);
  color: var(--text);
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.section-note {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: -4px;
  margin-bottom: 12px;
}

.footer-note {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 10px;
}

.section-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
  padding: 10px 14px;
  background: var(--row-stripe);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.bulk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}

.bulk-toggle input[type="checkbox"] {
  accent-color: var(--gold);
}

.phase-btn[aria-expanded="true"] {
  background: var(--surface);
}

.checklist-continua {
  background: var(--surface-2);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 18px;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.checklist-continua .section-header {
  color: var(--gold);
  font-size: 15px;
  font-weight: 500;
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.checklist-continua .section-header:first-child {
  margin-top: 0;
}

/* Cashier specific */
.cash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.cash-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-2);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.cash-table th, .cash-table td {
  padding: 12px;
  border: 1px solid var(--border);
  text-align: left;
  font-size: 14px;
}

.cash-table th {
  background: var(--row-stripe);
  color: var(--gold-2);
  font-weight: 500;
}

.cash-table .row-total {
  text-align: right;
  color: var(--gold);
  font-weight: bold;
  min-width: 100px;
  font-size: 14px;
}

.cash-table input {
  margin: 0;
  padding: 8px;
  width: 90px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
}

.cash-table input:focus {
  outline: none;
  border-color: var(--action);
  box-shadow: var(--action-glow);
}

.dynamic-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  border: 1px solid var(--border);
}

.dynamic-table th {
  background: var(--row-stripe);
  color: var(--gold-2);
  padding: 12px;
  border: 1px solid var(--border);
  font-size: 13.5px;
}

.dynamic-table td {
  padding: 8px 12px;
  border: 1px solid var(--border);
}

.dynamic-table input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  padding: 6px;
  font-family: inherit;
  font-size: 13.5px;
}

.dynamic-table input:focus {
  border-color: var(--action);
  background: var(--surface-2);
  outline: none;
  border-radius: 4px;
}

.total-row {
  font-size: 18px;
  font-weight: bold;
  color: var(--gold);
  text-align: right;
  padding: 16px;
  background: var(--gold-soft);
  border-radius: 8px;
  margin-top: 16px;
  border: 1px solid var(--gold);
}

.dropdown-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 10px;
  margin-left: auto;
  color: var(--muted);
}

.lang-toggle-btn {
  border: 1px solid var(--border-strong);
  background: var(--action-soft);
  color: var(--action);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  letter-spacing: 0.05em;
  font-family: inherit;
}

.lang-toggle-btn:hover {
  background: var(--action-border);
  border-color: var(--action);
  box-shadow: var(--action-glow);
}

.theme-toggle {
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

/* ==========================================================================
   Content Management System & Notification Center Styles
   ========================================================================== */

/* Notification Bar */
.notification-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px 24px !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 24px;
}

.notification-bar-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-right: 1px solid var(--border-strong);
  padding-right: 20px;
  margin: 0;
}

/* ── Notification hub ──────────────────────────────────────────────────────
   One bell rather than four icons. The popover is anchored to the bell, so it
   is positioned relative to the hub rather than the viewport. */
.notification-hub {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.notification-bell {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.notification-bell:hover,
.notification-bell[aria-expanded="true"] {
  transform: translateY(-2px);
  border-color: var(--action);
  box-shadow: var(--action-glow);
  color: var(--action);
}

/* Count, not just a dot -- "three unread" and "one unread" are different
   amounts of urgency at 04:00. */
.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--danger);
  color: var(--action-contrast);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  border: 2px solid var(--surface-2);
  border-radius: 9px;
  box-shadow: none;
}

.notification-badge[hidden] { display: none; }

.notification-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 200;
  width: min(420px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.notification-popover[hidden] { display: none; }

.notification-popover-arrow {
  position: absolute;
  top: -6px;
  right: 15px;
  width: 11px;
  height: 11px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}

/* Wraps, because these are words now rather than five 16px glyphs. Five
   categories and a labelled action do not fit one 420px line in every
   language, and a filter row that overflows is a filter you cannot reach. */
.notification-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.notif-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.notif-filter:hover { color: var(--text); }

.notif-filter.is-active {
  color: var(--action);
  border-color: var(--action);
  background: var(--action-soft);
}

.notif-mark-read {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notif-mark-read:hover { color: var(--action); }

.notification-popover-body {
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
}

.notification-empty {
  color: var(--muted);
  text-align: center;
  padding: 26px 0;
  font-size: 13px;
}

/* Unread carries a gold rail on the leading edge. Colour alone would fail for
   anyone who cannot distinguish it, so unread items also sit on a raised
   surface. */
.notification-item-card.is-unread {
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
}

/* Premium Notification Pop-up Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--scrim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  width: 90%;
  max-width: 550px;
  max-height: 80vh;
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.modal-overlay.show .modal-container {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  color: var(--gold);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  transition: color 0.2s ease;
  line-height: 1;
}

.modal-close-btn:hover {
  color: var(--gold);
}

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notification-item-card {
  background: var(--surface-2);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  transition: all 0.2s ease;
}

.notification-item-card:hover {
  border-color: var(--border-strong);
  transform: translateX(4px);
}

.notification-item-card h4 {
  margin: 0 0 6px 0;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 400;
}

.notification-item-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}

.notification-item-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.notification-read-more {
  font-size: 12px;
  color: var(--action);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.notification-read-more:hover {
  color: var(--gold-2);
  text-decoration: underline;
}

/* CMS Page Forms */
.cms-select-group {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cms-select-group label {
  font-weight: 500;
  color: var(--gold);
  font-size: 14px;
}

.cms-select {
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.cms-select:focus {
  border-color: var(--action);
  box-shadow: var(--action-glow);
}

.cms-form-card {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  display: none;
}

.cms-form-card.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.cms-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.cms-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.cms-input-group label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
}

.cms-input,
.cms-textarea {
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all 0.3s ease;
}

.cms-input:focus,
.cms-textarea:focus {
  border-color: var(--action);
  background: var(--surface);
  box-shadow: var(--action-glow);
}

.cms-alert {
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
  display: none;
  font-weight: 500;
  animation: phaseOpen 0.3s ease;
}

.cms-alert-success {
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  color: var(--success);
}

.cms-alert-error {
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  color: var(--danger);
}

/* ==========================================================================
   Luxury Golden Shine Hover & Click Animation for Buttons
   ========================================================================== */
.final-btn, .pdf-btn, .secondary-btn, .primary-btn, .logout-button-styled, .lang-toggle-btn, .theme-toggle, #btn-publicar {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#btn-publicar {
  border: 1px solid transparent !important;
}

.final-btn:hover, .pdf-btn:hover, .secondary-btn:hover, .primary-btn:hover, .logout-button-styled:hover, .lang-toggle-btn:hover, .theme-toggle:hover, #btn-publicar:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--gold) !important;
  transform: translateY(-1px);
}

.final-btn:active, .pdf-btn:active, .secondary-btn:active, .primary-btn:active, .logout-button-styled:active, .lang-toggle-btn:active, .theme-toggle:active, #btn-publicar:active {
  transform: translateY(1px);
  box-shadow: 0 0 8px var(--gold-soft) !important;
}


/* ==========================================================================
   Shift Checklist Gold Blink & Sticky Progress Bar Styles
   ========================================================================== */

/* Gold Blink animation for row */
@keyframes goldRowBlink {
  0% {
    background: var(--gold-soft);
  }
  30% {
    background: var(--gold-soft);
    box-shadow: inset 0 0 15px var(--gold-soft);
  }
  100% {
    background: var(--gold-soft);
  }
}

.check-item.gold-blink {
  animation: goldRowBlink 0.8s ease-out;
}

/* Progress bar container sticky configuration */
.checklist-progress-container {
  position: sticky;
  top: 76px; /* Sticky layout below the header (approx. 72px) */
  z-index: 8;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar-track {
  flex: 1;
  height: 10px;
  background: var(--row-stripe);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 50%, var(--gold-3) 100%);
  border-radius: 999px;
  box-shadow: 0 0 12px var(--gold-soft);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-text {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gold-2);
  min-width: 105px;
  text-align: right;
  letter-spacing: 0.03em;
}



/* ── Rich text output ──────────────────────────────────────────────────────
   Styles the tags js/richtext.js emits. Nothing here is reachable by anything
   an author types: the renderer only ever produces these tags itself. */
.rich-text p {
  margin: 0 0 8px;
  line-height: 1.55;
}

.rich-text p:last-child { margin-bottom: 0; }

.rich-text strong { color: var(--text); font-weight: 500; }
.rich-text em { font-style: italic; }

.rich-text code {
  background: var(--gold-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9em;
}

.rich-text a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rich-text a:hover { color: var(--action-2); }

.rich-text ul,
.rich-text ol {
  margin: 0 0 8px;
  padding-left: 20px;
}

.rich-text li { margin-bottom: 3px; line-height: 1.5; }

/* ── Markdown editor ───────────────────────────────────────────────────────── */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}

.editor-tool {
  min-width: 30px;
  height: 28px;
  padding: 0 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.editor-tool:hover {
  color: var(--action);
  border-color: var(--border-strong);
  background: var(--action-soft);
}

.editor-tool-italic { font-style: italic; }
.editor-tool-code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }

.editor-hint {
  margin-left: auto;
  padding-right: 4px;
  color: var(--muted);
  font-size: 11px;
  opacity: 0.75;
}

/* The textarea sits directly under the toolbar, so square off the shared edge. */
.editor-toolbar + textarea {
  border-radius: 0 0 6px 6px !important;
  margin-bottom: 0 !important;
}

.editor-preview-label {
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.editor-preview {
  margin-top: 6px;
  padding: 12px 14px;
  min-height: 54px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  color: var(--text);
  font-size: 13.5px;
}

.editor-preview-empty { color: var(--muted); font-style: italic; margin: 0; }

/* ── Comunicados: the announcement archive ─────────────────────────────────── */
.comunicados-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 14px;
}

.comunicados-toolbar .form-input {
  flex: 1 1 260px;
  margin-bottom: 0;
}

.comunicados-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.comunicados-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.comunicado-filter {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.comunicado-filter:hover { color: var(--text); border-color: var(--border-strong); }

.comunicado-filter.is-active {
  color: var(--action);
  border-color: var(--action);
  background: var(--action-soft);
}

.comunicados-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.comunicado-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 9px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.3s ease;
}

.comunicado-card:hover { border-color: var(--border-strong); }

.comunicado-card.is-unread { border-left-color: var(--gold); }
.comunicado-card.is-expired { opacity: 0.62; }

/* Arrival cue when opened from a notification. Fades: it marks a moment,
   not a state. */
.comunicado-card.is-focused {
  box-shadow: 0 0 0 2px var(--gold), var(--gold-glow);
}

/* The whole summary row is the control, so the hit target is the card rather
   than a chevron someone has to aim at. */
.comunicado-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 16px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.comunicado-summary:hover { background: var(--gold-soft); }

/* Unread marker. The left rail carries the same information, so this is
   reinforcement rather than the only signal. */
.comunicado-unread-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold-soft);
}

.comunicado-unread-dot[hidden] {
  display: block;
  visibility: hidden;   /* keeps the row aligned with read items */
}

.comunicado-summary-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.comunicado-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comunicado-card.is-unread .comunicado-title { color: var(--gold-2); }

.comunicado-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 11px;
}

.comunicado-role {
  color: var(--gold-2);
  font-weight: 500;
}

.comunicado-role::before {
  content: '·';
  margin-right: 8px;
  color: var(--muted);
}

.comunicado-category {
  flex-shrink: 0;
  padding: 2px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--gold-2);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* One shape for both states. It was + when closed and − when open, which are
   arithmetic signs standing in for a direction -- and two different glyphs, so
   the row's width changed as you opened it. A chevron rotates instead. */
.comunicado-chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.comunicado-summary[aria-expanded="true"] .comunicado-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .comunicado-chevron,
  .dropdown-arrow { transition: none; }
}

/* Centres the mark in the card rather than leaving it on a text baseline: the
   div around it is no longer a line of type. */
.status-placeholder-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}

.comunicado-expired-tag {
  color: var(--danger);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.comunicado-body {
  padding: 2px 16px 16px 46px;
  font-size: 13.5px;
  border-top: 1px solid var(--border);
  margin-top: -1px;
  padding-top: 14px;
}

.comunicado-body[hidden] { display: none; }

/* ── Compact icon buttons ──────────────────────────────────────────────────── */
.icon-btn,
.comunicados-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--action-soft);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: var(--action);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.icon-btn:hover,
.comunicados-new:hover {
  background: var(--action-border);
  border-color: var(--action);
  color: var(--action-2);
}

.comunicados-new[hidden] { display: none; }

/* It used to be an open envelope on its own, on the argument that the shape
   reads as "mark read" from email. It does not: an envelope is the thing that
   arrived, not the act of dismissing it, and the only place its meaning was
   written down was a `title` that a touch screen never shows. A check beside
   the words is one glyph fewer and says what it does. */
.notif-mark-read {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.notif-mark-read:hover { color: var(--gold-2); }

.comunicados-more {
  align-self: center;
  margin: 18px auto 0;
  display: block;
  width: auto;
  height: auto;
  padding: 8px 16px;
  border-radius: 7px;
  line-height: 1.4;
}

/* ── Comunicados: archive layout ───────────────────────────────────────────── */
.comunicados-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.comunicados-new {
  flex-shrink: 0;
  text-decoration: none;
  padding: 10px 16px;
  font-size: 13px;
  white-space: nowrap;
}

.comunicados-new[hidden] { display: none; }

.comunicados-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .comunicados-layout { grid-template-columns: 1fr; }
}

.comunicados-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Borrows .help-btn for its colours and then undoes its geometry: that class
   is a 24px circle for a single mark, and this is a full-width control with a
   glyph and two words in it. */
.comunicados-clear {
  width: 100%;
  height: auto;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.4;
}

/* ── Calendar ──────────────────────────────────────────────────────────────── */
.comunicados-calendar {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cal-month {
  color: var(--gold-2);
  font-size: 12.5px;
  font-weight: 500;
  text-transform: capitalize;
}

/* The month arrows are the portal's own chevron, rotated a quarter turn each
   way. They were the single-angle quotation marks -- typography sitting on a
   text baseline, a different weight from the rail around them, and a different
   shape in every font. A left and a right glyph would have been two more icons
   in a set whose whole point is that there are not many. */
.cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  line-height: 0;
  cursor: pointer;
}

.cal-prev .icon { transform: rotate(90deg); }
.cal-next .icon { transform: rotate(-90deg); }

.cal-nav:hover { color: var(--action); border-color: var(--action); }

.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-weekdays span {
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  padding-bottom: 4px;
}

.cal-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.cal-cell.is-empty { cursor: default; }

/* Days with nothing are not clickable, and should not invite a click. */
.cal-cell:disabled { opacity: 0.35; cursor: default; }

.cal-cell.has-posts { color: var(--text); }
.cal-cell.has-posts:hover { border-color: var(--action); background: var(--action-soft); }

.cal-cell.is-today { border-color: var(--border-strong); }

.cal-cell.is-selected {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-contrast);
}

.cal-cell.is-selected .cal-dot { background: var(--action-contrast); }

/* The mark itself. Presence of posts is also carried by the brighter text
   colour, so it does not rest on a 4px dot alone. */
.cal-dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.comunicados-active-day {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: var(--gold-soft);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: var(--gold-2);
  font-size: 12.5px;
  font-weight: 500;
  text-transform: capitalize;
}

.comunicados-active-day[hidden] { display: none; }

.comunicados-day-clear {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--action);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.comunicados-day-clear:hover { color: var(--action-2); }

/* ── Likes ─────────────────────────────────────────────────────────────────── */
.comunicado-detail[hidden] { display: none; }

.comunicado-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 14px 46px;
  border-top: 1px solid var(--border);
}

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.like-btn:hover {
  color: var(--action);
  border-color: var(--border-strong);
  background: var(--action-soft);
}

/* Liked state carries fill, colour and border together, so it does not depend
   on colour perception alone. */
.like-btn.is-liked {
  color: var(--action);
  border-color: var(--action);
  background: var(--action-soft);
}

.like-count { font-variant-numeric: tabular-nums; }

/* Count on the collapsed row, so a well-received post is visible while
   scanning. */
.comunicado-likes {
  color: var(--gold-2);
  font-weight: 500;
}

/* ── Passagem de Turno ─────────────────────────────────────────────────────── */

/* The previous shift's note is the thing you must read before anything else,
   so it leads the page and carries a gold rail to say so. */
.handover-previous {
  border-left: 3px solid var(--gold);
}

.handover-previous-heading {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--gold-2);
  text-transform: capitalize;
}

.handover-previous-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 11.5px;
}

.handover-previous-body {
  font-size: 14px;
  line-height: 1.6;
}

.handover-empty {
  color: var(--muted);
  font-style: italic;
  margin: 6px 0 0;
  font-size: 13px;
}

.handover-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.handover-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.handover-status {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

.handover-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.handover-history-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.handover-history-filters .form-select { width: auto; min-width: 130px; }
.handover-history-filters .form-input { width: auto; min-width: 200px; }

.handover-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.handover-entry {
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.handover-entry-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.handover-entry-shift {
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--gold-2);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.handover-entry-date {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  text-transform: capitalize;
}

.handover-entry-author {
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
}

.handover-entry-body { font-size: 13.5px; }

/* ── Member function, shown and edited from the sidebar ────────────────────── */
.profile-role-btn {
  margin-top: 2px;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--border-strong);
  color: var(--action);
  font-size: 11px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.profile-role-btn:hover {
  color: var(--action-2);
  border-bottom-color: var(--action);
}

/* Not yet set: reads as an invitation rather than as data. */
.profile-role-btn.is-unset {
  color: var(--muted);
  font-style: italic;
  font-weight: 500;
}

/* ── Dashboard: which report is on screen, and the way back to earlier ones ── */
.dashboard-report-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
}

.dashboard-report-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

.dashboard-history-link {
  color: var(--action);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.dashboard-history-link:hover {
  color: var(--action-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Início: what leads the screen ──────────────────────────────────────────

   A 330px block and then everything else. The front page used to be a grid of
   equal-weight cards, which is a layout that says every one of these matters
   the same amount -- and on a shift-handover screen that is simply false. */

.inicio-lead {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 24px;
}

.turno-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 17px 19px;
}

.turno-head {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}

.turno-title {
  margin: 0;
  font-family: var(--font-display, Prata, Georgia, serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
}

/* Which shift, and its hours. Mono because it is a fact to be checked rather
   than prose to be read -- and because at 23:04 the question "am I looking at
   my own shift" has to be answerable without thinking. */
.turno-when {
  margin-top: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--muted);
}

.turno-rows {
  list-style: none;
  margin: 0;
  padding: 13px 0 0;
}

.turno-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text);
}

/* Done is the action colour, outstanding is gold. The same two marks the
   status line uses everywhere else, so the meaning arrives already learned. */
.turno-row .icon-gold { color: var(--gold); }
.turno-row .icon:not(.icon-gold) { color: var(--action); }

.turno-foot {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

/* The one filled button on the screen, and only when there is exactly one
   thing left to do. When two things are open there is no "next", and inventing
   one to make the block look finished would be worse than an empty footer. */
.turno-next {
  display: block;
  padding: 9px 14px;
  border-radius: 7px;
  background: var(--action);
  color: var(--action-contrast);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.turno-next:hover { background: var(--action-2); }

.turno-next:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .inicio-lead {
    grid-template-columns: 1fr;
  }
}

/* ── Início: the reference row ──────────────────────────────────────────────

   Notícias, Eventos and Links are consulted, not acted on. They keep their
   place at the bottom of the page and lose their claim on attention: a quieter
   surface, no border emphasis, and headings at the weight of a caption rather
   than of a section. Nothing here is a decision anybody makes at the desk. */

.secondary-section .card {
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
}

.secondary-section .card h2 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.secondary-section .card h2 .icon {
  color: var(--muted);
}

/* ── Row actions ────────────────────────────────────────────────────────────

   One component, every table. The action that finishes a row is a button; the
   rest live behind the dots. See js/row-actions.js for why that split, and why
   the dots are drawn on every row rather than revealed on hover. */

.row-actions-cell,
.row-actions-head {
  width: 150px;
  text-align: right;
  white-space: nowrap;
}

.row-actions-cell > * + * {
  margin-left: 6px;
}

/* Outlined, never filled. A table can hold thirty of these, and a column of
   filled buttons is a wall -- the point of the button is that it is reachable
   in one click, not that it shouts. */
.row-action-primary {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.row-action-primary:hover {
  border-color: var(--action);
  background: var(--action-soft);
  color: var(--action);
}

/* Always drawn, never revealed. Muted is quiet; absent is a secret, and a
   control that appears only under a pointer does not exist on a touch screen
   at all. The row brings them up to full contrast on hover or focus. */
.row-action-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

tr:hover .row-action-dots,
tr:focus-within .row-action-dots,
.row-action-dots:hover,
.row-action-dots[aria-expanded="true"] {
  color: var(--text);
  background: var(--surface-2);
}

.row-action-primary:focus-visible,
.row-action-dots:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

/* 44px of target wherever the pointer is not fine, without growing the cell on
   a desktop where 28px is already comfortable and 44 would be loud. */
@media (pointer: coarse) {
  .row-action-dots {
    width: 44px;
    height: 44px;
  }
}

.row-action-panel {
  position: fixed;
  z-index: 300;
  min-width: 200px;
  max-width: 280px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.row-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 34px;
  padding: 8px 11px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.row-action-item:hover,
.row-action-item:focus {
  background: var(--surface-2);
  outline: none;
}

/* Shown, not removed. A menu whose contents change per user cannot be taught
   over the phone -- "the third one down" has to be true for everybody,
   including the person who is not allowed to click it. The reason lives in the
   title attribute, which is where a hover goes looking for it. */
.row-action-item[aria-disabled="true"] {
  color: var(--muted);
  cursor: not-allowed;
}

.row-action-item[aria-disabled="true"]:hover {
  background: transparent;
}

.row-action-item.is-destructive {
  color: var(--danger);
}

.row-action-item.is-destructive:hover,
.row-action-item.is-destructive:focus {
  background: var(--danger-soft);
}

/* The arrow that says you are leaving the row behind. */
.row-action-item .icon {
  color: var(--muted);
}

.row-action-separator {
  height: 1px;
  margin: 5px 11px;
  background: var(--border);
}

/* A record's tab, marked because its name is a person rather than a page. */
.tab-icon {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  line-height: 0;
}

/* ── Feedback: toasts, inline messages, confirmations, status ─────────────────
   Replaces alert()/confirm()/prompt(). See js/feedback.js for why. */

.toast-host {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(380px, calc(100vw - 40px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  /* Icon and words on one baseline, and the icon never squeezed by a long
     message: `align-items: flex-start` keeps it against the first line rather
     than floating to the middle of a three-line error. */
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  animation: toast-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.toast.is-leaving {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-success { border-left-color: var(--success); }
.toast-error   { border-left-color: var(--danger); }
.toast-info    { border-left-color: var(--gold); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.is-leaving { transition: none; }
}

/* Inline messages sit next to what failed, so the message and the field are
   readable at the same time -- which a modal cannot do. */
.inline-message {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 6px 0 0;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
}

.inline-error {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
}

.inline-success {
  color: var(--success);
  background: var(--success-soft);
  border: 1px solid var(--success-border);
}

.inline-info {
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* ── Confirmation dialog ─────────────────────────────────────────────────── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--scrim);
  backdrop-filter: blur(2px);
}

.confirm-dialog {
  width: min(460px, 100%);
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
}

.confirm-title {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--text);
}

.confirm-body {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.confirm-cancel,
.confirm-ok {
  padding: 9px 18px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font-family: inherit;
}

.confirm-cancel:hover { border-color: var(--action); color: var(--action); }

/* Teal, not gold. Gold says what a thing IS and this is a thing you can DO --
   the one rule the whole visual system rests on, broken in about the most
   visible place there is. */
.confirm-ok {
  background: var(--action-soft);
  border-color: var(--action-border);
  color: var(--action);
}

.confirm-ok:hover { background: var(--action-border); }

/* Destructive confirmations are visually distinct from routine ones, so the
   two never look like the same click -- outlined, never filled. Marking a
   no-show is legitimate work, not something to be celebrated or warned away
   from, and a solid red button manages to do both at once. */
.confirm-ok.is-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.confirm-ok.is-danger:hover { background: var(--danger-soft); }

/* Optional, and visible. Mandatory justification collects a full stop typed by
   reflex; a field somebody may ignore collects a real sentence often enough to
   be worth reading afterwards. */
.confirm-reason {
  display: block;
  margin-top: 4px;
}

.confirm-reason-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.confirm-reason-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

.confirm-reason-input:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: -1px;
}

/* The way back out of a reversible act. It sits inside the toast, which is why
   a toast carrying one does not dismiss on click -- see js/feedback.js. */
.toast-action {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--action-border);
  border-radius: 6px;
  background: transparent;
  color: var(--action);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.toast-action:hover { background: var(--action-soft); }

/* ── Status line ─────────────────────────────────────────────────────────────
   State, not an event: it stays true until it changes. */
.status-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.status-pending { color: var(--muted); }
.status-ok      { color: var(--success); }
.status-error   { color: var(--danger); }
/* Transparent rather than hidden, so the line keeps its height and nothing
   below it jumps when a save finishes. There is no glyph in this state -- an
   icon at `color: transparent` is still a hole in the layout. */
.status-idle    { color: transparent; }

/* Row delete buttons in the cash tables and the daily report. Was an inline
   style repeating a hex literal in five template strings -- and in three of
   them the colour it named, --red, had stopped existing at the token refactor.
   The glyph was a capital X in two of them and U+00D7 in the other three: two
   different characters doing the same job, neither of them a drawing. */
.btn-delete-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  margin: 0 !important;
  line-height: 0;
}

.btn-delete-row:hover {
  background: var(--danger-soft) !important;
}

/* ── Empty states ────────────────────────────────────────────────────────────
   An empty screen with no explanation reads as broken. These say what happened
   and what happens next. */
.empty-state {
  border-left: 3px solid var(--gold);
  gap: 8px;
}

.empty-state-title {
  margin: 0;
  font-size: 17px;
  color: var(--gold-2);
}

.empty-state-body {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.empty-state-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* ── Gestão de Conteúdo ──────────────────────────────────────────────────────
   This page carried ten inline style attributes with hardcoded hex values, so
   it ignored the theme entirely and stayed dark even in light mode. */
.cms-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 25px;
}

.cms-heading {
  color: var(--gold-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-top: 0;
}

.cms-label {
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
}

.cms-field {
  width: 100%;
  padding: 12px;
}

textarea.cms-field { resize: vertical; }

.cms-submit {
  width: 100%;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cms-success {
  padding: 15px;
  border-radius: 8px;
  color: var(--success);
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  font-weight: 500;
  font-size: 13.5px;
}

.cms-success[hidden] { display: none; }

/* ── Field help ──────────────────────────────────────────────────────────────
   Generalises the checklist's `?` pattern. Nothing is explained until asked,
   so the screen stays clear for someone who knows the field and nobody has to
   be taught it by a colleague. See js/help.js. */
/* No ring of its own. `circle-help` draws the circle and the question mark on
   one grid at one stroke weight; the old button drew a CSS border around a
   typed character, so the ring and the glyph inside it came from two different
   places and never quite agreed. */
.field-help-btn {
  margin-left: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--action);
  line-height: 0;
  cursor: pointer;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.field-help-btn:hover {
  color: var(--action-2);
}

.field-help-btn:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

/* Gold rail, not teal: the explanation is information about the field, not
   something you can act on. */
.field-help-text {
  margin: 7px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 0 6px 6px 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.field-help-text[hidden] { display: none; }

/* Version, in the sidebar footer. Deliberately quiet -- it exists so a
   screenshot can answer "which version are you running" without anyone
   checking a deploy log. */
.app-version {
  display: block;
  text-align: center;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.65;
  letter-spacing: 0.04em;
}

/* ── Environment marker ──────────────────────────────────────────────────────
 *
 * Shown on every page that is not talking to production. A test environment
 * you cannot tell apart from the real one invites the exact mistake it exists
 * to prevent -- typing a real shift into it, or trusting a figure read out of
 * it. The portal looks identical either way, so something has to say so.
 *
 * The label is read from the attribute rather than written here, so a third
 * environment needs no new rule. Fixed and pointer-events: none, so it cannot
 * cover a control or swallow a click on any screen, including the narrow ones.
 */
body[data-environment]::after {
  content: attr(data-environment);
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  pointer-events: none;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  color: var(--warning);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── The header at narrower widths ──────────────────────────────────────────

   Placed at the end of the file deliberately. These are overrides of the base
   rules above, and CSS resolves a tie by source order -- put them earlier and
   the base rules would win at every width.  */

/* The clock is the first thing to go. It is pleasant rather than necessary,
   and the property name is not. */
@media (max-width: 1180px) {
  .header-datetime {
    display: none;
  }
}

/* ── The drawer ─────────────────────────────────────────────────────────────

   Below 900px the sidebar stops being a column beside the content and becomes
   a drawer over it, opened by the only button that may enter the header -- and
   only at this width, because above it the sidebar is simply there and a
   button that opens what is already open is a lie.

   Nothing is removed. The list, the account block and the theme control are
   the same ones, in the same order, so what somebody learned at the desk still
   holds on a phone. This is a desk application and the phone is a fallback,
   not a target. */
@media (max-width: 900px) {
  .dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main";
  }

  .nav-toggle {
    display: inline-flex;
  }

  .dashboard-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(280px, 86vw);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: var(--shadow-pop);
    z-index: 60;
  }

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

  /* Bigger targets on the device where aiming is hardest. */
  .nav-link {
    padding: 13px 20px;
    font-size: 14.5px;
  }

  .nav-sublist a {
    padding-left: 52px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-sidebar {
    transition: none;
  }
}

/* ── The context strip on the front page ────────────────────────────────────

   Weather and who is on duty. Both were in the sidebar footer, on every page;
   they are information rather than navigation, so they sit with the content
   they describe instead of in the chrome. */
.context-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px;
}

.context-strip .weather-text {
  color: var(--muted);
}

.context-strip .duty-manager-card {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
}

/* ── The workspace ──────────────────────────────────────────────────────────

   index.html holds the header, the open tabs and the frames those tabs show.
   Everything else in the portal is loaded inside it, unchanged. */

/* The same two columns, with the tab band between header and content. The
   sidebar spans all three rows, so the band starts at the content edge and
   never runs under the column. */
.workspace {
  grid-template-columns: 230px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar tabs"
    "sidebar main";
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 900px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "tabs"
      "main";
  }
}

/* The band sits directly under the header and spans the content area only --
   never under the sidebar, which owns its column all the way down. 36px, and
   --surface-deep so it reads as behind the content rather than on it. */
.tab-strip {
  grid-area: tabs;
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 36px;
  padding: 0 12px;
  background: var(--surface-deep);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: none;
  border-top: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.tab:hover {
  color: var(--text);
}

/* The tab you are on: content-coloured, so it reads as the front edge of the
   page below it, with a 2px --action rule along its top.

   This one is teal rather than gold, against the portal's usual "gold is where
   you are" rule, and it is the shell brief's call. A tab is not a statement
   about the record -- it is the control that switches to it, and the row of
   them is a set of things you can do. The sidebar's active rail is teal for
   the same reason, and the two now agree. */
.tab.is-active {
  background: var(--bg);
  border-top-color: var(--action);
  color: var(--text);
  font-weight: 500;
}

.tab:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: -2px;
}

/* Something typed and not yet saved. Marked here so the dialog on the way out
   is not the first anybody hears of it. */
.tab.is-dirty .tab-label::before {
  content: '•';
  color: var(--warning);
  margin-right: 6px;
}

/* On the active tab and on hover only. A close cross on all eight tabs is
   eight targets for an action you take once; on the one you are looking at, or
   the one under the pointer, it is where you expect it. */
.tab-close {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  line-height: 0;
  padding: 2px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.tab.is-active .tab-close,
.tab:hover .tab-close,
.tab:focus-within .tab-close {
  opacity: 1;
}

.tab-close:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.tab-area {
  grid-area: main;
  position: relative;
  overflow: hidden;
}

/* Every frame stays loaded. Inactive ones are hidden with visibility rather
   than display, which would strip their layout: a page that measures anything
   on load -- a table column, a canvas, a menu height -- would come back with
   the wrong numbers the first time it was shown. Not unloading them is the
   whole feature. */
.tab-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  visibility: hidden;
  z-index: 0;
}

.tab-frame.is-active {
  visibility: visible;
  z-index: 1;
}

/* ── The report viewer ──────────────────────────────────────────────────────── */

.viewer-page {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.viewer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.viewer-name {
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 500;
  margin-right: auto;
}

.viewer-body {
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.viewer-body embed {
  width: 100%;
  height: 100%;
  border: none;
}

.viewer-empty {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  .tab-strip {
    padding: 6px 12px 0;
  }
}

/* The workspace styling from #36 sits above the MAUJr override block on
   purpose. Those overrides win by source order -- that is how the token swap
   lands without rewriting the component rules -- so anything appended after
   them silently outranks the identity. New component CSS goes here. */

/* ==========================================================================
   MAUJr visual identity — overrides
   Appended last on purpose: these win on source order over the component
   rules above, which is what lets the token swap land without rewriting
   them. The @font-face rules that came with this block live in
   fonts/fonts.css instead, with the rest of the faces.
   ========================================================================== */

/* ==========================================================================
   Typographic rules that must change with the tokens
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  transition: background var(--slow) var(--ease), color var(--slow) var(--ease);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;              /* Prata has one weight; 700 synthesises a
                                    fake bold that looks broken */
  letter-spacing: 0;             /* was -0.01em, wrong for a serif */
  color: var(--text);
}

/* Every number a person has to compare, verify or read aloud: money, room
   numbers, times, counts, percentages, variances. Tabular figures line up
   in columns, which matters most in the cash count. Apply the class in the
   markup; it is the one addition this change needs. */
.num,
.cash-table .row-total,
.financials-table td.fin-value,
.kpi-card .kpi-value,
.stats-budget-table td,
.progress-text,
.like-count,
.cell-room {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Uppercase micro-labels are everywhere in this app. Below 11px they stop
   being readable at 03:00; the old file had several at 10px. */
.metric-label,
.kpi-card .kpi-label,
.comunicado-category,
.handover-entry-shift,
.section-header-block h2 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Restraint: remove the casino grammar
   Gold + glow + shine sweep is the visual language of a slot machine. Deleting
   it is the single largest gain in perceived quality in this whole change.
   ========================================================================== */

/* The sweep fired on seven button classes and on .phase-btn. Gone. */
.final-btn:hover::after,
.pdf-btn:hover::after,
.secondary-btn:hover::after,
.primary-btn:hover::after,
.logout-button-styled:hover::after,
.lang-toggle-btn:hover::after,
.theme-toggle:hover::after,
.phase-btn:hover::after,
#btn-publicar:hover::after {
  content: none;
}

/* Hover is a border and a background step, not a lift and a bloom. */
.final-btn:hover, .pdf-btn:hover, .secondary-btn:hover, .primary-btn:hover,
.logout-button-styled:hover, .lang-toggle-btn:hover, .theme-toggle:hover,
#btn-publicar:hover {
  box-shadow: none !important;
  transform: none !important;
  border-color: var(--action) !important;
}

.final-btn:active, .pdf-btn:active, .secondary-btn:active, .primary-btn:active,
.logout-button-styled:active, .lang-toggle-btn:active, .theme-toggle:active,
#btn-publicar:active {
  transform: none !important;
  box-shadow: none !important;
  filter: brightness(0.94);
}

/* Cards do not levitate. A 1px border change is enough to say "this one". */
.card:hover,
.details-card:hover,
.metrics-grid .dashboard-card:hover,
.kpi-card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}

.notification-bell:hover,
.notification-bell[aria-expanded="true"] {
  transform: none;
  box-shadow: none;
  border-color: var(--action);
  color: var(--action);
}

.notification-item-card:hover { transform: none; }

/* Progress bar: flat, one colour, no bloom. A progress bar that glows is a
   progress bar people keep looking at instead of working. */
.progress-bar-track {
  height: 3px;
  border: none;
  border-radius: 0;
  background: var(--border);
}

.progress-bar-fill {
  background: var(--gold);
  border-radius: 0;
  box-shadow: none;
}

.checklist-progress-container {
  box-shadow: none;
  border-radius: var(--radius-sm);
}

/* The gold row blink on check was a 0.8s full-row flash. Now a brief rail. */
@keyframes goldRowBlink {
  0%   { border-left-color: var(--gold); background: var(--action-soft); }
  100% { border-left-color: transparent; background: transparent; }
}

.check-item.gold-blink {
  border-left: 2px solid transparent;
  animation: goldRowBlink 0.5s var(--ease);
}

/* Modals do not bounce into place. */
.modal-container {
  transition: transform var(--slow) var(--ease);
  box-shadow: var(--shadow-pop);
}

/* Metric cards had a 4px gold bar on the left of every single one, which
   meant it marked nothing. Removed; the label does the work. */
.metrics-grid .dashboard-card::before { content: none; }

/* ==========================================================================
   Report categories: rail and label, not a filled banner
   These rules replace .alojamento-header / .fb-header / .diversos-header /
   .total-geral-row and their -total-row partners.
   ========================================================================== */

.category-header-cell {
  text-align: left !important;
  font-family: var(--font-body);
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 18px 12px 8px !important;
  background: transparent !important;
  border-bottom: none;
}

.alojamento-header { color: var(--cat-aloj); box-shadow: inset 2px 0 0 var(--cat-aloj); }
.fb-header         { color: var(--cat-fb);   box-shadow: inset 2px 0 0 var(--cat-fb); }
.diversos-header   { color: var(--cat-div);  box-shadow: inset 2px 0 0 var(--cat-div); }

.alojamento-total-row,
.fb-total-row,
.diversos-total-row {
  background: transparent !important;
  font-weight: 500;
}

.alojamento-total-row td { border-top: 1px solid var(--cat-aloj); border-bottom: none; }
.fb-total-row td         { border-top: 1px solid var(--cat-fb);   border-bottom: none; }
.diversos-total-row td   { border-top: 1px solid var(--cat-div);  border-bottom: none; }

.total-geral-row {
  background: transparent !important;
  color: var(--gold) !important;
  font-weight: 500;
}

.total-geral-row td {
  border-top: 1px solid var(--gold);
  border-bottom: none;
  padding: 16px 12px !important;
  color: var(--gold);
}

/* The calendar day header was #e74c3c — a pure red, the loudest thing on the
   dashboard, marking nothing urgent. */
.calendar-day-header {
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.calendar-day-count {
  background: var(--surface) !important;
  color: var(--text) !important;
  font-family: var(--font-mono);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Was a green gradient block with a coloured drop shadow. */
.status-placeholder-card {
  background: var(--surface-2);
  border: 1px solid var(--success-border);
  color: var(--success);
  box-shadow: none;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.12em;
}

/* Phase buttons were --blue #1e3a8a, an eighth hue doing nothing the action
   colour could not do. */
.phase-btn {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.phase-btn:hover,
.phase-btn[aria-expanded="true"] {
  background: var(--surface);
  border-color: var(--action);
  color: var(--action);
  box-shadow: none;
  transform: none;
}

.phase-content,
.checklist-continua,
.handover-previous {
  border-left: 2px solid var(--gold);
}

/* Buttons: gold is not pressable, action is. */
.final-btn {
  background: var(--action);
  color: var(--action-contrast);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.final-btn:hover { background: var(--action-2); }

.pdf-btn,
.secondary-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.pdf-btn:hover,
.secondary-btn:hover {
  background: var(--surface-2);
  border-color: var(--action);
  color: var(--action);
  filter: none;
}

.tab-btn.active {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
  border-bottom: 2px solid var(--gold);
  font-weight: 500;
}

/* ==========================================================================
   Shift-aware theming
   The shift picks the DEFAULT — night audit at 03:00 wants dark, a sunlit
   lobby at 11:00 wants light — but only until the user states a preference.
   Once they touch the toggle, that choice is permanent and the automatic
   switching stops. js/theme.js resolves it; these attributes let CSS respond.
   ========================================================================== */

/* While the shift is being resolved on first paint, neither theme is applied.
   This keeps the flash to the neutral surface rather than white. */
html:not([data-theme]) body { background: var(--bg); }

/* Set by theme.js once the user has chosen a theme. Marks the toggle as a held
   preference rather than an automatic guess — and tells the shift-boundary
   check to leave this session alone, permanently. */
body[data-theme-source="manual"] .theme-toggle { border-color: var(--action); }

@media (prefers-reduced-motion: reduce) {
  body,
  .modal-container,
  .progress-bar-fill,
  .check-item.gold-blink {
    transition: none !important;
    animation: none !important;
  }
}

/* The header is a flex row, and flex children shrink below their content by
   default. Everything except the property name holds its width; the name is the
   only thing allowed to truncate, and only once the rest has had its space. */
.dashboard-header > *:not(.brand) { flex-shrink: 0; }
.header-controls > * { flex-shrink: 0; }

@media (max-width: 1180px) {
  /* The signature is the first thing to go. It is a courtesy, not information. */
  .brand-signature { display: none; }
}

@media (max-width: 900px) {
  .brand-divider,
  .brand-product { display: none; }

  .brand-property { font-size: 16px; }
}

/* ── The sign-in lockup ─────────────────────────────────────────────────────

   The single exception to the co-branding rule. Before sign-in there is no
   property to lead with, so the product mark centred is honest. Past this
   point the hotel's name always comes first. */

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.login-mark {
  width: 72px;
  height: 72px;
  border-radius: 16px;
}

.login-lockup {
  margin: 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The sign-in page had a hardcoded cool-grey gradient that fought every warm
   surface around it. It is the page a hotel sees first. */
body.login-page {
  background: var(--bg);
}

/* The lockup line is uppercase, but the mark inside it is not. The brief writes
   it as "BY MAUJR"; its own usage rules say MAUJR is wrong. The line wins on
   style, the mark wins on spelling. */
.login-lockup-mark {
  text-transform: none;
  letter-spacing: 0.05em;
}

/* ── Two things the live site showed that nothing else could ────────────────

   A currency value is one thing to read, not two. `145,75 €` was breaking after
   the number and leaving the euro sign alone on the next line, in the one
   column where the figures exist to be compared. Tabular figures cannot line up
   if half of them are two lines tall. The label beside it wraps instead — it is
   prose and can afford to. */
.financials-table td.fin-value,
.stats-budget-table td,
.kpi-card .kpi-value,
.cash-table .row-total,
.num {
  white-space: nowrap;
}

.financials-table td.fin-label {
  white-space: normal;
}

/* When the dashboard is showing the sample file rather than the property's own
   report, the label says so — and says it in the colour the portal uses for
   "this needs your attention", not the quiet grey of a caption nobody reads. */
.dashboard-report-label[data-sample] {
  color: var(--warning);
  font-weight: 500;
}