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

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-[#eef2f6] text-gray-800;
    }
}

@layer components {
    /* Buttons */
    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-md bg-brand-portal-blue px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-brand-portal-blue-dark focus:outline-none focus:ring-2 focus:ring-brand-portal-blue focus:ring-offset-2 disabled:opacity-50;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-5 py-2.5 text-sm font-semibold text-brand-navy transition hover:border-brand-portal-blue hover:text-brand-portal-blue focus:outline-none focus:ring-2 focus:ring-brand-portal-blue/30 focus:ring-offset-2;
    }

    .btn-ghost {
        @apply inline-flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-gray-600 transition hover:bg-gray-100 hover:text-brand-navy;
    }

    .btn-outline-light {
        @apply inline-flex items-center justify-center gap-2 rounded-md border border-white/30 px-4 py-1.5 text-xs font-semibold text-white transition hover:bg-white/10;
    }

    /* Form */
    .card {
        @apply rounded-lg border border-gray-200 bg-white p-5 shadow-portal;
    }

    .input-field {
        @apply w-full rounded-md border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-brand-portal-blue focus:outline-none focus:ring-2 focus:ring-brand-portal-blue/20;
    }

    .label {
        @apply mb-1 block text-sm font-medium text-gray-700;
    }

    .badge {
        @apply inline-flex items-center rounded px-2 py-0.5 text-xs font-medium;
    }

    .section-title {
        @apply text-xl font-bold tracking-tight text-brand-navy sm:text-2xl;
    }

    /* Logo */
    .site-logo-link {
        @apply inline-flex shrink-0 items-center transition-opacity hover:opacity-90;
    }

    .site-logo {
        @apply h-14 w-auto min-w-[180px] max-w-[260px] object-contain sm:h-16 sm:min-w-[200px] sm:max-w-[300px];
    }

    .site-logo-sm {
        @apply h-12 w-auto min-w-[160px] max-w-[220px] object-contain;
    }

    .site-logo-on-dark {
        @apply rounded-md bg-white/95 px-2 py-1;
    }

    /* Top utility bar */
    .topbar {
        @apply border-b border-brand-navy-light bg-brand-navy text-xs text-gray-300;
    }

    /* Main header */
    .site-header {
        @apply border-b border-gray-200 bg-white shadow-portal;
    }

    .nav-link {
        @apply text-sm font-medium text-brand-navy transition hover:text-brand-portal-blue;
    }

    .nav-link-active {
        @apply text-brand-portal-blue;
    }

    /* Search band */
    .search-band {
        @apply border-b border-brand-portal-blue-dark bg-brand-portal-blue;
    }

  .search-band .input-field {
        @apply border-0 shadow-md focus:ring-white/30;
    }

    /* Stats ticker */
    .stats-ticker {
        @apply border-b border-amber-300 bg-amber-50 text-sm text-amber-950;
    }

    /* Category sidebar */
    .category-sidebar {
        @apply overflow-hidden rounded-lg border border-gray-200 bg-white shadow-portal;
    }

    .category-sidebar-header {
        @apply flex items-center justify-between bg-brand-navy px-4 py-3 text-white;
    }

    .category-sidebar-list {
        @apply max-h-[calc(100vh-14rem)] overflow-y-auto;
    }

    .category-sidebar-item {
        @apply flex items-center justify-between gap-2 border-b border-gray-100 px-4 py-2.5 text-[13px] text-gray-700 transition last:border-b-0 hover:bg-blue-50 hover:text-brand-portal-blue;
    }

    .category-sidebar-item-active {
        @apply border-l-4 border-l-brand-portal-blue bg-blue-50 font-semibold text-brand-portal-blue;
    }

    .category-count {
        @apply shrink-0 rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-bold text-gray-500;
    }

    /* Job table */
    .job-panel {
        @apply overflow-hidden rounded-lg border border-gray-200 bg-white shadow-portal;
    }

    .job-panel-header {
        @apply flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3;
    }

    .job-panel-title {
        @apply text-sm font-bold uppercase tracking-wide text-brand-navy;
    }

    .job-table-head {
        @apply hidden border-b border-gray-200 bg-gray-100 px-4 py-2 text-[11px] font-bold uppercase tracking-wider text-gray-500 sm:grid sm:grid-cols-[1fr_200px_120px_90px] sm:gap-4;
    }

    .job-list {
        @apply divide-y divide-gray-100;
    }

    .job-row {
        @apply grid gap-1 px-4 py-3 transition sm:grid-cols-[1fr_200px_120px_90px] sm:items-center sm:gap-4 sm:py-2.5;
    }

    .job-row:hover {
        @apply bg-blue-50/80;
    }

    .job-row:nth-child(even) {
        @apply bg-gray-50/60;
    }

    .job-row:nth-child(even):hover {
        @apply bg-blue-50/80;
    }

    .job-row-featured {
        @apply border-l-4 border-l-amber-400 bg-amber-50/40;
    }

    .job-row-main {
        @apply min-w-0;
    }

    .job-row-line {
        @apply flex flex-wrap items-baseline gap-x-2 gap-y-0.5;
    }

    .job-row-title {
        @apply text-[13px] font-semibold text-brand-portal-blue group-hover:underline;
    }

    .job-row-company {
        @apply text-[13px] font-medium text-gray-700;
    }

    .job-row-company::before {
        content: '—';
        @apply mr-2 text-gray-300;
    }

    .job-row-location {
        @apply text-xs text-gray-500 sm:text-[13px];
    }

    .job-row-category {
        @apply hidden text-xs text-gray-500 sm:block sm:text-[12px];
    }

    .job-row-date {
        @apply text-[11px] text-gray-400 sm:text-right;
    }

    .badge-hot {
        @apply mr-1.5 inline-flex rounded bg-red-600 px-1.5 py-0.5 text-[9px] font-bold uppercase text-white;
    }

    .badge-sponsored {
        @apply mr-1.5 inline-flex rounded bg-brand-portal-blue px-1.5 py-0.5 text-[9px] font-bold uppercase text-white;
    }

    .badge-new {
        @apply mr-1.5 inline-flex rounded bg-green-600 px-1.5 py-0.5 text-[9px] font-bold uppercase text-white;
    }

    /* Employer strip */
    .employer-strip {
        @apply border-t border-gray-200 bg-white py-8 shadow-portal;
    }

    .employer-logo-box {
        @apply flex h-16 w-28 items-center justify-center rounded-md border border-gray-200 bg-white p-2 shadow-sm transition hover:border-brand-portal-blue hover:shadow-md;
    }

    /* Ad slots */
    .ads-sidebar {
        @apply flex w-full shrink-0 flex-col gap-4 lg:w-64 xl:w-72;
    }

    .ad-slot {
        @apply relative overflow-hidden rounded-lg border border-gray-200 bg-white shadow-portal;
    }

    .ad-slot-content {
        @apply block;
    }

    .ad-slot-image {
        @apply w-full object-cover;
    }

    .ad-slot-standard .ad-slot-image {
        @apply aspect-[4/3];
    }

    .ad-slot-banner .ad-slot-image {
        @apply aspect-[728/90] max-h-24 object-contain bg-gray-50 p-2;
    }

    .ad-slot-html {
        @apply p-4 text-sm text-gray-700;
    }

    .ad-slot-text {
        @apply p-6 text-center text-sm font-medium text-gray-700;
    }

    .ad-slot-label {
        @apply absolute right-2 top-2 rounded bg-black/50 px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-wide text-white;
    }

    .ad-slot-placeholder {
        @apply flex min-h-[220px] flex-col items-center justify-center border-2 border-dashed border-gray-200 bg-gradient-to-b from-gray-50 to-white p-6 text-center transition hover:border-brand-portal-blue hover:bg-blue-50/30;
    }

    .ad-slot-placeholder-icon {
        @apply mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-brand-portal-blue/10;
    }

    .ad-slot-placeholder-title {
        @apply text-sm font-bold text-brand-navy;
    }

    .ad-slot-placeholder-desc {
        @apply mt-1 text-xs leading-relaxed text-gray-500;
    }

    .ad-slot-placeholder-cta {
        @apply mt-3 text-xs font-semibold text-brand-portal-blue group-hover:underline;
    }

    /* Portal layout */
    .portal-layout {
        @apply flex flex-col gap-5 xl:flex-row;
    }

    .portal-main {
        @apply min-w-0 flex-1 space-y-5;
    }

    .job-desc-content img,
    .job-desc-preview img {
        @apply my-4 max-w-full rounded-lg border border-gray-200 shadow-sm;
    }

    .job-desc-content p,
    .job-desc-preview p {
        @apply my-2;
    }

    .footer-social-link {
        @apply flex h-9 w-9 items-center justify-center rounded-full bg-white/10 text-gray-300 transition hover:bg-brand-portal-blue hover:text-white;
    }
}