/* ======================================================
   ROOT VARIABLES - FMG blue shades
====================================================== */

:root{

--bg:#F7F9FC;
--surface:#FFFFFF;
--border:#E6ECF2;

--ink:#1A1A1A;
--ink-soft:#6B7280;
--ink-faint:#9CA3AF;

--primary:#1E6FD9;
--primary-2:#3A8DFF;

--teal:#1FB6A6;
--accent:#FF8A3D;

--danger:#E53935;

--match-bg:#F1F6FF;

--radius:16px;
--radius-sm:12px;

--shadow-sm:0 2px 6px rgba(0,0,0,.05);
--shadow-md:0 10px 30px rgba(0,0,0,.08);

}



/* ======================================================
   RESET
====================================================== */

*,
*::before,
*::after{
box-sizing:border-box;
}

body{
margin:0;
background:linear-gradient(180deg,#F7F9FC 0%,#EEF3F9 100%);
color:var(--ink);
font-family:'Nunito',system-ui,sans-serif;
-webkit-font-smoothing:antialiased;
}

.hidden{
display:none!important;
}



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

.nav{

position:sticky;
top:0;

display:flex;
align-items:center;
justify-content:space-between;

background:linear-gradient(135deg,var(--primary),var(--teal));
color:white;

padding:14px 24px;

}

.nav-logo{
font-weight:800;
font-size:18px;

background:linear-gradient(135deg,#ffffff,#d9f0ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.nav-links{
display:flex;
gap:18px;
}

.nav-links a{
text-decoration:none;
color:rgba(255,255,255,.85);
font-weight:600;
}

.nav-links a.active{
color:white;
}

.logout-btn{
background:none;
border:none;
cursor:pointer;
font-weight:600;
color:white;
}



/* ======================================================
   MAIN LAYOUT
====================================================== */

main,
.container{
max-width:780px;
margin:0 auto;
padding:48px 24px 80px;
}

@media (max-width:768px){

main,
.container{
padding:32px 16px;
}

}



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

.hero{
margin-bottom:36px;
}

.hero-eyebrow{
font-size:1rem;
color:var(--ink-soft);
margin-bottom:8px;
font-style:italic;
font-weight:600;
}

.hero h1{
font-size:2rem;
font-weight:800;
margin:0 0 6px 0;
}

.hero-sub{
font-size:.9rem;
color:var(--ink-soft);
}



/* ======================================================
   DATE BAR
====================================================== */

.date-bar{

display:flex;
align-items:center;
gap:10px;

background:var(--surface);
border:1px solid var(--border);
border-radius:40px;

padding:10px 14px;
margin-bottom:32px;

box-shadow:var(--shadow-sm);

}

.date-bar:hover{
background:#F3F7FF;
}

.date-bar:active{
transform:scale(.995);
}

.date-input{
flex:1;
border:none;
background:none;
font-weight:700;
font-size:1.05rem;
letter-spacing:.02em;
color:var(--ink);
}

@media (max-width:768px){

.date-input{
font-size:1.15rem;
}

}



/* ======================================================
   RESULTS HEADER
====================================================== */

.results-header{

display:flex;
justify-content:space-between;
margin-bottom:16px;

}

.results-title{
font-weight:700;
}

.results-count{
font-size:.85rem;
color:var(--ink-faint);
}



/* ======================================================
   GRID
====================================================== */

.cards-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(220px,1fr));

gap:16px;

}



/* ======================================================
   MATCH CARD
====================================================== */

.colleague-card{

background:var(--surface);
border:1px solid var(--border);

border-radius:var(--radius);

padding:18px;

transition:.18s ease;

box-shadow:var(--shadow-sm);

}

.colleague-card:hover{

transform:translateY(-4px) scale(1.01);

box-shadow:0 14px 34px rgba(0,0,0,.12);

}

.card-city{
font-weight:800;
margin-bottom:4px;
}

.card-date{
font-size:.85rem;
color:var(--ink-soft);
margin-bottom:8px;
}

