/* Countova ERP - white-label design tokens. Loaded on every desk + web + print page.
   These mirror brand.py COLORS. Keep the two in sync (brand.py is the source of truth).
   We override Frappe's CSS variables so the WHOLE UI (buttons, links, sidebar, forms,
   list views) recolours without touching Frappe source - and stays responsive. */

:root {
  /* Pounamu primary */
  --countova-pounamu-900: #062E31;
  --countova-pounamu-700: #0A464B;
  --countova-pounamu-600: #0D5C63;
  --countova-pounamu-500: #12747C;
  --countova-pounamu-300: #6FB3B8;
  --countova-pounamu-100: #D6EAEC;
  /* Kōwhai accent */
  --countova-kowhai-600: #DB9422;
  --countova-kowhai-500: #F4A72C;
  --countova-kowhai-100: #FCEBCB;
  /* Neutrals + semantic */
  --countova-ink: #0B1F24;
  --countova-slate: #5B6B70;
  --countova-bg: #F5F8F8;
  --countova-surface: #FFFFFF;
  --countova-border: #E1E8E9;
  --countova-success: #1E9E6A;
  --countova-warning: #E8A500;
  --countova-danger: #D64545;
  --countova-info: #2D7DD2;

  /* --- Map onto Frappe's own tokens so components inherit the brand --- */
  --primary: var(--countova-pounamu-600);
  --primary-color: var(--countova-pounamu-600);
  --btn-primary: var(--countova-pounamu-600);
  --text-on-primary: #ffffff;
  --brand-color: var(--countova-pounamu-600);
  --sidebar-select-color: var(--countova-pounamu-100);
  --bg-color: var(--countova-bg);
}

/* Primary buttons + key CTAs use pounamu; the accent gold is reserved for
   high-intent actions (Pay, Submit) so it stays meaningful. */
.btn-primary {
  background-color: var(--countova-pounamu-600);
  border-color: var(--countova-pounamu-600);
}
.btn-primary:hover { background-color: var(--countova-pounamu-700); border-color: var(--countova-pounamu-700); }

.btn-countova-accent {
  background-color: var(--countova-kowhai-500);
  border-color: var(--countova-kowhai-500);
  color: var(--countova-ink);
}
.btn-countova-accent:hover { background-color: var(--countova-kowhai-600); }

a { color: var(--countova-pounamu-600); }

/* Financial legibility: tabular figures so currency columns align on the decimal.
   Critical for an accounting product. */
