/* CNET brand layer: applies the logo palette without changing page behavior. */
:root {
  --cnet-blue: #087fbe;
  --cnet-blue-deep: #075f91;
  --cnet-blue-ink: #12364f;
  --cnet-blue-soft: #eaf6fc;
  --cnet-green: #079b45;
  --cnet-green-deep: #067b38;
  --cnet-green-soft: #e9f8ef;
  --cnet-canvas: #f3f8fb;
  --cnet-surface: #ffffff;
  --cnet-border: #d5e4ed;
  --cnet-muted: #60788a;
  --cnet-shadow: 0 12px 30px rgba(18, 54, 79, 0.09);
  --bg-light: var(--cnet-canvas);
  --bg-soft: var(--cnet-blue-soft);
  --surface: var(--cnet-surface);
  --card-bg: var(--cnet-surface);
  --text-dark: var(--cnet-blue-ink);
  --text-muted: var(--cnet-muted);
  --border: var(--cnet-border);
  --focus: var(--cnet-blue);
  --focus-strong: var(--cnet-blue-deep);
  --btn: var(--cnet-green);
  --btn-hover: var(--cnet-green-deep);
  --admin-bg: var(--cnet-canvas);
  --admin-surface: var(--cnet-surface);
  --admin-surface-soft: #f7fbfd;
  --admin-border: var(--cnet-border);
  --admin-border-strong: #bdd3df;
  --admin-text: var(--cnet-blue-ink);
  --admin-muted: var(--cnet-muted);
  --admin-accent: var(--cnet-blue);
  --admin-accent-soft: var(--cnet-blue-soft);
  --admin-shadow: var(--cnet-shadow);
}

body, body > main, .app { background: var(--cnet-canvas); color: var(--cnet-blue-ink); }
.app-header, .work-session-header, .simple-work-header, .client-requests-header { background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid rgba(8, 127, 190, 0.12); box-shadow: 0 8px 22px rgba(18, 54, 79, 0.07); }
.section-title-header, .page-main-title { color: var(--cnet-blue-ink); }
.app-header__menu-button, .sidebar__close-button, .app-header__dashboard-link { color: var(--cnet-blue); }
.app-header__menu-button:hover, .sidebar__close-button:hover, .app-header__dashboard-link:hover { background: var(--cnet-blue-soft); }

/* Sidebar icons are derived from link destinations so every duplicated admin shell inherits them. */
.sidebar__item { border-bottom: 0; }
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-left: 0.5rem;
  color: #38556a;
  border-left-color: transparent;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
  /* Each navigation destination owns one distinct local Heroicon. */
  .sidebar__link::before { content: ""; width: 1.05rem; height: 1.05rem; flex: 0 0 1.05rem; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; opacity: 0.82; }
  .sidebar__link[href="/"]::before { -webkit-mask-image: url("/static/img/heroicons/arrow-uturn-left.svg"); mask-image: url("/static/img/heroicons/arrow-uturn-left.svg"); }
  .sidebar__link[href="/home"]::before { -webkit-mask-image: url("/static/img/heroicons/home.svg"); mask-image: url("/static/img/heroicons/home.svg"); }
  .sidebar__link[href^="/admin/buildings"]::before { -webkit-mask-image: url("/static/img/heroicons/building-office-2.svg"); mask-image: url("/static/img/heroicons/building-office-2.svg"); }
  .sidebar__link[href^="/admin/users"]::before { -webkit-mask-image: url("/static/img/heroicons/identification.svg"); mask-image: url("/static/img/heroicons/identification.svg"); }
  .sidebar__link[href^="/admin/companies"]::before { -webkit-mask-image: url("/static/img/heroicons/globe-americas.svg"); mask-image: url("/static/img/heroicons/globe-americas.svg"); }
  .sidebar__link[href^="/admin/plans"]::before { -webkit-mask-image: url("/static/img/heroicons/clipboard-document-list.svg"); mask-image: url("/static/img/heroicons/clipboard-document-list.svg"); }
  .sidebar__link[href^="/admin/projects"]::before { -webkit-mask-image: url("/static/img/heroicons/briefcase.svg"); mask-image: url("/static/img/heroicons/briefcase.svg"); }
  .sidebar__link[href^="/admin/clients"]::before { -webkit-mask-image: url("/static/img/heroicons/user-group.svg"); mask-image: url("/static/img/heroicons/user-group.svg"); }
  .sidebar__link[href^="/admin/tickets"]::before { -webkit-mask-image: url("/static/img/heroicons/ticket.svg"); mask-image: url("/static/img/heroicons/ticket.svg"); }
  .sidebar__link[href^="/admin/assigned-workers"]::before { -webkit-mask-image: url("/static/img/heroicons/user-plus.svg"); mask-image: url("/static/img/heroicons/user-plus.svg"); }
  .sidebar__link[href^="/admin/current-works"]::before { -webkit-mask-image: url("/static/img/heroicons/bolt.svg"); mask-image: url("/static/img/heroicons/bolt.svg"); }
  .sidebar__link[href^="/admin/previous-works"]::before { -webkit-mask-image: url("/static/img/heroicons/clock.svg"); mask-image: url("/static/img/heroicons/clock.svg"); }
  .sidebar__link[href^="/admin/data"]::before { -webkit-mask-image: url("/static/img/heroicons/chart-bar-square.svg"); mask-image: url("/static/img/heroicons/chart-bar-square.svg"); }
  .sidebar__link[href^="/admin/onboarding"]::before { -webkit-mask-image: url("/static/img/heroicons/arrow-up-tray.svg"); mask-image: url("/static/img/heroicons/arrow-up-tray.svg"); }
  .sidebar__link[href^="/admin/tasks-v2"]::before { -webkit-mask-image: url("/static/img/heroicons/clipboard-document-check.svg"); mask-image: url("/static/img/heroicons/clipboard-document-check.svg"); }
  .sidebar__link[href^="/dashboard/reports"]::before { -webkit-mask-image: url("/static/img/heroicons/document-chart-bar.svg"); mask-image: url("/static/img/heroicons/document-chart-bar.svg"); }
  .sidebar__link[href^="/dashboard/dashboards/absents"]::before { -webkit-mask-image: url("/static/img/heroicons/squares-2x2.svg"); mask-image: url("/static/img/heroicons/squares-2x2.svg"); }
  .sidebar__link[href^="/dashboard/tasks"]::before { -webkit-mask-image: url("/static/img/heroicons/calendar-days.svg"); mask-image: url("/static/img/heroicons/calendar-days.svg"); }
  .sidebar__link[href^="/dashboard/tutorials"]::before { -webkit-mask-image: url("/static/img/heroicons/academic-cap.svg"); mask-image: url("/static/img/heroicons/academic-cap.svg"); }
  .sidebar__link[href^="/dashboard/map"]::before { -webkit-mask-image: url("/static/img/heroicons/map.svg"); mask-image: url("/static/img/heroicons/map.svg"); }
