/*! FirmSync UI — generated by client/ui-redesign/build.mjs from client/ui-redesign/styles. Do not edit. */
/*! Icons: Lucide v1.54.0 (https://lucide.dev) — vendored SVG paths, rendered as CSS masks.
ISC License

Copyright (c) 2026 Lucide Icons and Contributors

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

---

The following Lucide icons are derived from the Feather project:

airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out

The MIT License (MIT) (for the icons listed above)

Copyright (c) 2013-present Cole Bemis

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

*/
:root {
  --icon-bell-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0' /%3E%3Cpath d='M22 8c0-2.3-.8-4.3-2-6' /%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326' /%3E%3Cpath d='M4 2C2.8 3.7 2 5.7 2 8' /%3E%3C/svg%3E");
  --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0' /%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326' /%3E%3C/svg%3E");
  --icon-book-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 5v16' /%3E%3Cpath d='M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z' /%3E%3C/svg%3E");
  --icon-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16' /%3E%3Crect width='20' height='14' x='2' y='6' rx='2' /%3E%3C/svg%3E");
  --icon-building-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10 12h4' /%3E%3Cpath d='M10 8h4' /%3E%3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3' /%3E%3Cpath d='M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2' /%3E%3Cpath d='M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16' /%3E%3C/svg%3E");
  --icon-calendar-days: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 2v3' /%3E%3Cpath d='M16 2v3' /%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cpath d='M3 9h18' /%3E%3Cpath d='M8 13h.01' /%3E%3Cpath d='M12 13h.01' /%3E%3Cpath d='M16 13h.01' /%3E%3Cpath d='M8 17h.01' /%3E%3Cpath d='M12 17h.01' /%3E%3Cpath d='M16 17h.01' /%3E%3C/svg%3E");
  --icon-chart-column-increasing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M13 17V9' /%3E%3Cpath d='M18 17V5' /%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16' /%3E%3Cpath d='M8 17v-3' /%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m6 9 6 6 6-6' /%3E%3C/svg%3E");
  --icon-circle-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cline x1='12' x2='12' y1='8' y2='12' /%3E%3Cline x1='12' x2='12.01' y1='16' y2='16' /%3E%3C/svg%3E");
  --icon-circle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='m16 9-5.5 5.5L8 12' /%3E%3C/svg%3E");
  --icon-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z' /%3E%3C/svg%3E");
  --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 15V3' /%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' /%3E%3Cpath d='m7 10 5 5 5-5' /%3E%3C/svg%3E");
  --icon-file-chart-column: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z' /%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5' /%3E%3Cpath d='M8 18v-1' /%3E%3Cpath d='M12 18v-6' /%3E%3Cpath d='M16 18v-3' /%3E%3C/svg%3E");
  --icon-file-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z' /%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5' /%3E%3Cpath d='M10 9H8' /%3E%3Cpath d='M16 13H8' /%3E%3Cpath d='M16 17H8' /%3E%3C/svg%3E");
  --icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' /%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='M12 16v-4' /%3E%3Cpath d='M12 8h.01' /%3E%3C/svg%3E");
  --icon-layout-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='7' height='9' x='3' y='3' rx='1' /%3E%3Crect width='7' height='5' x='14' y='3' rx='1' /%3E%3Crect width='7' height='9' x='14' y='12' rx='1' /%3E%3Crect width='7' height='5' x='3' y='16' rx='1' /%3E%3C/svg%3E");
  --icon-lock-keyhole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='16' r='1' /%3E%3Crect x='3' y='10' width='18' height='12' rx='2' /%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3' /%3E%3C/svg%3E");
  --icon-log-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m16 17 5-5-5-5' /%3E%3Cpath d='M21 12H9' /%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4' /%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7' /%3E%3Crect x='2' y='4' width='20' height='16' rx='2' /%3E%3C/svg%3E");
  --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 5h16' /%3E%3Cpath d='M4 12h16' /%3E%3Cpath d='M4 19h16' /%3E%3C/svg%3E");
  --icon-message-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719' /%3E%3C/svg%3E");
  --icon-message-square-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z' /%3E%3Cpath d='M7 11h10' /%3E%3Cpath d='M7 15h6' /%3E%3Cpath d='M7 7h8' /%3E%3C/svg%3E");
  --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401' /%3E%3C/svg%3E");
  --icon-receipt-indian-rupee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z' /%3E%3Cpath d='M8 11h8' /%3E%3Cpath d='M8 7h8' /%3E%3Cpath d='M9 7a4 4 0 0 1 0 8H8l3 2' /%3E%3C/svg%3E");
  --icon-repeat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m17 2 4 4-4 4' /%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14' /%3E%3Cpath d='m7 22-4-4 4-4' /%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3' /%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m21 21-4.34-4.34' /%3E%3Ccircle cx='11' cy='11' r='8' /%3E%3C/svg%3E");
  --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='4' /%3E%3Cpath d='M12 2v2' /%3E%3Cpath d='M12 20v2' /%3E%3Cpath d='m4.93 4.93 1.41 1.41' /%3E%3Cpath d='m17.66 17.66 1.41 1.41' /%3E%3Cpath d='M2 12h2' /%3E%3Cpath d='M20 12h2' /%3E%3Cpath d='m6.34 17.66-1.41 1.41' /%3E%3Cpath d='m19.07 4.93-1.41 1.41' /%3E%3C/svg%3E");
  --icon-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z' /%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='%23000' /%3E%3C/svg%3E");
  --icon-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Ccircle cx='12' cy='12' r='6' /%3E%3Ccircle cx='12' cy='12' r='2' /%3E%3C/svg%3E");
  --icon-timer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='10' x2='14' y1='2' y2='2' /%3E%3Cline x1='12' x2='15' y1='14' y2='11' /%3E%3Ccircle cx='12' cy='14' r='8' /%3E%3C/svg%3E");
  --icon-user-cog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10 15H6a4 4 0 0 0-4 4v2' /%3E%3Cpath d='m14.305 16.53.923-.382' /%3E%3Cpath d='m15.228 13.852-.923-.383' /%3E%3Cpath d='m16.852 12.228-.383-.923' /%3E%3Cpath d='m16.852 17.772-.383.924' /%3E%3Cpath d='m19.148 12.228.383-.923' /%3E%3Cpath d='m19.53 18.696-.382-.924' /%3E%3Cpath d='m20.772 13.852.924-.383' /%3E%3Cpath d='m20.772 16.148.924.383' /%3E%3Ccircle cx='18' cy='15' r='3' /%3E%3Ccircle cx='9' cy='7' r='4' /%3E%3C/svg%3E");
  --icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744' /%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87' /%3E%3Ccircle cx='9' cy='7' r='4' /%3E%3C/svg%3E");
}