.card-people{
display:flex;
flex-wrap:wrap;
gap:6px;
}



/* ======================================================
   PERSON BADGE
====================================================== */

.person{

background:var(--match-bg);

border-radius:var(--radius-sm);

padding:6px 12px;

font-size:.85rem;

cursor:pointer;

transition:.15s;

}

.person:hover{
background:#DDEBFF;
}



/* ======================================================
   FORM CONTROLS
====================================================== */

input,
select{

width:100%;
height:44px;

margin-top:12px;
padding:0 12px;

border-radius:var(--radius-sm);

border:1px solid var(--border);

background:var(--surface);

font-size:16px;

transition:.15s;

}

input:hover{
border-color:var(--primary-2);
}

input:focus,
select:focus{

outline:none;

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(30,111,217,.15);

}

input::placeholder{
color:var(--ink-faint);
}


.form-card button{
width:auto;
align-self:flex-start;
margin-top:14px;
padding:0 20px;
}



/* Fix mobile date input layout */

input[type="date"]{

width:100%;
min-width:0;

appearance:none;
-webkit-appearance:none;

padding-right:36px;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%236B7280' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v2h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm14 8H3v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V10z'/%3E%3C/svg%3E");

background-repeat:no-repeat;
background-position:right 12px center;

}

input[type="date"]::-webkit-calendar-picker-indicator{
opacity:0;
position:absolute;
right:10px;
cursor:pointer;
}



/* ======================================================
   BUTTONS
====================================================== */

button{

height:44px;

border:none;

border-radius:var(--radius-sm);

cursor:pointer;

font-weight:600;

padding:0 16px;

transition:.15s;

}

.search-btn{

background:linear-gradient(135deg,var(--primary),var(--teal));

color:white;

box-shadow:var(--shadow-sm);

}

.search-btn:hover{

transform:translateY(-1px);

box-shadow:var(--shadow-md);

}

.search-btn:active{
transform:scale(.97);
}

.today-btn{

background:var(--match-bg);

color:var(--ink);

}

.today-btn:hover{
background:#E8F0FF;
}

button:disabled{
opacity:.5;
cursor:not-allowed;
}



/* ======================================================
   MODAL
====================================================== */

.overlay{

position:fixed;
inset:0;

background:rgba(20,30,50,.45);
display:flex;
align-items:center;
justify-content:center;
padding:20px;
backdrop-filter:blur(4px);

}

.modal{
background:var(--surface);
padding:28px 26px 26px;
border-radius:20px;
max-width:340px;
width:100%;
position:relative;
text-align:center;
border:1px solid var(--border);
box-shadow:0 20px 60px rgba(0,0,0,.25);
animation:modalIn .25s ease;

}

/* modal entrance animation */

@keyframes modalIn{
from{
opacity:0;
transform:translateY(10px) scale(.97);
}

to{
opacity:1;
transform:translateY(0) scale(1);
}

}

.close-btn{
position:absolute;
top:12px;
right:12px;
border:none;
background:none;
cursor:pointer;
font-size:16px;
color:var(--ink-soft);

}

.close-btn:hover{
color:var(--primary);
}


/* Profile name */

.modal h2{
margin-top:4px;
margin-bottom:8px;
font-weight:800;
font-size:22px;

}


/* Phone number */

.phone{
font-size:16px;
font-weight:600;
color:var(--primary);
margin-bottom:16px;

}


/* Match note */
.note{
font-size:14px;
color:var(--ink-soft);

}



/* ======================================================
   TOURS LIST
====================================================== */

.tours-list{

display:flex;
flex-direction:column;
gap:12px;

margin-top:12px;

}

.tour-item{

display:flex;
align-items:center;
justify-content:space-between;
gap:10px;

background:var(--surface);

border:1px solid var(--border);

border-radius:var(--radius);

padding:10px 12px;

}

.tour-info{
flex:1;
}

.tour-info strong{
display:block;
font-weight:800;
}

