/* ============================================================================
   @layer base — design tokens + the element foundation Pico used to provide.
   (Component styles live in @layer components below and always win.)
   ============================================================================ */
@layer base {
  :root {
    /* Layout */
    --sidebar-width: 240px;
    --sidebar-background-color: rgba(20, 68, 51, 0.05);
    --topbar-height: 3rem;

    /* Brand + palette */
    --color-primary: #144433;
    --color-primary-hover: #0c606b;
    --color-primary-border: teal;
    --color-accent: #0d5b64;
    --color-accent-hover: #09464e;
    --color-secondary: #3a7f62;
    --color-secondary-hover: #2d614c;
    --color-danger: #c62828;
    --color-success: #22c55e;
    --color-warn: #f97316;

    /* Surfaces + text */
    --color-background: #faf9f5;
    --color-secondary-background: #eceeea;
    --color-surface: #ffffff;
    --color-surface-alt: #f5f5f5;
    --color-text: #373c44;
    --color-muted: #5b6570;
    --color-border: #80978f;

    /* Icon scale. --icon-size is the default every feather icon takes; the two smaller steps are for
       icons that sit beside small text (sort arrows, chevrons) or inside a card. */
    --icon-size: 1.2rem;
    --icon-size-sm: 0.875rem;
    --icon-size-xs: 0.8rem;
    /* A table cell's line box is ~1.28rem, so size minus drop must stay under that or every row
       grows. `vertical-align: middle` hangs the icon below the descender — hence an explicit drop. */
    --icon-baseline-drop: -0.3em;

    /* Spacing / form / radius */
    --space: 1rem;
    --field-pad-y: 0.4rem;
    --field-pad-x: 0.7rem;
    --radius: 6px;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }

  /* ---- Typography ---- */
  html {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    color: var(--color-text);
    background: var(--color-background);
  }
  h1, h2, h3, h4, h5, h6 { margin-block: 0 0.5em; font-weight: 600; line-height: 1.15; color: var(--color-text)}
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.3rem; }
  h4 { font-size: 1.15rem; }
  h5 { font-size: 1rem; }
  h6 { font-size: 0.9rem; }
  a { color: var(--color-primary); text-underline-offset: 2px; }

  /* Restore the vertical rhythm the reset's *{margin:0} stripped (weak :where, easily overridden) */
  :where(p, ul, ol, dl, table, fieldset, figure, blockquote, pre) { margin-block-end: var(--space); }
  :where(ul, ol) { padding-inline-start: 1.25rem; }

  /* ---- Focus ---- */
  :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

  /* ---- Form controls ---- */
  label { display: block; margin-block-end: calc(var(--space) * 0.5);}
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  /* input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), */
  select,
  textarea {
    display: block;
    width: 100%;
    margin: calc(var(--field-pad-y) * 2) 0;
    padding: var(--field-pad-y) var(--field-pad-x);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }
  input:not([type="checkbox"]):not([type="radio"]):focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
  }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }
  fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space); }
  legend { padding-inline: 0.4rem; font-weight: 600; }

  /* ---- role="switch" toggle ---- */
  input[type="checkbox"][role="switch"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.25rem;
    border: none;
    border-radius: 1rem;
    background: var(--color-border);
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s ease;
  }
  input[type="checkbox"][role="switch"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.25rem - 4px);
    height: calc(1.25rem - 4px);
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
  }
  input[type="checkbox"][role="switch"]:checked { background: var(--color-primary); }
  input[type="checkbox"][role="switch"]:checked::before { transform: translateX(1rem); }

  /* ---- Buttons ---- */
  .btn, .btn-primary, .btn-secondary, .btn-danger,
  button[type="submit"], input[type="submit"], input[type="button"],
  [role="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: var(--field-pad-y) 0.9rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: #fff;
    font: inherit;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
  }
  .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover,
  button[type="submit"]:hover, input[type="submit"]:hover, input[type="button"]:hover,
  [role="button"]:hover { filter: brightness(0.94); color: #fff; }
  .btn-primary { background: var(--color-primary); }
  .btn-secondary { background: var(--color-secondary); }
  .btn-danger { background: var(--color-danger); }
}

/* ============================================================================
   @layer components — the app's existing component styles (win over @layer base).
   ============================================================================ */
@layer components {
html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr auto;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main"
    "sidebar footer";
  background: linear-gradient(90deg, var(--sidebar-background-color) var(--sidebar-width), transparent var(--sidebar-width));
}

body.env-dev {
  background-color: #d2d8d2;
}

/* Logged-out pages: no sidebar and no topbar — collapse their column/row + drop the strip. */
body.no-sidebar {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "topbar"
    "main"
    "footer";
  background: none;
  min-height: 100vh;
}

body.no-sidebar .topbar {
  display: none;
}

/* Center the logged-out content (e.g. the login form) over the whole viewport:
   main spans full width and (with topbar/footer hidden) fills the full height. */
body.no-sidebar .footer {
  display: none;
}

body.no-sidebar .main-content {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body.no-sidebar .popup-form {
  width: 100%;
  max-width: 400px;
}

/* ============================== SIDEBAR ============================== */

.sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--color-border);
  border-radius: 2;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  /* background: var(--color-background); */
  background: var(--sidebar-background-color);
}

.sidebar.env-dev {
  /* background-color: #e2f5e6; */
}

.sidebar-logo {
  padding-bottom: 0.25rem;
  /* border-bottom: 1px solid var(--color-border); */
}

