/* IMTG controls: shared, unlayered rules intentionally override legacy layout styles.
   Loaded by both base.html and auth.html. See DESIGN_GUIDELINES.md. */
:root {
  --control-bg: #121c16;
  --control-border: #42594a;
  --control-text: #edf4ed;
  --action-primary: #2c603d;
  --action-primary-hover: #367449;
  --action-primary-border: #4a865a;
  --action-secondary: #1b2921;
  --action-secondary-hover: #293b2f;
  --action-secondary-border: #64776a;
  --action-danger: #3b2324;
  --action-danger-hover: #512c2c;
  --action-danger-border: #89534f;
  --action-disabled: #26312a;
  --action-disabled-text: #91a097;
  --control-focus: #a4e5b0;
  --control-radius: 9px;
  --control-height: 44px;
  --control-font: Inter, 'Segoe UI', Arial, sans-serif;
}
/* Bare native actions receive the primary treatment automatically. */
:where(button, input[type='submit'], input[type='button'], input[type='reset'], .button, .primary-button, .subtle-button, .review-button) {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  max-width: 100%;
  padding: 12px 20px;
  border: 1px solid var(--action-primary-border);
  border-radius: var(--control-radius);
  background: var(--action-primary);
  color: #f1faf3;
  font: 600 13px/1.45 var(--control-font);
  letter-spacing: .1px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  box-shadow: 0 1px 2px #00000025;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
:where(button, input[type='submit'], input[type='button'], input[type='reset'], .button, .primary-button, .subtle-button, .review-button):hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--action-primary-hover);
  border-color: #70a87e;
}
:is(.button--secondary, .subtle-button, .review-button--secondary, input[type='reset']) {
  background: var(--action-secondary);
  border-color: var(--action-secondary-border);
  color: #d9e5dc;
  box-shadow: none;
}
:is(.button--secondary, .subtle-button, .review-button--secondary, input[type='reset']):hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--action-secondary-hover);
  border-color: #8da795;
  color: #ffffff;
}
:is(.button--danger, .reject-button) {
  background: var(--action-danger);
  border-color: var(--action-danger-border);
  color: #f3cbc6;
  box-shadow: none;
}
:is(.button--danger, .reject-button):hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--action-danger-hover);
  border-color: #b77b73;
  color: #fff0ed;
}
:is(button, input[type='submit'], input[type='button'], input[type='reset'], .button):active:not(:disabled):not([aria-disabled='true']) {
  box-shadow: inset 0 2px 4px #00000050;
}
:is(button, input[type='submit'], input[type='button'], input[type='reset'], .button):is(:disabled, [aria-disabled='true']) {
  background: var(--action-disabled);
  border-color: #405047;
  color: var(--action-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .75;
}
.button--compact { min-height: 40px; padding: 9px 14px; font-size: 12px; }
.signout { margin: 12px 0 0; }
/* Every ordinary field, including future dropdowns, inherits these defaults. */
:where(input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):not([type='range']):not([type='color']), textarea, select) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: 12px 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--control-text);
  font: 400 14px/1.65 var(--control-font);
  box-shadow: inset 0 1px 2px #00000020;
}
textarea { resize: vertical; }
:where(label) { display: block; color: #dceade; font-size: 13px; font-weight: 600; line-height: 1.6; }
:where(label)>:is(input, textarea, select) { margin-top: 9px; }
:where(input, textarea)::placeholder { color: #94a79a; opacity: 1; }
select {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, #b8cfbf 50%), linear-gradient(135deg, #b8cfbf 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
select[multiple] { background-image: none; padding-right: 14px; }
option { background: var(--control-bg); color: var(--control-text); }
:where(label:has(input[type='checkbox']), label:has(input[type='radio'])) { display: flex; align-items: flex-start; gap: 11px; }
input:is([type='checkbox'], [type='radio']) {
  appearance: none;
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 3px 0 0;
  padding: 0;
  border: 1px solid #6c8c77;
  border-radius: 4px;
  background: var(--control-bg);
  vertical-align: middle;
  cursor: pointer;
}
input[type='checkbox']:checked {
  background: var(--action-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m4 9 3 3 7-7' fill='none' stroke='%23f1faf3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  border-color: #86bb91;
}
input[type='radio'] { border-radius: 50%; }
input[type='radio']:checked { background: radial-gradient(circle, #d0efd7 0 35%, var(--action-primary) 39%); border-color: #86bb91; }
:is(input, textarea, select):disabled, input:is([type='checkbox'], [type='radio']):disabled { background-color: #26312a; border-color: #405047; color: var(--action-disabled-text); cursor: not-allowed; opacity: .75; }
input[readonly], textarea[readonly] { color: #becbc2; }
:is(input, textarea, select):user-invalid { border-color: #bb7972; }
input[type='range'], input[type='color'] { accent-color: var(--action-primary); }
input[type='file']::file-selector-button { border: 1px solid var(--action-secondary-border); border-radius: 6px; padding: 7px 12px; margin-right: 12px; background: var(--action-secondary); color: var(--control-text); font: inherit; cursor: pointer; }
:is(button, input, textarea, select, .button, summary, a):focus-visible { outline: 2px solid var(--control-focus); outline-offset: 3px; }
:is(input, textarea, select):hover:not(:disabled):not(:focus) { border-color: #72927e; }
:is(input, textarea, select):focus { outline: 2px solid var(--control-focus); outline-offset: 2px; border-color: var(--control-focus); }
.form-actions, .review-actions, .approval-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
:is(.form-actions, .review-actions, .approval-actions)>form { margin: 0; }
.form-field { margin: 0 0 22px; }
.form-help { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 8px 0 18px; }
.form-confirmation, .review-confirmation { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: start; gap: 13px; padding: 18px; border: 1px solid #3c5845; border-radius: 10px; background: #182b1f; cursor: pointer; }
:is(.form-confirmation, .review-confirmation)>span { min-width: 0; }
:is(.form-confirmation, .review-confirmation) strong { display: block; font-size: 13px; font-weight: 650; color: #e7f3e9; margin-bottom: 5px; }
:is(.form-confirmation, .review-confirmation) span span { display: block; color: #b5c8ba; font-size: 13px; line-height: 1.7; }
@media(max-width:600px) {
  :is(input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']), textarea, select) { font-size: 16px; }
  .form-actions, .review-actions, .approval-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  :is(.form-actions, .review-actions, .approval-actions)>:is(button, .button, form), :is(.form-actions, .review-actions, .approval-actions)>form>button { width: 100%; }
  .form-confirmation, .review-confirmation { padding: 15px 13px; gap: 11px; }
  .chat-compose { flex-wrap: wrap; }
  .chat-compose textarea { flex-basis: 100%; }
  .chat-compose button { width: 100%; }
  .setting-row { flex-wrap: wrap; }
  .setting-row>* { min-width: 0; overflow-wrap: anywhere; }
}
@media(prefers-reduced-motion:reduce) {
  :is(button, input, textarea, select, .button) { transition: none; }
}

/* Reusable configuration, evidence and announcement review text. */
.review-copy { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.graphic-preview { display: block; max-width: 100%; height: auto; }

/* Read-only per-match setup progress: PractiScore (7 steps), Sheets, Email, Discord, Instagram. */
:root { --stage-done: #3e8050; --stage-done-text: #adeebb; --stage-owner: #786638; --stage-owner-text: #dace9d;
  --stage-blocked: #864b48; --stage-blocked-text: #f2b5a5; --stage-active: #4a865a; --stage-waiting: #42594a; --stage-waiting-text: #91a097; }
.setup-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.setup-bar__stage { display: flex; flex: 1 1 120px; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--stage-waiting); border-radius: var(--control-radius); color: var(--stage-waiting-text); font: 600 12px/1.4 var(--control-font); }
.setup-bar__stage:first-child { flex: 2 1 220px; }
.setup-bar__name { color: var(--control-text); overflow-wrap: anywhere; }
.setup-bar__state { font-weight: 500; }
.setup-bar__pips { display: flex; gap: 4px; }
.setup-bar__pip { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--stage-waiting); }
.setup-bar__stage--done { border-color: var(--stage-done); color: var(--stage-done-text); }
.setup-bar__pip--done { background: var(--stage-done); }
.setup-bar__stage--active { border-color: var(--stage-active); border-style: dashed; color: var(--control-text); }
.setup-bar__stage--approved { border-color: var(--stage-done); border-style: dashed; color: var(--stage-done-text); }
.setup-bar__pip--active { background: repeating-linear-gradient(90deg, var(--control-focus) 0 4px, transparent 4px 7px); }
.setup-bar__stage--owner { border-color: var(--stage-owner); color: var(--stage-owner-text); }
.setup-bar__pip--owner { background: var(--stage-owner); }
.setup-bar__stage--blocked { border-color: var(--stage-blocked); color: var(--stage-blocked-text); }
.setup-bar__pip--blocked { background: var(--stage-blocked); }
@media (max-width: 600px) { .setup-bar__stage { flex-basis: calc(50% - 4px); } .setup-bar__stage:first-child { flex-basis: 100%; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* IMTG Flyer Agent: feed + story preview pair, AI note and compact wording form (templates/_flyer_agent.html). */
.flyer-previews { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin: 16px 0 12px; }
.flyer-previews figure { margin: 0; min-width: 0; }
.flyer-previews .graphic-preview { border: 1px solid #35493b; border-radius: 8px; }
.flyer-previews figure:first-child .graphic-preview { width: 280px; }
.flyer-previews figure + figure .graphic-preview { width: 197px; }
.flyer-previews figcaption { margin-top: 6px; color: var(--muted); font-size: 11px; }
.flyer-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.flyer-design { border: 1px solid #35493b; padding: 4px 10px; border-radius: 40px; font-size: 11px; font-weight: 700; color: #b5efbd; white-space: nowrap; }
.flyer-design--plain { color: var(--muted); }
.flyer-issues { margin: 4px 0 12px; padding-left: 20px; color: #dace9d; font-size: 13px; line-height: 1.6; }
.flyer-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.flyer-edit { margin-top: 16px; }
.flyer-edit summary { cursor: pointer; color: #b5efbd; font-size: 13px; font-weight: 600; padding: 6px 0; }
.flyer-edit[open] summary { margin-bottom: 14px; }
.flyer-agent h3 { margin: 0 0 8px; }
.website-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 12px 0; font-size: 13px; }
.website-facts dt { color: var(--muted); }
.website-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .website-facts { grid-template-columns: 1fr; } .website-facts dd { margin-bottom: 6px; } }
@media (max-width: 600px) { .flyer-fields { grid-template-columns: 1fr; } .flyer-previews figure:first-child .graphic-preview, .flyer-previews figure + figure .graphic-preview { width: 100%; } }

/* Match Director tab bar: breathing room below the tabs */
.md-tabs{margin-bottom:2rem;padding-bottom:1.25rem;border-bottom:1px solid rgba(255,255,255,.08);}
/* Reusable compact evidence cards and expandable two-column forms. */
.receipt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1168px; gap: 14px; align-items: start; margin: 12px 0 18px; }
.receipt-card { min-width: 0; max-width: 380px; padding: 12px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--panel); font-size: .9em; }
.receipt-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.receipt-card__vendor { min-width: 0; margin: 0; font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-card__amount { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.receipt-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 7px 0; font-size: 12px; color: var(--muted); }
.receipt-card__description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 7px 0 10px; }
.receipt-card__needs { margin: 7px 0 10px; }
.status-chip { display: inline-block; max-width: 100%; border: 1px solid var(--control-border); border-radius: 20px; padding: 2px 7px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; color: var(--control-text); }
.status-chip--attention { color: #f3d28d; background: #352d1d; border-color: #8d7544; }
.compact-actions { display: flex; flex-wrap: wrap; align-items: start; gap: 6px; }
.compact-actions > form { margin: 0; }
.compact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 12px; }
.compact-fields .form-field { min-width: 0; margin: 0; font-size: 12px; }
.compact-fields__wide { grid-column: 1 / -1; min-width: 0; }
.compact-fields :is(input, select, textarea) { padding: 8px 10px; max-width: 100%; }
.compact-fields input[type='date'] { width: 19ch; }
.compact-fields input[type='number'] { width: 11ch; }
.compact-fields input[name='last4'] { width: 9ch; }
.receipt-editor { min-width: 0; }
.receipt-editor[open] { flex: 1 0 100%; order: 5; }
.receipt-editor > summary { list-style: none; }
.receipt-editor > summary::-webkit-details-marker { display: none; }
.receipt-add { max-width: 380px; margin: 14px 0; }
.receipt-add[open] { padding: 12px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--panel); }
.receipt-add > summary { list-style: none; }
.receipt-add > summary::-webkit-details-marker { display: none; }
.receipt-files { min-width: 0; }
.receipt-files > summary { list-style: none; gap: 5px; }
.receipt-files > summary::-webkit-details-marker { display: none; }
.receipt-files__list { list-style: none; margin: 5px 0 0; padding: 5px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--control-bg); }
.receipt-files__list a { display: flex; align-items: center; min-height: var(--control-height); padding: 6px 9px; text-decoration: underline; }
@media (max-width: 1100px) { .receipt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .receipt-grid { grid-template-columns: minmax(0, 1fr); } .receipt-card { width: 100%; } }
/* Shared financial summaries and scrollable data cards. */
.finance-tiles{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 20px}
.finance-tile{flex:1 1 180px;min-width:0;padding:18px;border:1px solid var(--control-border);border-radius:12px;background:var(--panel);display:grid;gap:8px}
.finance-tile small,.finance-tile span{color:var(--muted);font-size:12px}
.finance-tile strong{font-size:28px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.table-card{min-width:0;max-width:100%;margin:24px 0;border:1px solid var(--control-border);border-radius:12px;background:var(--panel);overflow:hidden}
.table-card--totals{max-width:640px}
.table-card__header{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:18px}
.table-card__header h2{margin-right:auto}
.table-filters{display:flex;align-items:end;flex-wrap:wrap;gap:8px;margin:0}
.table-filters .form-field{margin:0;font-size:12px}
.table-filters input{width:calc(4ch + 4rem);min-width:calc(4ch + 4rem)}
.table-card__scroll{max-width:100%;overflow-x:auto}
.table-card__scroll:focus-visible{outline:2px solid var(--green);outline-offset:-3px}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table caption{text-align:left;padding:8px 18px;color:var(--muted)}
.data-table th,.data-table td{text-align:left;padding:12px 18px;border-bottom:1px solid var(--control-border);vertical-align:middle}
.data-table thead{background:#26352c;color:#c6d8ca}
.data-table tbody tr:nth-child(even){background:#ffffff04}
.data-table tbody tr:hover{background:#ffffff09}
.data-table tfoot{font-weight:750;border-top:2px solid var(--control-border);background:#223329}
.data-table .money{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.money-zero{color:var(--muted)}
.expense-table{min-width:900px}
.table-description{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-tax{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.category-share{min-width:125px}
.category-share meter{display:block;width:100%;height:8px;accent-color:#77ae87}
.category-share meter::-webkit-meter-bar{background:#101b14;border:0}
.category-share meter::-webkit-meter-optimum-value{background:#77ae87}
.category-share small{display:block;text-align:right;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.table-card__details{padding:14px 18px}
.table-card__details summary{cursor:pointer;color:var(--green);font-size:13px}
.table-card__details[open] summary{margin-bottom:12px}
.table-footnote{padding:0 18px 14px;color:var(--muted);font-size:12px;line-height:1.6}
.status-chip--posted{background:#203e2a;border-color:#41694b;color:#b5e6bf}
.posted-rows{list-style:none;padding:0;margin:0}
.posted-rows li{padding:10px 0;border-bottom:1px solid var(--control-border);font-size:13px}
.posted-rows span{color:var(--muted)}
@media(max-width:600px){.finance-tile{flex-basis:140px;padding:14px}.finance-tile strong{font-size:24px}.table-card__header{align-items:start}.table-filters{width:100%}.data-table th,.data-table td{padding:10px 12px}}

.money-positive{color:#8ed4a4}
.money-negative{color:#f1a3a3}

/* Finance lists: native month disclosures and stable, readable table cells. */
.finance-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.finance-categories>.table-card{min-width:0;max-width:none}
.finance-month{border-top:1px solid var(--control-border);min-width:0}
.finance-month>summary,.finance-section>summary{padding:16px 18px;cursor:pointer;font-weight:650}
.finance-section{min-width:0}
.data-table .table-date{white-space:nowrap}
.data-table .table-category{text-align:center;min-width:230px}
.category-chip{white-space:nowrap;overflow-wrap:normal;text-align:center;max-width:none}
.category-control{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.category-editor{min-width:0}
.category-editor>summary{list-style:none}
.category-editor>summary::-webkit-details-marker{display:none}
.category-editor[open]{flex-basis:100%}
.category-editor form{display:flex;align-items:end;justify-content:center;flex-wrap:wrap;gap:8px;margin:8px 0}
.category-editor label{display:grid;gap:4px;text-align:left}
.table-muted{color:var(--muted)}
.table-description .table-muted{display:block;font-size:11px}
@media(max-width:800px){.finance-categories{grid-template-columns:minmax(0,1fr)}}
/* Member setup / sign-in extras */
.auth-check{display:flex!important;gap:10px;align-items:center}.auth-check input{display:inline-block!important;width:auto!important;margin:0!important}
.auth-first{font-size:13px;margin:18px 0 0;color:#d6e7da}.auth-first a{color:#b5f0be;text-decoration:underline}
.topbar-right{display:flex;align-items:center;gap:14px}.topbar-signout{margin:0}.topbar-signout .button{white-space:nowrap}
@media(max-width:730px){.topbar-right .state-pill{display:none}}
.side-label--big{font-size:12.5px;color:#b9d6be;letter-spacing:2.2px;padding-top:6px;border-top:1px solid var(--border);margin-top:14px;padding-left:12px}
.owner-nav{margin-top:6px}
.brand-logo{height:48px;width:auto;flex-shrink:0;display:block}
.brand:has(.brand-logo){gap:10px;padding-left:2px;padding-right:0}
.brand:has(.brand-logo) b{white-space:nowrap;letter-spacing:1.1px}
@media(max-width:730px){.brand-logo{height:44px}}
.privacy-card{width:min(640px,100%)}.privacy-card h2{font-size:15px;margin:18px 0 6px}.privacy-card ul{margin:0 0 6px;padding-left:20px;color:#d6e7da}.privacy-card li{margin:4px 0}.privacy-card p{color:#d6e7da}.privacy-card a,.auth-note a{color:#b5f0be;text-decoration:underline}.privacy-line{font-size:12px;margin:0 0 16px}
.footer a{text-decoration:underline}