/* ==== 00-fonts.css ==== */
/* Self-hosted variable fonts — SIL Open Font License 1.1 (licence texts in /fonts/).
   Latin + Latin Extended subsets; the rupee sign (U+20B9) lives in Latin Extended,
   which the browser only downloads when such a character is on the page. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"),
    url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"),
    url(/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2-variations"),
    url(/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations"),
    url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== 01-tokens.css ==== */
/* Design tokens — the single source of every colour, size, radius and shadow.
   Spec: UI_RULEBOOK.md §B–§D. Components must use the semantic tokens below. */

:root {
  /* Brand (from the FirmSync logo) */
  --brand-navy: #0a244e;
  --brand-blue: #2957a3;
  --brand-green: #377933;

  /* Neutrals — warm surfaces, slate text */
  --color-canvas: #f6f5f1;
  --color-surface: #ffffff;
  --color-surface-subtle: #faf9f6;
  --color-surface-sunken: #efede7;
  --color-surface-hover: #f3f1ec;
  --color-sidebar: #ffffff;
  --color-logo-tile: #ffffff;
  --color-border: #e6e3dc;
  --color-border-strong: #d5d1c7;
  --color-border-control: #8a919e;
  --color-text: #1e293b;
  --color-text-strong: #0f172a;
  --color-text-muted: #475569;
  --color-text-subtle: #5e6b7e;
  --color-inverse: #1e293b;
  --color-on-inverse: #ffffff;

  /* Interactive */
  --color-primary: #0f2b5b;
  --color-primary-hover: #0a244e;
  --color-primary-pressed: #071a3a;
  --color-on-primary: #ffffff;
  --color-primary-soft: #eaf0f9;
  --color-primary-soft-border: #c9d7ee;
  --color-primary-soft-fg: #1e4583;
  --color-link: #2957a3;
  --color-link-hover: #1e4583;
  --color-focus: #2957a3;
  --color-focus-ring: rgba(41, 87, 163, 0.22);
  --color-accent: #377933;
  --color-accent-soft: #eaf3e8;
  --color-drop-target: #eaf0f9;
  --color-backdrop: rgba(15, 23, 42, 0.45);
  --color-primary-soft-hover: #e1e9f6;
  --glow-blue: rgba(41, 87, 163, 0.1);
  --glow-green: rgba(55, 121, 51, 0.1);

  /* Status */
  --color-success-fg: #1d6b34;
  --color-success-bg: #e7f3ea;
  --color-success-border: #bfdfc8;
  --color-success-solid: #2e7d44;
  --color-warning-fg: #8a4b0c;
  --color-warning-bg: #fcf1df;
  --color-warning-border: #f1d29f;
  --color-warning-solid: #b7680f;
  --color-danger-fg: #b3261e;
  --color-danger-bg: #fcebe9;
  --color-danger-border: #f3c4bf;
  --color-danger-solid: #b3261e;
  --color-info-fg: #1e4c8f;
  --color-info-bg: #eaf1fa;
  --color-info-border: #c6d8f0;
  --color-info-solid: #2957a3;
  --color-neutral-fg: #475569;
  --color-neutral-bg: #efede7;
  --color-neutral-border: #e0dcd3;
  --color-neutral-solid: #64748b;
  --color-violet-fg: #5b3fa8;
  --color-violet-bg: #f0ecfa;
  --color-violet-border: #dcd3f3;

  /* Chart fills */
  --chart-primary: var(--brand-blue);
  --chart-success: var(--brand-green);
  --chart-warning: var(--color-warning-solid);

  /* Select chevron (Lucide chevron-down). Data URIs cannot read variables,
     so the stroke colour is written per theme (= --color-text-subtle). */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* Typography */
  --font-sans: "Inter Variable", "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-display: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", var(--font-sans);
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --text-display: 1.75rem; /* 28px */
  --leading-display: 2.25rem;
  --text-title: 1.5rem; /* 24px */
  --leading-title: 2rem;
  --text-lg: 1rem; /* 16px */
  --leading-lg: 1.5rem;
  --text-section: 0.9375rem; /* 15px */
  --leading-section: 1.375rem;
  --text-base: 0.875rem; /* 14px */
  --leading-base: 1.3125rem;
  --text-sm: 0.8125rem; /* 13px */
  --text-sm-plus: 0.84375rem; /* 13.5px — buttons, list rows */
  --leading-sm: 1.1875rem;
  --text-xs: 0.75rem; /* 12px */
  --text-badge: 0.71875rem; /* 11.5px */
  --leading-xs: 1rem;
  --tracking-tight: -0.02em;
  --tracking-overline: 0.05em;

  /* Spacing (4px grid) */
  --space-0_5: 2px;
  --space-1: 4px;
  --space-1_5: 6px;
  --space-2: 8px;
  --space-2_5: 10px; /* half-step for dense rows (nav items, list rows, callouts) */
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-card: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(28, 25, 23, 0.1), 0 2px 4px -2px rgba(28, 25, 23, 0.06);
  --shadow-lg: 0 18px 44px -12px rgba(15, 23, 42, 0.22), 0 4px 10px -4px rgba(15, 23, 42, 0.08);

  /* Layout */
  --sidebar-width: 248px;
  --content-max: 1440px;
  --control-height: 38px;
  --control-height-sm: 36px;
  --button-height: 36px;
  --button-height-sm: 30px;
  --icon-button: 38px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 160ms;
  --duration-slow: 200ms; /* upper bound for any transition (chart bar growth) */

  /* Legacy aliases — referenced by inline styles in the compiled JS bundle.
     Do not use in new CSS. */
  --bg: var(--color-canvas);
  --panel: var(--color-surface);
  --border: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-hover);
  --success: var(--color-success-fg);
  --warning: var(--color-warning-fg);
  --danger: var(--color-danger-fg);
  --sidebar-bg: var(--color-sidebar);
  --sidebar-text: var(--color-text-muted);
  --radius: var(--radius-lg);
}