.sidebar-logo h1 {
  font-family: Chango, cursive;
  font-size: 1.875rem;
  font-weight: 400;
  margin: 0;
}

.sidebar-logo a {
  text-decoration: none;
  color: inherit;
}

.sidebar-project form {
  margin: 0;
}

.sidebar-project select {
  margin: 0;
  padding: 0.25rem 1.25rem 0.25rem 0.5rem;
  font-size: 0.8rem;
  height: auto;
  width: 100%;
}

/* ============================== SIDEBAR NAV ============================== */

.sidebar-nav {
  display: block;
  flex: 1;
}

.sidebar-nav > ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.1rem;
}

.nav-item {
  list-style: none;
}

.nav-item > a,
.nav-item-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  /* font-size: 0.9rem; */
  width: 100%;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  justify-content: space-between;
  box-sizing: border-box;
}

.nav-item > a:hover,
.nav-item-toggle:hover {
  background: rgba(20, 68, 51, 0.1);
  color: inherit;
}

.nav-item > a.active,
.nav-item-toggle.active {
  color: var(--color-primary);
  font-weight: bold;
  /* border-left: 3px solid var(--color-primary); */
  /* padding-left: calc(0.75rem - 3px); */
  /* background: rgba(120, 168, 151 ); */
  background: rgba(20, 68, 51, 0.2);
  /* background: rgba(20, 68, 51, 0.185); */
}

.nav-submenu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.1rem 0 0 1rem;
  list-style: none;
  margin: 0;
  gap: 0.1rem;
}

/* .sidebar-nav > ul {
  gap: 0.1rem;
} */

.nav-submenu li:first-child {
  /* margin-top: 0.25rem; */
}

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

.nav-submenu li a {
  display: block;
  padding: 0.25rem 0.75rem;
  margin-right: 0.5rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.95rem;
}

.nav-submenu li a:hover {
  background: rgba(20, 68, 51, 0.1);
  color: inherit;
}

.nav-submenu li a.active {
  color: var(--color-primary);
  font-weight: bold;
  background: rgba(20, 68, 51, 0.2);
}

.nav-chevron {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

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

/* ============================== TOP BAR ============================== */

.topbar {
  grid-area: topbar;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 1rem;
  gap: 0.5rem;
  /* background: var(--color-background); */
}

.topbar-start {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

.topbar-logo {
  font-size: 1.25rem;
  text-decoration: none;
  color: inherit;
  font-family: Chango, cursive;
}

.topbar-utility {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.topbar-utility > li {
  display: flex;
  align-items: center;
}

.topbar-utility > li > a {
  padding: 0.25rem 0.5rem;
  text-decoration: none;
  color: var(--color-primary);
  font-size: 0.875rem;
  border-radius: 4px;
}

.topbar-utility > li > a:hover {
  background: rgba(20, 68, 51, 0.08);
  color: var(--color-primary);
}

.topbar-utility > li > a.active {
  color: var(--color-primary);
  font-weight: bold;
}

.topbar form {
  margin: 0;
}

.topbar .btn {
  margin: 0;
  font-weight: 400;
  padding: 0.25rem 0.5rem;
}

/* Language dropdown in topbar */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-label {
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  /* Same primary green as the sibling topbar links. */
  color: var(--color-primary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.875rem;
  border-radius: 4px;
}

.nav-dropdown-label:hover {
  background: rgba(20, 68, 51, 0.08);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-background);
  min-width: 6rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.25rem 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 200;
  overflow: hidden;
  list-style: none;
  margin: 0;
}

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

.nav-dropdown-menu li {
  padding: 0;
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.4rem 1rem;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  font-size: 0.875rem;
}

.nav-dropdown-menu a:hover {
  background: rgba(67, 100, 13, 0.08);
}

.lang-switcher-current {
  font-size: 0.8rem;
  font-weight: 600;
}

.nav-dropdown-label svg {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

/* ============================== MAIN CONTENT ============================== */

.main-content {
  grid-area: main;
  max-width: 1620px;
  padding: 1rem;
}

/* The schedule page opts out of the global content cap so its calendar can grow
   on wide screens (see .schedule-canvas)... */
.main-content--schedule {
  max-width: none;
}

/* ...but the events-list tab keeps a readable width rather than stretching. */
.main-content--schedule #tapahtumat-tab {
  max-width: 1620px;
}

/* ============================== FOOTER ============================== */

.footer {
  grid-area: footer;
  text-align: center;
  margin: 0;
  padding: 1rem 0rem;
  line-height: 0.1;
  border-top: 1px solid #aaa;
}

/* ============================== ACCESSIBILITY ============================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
}

/* ============================== BURGER & BACKDROP ============================== */

.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: #333;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.burger svg {
  width: 1.25rem;
  height: 1.25rem;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.sidebar-backdrop[data-open="true"] {
  display: block;
}

/* ============================== RESPONSIVE ============================== */

/* Tablet + mobile: burger visible, sidebar off-canvas (< 1024px) */
@media (max-width: 1023px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) 1fr auto;
    grid-template-areas:
      "topbar"
      "main"
      "footer";
    padding-left: 0;
    transition: padding-left 0.2s ease;
    background: none;
  }

  body.sidebar-open {
    padding-left: var(--sidebar-width);
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 500;
    background: var(--sidebar-background-color);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
  }

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

  .burger {
    display: flex;
  }

  .topbar-start {
    display: flex;
  }

  .topbar {
    justify-content: space-between;
    padding: 0 0.75rem;
  }

  /* No backdrop needed for tablet — sidebar pushes content */
  .sidebar-backdrop {
    display: none !important;
  }
}

/* Mobile only: sidebar takes full width as overlay (< 576px) */
/*
@media (max-width: 575px) {
  body.sidebar-open {
    padding-left: 0;
  }

  .sidebar {
    width: 100%;
    box-shadow: none;
  }
*/
/* Backdrop re-enabled for mobile overlay */
/*
  .sidebar-backdrop {
    display: none !important;
  }

  .sidebar-backdrop[data-open="true"] {
    display: block !important;
  }
}
*/

/* ============================== TAGS ============================== */

.tag-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background-color: rgba(20, 68, 51, 0.12);
  color: var(--color-primary);
  margin-right: 0.25rem;
  white-space: nowrap;
}