.sidebar__link:hover { padding-left: 0.5rem; color: var(--cnet-blue-deep); border-left-color: var(--cnet-blue); }
.sidebar__item--active .sidebar__link { color: var(--cnet-blue-deep); border-left-color: var(--cnet-green); background: linear-gradient(90deg, var(--cnet-green-soft), transparent 88%); }
.sidebar__item--active .sidebar__link::before { color: var(--cnet-green); opacity: 1; }
.sidebar__footer { border-top-color: var(--cnet-border); }
.sidebar__logo { width: min(100%, 190px); max-width: 190px; opacity: 1; }

/* Conversation bubbles identify the shared Messaging destination in every admin shell. */
.sidebar__link[href="/admin/messaging"]::before { -webkit-mask-image: url("/static/img/heroicons/chat-bubble-left-right.svg"); mask-image: url("/static/img/heroicons/chat-bubble-left-right.svg"); }

/* Brand color is reserved for focus, actions, and meaningful data states. */
input:focus, select:focus, textarea:focus { border-color: var(--cnet-blue) !important; box-shadow: 0 0 0 3px rgba(8, 127, 190, 0.13) !important; }
.admin-form-wrap, .admin-detail-section, .admin-home-card, .list-area, .record-card, .work-box, .client-request-card, .intake-card { border-color: var(--cnet-border); box-shadow: var(--cnet-shadow); }
.data-table thead th, .admin-home__table thead th { background: linear-gradient(180deg, #f7fbfd, var(--cnet-blue-soft)); color: var(--cnet-blue-ink); }
.data-table tbody tr:hover, .admin-home__table tbody tr:hover { background: rgba(8, 127, 190, 0.055); }
.pager__btn, .table-filter-submit, .admin-submit-btn, .photo-panel-btn { border-color: var(--cnet-blue); background-color: var(--cnet-blue); color: #fff; }
.pager__btn:hover, .table-filter-submit:hover, .admin-submit-btn:hover, .photo-panel-btn:hover { border-color: var(--cnet-blue-deep); background-color: var(--cnet-blue-deep); }
.pager__btn--active, .admin-primary-action, .clock-in-btn { border-color: var(--cnet-green); background-color: var(--cnet-green); color: #fff; }

/* Checkout keeps its original raised white surface while the action icon uses CNET green. */
.photo-panel-btn.work-checkout-btn {
  border: none;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
  color: var(--cnet-green);
  box-shadow: 0 14px 28px rgba(36, 65, 93, 0.12), 0 3px 7px rgba(36, 65, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(178, 195, 212, 0.42);
}
.photo-panel-btn.work-checkout-btn::before { background-color: var(--cnet-green); }
/* Clock in keeps the same green text and icon treatment as the checkout control. */
.photo-panel-btn.building-checkin-btn { color: var(--cnet-green); }
.photo-panel-btn.building-checkin-btn::before { background-color: currentColor; }
.photo-panel-btn.building-checkin-btn:hover { color: var(--cnet-green-deep); }
.photo-panel-btn.work-checkout-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f2f5f8 100%);
  color: var(--cnet-green-deep);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(36, 65, 93, 0.14), 0 4px 8px rgba(36, 65, 93, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(178, 195, 212, 0.3);
}
.photo-panel-btn.work-checkout-btn:active { transform: translateY(1px) scale(0.994); }
.photo-panel-btn.work-checkout-btn:disabled,
.photo-panel-btn.work-checkout-btn[disabled] {
  background: linear-gradient(180deg, #f7f9fb 0%, #e8eef3 100%);
  color: #8a98a7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 -1px 0 rgba(194, 205, 216, 0.28);
}
.photo-panel-btn.work-checkout-btn:disabled::before,
.photo-panel-btn.work-checkout-btn[disabled]::before { background-color: #8a98a7; }
.photo-panel-btn.building-checkin-btn:disabled,
.photo-panel-btn.building-checkin-btn[disabled] { color: #8a98a7; }
.photo-panel-btn.building-checkin-btn:disabled::before,
.photo-panel-btn.building-checkin-btn[disabled]::before { background-color: #8a98a7; }

/* The supplied horizontal logo needs a wider slot than the prior square asset. */
.user-brand-logo { width: min(250px, 58vw); max-width: 250px; height: auto; max-height: 54px; }
#cnet-login-logo { width: min(290px, 78vw); height: auto; object-fit: contain; }

/* Worker surfaces stay white and use a compact header logo for faster visual scanning. */
body:has(.work-type-header),
body:has(.assigned-works-header),
body:has(.work-session-header),
body:has(.simple-work-header),
body:has(.work-history-header) { background: #fff; }
body:has(.work-type-header) > main,
body:has(.assigned-works-header) > main,
body:has(.work-session-header) > main,
body:has(.simple-work-header) > main,
body:has(.work-history-header) > main,
.work-type-page,
.buildings-page,
.work-box { background-color: #fff; }
.work-type-header .user-brand-logo,
.assigned-works-header .user-brand-logo,
.work-session-header .user-brand-logo,
.simple-work-header .user-brand-logo,
.work-history-header .user-brand-logo {
  width: min(160px, 44vw);
  max-width: 160px;
  max-height: 38px;
  object-fit: contain;
}
.work-type-header,
.assigned-works-header,
.work-session-header,
.simple-work-header,
.work-history-header {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(8, 127, 190, 0.12);
  box-shadow: none;
}

/* Work shells keep navigation visible while reserving its space in the scrollable content. */
body:has(> :is(.work-type-header, .assigned-works-header, .work-session-header, .simple-work-header, .work-history-header)) {
  --work-footer-height: calc(62px + env(safe-area-inset-bottom, 0px));
}
body:has(> :is(.work-type-header, .assigned-works-header, .work-session-header, .simple-work-header, .work-history-header)) > :is(.work-type-header, .assigned-works-header, .work-session-header, .simple-work-header, .work-history-header) {
  position: sticky;
  top: 0;
  z-index: 30;
}
body:has(> :is(.work-type-header, .assigned-works-header, .work-session-header, .simple-work-header, .work-history-header)) > main {
  padding-bottom: calc(var(--work-footer-height) + 1rem);
}
body:has(> :is(.work-type-header, .assigned-works-header, .work-session-header, .simple-work-header, .work-history-header)) > footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  height: var(--work-footer-height);
  margin: 0;
  border-top: 3px solid var(--cnet-green);
  background: linear-gradient(110deg, var(--cnet-blue-ink), var(--cnet-blue-deep));
  box-shadow: none;
}
body:has(> :is(.work-type-header, .assigned-works-header, .work-session-header, .simple-work-header, .work-history-header)) > footer .nav-icon {
  color: #fff;
}
body:has(> :is(.work-type-header, .assigned-works-header, .work-session-header, .simple-work-header, .work-history-header)) > footer .nav-icon:hover {
  background: var(--cnet-green);
}
body:has(> :is(.work-type-header, .assigned-works-header, .work-session-header, .simple-work-header, .work-history-header)) > footer .nav-img,
body:has(> :is(.work-type-header, .assigned-works-header, .work-session-header, .simple-work-header, .work-history-header)) > footer .nav-icon:hover .nav-img {
  opacity: 1 !important;
  filter: brightness(0) invert(1) !important;
}
body:has(> :is(.work-type-header, .assigned-works-header, .work-session-header, .simple-work-header, .work-history-header)) :is(.work-session-toast, .flash-toast-wrap) {
  bottom: calc(var(--work-footer-height) + 0.75rem);
}

@media (max-width: 767px) {
  .sidebar__link { gap: 0.6rem; }
  .sidebar__link::before { width: 1rem; height: 1rem; flex-basis: 1rem; }
  .sidebar__logo { max-width: 160px; }
  .work-type-header .user-brand-logo,
  .assigned-works-header .user-brand-logo,
  .work-session-header .user-brand-logo,
  .simple-work-header .user-brand-logo,
  .work-history-header .user-brand-logo { width: min(150px, 42vw); max-width: 150px; max-height: 36px; }
}