:root[data-theme="dark"] {
  --color-canvas: #111317;
  --color-surface: #191c21;
  --color-surface-subtle: #1d2026;
  --color-surface-sunken: #15171b;
  --color-surface-hover: #23272e;
  --color-sidebar: #15171b;
  --color-border: #2a2e36;
  --color-border-strong: #3a3f49;
  --color-border-control: #666e7c;
  --color-text: #e6e8eb;
  --color-text-strong: #f5f6f7;
  --color-text-muted: #a3abb7;
  --color-text-subtle: #8c95a3;
  --color-inverse: #2a2f38;
  --color-on-inverse: #f5f6f7;

  --color-primary: #2f5dae;
  --color-primary-hover: #3a6ac0;
  --color-primary-pressed: #2a539c;
  --color-primary-soft: #1b2a44;
  --color-primary-soft-border: #2c4168;
  --color-primary-soft-fg: #b4cbf2;
  --color-link: #8db2ec;
  --color-link-hover: #b4cbf2;
  --color-focus: #6e9be6;
  --color-focus-ring: rgba(110, 155, 230, 0.28);
  --color-accent: #74b86f;
  --color-accent-soft: #1c2b1d;
  --color-drop-target: #1b2a44;
  --color-backdrop: rgba(0, 0, 0, 0.6);
  --color-primary-soft-hover: #213252;
  --glow-blue: rgba(110, 155, 230, 0.08);
  --glow-green: rgba(116, 184, 111, 0.06);

  --color-success-fg: #7dcb8e;
  --color-success-bg: #17291d;
  --color-success-border: #24432d;
  --color-success-solid: #3f9a57;
  --color-warning-fg: #e9b86a;
  --color-warning-bg: #2e2414;
  --color-warning-border: #4a3a1e;
  --color-warning-solid: #c98a2e;
  --color-danger-fg: #f2958c;
  --color-danger-bg: #33191a;
  --color-danger-border: #55282a;
  --color-danger-solid: #c4362c;
  --color-info-fg: #93b6ee;
  --color-info-bg: #18253a;
  --color-info-border: #263b5c;
  --color-info-solid: #5b8bd6;
  --color-neutral-fg: #b4bbc6;
  --color-neutral-bg: #262a31;
  --color-neutral-border: #343a44;
  --color-neutral-solid: #7c8594;
  --color-violet-fg: #c3b2f2;
  --color-violet-bg: #262039;
  --color-violet-border: #3a3160;

  --chart-primary: #5b8bd6;
  --chart-success: #5fa95a;

  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C95A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 18px 44px -12px rgba(0, 0, 0, 0.7), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
}

/* ==== 02-base.css ==== */
/* Base: reset, element defaults, focus, motion. Spec: UI_RULEBOOK.md §C, §G. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  background: var(--color-canvas);
  color: var(--color-text);
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  background: var(--color-canvas);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color var(--duration-base) var(--ease),
    color var(--duration-base) var(--ease);
}

h1,
h2,
h3,
h4 {
  color: var(--color-text-strong);
  line-height: 1.3;
}

strong,
b {
  font-weight: 600;
}

a {
  color: var(--color-link);
  text-decoration: none;
  text-underline-offset: 2px;
}

a:where(:not(.btn)):hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Links inside running text must not rely on colour alone (WCAG 1.4.1). */
:where(.timeline-status, .followup-meta, .page-sub, .comment-message, .notif-popup-list, .planner-card-meta, p) a:where(:not(.btn)) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-primary-soft-border);
}

:where(.timeline-status, .followup-meta, .page-sub, .comment-message, .notif-popup-list, .planner-card-meta, p) a:where(:not(.btn)):hover {
  text-decoration-color: currentColor;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

::selection {
  background: var(--color-primary-soft-border);
  color: var(--color-text-strong);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

@keyframes fs-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fs-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==== 03-layout.css ==== */
/* App shell: loading screen, sidebar, main area, topbar, notifications,
   page header, login. Spec: UI_RULEBOOK.md §D2, §E1–§E3. */

/* ---------- Full-screen loading ---------- */
.center-loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.center-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-primary);
  animation: fs-spin 0.8s linear infinite;
}

/* ---------- Shell ---------- */
.app {
  display: flex;
  min-height: 100vh;
  background: var(--color-canvas);
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-sidebar);
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3) var(--space-3);
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  padding: var(--space-1) var(--space-1) var(--space-4);
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-logo-tile);
  border: 1px solid var(--color-border);
  object-fit: cover;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-strong);
}

.brand-sub {
  margin-top: var(--space-0_5);
  font-size: var(--text-badge);
  line-height: var(--leading-xs);
  color: var(--color-text-subtle);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-0_5);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.nav a {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  min-height: 32px;
  padding: var(--space-1_5) var(--space-2_5);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.nav a:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
  text-decoration: none;
}

.nav a.active {
  background: var(--color-primary-soft);
  color: var(--color-primary-soft-fg);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.nav a:focus-visible {
  outline-offset: -2px;
}

/* Visual groups (spacing only) — valid for both the Admin and Staff link sets. */
.nav a[href="/clients"],
.nav a[href="/staff"],
.nav a[href="/reports"],
.nav a[href="/api/guide"] {
  margin-top: var(--space-2);
}

.sidebar .spacer {
  flex: 0 0 0;
}

.spacer {
  flex: 1;
}

.user-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2_5) var(--space-3);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.user-name {
  font-size: var(--text-sm-plus);
  font-weight: 600;
  color: var(--color-text-strong);
  line-height: var(--leading-sm);
}

