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

@layer base {
  html { scroll-behavior: smooth; }
  [x-cloak] { display: none !important; }

}

@layer components {
  .card {
    @apply bg-white/80 backdrop-blur rounded-2xl shadow-sm ring-1 ring-slate-200/60;
  }
  .card-header {
    @apply px-6 py-4 border-b border-slate-200/60 flex items-center justify-between;
  }
  .card-title {
    @apply text-slate-900 font-semibold;
  }
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-semibold transition;
  }
  .btn-primary {
    @apply btn bg-slate-900 text-white hover:bg-slate-800;
  }
  .btn-soft {
    @apply btn bg-white text-slate-700 ring-1 ring-slate-200 hover:bg-slate-50;
  }
  .badge {
    @apply inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset;
  }
  .badge-info {
    @apply badge bg-sky-50 text-sky-700 ring-sky-200;
  }
  .badge-success {
    @apply badge bg-emerald-50 text-emerald-700 ring-emerald-200;
  }
  .badge-warn {
    @apply badge bg-amber-50 text-amber-800 ring-amber-200;
  }
  .badge-neutral {
    @apply badge bg-slate-50 text-slate-700 ring-slate-200;
  }
  .nav-pill {
    @apply inline-flex items-center rounded-full px-3 py-1.5 text-sm font-semibold text-white/75 hover:text-white hover:bg-white/10 transition;
  }
  .nav-pill-active {
    @apply bg-white/15 text-white ring-1 ring-white/15;
  }
  .mobile-link {
    /* Sidebar / left-menu link */
    @apply relative flex items-center rounded-2xl px-4 py-3 text-base font-semibold tracking-wide text-white/85 hover:bg-white/10 hover:text-white transition;
  }
  .mobile-link::after {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 9999px;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.9), rgba(99, 102, 241, 0.9));
    opacity: 0;
    transform: translateX(-6px);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mobile-link:hover::after {
    opacity: 0.55;
    transform: translateX(0);
  }
  .mobile-link-active {
    @apply bg-white/15 text-white;
  }
  .mobile-link-active::after {
    opacity: 1;
    transform: translateX(0);
  }
  .input {
    @apply w-full rounded-xl border-slate-200 focus:border-slate-400 focus:ring-slate-300/40;
  }
  .table {
    @apply min-w-full text-sm;
  }
  .thead th {
    @apply sticky top-0 bg-slate-50 text-slate-600 font-semibold text-xs uppercase tracking-wide px-4 py-3 border-b border-slate-200/60;
  }
  .tbody td {
    @apply px-4 py-3 border-b border-slate-100;
  }
  .row-hover {
    @apply hover:bg-slate-50/70 transition;
  }

  /* Homepage dark theme overrides (welcome page) */
  body.homepage .card {
    @apply bg-white/5 backdrop-blur rounded-2xl shadow-sm ring-1 ring-white/10;
  }
  body.homepage .card-header {
    @apply border-white/10;
  }
  body.homepage .card-title {
    @apply text-white;
  }
  body.homepage .btn-soft {
    @apply bg-white/10 text-white ring-1 ring-white/15 hover:bg-white/15;
  }
  body.homepage .badge-info {
    @apply bg-sky-500/15 text-sky-200 ring-sky-400/30;
  }
  body.homepage .badge-success {
    @apply bg-emerald-500/15 text-emerald-200 ring-emerald-400/30;
  }
  body.homepage .badge-warn {
    @apply bg-amber-500/15 text-amber-200 ring-amber-400/30;
  }
  body.homepage .badge-neutral {
    @apply bg-white/10 text-white/80 ring-white/15;
  }

}

  /* Visa Requirements (custom extracted design) */
  body.visa-req { background: #0b1220; }

  .visa-hero {
    /* Header is sticky (not fixed), so avoid large top offsets that create blank space */
    min-height: 100vh;
    padding: 32px 28px 28px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .visa-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      /* Background (no photo here; photo slider is on left column) */
      /* Soft luxury color wash */
      linear-gradient(90deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.18) 100%),
      radial-gradient(1200px 700px at 15% 10%, rgba(58,167,210,.28), transparent 60%),
      radial-gradient(900px 600px at 85% 30%, rgba(243,179,25,.28), transparent 55%),
      /* Dark overlay reduced so image stays visible */
      linear-gradient(180deg, rgba(15,23,42,.30), rgba(15,23,42,.55));
    transform: scale(1.03);
  }

  .visa-wrap {
    position: relative;
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    align-items: start;
  
    margin-top: 0;
  }


  

  .visa-left{
    position: relative;
    min-height: 620px;
    border-radius: 28px;
    overflow: hidden;
  }

  .visa-slider{
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #0f172a;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 22px 55px rgba(16,24,40,.22);
  }

  .visa-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 900ms ease, transform 1200ms ease;
    filter: saturate(1.05) contrast(1.02);
  }

  .visa-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .visa-slide.is-active{
    opacity: 1;
    transform: scale(1.00);
  }

  /* readability overlay */
  .visa-slider::after{content:"";position:absolute;inset:0;background:transparent;opacity:0;pointer-events:none;}

  .visa-slider-dots{
    position: absolute;
    left: 22px;
    bottom: 18px;
    display: flex;
    gap: 8px;
    z-index: 3;
  }
  .visa-dot{
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.65);
    background: rgba(255,255,255,.28);
    transition: transform 200ms ease, background 200ms ease;
  }
  .visa-dot.is-active{
    background: rgba(255,255,255,.85);
    transform: scale(1.15);
  }

  /* Glass content sits above slider */
  .visa-left .visa-glass{
    position: relative;
    z-index: 2;
    margin: 180px 26px 26px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(90,140,180,.35);
    border-radius: 24px;
    padding: 28px 28px 18px;
    box-shadow: 0 18px 40px rgba(16,24,40,.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Mobile slider fixes */
  @media (max-width: 768px){
    .visa-wrap{
      grid-template-columns: 1fr;
      gap: 18px;
    }
    .visa-left{
      min-height: auto;
      border-radius: 20px;
    }
    .visa-slider{
      position: relative;
      height: 260px;
      border-radius: 20px;
    }
    .visa-slide{
      position: absolute;
      inset: 0;
    }
    .visa-slide img{
      height: 100%;
      object-fit: cover;
    }
    .visa-left .visa-glass{
      margin: 16px;
    }
    .visa-slider-dots{
      left: 50%;
      transform: translateX(-50%);
      bottom: 12px;
    }
  }

@layer components {
  /* Premium glass surfaces */
  .glass {
    @apply bg-white/65 backdrop-blur-md shadow-xl ring-1 ring-slate-200/70;
  }
  .glass-soft {
    @apply bg-white/55 backdrop-blur-md shadow-lg ring-1 ring-slate-200/60;
  }
  /* Soft cards inside glass */
  .glass-card {
    @apply rounded-2xl bg-white/85 backdrop-blur-sm border border-white/60 shadow-md;
  }
  .glass-card-muted {
    @apply rounded-2xl bg-white/75 backdrop-blur-sm border border-white/50 shadow-sm;
  }
  /* Form inputs */
  .input-pill {
    @apply w-full rounded-2xl border-slate-200 bg-white shadow-sm focus:border-amber-400 focus:ring-amber-400;
  }
  .textarea-pill {
    @apply w-full rounded-2xl border-slate-200 bg-white shadow-sm focus:border-amber-400 focus:ring-amber-400;
  }
  /* Buttons */
  .btn-pill {
    @apply inline-flex items-center justify-center rounded-2xl px-5 py-3 font-semibold transition;
  }

  /* Reference-like glass (light blue stroke) */
  .ntw-glass {
    background: rgba(255,255,255,0.58);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(186, 210, 244, 0.95); /* light blue */
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  }
  .ntw-card {
    background: rgba(255,255,255,0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(186, 210, 244, 0.95);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  }
  .ntw-pill-input {
    @apply w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm shadow-sm focus:border-slate-300 focus:ring-0;
  }
  .ntw-pill-select {
    @apply w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm shadow-sm focus:border-slate-300 focus:ring-0;
  }
  .ntw-btn {
    @apply inline-flex items-center justify-center rounded-2xl px-5 py-3 text-sm font-semibold transition;
  }
  .ntw-btn-outline {
    @apply ntw-btn bg-white text-slate-800 border border-slate-200 shadow-sm hover:bg-slate-50;
  }
  .ntw-btn-yellow {
    @apply ntw-btn bg-amber-400 text-slate-900 font-extrabold shadow-sm hover:brightness-110;
  }
  .ntw-btn-dark {
    @apply ntw-btn bg-slate-900 text-white font-extrabold shadow-sm hover:bg-slate-800;
  }
}

@media (max-width: 768px){
  .visa-glass{ margin: 120px 14px 18px; }
}

@media (max-width: 900px){
  .visa-hero{ padding: 24px 16px 20px; }
}

@media (max-width: 900px){
  .visa-wrap { margin-top: 0; }
}

/* Professional Admin UI Refresh */
@layer base {
  body {
    @apply text-slate-800 bg-slate-50;
  }
  ::selection {
    @apply bg-sky-200 text-slate-950;
  }
}

@layer components {
  .card {
    @apply bg-white/90 backdrop-blur-xl rounded-3xl shadow-[0_18px_45px_-28px_rgba(15,23,42,0.55)] ring-1 ring-slate-200/70 transition duration-200;
  }
  .card:hover {
    @apply shadow-[0_22px_55px_-30px_rgba(15,23,42,0.65)] ring-slate-300/80;
  }
  .card-header {
    @apply px-6 py-5 border-b border-slate-200/70 bg-gradient-to-r from-white/95 to-slate-50/80 rounded-t-3xl flex items-center justify-between gap-4;
  }
  .card-title {
    @apply text-slate-950 font-bold tracking-tight;
  }
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-bold tracking-wide transition duration-200 focus:outline-none focus:ring-4 focus:ring-sky-200 disabled:opacity-60 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply btn bg-gradient-to-r from-slate-950 via-slate-900 to-sky-950 text-white shadow-lg shadow-slate-900/15 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-900/20;
  }
  .btn-soft {
    @apply btn bg-white text-slate-700 ring-1 ring-slate-200 hover:bg-slate-50 hover:text-slate-950 hover:-translate-y-0.5;
  }
  .badge {
    @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-bold ring-1 ring-inset shadow-sm;
  }
  .mobile-link {
    @apply relative flex items-center rounded-2xl px-4 py-3 text-[15px] font-bold tracking-wide text-white/80 hover:bg-white/10 hover:text-white transition duration-200;
  }
  .mobile-link-active {
    @apply bg-white/15 text-white shadow-inner ring-1 ring-white/10;
  }
  .input {
    @apply w-full rounded-2xl border-slate-200 bg-white/95 px-4 py-2.5 text-slate-800 shadow-sm placeholder:text-slate-400 focus:border-sky-400 focus:ring-4 focus:ring-sky-100 transition;
  }
  .table {
    @apply min-w-full text-sm border-separate border-spacing-0;
  }
  .thead th {
    @apply sticky top-0 z-10 bg-slate-50/95 backdrop-blur text-slate-500 font-extrabold text-[11px] uppercase tracking-[0.08em] px-5 py-4 border-b border-slate-200/80;
  }
  .tbody td {
    @apply px-5 py-4 border-b border-slate-100 align-middle;
  }
  .row-hover {
    @apply hover:bg-sky-50/45 transition duration-150;
  }
  .professional-panel {
    @apply rounded-[2rem] bg-white/80 ring-1 ring-slate-200/70 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.55)] backdrop-blur-xl;
  }
  .page-kicker {
    @apply text-xs font-extrabold uppercase tracking-[0.18em] text-sky-700;
  }
  .stat-card {
    @apply card p-5 relative overflow-hidden;
  }
  .stat-card::before {
    content: '';
    @apply absolute -right-8 -top-8 h-24 w-24 rounded-full bg-gradient-to-br from-sky-100 to-indigo-100 opacity-80;
  }
}

