/* Canoe Networks — Quetico / Boundary Waters dark theme.
   Deep north-woods night palette with pine / lake / canoe-red / portage-amber
   accents, over a faint topographic contour background. */

:root {
  --bg:        #0f1416;   /* deep night */
  --surface:   #18211f;   /* cards / table */
  --surface-2: #1f2a27;   /* hover / inputs */
  --field:     #131b19;   /* form fields */
  --ink:       #e8e3d6;   /* warm off-white text */
  --ink-soft:  #97a39c;   /* muted text */
  --line:      #2a3531;   /* hairline borders */

  --pine:      #2f7a55;   /* accent pine (toggle on, success) */
  --pine-2:    #389066;
  --pine-deep: #15302a;   /* header bar */
  --lake:      #2f93a6;   /* lake teal (links, primary) */
  --lake-2:    #3aa9bd;
  --lake-deep: #173f48;   /* table header */
  --canoe:     #d2593f;   /* canoe red — entry-point accent */
  --canoe-2:   #e06b50;
  --amber:     #d2a23f;   /* portage amber */

  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
}

/* Faint topographic background (your map). The source is white with light
   contour lines, so we invert it for dark mode -> subtle light lines.
   Tune `opacity` / `brightness` to taste. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/img/topo.jpg') center center / cover no-repeat;
  filter: invert(1) brightness(1.6);
  opacity: 0.14;
}

h1, h2, h3, h4, h5, h6,
.card-title, .modal-title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  letter-spacing: .2px;
}

a { color: var(--lake-2); }
a:hover { color: var(--lake); }

.text-muted { color: var(--ink-soft) !important; }

/* ---- Header / brand ---- */
.app-header {
  background: var(--pine-deep);
  color: #eef3ee;
  border-bottom: 3px solid var(--amber);
}
.app-header-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: .8rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.brand-logo { display: block; width: 46px; height: 46px; object-fit: contain; }
.brand-text {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #f3efe6;
  line-height: 1;
}

