@font-face {
  font-family:Athar;
  src:url("/static/brand/athar-book.ttf") format("truetype");
  font-weight:400;
  font-display:swap}
@font-face {
  font-family:Athar;
  src:url("/static/brand/athar-bold.ttf") format("truetype");
  font-weight:600 900;
  font-display:swap}
* {
  box-sizing:border-box}
body {
  margin:0;
  background:#f4f6f9;
  color:#29384d;
  font-family:Athar,Tahoma,Arial,sans-serif;
  font-size:16px;
  line-height:1.7}
.security-onboarding {
  max-width:620px;
  margin:10vh auto;
  padding:28px;
  background:white;
  border:1px solid #d6e3f2;
  border-radius:12px;
  line-height:1.9}
.security-onboarding button {
  margin:6px}
button,input,select,textarea {
  font:inherit}
button {
  cursor:pointer;
  border:0}
button:disabled {
  opacity:.55;
  cursor:wait}
button,input,select,textarea {
  outline-offset:4px}
button:focus-visible,a:focus-visible {
  outline:3px solid #6a9fd4}
[hidden] {
  display:none!important}
h1,h2,p {
  margin-top:0}
h1 {
  font-size:32px;
  margin-bottom:10px}
h2 {
  font-size:20px;
  margin-bottom:8px}
.muted {
  color:#516176}
.small {
  font-size:12px}
.eyebrow {
  font-size:12px;
  color:#52647b;
  display:block;
  margin-bottom:12px}
.brand {
  font-weight:750;
  font-size:31px;
  display:flex;
  align-items:center;
  gap:12px}
.mark {
  width:43px;
  height:43px;
  background:#dce8bd;
  color:#173d35;
  border-radius:13px 3px 13px 13px;
  display:inline-grid;
  place-items:center;
  font-size:26px}
.primary {
  background:#21375f;
  color:white;
  padding:13px 22px;
  border-radius:9px;
  font-weight:600;
  white-space:nowrap}
.primary:hover {
  background:#192b4c}
aside {
  position:fixed;
  inset:0 0 0 auto;
  width:235px;
  background:#21375f;
  color:#f3f7fc;
  padding:24px 20px;
  overflow-y:auto;
  scrollbar-width:thin;
  display:flex;
  flex-direction:column}
.side-caption {
  color:#c5d8ee;
  margin:12px 55px 40px 0;
  font-size:12px}
.nav {
  display:flex;
  gap:13px;
  align-items:center;
  width:100%;
  background:none;
  color:#d5e2f2;
  text-align:right;
  padding:12px 14px;
  min-height:48px;
  margin:4px 0;
  border-radius:8px}
.nav.active {
  background:#304c78;
  color:#aedfea}
.side-bottom {
  margin-top:auto;
  font-size:12px;
  color:#c5d8ee;
  line-height:1.9}
.trial {
  color:#aedfea;
  font-size:13px;
  margin-bottom:9px}
.logout {
  background:none;
  color:#eaf2fb;
  padding:10px 0}
main {
  margin-right:235px;
  padding:0 40px}
header {
  height:85px;
  border-bottom:1px solid #dde5ef;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px}
.profile {
  display:flex;
  align-items:center;
  gap:10px}
.avatar {
  display:inline-grid;
  place-items:center;
  background:#e6effa;
  color:#21375f;
  width:35px;
  height:35px;
  border-radius:50%;
  font-weight:bold}
.heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:28px 0 24px}
.heading p {
  margin-bottom:0}
.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:17px}
.stat {
  background:white;
  border:1px solid #e1e8f1;
  border-radius:14px;
  padding:18px 22px;
  box-shadow:0 2px 5px #21375f03}
.stat-top {
  display:flex;
  justify-content:space-between;
  color:#52647b;
  font-size:13px}
.stat strong {
  display:block;
  font-size:34px;
  font-weight:700;
  line-height:1.35;
  margin:8px 0 4px}
.stat small {
  color:#52647b;
  font-size:11px}
.stat-icon {
  color:#42668e}
.stat.warn strong {
  color:#b36146}
.progress-section {
  margin:23px 0;
  background:#e9f1fa;
  border-radius:12px;
  padding:25px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px}
.progress-section p {
  font-size:13px;
  margin-bottom:0}
.progress-section .eyebrow {
  margin-bottom:7px}
.progress-wrap {
  width:34%;
  min-width:160px}
.progress-wrap strong {
  font-size:30px}
.track {
  height:7px;
  background:#d4e4f3;
  border-radius:20px;
  margin:10px 0}
.track div {
  background:#426b9b;
  height:100%;
  border-radius:20px;
  width:0}
.board {
  background:white;
  border:1px solid #e1e8f1;
  border-radius:16px;
  padding:24px;
  margin-top:25px}
.board-top {
  display:flex;
  justify-content:space-between;
  align-items:center}
.view-toggle {
  padding:4px;
  border:1px solid #e1e8f1;
  border-radius:7px;
  display:flex}
.view-toggle button {
  background:none;
  padding:6px 13px;
  color:#52647b;
  border-radius:4px;
  font-size:12px}
.view-toggle .selected {
  background:#e9f1fa;
  color:#21375f}
.filters {
  display:flex;
  gap:10px;
  margin:24px 0}
.filters input {
  flex:1;
  min-width:130px}
input,select,textarea {
  width:100%;
  padding:11px 12px;
  min-height:46px;
  border:1px solid #bdcbdc;
  border-radius:7px;
  background:#fff;
  color:#21375f}
textarea {
  resize:vertical}
.filters select {
  width:auto;
  max-width:180px;
  font-size:12px}
.cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px}
.task-card {
  background:white;
  border:1px solid #e1e8f1;
  border-radius:10px;
  padding:19px;
  text-align:right;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:box-shadow .18s,transform .18s}
.task-card:hover {
  box-shadow:0 5px 20px #21375f14;
  transform:translateY(-2px)}
.card-top,.card-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px}
.badge {
  display:inline-block;
  border-radius:5px;
  padding:5px 8px;
  font-size:11px;
  background:#eef1f4;
  color:#657483}
.badge.working {
  background:#e7effa;
  color:#47709b}
.badge.review {
  background:#fff3dc;
  color:#95742e}
.badge.revision {
  background:#f8e9e2;
  color:#a56349}
.badge.approved {
  background:#e5f1e6;
  color:#46744e}
.priority {
  font-size:11px;
  color:#52647b}
.priority.urgent {
  color:#b25f48}
.priority.high {
  color:#a08849}
.task-card h3 {
  font-size:15px;
  margin:0;
  line-height:1.6}
.task-card p {
  font-size:12px;
  line-height:1.9;
  color:#52647b;
  margin:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.card-bottom {
  border-top:1px solid #e8eef6;
  padding-top:13px;
  margin-top:auto;
  font-size:11px;
  color:#52647b}
.overdue {
  color:#b46148}
.empty {
  grid-column:1/-1;
  text-align:center;
  padding:45px;
  color:#52647b}
.cards.list {
  grid-template-columns:1fr}
.cards.list .task-card {
  display:grid;
  grid-template-columns:180px 1fr 1fr;
  align-items:center}
.cards.list .task-card p {
  display:none}
.cards.list .card-bottom {
  border:0;
  margin:0;
  padding:0}
.team-row {
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  padding:17px 5px;
  border-bottom:1px solid #e8eef6;
  gap:12px}
footer {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#52647b;
  padding:25px 0}
dialog {
  border:0;
  border-radius:16px;
  width:min(630px,94vw);
  max-height:90vh;
  padding:30px;
  color:#21375f;
  box-shadow:0 30px 90px #172d5040}
dialog::backdrop {
  background:#172d5066;
  backdrop-filter:blur(3px)}
.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:start;
  margin-bottom:20px}
.close {
  background:#edf3fb;
  color:#42668e;
  border-radius:50%;
  width:32px;
  height:32px;
  font-size:24px}
.form-row {
  display:flex;
  gap:15px}
.form-row label {
  flex:1}
label {
  display:block;
  font-size:13px;
  margin-bottom:17px}
label input,label textarea,label select {
  margin-top:8px}
form>.primary {
  width:100%;
  margin-top:5px}
.detail-copy {
  white-space:pre-wrap;
  line-height:1.9;
  color:#526880;
  background:#f5f8fc;
  padding:17px;
  border-radius:8px}
.detail-meta {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin:20px 0;
  font-size:13px}
.detail-meta span {
  color:#52647b;
  display:block;
  margin-bottom:6px}
.actions {
  display:flex;
  gap:10px;
  margin:20px 0}
.secondary {
  background:#f3e9df;
  color:#8e6848;
  padding:13px 20px;
  border-radius:8px}
.history {
  border-right:2px solid #d4e4f3;
  padding-right:18px;
  margin:18px 0}
.history strong {
  font-size:13px}
.history p {
  white-space:pre-wrap;
  font-size:13px;
  color:#52647b;
  line-height:1.8;
  margin:7px 0}
.history time {
  font-size:11px;
  color:#52647b}
#toast {
  position:fixed;
  bottom:25px;
  left:25px;
  max-width:90vw;
  padding:14px 22px;
  border-radius:10px;
  background:#21375f;
  color:white;
  z-index:10;
  box-shadow:0 4px 20px #1233;
  display:none}
.login {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh}
.intro {
  background:#21375f;
  color:#f3f7fc;
  padding:55px 12%;
  display:flex;
  flex-direction:column;
  justify-content:center}
.intro .brand {
  margin-bottom:75px}
.intro .eyebrow {
  color:#aedfea}
.intro h1 {
  font-size:51px;
  line-height:1.5;
  margin:0 0 18px}
.intro p {
  color:#d4e2f3;
  line-height:2;
  font-size:16px}
.intro small {
  margin-top:65px;
  color:#c5d8ee}
.flow {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:20px}
.flow span {
  border:1px solid #6a9fd4;
  border-radius:25px;
  padding:9px 20px;
  font-size:13px}
.flow b {
  color:#aedfea}
.login-panel {
  display:grid;
  place-items:center;
  padding:40px}
.login-panel form {
  width:100%;
  max-width:350px}
.login-panel h2 {
  font-size:30px}
.login-panel label {
  margin-top:25px}
.login-panel .small {
  line-height:1.9;
  margin-top:20px}
@media(min-width:1600px) {
  main {
    max-width:1600px;
    margin-left:auto}
}
@media(max-width:1100px) {
  aside {
    width:200px;
    padding:28px 18px}
  main {
    margin-right:200px;
    padding:0 24px}
  .cards {
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters {
    flex-wrap:wrap}
  .stats {
    gap:10px}
  .stat {
    padding:16px}
  .profile .small {
    display:none}
}
@media(max-width:700px) {
  aside {
    position:static;
    width:100%;
    padding:15px 18px;
    display:block}
  .brand {
    font-size:24px}
  .mark {
    height:34px;
    width:34px}
  .side-caption,.side-bottom {
    display:none}
  nav {
    display:flex;
    margin-top:13px;
    gap:5px}
  .nav {
    padding:10px 8px;
    justify-content:center;
    font-size:11px;
    gap:5px;
    margin:0}
  .nav.active {
    background:#304c78}
  main {
    margin:0;
    padding:0 16px}
  header {
    height:65px;
    font-size:11px}
  .heading {
    margin:25px 0;
    gap:10px}
  .heading h1 {
    font-size:26px}
  .heading p {
    font-size:12px}
  .heading .primary {
    padding:11px;
    font-size:12px}
  .stats {
    grid-template-columns:repeat(2,1fr)}
  .stat strong {
    font-size:27px}
  .progress-section {
    padding:20px;
    gap:16px}
  .progress-wrap {
    min-width:90px}
  .progress-section h2 {
    font-size:17px}
  .board {
    padding:17px}
  .cards {
    grid-template-columns:1fr}
  .filters input {
    flex-basis:100%}
  .filters select {
    flex:1;
    max-width:none;
    min-width:0}
  .cards.list .task-card {
    display:flex}
  .board h2 {
    font-size:18px}
  .view-toggle button {
    padding:5px 9px}
  .form-row {
    display:block}
  .team-row {
    font-size:12px}
  .login {
    grid-template-columns:1fr}
  .intro {
    padding:28px}
  .intro .brand {
    margin:0 0 25px}
  .intro h1 {
    font-size:31px}
  .intro p,.intro small,.flow {
    display:none}
  .login-panel {
    padding:35px 25px}
  .detail-meta {
    grid-template-columns:1fr}
  footer {
    gap:20px;
    font-size:10px}
}
@media(max-width:700px) {
  aside {
    position:relative}
  .side-bottom {
    display:block;
    position:absolute;
    top:18px;
    left:18px;
    margin:0}
  .side-bottom p,.side-bottom .trial {
    display:none}
  .logout {
    font-size:11px;
    padding:6px}
}
.user-controls {
  display:flex;
  gap:7px;
  align-items:center}
.small-button {
  padding:7px 10px;
  border-radius:6px;
  background:#e9f1fa;
  color:#21375f;
  font-size:11px}
.team-row {
  grid-template-columns:2fr repeat(3,1fr) 2fr}
.team-row.inactive {
  opacity:.6}
@media(max-width:700px) {
  .team-row {
    grid-template-columns:2fr repeat(3,1fr)}
  .user-controls {
    grid-column:1/-1}
}
.work-updates {
  border-top:1px solid #dde5ef;
  margin-top:26px;
  padding-top:18px}
.work-updates>p {
  line-height:1.8}
.work-update {
  border:1px solid #dde5ef;
  border-radius:10px;
  padding:16px;
  margin:12px 0;
  background:#fbfcff;
  overflow-wrap:anywhere}
.work-update>strong,.work-update>span {
  display:block;
  margin-bottom:7px}
.work-update p {
  white-space:pre-wrap;
  line-height:1.9;
  margin:10px 0}
.work-updates form {
  background:#edf4fc;
  border-radius:10px;
  padding:16px;
  margin-bottom:20px}
.daily-report {
  margin-top:22px;
  border-top:1px solid #dde5ef;
  padding-top:12px}
.daily-report h3 {
  margin:0}
.report-task-link {
  background:none;
  color:#21375f;
  text-align:right;
  font-weight:700;
  padding:0;
  text-decoration:underline;
  white-space:normal}
.filters label {
  font-size:13px;
  display:grid;
  gap:7px;
  margin:0;
  min-width:150px}
.filters label input,.filters label select {
  width:100%;
  min-width:0}
.filters .secondary {
  align-self:end}
.work-update-list {
  margin-top:18px}
@media(max-width:700px) {
  nav {
    flex-wrap:wrap}
  .nav {
    flex:1 1 25%}
  #reports .filters label {
    width:100%}
  .daily-report .board-top {
    align-items:flex-start;
    gap:10px}
  .work-updates .primary {
    white-space:normal}
}
/* Athar identity: source colors from the company's live Elementor palette. */
:root {
  --athar-primary:#21375f;
  --athar-accent:#6a9fd4;
  --athar-secondary:#aedfea;
  --athar-mint:#cbe7d9}
.brand {
  font-family:Athar,Tahoma,Arial,sans-serif;
  gap:16px;
  line-height:1.4;
  max-width:100%}
.brand-logo {
  display:block;
  width:144px;
  height:auto;
  flex-shrink:0;
  background:#fff;
  border-radius:8px;
  padding:8px;
  object-fit:contain}
.brand-copy {
  display:grid;
  gap:5px;
  min-width:0}
.brand-copy strong {
  font-size:32px;
  color:inherit}
.brand-copy>span {
  font-size:12px;
  font-weight:400;
  color:#d5e2f2;
  white-space:nowrap}
aside .brand {
  flex-direction:row;
  align-items:center;
  gap:12px}
aside .brand-logo {
  width:80px;
  max-width:80px}
aside .brand-copy strong {
  font-size:27px}
aside .brand-copy>span {
  font-size:11px}
.side-caption {
  margin:16px 0 20px;
  color:#aedfea}
.intro .brand {
  margin-bottom:50px}
.intro {
  background:linear-gradient(145deg,#21375f,#192b4c)}
.primary:hover {
  box-shadow:0 4px 14px #21375f20}
.progress-section {
  border:1px solid #d4e4f3}
.track div {
  background:#6a9fd4}
.intro h1 {
  font-weight:700}
.nav.active {
  box-shadow:inset -3px 0 #aedfea}
.login-panel {
  background:#f8fbff}
@media(max-width:700px) {
  aside .brand {
    flex-direction:row;
    align-items:center;
    gap:10px;
    max-width:calc(100% - 150px)}
  aside .brand-logo {
    width:84px;
    padding:5px;
    max-width:none}
  aside .brand-copy strong {
    font-size:23px}
  aside .brand-copy>span {
    display:none}
  .intro .brand {
    margin-bottom:26px}
  .intro .brand-logo {
    width:114px}
  .intro .brand-copy strong {
    font-size:29px}
  .intro .brand-copy>span {
    font-size:11px}
  .intro h1 {
    font-size:30px}
  .side-bottom {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:0;
    top:15px;
    left:15px}
  .side-bottom .logout {
    padding:5px 0}
  .nav.active {
    box-shadow:inset 0 -2px #aedfea}
  .brand-copy {
    gap:3px}
}
@media(min-width:701px) {
  aside {
    overflow-y:auto;
    padding-top:24px;
    padding-bottom:20px}
  aside .brand {
    gap:10px}
  aside .brand-logo {
    max-width:144px}
  aside .brand-copy strong {
    font-size:23px}
  .side-caption {
    margin:8px 0 18px}
  .nav {
    padding-top:12px;
    padding-bottom:12px}
}
.badge.approved {
  background:var(--athar-mint);
  color:var(--athar-primary)}
/* One employee, one complete compact task list. */
.cards.employee-board {
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:18px}
.employee-card {
  border:1px solid #d6e3f2;
  border-radius:12px;
  background:#f8fbff;
  overflow:hidden;
  min-width:0}
.employee-card-heading {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:12px;
  padding:18px 18px 10px}
.employee-card h3 {
  margin:0 0 6px;
  color:#21375f;
  font-size:17px}
.employee-card-heading p {
  margin:0;
  color:#52647b;
  font-size:11px}
.employee-total {
  font-size:11px;
  background:#e7f0fb;
  color:#21375f;
  padding:6px 9px;
  border-radius:20px;
  white-space:nowrap}
.employee-summary {
  padding:7px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:11px;
  color:#526880}
.employee-summary strong {
  font-size:20px;
  color:#21375f}
.employee-progress {
  display:block;
  appearance:none;
  border:0;
  border-radius:10px;
  background:#dbe7f5;
  color:#6a9fd4;
  width:calc(100% - 36px);
  height:5px;
  margin:0 18px}
.employee-progress::-webkit-progress-bar {
  background:#dbe7f5;
  border-radius:10px}
.employee-progress::-webkit-progress-value {
  background:#6a9fd4;
  border-radius:10px}
.employee-progress::-moz-progress-bar {
  background:#6a9fd4}
.employee-period {
  font-size:10px;
  color:#52647b;
  padding:8px 18px 12px;
  margin:0;
  line-height:1.6}
.employee-task-list {
  background:white;
  border-top:1px solid #dce6f2;
  padding:0 12px}
.employee-task {
  width:100%;
  display:grid;
  grid-template-columns:19px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  text-align:right;
  padding:14px 3px;
  border-bottom:1px solid #e7edf5;
  background:transparent;
  color:#21375f}
.employee-task:last-child {
  border-bottom:0}
.employee-task:hover {
  background:#f3f8fe}
.task-check {
  width:16px;
  height:16px;
  border:1px solid #8ca6c5;
  border-radius:4px;
  font-size:12px;
  display:grid;
  place-items:center;
  grid-row:1/3}
.task-check.checked {
  border-color:#21375f;
  background:#cbe7d9;
  color:#21375f}
.employee-task-title {
  font-size:14px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  min-width:0}
.employee-task .badge {
  font-size:10px;
  white-space:nowrap}
.employee-task-date {
  grid-column:2/-1;
  font-size:10px;
  color:#52647b}
.employee-task-date.overdue {
  color:#a24c36}
.employee-no-tasks {
  color:#52647b;
  padding:22px 8px;
  font-size:12px;
  line-height:1.8;
  margin:0}
.view-toggle {
  flex-wrap:wrap}
.board-top {
  gap:12px}
@media(max-width:700px) {
  .cards.employee-board {
    grid-template-columns:1fr}
}
@media(max-width:700px) {
  .board>.board-top {
    align-items:flex-start;
    flex-wrap:wrap}
  .view-toggle {
    max-width:100%}
  .view-toggle button {
    padding:7px 10px}
  .employee-card-heading {
    padding:16px 14px 10px}
  .employee-total {
    font-size:10px}
  .employee-task-title {
    font-size:12px}
  .employee-card h3 {
    font-size:16px}
}
.project-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:20px}
.policy-note {
  background:#cbe7d9;
  padding:18px;
  border-radius:12px;
  line-height:1.9}
.monthly-percent {
  font-size:32px;
  color:#21375f}
.reward-earned {
  background:#cbe7d9;
  padding:12px;
  border-radius:8px}
.member-option {
  display:flex;
  gap:10px;
  align-items:center}
.member-option input {
  width:auto}
fieldset {
  border:1px solid #d8e1ee;
  border-radius:10px;
  margin:16px 0}
.badge.approval {
  background:#cbe7d9;
  color:#21375f}
.history pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:12px}
.work-update a {
  overflow-wrap:anywhere}
.filters input[type=month] {
  min-width:160px}
.user-controls {
  flex-wrap:wrap}
.user-controls select {
  max-width:140px;
  padding:6px;
  font-size:12px}
.setup-secret {
  display:block;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  padding:16px;
  background:#edf4fc;
  border-radius:10px;
  user-select:all;
  font-family:monospace;
  font-size:15px}
@media(max-width:700px) {
  aside .brand {
    max-width:100%}
  .side-bottom {
    position:static;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    margin-top:14px;
    gap:8px}
  .side-bottom .logout {
    padding:6px 0}
  .filters select {
    flex:1 1 110px}
  .heading {
    align-items:flex-start}
  .heading .primary {
    white-space:normal;
    flex-shrink:0;
    max-width:135px}
}
@media(min-width:701px) {
  aside>* {
    flex-shrink:0}
  .side-bottom .logout {
    display:block;
    width:100%;
    text-align:right}
  .side-bottom {
    padding-top:18px}
}
@media(min-width:701px) and (max-width:1050px) {
  .stats {
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .board-top {
    flex-wrap:wrap;
    gap:14px}
  .board-top .view-toggle {
    flex-shrink:0}
}
.connection-status {
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  background:#fff0d6;
  color:#624412;
  border-bottom:1px solid #f0d39c;
  font-size:13px}
.connection-status button {
  background:#21375f;
  color:#fff;
  border-radius:7px;
  padding:8px 14px}
.demo-accounts {
  margin:24px 0;
  padding:18px;
  border:1px solid #d4e4f3;
  background:#edf4fc;
  border-radius:12px}
.demo-accounts p {
  font-weight:600;
  margin-bottom:12px}
.demo-accounts>div {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px}
.demo-accounts button {
  border:1px solid #c5d8ee;
  border-radius:8px;
  padding:10px;
  background:#fff;
  color:#21375f}
.demo-accounts button:hover {
  background:#cbe7d9}
.demo-accounts small {
  display:block;
  margin-top:12px;
  color:#52647b}
.login-mfa {
  margin:12px 0;
  color:#52647b;
  font-size:13px}
.login-mfa summary {
  cursor:pointer}
.login-mfa label {
  margin-top:12px}
.filters {
  row-gap:10px}
.filters #project-filter {
  max-width:240px}
.filters .small-button {
  white-space:nowrap;
  align-self:stretch;
  font-size:12px}
.project-card-description {
  line-height:1.8}
@media(max-width:700px) {
  .connection-status {
    flex-wrap:wrap;
    gap:8px}
  .filters #project-filter {
    max-width:none}
}
.secondary {
  background:#edf4fc;
  color:#21375f;
  border:1px solid #d5e2f2}
.secondary:hover {
  background:#dfeefb}
.badge.review {
  background:#e8f1fb;
  color:#21375f}
.user-controls :disabled {
  cursor:default}
.snapshot-table-wrap {
  overflow-x:auto}
.snapshot-table {
  border-collapse:collapse;
  width:100%;
  font-size:13px}
.snapshot-table th,.snapshot-table td {
  padding:12px;
  border-bottom:1px solid #d4e4f3;
  text-align:right}
.snapshot-table th {
  background:#edf4fc}
#tools-toggle {
  display:block}
#account-tools {
  display:none}
#account-tools.expanded {
  display:grid;
  gap:4px}
@media(max-width:700px) {
  #tools-toggle {
    display:block}
  #account-tools {
    display:none;
    grid-column:1/-1}
  #account-tools.expanded {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 12px}
}
.daily-content {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.9;
  margin-top:16px}
.whole-day-report {
  background:#f8fbff;
  border:1px solid #d4e4f3;
  border-radius:12px;
  padding:18px;
  margin:16px 0}
#whole-day-section {
  border-block:1px solid #d4e4f3;
  padding:24px 0;
  margin:24px 0}
.whole-day-report .actions {
  flex-wrap:wrap}
.whole-day-report details {
  margin:14px 0}
.whole-day-report summary {
  cursor:pointer;
  font-weight:700;
  padding:6px 0}
@media(max-width:700px) {
  .filters input,.filters select {
    font-size:16px}
  .whole-day-report .actions button {
    flex:1 1 140px;
    white-space:normal}
  #whole-day-section .board-top {
    align-items:flex-start;
    flex-wrap:wrap}
}
.portal-glossary dt {
  font-weight:700;
  margin-top:18px}
.portal-glossary dd {
  margin:6px 0 0;
  line-height:1.9;
  color:#526880}
.demo-tour {
  font-size:13px;
  line-height:1.9;
  margin-bottom:20px}
.demo-tour summary {
  cursor:pointer;
  font-weight:700;
  padding:8px 0}
.field-error {
  color:#913f2d;
  font-size:13px;
  margin:6px 0 12px}
[aria-invalid=true] {
  border-color:#913f2d}
.project-metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:16px 0}
.project-metrics div {
  padding:10px;
  background:white;
  border:1px solid #d4e4f3;
  border-radius:8px}
.project-metrics strong {
  display:block;
  font-size:22px}
.project-metrics span {
  font-size:12px;
  color:#526880}
html {
  -webkit-text-size-adjust:100%;
  scroll-padding-top:20px}
button,a,input,select,textarea {
  touch-action:manipulation}
dialog {
  overscroll-behavior:contain}
main {
  padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3 {
  text-wrap:balance;
  scroll-margin-top:24px}
.stat strong,.monthly-percent,.employee-total,.employee-summary {
  font-variant-numeric:tabular-nums}
@media(max-width:700px) {
  main {
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
    padding-bottom:env(safe-area-inset-bottom)}
  aside {
    padding-top:max(12px,env(safe-area-inset-top))}
  input,select,textarea {
    font-size:16px}
  #workspace.employee-workspace main {
    display:flex;
    flex-direction:column}
  #workspace.employee-workspace main>header {
    order:0}
  #workspace.employee-workspace #demo-banner {
    order:1}
  #workspace.employee-workspace .heading {
    order:2}
  #workspace.employee-workspace .board {
    order:3}
  #workspace.employee-workspace #stats {
    order:4;
    margin-top:18px}
  #workspace.employee-workspace #progress-section {
    order:5}
  #workspace.employee-workspace footer {
    order:6}
  .side-bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 12px}
  .side-bottom .logout {
    text-align:right;
    line-height:1.7}
}
@media(display-mode:standalone) {
  body {
    min-height:100dvh}
  .demo-banner {
    border-radius:0 0 8px 8px}
  #install-app {
    display:none}
}
.filters {
  flex-wrap:wrap}
.filters>* {
  min-width:0}
.task-pagination {
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-top:1px solid #dce6f2;
  background:#f8fbff;
  color:#526880;
  font-size:12px}
.task-pagination button {
  min-height:40px}
.priority.high {
  color:#796120}
.priority.urgent {
  color:#913f2d}
.badge.working {
  color:#355a83}
.badge.revision {
  color:#84472f}
.badge.new {
  color:#4f6172}
.close {
  width:44px;
  height:44px;
  flex-shrink:0}
/* Keyboard access, persistent demo context and compact mobile navigation. */
.skip-link {
  position:fixed;
  top:-100px;
  right:16px;
  background:white;
  color:#21375f;
  padding:12px 20px;
  z-index:2000;
  border:2px solid #21375f;
  border-radius:8px}
.skip-link:focus {
  top:12px}
:focus-visible {
  outline:3px solid #4277ac;
  outline-offset:3px}
.demo-banner {
  padding:10px 16px;
  background:#e8f1fb;
  color:#21375f;
  border:1px solid #b7cde5;
  border-radius:8px;
  font-size:12px;
  line-height:1.8;
  margin-top:16px}
.task-discussion {
  border-top:1px solid #d4e4f3;
  padding-top:18px;
  margin-top:24px}
.task-discussion .work-update time {
  display:block;
  margin-bottom:12px;
  color:#526880;
  font-size:12px}
.form-feedback {
  color:#8b3528;
  font-size:13px;
  white-space:pre-wrap}
button:disabled {
  opacity:.6;
  cursor:default}
#nav-toggle {
  display:none}
.monthly-breakdown {
  margin:24px 0}
.monthly-breakdown>summary {
  cursor:pointer;
  font-weight:700;
  padding:12px 0}
@media(max-width:700px) {
  aside {
    padding:12px 16px}
  aside .brand-logo {
    width:58px}
  aside .brand-copy strong {
    font-size:21px}
  #nav-toggle {
    display:block;
    position:absolute;
    top:20px;
    left:16px;
    background:#edf4fc;
    color:#21375f;
    padding:9px 18px;
    border-radius:8px;
    font-size:13px;
    min-height:44px}
  #main-nav {
    display:none}
  #main-nav.expanded {
    display:flex;
    flex-wrap:wrap;
    margin-top:16px}
  #main-nav .nav {
    min-height:44px;
    flex:1 1 42%;
    font-size:13px}
  .side-bottom {
    margin-top:8px;
    gap:8px}
  .side-bottom .logout {
    min-height:44px;
    font-size:12px;
    padding:9px 5px}
  header {
    height:52px}
  .heading {
    margin:18px 0}
  .heading h1 {
    font-size:24px}
  .demo-banner {
    margin-top:12px;
    font-size:11px}
  .stats {
    gap:8px;
    margin-bottom:16px}
  .stat {
    padding:12px}
  .stat strong {
    font-size:25px}
  .stat small {
    display:none}
  .stat-top {
    font-size:11px}
  .stat-icon {
    display:none}
  .filters button,.view-toggle button {
    min-height:44px}
  .board {
    padding:14px}
  .employee-task {
    min-height:64px}
  .badge {
    line-height:1.6}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important}
}
.operation-status {
  position:fixed;
  bottom:1rem;
  inset-inline-start:1rem;
  z-index:100;
  background:#fff;
  color:#21375f;
  padding:.6rem 1rem;
  border:1px solid #8b95a5;
  border-radius:.6rem;
  box-shadow:0 2px 12px #0002}
.operation-status:empty {
  display:none}
.field-error {
  color:#a51b25;
  font-weight:600}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #1d5d9b;
  outline-offset:3px}
.stat-icon {
  pointer-events:none}
.portal-icon {
  display:inline-block;
  width:20px;
  height:20px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle}
.draft-control {
  font-size:12px;
  line-height:1.8;
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:#e2edf9}
.draft-control input {
  width:20px;
  height:20px;
  flex-shrink:0}
.draft-offer {
  line-height:1.8}
.draft-offer button {
  margin:4px}
.employee-task-date,.employee-period,.employee-card-heading p,.employee-summary,.stat small {
  font-size:12px}
button,a,input,select,textarea,summary {
  touch-action:manipulation}
dialog {
  overscroll-behavior:contain}
h1,h2,h3 {
  text-wrap:balance}
.stat strong,.monthly-percent {
  font-variant-numeric:tabular-nums}
.work-update,.daily-report {
  content-visibility:auto;
  contain-intrinsic-size:auto 180px}
@media(pointer:coarse) {
  button,.small-button,summary {
    min-height:44px}
  input[type=checkbox] {
    min-width:24px;
    min-height:24px}
}
/* Give tablets the full board width, with three aligned employee columns. */
@media(min-width:701px) and (max-width:1200px) {
  aside {
    position:relative;
    width:100%;
    display:block;
    padding:16px 24px;
    overflow:visible}
  aside .brand-logo {
    width:70px}
  aside .brand {
    flex-direction:row;
    justify-content:flex-start;
    max-width:calc(100% - 130px)}
  .side-caption,.side-bottom>p,.side-bottom .trial {
    display:none}
  #nav-toggle {
    display:block;
    position:absolute;
    inset-inline-end:24px;
    top:24px;
    min-height:44px;
    padding:10px 20px;
    border-radius:8px;
    background:#edf4fc;
    color:#21375f}
  #main-nav {
    display:none}
  #main-nav.expanded {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px}
  #main-nav .nav {
    width:auto;
    flex:1 1 28%;
    min-height:44px}
  .side-bottom {
    padding:10px 0 0;
    display:flex;
    align-items:center;
    gap:16px}
  #account-tools.expanded {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px}
  .side-bottom .logout {
    width:auto;
    flex-shrink:0;
    min-height:44px}
  main {
    margin:0;
    padding:0 20px}
  .board {
    padding:18px}
  .cards.employee-board {
    gap:12px}
  .stats {
    grid-template-columns:repeat(4,minmax(0,1fr))}
}
.employee-card-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  align-items:start}
.employee-total {
  justify-self:start}
.employee-card-heading>div {
  flex:1 1 140px;
  min-width:0;
  overflow-wrap:anywhere}
@media(min-width:701px) {
  .employee-card h3 {
    line-height:1.7;
    min-height:0}
}
.employee-card-heading,.employee-summary,.employee-period {
  padding-inline:14px}
.employee-task {
  grid-template-columns:19px minmax(0,1fr)}
.employee-task .badge {
  grid-column:2;
  justify-self:start;
  max-width:100%;
  white-space:normal}
.employee-task-date {
  overflow-wrap:anywhere}

/* Keep short empty inboxes compact inside the company settings dialog. */
#company-content .empty{padding:12px;min-height:0;text-align:right;margin:8px 0}
.company-rule-form{margin:20px 0;padding-block:12px;border-bottom:1px solid var(--line,#d8e4e3)}

.auction-nav{display:flex;text-decoration:none;color:inherit;text-align:right}

/* Task toolbar: persistent labels and consistent field widths at every viewport. */
.task-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 12px;padding:18px;background:#f7f9fc;border:1px solid #e1e7ef;border-radius:12px;margin:22px 0 10px}
.task-filters label{display:grid;gap:6px;min-width:0;font-size:12px;color:#465970}
.task-filters label>span{font-weight:700}
.task-filters .task-search{grid-column:span 2}
.task-filters input,.task-filters select{width:100%;max-width:none;min-width:0;font-size:14px;background:#fff}
.task-filters .filter-actions{display:flex;align-items:end;gap:6px;flex-wrap:wrap}
.filter-actions button{flex:1;min-height:46px;font-size:12px}
#last-refreshed{margin:10px 0 20px}
#heading{color:var(--athar-primary);line-height:1.5}
#heading:focus{outline:none}
#heading:focus-visible{outline:3px solid #1d5d9b;outline-offset:4px}
.nav:hover{background:#ffffff12;color:#fff}
.nav:focus-visible,.side-bottom button:focus-visible,.side-bottom input:focus-visible{outline-color:#aedfea}
#main-nav{padding-bottom:16px}
.side-bottom{padding-top:14px;border-top:1px solid #ffffff24}
#account-tools button{text-align:start;background:transparent;color:#eaf2fb;border-radius:6px;padding:8px;min-height:44px}
#account-tools button:hover{background:#ffffff12}
.side-bottom .draft-control{padding:10px 4px;font-size:12px}
.employee-card-heading p{font-size:13px}
.employee-summary{line-height:1.8}
.employee-task-title{line-height:1.8}
.employee-task .badge{font-size:11px}
.task-card:focus-visible,.employee-task:focus-visible{outline-offset:-3px}
@media(min-width:1201px){
 #workspace main{padding-inline:32px}
 aside .brand-copy>span{white-space:normal}
 .side-bottom .trial{margin-bottom:4px}
 .side-bottom>p{margin:4px 0 8px}
 .side-bottom .logout{width:100%;text-align:start}
}
@media(max-width:900px){.task-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .task-filters{padding:12px;gap:12px 10px}
 .task-filters input,.task-filters select{font-size:16px}
 .task-filters .filter-actions{grid-column:1/-1}
 .heading{align-items:start}
 .heading .primary{flex-shrink:0;white-space:normal;max-width:110px}
 .side-bottom{border-top:0;padding-top:0}
}

/* notification centre */
header{position:relative}
.bell{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid #d6e3f2;background:#fff;color:#21375f;cursor:pointer;margin-inline-end:10px}
.bell:hover{background:#f3f7fb}.bell:focus-visible{outline:3px solid #85c8de;outline-offset:2px}
.bell-count{position:absolute;top:-6px;inset-inline-start:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#c0392b;color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center}
.bell-panel{position:fixed;top:70px;inset-inline-end:18px;z-index:40;width:min(420px,calc(100vw - 24px));max-height:min(70vh,620px);overflow:auto;background:#fff;border:1px solid #d6e3f2;border-radius:14px;box-shadow:0 18px 48px #21375f2e;padding:6px}
.bell-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #e5edf7;position:sticky;top:0;background:#fff}
.bell-head strong{flex:1;font-size:16px;color:#21375f}.bell-link{border:0;background:none;color:#166e7e;font-size:13px;cursor:pointer;padding:6px 4px}
.bell-list{list-style:none;margin:0;padding:0}.bell-item{display:grid;gap:3px;width:100%;text-align:start;border:0;background:#fff;padding:12px 14px;border-bottom:1px solid #eef3f9;cursor:pointer;font:inherit}
.bell-item:hover{background:#f6f9fc}.bell-item.unread{background:#eef8f9;border-inline-start:4px solid #166e7e}.bell-item span{font-size:13px;color:#46586f}.bell-item time{font-size:12px;color:#7a8aa0}
.bell-empty,.bell-note{padding:18px 16px;line-height:1.9;color:#46586f;margin:0}.bell-pref{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #eef3f9;cursor:pointer}
.bell-pref input{width:22px;height:22px}
@media(max-width:700px){.bell-panel{top:64px;inset-inline-end:8px;inset-inline-start:8px;width:auto}}