/* ---- Summary card grid overrides ---- */
#tasks-summary.cards,
#reviews-summary.cards,
#vouchers-summary.cards,
#reconciliation-summary.cards,
#reconciliation-stats-summary.cards,
#wecom-admin-summary-cards.cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---- Sticky matrix totals ---- */
.matrix-total-row td {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 91 !important;
  background: #f5f7fa !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  border-top: 2px solid #dce3ec !important;
}

/* ---- Mobile matrix card styles ---- */
.mobile-matrix-card input:focus,
.mobile-matrix-card select:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.mobile-matrix-card .matrix-cell-input:invalid,
.mobile-matrix-card .matrix-total-input:invalid {
  border-color: var(--danger);
}

/* ===== @media (max-width: 1080px) ===== */
@media (max-width: 1080px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .layout.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar {
    padding: 12px;
    border-right: 0;
  }

  .brand {
    border-bottom: 0;
    padding-bottom: 8px;
  }

  .layout.sidebar-collapsed .brand-copy,
  .layout.sidebar-collapsed .menu-item-label,
  .layout.sidebar-collapsed .sidebar-caption {
    display: initial;
  }

  .layout.sidebar-collapsed .menu-item {
    display: flex;
    min-height: auto;
    padding: 10px 12px;
  }

  .layout.sidebar-collapsed .menu-item::before {
    content: none;
  }

  .menu {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
  }

  .menu-group {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .menu-item {
    white-space: nowrap;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-hero {
    align-items: flex-start;
  }

  .grid-two,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .allocation-toolbar-grid,
  .allocation-control-grid {
    grid-template-columns: 1fr;
  }

  .permission-grid {
    grid-template-columns: 1fr;
  }

  .modal-card {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 16px;
  }

  .task-form-toolbar label,
  .allocation-input {
    width: 100%;
  }

  .toast {
    left: 16px;
    top: 84px;
    max-width: calc(100vw - 32px);
  }

  .reconciliation-matrix-summary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== @media (max-width: 767px) ===== */
@media (max-width: 767px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .layout.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    flex-direction: row;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    gap: 4px;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .brand {
    display: none;
  }

  .sidebar-caption {
    display: none;
  }

  .menu {
    flex-direction: row;
    width: 100%;
    gap: 4px;
  }

  .menu-group {
    display: flex;
    flex-direction: row;
    gap: 4px;
    flex: 1;
  }

  .menu-item {
    flex: 1;
    min-width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 10px;
    color: #86909c;
    transition: color 0.15s, background 0.15s;
  }

  .menu-item.active {
    color: #07c160;
    background: rgba(7, 193, 96, 0.08);
    font-weight: 600;
  }

  .menu-item-icon {
    font-size: 20px;
    font-weight: 700;
  }

  .menu-item-label {
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .menu-item:hover {
    transform: none;
  }

  .menu-item:not([data-section="allocation-board"]):not([data-section="dashboard"]):not([data-section="task-center"]):not([data-section="bank-cards"]) {
    display: none !important;
  }

  .content {
    padding: 16px 12px calc(80px + env(safe-area-inset-bottom));
  }

  #dashboard-cards {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  #reviews-summary.cards,
  #vouchers-summary.cards,
  #tasks-summary.cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card {
    min-height: 110px;
    padding: 14px 14px;
  }

  .stat-card .stat-value {
    font-size: 22px;
    margin-top: 0;
    word-break: break-all;
  }

  .stat-card .stat-note {
    font-size: 11px;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .topbar h1 {
    font-size: 22px;
  }

  .toast {
    left: 12px;
    top: 72px;
    max-width: calc(100vw - 24px);
  }

  .reconciliation-matrix-summary-row {
    grid-template-columns: 1fr;
  }

  .topbar-right {
    width: 100%;
    justify-content: space-between;
  }

  button,
  .button {
    min-height: 44px;
    font-size: 14px;
  }

  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
    padding: 0 12px;
  }

  #subtask-edit-modal .modal-card {
    width: calc(100vw - 48px);
    padding: 16px;
  }

  #subtask-edit-modal input,
  #subtask-edit-modal select,
  #subtask-edit-modal textarea {
    min-height: 36px;
    font-size: 14px;
    padding: 0 10px;
  }

  #subtask-voucher-preview img {
    max-height: 120px;
  }

  textarea {
    padding: 12px;
  }

  .section-card {
    padding: 14px;
    border-radius: 12px;
  }

  .modal-card {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    margin: 12px;
    border-radius: 16px;
  }

  .modal-header {
    padding: 16px;
  }

  .mobile-subtask-list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
  }

  .mobile-subtask-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    display: grid;
    gap: 10px;
    box-shadow: var(--shadow-sm);
  }

  .mobile-subtask-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-subtask-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }

  .voucher-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    height: 32px;
    border-radius: 6px;
    background: var(--primary);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  .modal-body {
    padding: 16px;
    max-height: calc(100vh - 180px);
  }

  .modal-footer {
    padding: 12px 16px;
    gap: 8px;
  }

  .modal-footer button {
    flex: 1;
  }

  .login-screen {
    padding: 0;
    grid-template-columns: 1fr;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(7, 193, 96, 0.12), transparent 60%),
      linear-gradient(180deg, #f0f6f3 0%, #e8efeb 100%);
  }

  .login-hero-panel {
    display: none;
  }

  .login-card {
    width: 100%;
    max-width: 100%;
    align-self: auto;
    max-height: none;
    padding: 60px 0 0;
    border-radius: 0;
    border: none;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .login-card-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 22px 12px;
    background:
      radial-gradient(ellipse at 0% 0%, rgba(7, 193, 96, 0.06), transparent 60%),
      linear-gradient(135deg, #f6fbf8 0%, #edf4f0 100%);
    text-align: center;
  }

  .login-card-brand-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #07c160 0%, #059a4e 100%);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .login-card-brand-title {
    font-size: 17px;
    font-weight: 700;
    color: #1f2329;
  }

  .login-card-brand-sub {
    display: none;
  }

  .login-card-divider {
    display: none;
  }

  .login-card h2 {
    display: none;
  }

  .login-card p {
    display: none;
  }

  .login-card label {
    margin: 0 20px;
  }

  .login-card label:first-of-type {
    margin-top: 20px;
  }

  .login-card > button.primary {
    margin: 14px 20px 20px;
    width: auto;
    height: 46px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
  }

  .login-card > .login-error,
  .login-card > .login-notice {
    margin: 0 20px;
  }

  .login-card input {
    height: 46px;
    font-size: 16px;
  }

  .login-card .code-row button {
    min-width: 96px;
    font-size: 14px;
  }

  #task-center .data-table-wrapper {
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  #task-center #tasks-table {
    display: grid;
    gap: 12px;
  }

  #task-center #tasks-table thead {
    display: none;
  }

  #task-center #tasks-table tbody {
    display: grid;
    gap: 12px;
  }

  #task-center #reviews-table,
  #task-center #vouchers-table {
    display: block !important;
    width: 100%;
  }

  #task-center #reviews-table thead,
  #task-center #vouchers-table thead {
    display: none;
  }

  #task-center .mobile-review-card,
  #task-center .mobile-voucher-card {
    border-bottom: 2px solid #e5e7eb;
    padding: 16px 0;
  }

  #task-center .mobile-voucher-card:first-child {
    padding-top: 0;
  }

  #task-center .mobile-voucher-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  #vouchers-panel {
    position: relative;
  }

  .mobile-voucher-total {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 10px 14px;
    margin: 0 0 8px;
    background: #e8f5ee;
    border: 1px solid rgba(7, 193, 96, 0.15);
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .mobile-voucher-total strong {
    font-size: 20px;
    color: #07c160;
  }

  #task-center .split-view {
    display: block;
  }

  #task-center .panel {
    margin-bottom: 16px;
  }

  #allocation-board .allocation-board-modern {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
    position: relative;
  }

  #allocation-board .allocation-board-modern::after {
    content: "← 左右滑动编辑更多 →";
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    padding: 8px 0;
    background: #f8fbfa;
    border-top: 1px solid var(--border);
  }

  #allocation-board .matrix-table {
    min-width: 800px;
    font-size: 12px;
  }

  #allocation-board .matrix-table th,
  #allocation-board .matrix-table td {
    padding: 8px 6px;
  }

  #allocation-board .actions-group {
    flex-wrap: wrap;
    gap: 8px;
  }

  #allocation-board .actions-group button {
    flex: 1 1 calc(50% - 4px);
    min-width: 140px;
  }

  .mobile-task-list {
    display: grid;
    gap: 12px;
  }

  .mobile-task-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 14px 0;
    display: grid;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .mobile-task-card:last-child {
    border-bottom: none;
  }

  .mobile-task-card:active {
    transform: scale(0.98);
  }

  .mobile-task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-task-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
  }

  .mobile-task-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
  }

  .mobile-task-amount {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
  }

  .mobile-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
  }

  .mobile-task-progress {
    margin-top: 4px;
  }

  .mobile-progress-bar {
    height: 6px;
    background: var(--bg-strong);
    border-radius: 999px;
    overflow: hidden;
  }

  .mobile-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--success) 100%);
    border-radius: 999px;
    transition: width 0.3s;
  }

  .mobile-task-card.selected {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }

  .mobile-inline-detail {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    animation: fadeIn 0.3s ease-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }

  #allocation-board .allocation-config-bar {
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--surface-muted, #f6f7fa);
    border-radius: 10px;
    margin-bottom: 10px;
  }

  #allocation-board .config-group {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }

  #allocation-board .config-group label {
    flex: 1;
    min-width: 0;
    font-size: 12px;
  }

  #allocation-board .config-group label input,
  #allocation-board .config-group label select {
    width: 100%;
    min-height: 38px;
    font-size: 14px;
    margin-top: 2px;
  }

  #allocation-board .config-spacer {
    display: none;
  }

  #allocation-board #matrix-summary {
    width: 100%;
    text-align: left;
    font-size: 12px;
    padding: 4px 0;
  }

  #allocation-board .config-group:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
  }

  #allocation-board .config-group:nth-child(2) label {
    flex: 0 0 100%;
  }

  #allocation-board .config-group:nth-child(2) button {
    flex: 1;
    min-width: 0;
    height: 36px;
    font-size: 12px;
    padding: 0 8px;
  }

  #allocation-board .allocation-actions-bar {
    display: none;
  }

  #allocation-board .allocation-config-bar {
    padding: 8px 10px;
    gap: 6px;
  }

  #allocation-board .config-group:nth-child(2) button {
    height: 32px;
    font-size: 11px;
    padding: 0 6px;
  }

  #allocation-board #matrix-summary {
    font-size: 11px;
    padding: 2px 0;
    gap: 4px;
  }
  #allocation-board #matrix-summary .allocation-chip {
    font-size: 10px;
    padding: 2px 6px;
  }

  .mobile-matrix-editor {
    margin-top: 4px;
  }

  .mobile-matrix-editor input:focus,
  .mobile-matrix-editor select:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
  }

  .mobile-matrix-editor > div:nth-child(3) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .mobile-matrix-editor > div:nth-child(3) button {
    height: 40px;
    font-size: 13px;
    margin: 0;
  }
  .mobile-matrix-editor > div:nth-child(3) button:last-child {
    grid-column: 1 / -1;
    height: 44px;
    font-size: 15px;
  }

  #mobile-inline-footer {
    padding: 6px 10px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  #mobile-inline-footer div div:first-child {
    font-size: 10px !important;
  }
  #mobile-inline-footer div div:last-child {
    font-size: 13px !important;
  }

  #task-center .compact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px;
    padding: 8px;
    margin-bottom: 10px !important;
    border-radius: 10px;
  }

  #task-center .compact-form label {
    gap: 3px;
    min-width: 0;
    font-size: 11px;
    line-height: 1.3;
  }

  #task-filter-form label:first-child,
  #review-filter-form label:first-child,
  #voucher-filter-form label:nth-child(4) {
    grid-column: 1 / -1;
  }

  #task-center .compact-form label input,
  #task-center .compact-form label select {
    height: 32px;
    min-height: 32px;
    padding: 0 8px;
    font-size: 13px;
    margin-top: 0;
    border-radius: 7px;
  }

  #task-center .compact-form .actions-group {
    display: flex;
    grid-column: 1 / -1;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #task-center .compact-form .actions-group button {
    flex: 1;
    height: 34px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 13px;
  }

  #task-center .compact-form label select {
    min-height: 32px;
    font-size: 13px;
  }

  #task-center .compact-form label div[style*="flex"] {
    gap: 2px !important;
  }

  #task-center .compact-form label div[style*="flex"] select {
    padding: 4px 2px;
    font-size: 11px;
    min-height: 30px;
    height: 30px;
  }

  #task-center .compact-form label div[style*="flex"] {
    font-size: 11px;
  }

  #task-center .panel-title .panel-subtitle {
    display: none;
  }

  #task-center .panel {
    padding: 12px;
  }

  #task-center .panel-title {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  #task-center .panel-title .actions-group {
    width: 100%;
  }

  #task-center .panel-title .actions-group button {
    flex: 1;
  }

  #task-center .card[style*="padding:16px"] > div[style*="grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  #task-center .subtask-status-edit {
    min-height: 38px;
    font-size: 14px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
  }

  #task-center .mobile-subtask-actions button,
  #task-center .mobile-subtask-actions label,
  #task-center .voucher-upload-btn {
    min-height: 38px;
    height: 38px;
    font-size: 13px;
  }

  #manual-task-modal .modal-card {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  #manual-task-modal form {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 16px;
  }

  #manual-task-modal .manual-allocation-row {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px;
    background: var(--surface-muted, #f6f7fa);
    border-radius: 8px;
  }

  #manual-task-modal .manual-allocation-row label {
    width: 100%;
    min-width: 0 !important;
    flex: none !important;
  }

  #manual-task-modal .manual-allocation-row label select,
  #manual-task-modal .manual-allocation-row label input {
    width: 100%;
    min-height: 38px;
    font-size: 14px;
    margin-top: 2px;
  }

  #manual-task-modal .manual-allocation-row button {
    width: 100%;
    height: 38px;
  }
}

/* ===== @media (max-width: 420px) ===== */
@media (max-width: 420px) {
  .content {
    padding: 12px 10px calc(76px + env(safe-area-inset-bottom));
  }

  .topbar h1 {
    font-size: 20px;
  }

  .menu-item {
    min-width: 52px;
    font-size: 10px;
    padding: 6px 2px;
  }

  .menu-item-icon {
    font-size: 16px;
  }

  .mobile-task-amount {
    font-size: 22px;
  }

  button,
  .button {
    font-size: 13px;
  }
}