:root {
    --sidebar-width: 280px;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --purple: #7c3aed;
    --green: #059669;
    --amber: #d97706;
    --red: #dc2626;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --surface: rgba(255, 255, 255, 0.88);
    --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  }

  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    background:
      radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.12), transparent 26rem),
      radial-gradient(circle at 100% 20%, rgba(124, 58, 237, 0.1), transparent 28rem),
      #f8fafc;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button {
    border: 0;
  }

  .hidden {
    display: none !important;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid rgba(226, 232, 240, 0.85);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 12px 0 38px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(22px);
    transition: transform 0.25s ease;
  }

  .brand-block {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.5rem 1.25rem 1.15rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  }

  .brand-logo,
  .auth-logo {
    display: grid;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 0.9rem;
    color: white;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 12px 25px rgba(79, 70, 229, 0.25);
  }

  .brand-title {
    margin: 0;
    overflow: hidden;
    font-size: 1.05rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand-subtitle {
    margin: 0.2rem 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-panel {
    margin: 1rem;
  }

  .user-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem;
    border: 1px solid #dbeafe;
    border-radius: 1rem;
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.06);
  }

  .user-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    border-radius: 50%;
    color: white;
    font-size: 0.9rem;
    font-weight: 800;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    box-shadow: 0 7px 16px rgba(59, 130, 246, 0.24);
  }

  .user-details {
    min-width: 0;
    flex: 1;
  }

  .user-name {
    margin: 0;
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-role {
    margin: 0.1rem 0 0;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .user-position {
    margin: 0.05rem 0 0;
    overflow: hidden;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-account-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.45rem;
  }

  .account-action-button {
    display: inline-flex;
    min-width: 0;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    padding: 0.42rem 0.55rem;
    border-radius: 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.18s ease;
  }

  .account-action-button:hover {
    transform: translateY(-1px);
  }

  .password-action {
    color: #2563eb;
    background: #eff6ff;
  }

  .password-action:hover {
    background: #dbeafe;
  }

  .logout-action {
    color: #dc2626;
    background: #fef2f2;
  }

  .logout-action:hover {
    background: #fee2e2;
  }

  .main-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.35rem;
    overflow-y: auto;
    padding: 0.25rem 1rem 1rem;
  }

  .nav-link {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.8rem;
    min-height: 2.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.9rem;
    color: #475569;
    font-size: 0.92rem;
    font-weight: 650;
    text-align: left;
    background: transparent;
    cursor: pointer;
    transition: 0.2s ease;
  }

  .nav-link:hover {
    color: var(--ink);
    background: #f1f5f9;
    transform: translateX(2px);
  }

  .nav-link.active {
    color: #1d4ed8;
    background: linear-gradient(135deg, #eff6ff, #eef2ff);
    box-shadow: inset 0 0 0 1px #dbeafe;
  }

  .nav-icon,
  .stat-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.75rem;
  }

  .nav-icon {
    width: 2rem;
    height: 2rem;
  }

  .nav-icon.blue,
  .stat-icon.blue {
    color: #2563eb;
    background: #dbeafe;
  }

  .nav-icon.purple,
  .stat-icon.purple {
    color: #7c3aed;
    background: #ede9fe;
  }

  .nav-icon.green,
  .stat-icon.green {
    color: #059669;
    background: #d1fae5;
  }

  .nav-icon.amber {
    color: #d97706;
    background: #fef3c7;
  }

  .nav-icon.rose {
    color: #e11d48;
    background: #ffe4e6;
  }

  .stat-icon.red {
    color: #dc2626;
    background: #fee2e2;
  }

  .sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--line);
  }

  .sidebar-footer p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.75rem;
    text-align: center;
  }

  .main-content {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    min-height: 4.6rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.6rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    background: rgba(248, 250, 252, 0.82);
    backdrop-filter: blur(18px);
  }

  .page-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
  }

  .page-subtitle {
    margin: 0.12rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
  }

  .mobile-menu-button {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    color: #334155;
    background: white;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.07);
  }

  .content-shell {
    width: min(100%, 1500px);
    margin: 0 auto;
    padding: 1.5rem;
  }

  .section {
    display: none;
    animation: sectionIn 0.22s ease;
  }

  .section.active {
    display: block;
  }

  @keyframes sectionIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .welcome-card {
    position: relative;
    display: flex;
    min-height: 10rem;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 1.7rem 2rem;
    border-radius: 1.4rem;
    color: white;
    background: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 52%, #7c3aed 100%);
    box-shadow: 0 20px 45px rgba(79, 70, 229, 0.22);
  }

  .welcome-card::after {
    position: absolute;
    right: -4rem;
    bottom: -7rem;
    width: 18rem;
    height: 18rem;
    border: 2.7rem solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    content: "";
  }

  .welcome-card h3 {
    margin: 0.25rem 0 0.45rem;
    font-size: clamp(1.4rem, 3vw, 2.15rem);
    font-weight: 800;
  }

  .welcome-card p:not(.eyebrow) {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
  }

  .welcome-card .eyebrow {
    color: rgba(255, 255, 255, 0.65);
  }

  .welcome-illustration {
    position: relative;
    z-index: 1;
    display: grid;
    width: 6.4rem;
    height: 6.4rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 1.8rem;
    font-size: 2.6rem;
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(8px);
    transform: rotate(4deg);
  }

  .eyebrow {
    margin: 0;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
  }

  .stat-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 1.15rem;
    text-align: left;
    background: var(--surface);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
  }

  .stat-icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.15rem;
  }

  .stat-card small {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
  }

  .stat-card strong {
    display: block;
    margin-top: 0.12rem;
    font-size: 1.55rem;
    line-height: 1;
  }

  .overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.75fr);
    gap: 1rem;
    margin-top: 1rem;
  }

  .panel,
  .table-card,
  .project-card {
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
  }

  .panel {
    min-height: 19rem;
    padding: 1.2rem;
    border-radius: 1.2rem;
  }

  .panel-heading,
  .section-toolbar,
  .modal-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .panel-heading h3,
  .section-toolbar h3,
  .modal-heading h3 {
    margin: 0.2rem 0 0;
    font-size: 1.1rem;
    font-weight: 800;
  }

  .text-button {
    padding: 0;
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 700;
    background: transparent;
    cursor: pointer;
  }

  .compact-list,
  .activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 1rem;
  }

  .compact-project,
  .activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #f1f5f9;
    border-radius: 0.85rem;
    background: rgba(248, 250, 252, 0.72);
  }

  .compact-project-main,
  .activity-main {
    min-width: 0;
    flex: 1;
  }

  .compact-project strong,
  .activity-main strong {
    display: block;
    overflow: hidden;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .compact-project small,
  .activity-main small {
    display: block;
    margin-top: 0.18rem;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .task-history-summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #dbeafe;
    border-radius: 0.85rem;
    background: #eff6ff;
  }

  .task-history-summary span {
    padding: 0.25rem 0.48rem;
    border-radius: 0.45rem;
    color: #1d4ed8;
    font-size: 0.74rem;
    font-weight: 800;
    background: #dbeafe;
  }

  .task-history-summary strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .task-history-list {
    display: flex;
    max-height: 31rem;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
  }

  .task-history-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    background: #f8fafc;
  }

  .task-history-marker {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.65rem;
    color: #2563eb;
    font-size: 0.82rem;
    background: #dbeafe;
  }

  .task-history-content {
    min-width: 0;
    flex: 1;
  }

  .task-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .task-history-heading strong {
    font-size: 0.86rem;
  }

  .task-history-heading time,
  .task-history-actor {
    color: #64748b;
    font-size: 0.74rem;
  }

  .task-history-actor {
    margin: 0.25rem 0 0.55rem;
  }

  .task-history-changes {
    padding: 0.65rem 0.75rem;
    border-radius: 0.65rem;
    color: #334155;
    font-size: 0.8rem;
    line-height: 1.65;
    background: white;
  }

  .task-history-note {
    margin: 0.5rem 0 0;
    color: #64748b;
    font-size: 0.76rem;
    font-style: italic;
  }

  .history-loading,
  .history-error {
    padding: 2rem 1rem;
    color: #64748b;
    font-size: 0.82rem;
    text-align: center;
  }

  .history-error {
    color: #dc2626;
  }

  .progress-track {
    display: block;
    width: 100%;
    height: 0.38rem;
    margin-top: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
  }

  .progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  }

  .progress-fill.empty { background: #cbd5e1; }
  .progress-fill.low { background: linear-gradient(90deg, #ef4444, #fb7185); }
  .progress-fill.medium { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
  .progress-fill.high { background: linear-gradient(90deg, #2563eb, #60a5fa); }
  .progress-fill.complete { background: linear-gradient(90deg, #059669, #34d399); }

  .section-toolbar {
    margin-bottom: 1rem;
  }

  .section-toolbar h3 {
    font-size: 1.35rem;
  }

  .primary-button,
  .secondary-button,
  .danger-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.58rem 0.9rem;
    border-radius: 0.75rem;
    font-size: 0.84rem;
    font-weight: 750;
    cursor: pointer;
    transition: 0.18s ease;
  }

  .primary-button {
    color: white;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.2);
  }

  .primary-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 13px 27px rgba(37, 99, 235, 0.27);
  }

  .secondary-button {
    color: #334155;
    border: 1px solid #e2e8f0;
    background: white;
  }

  .danger-button {
    color: white;
    background: #dc2626;
  }

  .primary-button.full,
  .secondary-button.full {
    width: 100%;
  }

  button:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none !important;
  }

  .entity-editor-form .form-control:disabled {
    color: #64748b;
    background: #f1f5f9;
    border-color: #dbe3ee;
    cursor: not-allowed;
    opacity: 1;
  }

  .icon-button {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.65rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
  }

  .filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.8);
  }

  .period-filter {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.82);
  }

  .overview-period-filter {
    justify-content: flex-end;
    margin-bottom: 1rem;
  }

  .inline-period-filter {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .period-filter-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 800;
  }

  .period-preset {
    min-width: 8.5rem !important;
  }

  .date-filter-field {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .date-filter-field .form-control {
    min-width: 8.7rem;
  }

  .date-filter-field .form-control:disabled {
    color: #94a3b8;
    background: #f1f5f9;
    cursor: not-allowed;
  }

  .search-box {
    position: relative;
    display: block;
    min-width: 15rem;
    flex: 1;
  }

  .search-box i {
    position: absolute;
    top: 50%;
    left: 0.8rem;
    color: #94a3b8;
    font-size: 0.86rem;
    transform: translateY(-50%);
  }

  .search-box input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.8rem 0.55rem 2.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.72rem;
    outline: none;
    color: #0f172a;
    font-size: 0.86rem;
    background: #f8fafc;
  }

  .form-control {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.58rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.72rem;
    outline: none;
    color: #0f172a;
    font-size: 0.86rem;
    background: white;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  textarea.form-control {
    min-height: 5.7rem;
    resize: vertical;
  }

  .form-control:focus,
  .search-box input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  }

  .form-control.compact {
    width: auto;
    min-width: 10.5rem;
    background: #f8fafc;
  }

  .task-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .task-summary-card {
    display: flex;
    min-height: 4.4rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.88);
    border-radius: 1.25rem;
    color: #475569;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .task-summary-card > span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
  }

  .task-summary-card strong {
    font-size: 1.15rem;
    line-height: 1;
  }

  .task-summary-card small {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 600;
  }

  .task-summary-card.active { color: #2563eb; background: #eff6ff; }
  .task-summary-card.completed { color: #059669; background: #ecfdf5; }
  .task-summary-card.paused { color: #d97706; background: #fffbeb; }

  .task-summary-card:hover,
  .task-summary-card.selected {
    border-color: currentColor;
    box-shadow: 0 15px 32px rgba(15, 23, 42, 0.1);
    transform: translateY(-2px);
  }

  .task-summary-card.selected {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 15px 32px rgba(15, 23, 42, 0.08);
  }

  .project-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.15rem;
  }

  .project-summary-card {
    display: flex;
    min-height: 4.4rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.88);
    border-radius: 1.25rem;
    color: #475569;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .project-summary-card strong {
    font-size: 1.15rem;
    line-height: 1;
  }

  .project-summary-card small {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 600;
  }

  .project-summary-card.active { color: #2563eb; background: #eff6ff; }
  .project-summary-card.completed { color: #059669; background: #ecfdf5; }
  .project-summary-card.paused { color: #d97706; background: #fffbeb; }
  .project-summary-card.canceled { color: #dc2626; background: #fff1f2; }

  .project-summary-card:hover,
  .project-summary-card.selected {
    border-color: currentColor;
    box-shadow: 0 15px 32px rgba(15, 23, 42, 0.1);
    transform: translateY(-2px);
  }

  .project-summary-card.selected {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 15px 32px rgba(15, 23, 42, 0.08);
  }

  .task-project-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: -0.25rem 0 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.85rem;
    color: #1e3a8a;
    font-size: 0.82rem;
    background: #eff6ff;
  }

  .task-project-context span {
    min-width: 0;
  }

  .task-project-context strong {
    overflow-wrap: anywhere;
  }

  .task-project-context button {
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.65rem;
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 750;
    background: white;
    cursor: pointer;
  }

  .task-project-groups {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .task-project-group {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .task-project-group:hover {
      border-color: #c7d2fe;
      box-shadow: 0 20px 44px rgba(37, 99, 235, 0.11);
      transform: translateY(-2px);
    }
  }

  .task-project-header {
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    background: linear-gradient(135deg, #f8faff, #f5f3ff);
  }

  .task-project-title-wrap,
  .task-project-title,
  .task-project-meta {
    display: flex;
    align-items: center;
  }

  .task-project-title-wrap {
    min-width: 0;
    gap: 0.65rem;
  }

  .task-project-collapse {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #dbeafe;
    border-radius: 0.72rem;
    color: #2563eb;
    background: white;
    cursor: pointer;
  }

  .task-project-collapse i { transition: transform 0.2s ease; }
  .task-project-group.collapsed .task-project-collapse i { transform: rotate(-90deg); }

  .task-project-title {
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.55rem;
  }

  .task-project-title h4 {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 1rem;
    font-weight: 800;
  }

  .task-project-title h4 span {
    color: #475569;
    font-weight: 700;
  }

  .task-project-meta {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    color: #64748b;
    font-size: 0.75rem;
  }

  .task-project-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
  }

  .task-project-meta .task-count,
  .task-project-add {
    min-height: 2.2rem;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    font-weight: 750;
    background: white;
  }

  .task-project-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #2563eb;
    font-size: 0.76rem;
    cursor: pointer;
  }

  .task-project-body {
    border-top: 1px solid #eef2f7;
  }

  .task-project-table-scroll {
    overflow-x: auto;
  }

  .task-project-table {
    min-width: 70rem;
  }

  .task-project-table th,
  .task-project-table td {
    padding: 0.65rem 0.7rem;
  }

  .task-project-table th { white-space: nowrap; }
  .task-project-table .primary-cell { min-width: 13rem; }
  .task-project-table td:nth-child(2) { min-width: 9rem; }
  .task-project-table td:nth-child(5) { min-width: 8rem; }
  .task-project-table td:nth-child(9) { min-width: 9.75rem; }

  .task-project-table .action-button {
    width: 2.15rem;
    height: 2.15rem;
  }

  .task-row.is-editable {
    cursor: pointer;
    transition: background 0.16s ease, box-shadow 0.16s ease;
  }

  .task-row.is-editable:hover {
    background: #f8fbff;
    box-shadow: inset 3px 0 #3b82f6;
  }

  .task-row.is-editable:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid rgba(59, 130, 246, 0.28);
    outline-offset: -3px;
  }

  .task-result-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    color: #2563eb;
    font-size: 0.76rem;
    font-weight: 700;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .task-result-link:hover { text-decoration: underline; }
  .task-result-empty { color: #94a3b8; }

  .task-links-popover {
    position: fixed;
    z-index: 95;
    width: min(18rem, calc(100vw - 1rem));
    padding: 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.8rem;
    background: white;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.2);
    animation: taskLinksIn 0.16s ease;
  }

  .task-links-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #e2e8f0;
  }

  .task-links-popover-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
  }

  .task-links-popover-header button {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.55rem;
    color: #94a3b8;
    background: transparent;
    cursor: pointer;
  }

  .task-links-popover-header button:hover { color: #334155; background: #f1f5f9; }

  .task-links-popover-list {
    display: flex;
    max-height: 18rem;
    flex-direction: column;
    gap: 0.2rem;
    overflow-y: auto;
    padding-top: 0.45rem;
  }

  .task-links-popover-list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.52rem 0.55rem;
    border-radius: 0.58rem;
    color: #2563eb;
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
  }

  .task-links-popover-list a:hover { background: #eff6ff; }

  @keyframes taskLinksIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .project-card {
    position: relative;
    display: flex;
    min-height: 15.5rem;
    overflow: hidden;
    flex-direction: column;
    padding: 1.2rem;
    border-radius: 1.25rem;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .project-card.is-editable {
    cursor: pointer;
  }

  @media (hover: hover) and (pointer: fine) {
    .project-card:hover {
      border-color: #c7d2fe;
      box-shadow: 0 20px 42px rgba(37, 99, 235, 0.12);
      transform: translateY(-3px);
    }
  }

  .project-card.is-editable:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.3);
    outline-offset: 3px;
  }

  .project-card-top {
    display: flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
  }

  .project-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-left: auto;
  }

  .project-card-actions .action-button {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.55rem;
    color: #2563eb;
    background: #eff6ff;
  }

  .project-card-actions .action-button:hover {
    color: #1d4ed8;
    background: #dbeafe;
  }

  .project-card-actions .action-button.copy {
    color: #059669;
    background: #ecfdf5;
  }

  .project-card-actions .action-button.copy:hover {
    color: #047857;
    background: #d1fae5;
  }

  .project-card-actions .action-button.delete {
    color: #dc2626;
    background: #fff1f2;
  }

  .project-card-actions .action-button.delete:hover {
    color: #b91c1c;
    background: #fee2e2;
  }

  .project-card h4 {
    margin: 0.75rem 0 0;
    overflow-wrap: anywhere;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.4;
  }

  .project-card h4 span {
    color: #334155;
    font-weight: 750;
  }

  .project-description {
    min-height: 2.6rem;
    margin: 0.35rem 0 0.7rem;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .project-date-row,
  .project-owner-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    color: #64748b;
    font-size: 0.76rem;
  }

  .project-date-row > span,
  .project-owner-row > span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.38rem;
  }

  .project-date-row small,
  .project-owner-row small {
    color: #64748b;
    font-size: inherit;
  }

  .project-date-row .start-date-icon { color: #10b981; }
  .project-date-row .end-date-icon { color: #f43f5e; }

  .project-owner-row {
    margin-top: 0.75rem;
  }

  .project-owner-row .fa-user-tie {
    color: #a855f7;
  }

  .project-task-count {
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: #f1f5f9;
    white-space: nowrap;
  }

  .project-progress-block {
    margin-top: auto;
    padding: 0.8rem 0.1rem 0.25rem;
    border-top: 1px solid #eef2f7;
  }

  .project-progress-block .progress-track {
    height: 0.35rem;
    margin: 0;
  }

  .project-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    color: #64748b;
    font-size: 0.78rem;
  }

  .project-progress-label strong {
    color: #2563eb;
  }

  .row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
  }

  .action-button {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 0.6rem;
    color: #475569;
    background: #f1f5f9;
    cursor: pointer;
    transition: 0.15s ease;
  }

  .action-button:hover {
    color: #1d4ed8;
    background: #dbeafe;
  }

  .action-button.delete:hover {
    color: #b91c1c;
    background: #fee2e2;
  }

  .table-card {
    overflow: hidden;
    border-radius: 1rem;
  }

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

  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
  }

  .data-table th {
    padding: 0.75rem;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    background: #f8fafc;
  }

  .data-table td {
    padding: 0.75rem;
    border-top: 1px solid #f1f5f9;
    vertical-align: middle;
  }

  .data-table tbody tr:hover {
    background: rgba(248, 250, 252, 0.85);
  }

  .data-table .primary-cell strong {
    display: block;
    max-width: 19rem;
    overflow: hidden;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .data-table .primary-cell small {
    display: block;
    margin-top: 0.15rem;
    color: #94a3b8;
    font-size: 0.74rem;
  }

  .status-badge,
  .role-badge,
  .priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
  }

  .status-badge.pending { color: #475569; background: #e2e8f0; }
  .status-badge.active { color: #1d4ed8; background: #dbeafe; }
  .status-badge.paused { color: #b45309; background: #fef3c7; }
  .status-badge.completed { color: #047857; background: #d1fae5; }
  .status-badge.canceled { color: #b91c1c; background: #fee2e2; }
  .priority-badge.low { color: #047857; background: #d1fae5; }
  .priority-badge.medium { color: #b45309; background: #fef3c7; }
  .priority-badge.high { color: #b91c1c; background: #fee2e2; }
  .priority-badge.urgent { color: #7e22ce; background: #f3e8ff; }
  .role-badge.admin { color: #b45309; background: #fef3c7; }
  .role-badge.manager { color: #1d4ed8; background: #dbeafe; }
  .role-badge.employee { color: #047857; background: #d1fae5; }

  .mini-progress {
    display: flex;
    min-width: 7rem;
    align-items: center;
    gap: 0.45rem;
  }

  .mini-progress .progress-track {
    margin: 0;
  }

  .mini-progress > strong {
    min-width: 2rem;
    font-size: 0.74rem;
    font-weight: 700;
  }

  .empty-state {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    color: #94a3b8;
    text-align: center;
  }

  .empty-state i {
    display: block;
    margin-bottom: 0.7rem;
    font-size: 2rem;
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(8px);
  }

  .modal-card,
  .auth-card {
    width: min(100%, 46rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
    animation: modalIn 0.2s ease;
  }

  .modal-card {
    padding: 1.25rem;
  }

  .entity-modal-card {
    width: min(100%, 58rem);
  }

  .entity-modal-card > .modal-heading {
    padding-bottom: 0.9rem;
    border-bottom: 1px solid #e8eef7;
  }

  .entity-modal-heading-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
  }

  .entity-modal-icon,
  .form-section-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    color: #2563eb;
    background: linear-gradient(135deg, #dbeafe, #eef2ff);
  }

  .entity-modal-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.12);
  }

  .entity-modal-card .modal-heading h3 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.25;
  }

  .entity-modal-subtitle {
    margin: 0.25rem 0 0;
    overflow: hidden;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .entity-modal-card .modal-close {
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
  }

  .modal-card.small {
    width: min(100%, 27rem);
  }

  .auth-card {
    width: min(100%, 27rem);
    padding: 1.7rem;
  }

  @keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  .auth-logo {
    width: 3.7rem;
    height: 3.7rem;
    margin: 0 auto 1rem;
    border-radius: 1.15rem;
    font-size: 1.35rem;
  }

  .auth-card h2 {
    margin: 0.3rem 0 0;
    font-size: 1.35rem;
    font-weight: 800;
    text-align: center;
  }

  .auth-description {
    margin: 0.5rem auto 1.2rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
    text-align: center;
  }

  .form-stack {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 1.1rem;
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .form-group.full {
    grid-column: 1 / -1;
  }

  .form-group > span {
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
  }

  .entity-editor-form {
    gap: 0;
    margin-top: 0.85rem;
  }

  .form-section-card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: linear-gradient(145deg, #ffffff, #fbfdff);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
  }

  .form-section-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
  }

  .form-section-heading > div {
    min-width: 0;
  }

  .form-section-heading strong,
  .form-section-heading small {
    display: block;
  }

  .form-section-heading strong {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 800;
  }

  .form-section-heading small {
    margin-top: 0.12rem;
    color: #64748b;
    font-size: 0.77rem;
    line-height: 1.35;
  }

  .form-section-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    font-size: 0.82rem;
  }

  .form-section-icon.purple {
    color: #7c3aed;
    background: #f3e8ff;
  }

  .entity-editor-form .form-group {
    gap: 0.38rem;
  }

  .entity-editor-form .form-group > span {
    color: #1e293b;
    font-size: 0.86rem;
    font-weight: 750;
  }

  .entity-editor-form .form-control {
    font-size: 0.9rem;
    background: #ffffff;
  }

  .project-description-input {
    min-height: 5.25rem !important;
  }

  .form-hint {
    color: #94a3b8;
    font-size: 0.75rem;
  }

  .form-error {
    margin: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid #fecaca;
    border-radius: 0.65rem;
    color: #b91c1c;
    font-size: 0.8rem;
    background: #fef2f2;
  }

  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
  }

  .modal-actions.form-actions-split {
    align-items: center;
    justify-content: space-between;
  }

  .modal-primary-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-left: auto;
  }

  .project-tasks-button {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #eff6ff;
  }

  .project-tasks-button:hover {
    color: #1e40af;
    background: #dbeafe;
  }

  .task-form-modal {
    display: flex;
    width: min(100%, 78rem);
    height: min(46rem, calc(100dvh - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    flex-direction: column;
    overflow: hidden;
    padding: 1rem 1.1rem;
  }

  .task-form-modal #entity-modal-body {
    display: flex;
    min-height: 0;
    flex: 1;
  }

  .task-editor-form {
    min-height: 0;
    flex: 1;
    gap: 0.65rem;
    margin-top: 0.7rem;
  }

  .task-editor-layout {
    display: grid;
    min-height: 0;
    flex: 1;
    gap: 0.8rem;
    overflow: hidden;
  }

  .task-editor-layout.with-history {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.44fr);
  }

  .task-editor-layout.without-history {
    grid-template-columns: 1fr;
  }

  .task-editor-layout.without-history .task-editor-fields {
    width: 100%;
    max-width: 68rem;
    margin-inline: auto;
  }

  .task-editor-fields,
  .task-form-history {
    min-width: 0;
    min-height: 0;
  }

  .task-editor-fields {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.8rem;
  }

  .task-form-modal .form-section-heading {
    margin-bottom: 0.65rem;
  }

  .task-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.48rem 0.65rem;
  }

  .task-form-grid .span-2 {
    grid-column: span 2;
  }

  .task-form-grid .span-3 {
    grid-column: 1 / -1;
  }

  @media (min-width: 981px) {
    .full-task-form-grid .task-name-field { grid-column: 1 / 3; grid-row: 1; }
    .full-task-form-grid .task-project-field { grid-column: 3; grid-row: 1; }
    .full-task-form-grid .task-description-field { grid-column: 1 / -1; grid-row: 2; }
  }

  .full-task-form-grid .task-description-field .task-compact-textarea {
    height: 4.15rem;
    min-height: 4.15rem;
  }

  .task-schedule-grid,
  .task-execution-grid {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.5rem;
  }

  .task-schedule-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .task-execution-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .task-bottom-fields {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
    flex: 1;
    gap: 0.65rem;
    margin-top: 0.5rem;
  }

  .task-bottom-left {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
    min-width: 0;
  }

  .task-bottom-fields .form-group {
    min-width: 0;
  }

  .task-bottom-fields .task-bottom-left .task-compact-textarea {
    height: auto;
    min-height: 2.7rem;
    flex: 1;
  }

  .task-result-links-field {
    min-height: 0;
  }

  .task-bottom-fields .task-result-links-field .task-compact-textarea {
    height: auto;
    min-height: 0;
    flex: 1;
  }

  .task-create-notes {
    margin-top: 0.5rem;
  }

  .task-form-modal .form-group {
    gap: 0.22rem;
  }

  .task-form-modal .form-group > span {
    font-size: 0.84rem;
  }

  .task-form-modal .form-control {
    min-height: 2.3rem;
    padding: 0.4rem 0.58rem;
    font-size: 0.9rem;
  }

  .task-form-modal .task-compact-textarea {
    height: 3rem;
    min-height: 3rem;
    resize: none;
  }

  .task-form-history {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.8rem;
    background: linear-gradient(160deg, #fbfaff, #f8fbff);
  }

  .task-form-notes {
    flex: 0 0 auto;
    gap: 0.3rem;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid #e9e5f5;
  }

  .task-form-notes > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #4c1d95;
  }

  .task-form-notes > span i {
    color: #8b5cf6;
  }

  .task-form-modal .task-history-note-input {
    height: 4rem;
    min-height: 4rem;
    resize: none;
    background: #ffffff;
  }

  .history-section-heading {
    flex: 0 0 auto;
  }

  .task-history-count {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    color: #6d28d9;
    font-size: 0.7rem;
    font-weight: 800;
    background: #ede9fe;
    white-space: nowrap;
  }

  .embedded-history-list {
    min-height: 0;
    max-height: none;
    flex: 1;
    gap: 0.55rem;
    padding-right: 0.15rem;
    scrollbar-color: #c4b5fd #f5f3ff;
    scrollbar-width: thin;
  }

  .embedded-history-list .task-history-item {
    gap: 0.55rem;
    padding: 0.65rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.9);
  }

  .embedded-history-list .task-history-marker {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.55rem;
    font-size: 0.72rem;
  }

  .embedded-history-list .task-history-heading strong {
    font-size: 0.8rem;
  }

  .embedded-history-list .task-history-heading time,
  .embedded-history-list .task-history-actor {
    font-size: 0.7rem;
  }

  .embedded-history-list .task-history-actor {
    margin: 0.18rem 0 0.4rem;
  }

  .embedded-history-list .task-history-changes {
    padding: 0.5rem 0.6rem;
    font-size: 0.76rem;
    line-height: 1.5;
  }

  .task-history-empty {
    display: grid;
    min-height: 9rem;
    place-items: center;
    align-content: center;
    gap: 0.55rem;
    padding: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 0.85rem;
    color: #64748b;
    font-size: 0.8rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
  }

  .task-history-empty i {
    color: #8b5cf6;
    font-size: 1.25rem;
  }

  .task-form-modal .modal-actions {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 0.65rem;
  }

  .confirm-icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 0.8rem;
    place-items: center;
    border-radius: 1rem;
    color: #dc2626;
    font-size: 1.25rem;
    background: #fee2e2;
  }

  .confirm-message {
    margin: 0.6rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: center;
  }

  .loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(7px);
  }

  .loader {
    width: 2.6rem;
    height: 2.6rem;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  .loading-overlay p {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
  }

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

  .toast-container {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 200;
    display: flex;
    width: min(23rem, calc(100vw - 2rem));
    flex-direction: column;
    gap: 0.55rem;
  }

  .toast {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
    border-radius: 0.8rem;
    color: #334155;
    font-size: 0.8rem;
    line-height: 1.45;
    background: white;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.16);
    animation: toastIn 0.2s ease;
  }

  .toast.success { border-left-color: #10b981; }
  .toast.error { border-left-color: #ef4444; }
  .toast.info { border-left-color: #3b82f6; }

  @keyframes toastIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 23, 42, 0.5);
  }

  @media (max-height: 680px) and (min-width: 981px) {
    .task-form-modal {
      height: calc(100dvh - 1rem);
      max-height: calc(100dvh - 1rem);
      padding: 0.75rem 0.9rem;
    }

    .task-form-modal > .modal-heading { padding-bottom: 0.55rem; }
    .task-editor-form { gap: 0.45rem; margin-top: 0.5rem; }
    .task-editor-layout { gap: 0.6rem; }
    .task-editor-fields,
    .task-form-history { padding: 0.6rem; }
    .task-form-modal .form-section-heading { margin-bottom: 0.42rem; }
    .task-form-grid { gap: 0.32rem 0.5rem; }
    .task-schedule-grid,
    .task-execution-grid,
    .task-bottom-fields { gap: 0.5rem; margin-top: 0.32rem; }
    .task-bottom-left { gap: 0.32rem; }
    .task-form-modal .form-control { min-height: 2.12rem; padding-block: 0.3rem; }
    .task-form-modal .task-compact-textarea { height: 2.55rem; min-height: 2.55rem; }
    .task-form-modal .full-task-form-grid .task-description-field .task-compact-textarea {
      height: 3.15rem;
      min-height: 3.15rem;
    }
    .task-form-modal .task-bottom-fields .task-bottom-left .task-compact-textarea {
      height: auto;
      min-height: 2.4rem;
    }
    .task-form-modal .modal-actions { padding-top: 0.45rem; }
  }

  @media (max-height: 600px) and (min-width: 981px) {
    .task-form-modal { padding-block: 0.6rem; }
    .task-form-modal > .modal-heading { padding-bottom: 0.4rem; }
    .task-editor-form { margin-top: 0.35rem; }
    .task-editor-fields,
    .task-form-history { padding: 0.5rem; }
    .task-form-modal .form-section-heading { margin-bottom: 0.28rem; }
    .task-form-modal .form-section-icon { width: 1.9rem; height: 1.9rem; }
    .task-form-modal .full-task-form-grid .task-description-field .task-compact-textarea {
      height: 2.55rem;
      min-height: 2.55rem;
    }
    .task-form-modal .task-bottom-fields .task-bottom-left .task-compact-textarea {
      min-height: 1.75rem;
    }
    .task-form-modal .task-history-note-input { height: 3rem; min-height: 3rem; }
  }

  @media (max-width: 1400px) {
    .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 1180px) {
    .project-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-shell { padding: 1.25rem; }
    .filter-bar > .inline-period-filter { flex: 1 0 100%; margin-left: 0; }
    .task-project-header { align-items: flex-start; flex-wrap: wrap; }
    .task-project-meta { flex: 1 0 100%; justify-content: flex-start; margin-left: 3.15rem; }
  }

  @media (max-width: 980px) {
    .task-form-modal {
      display: block;
      height: auto;
      max-height: calc(100dvh - 1rem);
      overflow-y: auto;
    }

    .task-form-modal #entity-modal-body { display: block; }
    .task-editor-form { display: flex; min-height: auto; }
    .task-editor-layout { overflow: visible; }
    .task-editor-layout.with-history { grid-template-columns: 1fr; }
    .task-editor-fields { overflow: visible; }
    .task-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .task-form-grid .span-2,
    .task-form-grid .span-3 { grid-column: 1 / -1; }
    .full-task-form-grid > .form-group { grid-column: auto; grid-row: auto; }
    .full-task-form-grid .task-name-field,
    .full-task-form-grid .task-description-field { grid-column: 1 / -1; }
    .task-schedule-grid,
    .task-execution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .task-form-history { min-height: 18rem; max-height: 22rem; }
    .task-form-modal .modal-actions { margin-top: 0.7rem; }
  }

  @media (max-width: 900px) {
    .sidebar { width: min(var(--sidebar-width), 86vw); transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .mobile-menu-button { display: inline-grid; place-items: center; }
    .overview-grid { grid-template-columns: 1fr; }
    .topbar { padding-inline: 1.25rem; }
    .filter-bar { align-items: stretch; }
    .filter-bar .search-box { flex-basis: 100%; }
    .filter-bar > .form-control.compact { flex: 1; }
    .period-filter { flex-wrap: wrap; }
  }

  @media (max-width: 820px) {
    .table-card {
      overflow: visible;
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }

    .table-scroll { overflow: visible; }

    .task-project-body { padding: 0.75rem; }
    .task-project-table-scroll { overflow: visible; }
    .task-project-table { min-width: 0; }
    .task-project-table .action-button { width: 2.5rem; height: 2.5rem; }

    .data-table,
    .data-table tbody {
      display: block;
      width: 100%;
    }

    .data-table thead { display: none; }

    .data-table tbody {
      display: grid;
      gap: 0.85rem;
    }

    .data-table tr {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      overflow: hidden;
      border: 1px solid rgba(226, 232, 240, 0.95);
      border-radius: 1rem;
      background: var(--surface);
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
    }

    .task-project-table tr { box-shadow: none; }

    .data-table td {
      display: grid;
      grid-template-columns: minmax(7rem, 42%) minmax(0, 1fr);
      align-items: center;
      gap: 0.7rem;
      min-width: 0;
      padding: 0.75rem 0.9rem;
      border-top: 1px solid #f1f5f9;
      overflow-wrap: anywhere;
    }

    .data-table td:nth-child(even) { border-left: 1px solid #f1f5f9; }

    .data-table td::before {
      color: #64748b;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      content: attr(data-label);
    }

    .data-table .primary-cell {
      display: block;
      grid-column: 1 / -1;
      padding: 0.95rem;
      border-top: 0;
      border-left: 0;
      background: #f8fafc;
    }

    .data-table .primary-cell::before { display: none; }
    .data-table .primary-cell strong { max-width: none; white-space: normal; }
    .data-table .primary-cell small { overflow-wrap: anywhere; }
    .data-table .row-actions { justify-content: flex-start; flex-wrap: wrap; }

    .data-table .empty-row {
      display: block;
      border: 1px solid rgba(226, 232, 240, 0.95);
    }

    .data-table .empty-row td {
      display: block;
      padding: 0;
      border: 0;
    }

    .data-table .empty-row td::before { display: none; }
  }

  @media (max-width: 680px) {
    .topbar { min-height: 4.5rem; padding: 0.75rem 0.9rem; }
    .page-subtitle { display: none; }
    .page-title { font-size: 1.15rem; }
    .content-shell { padding: 0.85rem; }
    .welcome-card { min-height: 9rem; padding: 1.25rem; }
    .welcome-illustration { display: none; }
    .stats-grid { gap: 0.65rem; }
    .stat-card { min-width: 0; gap: 0.65rem; padding: 0.85rem; }
    .stat-icon { width: 2.5rem; height: 2.5rem; }
    .stat-card strong { font-size: 1.35rem; }
    .projects-grid { grid-template-columns: 1fr; }
    .project-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
    .project-summary-card { min-height: 4rem; border-radius: 1rem; }
    .project-card { min-height: 0; padding: 1rem; }
    .project-card-top { align-items: flex-start; }
    .project-card-actions { max-width: 11rem; }
    .task-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
    .task-summary-card { min-height: 4rem; border-radius: 1rem; }
    .filter-bar { align-items: stretch; flex-direction: column; }
    .period-filter,
    .overview-period-filter,
    .inline-period-filter { align-items: stretch; flex-direction: column; flex-wrap: nowrap; margin-left: 0; }
    .date-filter-field { justify-content: space-between; }
    .date-filter-field .form-control { min-width: 0; flex: 1; }
    .search-box { min-width: 0; }
    .form-control.compact { width: 100%; }
    .section-toolbar { align-items: flex-start; flex-wrap: wrap; }
    .section-toolbar h3 { font-size: 1.2rem; }
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full { grid-column: auto; }
    .task-project-context { align-items: stretch; flex-direction: column; }
    .task-project-context button { width: 100%; }
    .task-project-header { padding: 0.75rem; }
    .task-project-title-wrap { align-items: flex-start; }
    .task-project-title { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 0.35rem 0.55rem; }
    .task-project-title h4 { font-size: 0.94rem; }
    .task-project-meta { margin-left: 0; }
    .task-project-meta > span { white-space: normal; }
    .task-project-meta .task-count,
    .task-project-add { flex: 1; }
    .task-project-body { padding: 0.6rem; }
    .data-table tr { grid-template-columns: 1fr; }
    .data-table td:nth-child(even) { border-left: 0; }
    .modal-overlay { align-items: flex-end; padding: 0.5rem; }
    .modal-card,
    .auth-card { max-height: calc(100dvh - 1rem); border-radius: 1rem 1rem 0.75rem 0.75rem; }
    .modal-card { padding: 1rem; }
    .task-history-heading { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
    .entity-modal-subtitle { white-space: normal; }
    .modal-actions.form-actions-split { align-items: stretch; flex-direction: column; }
    .modal-primary-actions { width: 100%; margin-left: 0; }
    .modal-primary-actions > button { flex: 1; }
    .project-tasks-button { width: 100%; }
    .task-form-grid .span-2,
    .task-form-grid .span-3 { grid-column: auto; }
    .full-task-form-grid .task-name-field,
    .full-task-form-grid .task-description-field { grid-column: auto; }
    .task-schedule-grid,
    .task-execution-grid { grid-template-columns: 1fr; }
    .task-bottom-fields { grid-template-columns: 1fr; }
    .task-bottom-fields .task-result-links-field .task-compact-textarea { height: 5rem; min-height: 5rem; }
    .activity-item { flex-wrap: wrap; }
    .activity-item > small { margin-left: 2.75rem; }
    .modal-actions { flex-wrap: wrap; }
    .modal-actions > button { flex: 1; }
  }

  @media (max-width: 420px) {
    .task-schedule-grid,
    .task-execution-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .section-toolbar > .primary-button { width: 100%; }
    .welcome-card h3 { font-size: 1.55rem; }
    .panel { padding: 0.95rem; }
    .data-table td { grid-template-columns: minmax(6.5rem, 40%) minmax(0, 1fr); padding-inline: 0.75rem; }
    .task-history-item { gap: 0.55rem; padding: 0.7rem; }
    .task-summary-card strong { font-size: 1.05rem; }
    .task-summary-card small { font-size: 0.72rem; }
  }

  /* Giữ bảng nhiệm vụ ở dạng desktop trên mobile/tablet và cho phép vuốt ngang. */
  @media (max-width: 820px) {
    .task-project-body { padding: 0; }

    .task-project-table-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      scrollbar-color: #94a3b8 #e2e8f0;
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
    }

    .task-project-table-scroll::-webkit-scrollbar { height: 0.55rem; }
    .task-project-table-scroll::-webkit-scrollbar-track { background: #e2e8f0; }
    .task-project-table-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: #94a3b8; }

    .task-project-table {
      display: table;
      width: 100%;
      min-width: 70rem;
      border-collapse: collapse;
    }

    .task-project-table thead { display: table-header-group; }
    .task-project-table tbody { display: table-row-group; width: auto; }

    .task-project-table tr {
      display: table-row;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .task-project-table td {
      display: table-cell;
      min-width: 0;
      padding: 0.65rem 0.7rem;
      border-top: 1px solid #f1f5f9;
      border-left: 0;
      vertical-align: middle;
      overflow-wrap: normal;
    }

    .task-project-table td::before { display: none; content: none; }

    .task-project-table .primary-cell {
      display: table-cell;
      min-width: 13rem;
      padding: 0.65rem 0.7rem;
      border-top: 1px solid #f1f5f9;
      background: transparent;
    }

    .task-project-table .primary-cell strong {
      max-width: 19rem;
      white-space: nowrap;
    }

    .task-project-table .row-actions { justify-content: flex-end; flex-wrap: nowrap; }
    .task-project-table .action-button { width: 2.15rem; height: 2.15rem; }
  }

  /* Luôn giữ cột Nhiệm vụ ở mép trái khi bảng được cuộn ngang. */
  .task-project-table th:first-child,
  .task-project-table td:first-child {
    position: sticky;
    left: 0;
    min-width: 13rem;
    background: #ffffff;
    background-clip: padding-box;
    box-shadow: 1px 0 0 #e2e8f0, 12px 0 18px -18px rgba(15, 23, 42, 0.8);
  }

  .task-project-table th:first-child {
    z-index: 5;
    background: #f8fafc;
  }

  .task-project-table td:first-child {
    z-index: 3;
  }

  .task-project-table .task-row.is-editable:hover > td:first-child {
    background: #f8fbff;
    box-shadow: inset 3px 0 #3b82f6, 1px 0 0 #e2e8f0, 12px 0 18px -18px rgba(15, 23, 42, 0.8);
  }

  .automation-status-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid #bfdbfe;
    border-radius: 1rem;
    color: #1e40af;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
  }

  .automation-status-card > i {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.75rem;
    background: #dbeafe;
  }

  .automation-status-card > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.16rem;
  }

  .automation-status-card strong { font-size: 0.88rem; }
  .automation-status-card span { color: #475569; font-size: 0.78rem; line-height: 1.45; }
  .automation-status-card.success { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
  .automation-status-card.success > i { background: #d1fae5; }
  .automation-status-card.error { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
  .automation-status-card.error > i { background: #fee2e2; }

  .automation-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
  }

  .automation-summary-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045);
  }

  .automation-summary-icon {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.78rem;
  }

  .automation-summary-icon.blue { color: #2563eb; background: #dbeafe; }
  .automation-summary-icon.green { color: #059669; background: #d1fae5; }
  .automation-summary-icon.purple { color: #7c3aed; background: #ede9fe; }
  .automation-summary-icon.red { color: #dc2626; background: #fee2e2; }
  .automation-summary-card div { display: flex; min-width: 0; flex-direction: column; }
  .automation-summary-card small { color: #64748b; font-size: 0.74rem; }
  .automation-summary-card strong { color: #0f172a; font-size: 1.35rem; line-height: 1.2; }

  .default-task-table-card { margin-bottom: 1rem; }
  .default-task-table { min-width: 1040px; }
  .default-task-table td { vertical-align: middle; }
  .default-task-table .primary-cell { min-width: 14rem; }
  .default-task-table .primary-cell small { max-width: 18rem; }

  .automation-schedule-cell,
  .automation-run-cell {
    display: flex;
    min-width: 9.5rem;
    flex-direction: column;
    gap: 0.15rem;
  }

  .automation-schedule-cell strong,
  .automation-run-cell strong { color: #334155; font-size: 0.8rem; }
  .automation-schedule-cell small,
  .automation-run-cell small { color: #64748b; font-size: 0.72rem; }

  .automation-state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
  }

  .automation-state.active { color: #047857; background: #d1fae5; }
  .automation-state.paused { color: #b45309; background: #fef3c7; }
  .automation-state.success { color: #047857; background: #ecfdf5; }
  .automation-state.error { color: #b91c1c; background: #fee2e2; }

  .automation-history-card {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
  }

  .automation-history-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
  }

  .automation-history-heading h3 { margin-top: 0.1rem; font-size: 1rem; font-weight: 800; }
  .automation-history-heading > small { color: #64748b; font-size: 0.75rem; }
  .automation-history-list { display: grid; gap: 0.5rem; }

  .automation-history-item {
    display: grid;
    grid-template-columns: minmax(11rem, 1.3fr) minmax(8rem, 0.8fr) minmax(9rem, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #f1f5f9;
    border-radius: 0.8rem;
    background: #f8fafc;
  }

  .automation-history-item > div { display: flex; min-width: 0; flex-direction: column; gap: 0.12rem; }
  .automation-history-item strong { overflow: hidden; color: #334155; font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
  .automation-history-item small { overflow: hidden; color: #64748b; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }

  .default-task-form-modal {
    display: flex;
    width: min(1180px, calc(100vw - 2rem));
    max-height: calc(100dvh - 1.5rem);
    flex-direction: column;
    overflow: hidden;
    padding: 1rem 1.1rem;
  }

  .default-task-form-modal > .modal-heading {
    padding-bottom: 0.65rem;
  }

  .default-task-form-modal #entity-modal-body {
    display: flex;
    min-height: 0;
    flex: 1;
  }

  .default-task-editor-form {
    min-height: 0;
    flex: 1;
    gap: 0.65rem;
    margin-top: 0.65rem;
    padding-right: 0.15rem;
    overflow-y: auto;
  }

  .default-task-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: 0.75rem;
  }

  .default-task-section-card {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #ffffff;
  }

  .default-task-section-card.schedule-card {
    border-color: #ddd6fe;
    background: linear-gradient(145deg, #ffffff, #fafaff);
  }

  .default-task-section-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
  }

  .default-task-section-heading > div {
    min-width: 0;
  }

  .default-task-section-heading strong,
  .default-task-section-heading small {
    display: block;
  }

  .default-task-section-heading strong {
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 800;
  }

  .default-task-section-heading small {
    margin-top: 0.08rem;
    color: #64748b;
    font-size: 0.7rem;
    line-height: 1.3;
  }

  .default-task-section-icon {
    display: inline-grid;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.7rem;
    color: #2563eb;
    font-size: 0.78rem;
    background: #dbeafe;
  }

  .default-task-section-icon.purple { color: #7c3aed; background: #ede9fe; }
  .default-task-section-icon.soft { color: #475569; background: #f1f5f9; }

  .default-task-main-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.65rem;
  }

  .default-task-main-grid .full { grid-column: 1 / -1; }

  .default-task-editor-form .form-group {
    min-width: 0;
    gap: 0.2rem;
  }

  .default-task-editor-form .form-group > span {
    font-size: 0.76rem;
  }

  .default-task-editor-form .form-control {
    min-height: 2.25rem;
    padding: 0.38rem 0.58rem;
    font-size: 0.82rem;
  }

  .default-task-editor-form textarea.form-control {
    min-height: 3.15rem;
    resize: vertical;
  }

  .default-task-editor-form .default-task-description {
    height: 4.55rem;
    min-height: 4.55rem;
  }

  .default-task-status-switch {
    position: relative;
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    gap: 0.4rem;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
  }

  .default-task-status-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .default-task-status-switch .switch-track {
    position: relative;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.18s ease;
  }

  .default-task-status-switch .switch-track::after {
    position: absolute;
    top: 0.17rem;
    left: 0.18rem;
    width: 0.91rem;
    height: 0.91rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.24);
    content: '';
    transition: transform 0.18s ease;
  }

  .default-task-status-switch input:checked + .switch-track { background: #2563eb; }
  .default-task-status-switch input:checked + .switch-track::after { transform: translateX(1rem); }
  .default-task-status-switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }

  .default-task-preset-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.6rem;
  }

  .default-task-preset-row button {
    display: inline-flex;
    min-width: 0;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.62rem;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 750;
    background: #f8fafc;
    cursor: pointer;
  }

  .default-task-preset-row button:hover,
  .default-task-preset-row button.is-active {
    color: #1d4ed8;
    border-color: #93c5fd;
    background: #eff6ff;
  }

  .default-task-preset-row button.is-active { box-shadow: inset 0 0 0 1px #bfdbfe; }

  .default-task-schedule-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .default-task-schedule-grid .form-group { grid-column: span 2; }
  .default-task-schedule-grid .validity-field { grid-column: span 3; }

  .offset-control {
    position: relative;
  }

  .offset-control .form-control { padding-right: 2.6rem; }

  .offset-control small {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    color: #94a3b8;
    font-size: 0.67rem;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .default-task-project-dates {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    padding: 0.1rem 0;
    color: #4f46e5;
    font-size: 0.7rem;
    font-weight: 750;
    background: transparent;
    cursor: pointer;
  }

  .default-task-project-dates:hover { color: #3730a3; }

  .default-task-toggle-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #dbeafe;
    border-radius: 0.85rem;
    background: #eff6ff;
  }

  .default-task-toggle-field > span { display: flex; flex-direction: column; gap: 0.1rem; }
  .default-task-toggle-field strong { color: #1e3a8a; font-size: 0.82rem; }
  .default-task-toggle-field small { color: #64748b; font-size: 0.72rem; }
  .default-task-toggle-field input { width: 1.1rem; height: 1.1rem; accent-color: #2563eb; }

  .default-task-preview {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.5rem;
    padding: 0.58rem 0.65rem;
    border: 1px solid #c4b5fd;
    border-radius: 0.72rem;
    color: #5b21b6;
    background: #f5f3ff;
  }

  .default-task-preview i { margin-top: 0.12rem; }
  .default-task-preview div { display: flex; flex-direction: column; gap: 0.12rem; }
  .default-task-preview strong { font-size: 0.75rem; }
  .default-task-preview span { color: #475569; font-size: 0.69rem; line-height: 1.35; }
  .default-task-preview.error { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
  .default-task-preview.paused { color: #b45309; border-color: #fde68a; background: #fffbeb; }

  .default-task-advanced {
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    background: #ffffff;
  }

  .default-task-advanced summary {
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.65rem;
    list-style: none;
    cursor: pointer;
  }

  .default-task-advanced summary::-webkit-details-marker { display: none; }
  .default-task-advanced summary > span:nth-child(2) { min-width: 0; flex: 1; }
  .default-task-advanced summary strong,
  .default-task-advanced summary small { display: block; }
  .default-task-advanced summary strong { color: #1e293b; font-size: 0.78rem; }
  .default-task-advanced summary small { margin-top: 0.08rem; color: #64748b; font-size: 0.68rem; }
  .default-task-advanced summary em { padding: 0.22rem 0.4rem; border-radius: 999px; color: #0369a1; font-size: 0.64rem; font-style: normal; font-weight: 750; background: #e0f2fe; }
  .default-task-advanced summary > i { color: #94a3b8; font-size: 0.7rem; transition: transform 0.18s ease; }
  .default-task-advanced[open] summary > i { transform: rotate(180deg); }

  .default-task-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0.1rem 0.7rem 0.7rem;
    border-top: 1px solid #f1f5f9;
  }

  .default-task-details-grid .form-group { padding-top: 0.6rem; }
  .default-task-details-grid textarea.form-control { height: 3.4rem; min-height: 3.4rem; }

  .default-task-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    padding-top: 0.65rem;
    background: rgba(255, 255, 255, 0.98);
  }

  .default-task-form-actions > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #64748b;
    font-size: 0.68rem;
  }

  .default-task-form-actions > div { display: flex; gap: 0.55rem; }

  @media (min-width: 981px) and (max-height: 760px) {
    .default-task-form-modal { height: calc(100dvh - 1rem); padding-block: 0.75rem; }
    .default-task-form-modal > .modal-heading { padding-bottom: 0.45rem; }
    .default-task-form-modal .entity-modal-icon { width: 2.3rem; height: 2.3rem; }
    .default-task-editor-form { margin-top: 0.45rem; }
    .default-task-section-card { padding: 0.7rem; }
    .default-task-section-heading { margin-bottom: 0.5rem; }
    .default-task-editor-form .default-task-description { height: 3.5rem; min-height: 3.5rem; }
  }

  @media (max-width: 980px) {
    .default-task-form-modal { width: min(46rem, calc(100vw - 1rem)); height: calc(100dvh - 1rem); }
    .default-task-editor-layout { grid-template-columns: 1fr; }
  }

  @media (max-width: 1100px) {
    .automation-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 760px) {
    .automation-summary-grid { grid-template-columns: 1fr; }
    .automation-history-heading { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
    .automation-history-item { grid-template-columns: 1fr auto; }
    .automation-history-item > div:nth-child(2),
    .automation-history-item > div:nth-child(3) { grid-column: 1; }
    .automation-history-item > span { grid-column: 2; grid-row: 1; }
    .default-task-form-modal { width: 100%; padding: 0.8rem; }
    .default-task-main-grid { grid-template-columns: 1fr; }
    .default-task-main-grid .full { grid-column: auto; }
    .default-task-section-heading.with-switch { flex-wrap: wrap; }
    .default-task-section-heading.with-switch > div { flex: 1; }
    .default-task-status-switch { margin-left: 2.75rem; }
    .default-task-schedule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .default-task-schedule-grid .form-group,
    .default-task-schedule-grid .validity-field { grid-column: span 1; }
    .default-task-schedule-grid .weekday-field { grid-column: 1 / -1; }
    .default-task-details-grid { grid-template-columns: 1fr; }
    .default-task-form-actions > span { display: none; }
    .default-task-form-actions > div { width: 100%; }
    .default-task-form-actions button { flex: 1; }
  }
  .scheduler-workspace { margin: 16px 0 24px; padding: 18px; border: 1px solid #dbe3ed; border-radius: 14px; background: #f8fafc; }
  .sch-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .sch-toolbar h3 { margin: 0 0 5px; }
  .sch-groups { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 10px; margin: 16px 0; }
  .sch-groups article { padding: 12px; border: 1px solid #dbe3ed; border-radius: 10px; background: white; }
  .sch-groups article > span { display: block; margin: 8px 0; font-size: 12px; }
  .scheduler-workspace button { margin: 3px; font-size: 12px; padding: 7px 10px; }
  .sch-table-wrap { overflow: auto; max-height: 420px; border: 1px solid #dbe3ed; border-radius: 8px; background: white; }
  .sch-table { border-collapse: collapse; width: 100%; font-size: 12px; min-width: 680px; }
  .sch-table th { position: sticky; top: 0; background: #edf2f7; text-align: left; z-index: 1; }
  .sch-table td, .sch-table th { padding: 10px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
  .sch-table small { display: block; color: #64748b; margin-top: 5px; }
  .sch-status { font-weight: 600; } .sch-created { color: #167044; } .sch-error, .sch-blocked { color: #b42318; }
  .sch-month { margin-top: 16px; } .sch-month summary { cursor: pointer; margin-bottom: 12px; font-weight: 600; }
  .sch-month > label { display: block; margin-bottom: 10px; } .sch-note { font-size: 12px; color: #64748b; margin-bottom: 0; }
  .modal-card.sch-modal { width: min(880px,calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: hidden; }
  .sch-modal #entity-modal-body { overflow: auto; min-height: 0; }
  .sch-modal #sch-form { display: flex; flex-direction: column; max-height: calc(100dvh - 175px); }
  .sch-form-content { padding: 3px; overflow: auto; display: grid; gap: 12px; }
  .sch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .sch-members { max-height: 150px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sch-members label { font-size: 12px; } .sch-form-content fieldset { padding: 10px; border: 1px solid #dbe3ed; border-radius: 8px; }
  .sch-form-footer { display: flex; flex-shrink: 0; gap: 8px; justify-content: flex-end; padding-top: 12px; border-top: 1px solid #e2e8f0; background: white; }
  @media (max-width: 600px) { .sch-grid, .sch-members { grid-template-columns: 1fr; } .scheduler-workspace { padding: 10px; } }
  /* Automation module: three panels, compact desktop workspace and explicit action colors. */
  .automation-tab-panel[hidden] { display: none !important; }
  .automation-subtabs { display: flex; gap: 6px; padding: 5px; margin: 14px 0 18px; width: fit-content; max-width: 100%; border: 1px solid #dce5f1; border-radius: 12px; background: #edf2f8; }
  .automation-subtabs [role="tab"] { display: flex; align-items: center; gap: 9px; padding: 11px 22px; border-radius: 9px; color: #53647b; font-weight: 700; font-size: 14px; background: transparent; cursor: pointer; white-space: nowrap; }
  .automation-subtabs [aria-selected="true"] { background: white; color: #1d4ed8; box-shadow: 0 2px 7px #0f172a12; }
  .automation-subtabs [role="tab"]:hover { color: #1d4ed8; }
  .automation-panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  .automation-panel-heading h3 { margin: 0; } .automation-panel-heading p { margin: 4px 0 0; font-size: 13px; color: #64748b; }
  #default-tasks-section { min-width: 0; }
  #default-tasks-section .scheduler-workspace { padding: 0; margin: 0; border: 0; background: transparent; }
  .sch-layout { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 18px; align-items: start; }
  .sch-group-panel, .sch-plan-panel { min-width: 0; background: white; border: 1px solid #e0e7f0; border-radius: 15px; padding: 18px; box-shadow: 0 4px 20px #0f172a04; }
  .sch-toolbar { align-items: center; gap: 12px; margin-bottom: 12px; }
  .sch-toolbar h3 { font-size: 17px; color: #1e293b; }
  .sch-toolbar .eyebrow { font-size: 10px; letter-spacing: .08em; margin-bottom: 4px; }
  .sch-group-panel .sch-toolbar { align-items: start; }
  .sch-group-panel .sch-groups { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
  .sch-groups article { padding: 13px; border-radius: 12px; background: #f8fafc; }
  .sch-group-title { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
  .sch-group-title > strong { font-size: 14px; overflow-wrap: anywhere; }
  .sch-group-title .sch-status { white-space: nowrap; font-size: 10px; padding: 3px 7px; }
  .sch-group-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .sch-button, .sch-modal .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 8px; padding: 9px 12px; font-size: 12px; font-weight: 650; line-height: 1.3; cursor: pointer; transition: filter .15s, box-shadow .15s; }
  .scheduler-workspace .sch-button { margin: 0; padding: 9px 12px; }
  .sch-button-blue, .sch-modal .btn-primary { background: #2563eb; color: white; border-color: #2563eb; }
  .sch-button-green { background: #15803d; color: white; border-color: #15803d; }
  .sch-button-violet { background: #6d28d9; color: white; border-color: #6d28d9; }
  .sch-button-amber { background: #fff4db; color: #92400e; border-color: #f4cf80; }
  .sch-button-slate, .sch-modal .btn-secondary { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
  .sch-button:hover:not(:disabled), .sch-modal .btn:hover:not(:disabled) { filter: brightness(.94); box-shadow: 0 2px 6px #0f172a14; }
  .sch-button:disabled, .sch-modal .btn:disabled { opacity: .45; cursor: default; }
  .sch-button:focus-visible, .automation-subtabs button:focus-visible, .auto-pager button:focus-visible, .auto-pager select:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
  .sch-week-controls { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 10px; }
  .sch-week-controls label, .sch-month > label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: #475569; }
  #sch-week, #sch-month { padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 7px; background: white; color: #1e293b; font-size: 13px; min-height: 35px; }
  .sch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .sch-counts { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0; }
  .sch-status { display: inline-flex; align-items: center; gap: 7px; border-radius: 6px; padding: 4px 8px; color: #475569; background: #edf2f7; font-size: 11px; }
  .sch-created { color: #166534; background: #dcfce7; }
  .sch-pending { color: #1d4ed8; background: #dbeafe; }
  .sch-future { color: #5b21b6; background: #ede9fe; }
  .sch-error, .sch-blocked { color: #b91c1c; background: #fee2e2; }
  .sch-skipped, .sch-paused { color: #92400e; background: #fef3c7; }
  .sch-table-wrap { max-height: none; }
  .sch-table { font-size: 12px; min-width: 720px; table-layout: fixed; }
  .sch-table th:first-child { width: 28%; }
  .sch-table th:nth-child(2) { width: 20%; }
  .sch-table th:nth-child(3) { width: 20%; }
  .sch-table th:nth-child(4) { width: 18%; }
  .sch-table th:last-child:nth-child(5) { width: 14%; }
  .sch-table td { overflow-wrap: anywhere; }
  .sch-table td, .sch-table th { padding: 10px 11px; }
  .sch-table tbody tr:hover { background: #f8fbff; }
  .sch-row-actions { display: flex; flex-wrap: wrap; gap: 5px; }
  .sch-row-actions .sch-button { font-size: 11px; padding: 6px 8px; }
  .sch-empty { text-align: center; padding: 24px; color: #64748b; }
  .sch-empty small { display: block; margin-top: 6px; }
  .sch-month { border-top: 1px solid #e2e8f0; padding-top: 14px; margin-top: 12px; }
  .sch-month summary { font-size: 13px; color: #334155; }
  .sch-month summary small { font-weight: 400; color: #64748b; margin-left: 8px; }
  .auto-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; color: #64748b; font-size: 12px; }
  .auto-pager label, .auto-pager > div { display: flex; align-items: center; gap: 6px; }
  .auto-pager select { border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 7px; color: #334155; background: white; }
  .auto-pager button { width: 30px; height: 30px; border: 1px solid #dbe3ed; border-radius: 6px; font-size: 17px; color: #1d4ed8; background: white; cursor: pointer; padding: 0; margin: 0; }
  .auto-pager button:hover:not(:disabled) { background: #eff6ff; border-color: #93c5fd; }
  .auto-pager button:disabled { color: #cbd5e1; background: #f8fafc; cursor: default; }
  .auto-pager > div > span { padding: 0 5px; }
  .sch-group-panel .auto-pager { justify-content: center; }
  #auto-panel-history .automation-history-item strong, #auto-panel-history .automation-history-item small { white-space: normal; overflow-wrap: anywhere; }
  #default-task-run-history[aria-busy="true"] { opacity: .5; }
  @media (min-width: 1600px) {
    .sch-layout { grid-template-columns: 330px minmax(0,1fr); gap: 20px; }
    .sch-group-panel, .sch-plan-panel { padding: 20px; }
    .sch-table { font-size: 13px; }
    .sch-table td, .sch-table th { padding: 10px 12px; }
    .sch-table-wrap { max-height: clamp(230px, calc(100dvh - 850px), 430px); }
    #default-tasks-section .automation-status-card { padding: 12px 16px; }
  }
  @media (max-width: 1199px) {
    .sch-layout { grid-template-columns: minmax(0,1fr); }
    .sch-group-panel .sch-groups { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
    .sch-group-panel .auto-pager { justify-content: space-between; }
  }
  @media (max-width: 600px) {
    .automation-subtabs { width: 100%; gap: 2px; }
    .automation-subtabs [role="tab"] { flex: 1; justify-content: center; padding: 9px 6px; font-size: 11px; gap: 5px; }
    .sch-group-panel, .sch-plan-panel { padding: 12px; }
    .sch-actions { width: 100%; } .sch-actions button { flex: 1; }
    .auto-pager { font-size: 11px; }
    .sch-month summary small { display: block; margin: 4px 0; }
  }
  /* Guided setup, schedule health and a multi-month project matrix. */
  .sch-operations[hidden], #sch-wizard [hidden] { display: none !important; }
  .sch-operations { display: flex; align-items: center; gap: 13px; padding: 13px 16px; margin: 12px 0; border: 1px solid #bbf7d0; border-radius: 12px; background: #f0fdf4; color: #166534; }
  .sch-operations.is-warning { border-color: #f5d68c; background: #fffbeb; color: #92400e; }
  .sch-operations > i { font-size: 20px; }
  .sch-operations > div { flex: 1; min-width: 0; }
  .sch-operations strong { font-size: 14px; }
  .sch-operations small { display: block; margin-top: 4px; font-size: 12px; }
  .sch-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; margin-bottom: 16px; border: 1px solid #dbeafe; border-radius: 12px; background: #f8fbff; }
  .sch-tools strong { font-size: 14px; color: #1e3a8a; }
  .sch-tools small { display: block; margin-top: 4px; font-size: 12px; color: #64748b; }
  .sch-tools > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
  .modal-card.sch-wizard-modal { width: min(980px,calc(100vw - 24px)); }
  .modal-card.sch-check-modal, .modal-card.sch-mapping-modal { width: min(1100px,calc(100vw - 24px)); }
  #sch-wizard { display: flex; flex-direction: column; max-height: calc(100dvh - 210px); min-height: 340px; }
  .sch-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; flex-shrink: 0; }
  .sch-steps li { display: flex; align-items: center; gap: 9px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 11px; background: #f8fafc; color: #64748b; font-size: 13px; font-weight: 600; }
  .sch-steps li > span { display: grid; place-items: center; width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%; background: #e2e8f0; color: #475569; }
  .sch-steps .is-current { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; }
  .sch-steps .is-current > span { background: #2563eb; color: white; }
  .sch-wizard-body { min-height: 0; overflow: auto; padding: 0 3px 14px; flex: 1; }
  .sch-wizard-body h4 { font-size: 17px; margin: 0 0 16px; color: #1e293b; }
  .sch-wizard-body .form-group { margin-bottom: 12px; }
  .sch-member-toolbar { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin: 0 0 10px; font-size: 12px; color: #1d4ed8; }
  .sch-wizard-members { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: min(350px,calc(100dvh - 500px)); min-height: 80px; overflow: auto; padding: 2px; }
  .sch-wizard-members label { display: flex; align-items: start; gap: 10px; padding: 11px; border: 1px solid #e2e8f0; border-radius: 9px; font-size: 13px; color: #334155; background: white; cursor: pointer; }
  .sch-wizard-members label:has(input:checked) { background: #eff6ff; border-color: #93c5fd; }
  .sch-wizard-members label:has(input:disabled) { opacity: .55; cursor: default; }
  .sch-wizard-members input { margin-top: 3px; accent-color: #2563eb; flex-shrink: 0; }
  .sch-wizard-members small { display: block; color: #64748b; margin-top: 5px; font-size: 11px; }
  .sch-inline-error { color: #b91c1c; font-size: 13px; padding: 0 3px; margin-bottom: 10px; flex-shrink: 0; }
  .sch-inline-error:empty { display: none; }
  .sch-publish-switch { display: flex; align-items: center; gap: 10px; padding: 12px; margin: 15px 0 8px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 9px; font-size: 14px; color: #166534; font-weight: 600; }
  .sch-publish-switch input { accent-color: #15803d; }
  .sch-check-result { padding: 12px 14px; margin: 0; font-size: 14px; font-weight: 650; border-radius: 9px; }
  .sch-check-result.is-ready { background: #dcfce7; color: #166534; }
  .sch-check-result.is-warning { background: #fef3c7; color: #92400e; }
  .sch-check-weeks { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
  .sch-check-weeks article { display: grid; gap: 8px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; color: #334155; font-size: 13px; }
  .sch-check-weeks small { color: #64748b; }
  .sch-issue-list { display: grid; gap: 8px; max-height: min(360px,calc(100dvh - 380px)); overflow: auto; }
  .sch-issue-list article { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px; border: 1px solid #f5d68c; background: #fffdf7; border-radius: 9px; }
  .sch-issue-list article > div { min-width: 0; }
  .sch-issue-list strong { font-size: 13px; font-weight: 600; color: #78350f; overflow-wrap: anywhere; }
  .sch-issue-list small { display: block; margin-top: 5px; font-size: 11px; color: #64748b; }
  .sch-issue-list button { white-space: nowrap; flex-shrink: 0; }
  .sch-preview-list { display: grid; gap: 7px; max-height: min(320px,calc(100dvh - 490px)); overflow: auto; margin-top: 12px; }
  .sch-preview-list > div { display: grid; gap: 5px; padding: 11px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 12px; color: #334155; }
  .sch-preview-list small { color: #64748b; }
  .sch-mapping-modal .sch-form-content { display: block; min-width: 0; }
  #sch-mapping-form { display: flex; flex-direction: column; min-width: 0; max-height: calc(100dvh - 215px); }
  .sch-mapping-toolbar { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
  .sch-mapping-toolbar .form-group { flex-shrink: 0; margin-bottom: 0; }
  .sch-mapping-table-wrap { overflow: auto; min-width: 0; min-height: 80px; flex: 1; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 12px; }
  .sch-mapping-table { border-collapse: collapse; width: 100%; min-width: 790px; table-layout: fixed; font-size: 13px; }
  .sch-mapping-table th { position: sticky; top: 0; background: #f1f5f9; color: #334155; z-index: 1; text-align: left; }
  .sch-mapping-table td, .sch-mapping-table th { padding: 12px; border-bottom: 1px solid #e2e8f0; }
  .sch-mapping-table th:first-child { width: 25%; }
  .sch-mapping-table td:first-child small { display: block; color: #64748b; margin-top: 6px; }
  .sch-mapping-table tr.is-highlighted td { background: #eff6ff; }
  .sch-mapping-table .form-control { width: 100%; min-width: 0; padding: 9px 7px; font-size: 12px; }
  @media (max-width: 600px) {
    .sch-operations { flex-wrap: wrap; }.sch-operations > div { flex-basis: 80%; }.sch-operations button { width: 100%; }
    .sch-tools > div:last-child { width: 100%; }.sch-tools button { flex: 1; }
    .sch-steps { gap: 4px; margin-bottom: 14px; }.sch-steps li { flex-direction: column; text-align: center; padding: 7px 3px; font-size: 10px; gap: 5px; }
    .sch-wizard-members { grid-template-columns: 1fr; max-height: 270px; }.sch-member-toolbar { flex-wrap: wrap; }
    #sch-wizard { max-height: calc(100dvh - 190px); min-height: 280px; }.sch-wizard-modal .sch-form-footer { flex-wrap: wrap; }.sch-wizard-modal .sch-form-footer button { flex: 1; }
    .sch-check-weeks { grid-template-columns: repeat(2,minmax(0,1fr)); }.sch-issue-list article { align-items: start; flex-direction: column; gap: 9px; }
    .sch-mapping-toolbar { flex-direction: column; align-items: start; gap: 8px; }.sch-preview-list { max-height: 240px; }
  }
  /* Content aggregation uses only task data already visible to the current user. */
  .content-site-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
  .content-site-card { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 94px; padding: 16px; border: 1px solid var(--content-brand-border, #e2e8f0); border-radius: 14px; background: var(--content-brand-soft, var(--surface)); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
  .content-site-card[data-content-site="all"] { --content-brand: #334155; --content-brand-border: #cbd5e1; --content-brand-accent: #64748b; --content-brand-soft: #f8fafc; }
  .content-site-card[data-content-site="maychuviet"] { --content-brand: #8b1e3f; --content-brand-border: #e9bcc9; --content-brand-accent: #a32a4f; --content-brand-soft: #fff1f4; }
  .content-site-card[data-content-site="product"] { --content-brand: #b54337; --content-brand-border: #f4c5bb; --content-brand-accent: #d46857; --content-brand-soft: #fff4ef; }
  .content-site-card[data-content-site="khoserver"] { --content-brand: #946200; --content-brand-border: #f0d77b; --content-brand-accent: #d4a017; --content-brand-soft: #fff9df; }
  .content-site-card[data-content-site="itnow"] { --content-brand: #1d4ed8; --content-brand-border: #bfdbfe; --content-brand-accent: #3b82f6; --content-brand-soft: #eff6ff; }
  .content-site-card[data-content-site="other"] { --content-brand: #475569; --content-brand-border: #d7dee7; --content-brand-accent: #64748b; --content-brand-soft: #f5f7fa; }
  .content-site-card[data-content-site="social"] { --content-brand: #7e22ce; --content-brand-border: #e0c7f4; --content-brand-accent: #a855f7; --content-brand-soft: #faf5ff; }
  .content-site-card[data-content-site="offpage"] { --content-brand: #0f766e; --content-brand-border: #a9ded7; --content-brand-accent: #14b8a6; --content-brand-soft: #effbf8; }
  .content-site-card:hover { border-color: var(--content-brand-accent, #93c5fd); background: var(--content-brand-soft, #f8fbff); }
  .content-site-card.selected { border-color: var(--content-brand-accent, #60a5fa); background: var(--content-brand-soft, #eff6ff); box-shadow: 0 0 0 1px var(--content-brand-accent, #60a5fa); }
  .content-site-card:focus-visible, .content-url:focus-visible, .content-detail-button:focus-visible, .content-pager button:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  .content-site-card > span:last-child { min-width: 0; }
  .content-site-card small { display: block; color: var(--content-brand, #475569); font-size: 12px; font-weight: 650; line-height: 1.4; }
  .content-site-card strong { display: block; margin-top: 4px; color: var(--content-brand, #0f172a); font-size: 29px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
  .content-site-icon { display: grid; place-items: center; flex-shrink: 0; width: 35px; height: 35px; border-radius: 10px; font-size: 15px; }
  .content-site-icon.blue { color: #2563eb; background: #dbeafe; }
  .content-site-icon.maychuviet { color: #8b1e3f; background: #f9dce5; }
  .content-site-icon.product { color: #b54337; background: #ffe2d8; }
  .content-site-icon.khoserver { color: #946200; background: #fef08a; }
  .content-site-icon.itnow { color: #1d4ed8; background: #dbeafe; }
  .content-site-icon.other { color: #475569; background: #e2e8f0; }
  .content-site-icon.social { color: #7e22ce; background: #f0ddff; }
  .content-site-icon.offpage { color: #0f766e; background: #ccf3e9; }
  .content-filter-bar { display: grid; grid-template-columns: minmax(150px,1.1fr) minmax(130px,1fr) minmax(140px,1fr) auto auto; align-items: center; gap: 8px; padding: 10px; }
  .content-filter-bar .search-box { min-width: 0; width: 100%; }
  .content-filter-bar .search-box input, .content-filter-bar .form-control, .content-filter-bar > .secondary-button { min-height: 38px; font-size: 12px; }
  .content-filter-bar .search-box input { padding: 8px 9px 8px 30px; }
  .content-filter-bar .search-box i { left: 10px; font-size: 12px; }
  .content-filter-bar > .form-control.compact { width: 100%; min-width: 0; padding: 8px; }
  .content-date-filter { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .content-date-filter .date-filter-field { min-width: 0; margin: 0; gap: 5px; font-size: 11px; }
  .content-date-filter .date-filter-field .form-control { width: 126px; min-width: 0; padding: 7px; }
  .content-filter-bar > .secondary-button { min-width: 0; margin: 0; padding: 8px 10px; gap: 5px; white-space: nowrap; }
  .content-table-card { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; background: var(--surface); }
  .content-table-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px 18px; border-bottom: 1px solid #e2e8f0; }
  .content-table-heading h4 { margin: 0; color: #1e293b; font-size: 15px; font-weight: 750; }
  .content-table-scroll { max-height: 60vh; overflow: auto; }
  .content-table { width: 100%; min-width: 0; table-layout: fixed; }
  .content-table th { position: sticky; top: 0; z-index: 1; }
  .content-table th:nth-child(1) { width: 18%; }
  .content-table th:nth-child(2) { width: 42%; }
  .content-table th:nth-child(3) { width: 12%; }
  .content-table th:nth-child(4) { width: 16%; }
  .content-table th:nth-child(5) { width: 12%; }
  .content-table td { min-width: 0; vertical-align: middle; overflow: hidden; overflow-wrap: anywhere; }
  .content-url { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; color: #2563eb; font-weight: 600; line-height: 1.7; white-space: nowrap; }
  .content-url-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .content-url:hover { color: #1d4ed8; text-decoration: underline; }
  .content-url i { flex: 0 0 auto; font-size: 10px; }
  .content-site-badge { display: inline-block; max-width: 100%; overflow: hidden; padding: 4px 7px; border-radius: 6px; color: #475569; background: #f1f5f9; font-size: 11px; font-weight: 700; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; }
  .content-site-maychuviet { color: #8b1e3f; background: #f9dce5; }
  .content-site-product { color: #b54337; background: #ffe2d8; }
  .content-site-khoserver { color: #946200; background: #fef08a; }
  .content-site-itnow { color: #1d4ed8; background: #dbeafe; }
  .content-site-other { color: #475569; background: #e2e8f0; }
  .content-site-social { color: #7e22ce; background: #f0ddff; }
  .content-site-offpage { color: #0f766e; background: #ccf3e9; }
  .content-source-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .content-source-item { line-height: 1.6; }
  .content-detail-button { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 13px; border: 1px solid #bfdbfe; border-radius: 7px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; }
  .content-detail-button:hover { border-color: #93c5fd; background: #dbeafe; }
  .content-task-modal #entity-modal-body { flex-direction: column; }
  .content-source-picker { flex: 0 0 auto; min-width: 0; margin-top: .65rem; }
  .content-table .empty-row td { padding: 35px 20px; color: #64748b; text-align: center; line-height: 1.8; }
  .content-pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 18px; border-top: 1px solid #e2e8f0; color: #64748b; font-size: 12px; }
  .content-pager label, .content-pager > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .content-pager button, .content-pager select { min-height: 34px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 5px 10px; color: #334155; background: white; }
  .content-pager button:disabled { opacity: .4; cursor: default; }
  .content-pager button:not(:disabled):hover { border-color: #93c5fd; background: #eff6ff; }
  @media (max-width: 1279px) {
    .content-site-card { padding: 14px 12px; gap: 9px; }
    .content-filter-bar { grid-template-columns: minmax(0,1.1fr) repeat(2,minmax(0,1fr)); }
    .content-date-filter { grid-column: 1 / 3; }
    .content-filter-bar > .secondary-button { justify-self: end; }
    .content-table th, .content-table td { padding: 12px 10px; }
  }
  @media (min-width: 901px) and (max-width: 1000px), (max-width: 820px) {
    .content-site-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  }
  @media (min-width: 681px) and (max-width: 820px) {
    .content-table-scroll { max-height: 60vh; overflow: auto; }
    .content-table { display: table; table-layout: fixed; }
    .content-table thead { display: table-header-group; }
    .content-table tbody { display: table-row-group; width: auto; }
    .content-table tr, .content-table .empty-row { display: table-row; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .content-table td, .content-table .empty-row td { display: table-cell; border-top: 0; }
    .content-table td:nth-child(even) { border-left: 0; }
    .content-table td::before { display: none; content: none; }
  }
  @media (max-width: 680px) {
    .content-site-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    .content-site-card { min-height: 80px; padding: 13px 11px; gap: 9px; }
    .content-site-card strong { font-size: 25px; }
    .content-site-icon { width: 29px; height: 29px; font-size: 12px; }
    .content-filter-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .content-filter-bar .search-box { grid-column: 1 / -1; }
    .content-filter-bar .search-box input, .content-filter-bar .form-control, .content-filter-bar > .secondary-button { min-height: 42px; }
    .content-date-filter { grid-column: 1 / -1; width: 100%; }
    .content-date-filter .date-filter-field { flex: 1; }
    .content-date-filter .date-filter-field .form-control { width: 100%; }
    .content-filter-bar > .secondary-button { grid-column: 1 / -1; justify-self: end; }
    .content-table-scroll { max-height: none; overflow: hidden; padding: 10px; }
    .content-table { display: block; table-layout: fixed; }
    .content-table tbody { display: grid; gap: 10px; }
    .content-table tr { grid-template-columns: repeat(2,minmax(0,1fr)); box-shadow: none; }
    .content-table td { display: block; padding: 10px 12px; border-left: 0 !important; }
    .content-table td::before { display: block; margin-bottom: 4px; }
    .content-table td:first-child { display: grid; grid-template-columns: auto minmax(0,1fr); grid-column: 1 / -1; border-top: 0; background: #f8fafc; font-size: 12px; }
    .content-table td:first-child::before { margin: 0; }
    .content-table td:nth-child(2) { grid-column: 1 / -1; }
    .content-table td:nth-child(2)::before { display: none; }
    .content-table td:last-child { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 10px; }
    .content-table td:last-child::before { margin: 0; }
    .content-table .empty-row td { padding: 24px 14px; }
    .content-detail-button { min-height: 38px; padding-inline: 16px; }
    .content-pager { padding: 12px; gap: 10px; }
    .content-pager > div { width: 100%; justify-content: center; }
  }
  @media (max-width: 380px) {
    .content-site-card { padding: 12px 9px; gap: 7px; }
    .content-site-icon { width: 26px; height: 26px; }
  }