@layer utilities {
  .admin-surface {
    background:
      radial-gradient(circle at 15% 15%, rgba(14, 165, 233, 0.10), transparent 30%),
      radial-gradient(circle at 85% 10%, rgba(99, 102, 241, 0.10), transparent 28%),
      linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
  }
}

/* Professional sidebar refresh */
.sidebar-shell {
  background:
    radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.18), transparent 28%),
    radial-gradient(circle at 95% 32%, rgba(99, 102, 241, 0.16), transparent 30%),
    linear-gradient(180deg, #08111f 0%, #101c30 48%, #0b1322 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.08);
}
.sidebar-brand-card {
  margin: 14px;
  padding: 12px;
  border-radius: 22px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 50px rgba(2,8,23,0.22);
}
.sidebar-section-title {
  padding: 14px 14px 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(226,232,240,.48);
}
.mobile-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  margin: 4px 8px;
  padding: 11px 14px;
  border-radius: 16px;
  color: rgba(241,245,249,.78);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  transition: all .18s ease;
}
.mobile-link:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
  transform: translateX(3px);
}
.mobile-link::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(148,163,184,.42);
  box-shadow: 0 0 0 4px rgba(255,255,255,.025);
  transition: all .18s ease;
  flex: 0 0 auto;
}
.mobile-link::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg,#38bdf8,#6366f1);
  opacity: 0;
  transition: opacity .18s ease;
}
.mobile-link-active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(14,165,233,.28), rgba(99,102,241,.20)) !important;
  border: 1px solid rgba(125,211,252,.22);
  box-shadow: 0 12px 30px rgba(14,165,233,.12), inset 0 1px 0 rgba(255,255,255,.10);
}
.mobile-link-active::before {
  background: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56,189,248,.13), 0 0 22px rgba(56,189,248,.55);
}
.mobile-link-active::after { opacity: 1; }
.sidebar-user-card {
  margin: 12px;
  padding: 12px;
  border-radius: 22px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.10);
}
.sidebar-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: 14px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  color: white;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.10);
  transition: all .18s ease;
}
.sidebar-action-btn:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }

@layer components {
  /* Candidates table: keep all columns inside the page and make overflow scroll inside the card */
  .candidates-index { max-width: min(100%, 1280px); }
  .candidate-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  .candidate-table-scroll::-webkit-scrollbar { height: 10px; }
  .candidate-table-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 9999px; }
  .candidate-table-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
  .candidate-table {
    width: 100%;
    min-width: 1040px;
    table-layout: fixed;
  }
  .candidate-table .col-name { width: 16%; }
  .candidate-table .col-agent { width: 12%; }
  .candidate-table .col-company { width: 12%; }
  .candidate-table .col-passport { width: 10%; }
  .candidate-table .col-step { width: 10%; }
  .candidate-table .col-track { width: 11%; }
  .candidate-table .col-money { width: 9%; }
  .candidate-table .col-due { width: 9%; }
  .candidate-table .col-action { width: 12%; }
  .candidate-table th,
  .candidate-table td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .candidate-table td { vertical-align: middle; }
  .candidate-table .action-col {
    position: sticky;
    right: 0;
    z-index: 10;
    background: rgba(255,255,255,.96);
    box-shadow: -12px 0 18px -18px rgba(15,23,42,.45);
  }
  .candidate-table thead .action-col {
    z-index: 20;
    background: rgb(248 250 252);
  }
  .candidate-table .tbody tr:hover .action-col { background: rgb(248 250 252); }
  @media (max-width: 1024px) {
    .candidate-table { min-width: 980px; }
    .candidate-table .col-name { width: 18%; }
    .candidate-table .col-company { width: 11%; }
    .candidate-table .col-action { width: 13%; }
    .candidate-table .thead th { padding-left: .65rem; padding-right: .65rem; }
    .candidate-table .tbody td { padding-left: .65rem; padding-right: .65rem; }
  }
}

/* Fast/mobile public UI fixes */
.mobile-public-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-radius: 14px;
  padding: 10px 14px;
  color: rgba(255,255,255,.82);
  font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.mobile-public-link:hover, .mobile-public-link-active {
  background: rgba(255,255,255,.12);
  color: #fff;
}
img, video { max-width: 100%; height: auto; }
@media (max-width: 640px) {
  body { overflow-x: hidden; }
  .visa-hero { min-height: auto; padding: 16px 12px 18px; }
  .visa-slider { height: 220px; }
  .visa-left .visa-glass { margin: 12px; padding: 18px; border-radius: 18px; }
  .visa-panel, .visa-left, .card, .professional-panel { border-radius: 20px; }
  .visa-grid2, .visa-file-row { grid-template-columns: 1fr !important; }
  .visa-submit, .visa-qbtn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}