@import "../packages/ui/src/vazirmatn.css";
@import "../packages/ui/src/tokens.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #eef2f7;
  --foreground: #0f172a;
  --primary: #0d9488;
  --secondary: #f59e0b;
  --surface: #ffffff;
  --muted: #64748b;
  --border: #e2e8f0;
  --sidebar: #ffffff;
  --sidebar-border: #e2e8f0;
  --sidebar-text: #0f172a;
  --sidebar-muted: #64748b;
  --sidebar-active: color-mix(in srgb, var(--primary) 12%, white);
  --sidebar-width: 16rem;
  --content-max: 1600px;
}

* {
  box-sizing: border-box;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Vazirmatn, Tahoma, sans-serif;
  min-height: 100vh;
}

.bg-primary {
  background-color: var(--primary);
}

.bg-primary\/5 {
  background-color: color-mix(in srgb, var(--primary) 5%, transparent);
}

.bg-primary\/10 {
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

.text-primary {
  color: var(--primary);
}

.border-primary {
  border-color: var(--primary);
}

.border-primary\/20 {
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

.border-primary\/30 {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.border-primary\/40 {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

.from-primary {
  --tw-gradient-from: var(--primary) var(--tw-gradient-from-position);
  --tw-gradient-to: color-mix(in srgb, var(--primary) 0%, transparent) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.ring-primary {
  --tw-ring-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

.shadow-card {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.08);
}

.user-avatar-fallback {
  background-color: #ccfbf1 !important;
  color: rgb(15, 118, 110) !important;
}

.prose h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
}

.prose ul {
  margin: 0;
  padding-right: 1.25rem;
  list-style: disc;
}

/* Persian date picker — attendance highlights */
.rmdp-session-day span {
  background-color: rgb(204 251 241) !important;
  color: rgb(15 118 110) !important;
  font-weight: 600;
}

.rmdp-recorded-day span {
  box-shadow: inset 0 -2px 0 0 rgb(20 184 166);
}

.rmdp-session-recorded span::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 1px auto 0;
  border-radius: 9999px;
  background: rgb(234 88 12);
}

.rmdp-non-session-day span {
  opacity: 0.28 !important;
  cursor: not-allowed !important;
  background: transparent !important;
  color: rgb(148 163 184) !important;
  font-weight: 400 !important;
}

.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-spinner {
  -moz-appearance: textfield;
  appearance: textfield;
}

.calendar-fc {
  --fc-border-color: var(--border);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: #f8fafc;
  --fc-today-bg-color: color-mix(in srgb, var(--primary) 12%, white);
  --fc-event-border-color: transparent;
  direction: rtl;
}

.calendar-fc .fc {
  font-family: Vazirmatn, Tahoma, sans-serif;
}

.calendar-fc .fc-scrollgrid,
.calendar-fc .fc-theme-standard td,
.calendar-fc .fc-theme-standard th {
  border-color: var(--border);
}

.calendar-fc .fc-col-header-cell {
  background: #f8fafc;
  padding: 0.5rem 0;
  font-size: 0.8rem;
  font-weight: 700;
}

.calendar-fc .fc-daygrid-day-number {
  font-weight: 700;
  float: right;
  padding: 0.4rem 0.6rem;
}

.calendar-fc .fc-event {
  border-radius: 0.4rem;
  font-size: 0.7rem;
  padding: 1px 4px;
}

.calendar-fc .fc-daygrid-event-harness {
  margin-top: 2px;
}

/* Social chat — subtle doodle wallpaper (Bale-inspired) */
.social-chat-wallpaper {
  background-color: #e8ece9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2394a3b8' stroke-width='1.1' opacity='0.22'%3E%3Ccircle cx='18' cy='22' r='6'/%3E%3Cpath d='M88 14l8 8-8 8-8-8z'/%3E%3Cpath d='M42 78c6-10 18-10 24 0s-6 16-12 16-18-6-12-16z'/%3E%3Cpath d='M96 72v16M88 80h16'/%3E%3Cpath d='M14 88c4-6 12-6 16 0'/%3E%3Cpath d='M62 18l4 10 10 4-10 4-4 10-4-10-10-4 10-4z'/%3E%3Cpath d='M72 96c8 0 12 4 12 8s-4 8-12 8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}