.user-name,
.user-role {
  grid-column: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-role {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.user-card .btn-link {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  padding: var(--space-1_5) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
}

.user-card .btn-link:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
  text-decoration: none;
}

.sbcl-footer {
  margin-top: var(--space-3);
  padding: 0 var(--space-2);
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.sbcl-footer strong {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ---------- Main area ---------- */
.main {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  padding: var(--space-6) var(--space-8) var(--space-12);
  background: var(--color-canvas);
  color: var(--color-text);
  overflow-x: hidden;
  overflow-x: clip;
}

.main > * {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.nav-backdrop {
  display: none;
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.topbar-search {
  position: relative;
  flex: 0 1 320px;
  min-width: 0;
}

.topbar-search input {
  width: 100%;
  padding-left: 36px;
  font-size: var(--text-sm);
  -webkit-appearance: none;
  appearance: none;
}

.menu-btn,
.theme-toggle,
.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-button);
  height: var(--icon-button);
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.menu-btn:hover,
.theme-toggle:hover,
.notif-bell:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-strong);
}

.menu-btn {
  display: none;
}

/* ---------- Notifications ---------- */
.notif-bell-wrap {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  background: var(--color-danger-solid);
  color: var(--color-on-primary);
  border: 2px solid var(--color-canvas);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.notif-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
}

.notif-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: 440px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 46;
  animation: fs-rise var(--duration-base) var(--ease);
}

.notif-dropdown-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-strong);
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notif-list li {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) 28px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease);
}

.notif-list li:last-child {
  border-bottom: none;
}

.notif-list li:hover {
  background: var(--color-surface-hover);
}

.notif-list li.notif-unread {
  background: var(--color-primary-soft);
}

.notif-list li.notif-unread::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-link);
}

.notif-list li.notif-unread:hover {
  background: var(--color-primary-soft-hover);
}

.notif-message {
  margin-bottom: var(--space-0_5);
  color: var(--color-text);
}

.notif-meta {
  color: var(--color-text-subtle);
  font-size: 11px;
}

/* ---------- Page header ---------- */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-strong);
}

.page-sub {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
}

/* ---------- Login (standard + demo mode) ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-4);
  background:
    radial-gradient(900px 520px at 12% -8%, var(--glow-blue), transparent 62%),
    radial-gradient(760px 480px at 96% 108%, var(--glow-green), transparent 60%),
    var(--color-canvas);
}

.login-card {
  width: 400px;
  max-width: 100%;
  padding: var(--space-8);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.login-card h1 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.login-card p {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.login-logo {
  display: block;
  width: 100%;
  max-width: 180px;
  margin: 0 auto var(--space-6);
  border-radius: var(--radius-lg);
}

/* The logo PNG has an off-white background; multiply blends it into the white
   card without altering the artwork (light theme only). */
:root:not([data-theme="dark"]) .login-logo {
  mix-blend-mode: multiply;
}

.login-form {
  margin-top: var(--space-1_5);
}

.login-hint {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.login-hint + .field,
.login-hint + .login-form {
  margin-top: var(--space-4);
}

.login-footer {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 11px;
  color: var(--color-text-subtle);
}

.login-card p.demo-lead {
  margin: 0 0 var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.demo-roles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.demo-role {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0_5);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 0;
  border-radius: var(--radius-card);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}

.demo-role:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.demo-role:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.demo-role strong {
  font-size: var(--text-base);
  font-weight: 600;
}

.demo-role span {
  font-size: var(--text-xs);
  opacity: 0.85;
}

.demo-manual-toggle {
  display: block;
  margin: var(--space-4) auto var(--space-1);
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-link);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.suite-links {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.suite-links span {
  display: block;
  margin-bottom: var(--space-1_5);
}

.suite-links a {
  margin: 0 var(--space-2);
  color: var(--color-link);
  font-weight: 600;
}

/* ---------- Responsive shell (UI_RULEBOOK.md §D5, §G1) ---------- */
@media (max-width: 1199px) {
  .main {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* The 900px collapse point is tied to the app's menu-button / drawer behaviour. */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: -296px;
    top: 0;
    z-index: 40;
    width: 280px;
    box-shadow: none;
    transition:
      left var(--duration-base) var(--ease),
      box-shadow var(--duration-base) var(--ease);
  }

  .app.nav-open .sidebar {
    left: 0;
    box-shadow: var(--shadow-lg);
  }

  .app.nav-open .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--color-backdrop);
    z-index: 30;
  }

  .nav a {
    min-height: 40px;
  }

  .menu-btn {
    display: inline-flex;
  }

  .menu-btn,
  .theme-toggle,
  .notif-bell {
    width: 40px;
    height: 40px;
  }

  .topbar-search {
    flex: 1 1 auto;
  }

  .topbar-search input {
    min-height: 40px;
  }
}

@media (max-width: 640px) {
  .main {
    padding: var(--space-4) var(--space-4) var(--space-10);
  }

  .topbar {
    margin-bottom: var(--space-4);
  }

  .page-header {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: var(--space-4);
  }

  .page-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .login-card {
    padding: var(--space-6) var(--space-5);
  }
}

/* ==== 04-components.css ==== */
/* Shared components. Spec: UI_RULEBOOK.md §E4–§E12.
   Class names are the ones the app's JavaScript emits — never rename them. */

/* ---------- Panels ---------- */
.panel {
  --panel-pad-x: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--panel-pad-x);
  box-shadow: var(--shadow-xs);
}

.panel + .panel {
  margin-top: var(--space-4);
}

.section-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-section);
  line-height: var(--leading-section);
  font-weight: 600;
  color: var(--color-text-strong);
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2_5);
}

.chip-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1_5);
  min-height: var(--button-height);
  padding: 0 var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-sm-plus);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.btn:not(:disabled):hover {
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
  text-decoration: none;
}

.btn:not(:disabled):active {
  background: var(--color-surface-sunken);
  box-shadow: none;
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-primary:not(:disabled):hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.btn-primary:not(:disabled):active {
  background: var(--color-primary-pressed);
  border-color: var(--color-primary-pressed);
}

.btn-danger {
  color: var(--color-danger-fg);
  border-color: var(--color-danger-border);
}

.btn-danger:not(:disabled):hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-fg);
}