/* ---- Header nav ---- */
.app-nav { display: flex; align-items: center; gap: 1.25rem; }
.app-nav-link {
  color: #cfe0d4;
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
}
.app-nav-link:hover { color: #fff; border-bottom-color: var(--amber); }
.app-nav-sep { width: 1px; height: 1.4rem; background: rgba(238,243,238,.22); }
.app-user-email { font-size: .9rem; color: #bcd0c4; }

/* ---- Home / landing ---- */
.home-hero {
  min-height: calc(100vh - 78px - 3.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-figure { margin: 0; text-align: center; }
.home-image {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  border: 4px solid var(--pine-deep);
  border-radius: 10px;
}

.app-main { padding: 1.75rem 1rem; }

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
}
.card-title { color: var(--ink); }

/* ---- Buttons ---- */
.btn { border-radius: 8px; font-weight: 500; }
.btn-success { background: var(--pine);  border-color: var(--pine); color: #fff; }
.btn-success:hover, .btn-success:focus { background: var(--pine-2); border-color: var(--pine-2); color: #fff; }
.btn-primary { background: var(--lake);  border-color: var(--lake); color: #06222a; }
.btn-primary:hover, .btn-primary:focus { background: var(--lake-2); border-color: var(--lake-2); color: #06222a; }
.btn-danger  { background: var(--canoe); border-color: var(--canoe); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: var(--canoe-2); border-color: var(--canoe-2); color: #fff; }
.btn-warning { background: var(--amber); border-color: var(--amber); color: #2a2410; }
.btn-warning:hover, .btn-warning:focus { filter: brightness(1.05); color: #2a2410; }
.btn-secondary { background: #2c3733; border-color: #2c3733; color: var(--ink); }
.btn-secondary:hover { background: #36433e; border-color: #36433e; color: var(--ink); }
.btn-outline-light { color: #eef3ee; border-color: rgba(238,243,238,.45); }
.btn-outline-light:hover { background: rgba(238,243,238,.12); color: #fff; }

/* ---- Tables ---- */
table.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-striped-color: var(--ink);
  --bs-table-striped-bg: rgba(255,255,255,.025);
  --bs-table-hover-color: var(--ink);
  --bs-table-hover-bg: rgba(47,147,166,.10);
  --bs-table-active-color: var(--ink);
  --bs-table-border-color: var(--line);
  color: var(--ink);
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
}
table.table thead th {
  background: var(--lake-deep);
  color: #dcebed;
  border-color: var(--lake-deep);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

code, .alias-text {
  color: #84d4c4;
  background: rgba(47,147,166,.12);
  padding: .12rem .42rem;
  border-radius: 5px;
  font-size: .9em;
}

/* ---- Forms ---- */
.form-control, .form-select {
  background-color: var(--field);
  color: var(--ink);
  border-radius: 8px;
  border-color: var(--line);
}
.form-control::placeholder { color: #6f7a73; }
.form-control:focus, .form-select:focus {
  background-color: var(--field);
  color: var(--ink);
  border-color: var(--lake-2);
  box-shadow: 0 0 0 .2rem rgba(47,147,166,.18);
}
.form-control[readonly] { background-color: var(--surface-2); color: var(--ink-soft); }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a9b4ad' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
}
.form-label { font-weight: 500; color: var(--ink-soft); font-size: .85rem; }

#alias-preview, #c-preview, #edit-alias-preview { color: var(--canoe-2); font-weight: 600; }

/* ---- Alerts ---- */
.alert-info { background: rgba(47,147,166,.12); border-color: rgba(47,147,166,.3); color: #8fd0dd; }
.alert-danger { background: rgba(210,89,63,.14); border-color: rgba(210,89,63,.4); color: #eaa08e; }

/* ---- Modal (dark) ---- */
.modal-content { background: var(--surface); color: var(--ink); border-radius: 14px; border: 1px solid var(--line); }
.modal-header, .modal-footer { border-color: var(--line); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---- Selection / bulk bar ---- */
.bulk-bar {
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .5rem .75rem;
  margin-bottom: .75rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.bulk-bar .bulk-count { color: var(--ink-soft); font-size: .9rem; margin-right: auto; }

/* DataTables dark tweaks */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--field); color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { color: var(--ink-soft); }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--ink) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--lake-deep); border-radius: 6px; }

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .app-header-inner { flex-wrap: wrap; gap: .4rem .75rem; padding: .65rem .85rem; }
  .brand-text { font-size: 1.2rem; }
  .brand-logo { width: 38px; height: 38px; }
  .app-nav { gap: .9rem; font-size: .85rem; flex-wrap: wrap; }
  .app-nav-link { font-size: .85rem; }
  .app-user-email { display: none; }

  .app-main { padding: 1rem .5rem; }
  .container { padding-left: .4rem; padding-right: .4rem; }
  h2 { font-size: 1.4rem; }
  .card-body { padding: .6rem; }

  /* Phone: no checkboxes (single-row edit/delete only) — hide the checkbox
     column + select-all and the bulk bar; also hide redundant Keyword (prefix
     of Full Alias) and Comment (in the editor) columns. */
  #aliases th:nth-child(1), #aliases td:nth-child(1),
  #aliases th:nth-child(2), #aliases td:nth-child(2),
  #aliases th:nth-child(4), #aliases td:nth-child(4) { display: none; }
  #bulk-bar { display: none !important; }

  /* Make table + all DataTables controls the same (screen) width */
  .dt-container, .dataTables_wrapper { width: 100%; }
  #aliases { width: 100% !important; font-size: .8rem; }
  #aliases td, #aliases th { padding: .4rem .35rem; }
  /* Full Alias takes remaining width and wraps if very long */
  #aliases td:nth-child(3) { white-space: normal; word-break: break-all; }
  /* Status + Actions shrink to content */
  #aliases th:nth-child(5), #aliases td:nth-child(5),
  #aliases th:nth-child(6), #aliases td:nth-child(6) { white-space: nowrap; width: 1%; }
  /* Toggle + buttons ~10% smaller so the alias gets more room */
  #aliases .status-toggle { width: 46px; height: 22px; }
  #aliases .status-toggle .status-knob { width: 16px; height: 16px; top: 3px; }
  #aliases .status-toggle.on .status-knob { left: 3px; }
  #aliases .status-toggle.off .status-knob { left: 27px; }
  #aliases .status-toggle .status-label { font-size: 9px; top: 4px; }
  .btn-sm { padding: .18rem .34rem; font-size: .66rem; }
  #aliases .edit-btn.me-2 { margin-right: .3rem !important; }

  /* Entries-per-page (left) + Search (right) on ONE line. DataTables v2 sets
     this layout row to block/column on phones, so force a flex row. */
  .dt-container .dt-layout-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: .5rem; }
  .dt-container .dt-layout-cell { width: auto !important; text-align: left; margin: 0; }
  .dt-container .dt-layout-cell.dt-layout-end { margin-left: auto; text-align: right; }
  .dt-search input { width: 8.5rem; max-width: 46vw; }
  .dt-info { font-size: .78rem; }
}

/* ---- Login ---- */
.login-wrap { min-height: 68vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; }
.login-card .card-body { padding: 2rem; }
.login-lede { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1.25rem; }