/* Fiti Cooperative System — shared design tokens and components.
   Served at /assets/fiticooperative/css/fcs.css and used by /FCS, /login and /portal. */

:root {
  --brand: #0B5F44; --brand-2: #0E7A57; --brand-3: #10B981;
  --gold: #C9A227; --gold-ink: #8A6A0F;
  --teal: #0D7C86; --violet: #6D5BD0;
  --ok: #157F4A; --warn: #A66A08; --bad: #B3372A;

  --bg: #F5F8F6; --surface: #FFFFFF; --surface-2: #FAFCFB; --hover: #EFF4F1;
  --text: #0F1C18; --muted: #566761; --border: #E0E7E3;

  --shadow-sm: 0 1px 2px rgba(11,40,30,.06);
  --shadow: 0 1px 2px rgba(11,40,30,.05), 0 6px 20px rgba(11,40,30,.06);
  --shadow-lg: 0 24px 64px rgba(6,24,18,.18);
  --radius: 13px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Light emerald is the default everywhere, regardless of the device setting.
     Dark applies only when the viewer presses Toggle theme, which sets
     data-theme="dark" and persists it in localStorage. */
  color-scheme: light;
}

:root[data-theme="dark"] {
  --brand: #2FB88A; --brand-2: #52D6A6; --brand-3: #34D399;
  --gold: #E0B44F; --gold-ink: #E0B44F;
  --teal: #3FBDC7; --violet: #9B8BF4;
  --ok: #4ECB80; --warn: #E3A93D; --bad: #F2705C;

  --bg: #0A100E; --surface: #101815; --surface-2: #15201C; --hover: #1B2622;
  --text: #E8F0EC; --muted: #8E9E97; --border: #223029;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow: 0 1px 2px rgba(0,0,0,.32), 0 8px 26px rgba(0,0,0,.30);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; }
.muted { color: var(--muted); }
.grow { flex: 1; }

/* ---------- brand mark ---------- */
.logo {
  border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--brand), var(--brand-2) 60%, var(--brand-3));
  font-weight: 700; letter-spacing: .4px; box-shadow: var(--shadow-sm);
}

.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--brand), var(--brand-2));
  color: #fff; font-size: 12px; font-weight: 640; letter-spacing: .3px;
}

/* ---------- buttons ---------- */
.btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
  padding: 8px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 550;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn.primary {
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  border-color: var(--brand); color: #fff; box-shadow: var(--shadow-sm);
}
.btn.primary:hover { filter: brightness(1.08); color: #fff; border-color: var(--brand-2); }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn.block { width: 100%; padding: 11px 14px; font-size: 14.5px; }

.iconbtn {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer;
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
}
.iconbtn:hover { color: var(--brand); border-color: var(--brand); }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.pad { padding: 18px 20px; }
.grid { display: grid; gap: 16px; }
h3.ct { margin: 0 0 2px; font-size: 14px; font-weight: 620; letter-spacing: -.005em; }
p.ch { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 560; border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); background: color-mix(in srgb, var(--warn) 7%, transparent); }
.badge.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); background: color-mix(in srgb, var(--bad) 7%, transparent); }
.badge.info { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 35%, var(--border)); background: color-mix(in srgb, var(--teal) 7%, transparent); }
.badge.gold { color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 40%, var(--border)); background: color-mix(in srgb, var(--gold) 10%, transparent); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  font-weight: 620; padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; }

/* ---------- form fields ---------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label { font-size: 12px; font-weight: 560; color: var(--muted); }
.field .req { color: var(--bad); }
.field input[type=text], .field input[type=date], .field input[type=number],
.field input[type=email], .field input[type=password], .field input[type=tel],
.field select, .field textarea {
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 9px;
  padding: 9px 11px; width: 100%; font-size: 13.5px; transition: border-color .12s, box-shadow .12s;
}
.field textarea { resize: vertical; min-height: 74px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.field.checkrow { flex-direction: row; align-items: center; gap: 9px; }
.field.checkrow label { color: var(--text); font-size: 13.5px; font-weight: 500; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand); }

/* ---------- lists ---------- */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.row:first-child { border-top: 0; }
.row .main { flex: 1; min-width: 0; }
.row .name { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .meta { font-size: 12px; color: var(--muted); margin-top: 1px; }
.row .num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.check { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.check:first-child { border-top: 0; }
.check .box {
  width: 17px; height: 17px; border-radius: 5px; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--border); color: #fff; font-size: 10px; font-weight: 700;
}
.check.done .box { background: var(--ok); border-color: var(--ok); }
.check.done .box::after { content: "\2713"; }
.check.pending { color: var(--muted); }

.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 18px; }
.stat .k { font-size: 11.5px; color: var(--muted); }
.stat .v { font-size: 17px; font-weight: 620; font-variant-numeric: tabular-nums; margin-top: 2px; }

.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend b { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.empty { padding: 42px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }
.empty b { display: block; color: var(--text); font-size: 15px; font-weight: 600; margin-bottom: 5px; }

.spinner {
  width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .7s linear infinite; margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- toasts ---------- */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: 10px; box-shadow: var(--shadow); padding: 11px 15px; font-size: 13.5px; max-width: 380px;
}
.toast.bad { border-left-color: var(--bad); }
.toast b { display: block; margin-bottom: 2px; }
.toast .m { color: var(--muted); font-size: 12.5px; }