.btn-sm {
  min-height: var(--button-height-sm);
  padding: 0 var(--space-2_5);
  gap: var(--space-1);
  font-size: 0.78125rem; /* 12.5px */
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* The app marks the current option of a chip group (e.g. Move Status) as a
   disabled small primary button — show it as "selected", not as unavailable. */
.btn-sm.btn-primary:disabled {
  opacity: 1;
  cursor: default;
}

.btn-link {
  padding: 0;
  background: none;
  border: none;
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.btn-link:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Segmented control (Board / List) — navy stays reserved for primary actions. */
.view-toggle {
  display: inline-flex;
  gap: var(--space-0_5);
  padding: 3px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.view-toggle button {
  min-height: var(--button-height-sm);
  padding: 0 var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.view-toggle button:hover {
  color: var(--color-text-strong);
}

.view-toggle button.active {
  background: var(--color-surface);
  color: var(--color-text-strong);
  box-shadow: var(--shadow-sm);
}

/* ---------- Form controls (one definition for every text-like control) ---------- */
:where(
    input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]),
    select,
    textarea
  ) {
  min-height: var(--control-height);
  padding: 7px var(--space-3);
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

:where(
    input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]),
    select,
    textarea
  ):hover:not(:disabled):not(:focus) {
  border-color: var(--color-text-subtle);
}

:where(
    input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]),
    select,
    textarea
  ):is(:focus, :focus-within) {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

:where(input, select, textarea):user-invalid {
  border-color: var(--color-danger-fg);
}

:where(input, select, textarea):user-invalid:focus {
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

:where(input, select, textarea):disabled {
  background-color: var(--color-surface-sunken);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

:where(select:not([multiple])) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  cursor: pointer;
}

/* Native date pickers: the calendar button is focusable inside the control
   (covered by :focus-within above); make it read as clickable. */
::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: var(--radius-sm);
}

:where(textarea) {
  min-height: 88px;
  resize: vertical;
}

input[type="file"] {
  max-width: 100%;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

input[type="file"]::file-selector-button {
  min-height: var(--button-height-sm);
  margin-right: var(--space-2_5);
  padding: 0 var(--space-2_5);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.78125rem;
  font-weight: 600;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: var(--color-surface-hover);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
  margin-bottom: var(--space-4);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 var(--space-4);
}

/* Read-only label/value pairs (e.g. Job Detail summary). */
.form-grid > div:not(.field) {
  margin-bottom: var(--space-4);
}

.form-grid > div:not(.field) > strong:first-child {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-badge);
  line-height: var(--leading-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-text-subtle);
}

.form-grid > div:not(.field) > strong:first-child + div {
  font-weight: 500;
  color: var(--color-text-strong);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Selects sitting beside small buttons in a page header (e.g. Calendar). */
.page-header select {
  min-height: var(--button-height-sm);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  font-size: var(--text-sm);
}

.filter-bar select,
.filter-bar input {
  min-height: var(--control-height-sm);
  font-size: var(--text-sm);
}

/* ---------- Stat cards ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.panel + .stats-grid {
  margin-top: var(--space-4);
}

.stat-card {
  position: relative;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.stat-card::before {
  content: "";
  position: absolute;
  left: var(--space-5);
  top: -1px;
  width: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--stat-accent, var(--color-border-strong));
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--stat-value, var(--color-text-strong));
}

.stat-label {
  margin-top: var(--space-0_5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

.stat-card.accent-primary {
  --stat-accent: var(--color-primary);
}

.stat-card.accent-danger {
  --stat-accent: var(--color-danger-solid);
  --stat-value: var(--color-danger-fg);
}

.stat-card.accent-warning {
  --stat-accent: var(--color-warning-solid);
  --stat-value: var(--color-warning-fg);
}

.stat-card.accent-success {
  --stat-accent: var(--color-success-solid);
  --stat-value: var(--color-success-fg);
}

/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm-plus);
}

th,
td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}

th {
  padding-top: var(--space-2_5);
  padding-bottom: var(--space-2_5);
  font-size: var(--text-badge);
  line-height: var(--leading-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

td {
  min-width: 7.5rem; /* short data (dates, amounts, statuses) never breaks mid-token */
  font-variant-numeric: tabular-nums;
}

td:empty,
td:has(> input[type="checkbox"]:only-child) {
  min-width: 0;
}

td a {
  font-weight: 500;
}

/* Invoice-number links are short identifiers — never break them at hyphens. */
td a[href^="/invoices/"] {
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--color-surface-hover);
}

.table-wrap {
  overflow-x: auto;
}

/* Tables inside a panel run edge-to-edge so text aligns with the section title. */
.panel .table-wrap {
  margin-left: calc(-1 * var(--panel-pad-x));
  margin-right: calc(-1 * var(--panel-pad-x));
}

.panel .table-wrap :is(th, td):first-child {
  padding-left: var(--panel-pad-x);
}

.panel .table-wrap :is(th, td):last-child {
  padding-right: var(--panel-pad-x);
}

.panel .table-wrap thead th {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

.panel .table-wrap:last-child {
  margin-bottom: calc(-1 * var(--space-5));
}

.panel .table-wrap:first-child {
  margin-top: calc(-1 * var(--space-5));
}

.panel .table-wrap:first-child thead th {
  border-top: none;
}

.panel .table-wrap:first-child thead th:first-child {
  border-top-left-radius: var(--radius-lg);
}

.panel .table-wrap:first-child thead th:last-child {
  border-top-right-radius: var(--radius-lg);
}

.panel .table-wrap:last-child tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-lg);
}

.panel .table-wrap:last-child tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-lg);
}

/* ---------- Badges & chips ---------- */
/* Neutral is the default tone (Low priority, Draft invoice). */
.badge {
  --badge-fg: var(--color-neutral-fg);
  --badge-bg: var(--color-neutral-bg);
  --badge-border: var(--color-neutral-border);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2);
  background: var(--badge-bg);
  color: var(--badge-fg);
  border: 1px solid var(--badge-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-badge);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.8;
}

.badge-Normal,
.badge-invoice-Sent,
.comment-badge-update {
  --badge-fg: var(--color-info-fg);
  --badge-bg: var(--color-info-bg);
  --badge-border: var(--color-info-border);
}