.tour-info span{
font-size:.85rem;
color:var(--ink-soft);
}

.tour-actions{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
}

.tour-toggle{
display:flex;
justify-content:flex-end;
}

.tour-buttons{
display:flex;
gap:6px;
}

.tour-actions button{

height:34px;
padding:0 10px;
font-size:.85rem;

}

/* circular dot */

.tour-color-dot{
width:10px;
height:10px;
border-radius:50%;
flex-shrink:0;
background:#CBD5E1;
margin-right:8px;
}

.tour-dot-1{ background:#1E6FD9; }
.tour-dot-2{ background:#1FB6A6; }
.tour-dot-3{ background:#3A8DFF; }
.tour-dot-4{ background:#FF8A3D; }
.tour-dot-5{ background:#6B7280; }



/* ======================================================
   CONFIRM MODAL
====================================================== */

.confirm-modal{

position:fixed;
inset:0;

display:grid;
place-items:center;

z-index:9999;

}

.confirm-modal-card{

background:white;

padding:24px;

border-radius:16px;

width:90%;
max-width:360px;

text-align:center;

box-shadow:0 20px 50px rgba(0,0,0,.2);

}

.confirm-modal-actions{

display:flex;
gap:10px;
margin-top:20px;

}

.btn-secondary{

flex:1;

border:1px solid var(--border);

background:#F3F7FF;

border-radius:10px;

height:40px;

}

.btn-danger{

flex:1;

background:var(--danger);

color:white;

border-radius:10px;

height:40px;

}



/* ======================================================
   LOGIN / AUTH
====================================================== */

#loginForm button,
#registerForm button{

width:100%;
margin-top:16px;

font-size:16px;
height:48px;

background:linear-gradient(135deg,var(--primary),var(--teal));

color:white;

}



/* ======================================================
   LOGIN CARD
====================================================== */

.card{

background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:24px;
box-shadow:var(--shadow-md);

}

.form-card{
display:flex;
flex-direction:column;
gap:12px;
}

.title{
margin-top:0;
margin-bottom:12px;
}

.section-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:20px;
margin-bottom:28px;
box-shadow:var(--shadow-sm);
}

/* ======================================================
   LINKS
====================================================== */

.link{
cursor:pointer;
text-decoration:none;
}

.link.subtle{
color:var(--ink-soft);
font-size:14px;
}

.link.strong{
color:var(--primary);
font-weight:600;
}

.link:hover{
text-decoration:underline;
}

.link:active{
opacity:.7;
}

.auth-actions{
margin-top:10px;
}

.auth-switch{
margin-top:18px;
text-align:center;
}

.auth-switch .link.strong{

display:inline-block;

margin-top:10px;

padding:10px 16px;

border:1px solid var(--border);

border-radius:var(--radius-sm);

background:var(--surface);

font-weight:600;

cursor:pointer;

transition:background .15s ease, transform .05s ease;

}

.auth-switch .link.strong:hover{
background:#F1F6FF;
}

.auth-switch .link.strong:active{
transform:scale(.98);
}


/* ===============================
--- TOUR VISIBILITY TOGGLE --- 
==================================*/

.visibility-switch{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
margin-top:8px;
flex-shrink:0;
}

.visibility-switch .state{
color:var(--ink-soft);
font-weight:500;
user-select:none;
}

/* switch container */

.switch{
position:relative;
width:46px;
height:24px;
flex-shrink:0;
}

.switch input{
display:none;
}

/* track */

.track{
position:absolute;
width:100%;
height:100%;
background:#d1d5db;
border-radius:20px;
transition:background .25s ease;
}

/* knob */

.track:before{
content:"";
position:absolute;
height:18px;
width:18px;
left:3px;
top:3px;
background:#fff;
border-radius:50%;
box-shadow:0 1px 3px rgba(0,0,0,.25);
transition:transform .25s ease;
}

/* ON state */

.switch input:checked + .track{
background:var(--accent);
}

.switch input:checked + .track:before{
transform:translateX(22px);
}