/* Shared tab-page layout, headers, controls, and list patterns */

.app-page {
  display: block;
  min-height: 100%;
  padding: var(--app-page-padding-y) var(--app-page-padding-x);
  padding-bottom: var(--app-page-padding-y);
  background: var(--app-page-bg);
  color: var(--semantic-text, var(--text));
  font-family: inherit;
}

.app-page--tab-bar {
  padding-bottom: calc(var(--app-page-tab-offset) + var(--app-page-padding-y));
}

.app-page--muted-bg {
  background: var(--app-page-bg-muted);
}

.app-page--compact-bottom {
  padding-bottom: var(--app-page-padding-y);
}

.app-page__inner {
  max-width: var(--app-page-max-width);
  margin: 0 auto;
}

/* Header with optional icon (my, orders, ticket) */
.app-page__header {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  color: var(--semantic-primary, var(--primary));
}

.app-page__header > mat-icon {
  color: var(--semantic-accent, var(--accent));
  font-size: 24px;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  flex-shrink: 0;
}

.app-page__header h1 {
  margin: 0;
  font-size: var(--app-title-size);
  font-weight: var(--app-title-weight);
  line-height: 1.3;
  color: var(--semantic-primary, var(--primary));
}

.app-page__header p {
  margin: 6px 0 0;
  font-size: var(--app-subtitle-size);
  line-height: 1.6;
  color: var(--semantic-text-muted, rgba(26, 26, 26, 0.65));
}

/* Simple head block (more, profile, reports) */
.app-page__head {
  margin-bottom: 16px;
}

.app-page__head h1 {
  margin: 0 0 6px;
  font-size: var(--app-title-size);
  font-weight: var(--app-title-weight);
  color: var(--semantic-primary, var(--primary));
}

.app-page__head p {
  margin: 0;
  font-size: var(--app-subtitle-size);
  line-height: 1.6;
  color: var(--semantic-text-muted, rgba(26, 26, 26, 0.65));
}

.app-page__head p:not(:last-child) {
  margin-bottom: 20px;
}

/* Empty state */
.app-empty {
  padding: 3rem 1rem;
  text-align: center;
}

.app-empty mat-icon,
.app-empty__icon {
  font-size: 56px;
  width: 56px;
  height: 56px;
  color: var(--semantic-accent, var(--accent));
  margin-bottom: 0.5rem;
}

.app-empty strong {
  display: block;
  margin-bottom: 6px;
  color: var(--semantic-primary, var(--primary));
}

/* Filter chips row */
.app-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Primary / secondary action buttons for list pages */
.app-btn-action {
  background-color: var(--semantic-primary, var(--primary));
  color: #fff;
  border-radius: var(--app-chip-radius);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.6rem 0.95rem;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.2);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.app-btn-action:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.app-btn-action:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.app-btn-action--accent {
  background-color: var(--semantic-accent, var(--accent));
  border-color: rgba(var(--primary-rgb), 0.18);
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.12);
}