.badge-High,
.comment-badge-question {
  --badge-fg: var(--color-warning-fg);
  --badge-bg: var(--color-warning-bg);
  --badge-border: var(--color-warning-border);
}

.badge-Urgent,
.badge-invoice-Overdue,
.badge-overdue {
  --badge-fg: var(--color-danger-fg);
  --badge-bg: var(--color-danger-bg);
  --badge-border: var(--color-danger-border);
}

.badge-invoice-Paid,
.doc-shared {
  --badge-fg: var(--color-success-fg);
  --badge-bg: var(--color-success-bg);
  --badge-border: var(--color-success-border);
}

.badge-invoice-Cancelled {
  --badge-fg: var(--color-text-subtle);
}

.comment-badge-instruction {
  --badge-fg: var(--color-violet-fg);
  --badge-bg: var(--color-violet-bg);
  --badge-border: var(--color-violet-border);
}

.doc-shared {
  margin-left: var(--space-1_5);
}

.placeholder-chip {
  margin-left: var(--space-1);
  padding: var(--space-0_5) var(--space-1_5);
  background: var(--color-primary-soft);
  color: var(--color-primary-soft-fg);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
}

.avatar-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--brand-blue);
  color: var(--color-on-primary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- Callouts ---------- */
.demo-banner,
.notif-popup,
.bulk-bar,
.time-bill-hint {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-card);
}

.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2_5);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--color-info-fg);
  font-size: var(--text-sm);
  font-weight: 500;
}

.demo-banner::before {
  margin-top: 2px;
}

.notif-popup {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.notif-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm-plus);
  color: var(--color-info-fg);
}

.notif-popup-head .btn-link {
  color: var(--color-info-fg);
}

.notif-popup-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.notif-popup-list li {
  padding: var(--space-1) 0;
}

.bulk-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2_5);
  margin-bottom: var(--space-4);
  padding: var(--space-2_5) var(--space-4);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.bulk-bar select {
  min-height: var(--control-height-sm);
  font-size: var(--text-sm);
}

.bulk-bar .btn-link {
  margin-left: auto;
  color: var(--color-info-fg);
}

.time-bill-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-2_5) var(--space-3);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.time-bill-hint > span:first-child::before {
  color: var(--color-info-fg);
}

/* ---------- Feedback ---------- */
.empty-state {
  padding: var(--space-8) var(--space-4);
}

.panel .empty-state {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  font-size: var(--text-sm-plus);
  color: var(--color-text-muted);
}

.toast {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  max-width: min(440px, calc(100vw - 32px));
  padding: var(--space-3) var(--space-4);
  background: var(--color-inverse);
  color: var(--color-on-inverse);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm-plus);
  font-weight: 500;
  animation: fs-rise var(--duration-base) var(--ease);
}

.toast.err {
  background: var(--color-danger-solid);
  color: var(--color-on-primary);
}

/* ---------- Responsive ---------- */
@media (min-width: 1200px) {
  .panel {
    --panel-pad-x: var(--space-6);
  }
}

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--space-3);
  }

  .stat-card {
    padding: var(--space-4);
  }

  .stat-card::before {
    left: var(--space-4);
  }

  .stat-value {
    font-size: 1.375rem;
    line-height: 1.875rem;
  }

  .panel {
    --panel-pad-x: var(--space-4);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .panel .table-wrap:last-child {
    margin-bottom: calc(-1 * var(--space-4));
  }

  .panel .table-wrap:first-child {
    margin-top: calc(-1 * var(--space-4));
  }

  /* Tables scroll horizontally on phones; wider cells wrap less. */
  td {
    min-width: 9rem;
  }

  .filter-bar > * {
    flex: 1 1 140px;
  }

  .toast {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    max-width: none;
  }
}

/* ==== 05-features.css ==== */
/* Domain components: kanban, calendar, timeline, job-detail lists, planner,
   charts, time tracking. Spec: UI_RULEBOOK.md §E13. */

/* ---------- Kanban board (Jobs) ---------- */
.kanban {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-3);
}

.kanban-col {
  min-width: 264px;
  flex-shrink: 0;
  padding: var(--space-2_5);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

/* While a card is dragged over a column the app sets an inline background
   (var(--color-drop-target)); mark the target more clearly. */
.kanban-col[style*="background"] {
  border-color: var(--color-primary-soft-border);
  border-style: dashed;
}

.kanban-col-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1) var(--space-2_5);
  font-size: var(--text-badge);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-text-muted);
}

.kanban-col-title > span:last-child {
  min-width: 22px;
  height: 20px;
  padding: 0 var(--space-1_5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 40px;
}

.kanban-card {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-sm);
  cursor: grab;
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.kanban-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card-title {
  margin-bottom: var(--space-1);
  font-size: var(--text-sm-plus);
  font-weight: 600;
  line-height: var(--leading-sm);
  color: var(--color-text-strong);
}

/* Title links meet the 24px minimum target size (WCAG 2.5.8). */
.kanban-card-title a {
  display: inline-block;
  padding: 3px 0;
}

.kanban-card-client {
  margin-bottom: var(--space-2);
  font-size: 0.78125rem;
  color: var(--color-text-muted);
}

.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2_5);
  padding-top: var(--space-2_5);
  border-top: 1px solid var(--color-border);
}

.kanban-card-due {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.kanban-card-due.overdue {
  color: var(--color-danger-fg);
  font-weight: 600;
}

/* ---------- Timeline (status history, recent activity) ---------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-1);
}

.timeline li {
  position: relative;
  padding: 0 0 var(--space-4) var(--space-5);
  border-left: 2px solid var(--color-border);
}

.timeline li:last-child {
  border-color: transparent;
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-surface);
}

.timeline-status {
  font-size: var(--text-sm-plus);
  font-weight: 600;
  color: var(--color-text-strong);
}

.timeline-meta {
  margin-top: var(--space-0_5);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* ---------- Compliance calendar ---------- */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1_5);
}

.cal-weekday {
  padding: var(--space-1) 0 var(--space-2);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-text-subtle);
}

