:root {
  --dash-bg: #f7f2ea;
  --dash-card: #fffaf2;
  --dash-ink: #15130f;
  --dash-muted: #6f675f;
  --dash-line: rgba(36, 32, 27, 0.12);
  --dash-green: #24201b;
  --dash-green-deep: #15130f;
  --dash-green-soft: #fff8ed;
  --dash-mustard: #c6a27d;
  --dash-mustard-soft: #fff8ed;
  --dash-danger: #8f3329;
  --dash-sage: #7d8c76;
  --dash-shadow: 0 18px 45px rgba(21, 19, 15, 0.1);
}

* { box-sizing: border-box; }

.dashboard-home,
.dashboard-page,
.revamp-team {
  min-height: 100vh;
  margin: 0;
  color: var(--dash-ink);
  background:
    linear-gradient(90deg, rgba(125, 140, 118, 0.12), transparent 34%),
    linear-gradient(180deg, #fffaf2 0%, #efe6da 100%);
  font-family: "Manrope", sans-serif;
  font-size: 15px;
}

.dashboard-home::before,
.dashboard-home::after,
.dashboard-page::before,
.revamp-team::before {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.dashboard-home::before,
.dashboard-page::before,
.revamp-team::before { top: -150px; left: -120px; width: 370px; height: 370px; background: rgba(198, 162, 125, .42); }
.dashboard-home::after { right: -160px; bottom: -160px; width: 420px; height: 420px; background: rgba(125, 140, 118, .1); }

.dashboard-home button,
.dashboard-home input,
.dashboard-home select,
.dashboard-page button,
.dashboard-page input,
.dashboard-page select,
.dashboard-page textarea,
.revamp-team button,
.revamp-team select { font-family: inherit; }

.dashboard-home svg,
.revamp-team svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Home dashboard */
.app-shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  width: min(1480px, calc(100% - 40px));
  min-height: calc(100vh - 40px);
  margin: 20px auto;
  border-radius: 22px;
  padding: 16px;
  background: rgba(255, 250, 242, 0.68);
  box-shadow: 0 28px 70px rgba(21, 19, 15, 0.14);
}

.app-sidebar {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 72px);
  border-radius: 18px;
  padding: 25px 16px;
  color: #ffffff;
  background: var(--dash-green);
}
.app-brand { display: grid; gap: 12px; place-items: center; padding: 8px 6px 28px; color: #fff; text-decoration: none; }
.app-brand img { width: 110px; filter: grayscale(1) brightness(0) invert(1); }
.app-brand span { color: rgba(255,255,255,.62); font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.app-nav { display: grid; gap: 7px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); }
.app-nav a,
.app-sidebar-actions a,
.app-sidebar-actions button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  padding: 0 13px;
  color: rgba(255,255,255,.76);
  text-align: left;
  text-decoration: none;
  background: transparent;
  font-size: .72rem;
  font-weight: 600;
}
.app-nav svg,
.app-sidebar-actions a svg,
.app-sidebar-actions svg { width: 18px; height: 18px; color: var(--dash-mustard); }
.app-nav a:hover,
.app-nav a.is-active,
.app-sidebar-actions a:hover,
.app-sidebar-actions button:hover { color: var(--dash-green-deep); background: var(--dash-card); }
.app-nav a:hover svg,
.app-nav a.is-active svg,
.app-sidebar-actions a:hover svg,
.app-sidebar-actions button:hover svg { color: var(--dash-mustard); }
.app-sidebar-actions { display: grid; gap: 5px; margin-top: auto; }

.app-content { min-width: 0; padding: 4px 4px 22px; }
.app-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  border-radius: 16px;
  padding: 24px 26px;
  background: rgba(255,255,255,.62);
}
.app-page-heading p,
.dashboard-section-title p,
.ledger-heading > p,
.ledger-year-title > p,
.ledger-register-head p,
.calendar-selection-head p {
  margin: 0 0 6px;
  color: var(--dash-green);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.app-page-heading h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 600; letter-spacing: -.055em; line-height: 1; }
