/* === Fonts === */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/lato-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/lato-bold.ttf') format('truetype');
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; }
body {
  font-family: 'Lato', 'Droid sans', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: url('/img/tweed.png') repeat 0 0;
  color: #fff;
  line-height: 1.5;
  padding-bottom: 10em;
}
label, input, select, p {
  font-family: inherit;
}
a { color: #337ab7; }
a:hover { color: #23527c; }
h1, h2, h3, h4 { margin-bottom: 0.5rem; }
h1 small, h2 small, h3 small, h4 small { font-size: 65%; font-weight: normal; color: #999; }
dl { margin-bottom: 1rem; }
dt { font-weight: 700; }
dd { margin-left: 0; margin-bottom: 0.25rem; }
hr { border: 0; border-top: 1px solid #ddd; margin: 1rem 0; }

/* === Layout === */
.container,
.container-narrow {
  margin: 0 auto;
  padding: 0 1rem;
}
.container { max-width: 960px; }
.container-narrow { max-width: 600px; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* === Navbar === */
.navbar {
  background-color: rgba(100, 50, 50, 0.9);
  padding: 1rem;
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.navbar-brand {
  color: #ccc;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 700;
}
.navbar-brand:hover { color: #fff; }
.nav-links {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}
.nav-links a {
  color: #aaa;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.nav-links a:hover { color: #eee; }
.nav-links .active a {
  color: #eee;
  border: 2px solid #333;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #aaa;
}
.nav-right a {
  color: #aaa;
  text-decoration: none;
}
.nav-right a:hover { color: #eee; }
/* Hamburger toggle */
.nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  cursor: pointer;
  color: #ccc;
  font-size: 1.5rem;
  line-height: 1;
}
@media (max-width: 768px) {
  .nav-toggle-label { display: block; }
  .nav-links, .nav-right {
    display: none;
    width: 100%;
    flex-direction: column;
    padding-top: 0.5rem;
  }
  .nav-toggle:checked ~ .nav-links,
  .nav-toggle:checked ~ .nav-right { display: flex; }
  .nav-right { align-items: flex-start; }
}

/* === Dropdown (user menu) === */
.dropdown { position: relative; }
.dropdown-toggle {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font: inherit;
  padding: 0.25rem 0.5rem;
}
.dropdown-toggle:hover { color: #eee; }
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  min-width: 160px;
  z-index: 1000;
}
.dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block;
  padding: 0.25rem 1rem;
  color: #333;
  text-decoration: none;
}
.dropdown-menu a:hover { background: #f5f5f5; }
.dropdown-menu .divider {
  height: 1px;
  background: #ddd;
  margin: 0.25rem 0;
}
.dropdown-menu form { margin: 0; padding: 0; }
.dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.25rem 1rem;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  font: inherit;
}
.dropdown-menu button:hover { background: #f5f5f5; }

/* === Hero (jumbotron replacement) === */
.hero {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 4px;
  color: #333;
  margin-top: 1.5rem;
}

/* === Buttons === */
.btn {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  text-decoration: none;
  color: #333;
  background: #fff;
  line-height: 1.5;
}
.btn:hover { background: #e6e6e6; }
.btn-primary { background: #337ab7; color: #fff; border-color: #337ab7; }
.btn-primary:hover { background: #286090; }
.btn-danger { background: #d9534f; color: #fff; border-color: #d9534f; }
.btn-danger:hover { background: #c9302c; }
.btn-success { background: #5cb85c; color: #fff; border-color: #5cb85c; }
.btn-success:hover { background: #449d44; }
.btn-link {
  background: none;
  border: none;
  color: #337ab7;
  text-decoration: underline;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.btn-link:hover { color: #23527c; }
.btn-small { padding: 0.2rem 0.4rem; font-size: 0.85rem; }

/* === Tables === */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.5rem; text-align: left; border-bottom: 1px solid #ddd; }
tr.danger { background: #f2dede; }
.table-bordered th, .table-bordered td { border: 1px solid #ddd; }

/* === Sort indicators === */
th a.sort { text-decoration: none; color: inherit; }
th a.sort::after { content: ' \2195'; color: #999; }
th a.sort.asc::after { content: ' \2191'; }
th a.sort.desc::after { content: ' \2193'; }

/* === Forms === */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.25rem; }
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
}
input[type="checkbox"] { margin-right: 0.25rem; }
.checkbox { margin-bottom: 0.5rem; }
.checkbox label { display: flex; align-items: center; gap: 0.25rem; cursor: pointer; }
.checkbox input[type="checkbox"] { width: auto; }
fieldset { border: none; padding: 0; margin: 0; }
legend { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }

/* Horizontal form layout */
.form-horizontal .form-group { display: grid; grid-template-columns: 150px 1fr; gap: 0.5rem; align-items: start; }
.form-horizontal .form-group label { text-align: right; padding-top: 0.4rem; }
@media (max-width: 768px) {
  .form-horizontal .form-group { grid-template-columns: 1fr; }
  .form-horizontal .form-group label { text-align: left; }
}

/* Input group (organizer rows, etc.) */
.input-group { display: flex; gap: 0; margin-bottom: 0.5rem; }
.input-group input[type="text"] { border-radius: 4px 0 0 4px; }
.input-group .input-group-btn { display: flex; }
.input-group .input-group-btn .btn { border-radius: 0 4px 4px 0; }

/* === Alerts === */
.alert { padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: 4px; }
.alert-info { background: #d9edf7; color: #31708f; }
.alert-error, .alert-danger { background: #f2dede; color: #a94442; }
.alert-success { background: #dff0d8; color: #3c763d; }

/* === Cards (panel replacement) === */
.card { border: 1px solid #ddd; border-radius: 4px; background: #fff; margin-top: 1.5rem; color: #333; }
.card-header { padding: 0.75rem 1rem; background: #f5f5f5; border-bottom: 1px solid #ddd; }
.card-body { padding: 1.5rem; }

/* === Event list (home.haml) === */
.event-item { padding: 1rem; margin-bottom: 0.5rem; background: inherit; }
.event-item h4 { margin: 0 0 0.5rem; }

/* === Utilities === */
.text-center { text-align: center; }
.text-muted { color: #999; }
.float-right { float: right; }
.float-left { float: left; }
.hidden { display: none; }
.img-fluid { max-width: 100%; height: auto; }
cropper-canvas { display: block; height: 400px; }
.img-thumb { max-width: 112px; height: auto; }
.dark-background { color: #aaa; }
.mt-3 { margin-top: 3rem; }

/* === Album spacing === */
.albums-list-spacing {
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

/* === Salvattore grid (album.haml) === */
@media screen and (max-width: 480px) {
  #grid[data-columns]::before { content: '1 .column.size-1of1'; }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  #grid[data-columns]::before { content: '2 .column.size-1of2'; }
}
@media screen and (min-width: 769px) {
  #grid[data-columns]::before { content: '3 .column.size-1of3'; }
}
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }

/* === Photo overlay (prev/next arrows) === */
.overlay { position: relative; }
.overlay .float-left, .overlay .float-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
  z-index: 1;
}
.overlay .float-left { left: 0.5rem; }
.overlay .float-right { right: 0.5rem; }

/* === Party economy layout === */
.party-economy-page { color: #27333d; }
.economy-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.economy-heading {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.economy-heading h1 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.1;
}
.economy-date {
  color: #6f7a84;
  font-size: 0.95rem;
}
.economy-toolbar-actions {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.economy-stat {
  min-width: 7.5rem;
  padding: 0.6rem 0.8rem;
  background: #f6f8fa;
  border: 1px solid #dde4ea;
  border-radius: 10px;
}
.economy-stat-label {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #73808b;
}
.economy-stat-value {
  font-size: 1.1rem;
  line-height: 1.2;
  color: #1f2a33;
}
.btn-secondary {
  border-color: #cfd7df;
  background: #fff;
}
.economy-layout {
  display: grid;
  gap: 1rem;
}
.economy-card {
  background: #fff;
  border: 1px solid #dde4ea;
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 6px 18px rgba(21, 31, 38, 0.05);
}
.economy-card-consumption {
  overflow: visible;
  text-align: center;
}
.economy-card-prices {
  max-width: 32rem;
}
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.section-head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.section-heading-group {
  display: grid;
  gap: 0.55rem;
}
.economy-inline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: #f3f6f8;
  border: 1px solid #dde4ea;
  color: #53606a;
  font-size: 0.82rem;
  line-height: 1.2;
}
.meta-chip strong {
  color: #22303a;
  font-weight: 700;
}
.meta-chip-warning {
  background: #fff5e8;
  border-color: #e9c98e;
  color: #8b5f11;
}
.table-prices {
  width: 100%;
  background: #fff;
  border: 1px solid #e1e7ec;
  border-radius: 12px;
  overflow: hidden;
}
.table-prices th,
.table-prices td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid #edf1f4;
  font-size: 0.95rem;
}
.table-prices th {
  background: #f6f8fa;
  color: #51606b;
}
.table-prices tbody tr:last-child td {
  border-bottom: none;
}
.price-column {
  width: 8.5rem;
  text-align: right;
}
.table-wrap {
  display: inline-block;
  overflow: auto;
  width: fit-content;
  max-width: calc(100vw - 8rem);
  max-height: min(70vh, 46rem);
  border: 1px solid #dde4ea;
  border-radius: 12px;
  margin: 0 auto;
  text-align: left;
  vertical-align: top;
}
.table-consumption {
  width: max-content;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.table-consumption th,
.table-consumption td {
  padding: 0.2rem 0.24rem;
  border-bottom: 1px solid #e8edf1;
  border-right: 1px solid #edf2f5;
  background: #fff;
  vertical-align: middle;
}
.table-consumption thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f6f8fa;
  color: #50606b;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.table-consumption tbody tr:nth-child(even) td {
  background: #fbfcfd;
}
.table-consumption .col-name {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 5.2rem;
  max-width: 5.8rem;
  background: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  color: #24313b;
  box-shadow: 1px 0 0 #dde4ea;
}
.table-consumption thead .col-name {
  z-index: 5;
}
.table-consumption .col-article,
.table-consumption .col-quantity,
.table-consumption .col-summary {
  min-width: 2.55rem;
  text-align: right;
}
.table-consumption .col-total {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 4.55rem;
  text-align: right;
  background: inherit;
  box-shadow: inset 1px 0 0 #dde4ea;
}
.table-consumption thead .col-total {
  z-index: 4;
}
.table-consumption tfoot td {
  background: #f6f8fa;
  border-top: 2px solid #dbe3e9;
  border-bottom: none;
}
.table-consumption .is-hidden-column {
  display: none;
}
.table-consumption .has-warning {
  background: #fff7ea;
  color: #8a6116;
}
.summary-main,
.summary-sub {
  display: block;
}
.summary-main {
  font-weight: 700;
  color: #1f2b35;
  font-size: 0.78rem;
}
.summary-sub {
  margin-top: 0.08rem;
  font-size: 0.6rem;
  line-height: 1.2;
  color: #67737e;
}
.table-prices .price-input,
.table-consumption .quantity-input {
  width: 100%;
  min-width: 0;
  height: 1.45rem;
  padding: 0.05rem 0.18rem;
  border: 1px solid #ccd5dd;
  border-radius: 4px;
  background: #fff;
  color: #21303a;
  font-variant-numeric: tabular-nums;
}
.table-prices .price-input {
  text-align: right;
  max-width: 5rem;
  margin-left: auto;
  font-size: 0.82rem;
}
.table-consumption .quantity-input {
  width: 2.6rem;
  text-align: right;
  font-size: 0.82rem;
  height: 1.5rem;
  padding: 0.06rem 0.18rem;
}
.table-prices .price-input::placeholder,
.table-consumption .quantity-input::placeholder {
  color: #97a3ad;
}
.table-prices .price-input:focus,
.table-consumption .quantity-input:focus {
  outline: none;
  border-color: #2f79b3;
  box-shadow: 0 0 0 3px rgba(47, 121, 179, 0.18);
}
.table-consumption .quantity-input.is-empty {
  background: #fffdf7;
  border-color: #d6c48b;
}
.table-consumption .quantity-input.is-zero {
  color: #66727d;
}
.table-prices .price-input.is-active-value,
.table-consumption .quantity-input.is-active-value {
  background: #f7fbff;
}
.col-quantity.is-pending {
  background: #fffdf7;
}

@media (max-width: 768px) {
  .economy-toolbar {
    flex-direction: column;
  }
  .economy-toolbar-actions {
    width: 100%;
  }
  .economy-stat {
    flex: 1 1 9rem;
  }
  .section-head {
    align-items: stretch;
  }
  .section-head .btn {
    width: 100%;
  }
  .economy-card-prices {
    max-width: none;
  }
  .table-consumption .col-name {
    min-width: 4.7rem;
    max-width: 5.2rem;
  }
  .table-consumption .col-total {
    min-width: 4.2rem;
  }
  .table-wrap {
    max-width: calc(100vw - 4rem);
  }
}

/* === Stream chart === */
.stream-page { font-family: 'Lato', sans-serif; margin: 1rem; background: #fff; color: #333; }
.chart { display: flex; align-items: flex-end; gap: 2px; height: 600px; border-bottom: 2px solid #333; padding: 0 0.5rem; }
.chart-group { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.chart-bars { display: flex; flex-direction: column-reverse; width: 100%; }
.chart-bar { width: 100%; min-height: 0; transition: height 0.3s; }
.chart-label { font-size: 0.65rem; writing-mode: vertical-rl; text-orientation: mixed; margin-top: 0.25rem; max-height: 80px; overflow: hidden; }
.legend { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; }
.legend-swatch { width: 14px; height: 14px; border-radius: 2px; }

/* === Buy view === */
.buy-balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: #f8f8f8;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #eee;
}
.buy-balance-label { font-size: 0.85rem; color: #888; text-transform: uppercase; letter-spacing: 0.05em; }
.buy-balance-amount { font-size: 1.5rem; font-weight: 700; }
.buy-balance-amount.positive { color: #2a9d5c; }
.buy-balance-amount.negative { color: #c0392b; }
.buy-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  border-bottom: 1px solid #eee;
  margin: 0;
}
.buy-item:last-child { border-bottom: none; }
.buy-item-name { font-size: 1.1rem; font-weight: 600; }
.buy-item-controls { display: flex; align-items: center; gap: 1rem; }
.buy-item-count { min-width: 2rem; text-align: center; font-size: 1.25rem; font-weight: 700; }
.buy-btn {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.buy-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.buy-item.htmx-request .buy-item-controls { opacity: 0.4; pointer-events: none; }
.buy-item.htmx-request .buy-btn { cursor: wait; }

/* === Print === */
@media print { .print-hide { display: none; } }

/* === Footer === */
.footer {
  background-color: rgba(100, 50, 50, 0.9);
  padding: 1rem;
  margin-top: 2rem;
  text-align: center;
  color: #ccc;
}
.footer h4, .footer p { color: #ccc; }