/* public/css/custom.css — shared styles for every page. */

/* App nav (used by every authenticated page) */
nav.app-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 var(--pico-spacing) 0;
  padding: 0.4em 0.8em;
  border-radius: var(--pico-border-radius);
  font-family: sans-serif;
}
nav.app-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1.2em;
}
nav.app-nav li { display: flex; align-items: center; }
nav.app-nav a { text-decoration: none; }
nav.app-nav a[aria-current="page"] { font-weight: 700; color: var(--pico-primary); }
nav.app-nav button.icon-btn {
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--pico-color);
  cursor: pointer;
}
nav.app-nav button.icon-btn svg { width: 20px; height: 20px; }

/* Bill type tags */
.tag-hw  { background-color: rgb(9,100,0);   color: #fff; padding: 0 0.4em; border-radius: var(--pico-border-radius); font-weight: bold; margin-left: 0.5em; }
.tag-hrs { background-color: rgb(9,0,100);    color: #fff; padding: 0 0.4em; border-radius: var(--pico-border-radius); font-weight: bold; margin-left: 0.5em; }
.tag-rly { background-color: rgb(100,100,0);  color: #fff; padding: 0 0.4em; border-radius: var(--pico-border-radius); font-weight: bold; margin-left: 0.5em; }
.tag-hst { background-color: rgb(100,0,0);    color: #fff; padding: 0 0.4em; border-radius: var(--pico-border-radius); font-weight: bold; margin-left: 0.5em; }
.vat-tag { color: rgb(33, 33, 255); font-weight: bold; padding: 0 0.3em; }

/* Buttons + form bits */
.button-bar { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.input-group { display: flex; align-items: center; gap: 0.3em; flex-wrap: wrap; }
.input-group > * { vertical-align: middle; }
.input-group select { height: 2.2rem; }
.row-actions { display: inline-flex; gap: 0.3em; margin-left: 0.5em; }
.row-actions button { padding: 0.05rem 0.35rem; line-height: 1; }
.flash { font-size: 0.85rem; font-weight: 600; margin: 0.5rem 0; }
.flash--ok  { color: green; }
.flash--err { color: rgb(220, 50, 47); }

/* Tables */
table.app {
  margin-top: var(--pico-spacing);
  font-family: 'Open Sans Condensed', sans-serif;
}
table.app thead { background-color: var(--pico-card-background-color); }
table.app td, table.app th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--pico-spacing-1) var(--pico-spacing);
}
table.app th { font-weight: 600; font-size: 0.95em; }
table.app td.description { overflow: visible; vertical-align: middle; }
table.app td .description-span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
table.app tbody input[type="checkbox"],
table.app thead input[type="checkbox"] { margin-right: 0.4em; }
table.app tr.sum-row { font-weight: 700; }
table.app tr.empty td { text-align: center; padding: 2em; color: var(--pico-muted-color); }

/* Column widths (used by bills / expenses) */
.col-date  { width: 7em; }
.col-qty   { width: 4em; text-align: center; }
.col-unit  { width: 6em; text-align: right; }
.col-total { width: 7em; text-align: right; }
.col-vat   { width: 6em; text-align: right; }
.col-user  { width: 6em; }
.col-desc  { white-space: nowrap; max-width: clamp(100px, 30vw, 700px); position: relative; }

/* Two-column layout (form on the left, list on the right) */
.container-fluid { display: flex; flex-wrap: wrap; gap: 1em; margin-top: 0; }
@media (min-width: 1024px) {
  .main-content { max-width: 480px; flex-shrink: 0; }
  .right-column { align-items: start; flex-grow: 1; margin-top: 0.4em; }
  .hide-wide { display: table-cell; }
}
@media (max-width: 1024px) {
  .container-fluid { flex-direction: column; }
  .main-content, .right-column { width: 100%; }
  .hide-wide { display: none; }
}

/* Body padding for the working pages (compact like the old bill.html) */
body { padding: 0.4em 0.4em 0 0.4em; }

/* Force dialogs above any inline SVGs. */
dialog { z-index: 100; }

/* Stop the form's default browser-zoom on mobile. */
input, select, textarea { font-size: 1rem; }

/* Disabled button = dimmed, not dead. */
button:disabled { opacity: 0.5; cursor: not-allowed; }