.app-page-heading > div > span { display: block; margin-top: 10px; color: var(--dash-muted); font-size: .78rem; }
.app-year-form { width: min(340px, 100%); }
.app-year-form label { display: block; margin-bottom: 6px; color: var(--dash-muted); font-size: .63rem; font-weight: 700; text-transform: uppercase; }
.app-year-form > div { display: flex; }
.app-year-form input { height: 42px; border: 1px solid var(--dash-line); border-radius: 10px 0 0 10px; padding: 0 12px; background: #fff; outline: none; }
.app-year-form input:focus { border-color: var(--dash-green); box-shadow: none; }
.app-year-form button,
.accent-button { border: 0; border-radius: 0 10px 10px 0; padding: 0 17px; color: #fff; background: var(--dash-green); font-weight: 700; }

.year-dashboard,
.dashboard-modal-card { margin-top: 16px; border-radius: 16px; padding: 24px; background: rgba(255,255,255,.72); }
.dashboard-section-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.dashboard-section-title h2 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.dashboard-section-title > span { color: var(--dash-muted); font-size: .68rem; }
.home-year-list { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; }

.year-calendar-card { overflow: hidden; border: 1px solid var(--dash-line); border-radius: 15px; background: #fff; box-shadow: var(--dash-shadow); }
.year-calendar-summary { display: grid; grid-template-columns: 190px minmax(250px, 1fr) auto; gap: 20px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--dash-line); }
.year-calendar-title > span,
.year-calendar-title > small { display: block; }
.year-calendar-title > span { color: var(--dash-green); font-size: .61rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.year-calendar-title > strong { display: block; margin: 4px 0; font-size: 1.4rem; }
.year-calendar-title > small { color: var(--dash-muted); font-size: .68rem; }
.year-calendar-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.year-calendar-kpis div { border-left: 1px solid var(--dash-line); padding-left: 15px; }
.year-calendar-kpis dt { color: var(--dash-muted); font-size: .58rem; font-weight: 700; text-transform: uppercase; }
.year-calendar-kpis dd { margin: 5px 0 0; font-size: .9rem; font-weight: 700; }
.year-card-actions { display: flex; gap: 6px; }
.year-card-actions .small-button,
.soft-button { min-height: 34px; border: 1px solid var(--dash-line); border-radius: 8px; padding: 0 10px; color: var(--dash-ink); background: #fff; font-size: .63rem; font-weight: 700; }
.year-card-actions .small-button.primary { border-color: var(--dash-green); color: #fff; background: var(--dash-green); }
.year-card-actions .small-button.danger { border-color: rgba(143, 51, 41, .28); color: var(--dash-danger); background: var(--dash-card); }
.year-card-actions .small-button.danger:hover { border-color: var(--dash-danger); color: #fff; background: var(--dash-danger); }

.year-mini-calendars,
.dashboard-calendar-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 12px; padding: 14px; }
.mini-calendar-card { min-width: 0; border: 1px solid var(--dash-line); border-radius: 12px; padding: 14px; background: #fff; }
.mini-calendar-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mini-calendar-card h3 { margin: 0; font-size: .82rem; font-weight: 700; }
.mini-calendar-card header span { display: block; margin-top: 3px; color: var(--dash-muted); font-size: .59rem; }
.mini-calendar-card header > a { color: var(--dash-green); font-size: .62rem; font-weight: 700; text-decoration: none; }
.calendar-weekdays,
.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendar-weekdays { margin-bottom: 5px; }
.calendar-weekdays span { color: rgba(21, 19, 15, .48); text-align: center; font-size: .53rem; font-weight: 700; }
.calendar-day { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: 7px; padding: 0; color: rgba(21, 19, 15, .62); text-decoration: none; background: #fff8ed; font-size: .59rem; }
.calendar-day.is-empty { visibility: hidden; }
.calendar-day.has-projects { color: #fff; background: var(--dash-green); cursor: pointer; }
.calendar-day.has-projects:hover,
.calendar-day.has-projects.is-selected { background: var(--dash-mustard); color: var(--dash-green-deep); }
.calendar-day i { position: absolute; top: 2px; right: 3px; font-size: .45rem; font-style: normal; font-weight: 700; }
.calendar-empty { margin: 0; padding: 28px; color: var(--dash-muted); text-align: center; font-size: .74rem; }

.dashboard-modal-card .form-strip { grid-template-columns: repeat(3, 1fr); }
.dashboard-modal-card input { border-color: var(--dash-line); border-radius: 9px; background: #fff; }
.dashboard-modal-card .accent-button { min-height: 40px; border-radius: 9px; }

/* Minimal year dashboard */
.section-link { color: var(--dash-green); font-size: .7rem; font-weight: 700; text-decoration: none; }
.home-year-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.year-dashboard-card { overflow: hidden; border: 1px solid var(--dash-line); border-radius: 14px; background: #fff; }
.year-dashboard-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; cursor: pointer; }
.year-dashboard-summary:focus-visible { outline: 2px solid var(--dash-mustard); outline-offset: -3px; }
.year-dashboard-title strong { display: block; font-size: 1.3rem; letter-spacing: -.035em; }
.year-dashboard-title small { display: block; margin-top: 4px; color: var(--dash-muted); font-size: .66rem; }
.year-workspace-link { color: var(--dash-ink); text-decoration: none; }
.year-workspace-link:hover strong { color: var(--dash-green); }
.year-projects { border-top: 1px solid var(--dash-line); }
.year-projects summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; color: var(--dash-green); cursor: pointer; font-size: .69rem; font-weight: 700; list-style: none; }
.year-projects summary::-webkit-details-marker { display: none; }
.year-projects summary::after { content: "+"; margin-left: auto; color: var(--dash-muted); font-size: 1rem; font-weight: 500; }
.year-projects[open] summary::after { content: "−"; }
.year-projects summary small { margin-left: auto; color: var(--dash-muted); font-size: .58rem; font-weight: 500; }
.year-projects > div { border-top: 1px solid var(--dash-line); }
.home-project-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; min-height: 54px; padding: 10px 18px; border-bottom: 1px solid var(--dash-line); color: var(--dash-ink); text-decoration: none; }
.home-project-row:last-child { border-bottom: 0; }
.home-project-row:hover { background: var(--dash-green-soft); }
.home-project-row > span:first-child { display: grid; gap: 3px; min-width: 0; }
.home-project-row strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.home-project-row small { color: var(--dash-muted); font-size: .58rem; }
.home-project-value { color: var(--dash-muted); font-size: .64rem; font-weight: 700; }
.home-project-row svg { width: 15px; color: var(--dash-green); }
.empty-project-link { display: block; padding: 18px; color: var(--dash-green); font-size: .67rem; font-weight: 700; text-decoration: none; }

/* Calendar dashboard / View all */
.ledger-shell { width: min(1440px, calc(100% - 40px)); margin: 20px auto; }
.calendar-page-shell { width: min(1180px, calc(100% - 40px)); }
.calendar-masthead { grid-template-columns: 180px minmax(300px, 1fr) auto; }
.ledger-masthead { display: grid; grid-template-columns: 180px minmax(300px, 1fr) auto; gap: 28px; align-items: center; border-radius: 18px; padding: 20px 22px; background: #fff; box-shadow: var(--dash-shadow); }
.ledger-brand { display: flex; align-items: center; gap: 14px; color: var(--dash-ink); text-decoration: none; }
.ledger-brand img { width: 58px; }
.ledger-brand span { padding-left: 14px; border-left: 1px solid var(--dash-line); color: var(--dash-muted); font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.ledger-heading h1 { max-width: none; margin: 0; font-size: clamp(1.7rem, 3vw, 2.45rem); font-weight: 600; letter-spacing: -.045em; }
.ledger-intro { margin: 8px 0 0; color: var(--dash-muted); font-size: .72rem; }
.ledger-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.ledger-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 1px solid var(--dash-line); border-radius: 9px; padding: 0 12px; color: var(--dash-ink); text-decoration: none; background: #fff; font-size: .66rem; font-weight: 700; cursor: pointer; }
.ledger-action svg { width: 15px; height: 15px; }
.ledger-action-primary { border-color: var(--dash-green); color: #fff; background: var(--dash-green); }
.export-menu { position: relative; }
.export-menu summary { list-style: none; }
.export-menu summary::-webkit-details-marker { display: none; }
.export-menu > div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; display: grid; min-width: 110px; border: 1px solid var(--dash-line); border-radius: 9px; padding: 5px; background: #fff; box-shadow: var(--dash-shadow); }
.export-menu > div button { min-height: 34px; border: 0; border-radius: 6px; text-align: left; background: transparent; font-size: .65rem; font-weight: 700; }
.export-menu > div button:hover { background: var(--dash-green-soft); }

.ledger-year { display: grid; grid-template-columns: 180px 1fr; gap: 12px; margin-top: 14px; }
.ledger-year-title,
.ledger-finance article { border-radius: 13px; padding: 18px; background: #fff; box-shadow: var(--dash-shadow); }
.ledger-year-title h2 { margin: 0; font-size: 1.35rem; }
.ledger-count { display: block; margin-top: 6px; color: var(--dash-muted); font-size: .66rem; }
.ledger-finance { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.ledger-finance article { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ledger-finance span { color: var(--dash-muted); font-size: .56rem; font-weight: 700; text-transform: uppercase; }
.ledger-finance strong { margin-top: 8px; font-size: 1rem; white-space: nowrap; }
.ledger-finance small { margin-top: 4px; color: rgba(255,255,255,.7); font-size: .55rem; }
.ledger-finance-primary { color: #fff; background: var(--dash-green) !important; }
.ledger-finance-primary span { color: rgba(255,255,255,.7); }
.ledger-profit { background: var(--dash-mustard-soft) !important; }
.ledger-profit strong { color: var(--dash-green-deep); }

.ledger-register { margin-top: 14px; border-radius: 18px; padding: 24px; background: #fff; box-shadow: var(--dash-shadow); }
.ledger-register-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.ledger-register-head h2 { margin: 0; font-size: 1.2rem; }
.ledger-filters { display: grid; grid-template-columns: repeat(2, 180px); gap: 10px; width: auto; }
.ledger-filters label { display: grid; gap: 5px; }
.ledger-filters label > span { color: var(--dash-muted); font-size: .58rem; font-weight: 700; text-transform: uppercase; }
.ledger-filters select { height: 40px; border: 1px solid var(--dash-line); border-radius: 8px; padding: 0 32px 0 11px; background: #fff; outline: none; font-size: .7rem; }
.ledger-register .dashboard-calendar-grid { padding: 18px 0 0; }
.calendar-page-shell .ledger-register { margin-top: 14px; box-shadow: none; }
.calendar-page-shell .dashboard-calendar-grid { grid-template-columns: minmax(280px, 370px); }
.calendar-selection { margin-top: 18px; border: 1px solid var(--dash-line); border-radius: 13px; overflow: hidden; }
.calendar-selection-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 17px; background: #fff8ed; }
.calendar-selection-head h3 { margin: 0; font-size: .9rem; }
.calendar-selection-head > span { color: var(--dash-muted); font-size: .63rem; }
.compact-project-list { gap: 0; }
.calendar-project-row { display: grid; grid-template-columns: minmax(220px, 1fr) 120px 120px 180px; gap: 15px; align-items: center; min-height: 66px; border-top: 1px solid var(--dash-line); padding: 11px 16px; }
.calendar-project-client { display: grid; gap: 4px; border: 0; padding: 0; text-align: left; background: transparent; }
.calendar-project-client strong { font-size: .78rem; }
.calendar-project-client span,
.calendar-project-row > div > span { color: var(--dash-muted); font-size: .56rem; font-weight: 700; text-transform: uppercase; }
.calendar-project-row > div > strong { display: block; margin-top: 4px; font-size: .75rem; }
.calendar-project-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.calendar-project-actions .small-button { min-height: 31px; border: 1px solid var(--dash-line); border-radius: 7px; color: var(--dash-ink); background: #fff; font-size: .58rem; font-weight: 700; }
.calendar-project-actions .small-button.primary { border-color: var(--dash-green); color: #fff; background: var(--dash-green); }
.calendar-project-actions .small-button.danger { border-color: var(--dash-danger); color: #fff; background: var(--dash-danger); }
.ledger-footer { display: flex; justify-content: space-between; gap: 20px; padding: 18px 5px 0; color: var(--dash-muted); font-size: .62rem; }
.ledger-footer p { margin: 0; }
.ledger-footer a { color: var(--dash-green); font-weight: 700; text-decoration: none; }

/* Full year project view */
.year-detail-shell { width: min(1480px, calc(100% - 40px)); }
.year-detail-masthead { grid-template-columns: 180px minmax(300px, 1fr) auto; }
.year-detail-panel { margin-top: 14px; border-radius: 18px; padding: 24px; background: #fff; }
.year-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.year-detail-heading p { margin: 0 0 6px; color: var(--dash-green); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.year-detail-heading h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.035em; }
.year-detail-heading .ledger-count { border: 1px solid var(--dash-line); border-radius: 999px; padding: 8px 12px; }
.year-detail-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-top: 18px; }
.year-detail-metrics article { display: grid; gap: 8px; min-width: 0; border-radius: 12px; padding: 16px; color: #fff; background: var(--dash-green); }
.year-detail-metrics span { color: rgba(255,255,255,.68); font-size: .57rem; font-weight: 700; text-transform: uppercase; }
.year-detail-metrics strong { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.year-detail-metrics .year-profit-metric { color: var(--dash-green-deep); background: var(--dash-mustard-soft); }
.year-detail-metrics .year-profit-metric span { color: var(--dash-green); }
.year-client-list { display: grid; gap: 8px; margin-top: 18px; }
.year-client-row { display: grid; grid-template-columns: minmax(190px, 1.4fr) 60px 100px 120px 100px 170px; gap: 10px; align-items: center; min-height: 76px; border: 1px solid var(--dash-line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.year-client-row.is-active { border-left: 4px solid var(--dash-mustard); }
.year-client-name { display: grid; gap: 3px; min-width: 0; border: 0; padding: 0; text-align: left; background: transparent; cursor: pointer; }
.year-client-name > span,
.year-client-row > div > span { color: var(--dash-muted); font-size: .55rem; font-weight: 700; text-transform: uppercase; }
.year-client-name strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.year-client-name small { overflow: hidden; color: var(--dash-muted); font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.year-client-row > div > strong { display: block; margin-top: 4px; font-size: .74rem; }
.year-client-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.year-client-actions .small-button { min-height: 32px; border: 1px solid var(--dash-line); border-radius: 7px; color: var(--dash-ink); background: #fff; font-size: .58rem; font-weight: 700; }
.year-client-actions .small-button.primary { border-color: var(--dash-green); color: #fff; background: var(--dash-green); }
.year-client-actions .small-button.danger { border-color: var(--dash-danger); color: #fff; background: var(--dash-danger); }

/* Project and client pages */
.dashboard-page .shell { width: min(1240px, calc(100% - 32px)); padding: 18px 0 40px; }
.dashboard-page .workspace-header,
.dashboard-page .team-header { border: 0; border-radius: 17px; padding: 20px; background: #fff; box-shadow: var(--dash-shadow); }
.dashboard-page .brand-link { border-radius: 13px; background: var(--dash-green); }
.dashboard-page .team-logo { filter: grayscale(1) brightness(0) invert(1); }
.dashboard-page h1,
.dashboard-page h2,
.dashboard-page h3 { font-family: "Manrope", sans-serif; color: var(--dash-ink); }
.dashboard-page h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 600; letter-spacing: -.045em; }
.dashboard-page .eyebrow { color: var(--dash-green); letter-spacing: .06em; }
.dashboard-page .lede,
.dashboard-page .panel-note { color: var(--dash-muted); }
.dashboard-page .detail-panel,
.dashboard-page .client-summary,
.dashboard-page .pricing-panel,
.dashboard-page .matrix-card,
.dashboard-page .event-card,
.dashboard-page .project-expense-panel { border-color: var(--dash-line); border-radius: 14px; background: #fff; box-shadow: var(--dash-shadow); }
.dashboard-page .project-detail-panel { margin-top: 14px; }
.dashboard-page .form-topbar { border-color: var(--dash-line); background: rgba(255,255,255,.96); }
.dashboard-page input,
.dashboard-page select,
.dashboard-page textarea { border-color: var(--dash-line); border-radius: 9px; background: #f9fbfa; }
.dashboard-page input:focus,
.dashboard-page select:focus,
.dashboard-page textarea:focus { border-color: var(--dash-green); box-shadow: 0 0 0 3px rgba(157, 120, 86, .22); }
.dashboard-page .primary-button,
.dashboard-page .small-button.primary { border-radius: 9px; color: #fff; background: var(--dash-green); }
.dashboard-page .secondary-button,
.dashboard-page .small-button { border-color: var(--dash-line); border-radius: 9px; background: #fff; }
.dashboard-page .finance-summary,
.dashboard-page .pricing-summary { border-color: #e8d89d; border-radius: 12px; background: var(--dash-mustard-soft); }
.dashboard-page .event-summary { border-radius: 10px; background: var(--dash-green); }
.dashboard-page .role-row,
.dashboard-page .payment-panel { border-color: var(--dash-line); border-radius: 10px; background: #fff8ed; }
.dashboard-page .metric-row > div { background: var(--dash-green); }
.dashboard-page .chart-row .chart-bar { background: var(--dash-green) !important; }

/* Shared dashboard shell for every workspace page */
.app-inner-page .app-shell { align-items: start; }
.app-inner-page .app-content { width: 100%; }
.app-inner-page .app-main-panel,
.app-inner-page.dashboard-page .app-main-panel,
.app-inner-page .ledger-shell,
.app-inner-page .year-detail-shell,
.app-inner-page .calendar-page-shell { width: 100%; margin: 0; padding: 4px 0 28px; }
.app-inner-page .ledger-brand,
.app-inner-page .brand-link { display: none; }
.app-inner-page .ledger-masthead,
.app-inner-page .calendar-masthead,
.app-inner-page .year-detail-masthead,
.app-inner-page .workspace-header,
.app-inner-page .team-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  border: 0;
  border-radius: 16px;
  padding: 24px 26px;
  background: rgba(255,255,255,.72);
  box-shadow: none;
}
.app-inner-page .ledger-heading h1,
.app-inner-page .workspace-header h1,
.app-inner-page .team-header h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1;
}
.app-inner-page .ledger-intro,
.app-inner-page .workspace-header .lede,
.app-inner-page .team-header .lede { margin: 10px 0 0; color: var(--dash-muted); font-size: .78rem; }
.app-inner-page .ledger-actions,
.app-inner-page .workspace-actions { align-self: end; }
.app-inner-page .ledger-actions > a[href="index.html"],
.app-inner-page .workspace-actions > a[href="index.html"],
.app-inner-page #yearCalendarLink { display: none; }
.app-inner-page .ledger-register,
.app-inner-page .year-detail-panel,
.app-inner-page .project-detail-panel,
.app-inner-page .client-page-summary {
  margin-top: 16px;
  border: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  box-shadow: none;
}
.app-inner-page .ledger-register,
.app-inner-page .year-detail-panel { padding: 24px; }
.app-inner-page .client-page-grid,
.app-inner-page .project-workspace-grid { margin-top: 0; }
.app-inner-page .project-detail-panel,
.app-inner-page .client-page-summary { padding: 20px; }
.app-inner-page .project-detail-panel,
.app-inner-page .client-page-summary { overflow: hidden; }
.app-inner-page .ledger-footer { padding-inline: 4px; }
.app-inner-page .pricing-panel,
.app-inner-page .matrix-card,
.app-inner-page .event-card,
.app-inner-page .project-expense-panel { box-shadow: none; }

/* Legacy Knotty Affair palette applied to all surfaces */
.app-page-heading,
.year-dashboard,
.dashboard-modal-card,
.ledger-masthead,
.ledger-register,
.year-detail-panel,
.dashboard-page .workspace-header,
.dashboard-page .team-header,
.dashboard-page .detail-panel,
.dashboard-page .client-summary,
.dashboard-page .pricing-panel,
.dashboard-page .matrix-card,
.dashboard-page .event-card,
.dashboard-page .project-expense-panel,
.app-inner-page .ledger-masthead,
.app-inner-page .workspace-header,
.app-inner-page .team-header,
.app-inner-page .client-page-summary,
.app-inner-page .project-detail-panel {
  background: rgba(255, 250, 242, .82);
}
.year-calendar-card,
.year-dashboard-card,
.mini-calendar-card,
.ledger-action,
.ledger-finance article,
.year-client-row,
.calendar-project-actions .small-button,
.year-client-actions .small-button,
.year-card-actions .small-button,
.soft-button,
.dashboard-home input,
.dashboard-home select,
.dashboard-page input,
.dashboard-page select,
.dashboard-page textarea,
.dashboard-page .secondary-button,
.dashboard-page .small-button,
.dashboard-modal-card input,
.ledger-filters select,
.export-menu > div {
  background: var(--dash-card);
}
.calendar-day,
.calendar-selection-head,
.dashboard-page .role-row,
.dashboard-page .payment-panel,
.dashboard-home .login-card input,
.dashboard-page .login-card input,
.revamp-team .login-card input { background: #fff8ed; }
.calendar-day { color: rgba(21, 19, 15, .62); }
.calendar-weekdays span { color: rgba(21, 19, 15, .48); }
.app-inner-page .form-topbar,
.dashboard-page .form-topbar { background: rgba(255, 250, 242, .96); }
.dashboard-home .login-gate,
.dashboard-page .login-gate,
.revamp-team .login-gate {
  background:
    linear-gradient(90deg, rgba(125, 140, 118, 0.14), transparent 38%),
    linear-gradient(180deg, #fffaf2 0%, #efe6da 100%);
}
.dashboard-home .login-card,
.dashboard-page .login-card,
.revamp-team .login-card { background: rgba(255, 250, 242, .92); }
.ledger-action-primary,
.app-inner-page .ledger-action-primary { border-color: var(--dash-green); color: #fff; background: var(--dash-green); }

/* Login */
.dashboard-home .login-gate,
.dashboard-page .login-gate,
.revamp-team .login-gate { background: var(--dash-bg); }
.dashboard-home .login-card,
.dashboard-page .login-card,
.revamp-team .login-card { border: 0; border-radius: 18px; background: #fff; box-shadow: var(--dash-shadow); }
.dashboard-home .login-card h1,
.dashboard-page .login-card h1,
.revamp-team .login-card h1 { font-family: "Manrope", sans-serif; font-weight: 600; }
.dashboard-home .login-card input,
.dashboard-page .login-card input,
.revamp-team .login-card input { border-color: var(--dash-line); border-radius: 9px; background: #fff8ed; }
.dashboard-home .login-card .primary-button,
.dashboard-page .login-card .primary-button,
.revamp-team .login-card .primary-button { border-radius: 9px; background: var(--dash-green); }

@media (max-width: 1120px) {
  .year-mini-calendars,
  .dashboard-calendar-grid { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
  .ledger-masthead { grid-template-columns: 170px 1fr; }
  .ledger-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ledger-year { grid-template-columns: 170px 1fr; }
  .ledger-finance { grid-template-columns: repeat(3, 1fr); }
  .ledger-finance-primary { grid-row: span 2; }
  .year-detail-metrics { grid-template-columns: repeat(3, 1fr); }
  .year-client-row { grid-template-columns: minmax(220px, 1.4fr) repeat(4, 100px); }
  .year-client-actions { grid-column: 1 / -1; max-width: 230px; }
}

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; width: min(100% - 20px, 680px); margin: 10px auto; }
  .app-sidebar { position: static; display: grid; grid-template-columns: 1fr auto auto; align-items: center; height: auto; padding: 12px; }
  .app-brand { display: flex; padding: 0; }
  .app-brand img { width: 66px; }
  .app-brand span { display: none; }
  .app-nav { display: flex; padding: 0; border: 0; }
  .app-nav a { min-height: 38px; }
  .app-sidebar-actions { display: flex; margin: 0; }
  .app-sidebar-actions a { min-height: 38px; font-size: 0; }
  .app-sidebar-actions button { min-height: 38px; font-size: 0; }
  .app-sidebar-actions svg { width: 18px; height: 18px; }
  .app-page-heading { align-items: stretch; flex-direction: column; }
  .year-calendar-summary { grid-template-columns: 1fr; }
  .year-calendar-kpis { max-width: 320px; }
  .ledger-year { grid-template-columns: 1fr; }
  .calendar-project-row { grid-template-columns: 1fr 1fr; }
  .calendar-project-client,
  .calendar-project-actions { grid-column: 1 / -1; }
  .home-year-list { grid-template-columns: 1fr; }
  .calendar-page-shell .dashboard-calendar-grid { grid-template-columns: minmax(280px, 370px); }
  .year-detail-metrics { grid-template-columns: repeat(2, 1fr); }
  .year-client-row { grid-template-columns: 1fr 1fr 1fr; }
  .year-client-name { grid-column: 1 / -1; }
  .year-client-actions { grid-column: 1 / -1; }
  .app-inner-page .ledger-masthead,
  .app-inner-page .calendar-masthead,
  .app-inner-page .year-detail-masthead,
  .app-inner-page .workspace-header,
  .app-inner-page .team-header { grid-template-columns: 1fr; align-items: stretch; }
  .app-inner-page .ledger-actions,
  .app-inner-page .workspace-actions { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .year-mini-calendars,
  .dashboard-calendar-grid { grid-template-columns: 1fr; }
  .year-card-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .year-card-actions .view-year { grid-column: 1 / -1; }
  .dashboard-section-title { align-items: flex-start; flex-direction: column; }
  .ledger-shell { width: min(100% - 20px, 600px); margin: 10px auto; }
  .ledger-masthead { display: block; padding: 18px; }
  .ledger-brand { margin-bottom: 22px; }
  .ledger-heading { margin-bottom: 20px; }
  .ledger-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .ledger-action-primary { grid-column: 1 / -1; }
  .ledger-finance { grid-template-columns: 1fr 1fr; }
  .ledger-finance-primary { grid-column: 1 / -1; grid-row: auto; }
  .ledger-register { padding: 18px 12px; }
  .ledger-register-head { align-items: stretch; flex-direction: column; }
  .ledger-filters { width: 100%; }
  .ledger-filters { grid-template-columns: 1fr; }
  .calendar-selection-head { align-items: flex-start; flex-direction: column; }
  .ledger-footer { align-items: flex-start; flex-direction: column; }
  .dashboard-modal-card .form-strip { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .app-sidebar { grid-template-columns: 1fr auto; }
  .app-nav a { padding: 0 9px; font-size: 0; }
  .app-nav svg { width: 19px; height: 19px; }
  .app-sidebar-actions { display: none; }
  .ledger-finance { grid-template-columns: 1fr; }
  .calendar-project-row { grid-template-columns: 1fr; }
  .calendar-project-row > div { grid-column: 1; }
  .year-dashboard-summary { align-items: flex-start; flex-direction: column; }
  .calendar-page-shell .dashboard-calendar-grid { grid-template-columns: 1fr; }
  .year-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .year-detail-metrics .year-profit-metric { grid-column: 1 / -1; }
  .year-client-row { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .app-page-heading,
  .year-dashboard,
  .ledger-masthead,
  .ledger-year,
  .ledger-register { animation: dashboard-in 340ms ease-out both; }
  .year-dashboard,
  .ledger-year { animation-delay: 50ms; }
  .ledger-register { animation-delay: 90ms; }
}

@keyframes dashboard-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}