.cal-cell {
  min-height: 104px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.cal-cell-empty {
  min-height: 104px;
  background: transparent;
  border: none;
}

.cal-cell-today {
  border-color: var(--color-focus);
  box-shadow: inset 0 0 0 1px var(--color-focus);
}

.cal-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.cal-cell-today .cal-date {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.cal-jobs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cal-job {
  display: block;
  padding: 2px var(--space-1_5);
  border-left: 3px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}

a.cal-job:hover {
  text-decoration: none;
  filter: brightness(0.97);
}

.cal-job-overdue {
  background: var(--color-danger-bg);
  color: var(--color-danger-fg);
}

.cal-job-due-soon {
  background: var(--color-warning-bg);
  color: var(--color-warning-fg);
}

.cal-job-upcoming {
  background: var(--color-info-bg);
  color: var(--color-info-fg);
}

.cal-job-done {
  background: var(--color-success-bg);
  color: var(--color-success-fg);
}

.cal-more {
  padding: 0 var(--space-1_5);
  font-size: 10.5px;
  color: var(--color-text-subtle);
}

.cal-job-overdue-text {
  color: var(--color-danger-fg);
  font-weight: 600;
}

.cal-job-due-soon-text {
  color: var(--color-warning-fg);
  font-weight: 600;
}

.cal-job-upcoming-text {
  color: var(--color-text);
}

.calendar-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1_5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: var(--space-2_5);
  border-radius: var(--radius-pill);
}

.legend-dot:first-child {
  margin-left: 0;
}

.legend-overdue {
  background: var(--color-danger-solid);
}

.legend-due-soon {
  background: var(--color-warning-solid);
}

.legend-upcoming {
  background: var(--color-info-solid);
}

.legend-done {
  background: var(--color-success-solid);
}

/* ---------- Job-detail lists (documents, checklist, comments, follow-ups, time) ---------- */
.doc-list,
.checklist-list,
.comment-list,
.followup-list,
.time-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.followup-list {
  margin-bottom: 0;
}

.doc-list li,
.checklist-list li,
.time-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  padding: var(--space-2_5) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm-plus);
}

.followup-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2_5);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.comment-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.doc-list li:last-child,
.checklist-list li:last-child,
.time-list li:last-child,
.followup-list li:last-child,
.comment-item:last-child {
  border-bottom: none;
}

.doc-meta,
.comment-meta,
.followup-meta,
.time-meta,
.time-flag {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.doc-upload-form,
.checklist-add-form,
.checklist-copy-row,
.comment-form,
.time-add-form,
.contact-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.checklist-add-form,
.checklist-copy-row {
  flex-wrap: nowrap;
}

.checklist-add-form input,
.checklist-copy-row select {
  flex: 1;
  min-width: 0;
  min-height: var(--control-height-sm);
  font-size: var(--text-sm);
}

.checklist-copy-row {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border-strong);
}

.doc-upload-form select,
.comment-form select,
.contact-row select {
  min-height: var(--control-height-sm);
  font-size: var(--text-sm);
}

.checklist-list input[type="checkbox"],
.followup-list li input[type="checkbox"] {
  flex-shrink: 0;
}

.followup-list li input[type="checkbox"] {
  margin-top: 3px;
}

.checklist-text {
  flex: 1;
}

.checklist-done .checklist-text,
.followup-done .followup-note {
  text-decoration: line-through;
  color: var(--color-text-subtle);
}

.comment-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.comment-message {
  font-size: var(--text-sm-plus);
  white-space: pre-wrap;
}

.comment-form {
  align-items: flex-start;
}

.comment-form textarea {
  flex: 1;
  min-width: 200px;
  min-height: 72px;
  font-size: var(--text-sm);
}

.followup-body {
  flex: 1;
  min-width: 0;
}

.followup-note {
  font-size: var(--text-sm-plus);
  font-weight: 500;
  color: var(--color-text-strong);
}

.followup-meta {
  margin-top: var(--space-0_5);
}

.contact-row {
  flex-wrap: nowrap;
  margin-bottom: var(--space-2_5);
}

.contact-row:last-child {
  margin-bottom: 0;
}

.contact-row select {
  flex: 1;
  min-width: 0;
  max-width: 280px;
}

.portal-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1_5);
  font-size: var(--text-base);
  cursor: pointer;
}

.portal-toggle + .chip-actions {
  margin-top: var(--space-5);
}

/* ---------- Time tracking ---------- */
.time-totals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.time-totals strong {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-primary-soft-fg);
  font-variant-numeric: tabular-nums;
}

.timer-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.timer-display {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-primary-soft-fg);
  font-variant-numeric: tabular-nums;
}

.time-list li {
  font-size: var(--text-base);
}

.time-dur {
  min-width: 62px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.time-desc {
  flex: 1;
  min-width: 0;
}

.time-meta {
  white-space: nowrap;
}

.time-billed {
  color: var(--color-success-fg);
}

.time-add-form {
  gap: var(--space-2_5);
}

.time-add-form input:not([type="number"]):not([type="checkbox"]) {
  flex: 1;
  min-width: 160px;
}

.time-add-form input:not([type="checkbox"]) {
  min-height: var(--control-height-sm);
  font-size: var(--text-sm);
}

.time-billable {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  font-size: var(--text-sm);
  white-space: nowrap;
  color: var(--color-text-muted);
  cursor: pointer;
}

.ts-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.ts-filters > label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

.ts-filters input,
.ts-filters select {
  min-height: var(--control-height-sm);
  font-size: var(--text-sm);
}

.ts-filters .chip-actions {
  margin-left: auto;
}

/* ---------- Planner ---------- */
.planner-columns {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.planner-col {
  min-width: 264px;
  flex-shrink: 0;
  padding: var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.planner-col-overdue {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}

.planner-col-title {
  margin-bottom: var(--space-2_5);
  font-size: var(--text-badge);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-text-muted);
}

.planner-col-overdue .planner-col-title {
  color: var(--color-danger-fg);
}

.planner-card {
  display: block;
  margin-bottom: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

a.planner-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  text-decoration: none;
}

.planner-card-followup {
  cursor: default;
}

.planner-card-type {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-text-subtle);
}

.planner-card-title {
  margin: 3px 0;
  font-weight: 600;
  color: var(--color-text-strong);
}

.planner-card-meta,
.planner-card-due {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.planner-card-due {
  margin-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}

/* ---------- Bar charts (Analysis) ---------- */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr minmax(120px, 170px);
  align-items: center;
  gap: var(--space-3);
}

.bar-row-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-row-track {
  height: 10px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.bar-row-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--duration-slow) var(--ease);
}

