/* «ساعات يوم محدد» — js/day-hours.js, on the capacity screen.
   Colours from css/main.css tokens only; spacing follows the capacity
   screen's own day bar (14–16px rhythm, 10–12px radii). RTL by inheritance;
   times and dates are marked dir="ltr" in the markup so 16:00 reads 16:00. */

.bcap-dayhours { margin: 0 0 16px; }

.dh-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.dh-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.dh-scope {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-color);
  background: rgba(19, 181, 243, 0.1);
  border-radius: 999px;
  padding: 2px 10px;
}
.dh-subtitle {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.dh-hint, .dh-note {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.dh-current {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.dh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #f59e0b;
}

.dh-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
.dh-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.dh-field input {
  height: 40px;
  min-width: 120px;
  box-sizing: border-box;
  padding: 0 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color-scheme: dark;
}
.dh-field input:focus {
  outline: none;
  border-color: var(--accent-color);
}

.dh-btn {
  height: 40px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}
.dh-btn--primary {
  color: #0f1115;
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
}
.dh-btn--primary:disabled { opacity: 0.55; cursor: not-allowed; }
.dh-btn--ghost {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-color);
}
.dh-btn--ghost:hover { color: var(--error-color); border-color: rgba(255, 82, 82, 0.4); }
.dh-btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; }

.dh-error {
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.7;
  color: #fca5a5;
  background: rgba(255, 82, 82, 0.08);
  border: 1px solid rgba(255, 82, 82, 0.25);
  border-radius: 10px;
}
.dh-error p { margin: 0 0 6px; }
.dh-orphans { margin: 0; padding-inline-start: 18px; }

.dh-list { list-style: none; margin: 0; padding: 0; }
.dh-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-primary);
}
.dh-item:first-child { border-top: none; }
.dh-item-branch { color: var(--text-secondary); }
.dh-item .dh-btn { margin-inline-start: auto; }

@media (max-width: 480px) {
  .dh-form { flex-direction: column; align-items: stretch; }
  .dh-field input, .dh-btn--primary { width: 100%; min-height: 44px; }
}