.app-btn-outline {
  background-color: transparent;
  border-radius: var(--app-chip-radius);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  color: rgba(var(--primary-rgb), 0.88);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.5rem 0.85rem;
  box-shadow: 0 3px 8px rgba(var(--primary-rgb), 0.1);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.app-btn-outline:hover:not(:disabled) {
  background-color: rgba(var(--primary-rgb), 0.06);
  box-shadow: 0 5px 12px rgba(var(--primary-rgb), 0.14);
}

.app-btn-outline.active,
.app-btn-outline--active {
  background-color: var(--semantic-primary, var(--primary));
  color: #fff;
  border-color: rgba(var(--primary-rgb), 0.35);
}

.app-btn-outline:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* List card base */
.app-list-card {
  background-color: var(--semantic-surface, #fff);
  border-radius: var(--app-control-radius);
  padding: 1rem;
  box-shadow: var(--app-shadow-card);
  border: 1px solid var(--app-border);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Compact interactive task row (notifications) */
.app-task-card {
  background: var(--semantic-surface, #fff);
  border-radius: var(--app-control-radius);
  padding: 0.7rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid var(--app-border);
  box-shadow: 0 1px 3px rgba(var(--primary-rgb), 0.06);
  cursor: pointer;
  transition: filter 0.1s ease, box-shadow 0.2s ease;
  outline: none;
}

.app-task-card:hover,
.app-task-card:focus-visible {
  filter: brightness(1.03);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.1);
}

.app-task-card--scan {
  border-color: rgba(var(--primary-light-rgb), 0.18);
  box-shadow: 0 2px 8px rgba(var(--primary-light-rgb), 0.08);
}

.app-task-card--danger {
  border-color: rgba(var(--danger-rgb), 0.22);
  box-shadow: 0 2px 8px rgba(var(--danger-rgb), 0.08);
  background: rgba(var(--danger-rgb), 0.04);
}

.app-task-card--danger:hover,
.app-task-card--danger:focus-visible {
  background: rgba(var(--danger-rgb), 0.07);
  box-shadow: 0 2px 10px rgba(var(--danger-rgb), 0.12);
}

/* Menu list item (more page) */
.app-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-control-radius);
  background: var(--semantic-surface, #fff);
  color: var(--semantic-primary, var(--primary));
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: start;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.app-menu-item:hover {
  background: rgba(var(--primary-rgb), 0.03);
  border-color: var(--app-border-strong);
}

.app-menu-item > mat-icon:first-child {
  color: var(--semantic-accent, var(--accent));
}

.app-menu-item__label {
  flex: 1;
}

.app-menu-item__chevron {
  color: var(--semantic-text-muted, rgba(26, 26, 26, 0.65)) !important;
  opacity: 0.6;
}

/* Surface panel (profile status, settings groups) */
.app-surface-panel {
  background: var(--semantic-surface, #fff);
  border-radius: var(--app-control-radius);
  border: 1px solid var(--app-border);
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.04);
}

/* Date pill (notifications) */
.app-date-pill {
  text-align: center;
  background: var(--semantic-surface, #fff);
  border-radius: var(--app-chip-radius);
  padding: 0.4rem 1rem;
  font-weight: 600;
  color: var(--semantic-primary, var(--primary));
  box-shadow: inset 0 0 4px rgba(var(--shadow-rgb), 0.08);
}

/* Skeleton shimmer */
@keyframes app-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.app-skeleton-block {
  background: linear-gradient(
    90deg,
    rgba(var(--primary-rgb), 0.06) 0%,
    rgba(var(--primary-rgb), 0.14) 50%,
    rgba(var(--primary-rgb), 0.06) 100%
  );
  background-size: 200% 100%;
  animation: app-skeleton-shimmer 1.2s infinite;
}

@media (max-width: 420px) {
  .app-page__head h1,
  .app-page__header h1 {
    font-size: 22px;
  }
}

/* Shared list-card internals (my, orders, ticket) */
.app-list-card .left-side {
  flex: 1;
  min-width: 0;
}

.app-list-card .right-side {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.app-list-card-header,
.routine-card-header,
.order-card-header,
.ticket-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.routine-title,
.order-title,
.ticket-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--semantic-primary, var(--primary));
  line-height: 1.5;
  word-break: break-word;
}

.routine-summary,
.order-summary,
.ticket-summary {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  font-size: 0.82rem;
  color: rgba(var(--text-rgb), 0.85);
}

.summary-row mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--semantic-accent, var(--accent));
}

.summary-label {
  font-weight: 600;
  color: var(--semantic-primary, var(--primary));
}

.summary-value {
  margin-inline-start: auto;
  color: rgba(var(--text-rgb), 0.88);
}

.summary-value--price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--semantic-primary, var(--primary));
}

.routine-more-toggle,
.order-more-toggle,
.ticket-more-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.45rem 0.75rem;
  border: none;
  border-radius: var(--app-chip-radius);
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--semantic-primary, var(--primary));
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.routine-more-toggle:hover,
.order-more-toggle:hover,
.ticket-more-toggle:hover {
  background: rgba(var(--primary-rgb), 0.1);
}

.routine-more-toggle mat-icon,
.order-more-toggle mat-icon,
.ticket-more-toggle mat-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.status-badge {
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.42rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-badge mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 1;
}

.status-badge.active,
.status-badge.open {
  background: rgba(var(--primary-rgb), 0.1);
  border-color: rgba(var(--primary-rgb), 0.18);
  color: var(--semantic-primary, var(--primary));
}

.status-badge.inactive {
  background: rgba(var(--secondary-rgb), 0.12);
  border-color: rgba(var(--secondary-rgb), 0.18);
  color: var(--secondary);
}

.status-badge.closed {
  background: rgba(var(--danger-rgb), 0.1);
  border-color: rgba(var(--danger-rgb), 0.18);
  color: var(--danger);
}

.status-badge.expired {
  background: rgba(var(--danger-rgb), 0.1);
  border-color: rgba(var(--danger-rgb), 0.18);
  color: var(--danger);
}

.routine-details,
.order-details,
.ticket-details {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.65rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--app-border);
}

.detail-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  font-size: 0.8rem;
  color: rgba(var(--text-rgb), 0.85);
}

.detail-row mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--semantic-accent, var(--accent));
  margin-top: 2px;
}

.detail-label {
  font-weight: 600;
  color: var(--semantic-primary, var(--primary));
}

.detail-value {
  color: rgba(var(--text-rgb), 0.85);
}

.detail-value--text {
  flex: 1 1 100%;
  line-height: 1.6;
  white-space: pre-line;
}

.routine-list,
.orders-list,
.tickets-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.routine-actions,
.ticket-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0.15rem;
  border-top: 1px solid var(--app-border);
}

.routine-actions mat-icon,
.ticket-actions mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 1;
}

@media (max-width: 420px) {
  .app-list-card .right-side {
    width: 100%;
    justify-content: flex-start;
  }

  .routine-actions > button {
    width: 100%;
    justify-content: center;
  }
}