/* زمام على الويب: sign-in, the views' shared pieces (headers, task lists, project cards, search),
   forms and dialogs. The frame around them is in shell.css. Tokens only; logical properties only. */

/* ——— Loading and sign-in ——— */

.loading {
  padding: var(--space-8) var(--gutter);
  text-align: center;
}

.signin {
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.signin-card {
  inline-size: min(100%, calc(var(--space-11) * 10));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

.signin-logo {
  block-size: calc(var(--space-8) + var(--space-2));
  inline-size: auto;
}

/* Sign in with Apple and with Google: our own buttons, one above the other, the same size, corners
   and font. Their fills, strokes and text are Apple's and Google's (their branding guidelines), not
   Zimam's, so they are the one place colours are written here rather than taken from tokens.css. */
.signin-providers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  --apple-fill: #000000;
  --apple-ink: #ffffff;
  --apple-stroke: #000000;
  --google-fill: #ffffff;
  --google-ink: #1f1f1f;
  --google-stroke: #747775;
}

[data-theme="dark"] .signin-providers {
  --apple-fill: #ffffff;
  --apple-ink: #000000;
  --apple-stroke: #ffffff;
  --google-fill: #131314;
  --google-ink: #e3e3e3;
  --google-stroke: #8e918f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .signin-providers {
    --apple-fill: #ffffff;
    --apple-ink: #000000;
    --apple-stroke: #ffffff;
    --google-fill: #131314;
    --google-ink: #e3e3e3;
    --google-stroke: #8e918f;
  }
}

.provider-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: var(--space-11);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.provider-apple {
  background: var(--apple-fill);
  color: var(--apple-ink);
  border-color: var(--apple-stroke);
}

.provider-google {
  background: var(--google-fill);
  color: var(--google-ink);
  border-color: var(--google-stroke);
}

.provider-logo {
  inline-size: calc(var(--space-6) - var(--space-1));
  block-size: calc(var(--space-6) - var(--space-1));
  flex: none;
}

.provider-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Waiting for the server: the buttons keep their branding, dimmed, and cannot be pressed again. */
.provider-button:disabled {
  cursor: progress;
  opacity: var(--opacity-pressed);
}

.signin-home {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--space-11);
  color: var(--ink-muted);
}

.signin-error,
.app-error,
.field-error {
  color: var(--priority-high);
}

.signin-error:empty,
.app-error:empty,
.field-error:empty {
  display: none;
}

/* The frame (sidebar, tab bar, inspector) is in shell.css. */

/* ——— Views ——— */

.breadcrumb {
  margin-block-end: var(--space-1);
}

.back-link {
  padding-inline: var(--space-1) var(--space-2);
  gap: var(--space-1);
}

/* On wide screens the sidebar holds these (ProjectsView.swift's rows, the back links). */
.shell[data-layout="regular"] .compact-only {
  display: none;
}

/* «المخطط الزمني», «المصفوفة» and «صندوق المهام» at the top of «المشاريع» on phones. */
.overview-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0;
  margin-block-end: var(--space-6);
  list-style: none;
}

.overview-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--space-11);
  padding-inline: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink);
  text-decoration: none;
}

.overview-row > .zm-ico:first-child {
  color: var(--ink-muted);
}

.overview-row > .zm-ico:last-child {
  color: var(--ink-faint);
}

/* ScreenHeader (TaskListItem.swift): the large title with a quiet line under it. */
.view-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-end: var(--space-4);
}

/* Headings take focus on navigation so screen readers announce the view; they are not controls. */
.view-title:focus,
.view-title:focus-visible {
  outline: none;
}

/* EmptyLine (TaskListItem.swift): one quiet sentence where the list would be. */
.empty {
  padding-block: var(--space-2);
  color: var(--ink-muted);
}

.list-section + .list-section,
.list-section + .task-list,
.task-list + .done-section {
  margin-block-start: var(--space-8);
}

.section-title,
.day-heading {
  margin-block-end: var(--space-3);
}

.day-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
}

/* Each task is its own card, without separators (TaskListItem.swift: radius-lg on surface-raised,
   2pt apart); the open task's card is brand-soft. */
.task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
}

.task-list > .task-item > .zm-task {
  border-block-end: 0;
  border-radius: var(--radius-lg);
}

/* Completing: the circle fills, the row dims, then it leaves after a second. Fades only, so they
   stay with Reduce Motion, as the design asks (design/README.md «الحالات والحركة»). */
.task-item {
  transition: opacity var(--duration-complete) ease;
}

.task-item.is-leaving {
  opacity: 0;
}

.zm-task-title {
  transition: color var(--duration-complete) ease;
}

.zm-check {
  transition: background-color var(--duration-complete) ease, border-color var(--duration-complete) ease;
}

.zm-task {
  transition: background-color var(--duration-complete) ease;
}

/* The task title opens its details; it keeps the body style and grows to a 44px target. */
.zm-task-open {
  display: block;
  inline-size: 100%;
  margin-block: calc(var(--space-2) * -1);
  padding-block: var(--space-2);
  padding-inline: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.zm-task-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.done-section {
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--space-4);
}

.done-section > summary {
  display: list-item;
  padding-block: var(--space-2);
  min-block-size: var(--space-11);
  cursor: pointer;
  margin-block-end: var(--space-3);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr));
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

/* The whole card opens the project; the name is the link. */
.zm-project {
  position: relative;
  block-size: 100%;
}

.zm-project:hover {
  border-color: var(--line-strong);
}

.zm-project-link {
  color: var(--ink);
  text-decoration: none;
}

.zm-project-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.zm-project-head {
  min-block-size: var(--space-11);
  align-items: center;
}

.inbox-link {
  margin-block-start: var(--space-4);
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
}

/* The search field, with the magnifier at its inline start (.searchable in SearchView.swift). */
.search-row {
  position: relative;
  display: flex;
}

.search-row .input {
  flex: 1;
  padding-inline-start: calc(var(--space-3) + var(--space-6));
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border-color: transparent;
}

.search-icon {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--space-3);
  display: flex;
  align-items: center;
  color: var(--ink-muted);
  pointer-events: none;
}

.result-count {
  margin-block-end: var(--space-3);
}

/* ——— Forms ——— */

.input {
  inline-size: 100%;
  min-block-size: var(--space-11);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
}

.input[aria-invalid="true"] {
  border-color: var(--priority-high);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

legend {
  padding: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.group {
  gap: var(--space-2);
}

.group > legend {
  margin-block-end: var(--space-2);
}

.row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.prayer-offset {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.minutes {
  inline-size: calc(var(--space-11) * 2);
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--space-11);
  padding-inline: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  cursor: pointer;
}

.choice:has(input:checked) {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.choice input {
  margin: 0;
  inline-size: var(--space-4);
  block-size: var(--space-4);
}

/* ——— Dialogs ——— */

.sheet {
  inline-size: min(100% - 2 * var(--space-4), calc(var(--space-11) * 12));
  max-block-size: calc(100dvh - 2 * var(--space-4));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}

.sheet::backdrop {
  background: color-mix(in srgb, var(--surface-sunken) 80%, transparent);
}

.sheet-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.confirm-text {
  flex-basis: 100%;
}

.danger {
  color: var(--priority-high);
}

.task-dialog-title {
  overflow-wrap: anywhere;
}

.details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
}

.details .notes {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}