/* FarmEasy Workspace: richer accents, crisp surfaces, and readable everyday tools.
   This visual layer leaves application layout and interaction contracts intact. */
:root {
  --canvas: #f5f7fb;
  --paper: #ffffff;
  --ink: #142f3b;
  --muted: #617384;
  --line: #e2e8f0;
  --forest: #087f63;
  --forest-deep: #102d38;
  --green: #087f63;
  --emerald: #0d9f78;
  --blue: #3975e9;
  --violet: #8c66e8;
  --coral: #ef7561;
  --amber: #e6a540;
  --sage: #d9f4ec;
  --sage-soft: #ecf8f4;
  --red: #b44538;
  --warning: #986514;
  --radius: 16px;
  --shadow: 0 3px 6px #14304703, 0 12px 28px #14304706;
}

body { background: var(--canvas); color: var(--ink); }
::selection { background: #cbede6; color: #133d38; }
:focus-visible { outline: 3px solid #3975e9; outline-offset: 4px; }
input::placeholder, textarea::placeholder { color: #617384; }
h1 { color: #142f3b; font-weight: 750; letter-spacing: -1.3px; }
h2, h3 { color: #21394a; }
.heading-dot { color: #0d9f78; }
.eyebrow { color: #077d63; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }
.page-description { color: #617384; font-size: 14px; line-height: 1.8; }
.muted, .text-muted { color: #617384; }
.text-warning { color: #b44538; }
.text-link { color: #1d62bd; }
.text-link:hover { color: #124987; }
.back-link { color: #536f82; font-size: 13px; }
.back-link:hover { color: #1f65c6; }
.skip-link { color: #163648; box-shadow: 0 7px 28px #102d3826; }

/* Actions use a saturated emerald with sufficient contrast for their labels. */
.button { min-height: 44px; border-radius: 10px; font-size: 13px; font-weight: 750; letter-spacing: .05px; }
.button-primary { border-color: #078465; background: linear-gradient(110deg,#078465,#07775d); color: #fff; box-shadow: 0 5px 13px #0d9f7826, inset 0 1px 0 #ffffff1a; }
.button-primary:hover { border-color: #066e54; background: linear-gradient(110deg,#078465,#066c54); box-shadow: 0 7px 17px #0d9f7833; }
.button-secondary { border-color: #dce4ec; background: #fff; color: #38556a; box-shadow: 0 2px 4px #14304704; }
.button-secondary:hover { border-color: #b9cbdc; background: #f7faff; color: #214a75; }
.button-quiet { color: #617384; }
.button-quiet:hover { color: #204b68; background: #eaf1f8; }
.button-small { min-height: 44px; font-size: 12px; }
.icon-button { color: #617384; }
.icon-button:hover { background: #e8f0f8; color: #2a65b2; }
.text-button { min-height: 40px; }

/* The navigation is deliberately deep and quiet around the brighter workspace. */
.sidebar {
  background: #102d38;
  background-image: radial-gradient(ellipse at 0 0,#21566866,transparent 53%), radial-gradient(ellipse at 100% 100%,#0d574459,transparent 60%);
  border-right-color: #133c46;
  color: #eff8fb;
  box-shadow: 3px 0 20px #16304708;
}
.sidebar .brand { gap: 13px; }
.sidebar .brand-logo { border-color: #e9eddf; box-shadow: 0 8px 24px #051c302e, 0 0 0 5px #ffffff04; }
.sidebar .brand-title { color: #f5fafd; font-size: 17px; font-weight: 750; letter-spacing: -.3px; }
.sidebar .brand-descriptor { color: #b1c7cd; font-size: 8px; letter-spacing: 1.6px; }
.workspace-name { background: #ffffff05; border-color: #78a5af30; border-radius: 12px; color: #f1f6f8; box-shadow: inset 0 1px 0 #ffffff03; }
.workspace-name small { color: #adcad0; }
.workspace-name > .icon { color: #a3bdc8; }
.workspace-avatar { color: #d7fff1; background: #14876933; border-color: #25b28a3d; border-radius: 10px; }
.nav-label { color: #a3bbc7; font-size: 10px; letter-spacing: 1.7px; }
.nav-links { gap: 8px; }
.nav-link { color: #c4d5dd; border-radius: 10px; font-size: 13px; font-weight: 600; }
.nav-link .icon { color: #94b6c5; }
.nav-link:hover { background: #ffffff09; color: #fff; }
.nav-link:hover .icon { color: #cae3ed; }
.nav-link.is-active { position: relative; color: #fff; background: linear-gradient(100deg,#0b846d,#0b755f); border-color: #25b79b60; box-shadow: inset 0 1px 0 #ffffff14,0 5px 16px #061a2824; font-weight: 750; }
.nav-link.is-active::after { content: ""; width: 5px; height: 5px; margin-left: auto; background: #aaf1d2; border-radius: 50%; box-shadow: 0 0 0 4px #9ef5d010; }
.nav-link.is-active .icon { color: #dafff2; }
.sidebar-note > .icon { color: #68c6a9; }
.sidebar-note > span { color: #d6e7eb; font-size: 12px; font-weight: 650; }
.sidebar-note p { color: #a8c0cb; font-size: 11px; }
.current-user { border-top-color: #a9cfdf21; }
.user-name { color: #f0f7fa; }
.user-name small { color: #b2cbd5; }
.current-user .avatar-light { color: #e7fff7; background: #2c6970; border-color: #82b8b340; }
.logout-button { width: 40px; min-height: 44px; color: #b2cbd6; }
.logout-button:hover { background: #ffffff0c; color: #fff; }

/* A clean utility bar, with a real activity shortcut and the private team. */
.topbar { background: #ffffffee; border-bottom-color: #e2e8f0; box-shadow: 0 2px 4px #19344802; }
.topbar-identity, .topbar-actions { display: flex; align-items: center; gap: 15px; min-width: 0; }
.topbar-workspace-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid #d7e7f4; border-radius: 9px; background: #edf5fe; color: #3476c5; }
.topbar-workspace-icon .icon { width: 17px; height: 17px; }
.breadcrumb { color: #617384; font-size: 12px; }
.breadcrumb span { color: #c1ced8; }
.breadcrumb strong { color: #304e63; font-weight: 750; }
.topbar-shortcut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 9px 12px; border: 1px solid #e0e7f0; border-radius: 9px; background: #fff; color: #496579; font-size: 12px; font-weight: 650; }
.topbar-shortcut:hover { border-color: #c3d5ec; background: #f4f8ff; color: #2b61b0; }
.topbar-shortcut .icon { width: 16px; height: 16px; }
.workspace-members { gap: 12px; }
.workspace-presence { color: #617384; font-size: 11px; }
.private-badge { color: #526e82; background: #f5f8fb; border-color: #dfe7ef; border-radius: 7px; font-size: 11px; }
.private-badge .icon { color: #557d93; }
.member-initials { color: #2558a4; background: #dce9ff; border-color: #fff; font-size: 10px; }
.member-initials:nth-child(2) { color: #7445ad; background: #eadffa; }
.member-initials:nth-child(3) { color: #18765c; background: #d4f1e5; }
.avatar { color: #245dad; background: #e0ecff; border-color: #fff; font-weight: 750; }
.avatar-light { color: #e9fff7; background: #326d77; border-color: #558c91; }
.avatar-unassigned { color: #60778a; background: #edf2f6; }
.app-footer { color: #536778; background: #f5f7fb; border-top-color: #e2e8f0; font-size: 11px; line-height: 1.8; }
.auth-main > footer { color: #536778; }
.auth-main > footer span { color: #536778; }

/* Shared status and urgency are distinguishable beyond a single green palette. */
.status-dot, .status-todo { background: #3975e9; }
.status-in_progress { background: #8c66e8; }
.status-blocked { background: #ef7561; }
.status-done { background: #0d9f78; }
.status-pill { color: #2b60a4; background: #eaf2fe; border-color: #d5e4fc; font-size: 12px; }
.status-pill-in_progress { color: #7650b6; background: #f2edfc; border-color: #e6dafb; }
.status-pill-blocked { color: #ad5145; background: #fff0ec; border-color: #f8dbd1; }
.status-pill-done { color: #117859; background: #eaf8f1; border-color: #ceeedd; }
.priority { font-size: 11px; font-weight: 650; }
.priority-low { color: #5d7180; background: #f1f5f8; border-color: #e5edf3; }
.priority-medium { color: #2d66af; background: #edf4ff; border-color: #dfebfb; }
.priority-high { color: #976513; background: #fff5df; border-color: #fae7b9; }
.priority-urgent { color: #af433b; background: #fff0ed; border-color: #fbded7; }

/* Forms and information panels have a substantial, neutral white surface. */
.panel { background: #fff; border-color: #e1e8f0; border-radius: 16px; box-shadow: var(--shadow); }
.panel h2 { color: #1a3a4b; font-size: 17px; font-weight: 750; letter-spacing: -.35px; }
.panel h3 { color: #24475a; }
.form-panel { border-top: 3px solid #0d9f78; }
.form-field label { color: #37576b; font-size: 13px; font-weight: 700; }
.required-indicator { color: #078465; }
.optional-label { color: #617384; font-size: 11px; }
.form-field input:not([type="checkbox"]), .form-field select, .form-field textarea { min-height: 48px; border-color: #dbe4ed; border-radius: 9px; background: #fbfcfe; color: #264455; box-shadow: 0 1px 2px #13384a03; font-size: 14px; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: #c4d3df; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #4e8ec7; background: #fff; box-shadow: 0 0 0 3px #3975e916; }
.field-help { color: #617384; font-size: 12px; }
.field-error, .errorlist { color: #ad473b; }
.errorlist { border-color: #f1d2c9; background: #fff2ed; }
.has-error input, .has-error select, .has-error textarea { border-color: #d68071 !important; }
.form-actions { border-top-color: #e5ebf2; }
.form-aside { position: relative; overflow: hidden; padding: 27px; border: 1px solid #1b5260; border-radius: 17px; background: radial-gradient(ellipse at 100% 100%,#0d816d50,transparent 68%),linear-gradient(135deg,#183b4c,#143837); box-shadow: 0 10px 26px #163f5110; }
.form-aside::after { content: ""; position: absolute; width: 180px; height: 180px; right: -125px; top: -85px; border: 1px solid #abd6da1a; border-radius: 50%; box-shadow: 0 0 0 23px #abd6da06,0 0 0 46px #abd6da04; pointer-events: none; }
.form-aside h2 { color: #f3fafc; font-size: 22px; font-weight: 650; letter-spacing: -.6px; }
.form-aside p { color: #c2d7df; font-size: 13px; line-height: 1.9; }
.form-aside p:last-child { margin-bottom: 0; }
.aside-icon { width: 47px; height: 47px; background: #0da68026; border-color: #4bc3a63d; color: #77d8b6; border-radius: 12px; }
.notice { color: #355d84; background: #eff6ff; border-color: #d7e7f9; border-left: 3px solid #679fe5; box-shadow: 0 3px 8px #193f6203; }
.notice-warning { color: #825d21; background: #fff8e9; border-color: #f1dfb6; border-left-color: #e9b253; }
.notice-error, .notice-danger { color: #a74e43; background: #fff1ed; border-color: #f1d5ca; border-left-color: #ed8b76; }
.notice-success { color: #236e56; background: #edf9f3; border-color: #cceadc; border-left-color: #3ab188; }
.count-badge { color: #356abb; background: #edf3ff; font-size: 12px; }
.section-heading .subtle-label { color: #617384; font-size: 12px; }

/* Detail pages keep the discussion legible and ownership visible. */
.task-page-heading h1 { font-weight: 750; color: #173746; }
.detail-aside > .panel { border-top: 3px solid #0d9f78; }
.prose, .comment-content .prose { color: #4c6578; font-size: 14px; }
.detail-panel > .muted { color: #61778a; font-size: 13px; }
.task-properties dt { color: #617384; font-size: 12px; }
.task-properties dd { color: #36566d; font-size: 13px; }
.task-properties dd small { font-size: 12px; }
.person-inline { color: #35536b; }
.status-change-form { border-top-color: #e3eaf2; }
.status-change-form .form-field label { color: #5b7388; font-size: 12px; }
.status-change-form .form-field select { min-height: 44px; font-size: 13px; }
.comment { border-top-color: #e8eef5; }
.comment-byline strong { color: #31506a; font-size: 13px; }
.comment-byline time { color: #617384; font-size: 11px; }
.comment-form { border-top-color: #e4ebf3; }
.quiet-empty { color: #5a7ea4; }
.quiet-empty > .icon { color: #6b93c5; }
.quiet-empty p { color: #54708a; font-size: 13px; }
.quiet-empty small { color: #617384; font-size: 12px; }
.archive-form .text-button { color: #617384; font-size: 12px; }
.archive-form .text-button:hover { color: #b44538; }
.aside-caption { color: #617384; }

/* The activity timeline uses colored markers, not washed-out body copy. */
.activity-panel { background: linear-gradient(135deg,#fff 80%,#f9fbff); }
.activity-marker { width: 35px; height: 35px; color: #3875cb; background: #ebf3ff; border-color: #d9e8fc; box-shadow: 0 0 0 4px #fff; }
.activity-item:nth-child(3n+2) .activity-marker { color: #8b5dc5; background: #f3edfe; border-color: #e9defb; }
.activity-item:nth-child(3n) .activity-marker { color: #23866a; background: #eaf8f0; border-color: #d5ede1; }
.activity-item:not(:last-child)::before { top: 39px; left: 17px; background: #e1e9f3; }
.activity-description { color: #5a7287; font-size: 13px; }
.activity-description strong { color: #294b62; font-weight: 750; }
.activity-detail { color: #60788d; font-size: 12px; }
.activity-item time { color: #617384; font-size: 11px; }
.activity-task-link { color: #2c65b1; font-size: 13px; font-weight: 550; }
.activity-task-link span { color: #5d7690; font-size: 11px; }
.pagination { border-top-color: #e5ebf3; color: #5f778c; font-size: 12px; }

/* People and workspace settings share the neutral surfaces and distinct accents. */
.team-panel > .section-heading { padding-bottom: 0; }
.member-row { border-top-color: #e8eef5; transition: background .18s ease; }
.member-row:hover { background: #fafcff; }
.member-row > .avatar { background: #e2edff; color: #3569b6; border-color: #f7faff; }
.member-row:nth-child(2) > .avatar { background: #eee3fc; color: #8a57b6; }
.member-row:nth-child(3) > .avatar { background: #dff4eb; color: #1d805e; }
.member-info h3 { color: #244659; font-size: 15px; font-weight: 750; }
.member-info > a { color: #617384; font-size: 12px; }
.you-label { background: #edf4ff; color: #3d6eaf; font-size: 10px; }
.role-badge { background: #f5f8fd; border-color: #dfe8f3; color: #4e6f90; font-size: 11px; }
.member-state { color: #477563; font-size: 12px; }
.member-state .status-todo { background: #9aa8b5; }
.panel-footnote { color: #596f82; background: #f7f9fc; border-top-color: #e4ebf3; font-size: 11px; }
.section-icon { width: 42px; height: 42px; color: #3c7ad2; background: #edf4ff; border-color: #dce9fc; border-radius: 12px; }
.team-settings-grid > .panel:nth-child(2) .section-icon { color: #885ac5; background: #f4efff; border-color: #e9defc; }
.checkbox-label { color: #3f6179; font-size: 13px; }
.checkbox-label input { accent-color: #078465; }
.checkbox-label small { color: #617384; font-size: 12px; }
.copy-field input { min-height: 44px; color: #385e78; border-color: #d5e3ec; }
th { color: #617384; background: #f8faff; font-size: 12px; }
td { color: #496b85; border-bottom-color: #e8eef6; font-size: 12px; }
.mail-status-counts { color: #5c778e; font-size: 12px; }
.mail-status-counts strong { color: #224d70; font-weight: 700; }
.toast { color: #fff; background: #173e4e; border-color: #497280; box-shadow: 0 10px 35px #102d3830; }

@media (max-width: 1250px) {
  .topbar-identity, .topbar-actions { gap: 11px; }
  .topbar-shortcut { padding: 9px 10px; }
  .workspace-presence { display: none; }
  .form-aside { padding: 23px; }
  .form-aside h2 { font-size: 21px; }
}
@media (max-width: 950px) {
  .sidebar .brand-title { font-size: 15px; }
  .sidebar .brand-descriptor { font-size: 7px; letter-spacing: 1.3px; }
  .sidebar .nav-link { font-size: 12px; }
  .topbar-workspace-icon { display: none; }
  .topbar-shortcut { min-width: 44px; width: 44px; padding: 10px; }
  .topbar-shortcut span { display: none; }
  .topbar-shortcut .icon { width: 19px; height: 19px; }
  .breadcrumb { font-size: 11px; }
  .private-badge { font-size: 10px; }
  .member-info h3 { font-size: 14px; }
}
@media (max-width: 760px) {
  .sidebar .brand-title { font-size: 17px; }
  .sidebar .brand-descriptor { font-size: 8px; letter-spacing: 1.6px; }
  .nav-links { gap: 7px; }
  .sidebar .nav-link { min-height: 44px; font-size: 12px; gap: 8px; padding: 10px 12px; }
  .nav-link.is-active::after { display: none; }
  .current-user .logout-button { width: 40px; min-height: 44px; }
  .topbar { gap: 11px; }
  .topbar-actions { gap: 9px; }
  .page-description { font-size: 13px; }
  .app-footer { font-size: 11px; }
  .status-change-form .button { min-height: 44px; }
  .member-state { font-size: 11px; }
}
@media (max-width: 540px) {
  .sidebar .brand { gap: 10px; }
  .sidebar .brand-title { font-size: 16px; }
  .sidebar .nav-link { font-size: 11px; padding: 10px 11px; gap: 7px; }
  .topbar-identity, .topbar-actions { gap: 8px; }
  .topbar-actions .private-badge { display: none; }
  .topbar-shortcut { min-width: 42px; width: 42px; }
  .breadcrumb { font-size: 11px; }
  .page-description { font-size: 13px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.55px; }
  .page-heading > .button { min-height: 44px; font-size: 13px; }
  .panel h2 { font-size: 16px; }
  .form-field input:not([type="checkbox"]), .form-field select, .form-field textarea { font-size: 16px; }
  .form-field label { font-size: 13px; }
  .task-properties dd { font-size: 13px; }
  .status-change-form .form-field select { font-size: 14px; }
  .member-info h3 { font-size: 14px; }
  .member-info > a { font-size: 12px; }
  .member-row .role-badge { font-size: 11px; }
  .member-state { font-size: 11px; }
  .comment-byline strong { font-size: 12px; }
  .comment-content .prose { font-size: 13px; }
  .activity-description { font-size: 13px; }
  .activity-task-link { font-size: 12px; }
  .panel-footnote, .checkbox-label small { font-size: 11px; }
  .app-footer { color: #536778; font-size: 10px; }
}
@media (max-width: 360px) {
  .sidebar .nav-link { padding-left: 9px; padding-right: 9px; font-size: 10px; gap: 6px; }
  .sidebar .brand-title { font-size: 14px; }
  .sidebar .brand-descriptor { font-size: 7px; }
  .topbar { gap: 7px; }
  .breadcrumb { font-size: 10px; }
  .breadcrumb span { margin-left: 6px; margin-right: 6px; }
  .member-info h3 { font-size: 13px; }
  .member-info > a { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}