.dt-cell--col--amount, [data-fieldtype="Currency"], [data-fieldtype="Float"], .indicator-pill {
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Hide upstream wordmarks that leak into the UI (white-label). */
.navbar-brand .app-logo { visibility: hidden; }
.splash { background-image: none; }

/* Print / invoice letterhead accents. */
.print-format .countova-letterhead { border-bottom: 3px solid var(--countova-pounamu-600); }
.print-format .countova-total-row { background: var(--countova-pounamu-100); font-weight: 600; }

/* Responsive is inherited from Frappe's grid; this just tightens the mobile navbar
   brand so the Countova wordmark never truncates on small screens. */
@media (max-width: 767px) {
  .navbar-brand { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
}

/* ------------------------------------------------------------------
   Accessibility + full-width desk (Countova): bigger, clearer type and use
   the whole desktop width so laypeople and older users read it easily,
   without losing the depth accountants need.
   ------------------------------------------------------------------ */
:root {
  --text-base: 15px;
  --text-md: 15px;
  --text-sm: 14px;
  --text-lg: 17px;
}
body, .page-body, .layout-main { font-size: 15px; line-height: 1.6; }

/* Use the full desktop width instead of a narrow centred column. */
@media (min-width: 992px) {
  .container, .page-body .container, .layout-main-section-wrapper,
  .workspace-container, .ce-block__content, .layout-main {
    max-width: 100% !important;
  }
}

/* Larger, more legible form controls, lists and reports. */
.form-control, .input-with-feedback, .like-disabled-input,
.control-value, .list-row, .report-body, .dt-cell__content { font-size: 15px; }
.control-label, .list-row-col .list-subject, th, .grid-heading-row { font-size: 14px; }

/* Make the home numbers and headings clearly readable. */
.number-card .number-card-value, .number-card .number { font-size: 2.1rem; font-weight: 800; }
.number-card .h6.text-muted, .number-card-label { font-size: 15px; }
.workspace-title, .title-area .title-text, h1.ellipsis { font-size: 1.7rem; }
.ce-header span { font-size: 1.25rem; font-weight: 700; color: var(--countova-pounamu-900); }

/* Quick-action shortcut tiles: bigger tap targets. */
.widget.shortcut-widget-box { min-height: 84px; }
.widget.shortcut-widget-box .widget-head .label { font-size: 15px; font-weight: 600; }

/* ------------------------------------------------------------------
   Colour + highlighting (Countova).

   Frappe's shortcut widget only colours a small count pill, and only when the
   count is non-zero:  `let color = this.color && count ? ... : "gray"`.
   On a new tenant every count is 0, so the whole dashboard renders grey and
   nothing stands out. We colour the TILE itself instead, cycling a fixed
   accessible palette, so the board reads clearly from day one.

   Every pairing below is dark ink or white on its own tint, kept at or above
   the WCAG AA 4.5:1 contrast ratio for body text.
   ------------------------------------------------------------------ */
:root {
  --cv-a1: #0D5C63;  --cv-a1-bg: #E4F1F2;
  --cv-a2: #B4761A;  --cv-a2-bg: #FBEED6;
  --cv-a3: #2D7DD2;  --cv-a3-bg: #E3EFFB;
  --cv-a4: #1E7F57;  --cv-a4-bg: #E2F3EC;
  --cv-a5: #5E45A8;  --cv-a5-bg: #ECE7F8;
  --cv-a6: #B03A5B;  --cv-a6-bg: #FAE6EB;
}

.widget.shortcut-widget-box {
  border-left: 4px solid var(--cv-tile, var(--cv-a1));
  background: var(--cv-tile-bg, var(--cv-a1-bg));
  transition: transform .12s ease, box-shadow .12s ease;
}
.widget.shortcut-widget-box .widget-head .label { color: var(--countova-ink); }
.widget.shortcut-widget-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(11, 31, 36, .14);
}

/* Cycle the palette so neighbouring tiles never share a colour.
   The cycle MUST key off .ce-block, not the tile: a v15 workspace is an editor.js document and
   every widget sits alone inside its own block wrapper, so `.shortcut-widget-box:nth-child(n)`
   matches :nth-child(1) every single time and the whole board renders one colour. */
.ce-block:nth-child(6n + 1) .widget { --cv-tile: var(--cv-a1); --cv-tile-bg: var(--cv-a1-bg); }
.ce-block:nth-child(6n + 2) .widget { --cv-tile: var(--cv-a2); --cv-tile-bg: var(--cv-a2-bg); }
.ce-block:nth-child(6n + 3) .widget { --cv-tile: var(--cv-a3); --cv-tile-bg: var(--cv-a3-bg); }
.ce-block:nth-child(6n + 4) .widget { --cv-tile: var(--cv-a4); --cv-tile-bg: var(--cv-a4-bg); }
.ce-block:nth-child(6n + 5) .widget { --cv-tile: var(--cv-a5); --cv-tile-bg: var(--cv-a5-bg); }
.ce-block:nth-child(6n + 6) .widget { --cv-tile: var(--cv-a6); --cv-tile-bg: var(--cv-a6-bg); }

/* Semantic colour for the actions people reach for most, so colour carries meaning rather than
   just decoration: money in is green, money out is amber, records are blue. */
.shortcut-widget-box[data-widget-name="New invoice"] { --cv-tile: var(--cv-a4); --cv-tile-bg: var(--cv-a4-bg); }
.shortcut-widget-box[data-widget-name="Bills to pay"] { --cv-tile: var(--cv-a2); --cv-tile-bg: var(--cv-a2-bg); }
.shortcut-widget-box[data-widget-name="Customers"] { --cv-tile: var(--cv-a3); --cv-tile-bg: var(--cv-a3-bg); }
.shortcut-widget-box[data-widget-name="Products"] { --cv-tile: var(--cv-a1); --cv-tile-bg: var(--cv-a1-bg); }
.shortcut-widget-box[data-widget-name="Run payroll"] { --cv-tile: var(--cv-a5); --cv-tile-bg: var(--cv-a5-bg); }
.shortcut-widget-box[data-widget-name="Reports"] { --cv-tile: var(--cv-a6); --cv-tile-bg: var(--cv-a6-bg); }

/* A zero count currently renders a washed-out grey pill that reads as broken.
   Give it real contrast and let it say what it means. */
.shortcut-widget-box .indicator-pill.gray,
.shortcut-widget-box .indicator-pill.grey {
  background: #FFFFFF;
  color: var(--countova-slate);
  border: 1px solid var(--countova-border);
  font-weight: 600;
}
.shortcut-widget-box .indicator-pill { font-size: 13px; }

/* Number cards: a coloured rule and a tinted value strip so the figures lead the page. */
.widget.number-widget-box {
  border-top: 4px solid var(--cv-tile, var(--countova-pounamu-600));
  border-left: none;
  background: var(--countova-surface);
}
.widget.number-widget-box .widget-head .widget-label,
.widget.number-widget-box .widget-title {
  color: var(--countova-slate);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}
.number-card .number-card-value, .number-card .number,
.widget.number-widget-box .number,
.widget.number-widget-box .widget-body .number {
  color: var(--cv-tile, var(--countova-pounamu-900));
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* "You are here" in the sidebar was a faint grey fill. Make it unmistakable. */
.desk-sidebar .sidebar-item-container.selected > .desk-sidebar-item,
.desk-sidebar .desk-sidebar-item.selected {
  background: var(--countova-pounamu-100);
  border-left: 3px solid var(--countova-pounamu-600);
  font-weight: 600;
  color: var(--countova-pounamu-900);
}

/* Keyboard accessibility: the tiles are tabbable (role=link, tabindex=0) but
   ship with no visible focus state. Without this, keyboard and screen-magnifier
   users cannot tell where they are. */
.shortcut-widget-box:focus-visible,
.widget:focus-visible,
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.desk-sidebar-item:focus-visible {
  outline: 3px solid var(--countova-kowhai-500);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Section headings carry the brand instead of blending into the body copy. */
.widget-group .widget-group-head .widget-group-title,
.workspace-container .ce-header span { color: var(--countova-pounamu-900); font-weight: 700; }

/* Respect a user's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .widget.shortcut-widget-box { transition: none; }
  .widget.shortcut-widget-box:hover { transform: none; }
}

/* --- Readability and polish (2026-11-02) ---------------------------------------------- */
/* Page titles were truncated on phones ("Countov..."): let them wrap instead. */
.page-head .page-title .title-text,
.page-head .title-area .title-text { max-width: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.2; }
/* Slightly larger, calmer text for everyday reading. */
.desk-sidebar .sidebar-item-container .item-anchor .sidebar-item-label { font-size: 14.5px; }
.desk-sidebar .standard-sidebar-section .section-title,
.desk-sidebar .sidebar-label { font-size: 12.5px; letter-spacing: .02em; }
.frappe-control .control-label, .frappe-control label { font-size: 13.5px; }
.form-section .section-head { font-size: 15px; }
.list-row .level-item, .list-row-col { font-size: 14px; }
/* Neutral shortcut tiles everywhere (no rainbow tints). */
.widget.shortcut-widget-box { background: var(--card-bg) !important; border: 1px solid var(--border-color) !important; box-shadow: none !important; min-height: 0 !important; }
.widget.shortcut-widget-box .widget-title { font-size: 14.5px; }
/* Room for the floating Getting started button so it never covers content. */
.layout-main-section-wrapper, .page-body { padding-bottom: 72px; }
/* The sidebar's "Public" group heading is internal jargon. */
.desk-sidebar .standard-sidebar-section .standard-sidebar-label { display: none !important; }
/* Login / set-password / portal pages */
.page-card, .for-login .page-card, .for-forgot .page-card { border: 1px solid var(--countova-border); border-radius: 14px; box-shadow: 0 8px 30px rgba(6,46,49,.08); padding: 28px; }
.page-card .page-card-head h4, .page-card-head .h4 { font-size: 22px; font-weight: 700; color: var(--countova-pounamu-900); }
.btn-primary, .btn.btn-primary, .page-card .btn-primary { background: var(--countova-pounamu-600) !important; border-color: var(--countova-pounamu-600) !important; color: #fff !important; }
.btn-primary:hover { background: var(--countova-pounamu-700) !important; }
.web-footer .footer-subscribe, .web-footer form.subscribe { display: none !important; }
.web-footer .footer-powered { display: none !important; }

/* Grid / List toggle (list_grid.js) */
.cv-viewtoggle{display:inline-flex;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;margin-right:8px;background:var(--card-bg,#fff);vertical-align:middle}
.cv-viewtoggle button{border:0;background:transparent;padding:5px 9px;line-height:0;color:var(--text-muted);cursor:pointer}
.cv-viewtoggle button+button{border-left:1px solid var(--border-color)}
.cv-viewtoggle button.active{background:var(--control-bg,#f3f3f3);color:var(--text-color)}
.cv-viewtoggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cv-grid .frappe-list .result{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;padding:14px;background:var(--subtle-fg,transparent)}
.cv-grid .frappe-list .list-row-head{grid-column:1/-1;border-radius:8px}
.cv-grid .frappe-list .list-row-head .level-left .list-row-col:not(:first-child),.cv-grid .frappe-list .list-row-head .level-right{display:none!important}
.cv-grid .frappe-list .list-row-container{border:1px solid var(--border-color)!important;border-radius:12px;background:var(--card-bg,#fff);overflow:hidden;transition:box-shadow .15s,border-color .15s}
.cv-grid .frappe-list .list-row-container:hover{border-color:var(--gray-400);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.cv-grid .frappe-list .list-row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:12px;height:auto!important;padding:14px!important;border:0!important}
.cv-grid .frappe-list .list-row .level-left{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch!important;gap:3px;max-width:none!important}
.cv-grid .frappe-list .list-row .level-right{flex:0 0 100%!important;max-width:none!important;display:flex;justify-content:flex-end;border-top:1px solid var(--border-color);padding-top:8px;margin-top:2px}
.cv-grid .frappe-list .list-row .list-row-col.cv-empty{display:none!important}
.cv-grid .frappe-list .list-row .level-right .list-row-activity{font-size:12px}
.cv-grid .frappe-list .list-row-container{position:relative}
.cv-grid .frappe-list .list-row .list-row-col{max-width:none!important;width:auto!important;flex:none!important;margin:0!important;display:flex!important;gap:6px;font-size:13.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-grid .frappe-list .list-row .list-row-col.hidden-xs,.cv-grid .frappe-list .list-row .list-row-col.hidden-md{display:flex!important}
.cv-grid .frappe-list .list-row .list-row-col[data-label]::before{content:attr(data-label) ":";color:var(--text-light,#999);flex:none}
.cv-grid .frappe-list .list-row .list-row-col[data-label] *{overflow:hidden;text-overflow:ellipsis}
.cv-grid .frappe-list .list-row .list-subject{font-size:15.5px!important;font-weight:600;color:var(--text-color);white-space:normal!important}
.cv-grid .frappe-list .list-row .list-subject a{color:var(--text-color)!important}
.cv-thumb{flex:none;width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--control-bg,#f3f3f3);display:none}
.cv-grid .cv-thumb{display:flex;align-items:center;justify-content:center}
.cv-thumb img{width:100%;height:100%;object-fit:cover}
.cv-initials{font-weight:600;font-size:17px;color:var(--text-muted)}
.cv-grid .frappe-list .list-row .list-row-checkbox{display:none}
.cv-grid .frappe-list .list-row-head .list-row-checkbox{display:inline-block}
@media (max-width:600px){.cv-grid .frappe-list .result{grid-template-columns:1fr;padding:10px}}
.cv-grid .frappe-list .list-row .level-left .list-row-col.cv-empty,.cv-grid .frappe-list .list-row .level-left .list-row-col.tag-col.hide{display:none!important}