@config "../../../tailwind.config.cjs";
@import "@fontsource-variable/geist";
@import "tailwindcss";
@import "./tokens.css";
@source "../../../*.php";
@source "../../../**/*.php";
@source "../js/**/*.js";

@layer base {
  html {
    @apply scroll-smooth;
  }

  body {
    @apply font-body antialiased bg-base-100 text-base-content;
  }

  a {
    @apply underline-offset-4 transition-colors duration-200;
  }

  img {
    @apply block h-auto max-w-full;
  }

  ::selection {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
  }

  [data-lucide] {
    @apply inline-block h-[1em] w-[1em] shrink-0 align-middle;
  }
}

@layer components {

  /* ── Buttons ──────────────────────────────────────── */
  .btn {
    @apply inline-flex select-none cursor-pointer items-center justify-center gap-1.5 rounded-md px-4 py-2.5 text-sm font-semibold leading-none tracking-tight no-underline transition-all duration-150 disabled:opacity-50 disabled:pointer-events-none;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  .btn-lg {
    @apply px-5 py-3 text-base;
  }

  .btn-square {
    @apply size-10 p-0;
  }

  .btn-wide {
    @apply w-full justify-center;
  }

  .btn-primary {
    @apply bg-primary text-primary-content hover:opacity-90 active:scale-[.97];
  }

  .btn-secondary {
    @apply bg-secondary text-secondary-content hover:opacity-90 active:scale-[.97];
  }

  .btn-accent {
    @apply bg-accent text-accent-content hover:opacity-90 active:scale-[.97];
  }

  .btn-neutral {
    @apply bg-neutral text-neutral-content hover:opacity-90 active:scale-[.97];
  }

  .btn-outline {
    @apply bg-base-200 text-base-content hover:bg-base-300 active:scale-[.97];
  }

  .btn-ghost {
    @apply bg-transparent text-base-content hover:bg-base-200 active:scale-[.97];
  }

  /* ── Button group ─────────────────────────────────── */
  .btn-group {
    @apply inline-flex;
  }

  .btn-group .btn {
    @apply rounded-none first:rounded-l-md last:rounded-r-md;
  }

  .btn-group-col {
    @apply inline-flex flex-col;
  }

  .btn-group-col .btn {
    @apply rounded-none first:rounded-t-md last:rounded-b-md;
  }

  @media (min-width: 640px) {
    .btn-group-sm-row {
      @apply inline-flex;
    }

    .btn-group-sm-row .btn {
      @apply rounded-none first:rounded-l-md last:rounded-r-md;
    }
  }

  /* ── Tags / Chips ─────────────────────────────────── */
  .tag {
    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold leading-none whitespace-nowrap;
  }

  .tag-lg {
    @apply px-3 py-1 text-sm;
  }

  .tag-sm {
    @apply px-2 py-px text-[0.65rem];
  }

  .tag-primary {
    @apply bg-primary text-primary-content;
  }

  .tag-secondary {
    @apply bg-secondary text-secondary-content;
  }

  .tag-accent {
    @apply bg-accent text-accent-content;
  }

  .tag-neutral {
    @apply bg-neutral text-neutral-content;
  }

  .tag-success {
    @apply bg-success text-success-content;
  }

  .tag-warning {
    @apply bg-warning text-warning-content;
  }

  .tag-error {
    @apply bg-error text-error-content;
  }

  .tag-info {
    @apply bg-info text-info-content;
  }

  .tag-outline {
    @apply bg-base-200 text-base-content;
  }

  .tag-outline-primary {
    @apply bg-primary text-primary-content;
  }

  .tag-outline-secondary {
    @apply bg-secondary text-secondary-content;
  }

  .tag-outline-accent {
    @apply bg-accent text-accent-content;
  }

  .tag-outline-success {
    @apply bg-success text-success-content;
  }

  .tag-outline-warning {
    @apply bg-warning text-warning-content;
  }

  .tag-outline-error {
    @apply bg-error text-error-content;
  }

  .tag-outline-neutral {
    @apply bg-neutral text-neutral-content;
  }

  .tag-outline-info {
    @apply bg-info text-info-content;
  }

  /* ── Cards ────────────────────────────────────────── */
  .card {
    @apply overflow-hidden bg-base-100;
  }

  .card-body {
    @apply flex flex-col gap-4 p-5 md:p-6;
  }

  .card-title {
    @apply text-xl font-semibold leading-snug tracking-tight text-base-content;
  }

  .card-actions {
    @apply flex flex-wrap items-center gap-2 mt-auto;
  }

  /* ── Notices ──────────────────────────────────────── */
  .notice {
    @apply flex items-start gap-3 rounded-md p-4 text-sm leading-relaxed font-medium;
  }

  .notice-info {
    @apply bg-azul-claro text-cinza-escuro;
  }

  .notice-success {
    @apply bg-verde-claro text-verde-escuro;
  }

  .notice-warning {
    @apply bg-amarelo-claro text-primary-content;
  }

  .notice-error {
    @apply bg-vermelho-claro text-vermelho-escuro;
  }

  /* ── Divider ──────────────────────────────────────── */
  .divider {
    @apply my-4 h-px w-full bg-base-border;
  }

  /* ── Stat items ───────────────────────────────────── */
  .stat-box {
    @apply rounded-md bg-base-100 overflow-hidden;
  }

  .stat-row {
    @apply flex flex-col gap-0.5 p-4;
  }

  .stat-row-label {
    @apply text-xs font-semibold uppercase tracking-widest text-base-muted;
  }

  .stat-row-value {
    @apply text-2xl font-bold tracking-tight text-base-content;
  }

  .stat-row-desc {
    @apply text-sm text-base-muted;
  }

  /* ── Forms ────────────────────────────────────────── */
  .input {
    @apply w-full rounded-md bg-base-200 px-4 py-2.5 text-sm text-base-content placeholder:text-base-muted focus:bg-base-300 focus:outline-none transition-colors;
  }

  .ru-ufpe-id-button {
    @apply inline-flex items-center justify-center gap-2 rounded-md bg-base-200 px-3 py-2 text-sm font-semibold text-base-content no-underline transition-colors hover:bg-base-300;
  }

  .ru-ufpe-id-button img {
    @apply size-6 shrink-0 rounded-sm;
  }

  .ru-ufpe-id-avatar {
    @apply size-6 shrink-0 rounded-full bg-base-300 object-cover;
  }

  .ru-ufpe-id-button-compact span {
    @apply hidden sm:inline;
  }

  .ru-ufpe-id-account {
    @apply hidden items-center gap-2 rounded-md bg-base-200 px-3 py-2 text-sm text-base-content sm:inline-flex;
  }

  .ru-ufpe-id-account span {
    @apply flex min-w-0 flex-col leading-tight;
  }

  .ru-ufpe-id-account strong {
    @apply text-xs font-semibold;
  }

  .ru-ufpe-id-account small {
    @apply max-w-40 truncate text-[0.68rem] text-base-muted;
  }

  .ru-ufpe-id-account a {
    @apply text-xs font-semibold text-base-muted no-underline hover:text-base-content;
  }

  .ru-ufpe-id-unavailable {
    @apply hidden rounded-md bg-base-200 px-3 py-2 text-xs font-semibold text-base-muted sm:inline-flex;
  }

  .ru-auth-notice {
    @apply my-1;
  }

  /* ── WordPress nav menus ──────────────────────────── */
  .nav-drawer {
    @apply fixed inset-y-0 left-0 z-50 w-64 -translate-x-full bg-base-100 transition-transform duration-200 ease-in-out overflow-y-auto;
  }

  .nav-drawer.is-open {
    @apply translate-x-0;
  }

  .nav-overlay {
    @apply fixed inset-0 z-40 bg-black/40 opacity-0 pointer-events-none transition-opacity duration-200;
  }

  .nav-overlay.is-open {
    @apply opacity-100 pointer-events-auto;
  }

  .nav-menu li {
    @apply block;
  }

  .nav-menu a {
    @apply flex px-5 py-3 text-sm font-medium text-base-content no-underline transition-colors hover:bg-base-200;
  }

  .nav-menu .current-menu-item>a {
    @apply bg-primary text-primary-content font-semibold;
  }

  /* ── Rich text prose ─────────────────────────────── */
  .prose-ru {
    @apply space-y-5 text-base leading-8 text-base-content;
  }

  .prose-ru a {
    @apply underline underline-offset-2 hover:text-primary;
  }

  .prose-ru h2 {
    @apply text-2xl font-semibold tracking-tight;
  }

  .prose-ru h3 {
    @apply text-xl font-semibold tracking-tight;
  }

  .prose-ru ul {
    @apply list-disc pl-5;
  }

  .prose-ru ol {
    @apply list-decimal pl-5;
  }

  .prose-ru p {
    @apply m-0;
  }

  .prose-ru blockquote {
    @apply bg-base-200 px-4 py-3 rounded-md italic text-base-muted;
  }

  .prose-ru figure {
    @apply overflow-hidden rounded-md;
  }

  /* ── UFPE ID comments ─────────────────────────────── */
  .ru-comments {
    @apply bg-base-100;
  }

  .ru-comments-header {
    @apply flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between;
  }

  .ru-comment-list {
    @apply space-y-3;
  }

  .ru-comment-list .children {
    @apply ml-7 mt-3 space-y-3 border-l border-base-border pl-4;
  }

  .ru-comment-item {
    @apply flex gap-3 rounded-md bg-base-200 p-4;
  }

  .ru-comment-avatar {
    @apply shrink-0 overflow-hidden rounded-full bg-base-300;
  }

  .ru-comment-content {
    @apply min-w-0 flex-1 space-y-2;
  }

  .ru-comment-meta {
    @apply flex flex-wrap items-center gap-x-2 gap-y-1 text-sm;
  }

  .ru-comment-meta strong {
    @apply font-semibold text-base-content;
  }

  .ru-comment-meta span {
    @apply text-xs text-base-muted;
  }

  .ru-comment-text {
    @apply text-sm leading-7;
  }

  .ru-comment-actions {
    @apply flex flex-wrap gap-2;
  }

  .comment-reply-link {
    @apply inline-flex items-center gap-1.5 rounded-md bg-base-100 px-3 py-1.5 text-xs font-semibold text-base-muted no-underline hover:bg-base-300;
  }

  .ru-comment-awaiting {
    @apply py-2 text-xs;
  }

  .ru-comment-login {
    @apply flex flex-col gap-4 rounded-md bg-base-200 p-4 sm:flex-row sm:items-center sm:justify-between;
  }

  .ru-comment-respond {
    @apply w-full rounded-md bg-base-200 p-4;
  }

  .ru-comment-respond .comment-reply-title {
    @apply m-0 flex flex-wrap items-center gap-2 text-lg font-semibold text-base-content;
  }

  .ru-comment-respond .comment-reply-title small {
    @apply text-xs font-semibold;
  }

  .ru-comment-respond .comment-reply-title small a {
    @apply rounded-md bg-base-100 px-2 py-1 text-base-muted no-underline hover:bg-base-300;
  }

  .ru-comment-form {
    @apply mt-3 space-y-3;
  }

  .ru-comment-form p {
    @apply m-0;
  }

  .ru-comment-logged-in {
    @apply m-0 text-sm text-base-muted;
  }

  .ru-comment-textarea {
    @apply min-h-32 resize-y bg-base-100;
  }

  /* ── Weekly menu tabs/table ──────────────────────── */
  .day-seg {
    --day-color: var(--color-seg);
    --day-text: var(--color-primary-content);
  }

  .day-ter {
    --day-color: var(--color-ter);
    --day-text: var(--color-accent-content);
  }

  .day-qua {
    --day-color: var(--color-qua);
    --day-text: var(--color-info-content);
  }

  .day-qui {
    --day-color: var(--color-qui);
    --day-text: var(--color-secondary-content);
  }

  .day-sex {
    --day-color: var(--color-sex);
    --day-text: var(--color-error-content);
  }

  .day-sab {
    --day-color: var(--color-sab);
    --day-text: var(--color-neutral-content);
  }

  .day-dom {
    --day-color: var(--color-dom);
    --day-text: var(--color-neutral-content);
  }

  .weekly-menu-tabs {
    @apply space-y-5;
  }

  .weekly-menu-panel-bleed {
    width: min(1440px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    margin-inline: 50%;
    transform: translateX(-50%);
  }

  .unit-map-panel-bleed {
    width: min(1440px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    margin-inline: 50%;
    transform: translateX(-50%);
  }

  .unit-map-panel {
    @apply overflow-hidden rounded-md bg-base-200;
    border-top: 6px solid var(--color-primary);
    border-right: 1px solid rgb(122 110 96 / 0.24);
    border-bottom: 1px solid rgb(122 110 96 / 0.24);
    border-left: 1px solid rgb(122 110 96 / 0.24);
    box-shadow: 0 16px 36px rgb(28 24 20 / 0.06);
  }

  .unit-map-panel-heading {
    @apply flex flex-wrap items-center justify-between gap-3 bg-base-100 px-4 py-4 md:px-5;
  }

  .unit-map-frame-wrap {
    @apply bg-base-100;
    border-top: 1px solid var(--color-base-border);
  }

  .unit-map-frame {
    display: block;
    width: 100%;
    min-height: 320px;
    border: 0;
    aspect-ratio: 4 / 3;
  }

  @media (min-width: 768px) {
    .unit-map-frame {
      min-height: 420px;
      aspect-ratio: 16 / 7;
    }
  }

  .weekly-menu-tablist {
    @apply flex gap-2 overflow-x-auto pb-2;
    scroll-snap-type: x proximity;
  }

  .weekly-menu-tab {
    @apply relative flex min-w-16 shrink-0 flex-col items-center justify-center gap-1 rounded-md bg-base-200 px-3 py-2.5 text-sm font-semibold leading-tight text-base-content transition-all duration-200 hover:bg-base-300 focus:outline-none;
    border-top: 4px solid var(--day-color, var(--color-primary));
    scroll-snap-align: start;
  }

  .weekly-menu-tab.is-active {
    background: var(--day-color, var(--color-primary));
    color: var(--day-text, var(--color-primary-content));
  }

  .weekly-menu-tab.is-today:not(.is-active) {
    box-shadow: inset 0 0 0 2px var(--day-color, var(--color-primary));
  }

  .weekly-menu-tab-short {
    @apply block;
  }

  .weekly-menu-tab-full {
    @apply hidden;
  }

  .weekly-menu-today-badge {
    @apply rounded-full bg-base-100 px-2 py-0.5 text-[0.62rem] font-bold uppercase tracking-normal text-base-content;
  }

  .weekly-menu-panel {
    @apply overflow-hidden rounded-md bg-base-200;
    border-top: 6px solid var(--day-color, var(--color-primary));
    border-right: 1px solid rgb(122 110 96 / 0.24);
    border-bottom: 1px solid rgb(122 110 96 / 0.24);
    border-left: 1px solid rgb(122 110 96 / 0.24);
    box-shadow: 0 16px 36px rgb(28 24 20 / 0.06);
  }

  .weekly-menu-panel[hidden] {
    @apply hidden;
  }

  .weekly-menu-panel-heading {
    @apply flex flex-wrap items-center justify-between gap-3 bg-base-100 px-4 py-4 md:px-5;
  }

  .weekly-menu-table-wrap {
    @apply overflow-x-auto bg-base-100;
    border-top: 1px solid var(--color-base-border);
  }

  .weekly-menu-table {
    @apply min-w-[1120px] space-y-4 p-4 md:space-y-0 md:p-0;
  }

  .weekly-menu-table-head {
    @apply hidden bg-base-300 text-xs font-semibold uppercase tracking-normal text-base-muted md:grid;
    grid-template-columns: minmax(9rem, 0.8fr) repeat(8, minmax(7.5rem, 1fr));
  }

  .weekly-menu-table-head>div {
    @apply border-l px-4 py-3 leading-snug first:border-l-0;
    border-color: rgb(122 110 96 / 0.28);
  }

  .weekly-menu-table-row {
    @apply overflow-hidden rounded-md bg-base-200 md:grid md:rounded-none md:bg-base-100;
    grid-template-columns: minmax(9rem, 0.8fr) repeat(8, minmax(7.5rem, 1fr));
  }

  .weekly-menu-table-row+.weekly-menu-table-row {
    @apply md:border-t;
    border-color: rgb(122 110 96 / 0.28);
  }

  .weekly-menu-table-meal {
    @apply flex items-center bg-base-300 px-4 py-3 text-sm font-semibold text-base-content;
    border-left: 3px solid var(--day-color, var(--color-primary));
    border-right: 1px solid rgb(122 110 96 / 0.28);
  }

  .weekly-menu-table-cell {
    @apply px-4 py-3 md:border-l md:bg-base-100;
    border-color: rgb(122 110 96 / 0.28);
  }

  .weekly-menu-table-cell.is-empty {
    @apply hidden md:flex md:items-center;
  }

  .weekly-menu-cell-label {
    @apply mb-1 block text-xs font-semibold uppercase tracking-normal text-base-muted md:hidden;
  }

  .weekly-menu-empty {
    @apply text-sm text-base-muted;
  }

  .weekly-menu-content-list {
    @apply space-y-2;
  }

  .weekly-menu-content-item {
    @apply border-t border-base-border pt-2 first:border-t-0 first:pt-0;
  }

  @media (min-width: 768px) {
    .weekly-menu-tab {
      @apply min-w-0 flex-1 px-4;
    }

    .weekly-menu-tab-short {
      @apply hidden;
    }

    .weekly-menu-tab-full {
      @apply block;
    }
  }

  /* ── Day-of-week color block bar (flat bg strip) ───── */
  .day-seg .card-body::before,
  .day-ter .card-body::before,
  .day-qua .card-body::before,
  .day-qui .card-body::before,
  .day-sex .card-body::before,
  .day-sab .card-body::before,
  .day-dom .card-body::before {
    content: "";
    display: block;
    height: 6px;
    margin: calc(-1 * var(--spacing) * 5) calc(-1 * var(--spacing) * 5) var(--spacing-4);
  }

  @media (min-width: 768px) {

    .day-seg .card-body::before,
    .day-ter .card-body::before,
    .day-qua .card-body::before,
    .day-qui .card-body::before,
    .day-sex .card-body::before,
    .day-sab .card-body::before,
    .day-dom .card-body::before {
      margin: calc(-1 * var(--spacing) * 6) calc(-1 * var(--spacing) * 6) var(--spacing-4);
    }
  }

  .day-seg .card-body::before {
    background: var(--color-seg);
  }

  .day-ter .card-body::before {
    background: var(--color-ter);
  }

  .day-qua .card-body::before {
    background: var(--color-qua);
  }

  .day-qui .card-body::before {
    background: var(--color-qui);
  }

  .day-sex .card-body::before {
    background: var(--color-sex);
  }

  .day-sab .card-body::before {
    background: var(--color-sab);
  }

  .day-dom .card-body::before {
    background: var(--color-dom);
  }
}