.bar-row-fill-primary {
  background: var(--chart-primary);
}

.bar-row-fill-success {
  background: var(--chart-success);
}

.bar-row-fill-warning {
  background: var(--chart-warning);
}

.bar-row-value {
  font-size: 0.78125rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .cal-grid {
    gap: 3px;
  }

  .cal-weekday {
    font-size: 9px;
    letter-spacing: 0;
  }

  .cal-cell,
  .cal-cell-empty {
    min-height: 64px;
  }

  .cal-cell {
    padding: var(--space-1);
    border-radius: var(--radius-sm);
  }

  .cal-date {
    min-width: 18px;
    height: 18px;
    font-size: 10.5px;
  }

  .cal-job {
    padding: 1px 3px;
    border-left-width: 2px;
    font-size: 9px;
  }

  .bar-row {
    grid-template-columns: 100px 1fr;
    row-gap: var(--space-1);
  }

  .bar-row-value {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .contact-row,
  .checklist-add-form,
  .checklist-copy-row {
    flex-wrap: wrap;
  }

  .contact-row select {
    max-width: none;
    flex-basis: 100%;
  }

  .ts-filters .chip-actions {
    margin-left: 0;
  }

  .kanban-col,
  .planner-col {
    min-width: 248px;
  }
}

/* ==== 06-icons.css ==== */
/* Icons — Lucide glyphs (tokens --icon-* are generated by build.mjs from
   client/ui-redesign/icons/*.svg) drawn as CSS masks so they inherit
   currentColor and follow the theme. Spec: UI_RULEBOOK.md §F.

   Elements are matched by stable attributes the app already renders
   (route hrefs, existing class names). Emoji were removed from the labels. */

/* ---------- Glyph base ---------- */
.nav a::before,
.topbar-search::before,
.menu-btn::before,
.theme-toggle::before,
.notif-bell::before,
.user-card .btn-link::before,
.contact-row .btn::before,
a[href$="/pdf"]::before,
a.btn[href*="/export.csv"]::before,
.timer-display::before,
.time-bill-hint > span:first-child::before,
.demo-banner::before,
.notif-popup-head strong::before,
.kanban-card-due::before,
.toast::before {
  content: "";
  display: inline-block;
  flex: none;
  width: var(--icon-size, 16px);
  height: var(--icon-size, 16px);
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* ---------- Sidebar navigation (18px) ---------- */
.nav a::before {
  --icon-size: 18px;
  opacity: 0.9;
}

.nav a.active::before {
  background-color: var(--color-accent);
  opacity: 1;
}

.nav a[href="/"] { --icon: var(--icon-layout-dashboard); }
.nav a[href="/planner"] { --icon: var(--icon-compass); }
.nav a[href="/timesheets"] { --icon: var(--icon-timer); }
.nav a[href="/jobs"] { --icon: var(--icon-briefcase); }
.nav a[href="/recurring-jobs"] { --icon: var(--icon-repeat); }
.nav a[href="/calendar"] { --icon: var(--icon-calendar-days); }
.nav a[href="/clients"] { --icon: var(--icon-users); }
.nav a[href="/documents"] { --icon: var(--icon-folder); }
.nav a[href="/follow-ups"] { --icon: var(--icon-bell-ring); }
.nav a[href="/staff"] { --icon: var(--icon-user-cog); }
.nav a[href="/job-types"] { --icon: var(--icon-tag); }
.nav a[href="/invoices"] { --icon: var(--icon-receipt-indian-rupee); }
.nav a[href="/templates"] { --icon: var(--icon-message-square-text); }
.nav a[href="/reports"] { --icon: var(--icon-file-chart-column); }
.nav a[href="/analysis"] { --icon: var(--icon-chart-column-increasing); }
.nav a[href="/leads"] { --icon: var(--icon-target); }
.nav a[href="/firm-profile"] { --icon: var(--icon-building-2); }
.nav a[href="/api/guide"] { --icon: var(--icon-book-open); }
.nav a[href="/portal"] { --icon: var(--icon-lock-keyhole); }

/* ---------- Topbar (18px) ---------- */
.topbar-search::before {
  --icon: var(--icon-search);
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  pointer-events: none;
}

.menu-btn::before { --icon: var(--icon-menu); --icon-size: 18px; }
.theme-toggle::before { --icon: var(--icon-moon); --icon-size: 18px; }
:root[data-theme="dark"] .theme-toggle::before { --icon: var(--icon-sun); }
.notif-bell::before { --icon: var(--icon-bell); --icon-size: 18px; }

/* ---------- Inline (16px unless noted) ---------- */
.user-card .btn-link::before { --icon: var(--icon-log-out); --icon-size: 14px; }
.contact-row .btn::before { --icon: var(--icon-mail); }
.contact-row + .contact-row .btn::before { --icon: var(--icon-message-circle); }
a[href$="/pdf"]::before { --icon: var(--icon-file-text); }
a.btn[href*="/export.csv"]::before { --icon: var(--icon-download); }
.timer-display::before { --icon: var(--icon-timer); --icon-size: 18px; }
.time-bill-hint > span:first-child::before { --icon: var(--icon-timer); }
.demo-banner::before { --icon: var(--icon-info); }
.notif-popup-head strong::before { --icon: var(--icon-bell); }
.kanban-card-due::before { --icon: var(--icon-calendar-days); --icon-size: 13px; }
.toast::before { --icon: var(--icon-circle-check); --icon-size: 18px; }
.toast.err::before { --icon: var(--icon-circle-alert); }

/* Inline links that gain an icon need flex alignment. */
a[href$="/pdf"]:not(.btn),
.timer-display,
.time-bill-hint > span:first-child,
.notif-popup-head strong,
.kanban-card-due {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
}