.tag-filter-select {
  margin-bottom: 0.75rem;
  width: auto;
}


/* ============================== COMMON STYLES ============================== */

/*---------- Icons ----------*/

/* feather.replace() swaps each <i data-feather> for an <svg> carrying width/height="24" attributes,
   so a rule written against the <i> stops applying the moment the icons render — and the icon falls
   back to 24px, which is what used to stretch the invoice and expense rows.

   feather also writes class="feather feather-<name>" onto every icon it renders, so svg.feather
   reaches all of them without touching a single template. :where() zeroes the specificity, making
   this a default rather than a competitor: any rule that names a width wins automatically, whether
   it is an icon class (.sort-icon) or a container (.file-link svg). */
:where(svg.feather) {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Only inside a table does the baseline matter this much: overflow the cell's line box and every row
   grows. Elsewhere the icon can sit on the baseline like any other inline element. */
:where(td, th) :where(svg.feather) {
  vertical-align: var(--icon-baseline-drop);
}

/*---------- Tabs ----------*/

.tabs-container {
  margin-top: 0.5rem;
}

.tabs {
  display: flex;
  gap: 0.5rem;
  /* border-bottom: 2px solid #e0e0e0; */
  margin-bottom: 1.5em;
}

.tab-button {
  padding: 0.25rem 1.5rem 0.75rem 1.5rem;
  background: none;
  border: none;
  position: relative;
  border-bottom: 2px solid transparent;
  /* margin-bottom: -2px; */
  cursor: pointer;
  font-size: 1rem;
  color: #666;
  transition: all 0.3s ease;
}

.tab-button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.tab-button:hover {
  color: #0d5b64;
  background: rgba(13, 91, 100, 0.05);
}

.tab-button.active {
  color: var(--color-primary);
  font-weight: bold;
}

.tab-button.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.action-row {
  margin-bottom: 1rem;
}

/*---------- Tables ----------*/

table {
  width: 100%;
}

th,
td {
  font-size: 0.85rem;
  padding: calc(var(--space) / 4) calc(var(--space) / 8);
  /* padding: 0.3rem 0.1rem; */
  vertical-align: middle;
}

th {
  /* Browsers default <th> to text-align: center; force left so headers line up with
     the data below them (Pico used to provide this). th.amount re-overrides to right. */
  text-align: left;
  border-bottom: 2px solid green;
  font-weight: bold;
}

td {
  border-bottom: 1px solid green;
  /* border-left: 1px solid green; */
  /* border-right: 1px solid green; */
  /* height: 4rem; */
}

td.nowrap {
  white-space: nowrap;
}

th.amount, td.amount {
  padding-right: 0.5rem;
}

/* td.amount {
  text-align: right;
} */

td.account {
  padding-right: 0.5rem;
}

/*---------- Expandable elements for tables ----------*/

/* Expandable detail card shown under a loan/supplier row (toggled via data-row-toggle). */
.detail-row {
  display: none;
}

.detail-element {
  background-color: var(--color-secondary-background);
  /* background-color: #e4efed; */
  /* color: #0d5b64; */
  padding: 0.75rem 1.25rem;
  margin: 0.5rem;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.detail-element::before {
  /* Primary color stripe */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background-color: var(--color-accent);
}

/* .detail-element-table th, */
/* .detail-element-table td { */
  /* background-color: var(--color-secondary-background); */
  /* background-color: #e4efed; */
/* } */

.subtable {
  width: 100%;
  /* consistent width, independent of content */
  margin: 0;
  font-size: 0.85rem;
  background-color: var(--color-secondary-background);
  /* subtle theme-green tint — tunable */
  /* Separate model so the table's side padding insets the cells (and the header
     divider) from the tinted block's edges. */
  border-collapse: separate;
  border-spacing: 0;
  /* padding: 0 0.75rem; */
}

/* Cancel the inherited .accounts first-column width / borders for the sub-table,
   and let the table's tint show through the cells. Qualified with .accounts so
   these beat `.accounts th:first-child` etc. */
.accounts .subtable th,
.accounts .subtable td {
  width: auto;
  padding: 0.15rem 0.75rem;
  border: none;
  background: transparent;
}

/* Divider under the sub-table header — a lighter tone than the main table's. */
.accounts .subtable thead th {
  border-bottom: 1px solid green;
  /* border-bottom: 1px solid rgba(128, 151, 143, 0.45); */
}

.subtable .amount {
  text-align: right;
  white-space: nowrap;
}

/* Keep the date column to its content width so it doesn't hog horizontal space.
   width:1% + nowrap shrinks the column to fit its contents. Qualified with
   .accounts so it beats the `width:auto` cell rule above. */
.accounts .subtable th:first-child,
.accounts .subtable td.date {
  width: 1%;
  /* max-width: 6rem; */
  white-space: nowrap;
}

.subtable td.nowrap {
  white-space: nowrap;
}


/*---------- Buttons ----------*/

.btn {
  /* padding: 6px 10px; */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* font-size: 1rem; */
  width: auto;
}

.btn-danger {
  background-color: #c62828;
  border-color: #c62828;
  color: #fff;
}

.btn-danger:hover {
  background-color: #b71c1c;
  border-color: #b71c1c;
}

/*---------- Pagination ----------*/

/* Grid, not flex: the pagination has to centre on the *container*, and flex can only centre it in
   whatever space .pager-info leaves over — which pushes it right. Three columns with equal 1fr sides
   put the middle one dead centre however wide the info text is. The third column stays empty. */
.pager {
  /* background-color: #f5c6cb; */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: 0.75rem;
}

.pagination {
  max-width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

/* Each control holds nothing but an icon. Making them flex containers takes the icon off the text
   baseline — where it sits higher than the "Sivu x" label beside it — and drops the descender gap
   underneath it, so the row's own align-items can centre them against the label. */
.pagination a,
.pagination .disabled {
  display: inline-flex;
  /* border: 1px solid var(--color-border); */
  /* border-radius: 4px; */
  padding: 0.15rem 0.4rem;
}

.pagination .disabled {
  opacity: 0.6;
}

/*---------- Messages ----------*/

.message-container {
  padding: 0 var(--space);
}

.message {
  background-color: #def5ec;
  color: #084c4d;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  border-top: 1px solid var(--color-primary-border);
  border-bottom: 1px solid var(--color-primary-border);
  border-right: 1px solid var(--color-primary-border);
  border-left: 6px solid var(--color-primary-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: opacity 0.5s ease;
  position: relative;
  padding-right: 2rem;
}

.message-close {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0;
  display: flex;
  align-items: center;
}

.message-close svg {
  width: 1rem;
  height: 1rem;
}

.message-close:hover {
  opacity: 1;
}

/*---------- Alerts ----------*/

/* Size and alignment come from the icon defaults: this sits in a table cell, and its own
   `vertical-align: middle` used to hang it below the descender and add a pixel to the row. */
.alert-icon {
  margin-left: 4px;
}

.alert-overdue {
  color: #e23d3d;
}

.alert-soon {
  color: #f9a825;
}

/*---------- Highlights ----------*/

.highlight {
  max-width: 30rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.highlight.red {
  background-color: #eca1a1;
  border-top: 1px solid #e23d3d;
  border-bottom: 1px solid #e23d3d;
  border-right: 1px solid #e23d3d;
  border-left: 6px solid #e23d3d;
}

.highlight.blue {
  background-color: #80afc9;
  border-top: 1px solid #00507a;
  border-bottom: 1px solid #00507a;
  border-right: 1px solid #00507a;
  border-left: 6px solid #00507a;
}

.highlight.green {
  background-color: #89b390;
  border-top: 1px solid #2d6b47;
  border-bottom: 1px solid #2d6b47;
  border-right: 1px solid #2d6b47;
  border-left: 6px solid #2d6b47;
}

/*---------- Stat cards ----------*/

.stat-card {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  background: rgba(20, 68, 51, 0.185);
  border: 1px solid rgba(20, 68, 51, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
  min-width: 10rem;
}

.stat-card__label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted, #666);
}

.stat-card__value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
}

.stat-card__count {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted, #666);
}

.stat-card--green {
  background: rgba(20, 68, 51, 0.1);
  border-color: rgba(20, 68, 51, 0.5);
}

.stat-card--red {
  background: rgba(226, 61, 61, 0.2);
  border-color: rgba(226, 61, 61, 0.5);
}

.stat-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.stat-cards-row .stat-card {
  margin-bottom: 0;
}

/*---------- Sorting and filtering ----------*/

.sortable-header {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.sort-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.filter-row {
  display: none;
}

.filter-row .filter-input {
  width: 100%;
  border: 1px solid #2d6b47;
  padding: 0rem 0rem 0rem 0.2rem;
  height: 1.5rem;
  font-size: 0.75rem;
  margin-bottom: 0;
  color: var(--color-muted);
}

/*---------- Charts ----------*/

.chart-section {
  margin-bottom: 3rem;
}

.chart-section h4 {
  margin-bottom: 1rem;
  color: #333;
}

.chart-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-wrapper-large {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Make SVG charts responsive */
.chart-wrapper svg,
.chart-wrapper-large svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}

/* ============================== LOGIN PAGE ============================== */

.popup-form {
  max-width: 500px;
  margin: 0 auto;
}

/* ============================== UI002 INVOICES PAGE ============================== */

.file-link {
  text-decoration: none;
}

/* Colour only — size and alignment come from the icon defaults. Both selectors: the <i> before
   feather runs, the <svg> it is replaced with afterwards. */
.file-link i,
.file-link svg {
  color: var(--color-primary);
}

.file-link:hover i,
.file-link:hover svg {
  color: var(--color-secondary-hover);
}

td.status-cell {
  padding-left: 0.2rem;
  width: 5rem;
}

.status-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  /* color: #fff; */
}

.status-1 {
  background-color: #e3f2fd;
  color: #1565c0;
}

.status-2 {
  background-color: #fff8e1;
  color: #ef6c00;
}

.status-3 {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.status-4 {
  background-color: #ffebee;
  color: #c62828;
}

.status-5 {
  background-color: #bfede9;
  color: #4b7975;
}

/* td.actions-cell {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0.5rem;
  gap: 0.3rem;
  justify-content: flex-start;
  align-items: center;
} */

.actions-cell {
  white-space: nowrap;
}

.actions-cell form {
  display: inline-block;
  margin: 0;
}

.invoice-btn {
  margin: 0 0.1rem 0 0;
  padding: 0.25rem;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  width: auto;
  min-width: 4rem;
  box-sizing: border-box;
  /* line-height: 1.2; */
}

.btn-pay {
  background-color: #4caf50;
  border-color: #357a37;
}

.btn-reject {
  background-color: #e53935;
  border-color: #8f2321;
}

.btn-check {
  background-color: #f9a825;
  border-color: #9c6918;
}

.btn-reset {
  background-color: #1565c0;
  border-color: #0d3e77
}

.btn-accept {
  background-color: #4caf50;
  border-color: #357a37;
}

/* ============================== EVENTS PAGE ============================== */

.past-event {
  font-style: italic;
  opacity: 0.7;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 90vh;
  overflow-y: auto;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 20px;
}

.close:hover,
.close:focus {
  color: #000;
}

/* Event form styling (add modal + edit modal) */
.event-form-field {
  margin-bottom: 10px;
}

#eventForm label,
#editEventModalBody label {
  display: block;
  margin-bottom: 5px;
  /* font-size: smaller; */
  /* font-weight: bold; */
}

#eventForm .checkbox-field,
#editEventModalBody .checkbox-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#eventForm .checkbox-field label,
#editEventModalBody .checkbox-field label {
  order: 2;
  margin-bottom: 0;
  cursor: pointer;
}

#eventForm .checkbox-field input[type="checkbox"],
#editEventModalBody .checkbox-field input[type="checkbox"] {
  order: 1;
  flex-shrink: 0;
  margin: 0;
}

#eventForm input[type="text"],
#eventForm input[type="date"],
#eventForm input[type="time"],
#eventForm input[type="datetime-local"],
#eventForm textarea,
#eventForm select,
#editEventModalBody input[type="text"],
#editEventModalBody input[type="date"],
#editEventModalBody input[type="time"],
#editEventModalBody input[type="datetime-local"],
#editEventModalBody textarea,
#editEventModalBody select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

#eventForm input:disabled,
#eventForm textarea:disabled,
#editEventModalBody input:disabled,
#editEventModalBody textarea:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

#eventForm .errorlist,
#editEventModalBody .errorlist {
  color: #dc3545;
  font-size: 12px;
  list-style: none;
  padding: 0;
  margin: 5px 0 0 0;
}

.alert-error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.alert-error ul {
  margin: 0;
  padding-left: 20px;
}

.form-row {
  display: flex;
  gap: 8px;
}

.form-row > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.form-row input {
  width: 100%;
  box-sizing: border-box;
}

.form-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.split-link {
  font-size: 0.875rem;
  margin-top: 4px;
  text-decoration: none;
}

.split-row {
  align-items: center;
  margin-bottom: 4px;
}

.split-row select,
.split-row input,
.split-row button {
  margin-bottom: 5px;
}

.split-row > div:first-child {
  flex: 2;
}

.split-row > div:nth-child(2) {
  flex: 1;
  min-width: 80px;
}

.split-row > .split-row__remove {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

.split-remove-btn {
  padding: 2px 4px;
  line-height: 1;
  width: fit-content;
  min-width: 0 !important;
}

.split-add-btn {
  padding: 4px 8px;
  line-height: 1;
}

.split-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.split-total {
  font-size: 0.9rem;
  margin-left: auto;
}

#account-section {
  margin-bottom: 1.5rem;
}

.split-total--error {
  color: #c62828;
}

.wall-svg-card {
  margin-bottom: 2rem;
}

.wall-svg {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
}

.wall-svg-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.wall-svg-dims {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 6px;
}

.ebtn-primary {
  background-color: #007bff;
  color: white;
}

.ebtn-primary:hover {
  background-color: #0056b3;
}

.ebtn-secondary {
  background-color: #6c757d;
  color: white;
}

.ebtn-secondary:hover {
  background-color: #545b62;
}

/* ============================== UI004 SCHEDULE PAGE ============================== */

/* .schedule-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
} */

.schedule-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.view-toggle {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.weeks-select-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  white-space: nowrap;
  font-size: 0.8rem;
}

.weeks-select-label select {
  width: auto;
  margin: 0;
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
  font-size: 0.8rem;
  height: auto;
}

.btn-schedule-active {
  background-color: var(--color-accent);
  /* color: var(--color-text); */
  font-weight: bold;
}

.schedule-nav {
  display: flex;
  gap: 0.25rem;
}

/* Calendar width scales with the column count. ~20rem/column preserves the current
   5-week width (1620/5 ≈ 20.25rem) and grows wider as weeks are added; it's a max,
   so on narrower screens the columns still shrink to fit. --n-cols is set inline. */
.schedule-canvas {
  max-width: calc(var(--n-cols, 5) * var(--col-w, 20rem));
}

/* Day columns are narrower than week columns; ~14rem/day keeps 7 days at roughly
   the prior width and lets 14/21 days grow toward the full screen. */
.schedule-canvas--day {
  --col-w: 14rem;
}

.schedule-headers {
  display: grid;
  gap: 0.25rem;
}

.schedule-col-header {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
}

.schedule-col-header.current-col {
  box-shadow: inset 0 0 0 5px #5ecfb1;
}

/* Weekend day-column headers get a distinct (muted) background. Tunable. */
.schedule-col-header.weekend-col {
  background-color: #5a6b78;
  /* slate — clearly different from the primary green */
}

.col-label {
  font-weight: 600;
  /* Reserve one line so day-view columns without a week number keep their dates aligned. */
  min-height: 1.2rem;
}

.col-sublabel {
  font-size: 0.7rem;
  opacity: 0.85;
}

.swimlane-label {
  padding: 0.25rem 0.5rem;
  margin-top: 0.5rem;
  background: var(--color-accent);
  font-size: 0.7rem;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  user-select: none;
}

.swimlane-chevron {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.today-row {
  margin-bottom: 0.5rem;
}

.btn-today {
  font-size: 0.9rem;
  padding: 0.4rem 0.75rem;
}

.day-nav-arrows {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.swimlane-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.btn-swimlane-toggle {
  font-size: 0.75rem;
}

.swimlane-toggle-row label {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.875rem;
  cursor: pointer;
  margin-bottom: 0;
}

.swimlane-toggle-row label input {
  margin-bottom: 0;
}

.schedule-grid {
  display: grid;
  gap: 0.25rem;
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
  min-height: 6rem;
}

.schedule-grid--swimlane {
  min-height: 0;
}

.schedule-grid--swimlane .drop-zone {
  min-height: 0.5rem;
}

.drop-zone {
  min-height: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.15s;
}

.drop-zone.drop-highlight {
  background-color: rgba(20, 68, 51, 0.12);
  outline: 2px dashed var(--color-primary);
}

.event-card {
  position: relative;
  padding: 0.15rem 0.2rem;
  border-radius: 4px;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  /* gap: 0.1rem; */
  cursor: grab;
  border-left: 3px solid transparent;
  overflow: hidden;
}

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

/* Event (Event.Type.EVENT = 1) are shown in light green */
.event-card.event-type-1 {
  /* background-color: #fff8e1;
  border-left-color: #ef6c00;
  color: #5c3a00; */
  background-color: #c9decb;
  border-left-color: #2e7d32;
  color: #1a3d1c;
}

/* Reviews (Event.Type.REVIEW = 2) are shown in golden yellow */
.event-card.event-type-2 {
  background-color: #ffce7f;
  border-left-color: #bf821f;
  color: #4e3a00;
  /* background-color: #e3f2fd;
  border-left-color: #1565c0;
  color: #0d2f6e; */
}

/* Absences (Event.Type.ABSENCE = 3) are shown in light violet */
.event-card.event-type-3 {
  background-color: #f3e5f5;
  border-left-color: #8e24aa;
  color: #4a148c;
}

/* Deliveries (Event.Type.DELIVERY = 4) are shown in light teal */
.event-card.event-type-4 {
  background-color: #b8e65c;
  border-left-color: #8f9485;
  color: #363931;
}

/* Holidays (Event.Type.HOLIDAY = 5) are shown in light red */
.event-card.event-type-5 {
  background-color: #ffebee;
  border-left-color: #c62828;
  color: #5f1414;
  /* background-color: #f5ecd7;
  border-left-color: #b08900;
  color: #5c4600; */
}

/* .event-card.event-status-fixed {
  background-color: #e3f2fd;
  border-left-color: #1565c0;
  color: #0d2f6e;
} */

.event-card.event-status-planned {
  background-color: #e3f2fd;
  border-left-color: #1565c0;
  color: #0d2f6e;
}


/* Status icons live bottom-right (the worker-avatar cluster owns the top-right corner). The
   container hugs the right edge and shrinks to its content, so icons pack from the right —
   a single icon sits in the corner, a second lands to its left. */
.event-status-icons {
  position: absolute;
  bottom: 0.2rem;
  right: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.event-done-icon {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  color: #2e7d32;
  stroke: #2e7d32;
}

.event-importance-icon {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  color: #c62828;
  stroke: #c62828;
}

/* Overlapping worker avatars in the card's top-right corner. */
.event-workers {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  z-index: 1;
  pointer-events: none;
}

.event-workers > .avatar {
  box-shadow: 0 0 0 0.5px #fff;
}

.event-workers > .avatar + .avatar {
  margin-left: -6px;
}

.event-workers-more {
  margin-left: 2px;
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--color-text);
}

.event-context-menu {
  position: absolute;
  z-index: 200;
  background: var(--color-background);
  border: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  padding: 0.25rem 0;
  min-width: 10rem;
}

.event-context-menu a {
  display: block;
  padding: 0.2rem 0.5rem;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  font-size: 0.75rem;
}

.event-context-menu a:hover {
  background: rgba(13, 91, 100, 0.08);
}

.touch-drag-clone {
  position: fixed;
  opacity: 0.8;
  z-index: 1000;
  pointer-events: none;
  transform: translate(-50%, -50%);
  cursor: grabbing;
}

.event-headline {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.event-headline:hover {
  text-decoration: underline;
}

.event-meta {
  opacity: 0.75;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-events {
  grid-column: 1 / -1;
  font-style: italic;
  opacity: 0.6;
  font-size: 0.85rem;
  padding: 0.5rem;
}

/* ============================== UI003 BOOKKEEPING ACCOUNTS PAGE ============================== */

/* Configurable constants */
:root {
  --toggle-w: 1.25rem;
  /* fixed width for the chevron area */
  --indent-step: 1.25rem;
  /* width added per tree level */
  --firstcol-width: 8rem;
  /* reserve enough width so other cols never shift */
}

.accounts-actions {
  margin-bottom: 1rem;
}

/* Fix the first column width (prevents layout jump on expand/collapse) */
.accounts .col-number,
.accounts td.account-number,
.accounts th:first-child {
  width: var(--firstcol-width);
  /* padding: calc(var(--space)/ 8) calc(var(--space)/10); */
}

/* First cell layout: [toggle-box][indent][label] — td stays table-cell */
.account-number {
  white-space: nowrap;
  vertical-align: middle;
}

.account-number > * {
  vertical-align: middle;
}

/* 1) Toggle area: fixed width always present */
.toggle-box {
  width: var(--toggle-w);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 var(--toggle-w);
}

.toggle {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  color: green;
}

.toggle.placeholder {
  width: 1em;
  height: 1em;
  visibility: hidden;
}

/* Feather icon sizing + smooth rotation */
.toggle svg {
  width: 1em;
  height: 1em;
  transition: transform 0.2s ease-in-out;
  display: block;
  transform-origin: 50% 50%;
}

.toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

/* 2) Indent spacer: exact, predictable width = level × step */
.indent {
  display: inline-block;
  width: calc(var(--level, 0) * var(--indent-step));
  vertical-align: middle;
}

/* Label (the number) */
.account-number .label {
  margin-left: 0.25rem;
}

/* Optional: visual hint for roots */
.account-row.is-root td {
  font-weight: 600;
}

/* An account's expenses are shown as one sub-table inset under the account row. */
.account-expenses-row > td {
  /* padding: 0.4rem 4rem 0.6rem calc(var(--toggle-w) + var(--level, 1) * var(--indent-step)); */
  padding: 0.4rem 4rem 0.6rem 4rem;
}

.accounts tr.grand-total-row {
  border-bottom: none;
}

.accounts td.grand-total-label {
  font-weight: bold;
  font-size: large;
  text-align: right;
  padding-right: calc(var(--space) * 2);
}

.accounts td.grand-total-value {
  font-weight: bold;
  font-size: large;
}

/*---------- Tuloslaskelma (UI003 tab 2) ----------*/

.profit-loss {
  max-width: 40rem;
  margin-block-end: var(--space);
}

/* The global data-grid rules underline every th and td, in two different weights. Collapsed against
   the statement's own rules those read as misaligned, so the statement clears them and draws only its
   own borders, on the cells rather than the row. */
.profit-loss th,
.profit-loss td {
  border: none;
  padding: 0.3rem 0.5rem 0.3rem 0;
}

.profit-loss th[scope="row"] {
  font-weight: inherit;
  text-align: left;
}

.profit-loss thead th {
  color: var(--color-muted);
  font-weight: 600;
  text-align: right;
}

.profit-loss td {
  width: 9rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pl-revenue-form {
  max-width: 16rem;
  margin-bottom: var(--space);
}

/* A section heading carries its own subtotal; the per-item breakdown under it is only rendered when
   there is more than one line, so the two levels never look like a duplicated row. */
.pl-section {
  font-weight: 600;
}

.pl-line th[scope="row"] {
  padding-left: var(--space);
}

/* Excluding the unclassified row, whose own colour is set on the <tr> and would otherwise lose to
   this rule on the label cell alone, leaving the row half-coloured. */
.pl-line:not(.pl-line--unclassified) th[scope="row"] {
  color: var(--color-muted);
}

/* Counted inside Kustannukset so the statement still adds up — coloured because a non-zero value
   means accounts are waiting to be mapped, not that the arithmetic is wrong. */
.pl-line--unclassified,
.pl-warning {
  color: var(--color-warn);
}

/* A rule above each computed figure, separating it from the amounts being summed. Weight and size go
   on the row so the cells inherit them; only the border has to be drawn per cell. */
.pl-subtotal {
  font-weight: 600;
}

.pl-result {
  font-weight: bold;
  font-size: large;
}

.pl-subtotal > * {
  border-top: 1px solid var(--color-border);
}

.pl-result > * {
  border-top: 2px solid var(--color-primary);
}

/* ============================== UI006 HOURS PAGE ============================== */

.btn-engine-start {
  width: 5rem;
  height: 5rem;
  min-width: 5rem;
  min-height: 5rem;
  border-radius: 50%;
  border: 6px solid #3a9e6e;
  background: radial-gradient(circle at 35% 35%, #888888, #383838);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  line-height: 1.4;
  overflow: hidden;
}

.btn-engine-start:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.btn-engine-start:active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

.btn-engine-stop {
  border-color: #c62828;
  background: radial-gradient(circle at 35% 35%, #888888, #383838);
}

.work-timer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.work-timer-counter {
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.work-timer-gps-status {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.hours-grid {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.hours-cell {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #ccc);
  border-radius: 4px;
  padding: 0.5rem;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hours-cell.current-col {
  border-color: var(--color-primary);
}

.hours-cell--clickable {
  cursor: pointer;
}

.hours-cell--clickable:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-alt, #f5f5f5);
}

.hours-total {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.work-session {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.15rem;
}

.session-active {
  color: var(--color-primary);
  font-weight: 600;
}

/* No vertical-align: these sit in the hours table, where the shared baseline drop keeps them from
   stretching the row. */
.geofence-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.geofence-icon--ok {
  color: var(--color-success, #22c55e);
}

.geofence-icon--warn {
  color: var(--color-warn, #f97316);
}

.geofence-icon--none {
  color: var(--color-muted);
}

.geofence-site-name {
  margin-left: 0.25rem;
  color: var(--color-muted);
}


/* ============================== UI007 SUPPLIERS PAGE ============================== */

.supplier-row {
  cursor: pointer;
}

/* ============================== UI008 REPORTS PAGE ============================== */

.report-form-wrapper {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* ============================== UI009 PROFILE PAGE ============================== */

.bank_accounts {
  max-width: 500px;
}

.notificationform {
  max-width: 500px;
}

/* ============================== UI011 FINANCE PAGE ============================== */

.loan-row {
  cursor: pointer;
}


/* ============================== UI012 SITE DIARY PAGE ============================== */

/* "Ota kuva" only makes sense on touch devices (it opens the camera). On a desktop with a
   mouse it just opens the same file dialog as "Valitse kuvia", so hide it there. */
/* The camera trigger is a <label> (Pico renders labels as full-width blocks), so force it to size
   to its text like the sibling buttons. */
.diary-camera-btn {
  display: inline-block;
  width: auto;
}

@media (hover: hover) and (pointer: fine) {
  .diary-camera-btn {
    display: none;
  }
}

/* Hide an element visually while keeping it in the render tree. Used for the camera file input:
   a display:none/hidden file input makes some Android browsers drop the capture="environment"
   hint, so it must remain rendered even though it isn't shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.diary-previews,
.diary-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.diary-preview {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 12rem;
}

.diary-preview img {
  width: 12rem;
  height: 9rem;
  object-fit: cover;
  border-radius: 4px;
}

.diary-preview input {
  margin: 0;
  font-size: 0.8rem;
}

.diary-remove {
  align-self: flex-end;
  padding: 0.2rem 0.5rem;
  line-height: 0;
}

.diary-remove svg {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

/* An existing photo marked for deletion on save. */
.diary-preview--deleting {
  opacity: 0.45;
}

.diary-entry {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.diary-entry__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* Override Pico's `article > header` negative margins/background so the entry's
     top border stays visible and the header doesn't render as a full-width bar. */
  margin: 0;
  padding: 0.5rem 0rem;
  background: none;
}

.diary-entry__author {
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* The diary edit form reuses .report-form-wrapper but gets more room. */
.diary-edit-wrapper {
  max-width: 900px;
}

.diary-entry__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.diary-entry__actions form {
  margin: 0;
}

.diary-entry__actions .btn {
  margin: 0;
}

.diary-photo {
  margin: 0;
  width: 10rem;
}

.diary-photo img {
  width: 10rem;
  height: 7.5rem;
  object-fit: cover;
  border-radius: 4px;
}

.diary-photo figcaption {
  font-size: 0.8rem;
}

/* ============================== AVATARS ============================== */

/* Round user avatar — either the uploaded photo or an initials circle (see partials/avatar.html). */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  background-color: var(--color-secondary);
  color: #fff;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

img.avatar {
  /* photos fill the circle; the border is only meaningful for overlapping clusters (see below) */
  border: none;
}

.avatar--sm {
  width: 18px;
  height: 18px;
  font-size: 0.5rem;
}

.avatar--md {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
}

.avatar--lg {
  width: 96px;
  height: 96px;
  font-size: 2rem;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.avatar-form {
  margin: 0.5rem 0 1rem;
}

.avatar-form > input {
  width: 100%;
  margin-bottom: var(--space);
}
/* ============================== ASSIGNEE PICKER (chips + datalist) ============================== */

.assignee-field {
  margin-bottom: var(--space);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(20, 68, 51, 0.12);
  font-size: 0.85rem;
}

.chip-remove {
  padding: 0;
  margin: 0;
  width: auto;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}

.assignee-input {
  margin: 0;
}

/* ============================== MODAL STACKING ==============================
   Three layers are in play once a modal can open a modal. .modal is 1000 (see above); anything
   opened from inside one needs to sit above it, and the Kyllä/Ei confirmation above everything. */

.modal--nested {
  z-index: 1100;
}

.modal--confirm {
  z-index: 1200;
}

.modal-content--narrow {
  max-width: 380px;
}

/* ============================== EVENT DEPENDENCIES ============================== */

.dependency-field {
  margin-bottom: 10px;
}

.dependency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  width: auto;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  font-size: inherit;
}

.dependency-chevron {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  color: var(--color-primary);
  transition: transform 0.15s ease;
}

.dependency-toggle[aria-expanded="true"] .dependency-chevron {
  transform: rotate(90deg);
}

.dependency-count {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.dependency-panel {
  padding: 0.5rem 0 0 1.35rem;
}

.dependency-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dependency-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}

.dependency-text {
  flex: 1;
  font-size: 0.85rem;
}

.dependency-remove {
  padding: 0;
  margin: 0;
  width: auto;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}

.dependency-empty,
.dependency-error {
  margin: 0.2rem 0;
  font-size: 0.85rem;
}

.dependency-empty {
  color: var(--color-muted);
}

.dependency-error {
  color: var(--color-danger);
}

.dependency-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
}