/* tideline — single static stylesheet (M2 app shell). */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; color: #1f2430; background: #fff; }

/* Shell */
body.with-sidebar { display: flex; min-height: 100vh; }
.sidebar {
  flex: 0 0 13rem; background: #1f2430; color: #e8eaf0;
  padding: 1.25rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem;
}
.sidebar .org-name { font-weight: 700; padding: 0.4rem 0.6rem; margin-bottom: 0.75rem; border-bottom: 1px solid #3a4152; }
.sidebar a, .sidebar button.linklike {
  display: block; width: 100%; text-align: left; color: #c9cede; text-decoration: none;
  background: none; border: 0; font: inherit; padding: 0.4rem 0.6rem; border-radius: 4px; cursor: pointer;
}
.sidebar a:hover, .sidebar button.linklike:hover { background: #2a3040; color: #fff; }
.sidebar a.active { background: #39415a; color: #fff; font-weight: 600; }
.sidebar form { margin-top: auto; }
main { flex: 1 1 auto; padding: 1.5rem 2rem; max-width: 72rem; }
body.plain main { margin: 3rem auto; max-width: 26rem; }

/* Tables & forms */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #d8dbe2; }
label { display: block; margin: 0.5rem 0; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], select { width: 20rem; max-width: 100%; }
textarea { width: 20rem; max-width: 100%; height: 5rem; }
form.inline { display: inline; }
.actions { margin-top: 1rem; }

/* Kanban board */
.board { display: flex; gap: 1rem; align-items: flex-start; overflow-x: auto; padding-bottom: 1rem; }
.stage-column {
  flex: 0 0 14rem; background: #f1f3f7; border-radius: 8px; padding: 0.6rem;
  min-height: 12rem;
}
.stage-column h2 { font-size: 0.95rem; margin: 0 0 0.2rem; }
.stage-column .stage-total { font-size: 0.85rem; color: #5a6272; margin: 0 0 0.6rem; }
.stage-column.drag-over { outline: 2px dashed #39415a; outline-offset: -4px; }
.deal-card {
  background: #fff; border: 1px solid #d8dbe2; border-radius: 6px;
  padding: 0.5rem 0.6rem; margin: 0.5rem 0; cursor: grab; display: block; text-decoration: none; color: inherit;
}
.deal-card:hover { border-color: #9aa3b8; }
.deal-card .deal-title { font-weight: 600; display: block; }
.deal-card .deal-contact { font-size: 0.85rem; color: #5a6272; display: block; }
.deal-card .deal-value { font-size: 0.9rem; color: #1f6f43; display: block; margin-top: 0.15rem; }

/* Settings — integration cards */
.card { border: 1px solid #d8dbe2; border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0; max-width: 34rem; }
.card h2 { margin-top: 0; font-size: 1.05rem; }
.card .flash { color: #1f6f43; }
.card .hint { font-size: 0.85rem; color: #5a6272; }
.card button.toggle { margin-left: 0.4rem; }
.checklist { background: #f1f3f7; border-radius: 8px; padding: 0.75rem 1.25rem; max-width: 34rem; }
.checklist h2 { font-size: 1rem; margin: 0.25rem 0; }
.checklist ul { list-style: none; padding-left: 0.25rem; margin: 0.5rem 0; }
.checklist li { margin: 0.3rem 0; }

/* Invoices — status chips */
.chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.chip.draft { background: #e4e7ee; color: #3a4152; }
.chip.open { background: #dbeafe; color: #1e40af; }
.chip.paid { background: #dcfce7; color: #166534; }
.chip.void { background: #fee2e2; color: #991b1b; }
.chip.pending_verification { background: #fef3c7; color: #92400e; }
.chip.verified { background: #dcfce7; color: #166534; }
.chip.rejected { background: #fee2e2; color: #991b1b; }

/* Public pay page + rails tabs */
body.pay-page main { max-width: 34rem; }
.tabs { margin-top: 1rem; }
.tab-button { padding: 0.35rem 0.9rem; border: 1px solid #d8dbe2; background: #f1f3f7; cursor: pointer; }
.tab-button.active { background: #fff; font-weight: 600; }
.tab-panel { display: none; border: 1px solid #d8dbe2; padding: 0.75rem 1rem; }
.tab-panel.active { display: block; }
.flash { color: #1f6f43; }

/* Template builder */
.builder { display: flex; gap: 1.5rem; align-items: flex-start; }
.builder-edit { flex: 1 1 50%; }
.builder-preview { flex: 1 1 50%; }
.block-row { border: 1px solid #d8dbe2; border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
.block-row label { display: inline-block; margin: 0.2rem 0.6rem 0.2rem 0; }
.block-row input { width: 14rem; }
.block-row.locked { background: #f1f3f7; color: #5a6272; }