/* ======================================================
   ROOT THEME VARIABLES
====================================================== */

:root{
  --bg: #070a0f;          
  --panel: #0b1220;       
  --text: #e8f7ff;        
  --muted: rgba(232,247,255,.72);
  --cyan: #00e6ff;        
  --cyan2:#00b3ff;        
  --line: rgba(0,230,255,.28);
  --glow: 0 0 12px rgba(0,230,255,.35), 0 0 32px rgba(0,179,255,.18);
}


/* ======================================================
   GLOBAL BACKGROUND + TEXT
====================================================== */

body{
  background: radial-gradient(1200px 700px at 20% 0%, rgba(0,230,255,.14), transparent 60%),
              radial-gradient(900px 600px at 80% 20%, rgba(0,179,255,.10), transparent 55%),
              var(--bg);
  color: var(--text);
}


/* ======================================================
   NAVBAR STYLING
====================================================== */

.nav-link-custom{
  text-decoration: none;
  color: rgba(232,247,255,.78);
  font-weight: 500;
}

.nav-link-custom:hover{
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(0,230,255,.7);
}

.nav-link-active{
  color: var(--text);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(0,230,255,.9);
}

.topbar{
  background: rgba(7,10,15,.55);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.brand-mark{
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0,230,255,.35));
}


/* ======================================================
   BUTTON STYLING
====================================================== */

.btn-outline-secondary{
  color: rgba(232,247,255,.82);
  border-color: rgba(232,247,255,.22);
}

.btn-outline-secondary:hover{
  color: var(--bg);
  background: rgba(232,247,255,.92);
  border-color: rgba(232,247,255,.92);
}

.btn-primary{
  background: linear-gradient(90deg, var(--cyan), var(--cyan2));
  border: 0;
  box-shadow: var(--glow);
  color: #031018;
  font-weight: 700;
}

.btn-primary:hover{
  filter: brightness(1.05);
  box-shadow: 0 0 16px rgba(0,230,255,.45), 0 0 40px rgba(0,179,255,.25);
  color: #031018;
}


/* ======================================================
   HERO SECTION
====================================================== */

.hero{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11,18,32,.78), rgba(11,18,32,.55));
  box-shadow: 0 0 0 1px rgba(0,230,255,.10), 0 18px 60px rgba(0,0,0,.55);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(800px 220px at 15% 0%, rgba(0,230,255,.20), transparent 70%),
    radial-gradient(600px 200px at 80% 20%, rgba(0,179,255,.16), transparent 70%);
  pointer-events:none;
}

.hero-inner{
  position: relative;
  padding: 2.25rem;
}

.kicker{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(0,230,255,.35);
  background: rgba(0,230,255,.08);
  color: rgba(232,247,255,.9);
  font-size: .9rem;
}

.kicker-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0,230,255,.6);
}

.hero-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.hero-sub{
  color: var(--muted);
}


/* ======================================================
   PILL COMPONENT (APPLICATION STYLE BADGE)
====================================================== */

.pill{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(0,230,255,.35);
  background: rgba(0,230,255,.08);
  color: rgba(232,247,255,.9);
  font-size: .9rem;
  letter-spacing: .5px;
}

.pill-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0,230,255,.6);
}


/* ======================================================
   CARD + SECTION STYLING
====================================================== */

.tron-card{
  border: 1px solid var(--line);
  background: rgba(11,18,32,.55);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(0,230,255,.08);
}

.tron-card .muted{ 
  color: var(--muted); 
}

.section-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,230,255,.45), transparent);
  margin: 2.5rem 0;
}

#userBadge span{
  color: rgba(232,247,255,.92);
}

.text-secondary{ 
  color: var(--muted) !important; 
}


/* ======================================================
   DARK FORM STYLING
====================================================== */

.form-label{
  color: rgba(232,247,255,.95);
  font-weight: 600;
}

.form-control,
.form-select,
textarea{
  background: rgba(7,10,15,.60) !important;
  border: 1px solid rgba(0,230,255,.35) !important;
  color: var(--text) !important;
}

.form-control::placeholder,
textarea::placeholder {
  color: rgba(232,247,255,.10) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus{
  background: rgba(7,10,15,.70) !important;
  border-color: rgba(0,230,255,.65) !important;
  box-shadow: 0 0 0 .2rem rgba(0,230,255,.18) !important;
  color: var(--text) !important;
}


/* ======================================================
   FULLCALENDAR EVENT STYLING
====================================================== */

/* Keep event titles on one line */
.fc-daygrid-event {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allow breaking of long unspaced words only */
.fc-daygrid-event-title {
  overflow-wrap: break-word;
  word-break: break-word;
}


/* ======================================================
   EVENT DETAILS MODAL TEXT CONTROL
====================================================== */

/* Prevent horizontal overflow in modal */
#eventDetailsModal .modal-body {
  overflow-x: hidden;
}

/* Properly wrap long note content */
#eventDetailsModal #detailNotes {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}


/* ======================================================
   SWEET ALERT THEME OVERRIDES
====================================================== */

.swal2-popup{
  background: rgba(11,18,32,.95) !important;
  border: 1px solid rgba(0,230,255,.28) !important;
  box-shadow: 0 0 0 1px rgba(0,230,255,.10), 0 18px 60px rgba(0,0,0,.65) !important;
  border-radius: 16px !important;
  color: #e8f7ff !important;
}

.swal2-title,
.swal2-html-container{
  color: #e8f7ff !important;
}

.swal2-confirm{
  background: linear-gradient(90deg, #00e6ff, #00b3ff) !important;
  color: #031018 !important;
  font-weight: 800 !important;
  border: 0 !important;
  box-shadow: 0 0 12px rgba(0,230,255,.35), 0 0 32px rgba(0,179,255,.18) !important;
  border-radius: 10px !important;
}

.swal2-cancel{
  background: transparent !important;
  color: rgba(232,247,255,.85) !important;
  border: 1px solid rgba(232,247,255,.22) !important;
  border-radius: 10px !important; 
}