/*
  Innovative UI layer (Pro Clean Theme)
  - Tailwind utilities are loaded via CDN and used for layout.
  - This stylesheet defines the visual design tokens, shared components,
    and a small set of safe overrides to make the UI more modern, readable,
    and less "heavy" across wide desktop screens.
*/

:root{
  /* --- Core palette (dark, professional) --- */
  --btec-bg: #050815;
  --btec-bg-2: #070b18;

  /* Surfaces are intentionally subtle to avoid the "boxed" heavy feel */
  --btec-surface: rgba(255,255,255,.045);
  --btec-surface-2: rgba(255,255,255,.065);
  --btec-surface-3: rgba(255,255,255,.085);

  --btec-border: rgba(148,163,184,.18);
  --btec-border-2: rgba(148,163,184,.26);

  --btec-text: rgba(248,250,252,.92);
  --btec-muted: rgba(148,163,184,.80);
  --btec-muted-2: rgba(148,163,184,.64);

  /* Brand accents (kept close to the existing cyan/blue direction) */
  --btec-primary: #4f46e5;   /* indigo-600 */
  --btec-primary-2: #06b6d4; /* cyan-500 */
  --btec-success: #10b981;   /* emerald-500 */
  --btec-warning: #f59e0b;   /* amber-500 */
  --btec-danger: #f43f5e;    /* rose-500 */

  --radius-lg: 1.35rem;
  --radius-md: 1.05rem;
  --radius-sm: .85rem;

  --shadow-lg: 0 22px 70px rgba(0,0,0,.55);
  --shadow-md: 0 16px 42px rgba(0,0,0,.42);
  --shadow-sm: 0 10px 24px rgba(0,0,0,.32);
}

html{scroll-behavior:smooth;font-size:16px}
*{box-sizing:border-box}

body{
  color: var(--btec-text);
  background-color: var(--btec-bg);
  background-image:
    radial-gradient(900px circle at 85% 8%, rgba(79,70,229,.22), transparent 58%),
    radial-gradient(700px circle at 18% 0%, rgba(6,182,212,.18), transparent 55%),
    radial-gradient(900px circle at 18% 90%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 38%);
  background-attachment: fixed;
  font-synthesis-weight:none;
  line-height:1.7;
}

a{color:inherit}
button,input,select,textarea{font-family:inherit}

/* Better RTL form controls on mobile */
select, input, textarea{direction: rtl;}

::selection{background: rgba(6,182,212,.22);}

/* Scrollbar */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.33);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.45)}

/* Details caret alignment (FAQ) */
summary::-webkit-details-marker{display:none}

/* More predictable focus styles */
:focus-visible{
  outline: 3px solid rgba(6,182,212,.28);
  outline-offset: 2px;
}

/* Make file input look consistent */
input[type=file]::file-selector-button{
  border:1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.06);
  color: rgba(226,232,240,1);
  padding:.42rem .8rem;
  border-radius:999px;
  cursor:pointer;
}
input[type=file]::file-selector-button:hover{
  border-color: rgba(6,182,212,.45);
  box-shadow: 0 0 0 4px rgba(6,182,212,.10);
}


/* -------------------------------------------------
   Global comfort fixes
--------------------------------------------------*/

/* Reduce large "empty margins" on wide screens by widening 2xl containers */
@media (min-width: 1536px){
  .max-w-screen-2xl{max-width: 1780px !important;}
}

/* Softer shadows across the board (Tailwind defaults can feel heavy on dark UIs) */
.shadow-xl{box-shadow: var(--shadow-md) !important;}
.shadow-lg{box-shadow: var(--shadow-sm) !important;}


/* -------------------------------------------------
   Safe Tailwind color overrides (used heavily across templates)
   These reduce the overly dark/flat boxes and improve readability.
--------------------------------------------------*/

