/* Chara Chhavani Management System – UI matching the approved wireframes. */
:root {
	--ccms-green: #1d5236;
	--ccms-green-dark: #133d27;
	--ccms-green-soft: #e3efe7;
	--ccms-bg: #eef0ec;
	--ccms-side: #f6f7f4;
	--ccms-panel: #ffffff;
	--ccms-line: #dde2da;
	--ccms-line-soft: #edf0ea;
	--ccms-ink: #1f2a22;
	--ccms-muted: #66706a;
	--ccms-ok-bg: #dcefe2;
	--ccms-ok: #1f6b3d;
	--ccms-warn-bg: #fbe8cc;
	--ccms-warn: #8a5300;
	--ccms-bad-bg: #f8dbd7;
	--ccms-bad: #a12b1f;
	--ccms-info-bg: #e1e8f3;
	--ccms-info: #2f4f7a;
	--ccms-accent: #b4400f;
	--ccms-tint: #f2f7f2;
	--ccms-radius: 10px;
	--ccms-radius-sm: 6px;
	--ccms-font: "Mukta", "Noto Sans Devanagari", "Nirmala UI", system-ui, sans-serif;
}

/* ---------- Base ---------- */
.ccms-body { margin: 0; background: var(--ccms-bg); color: var(--ccms-ink); font: 15px/1.5 var(--ccms-font); }
.ccms-body * { box-sizing: border-box; }
.ccms-body a { color: var(--ccms-green); }
.ccms-body h1, .ccms-body h2, .ccms-body h3 { font-family: var(--ccms-font); color: var(--ccms-ink); }
.ccms-body input, .ccms-body select, .ccms-body textarea, .ccms-body button { font: inherit; color: inherit; }
.ccms-body :focus-visible { outline: 3px solid #7fb394; outline-offset: 2px; }
.ccms-body [hidden] { display: none !important; }
.ccms-muted { color: var(--ccms-muted); }
.ccms-bad { color: var(--ccms-bad); }
.ccms-warn { color: var(--ccms-warn); }
.ccms-code { font: 12px/1.4 ui-monospace, Consolas, monospace; color: var(--ccms-muted); word-break: break-all; }
@media (prefers-reduced-motion: reduce) { .ccms-body * { transition: none !important; animation: none !important; } }

/* ---------- Top bar ---------- */
.ccms-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--ccms-line); }
.ccms-top__menu { display: none; border: 1px solid var(--ccms-line); background: #fff; border-radius: var(--ccms-radius-sm); padding: 4px 10px; font-size: 18px; cursor: pointer; }
.ccms-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ccms-ink) !important; min-width: 0; }
.ccms-brand strong { display: block; font-size: 18px; font-weight: 700; line-height: 1.2; }
.ccms-brand small { display: block; font-size: 12px; color: var(--ccms-muted); }
.ccms-brand__seal { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 1.5px dashed #9aa79e; border-radius: 6px; font-size: 11px; color: var(--ccms-muted); background: #f3f5f1; text-align: center; line-height: 1.1; }
.ccms-brand--dark .ccms-brand__seal { border-color: rgba(255,255,255,.7); background: transparent; color: #fff; }
.ccms-top__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ccms-top__camp { font-weight: 600; font-size: 14px; }
.ccms-top select, .ccms-search input { height: 36px; border: 1px solid var(--ccms-line); border-radius: var(--ccms-radius-sm); padding: 0 10px; background: #fff; }
.ccms-search input { width: 240px; }
.ccms-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ccms-bad-bg); color: var(--ccms-bad); font-size: 12px; font-weight: 700; }
.ccms-user { position: relative; }
.ccms-user summary { list-style: none; cursor: pointer; height: 36px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--ccms-line); border-radius: var(--ccms-radius-sm); font-size: 14px; white-space: nowrap; }
.ccms-user summary::-webkit-details-marker { display: none; }
.ccms-user summary::after { content: "▾"; margin-left: 8px; color: var(--ccms-muted); }
.ccms-user__menu { position: absolute; right: 0; top: 42px; min-width: 200px; background: #fff; border: 1px solid var(--ccms-line); border-radius: var(--ccms-radius-sm); box-shadow: 0 8px 24px rgba(20,40,28,.12); padding: 6px; }
.ccms-user__menu a { display: block; padding: 8px 10px; border-radius: 4px; text-decoration: none; color: var(--ccms-ink) !important; }
.ccms-user__menu a:hover { background: var(--ccms-green-soft); }

/* ---------- Layout ---------- */
.ccms-layout { display: grid; grid-template-columns: 236px 1fr; min-height: calc(100vh - 63px); }
.ccms-side { background: var(--ccms-side); border-right: 1px solid var(--ccms-line); padding: 14px 10px 40px; }
.ccms-side__group { margin: 18px 8px 6px; font-size: 12px; color: var(--ccms-muted); }
.ccms-side__link { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--ccms-radius-sm); text-decoration: none; color: var(--ccms-ink) !important; font-size: 14.5px; }
.ccms-side__link:hover { background: var(--ccms-green-soft); }
.ccms-side__link.is-active { background: var(--ccms-green); color: #fff !important; font-weight: 600; }
.ccms-side__link .ccms-count { background: var(--ccms-warn-bg); color: var(--ccms-warn); }
.ccms-side__link.is-active .ccms-count { background: #fff; color: var(--ccms-green); }
.ccms-main { padding: 20px 24px 60px; min-width: 0; }

/* ---------- Page head ---------- */
.ccms-pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ccms-crumb { font-size: 12.5px; color: var(--ccms-muted); }
.ccms-pagehead h1 { margin: 2px 0 0; font-size: 26px; font-weight: 700; line-height: 1.25; }
.ccms-pagehead__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Messages ---------- */
.ccms-flash { padding: 12px 14px; border-radius: var(--ccms-radius-sm); margin: 0 0 14px; border: 1px solid; }
.ccms-flash ul { margin: 6px 0 0 18px; padding: 0; }
.ccms-flash--success { background: var(--ccms-ok-bg); border-color: #b9dcc5; color: var(--ccms-ok); }
.ccms-flash--error { background: var(--ccms-bad-bg); border-color: #efbab3; color: var(--ccms-bad); }
.ccms-flash--warn { background: #fdf3e2; border-color: #f2d6a6; color: var(--ccms-warn); }
.ccms-flash--ajax { animation: ccms-in .2s ease-out; }
@keyframes ccms-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ccms-btn.is-busy { position: relative; padding-left: 34px; cursor: progress; opacity: .85; }
.ccms-btn.is-busy::before { content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ccms-spin .7s linear infinite; }
@keyframes ccms-spin { to { transform: rotate(360deg); } }
form[aria-busy="true"] .ccms-field { opacity: .75; }

/* ---------- Panels ---------- */
.ccms-panel { background: var(--ccms-panel); border: 1px solid var(--ccms-line); border-radius: var(--ccms-radius); padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.ccms-panel--tint { background: var(--ccms-tint); }
.ccms-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ccms-panel__title { margin: 0; font-size: 18px; font-weight: 700; }
.ccms-panel > .ccms-panel__title { margin-bottom: 12px; }
.ccms-panel__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ccms-subhead { margin: 18px 0 8px; font-size: 15.5px; font-weight: 700; padding-top: 12px; border-top: 1px solid var(--ccms-line-soft); grid-column: 1 / -1; }
.ccms-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ccms-cols--2-1 { grid-template-columns: 2fr 1fr; }
.ccms-cols--3-2 { grid-template-columns: 3fr 2fr; }
.ccms-cols > * { min-width: 0; }

/* ---------- KPI tiles ---------- */
.ccms-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ccms-kpi { background: #fff; border: 1px solid var(--ccms-line); border-radius: var(--ccms-radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ccms-kpi__label { font-size: 13px; color: var(--ccms-muted); }
.ccms-kpi__value { font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ccms-kpi__sub { font-size: 12.5px; color: var(--ccms-muted); }
.ccms-kpi--warn { border-left: 4px solid #e2a03c; }
.ccms-kpi--bad { border-left: 4px solid var(--ccms-bad); }

/* ---------- Badges & buttons ---------- */
.ccms-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.ccms-badge--ok { background: var(--ccms-ok-bg); color: var(--ccms-ok); }
.ccms-badge--warn { background: var(--ccms-warn-bg); color: var(--ccms-warn); }
.ccms-badge--bad { background: var(--ccms-bad-bg); color: var(--ccms-bad); }
.ccms-badge--info { background: var(--ccms-info-bg); color: var(--ccms-info); }
.ccms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: var(--ccms-radius-sm); border: 1px solid var(--ccms-green); font-weight: 600; font-size: 14.5px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s; }
.ccms-btn--primary { background: var(--ccms-green); color: #fff !important; }
.ccms-btn--primary:hover { background: var(--ccms-green-dark); }
.ccms-btn--ghost { background: #fff; color: var(--ccms-green) !important; }
.ccms-btn--ghost:hover { background: var(--ccms-green-soft); }
.ccms-btn--danger { background: #fff; border-color: var(--ccms-bad); color: var(--ccms-bad) !important; }
.ccms-btn--danger:hover { background: var(--ccms-bad-bg); }
.ccms-btn--sm { height: 32px; padding: 0 12px; font-size: 13.5px; }
.ccms-btn--block { display: flex; width: 100%; margin-top: 12px; }
.ccms-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ccms-link { color: var(--ccms-green) !important; text-decoration: underline; text-underline-offset: 2px; }
.ccms-quick { display: grid; gap: 10px; }
.ccms-quick .ccms-btn { width: 100%; }

/* ---------- Tabs & stepper ---------- */
.ccms-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ccms-line); margin: 0 0 16px; overflow-x: auto; background: #fff; border-radius: var(--ccms-radius) var(--ccms-radius) 0 0; padding: 0 8px; }
.ccms-tabs a { padding: 12px 14px; text-decoration: none; color: var(--ccms-ink) !important; border-bottom: 3px solid transparent; white-space: nowrap; font-size: 14.5px; }
.ccms-tabs a.is-active, .ccms-tabs a[aria-selected="true"] { border-bottom-color: var(--ccms-green); color: var(--ccms-green) !important; font-weight: 700; }
.ccms-stepper { display: flex; gap: 8px; list-style: none; margin: 0 0 16px; padding: 12px 16px; background: #fff; border: 1px solid var(--ccms-line); border-radius: var(--ccms-radius); overflow-x: auto; }
.ccms-stepper li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ccms-muted); white-space: nowrap; min-width: max-content; }
.ccms-stepper li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ccms-line-soft); font-weight: 700; font-size: 13px; color: var(--ccms-muted); }
.ccms-stepper li.is-done span { background: var(--ccms-green); color: #fff; }
.ccms-stepper li.is-done { color: var(--ccms-ink); }
.ccms-stepper li.is-current span { background: #fff; border: 2px solid var(--ccms-green); color: var(--ccms-green); }
.ccms-stepper li.is-current { color: var(--ccms-ink); font-weight: 700; }
.ccms-step { display: none; }
.ccms-step.is-current { display: block; }
.ccms-form:not([data-stepper-ready]) .ccms-step { display: block; }
.ccms-form[data-stepper-ready]:not([data-last-step]) > .ccms-checks,
.ccms-form[data-stepper-ready]:not([data-last-step]) > .ccms-actions { display: none; }
.ccms-step-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ---------- Forms ---------- */
/* Fluid form grid: as many ~190px columns as the form's own width allows (not the screen's),
   so the same form fits a full page, a side panel or a phone. Wide fields span only when there is room. */
.ccms-form { container-type: inline-size; }
.ccms-table td .ccms-form, .ccms-actions .ccms-form { container-type: normal; }
.ccms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px 14px; }
.ccms-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ccms-field.w2, .ccms-field.w3, .ccms-field.w4 { grid-column: 1 / -1; }
@container (min-width: 394px) { .ccms-field.w2 { grid-column: span 2; } }
@container (min-width: 598px) { .ccms-field.w3 { grid-column: span 3; } }
@container (min-width: 802px) { .ccms-field.w4 { grid-column: span 4; } }
.ccms-field.w5, .ccms-custom.w5 { grid-column: 1 / -1; }
.ccms-custom { grid-column: 1 / -1; }
.ccms-field label, .ccms-filter label { font-size: 13px; color: #3c463f; font-weight: 500; }
.ccms-req { color: var(--ccms-bad); font-weight: 700; }
.ccms-body .ccms-field input:not([type=checkbox]):not([type=file]), .ccms-body .ccms-field select, .ccms-body .ccms-field textarea, .ccms-filter select, .ccms-filter input, .ccms-panel__actions input, .ccms-panel__actions select, .ccms-table input, .ccms-table select, .ccms-inline input[type=search], .ccms-inline input[type=tel], .ccms-inline input[type=date] {
	width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid #c9cfc6; border-radius: var(--ccms-radius-sm); background: #fff; font-size: 14.5px;
}
.ccms-body .ccms-field input:not([type=checkbox]):not([type=radio]):not([type=file]), .ccms-body .ccms-field select:not([multiple]) { height: 40px; line-height: 1.3; }
.ccms-field textarea { min-height: 84px; resize: vertical; }
.ccms-field select[multiple] { min-height: 96px; }
.ccms-field input.is-auto, .ccms-field input[readonly] { background: #f1f3ef; color: #4b554e; }
.ccms-field.has-error input, .ccms-field.has-error select, .ccms-field.has-error textarea { border-color: var(--ccms-bad); background: #fff8f7; }
.ccms-help { font-size: 12.5px; color: var(--ccms-muted); }

/* Inputs: calm border, clear focus ring */
.ccms-body .ccms-field input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, .ccms-body .ccms-field select:focus, .ccms-body .ccms-field textarea:focus { border-color: var(--ccms-green); box-shadow: 0 0 0 3px rgba(29, 82, 54, .14); outline: 0; }
.ccms-form__intro { margin: -4px 0 14px; font-size: 13.5px; color: var(--ccms-muted); }

/* Numbered form sections */
.ccms-subhead--step { display: flex; align-items: flex-start; gap: 10px; }
.ccms-grid > .ccms-subhead--step:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ccms-subhead--step small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 400; color: var(--ccms-muted); }
.ccms-stepno { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ccms-green); color: #fff; font-size: 13.5px; font-weight: 700; }

/* Tap-to-pick choices (radio buttons) */
.ccms-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ccms-choice { position: relative; cursor: pointer; }
.ccms-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ccms-choice span { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border: 1px solid #c9cfc6; border-radius: 999px; background: #fff; font-size: 14px; line-height: 1.25; transition: border-color .15s, background .15s; }
.ccms-choice:hover span { border-color: var(--ccms-green); }
.ccms-choice input:checked + span { border-color: var(--ccms-green); background: var(--ccms-green-soft); color: var(--ccms-green); font-weight: 600; }
.ccms-choice input:checked + span::before { content: "✓"; }
.ccms-choice input:focus-visible + span { outline: 3px solid #7fb394; outline-offset: 2px; }
.ccms-field.has-error .ccms-choice span { border-color: var(--ccms-bad); }

/* +91 prefix on mobile numbers */
.ccms-prefix { display: flex; }
.ccms-prefix > span { display: flex; align-items: center; height: 40px; padding: 0 10px; border: 1px solid #c9cfc6; border-right: 0; border-radius: var(--ccms-radius-sm) 0 0 var(--ccms-radius-sm); background: #f3f5f1; color: var(--ccms-muted); font-size: 14px; }
.ccms-body .ccms-prefix input { flex: 1; min-width: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* Character counter under a textarea */
.ccms-count-chars { align-self: flex-end; font-size: 12px; color: var(--ccms-muted); font-variant-numeric: tabular-nums; }
.ccms-count-chars.is-near { color: var(--ccms-warn); font-weight: 600; }

/* Note beside the submit button */
.ccms-actions { align-items: center; }
.ccms-actions__note { margin: 0 auto 0 0; max-width: 560px; font-size: 13px; color: var(--ccms-muted); }
.ccms-tag-info { font-size: 12.5px; }
.ccms-tag-info.is-ok { color: var(--ccms-ok); }
.ccms-tag-info.is-bad { color: var(--ccms-bad); font-weight: 600; }
.ccms-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ccms-inline > input { flex: 1 1 8ch; min-width: 8ch; }
.ccms-inline > .ccms-btn { flex: none; }
.ccms-field--otp .ccms-inline { flex-wrap: wrap; }
.ccms-field--otp .ccms-inline > .ccms-btn { height: 40px; }
.ccms-inline label { font-size: 13px; color: var(--ccms-muted); }
.ccms-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.ccms-check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--ccms-green); }
.ccms-checks { display: grid; gap: 8px; margin: 16px 0 4px; padding: 0; border: 0; }
.ccms-checks legend { font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.ccms-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.ccms-actions--left { justify-content: flex-start; }
.ccms-actions .ccms-form { display: contents; }
.ccms-photo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 10px; border: 1.5px dashed #b7c0b5; border-radius: var(--ccms-radius-sm); background: repeating-linear-gradient(-45deg, #f4f6f2, #f4f6f2 6px, #eceee9 6px, #eceee9 12px); color: var(--ccms-muted); font-size: 13.5px; cursor: pointer; text-align: center; }
.ccms-photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ccms-photo.has-file { border-style: solid; border-color: var(--ccms-green); background: var(--ccms-green-soft); color: var(--ccms-green); font-weight: 600; }
.ccms-photo--sm { min-height: 32px; font-size: 12.5px; }
.ccms-file { min-height: 56px; justify-content: flex-start; gap: 10px; padding: 10px 14px; text-align: left; }
.ccms-file small { display: block; font-size: 12px; font-weight: 400; color: var(--ccms-muted); }
.ccms-file:hover, .ccms-file:focus-within, .ccms-file.is-drag { border-color: var(--ccms-green); color: var(--ccms-green); }
.ccms-file:focus-within { outline: 2px solid var(--ccms-green); outline-offset: 2px; }
.ccms-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.ccms-filter .ccms-field.w2 { grid-column: span 2; }
.ccms-filter__btns { display: flex; gap: 8px; }
.ccms-filter__btns .ccms-btn { flex: 1; }
.ccms-repeater__item { border: 1px solid var(--ccms-line); border-radius: var(--ccms-radius); padding: 12px 14px 14px; margin: 0 0 12px; }
.ccms-repeater__item legend { font-weight: 700; padding: 0 6px; }
.ccms-repeater__item > .ccms-btn--danger { margin-top: 10px; }
div.ccms-repeater__item { border: 0; padding: 0; margin-bottom: 8px; }
.ccms-cat-preview .ccms-badge { margin-left: 6px; }
.ccms-subhead.w5 { grid-column: 1 / -1; margin-top: 6px; }
option.is-unsafe { color: var(--ccms-bad); }

/* ---------- Tables ---------- */
.ccms-table-wrap { overflow-x: auto; margin: 0 -2px; }
.ccms-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ccms-table th { text-align: left; font-weight: 600; font-size: 13px; color: #3c463f; background: #f1f3ef; padding: 10px; white-space: nowrap; }
.ccms-table td { padding: 9px 10px; border-bottom: 1px solid var(--ccms-line-soft); vertical-align: middle; font-variant-numeric: tabular-nums; }
.ccms-table tbody th { background: transparent; border-bottom: 1px solid var(--ccms-line-soft); font-size: 14px; color: var(--ccms-ink); }
.ccms-table tbody tr:hover td { background: #fafbf9; }
.ccms-table--grid td input { min-width: 74px; }
.ccms-table td.is-auto { color: #4b554e; background: #f6f7f4; }
.ccms-table td .ccms-form { margin: 0; }
.ccms-table td .ccms-form .ccms-grid { grid-template-columns: 1fr 1fr; }
.ccms-table td .ccms-actions { margin-top: 6px; justify-content: flex-start; }
.ccms-empty { text-align: center; color: var(--ccms-muted); padding: 22px 10px !important; }
.ccms-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: 13px; color: var(--ccms-muted); }
.ccms-pager span { margin-right: auto; }
.ccms-menu { position: relative; }
.ccms-menu summary { list-style: none; }
.ccms-menu summary::-webkit-details-marker { display: none; }
.ccms-menu > div { position: absolute; right: 0; z-index: 5; min-width: 190px; background: #fff; border: 1px solid var(--ccms-line); border-radius: var(--ccms-radius-sm); box-shadow: 0 8px 24px rgba(20,40,28,.12); padding: 6px; display: grid; }
.ccms-menu > div a { padding: 7px 8px; text-decoration: none; }
.ccms-details summary { cursor: pointer; color: var(--ccms-green); font-weight: 600; margin: 10px 0; }

/* ---------- Data displays ---------- */
.ccms-bar { display: inline-block; width: 100%; height: 8px; border-radius: 999px; background: #e3e7e1; overflow: hidden; vertical-align: middle; }
.ccms-bar > span { display: block; height: 100%; background: var(--ccms-green); border-radius: inherit; }
.ccms-bar--warn > span { background: var(--ccms-accent); }
.ccms-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ccms-hbars li { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.ccms-hbars__track { height: 14px; background: #eef1ec; border-radius: 4px; overflow: hidden; }
.ccms-hbars__track span { display: block; height: 100%; background: var(--ccms-green); }
.ccms-hbars li:nth-child(3) .ccms-hbars__track span { background: #c27a16; }
.ccms-hbars li:nth-child(4) .ccms-hbars__track span { background: #3d6b9a; }
.ccms-hbars__val { font-weight: 600; font-variant-numeric: tabular-nums; }
.ccms-line { width: 100%; height: auto; color: var(--ccms-green); display: block; }
.ccms-line__lbl { font-size: 12px; fill: var(--ccms-muted); }
.ccms-map { height: 360px; border-radius: var(--ccms-radius-sm); border: 1px solid var(--ccms-line); background: repeating-linear-gradient(-45deg, #f4f6f2, #f4f6f2 8px, #eceee9 8px, #eceee9 16px); }
.ccms-map--sm { height: 220px; margin-top: 12px; }
.ccms-pin { width: 16px; height: 16px; border-radius: 50%; background: var(--ccms-green); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.ccms-pin--low { background: var(--ccms-bad); }
.ccms-alerts, .ccms-tasks, .ccms-stock, .ccms-kv, .ccms-doclist, .ccms-timeline { list-style: none; margin: 0; padding: 0; }
.ccms-alerts li, .ccms-tasks li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ccms-line-soft); font-size: 14.5px; }
.ccms-alerts li > span:not(.ccms-badge), .ccms-tasks li > span:not(.ccms-badge) { flex: 1; }
.ccms-alerts li:last-child, .ccms-tasks li:last-child { border-bottom: 0; }
.ccms-tasks time { color: var(--ccms-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ccms-stock li { padding: 8px 0; }
.ccms-stock li > div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.ccms-stock li > div span:last-child { color: var(--ccms-muted); font-variant-numeric: tabular-nums; }
.ccms-kv li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ccms-line-soft); }
.ccms-kv li span:first-child { color: var(--ccms-muted); }
p.ccms-kv { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0; }
.ccms-doclist li { padding: 6px 0; }
.ccms-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
.ccms-dl dt { font-size: 12.5px; color: var(--ccms-muted); }
.ccms-dl dd { margin: 0; font-weight: 500; }
.ccms-reqs { display: grid; gap: 12px; }
.ccms-reqcard { border: 1px solid var(--ccms-line); border-radius: var(--ccms-radius-sm); padding: 10px 12px; }
.ccms-reqcard header { font-size: 13.5px; }
.ccms-reqcard p { margin: 6px 0; }
.ccms-reqcard .ccms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ccms-reqcard .ccms-actions { margin-top: 8px; }
.ccms-camphead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ccms-camphead p { margin: 2px 0; }
.ccms-note { margin-top: 14px; padding: 12px 14px; background: var(--ccms-tint); border: 1px solid #d3e3d6; border-radius: var(--ccms-radius-sm); font-size: 14px; }
.ccms-note ul, .ccms-rules { margin: 6px 0 0 18px; padding: 0; }

/* Master data: home → list → form */
.ccms-mnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.ccms-mnav__trail { font-size: 14px; color: var(--ccms-muted); }
.ccms-mnav__trail strong { color: var(--ccms-ink); }
.ccms-mnav__step { margin-left: auto; font-size: 12.5px; color: var(--ccms-muted); background: #fff; border: 1px solid var(--ccms-line); border-radius: 999px; padding: 2px 10px; }
.ccms-mintro { margin: 0 0 14px; }
.ccms-mgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 0 16px; align-items: start; }
.ccms-mlist { list-style: none; margin: 0; padding: 0; }
.ccms-mlist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ccms-line-soft); }
.ccms-mlist li:first-child { border-top: 0; padding-top: 0; }
.ccms-mlist li > a:first-child { flex: 1; min-width: 0; text-decoration: none; }
.ccms-mlist__name { display: block; font-weight: 600; color: var(--ccms-ink); }
.ccms-mlist__use { display: block; font-size: 12.5px; color: var(--ccms-muted); }
.ccms-mlist__n { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ccms-mlist__n small { font-weight: 400; color: var(--ccms-muted); }
.ccms-mfilter { margin-bottom: 14px; }
.ccms-mact { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ccms-mcancel { margin: 10px 0 0; }
.ccms-pager .ccms-btn { min-width: 92px; }
.ccms-rules li { margin: 4px 0; }
.ccms-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ccms-photos figure { margin: 0; border: 1px solid var(--ccms-line); border-radius: var(--ccms-radius-sm); overflow: hidden; background: #fff; }
.ccms-photos img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ccms-photos figcaption { padding: 6px 8px; font-size: 12.5px; color: var(--ccms-muted); }
.ccms-timeline li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--ccms-line-soft); }
.ccms-timeline li div { display: flex; flex-direction: column; }
.ccms-timeline small { color: var(--ccms-muted); }

/* ---------- Order & pass (print-friendly) ---------- */
.ccms-order header, .ccms-pass header { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid var(--ccms-green); margin-bottom: 14px; }
.ccms-order header { justify-content: flex-start; }
.ccms-order__sign { text-align: right; margin-top: 40px; font-weight: 600; }
.ccms-pass__body { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: start; }
.ccms-qr { width: 180px; height: 180px; background: #fff; border: 1px solid var(--ccms-line); display: grid; place-items: center; }
.ccms-qr canvas, .ccms-qr img { width: 100%; height: 100%; image-rendering: pixelated; }

/* ---------- Public site ---------- */
.ccms-govstrip { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 24px; background: var(--ccms-green-dark); color: #e8f1eb; font-size: 12.5px; }
.ccms-pubhead { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--ccms-line); }
.ccms-pubhead .ccms-brand { color: var(--ccms-ink) !important; }
.ccms-pubhead .ccms-brand--dark .ccms-brand__seal { border-color: #9aa79e; color: var(--ccms-muted); background: #f3f5f1; }
.ccms-pubnav { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 auto; }
.ccms-pubnav a { color: var(--ccms-green) !important; text-underline-offset: 3px; }
.ccms-pubmain { max-width: 1320px; margin: 0 auto; padding: 20px 24px 40px; }
.ccms-h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 19px; margin: 6px 0 12px; }
.ccms-pubfoot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 24px; background: var(--ccms-green-dark); color: #e8f1eb; font-size: 13px; }
.ccms-appfoot { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--ccms-line); font-size: 12.5px; color: var(--ccms-muted); }
.ccms-appfoot a { color: inherit; }
.ccms-appfoot--farmer { max-width: 1120px; margin: 0 auto; padding: 14px 20px 28px; }

/* ---------- Login ---------- */
.ccms-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, var(--ccms-green) 0 220px, var(--ccms-bg) 220px); }
.ccms-login__card { width: min(440px, 100%); background: #fff; border: 1px solid var(--ccms-line); border-radius: var(--ccms-radius); padding: 28px; box-shadow: 0 10px 30px rgba(20,40,28,.12); }
.ccms-login__card h1 { font-size: 22px; margin: 12px 0 4px; }
.ccms-login__card hr { border: 0; border-top: 1px solid var(--ccms-line-soft); margin: 18px 0; }
.ccms-login #loginform p { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.ccms-login #loginform input[type=text], .ccms-login #loginform input[type=password] { min-height: 42px; padding: 8px 10px; border: 1px solid #c9cfc6; border-radius: var(--ccms-radius-sm); }
.ccms-login #loginform .login-remember { flex-direction: row; }
.ccms-login #wp-submit { width: 100%; height: 44px; border: 0; border-radius: var(--ccms-radius-sm); background: var(--ccms-green); color: #fff; font-weight: 700; cursor: pointer; }
.ccms-login--farmer .ccms-grid { grid-template-columns: 1fr; }
.ccms-login--farmer .ccms-btn--primary { width: 100%; height: 48px; font-size: 16px; }

/* ---------- Farmer portal ---------- */
.ccms-farmer { min-height: 100vh; }
.ccms-top--farmer { position: static; }
.ccms-tabs--farmer { border-radius: 0; padding: 0 20px; position: sticky; top: 0; z-index: 20; }
.ccms-farmer__main { max-width: 1120px; margin: 0 auto; padding: 18px 20px 48px; font-size: 16px; }
.ccms-hello h1 { margin: 0 0 8px; font-size: 28px; }
.ccms-hello p { margin: 4px 0 10px; }
.ccms-animalcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ccms-animalcard { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--ccms-line); border-radius: var(--ccms-radius); text-decoration: none; color: var(--ccms-ink) !important; background: #fff; }
.ccms-animalcard.is-active { border: 2px solid var(--ccms-green); background: var(--ccms-tint); }
.ccms-animalcard > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ccms-animalcard strong { font-size: 16px; }
.ccms-animalcard small { color: var(--ccms-muted); }
.ccms-animalcard__photo { flex: none; width: 64px; height: 64px; border-radius: var(--ccms-radius-sm); overflow: hidden; display: grid; place-items: center; font-size: 12px; color: var(--ccms-muted); background: repeating-linear-gradient(-45deg, #f4f6f2, #f4f6f2 5px, #eceee9 5px, #eceee9 10px); border: 1px dashed #b7c0b5; }
.ccms-animalcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.ccms-farmer .ccms-btn { height: 46px; font-size: 15.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.ccms-cols, .ccms-cols--2-1, .ccms-cols--3-2 { grid-template-columns: 1fr; }
	.ccms-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.ccms-top { flex-wrap: wrap; padding: 10px 12px; }
	.ccms-top__menu { display: block; }
	.ccms-top__tools { width: 100%; justify-content: flex-start; }
	.ccms-search input { width: 100%; }
	.ccms-search { flex: 1; }
	.ccms-layout { grid-template-columns: 1fr; }
	.ccms-side { display: none; position: fixed; inset: 0 30% 0 0; z-index: 40; overflow-y: auto; box-shadow: 4px 0 24px rgba(0,0,0,.2); }
	.ccms-app.nav-open .ccms-side { display: block; }
	.ccms-main { padding: 14px 12px 48px; }
	.ccms-pagehead h1 { font-size: 22px; }
	.ccms-kpis { grid-template-columns: 1fr 1fr; }
	.ccms-kpi__value { font-size: 22px; }
	.ccms-dl { grid-template-columns: 1fr; }
	.ccms-pass__body { grid-template-columns: 1fr; }
	.ccms-btn { height: 44px; }
	.ccms-pubnav { margin: 0; gap: 14px; }
}
@media (max-width: 480px) {
	.ccms-mgroups { grid-template-columns: 1fr; }
	.ccms-mnav__step { margin-left: 0; }
	.ccms-mlist li { flex-wrap: wrap; }
	.ccms-brand strong { font-size: 16px; }
}

/* ---------- Print ---------- */
@media print {
	.ccms-top, .ccms-side, .ccms-pagehead__actions, .ccms-tabs, .ccms-actions, .ccms-flash, .ccms-govstrip, .ccms-pubhead, .ccms-pubfoot, .ccms-appfoot { display: none !important; }
	.ccms-layout { display: block; }
	.ccms-main { padding: 0; }
	.ccms-body { background: #fff; }
	.ccms-panel { border: 0; padding: 0; }
}