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

@layer base {
  body {
    font-family: 'DM Sans', 'Inter var', system-ui, sans-serif;
  }

  /* Override default focus ring colors to use dd palette */
  [type='text']:focus,
  [type='email']:focus,
  [type='url']:focus,
  [type='password']:focus,
  [type='number']:focus,
  [type='date']:focus,
  [type='search']:focus,
  textarea:focus,
  select:focus {
    --tw-ring-color: #3b7960;
    border-color: #3b7960;
  }
}

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-dd-orange text-white font-semibold rounded-lg hover:bg-dd-orange/90 transition-colors focus:ring-2 focus:ring-dd-orange/50;
  }

  .btn-secondary {
    @apply px-4 py-2 bg-dd-mid text-white font-semibold rounded-lg hover:bg-dd-mid/90 transition-colors focus:ring-2 focus:ring-dd-mid/50;
  }

  .card {
    @apply bg-white dark:bg-dd-surface rounded-lg border border-dd-light dark:border-dd-mid/50 shadow-sm dark:shadow-lg dark:shadow-black/20;
  }

  /* Brand wordmark mortarboard (doctoral cap) */
  .dd-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
  }

  .dd-brand__cap {
    position: relative;
    display: inline-block;
  }

  /* The mortarboard hat rendered as an inline SVG background.
     Board is near-black with a gold rim so it reads clearly on the dark teal nav.
     Orange tassel + gold button tie into the brand palette. */
  .dd-brand__cap::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -0.14em;
    width: 1.8em;
    height: 1.05em;
    /* diamond board (top-down 3D): gold rim, gold button, orange tassel + fringe */
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 60 36' fill='none' xmlns='http://www.w3.org/2000/svg'><polygon points='26,3 50,13 26,23 2,13' fill='%23000' opacity='.55' transform='translate(1.5,2.5)'/><polygon points='26,13 50,13 26,23 2,13' fill='%23060606'/><polygon points='26,3 50,13 26,13 2,13' fill='%230e0e0e'/><polyline points='2,13 26,3 50,13' stroke='%23d4a83a' stroke-width='1.3' fill='none' stroke-linejoin='round'/><polyline points='2,13 26,23 50,13' stroke='%23d4a83a' stroke-width='.5' fill='none' stroke-linejoin='round' opacity='.45'/><circle cx='26' cy='13' r='2.9' fill='%23b8913e'/><circle cx='26' cy='13' r='1.7' fill='%23e6c45e'/><circle cx='25.1' cy='12.1' r='.6' fill='%23fff' opacity='.5'/><line x1='50' y1='13' x2='52' y2='25' stroke='%23ff6d42' stroke-width='1.6' stroke-linecap='round'/><rect x='49' y='24' width='6' height='2.8' rx='1.4' fill='%23ff6d42'/><line x1='50' y1='26.8' x2='48' y2='34' stroke='%23ff6d42' stroke-width='1.2' stroke-linecap='round' opacity='.88'/><line x1='52' y1='26.8' x2='52' y2='35' stroke='%23ff6d42' stroke-width='1.4' stroke-linecap='round'/><line x1='54' y1='26.8' x2='56' y2='34' stroke='%23ff6d42' stroke-width='1.2' stroke-linecap='round' opacity='.88'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
    transform: translateX(-43%);
    transform-origin: 43% 88%;
    filter: drop-shadow(0 0 2px rgba(212, 168, 58, 0.28)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
    pointer-events: none;
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 200ms ease;
  }

  /* Warm glow at the base — where cap meets the letter */
  .dd-brand__cap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0.05em;
    width: 0.6em;
    height: 0.1em;
    background: radial-gradient(ellipse at center, rgba(212, 168, 58, 0.2) 0%, transparent 70%);
    transform: translateX(-50%);
    pointer-events: none;
    transition: background 200ms ease;
  }

  .dd-brand-link:hover .dd-brand__cap::after,
  .dd-brand-link:focus-visible .dd-brand__cap::after {
    transform: translateX(-43%) rotate(-7deg);
    filter: drop-shadow(0 0 4px rgba(212, 168, 58, 0.45)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
  }

  .dd-brand-link:hover .dd-brand__cap::before,
  .dd-brand-link:focus-visible .dd-brand__cap::before {
    background: radial-gradient(ellipse at center, rgba(212, 168, 58, 0.35) 0%, transparent 70%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dd-brand__cap::after,
  .dd-brand__cap::before {
    transition: none;
  }
}

/* Override Flowbite tab active state colors (blue -> orange) */
[role="tab"][aria-selected="true"] {
  color: #ff6d42 !important; /* dd-orange */
  border-color: #ff6d42 !important;
}
[role="tab"]:hover {
  color: #ff6d42 !important;
  border-color: #ff6d42 !important;
}
[role="tab"][aria-selected="false"] {
  color: inherit;
  border-color: transparent;
}

/* More specific rules for tab panels and sections */
[id] {
  scroll-margin-top: 5rem !important;
}

/* Remove smooth scrolling as it can interfere with tab switching */
html {
  scroll-behavior: auto;
}

/* ApexCharts Tooltip Font Size Fix for Flowbite Conflict */
.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title,
.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-label,
.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-value,
.apexcharts-canvas .apexcharts-xaxistooltip-text {
  font-size: 12px !important;
}