/* Backgrounds */
.bg-slate-950{background-color: var(--btec-bg) !important;}
.bg-slate-950\/95{background-color: rgba(5,8,21,.95) !important;}
.bg-slate-950\/90{background-color: rgba(5,8,21,.92) !important;}
.bg-slate-950\/80{background-color: rgba(5,8,21,.82) !important;}
.bg-slate-950\/70{background-color: rgba(5,8,21,.72) !important;}
.bg-slate-950\/60{background-color: rgba(5,8,21,.64) !important;}
.bg-slate-950\/50{background-color: rgba(5,8,21,.52) !important;}

.bg-slate-900\/80{background-color: var(--btec-surface-2) !important;}
.bg-slate-900\/70{background-color: var(--btec-surface) !important;}
.bg-slate-900\/60{background-color: var(--btec-surface) !important;}
.bg-slate-900\/50{background-color: rgba(255,255,255,.04) !important;}
.bg-slate-900\/40{background-color: rgba(255,255,255,.035) !important;}

.bg-slate-800\/50{background-color: rgba(255,255,255,.05) !important;}
.bg-slate-800\/60{background-color: rgba(255,255,255,.055) !important;}

/* Borders */
.border-slate-800\/90{border-color: var(--btec-border) !important;}
.border-slate-800\/80{border-color: rgba(148,163,184,.16) !important;}
.border-slate-800\/70{border-color: rgba(148,163,184,.15) !important;}
.border-slate-800\/60{border-color: rgba(148,163,184,.13) !important;}
.border-slate-700\/80{border-color: rgba(148,163,184,.22) !important;}

/* Text */
.text-slate-50{color: rgba(248,250,252,.94) !important;}
.text-slate-200{color: rgba(226,232,240,.92) !important;}
.text-slate-300{color: rgba(226,232,240,.84) !important;}
.text-slate-400{color: var(--btec-muted-2) !important;}
.text-slate-500{color: rgba(148,163,184,.54) !important;}


/* -------------------------------------------------
   Shared components (usable alongside Tailwind)
--------------------------------------------------*/

.card{
  border: 1px solid var(--btec-border);
  background: var(--btec-surface-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}

.input{
  width: 100%;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  padding: .72rem .95rem;
  border-radius: var(--radius-md);
  outline: none;
}

.input::placeholder{color: rgba(148,163,184,.55)}

.input:focus{
  border-color: rgba(6,182,212,.50);
  box-shadow: 0 0 0 4px rgba(6,182,212,.14);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .74rem 1.15rem;
  font-weight: 800;
  font-size: .875rem;
  border: 1px solid rgba(79,70,229,.28);
  color: rgba(5,8,21,.96);
  background: linear-gradient(270deg, rgba(79,70,229,.98), rgba(6,182,212,.98));
  box-shadow: 0 14px 40px rgba(79,70,229,.16);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 18px 55px rgba(79,70,229,.20);
}

.btn:active{transform: translateY(0px)}

.btn-ghost{
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: none;
}

.btn-ghost:hover{
  border-color: rgba(6,182,212,.40);
  color: rgba(165,243,252,.95);
  box-shadow: 0 0 0 4px rgba(6,182,212,.10);
}

.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .34rem .62rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(6,182,212,.26);
  background: rgba(6,182,212,.12);
  color: rgba(165,243,252,.95);
}

.badge.badge-warn{
  border-color: rgba(245,158,11,.32);
  background: rgba(245,158,11,.12);
  color: rgba(254,243,199,.96);
}

/* ---------------------------------------------
   Mobile refinements (comfort + readability)
----------------------------------------------*/
@media (max-width: 640px){
  body{font-size:16px;line-height:1.85}

  h1,h2,h3{line-height:1.25}

  .card{border-radius: 1.05rem;box-shadow: var(--shadow-sm)}
  .btn{width:100%}

  /* Avoid cramped chips */
  .badge{font-size:.7rem;padding:.3rem .55rem}

  /* Reduce long-line density in stacked cards */
  .leading-relaxed{line-height:1.9}
}