body.loading #chatContainer {
    visibility: hidden;
}

html, body{
height:100%;
width:100%;
margin:0;
padding:0;
font-family:Arial, sans-serif;
}

body{
margin:0;
font-family:Arial, sans-serif;
background:#f7f7f8;
height:100vh;
display:flex;
}

#app{
display:flex;
width:100%;
height:100vh;
}

/* SIDEBAR */

#sidebar{
width:260px;
background:#202123;
color:white;
display:flex;
flex-direction:column;
transition:width 0.2s ease;
}

#sidebar-header{
display:flex;
flex-direction:column;
padding:10px 8px;
}

.sidebar-spacer{
height:16px;   /* adjust if you want more/less */
}

.sidebar-item{
display:flex;
align-items:center;
justify-content: flex-start;

gap:10px;
padding:6px 10px;

height:40px;
border-radius:999px;

color:#d1d5db;
cursor:pointer;

transition:background 0.2s ease;

box-sizing:border-box;
}

.sidebar-item,
#userProfile,
.profile-inner {
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

.sidebar-item,
#userProfile {
   -webkit-tap-highlight-color: transparent;
}

.sidebar-item svg{
width:18px;
height:18px;
fill: currentColor;
user-select: none;
pointer-events: none;
}

.sidebar-item:hover{
background:#2f3037;
}

#menuToggle{
width:40px;
padding:0;
justify-content:center;
border-radius:50%;
flex-shrink:0;
}

#menuToggle:hover{
background:#2f3037;
color: #fff;
}

.icon-box{
width:40px;
height:40px;

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

flex-shrink:0;

}

.icon-box svg{
width:18px;
height:18px;
}

#newChatBtn{
display:flex;
align-items:center;
gap:10px;

height:40px;
max-width: 240px;
padding:6px 0;

border-radius:999px;
background:transparent;
}

#newChatBtn .icon-box svg{
transform: scale(0.9);
stroke-width: 2;
}

#newChatBtn:hover{
background:#2f3037;
}

.newchat-text{
white-space:nowrap;
transition:opacity 0.15s ease;
font-size: 14px;
}

.sidebar-collapsed .newchat-text{
opacity: 0;
width: 0;
overflow: hidden;
}


.sidebar-collapsed .sidebar-item{
justify-content:center;
}

.sidebar-collapsed #sidebar{
width:64px;
}

.sidebar-collapsed #menuToggle{
width:40px;
padding:0;
justify-content:center;
}

.sidebar-collapsed #newChatBtn{
width:40px;
height: 40px;
padding-left: 10px;
justify-content:center;
border-radius: 50%;
}

#chatHistory{
flex:1;
overflow-y:auto;
padding:10px;
}

.history-item{
padding:8px;
margin-bottom:5px;
cursor:pointer;
border-radius:5px;
}

.history-item:hover{
background:#343541;
}

#userProfile{
display:flex;
align-items:center;
gap:10px;

height:40px;
max-width:240px;

/* 👇 THIS IS THE FIX */
padding:6px 0;
margin-left: -2px;

border-radius:999px;
background:transparent;

margin-bottom:14px;

box-sizing: border-box;

position: relative;
}

/* Divider line */
#userProfile::before{
content:"";
position:absolute;

top:-14px;   /* space above profile */
left:8px;    /* match sidebar padding */
right:-14px;

height:1px;
background:#3f4046;   /* subtle grey */

pointer-events: none;
}

#userProfile::after{
content:"";
position:absolute;

top:-44px;   /* height of blur area */
left:8px;
right:-14px;

height:30px;

pointer-events:none;

/* dark fade (black blur effect) */
background:linear-gradient(
to bottom,
rgba(32,33,35,0) 0%,
rgba(32,33,35,0.85) 70%,
rgba(32,33,35,1) 100%
);

z-index:1;
}

/* Profile Pic */
#profilePic{
width:36px;
height:36px;

border-radius:50%;
background:#5a7cff;

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

font-size:14px;
font-weight:400;
color:white;

overflow:hidden;
flex-shrink:0;

}

#profilePic.has-image{
   background: transparent;
}

.profile-inner{
display:flex;
align-items:center;
gap:10px;

height:45px;
width: 100%;
max-width:240px;

padding:8px 10px 8px 14px;

border-radius:999px;

box-sizing:border-box;
position: relative;
}

/* HOVER NOW PERFECT */
.profile-inner::before{
content:"";
position:absolute;

top:0;
bottom:0;

left:8px;     /* 👈 MOVE HOVER RIGHT FROM HERE */
right:-8px;

border-radius:999px;
background:#2f3037;

opacity:0;
transition:opacity 0.2s ease;

z-index:0;
}

.profile-inner:hover::before{
opacity:1;
}

/* KEEP CONTENT ABOVE */
.profile-inner > *{
position:relative;
z-index:1;
}

.sidebar-collapsed .profile-inner::before{
left:9.5px;
right:0;

width:45px;
height:45px;

margin:auto;   /* center it */

border-radius:50%;   /* make it circle */
}

#profilePic img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}

/* Name */
#profileName{
font-size:14px;
font-weight:500;
color:#e5e7eb;
}

/* COLLAPSED */
#profileInfo{
white-space:nowrap;
transition:opacity 0.15s ease;
}

.sidebar-collapsed #profileInfo{
opacity:0;
width:0;
overflow:hidden;
}

.sidebar-collapsed #userProfile{
    width:40px;
    height:40px;

    margin-left: -2px;

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

    border-radius:50%;
}

/* MAIN CHAT AREA */

#main{
flex:1;
display:flex;
flex-direction:column;
background:white;
}

#header{
padding:12px 15px;
font-weight:bold;
color:#4b5563;

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

background:white;
}

#headerTitle{
font-size:16px;
font-weight:600;
}

/* Default logo (FD) */
.logo-fd{
width:34px;
height:34px;
object-fit:contain;
margin-top:0px;
border-radius: 999px;
}

/* CD logo different size */
.logo-cd{
width:50px;
height:50px;
object-fit:contain;
margin-top:-7px;
margin-right: -8px;
border-radius: 999px;
}

/* CHAT AREA */

#chatContainer{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
overflow-y:hidden;
position: relative;
}

#chat{
flex:1;

width:100%;
max-width:740px;

margin:0 auto 90px auto;

padding:20px 20px 120px 20px;

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

overflow-y:auto;

scrollbar-width:none;

transition: padding-bottom 0.15s ease;

height:calc(100vh - 160px);

contain: layout style;

}

#chat::-webkit-scrollbar{
display:none;
}


.user{
background:linear-gradient(135deg, #7300e2 0%, #8e3cff 50%, #5a7cff 100%);
color:white;
align-self:flex-end;
box-shadow:0 2px 6px rgba(115,0,226,0.25);
max-width: 75%;
}

.bot{
display: flex;
gap: 20px;
background:none;
align-items: flex-start;
align-self:flex-start;
max-width: 100%;
}

.bot-stopped{
font-size:13px;
color:#6b7280;
font-style:italic;
margin-top: 17px;
line-height:1.6;
}

.bot-card{
margin-top:6px;

background:#f5f5f5;
border-radius:12px;
border:1px solid #e5e7eb;

padding:10px;

display:flex;
flex-wrap:wrap;
gap:8px;

box-shadow:0 1px 3px rgba(0,0,0,0.05);

width: fit-content;
max-width: 100%;
}

.bot-row{
display:flex;
align-items:flex-start;
gap:16px;
width:100%;
}

.bot-text{
flex:1;
display:block;
flex-direction:column;
width: 100%;
}

.bot-icon{
width:30px;
height:50px;

margin-top:-4px;
flex-shrink:0;

filter:
drop-shadow(0 0 6px rgba(90,124,255,0.55))
drop-shadow(0 0 12px rgba(90,124,255,0.35));
}

.bot-loader-icon{
width:30px;
height:50px;
margin: 10px 0;
padding: 12px 16px;
margin-top:-4px;

animation:infinityPulse 1.6s ease-in-out infinite;
}

.bot-content{
flex:1;
width: 100%;
}


@keyframes fadeIn{
to{opacity:1;}
}

/* INPUT AREA */

#inputContainer{
display:flex;
justify-content:center;
width:100%;
}

#inputArea{
width:100%;
max-width:740px;
display:flex;
align-items:flex-end;
background:#f3f4f6;
border-radius:30px;
padding:8px 10px;
gap:8px;
margin-bottom: 10px;

border: 1px solid #e5e7eb;
box-shadow: 0 1px 2px rgba(0,0,0,0.04),
        0 4px 12px rgba(0,0,0,0.06);

transition: all 0.2s ease;

}

#inputArea:focus-within{
    border-color:#c7d2fe;  /* slight blue tint */
    box-shadow:
        0 2px 6px rgba(90,124,255,0.15),
        0 8px 20px rgba(90,124,255,0.15);
}

#message{
flex:1;
border:none;
background:transparent;
padding:10px;
font-size:15px;
outline:none;
resize:none;
font-family:inherit;

min-height:22px;
max-height:120px;
overflow-y:hidden;
line-height: 1.4;
}

.message{
margin:10px 0;
padding:12px 16px;
border-radius:14px;
line-height:1.6;
word-wrap:break-word;
}


button{
border:none;
outline:none;
cursor:pointer;
}

/* Upload Button */

#uploadBtn{
width:36px;
height:36px;
border-radius:50%;
background:transparent;
display:flex;
align-items:center;
justify-content:center;
color:#666;
align-self: flex-end;
margin-bottom: 3px;
}

#uploadBtn:hover{
background:#e5e7eb;
}

/* Send Button */

#sendBtn{
width:36px;
height:36px;
border-radius:50%;
background:linear-gradient(135deg, #7300e2 0%, #8e3cff 50%, #5a7cff 100%);
display:flex;
align-items:center;
justify-content:center;
color:white;
transition:all 0.2s ease;
align-self: flex-end;
margin-bottom: 2.8px;
}


/* glow state */

#sendBtn.active{
box-shadow:0 0 8px rgba(115,0,226,0.5);
transform:scale(1.05);
}

#sendBtn:hover{
transform:scale(1.05);
box-shadow:0 4px 10px rgba(115,0,226,0.35);
}

/* ACTION BUTTONS */
.action-buttons{
display:flex;
flex-wrap:wrap;
gap:12px;   /* 👈 THIS is what you want */
}


.action-buttons button{
flex:1;
padding:9px 12px;
font-size:13px;
border-radius:8px;
white-space:nowrap;

border:1px solid;
transition:all 0.15s ease;
}

.action-buttons button:disabled{
opacity:0.55;
cursor:not-allowed;
transform:none;
box-shadow:none;
}

/* Issue Resolved */
.btn-resolved{
    background:#e8f8ee;
    color:#15803d;
    border:0.3px solid; 
    border-color: #bbf7d0;
}

.btn-resolved:not(:disabled):hover{
    background:#dff5e7;
}


/* Still Not Working */
.btn-retry{
    background:#fdecec;
    color:#b91c1c;
    border:0.3px solid;
    border-color: #fecaca;
}

.btn-retry:not(:disabled):hover{
    background:#fbdede;
}


/* Create Ticket */
.btn-ticket{
    background:#fff8e6;
    color:#b45309;
    border:0.3px solid;
    border-color: #fde68a;
}

.btn-ticket:not(:disabled):hover{
    background:#fef3c7;
}

.typing{
display:flex;
gap:6px;
padding:4px 0;
}

.typing span{
width:8px;
height:8px;
background:#999;
border-radius:50%;
animation:typing 1.4s infinite;
}

.typing span:nth-child(2){
animation-delay:0.2s;
}

.typing span:nth-child(3){
animation-delay:0.4s;
}

@keyframes typing{
0%{opacity:0.2}
20%{opacity:1}
100%{opacity:0.2}
}

#loading{
display:none;
margin:10px 0;
padding:0;
max-width:740px;
}

/* LOGIN BACKGROUND */

.login-bg{
height:100vh;
width:100%;

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

background:
radial-gradient(circle at center, rgba(115,0,226,0.15), transparent 60%),
linear-gradient(180deg,#0b0b0f 0%, #111827 50%, #1f2937 100%);
}

/* CARD */

.login-card{
background:white;
padding:15px 35px;
border-radius:14px;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
text-align:center;

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

/* TITLE */

.login-card h2{
font-size:18px;
margin-bottom:25px;
color:#555;
font-weight:500;
}

/* BRAND */

.brand{
font-size:20px;
font-weight:700;
margin-bottom:2px;
}

/* MICROSOFT BUTTON */

.login-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;

width:100%;
padding:12px;

border:none;
border-radius:8px;

background:#1f2937;
color:white;

font-size:15px;
cursor:pointer;
transition: all 0.2s ease;
}

.login-btn:hover{
background:#111827;
}

.ms-logo{
width:18px;
height:18px;
margin-right:8px;
}

.orb-gif{
width:140px;
height:140px;
object-fit:contain;
}

.brand{
font-size:22px;
font-weight:700;
margin-bottom:4px;
}

.subtitle{
font-size:14px;
color:#6b7280;
margin-bottom:12px;
line-height:1.2;
}

.tagline{
font-size:15px;
font-weight:600;
margin-top: 30px;
margin-bottom:0px;
color:#111827;
}

.dept{
font-size:13px;
color:#6b7280;
margin-top:0px;
margin-bottom:22px;
line-height:1.2;
}

.ai-orb{
display:flex;
justify-content:center;
align-items:center;
margin:0;

position:relative;
}

.ai-orb::before{
content:"";
position:absolute;

width:180px;
height:180px;

background:radial-gradient(circle,#7300e2 0%, transparent 70%);

filter:blur(40px);
opacity:0.6;

z-index:-1;
}

.orb-gif{
width:110px;
height:110px;

object-fit:cover;

display:block;
margin:-2px auto;
}

.forgot-link{
font-size:13px;
color:#6b7280;
margin-top:10px;
cursor:pointer;
}

.forgot-link:hover{
color:#7300e2;
text-decoration:underline;
}

.welcome-input{
width:100%;
max-width:740px;
display:flex;
justify-content:center;
margin-bottom:20px;
}

.welcome-input input{
width:420px;
padding:14px;
border-radius:12px;
border:1px solid #ccc;
}

.welcome-content{
display:flex;
flex-direction:column;
align-items:center;
gap:24px;
width:100%;
max-width:740px;
margin:0 auto;
}

#welcomeSend{
background:#7300e2;
border:none;
border-radius:10px;
padding:10px;
cursor:pointer;
}


.suggestions button{
background:#f3f4f6;
border:none;

padding:14px 18px;
font-size:14px;
font-weight:500;

border-radius:12px;
cursor:pointer;

transition:all 0.15s ease;
}


.suggestions button:hover{
background:#e5e7eb;
transform:translateY(-1px);
}



#chat{
display:none;
}


#welcomeTitle{
font-size:20px;
font-weight:600;
margin:0;
color:#111827;

transform: translateX(calc(50% - 199px));
}

.welcome-row{
display:flex;
align-items:center;
gap:11px;
}

.welcome-icon{
width:26px;
height:26px;

filter:
drop-shadow(0 0 6px rgba(90,124,255,0.6))
drop-shadow(0 0 12px rgba(90,124,255,0.4));
}

.welcome-sub{
font-size:30px;
font-weight:700;
color:#111827;
margin-top:-10px;
margin-bottom:14px;
width: 740px;
text-align: center;
}


.suggestions{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
max-width:740px;
}

.suggestions button{
display:flex;
align-items:center;
gap:8px;

background:#f3f4f6;
border:none;

padding:14px 18px;
font-size:14px;
font-weight:500;

border-radius:12px;
cursor:pointer;

transition:all 0.15s ease;
}

.suggestions button:hover{
background:#e5e7eb;
transform:translateY(-1px);
}


#welcomeScreen{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;

width:100%;
max-width:740px;
margin:0 auto;
margin-top: -30px;
gap:20px;

transition:opacity 0.35s ease, transform 0.35s ease;
}


body.chat-started #chat{
display:flex;
}

/* CHAT MODE LAYOUT */

body.chat-started #chatContainer{
display:flex;
flex-direction:column;
align-items:center;
}

body.chat-started #chat{
display:flex;
flex-direction:column;
width:100%;
max-width:740px;
margin:0 auto;
}



body.chat-started #chat{
display:flex;
}



body.chat-started #inputContainer{
position:fixed;
bottom:0;
left:260px;
width:calc(100% - 260px);

padding:15px 0;
background:transparent;

display:flex;
justify-content:center;
z-index:10;

}

body:not(.chat-started) #chatContainer{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

body:not(.chat-started) #inputContainer{
position:relative;
width:100%;
max-width:740px;
transform:translateY(0);
}

#chatContainer::after{
content:"";

position:fixed;

bottom:0;
left:260px; /* sidebar width */
right:0;

height:80px;


/* smooth fade */
background:white;

pointer-events:none;

z-index:5;
}

.bot-loader{

background:none;

}

/* infinity pulse animation */

.typing-icon{
width:30px;
height:30px;
animation:pulse 1.4s infinite ease-in-out;
}

@keyframes infinityPulse{

0%{
transform:scale(0.95);
filter:
drop-shadow(0 0 6px rgba(90,124,255,0.5))
drop-shadow(0 0 10px rgba(90,124,255,0.4));
}

50%{
transform:scale(1.08);
filter:
drop-shadow(0 0 14px rgba(90,124,255,0.95))
drop-shadow(0 0 22px rgba(90,124,255,0.65));
}

100%{
transform:scale(0.95);
filter:
drop-shadow(0 0 6px rgba(90,124,255,0.5))
drop-shadow(0 0 10px rgba(90,124,255,0.4));
}

}

#chatFade{
position:absolute;
bottom:55px;          /* height where fade starts (above textbox) */
left:0;
right:0;
height:60px;

pointer-events:none;

background:linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.9) 65%,
rgba(255,255,255,1) 100%
);

z-index:4;
}


/* Profile dropdown menu */
#profileMenu{
position:absolute;
bottom:64px;
left:10px;
display:none;
z-index:20;
}

.profile-card{
width:220px;
background:#2f3037;
color:white;
border-radius:12px;
padding:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.35);
}

.profile-card-name{
font-size:14px;
font-weight:600;
cursor: default;
}

.profile-card-email{
font-size:12px;
color:#c7c7c7;
margin-top:2px;
word-break:break-all;
cursor: default;
}

.profile-divider{
height:1px;
background:#444;
margin:10px 0 8px 0;
}

.profile-signout{
display:flex;
align-items:center;
gap:10px;

padding:8px;
border-radius:999px;
cursor:pointer;

font-size:14px;
font-weight: 200;
color:#e5e7eb;
}

.profile-signout:hover{
background:#3a3b42;
}

body.loading #welcomeScreen,
body.loading #chat{
    display:none !important;
}

.otp-boxes {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.otp-input {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    text-align: center;
    font-size: 15px;
    outline: none;
    background: white;

    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 10px rgba(0,0,0,0.04);

    transition: all 0.2s ease;
}

.otp-input:focus {
    border-color:#c7d2fe;
    background: white;

    box-shadow:
        0 2px 6px rgba(90,124,255,0.15),
        0 8px 18px rgba(90,124,255,0.18);
}


.otp-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.otp-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.otp-verify-btn {
    width: auto;
    flex: none;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    margin-top: 5px;
    border: 1px solid currentColor;
}

.otp-btn-row{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-top:4px;
}

.action-buttons button,
.otp-verify-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    height: 34px;
}

.otp-resend{
    font-size:12px;
    color:#6b7280;
    user-select:none;

}

.otp-resend-link{
    font-size:12px;
    color:#5a7cff;
    cursor:pointer;
    font-weight:500;
}

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

.otp-resend-link.disabled {
    pointer-events: none;
    color: #6b7280;
    cursor: not-allowed;
}

/* Fix Create Ticket button alignment inside OTP card */
/* Make Create Ticket button identical to Verify button inside OTP card */
.otp-btn-row .btn-ticket{
    height:34px;
    padding:9px 14px;
    border-radius:8px;
    margin-top:5px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.otp-btn-row .btn-retry{
   height:34px;
   padding:9px 14px;
   border-radius:8px;
   margin-top:5px;
   display:flex;
   align-items:center;
   justify-content:center;
}

.otp-btn-row + .otp-resend{
   margin-top:20px;
}

.otp-btn-row .action-buttons{
   flex: 0;
   gap:12px;
    flex-wrap: nowrap;
}

/* Only cancel OTP card resend alignment */
.otp-cancel-wrapper{
  align-items: stretch;
}
.otp-cancel-wrapper .otp-resend{
  width:100%;
  text-align:left;
}

.otp-cancel-wrapper .otp-btn-row{
   margin-bottom:6px;
}

.copy-password-btn {
   transition: all 0.15s ease;
}
.copy-password-btn:hover {
   background-color: rgba(255,255,255,0.08);
   opacity: 1;
   transform: scale(1.05);
}

.btn-mfa {
  background-color: #e0f2fe;   /* pastel blue */
  color: #1d4ed8;              /* strong blue (not purple) */
  border: 1px solid #93c5fd;   /* soft blue border */
}
.btn-mfa:not(:disabled):hover {
  background-color: #bae6fd;
}

/* DL FORM */
.dl-wrapper{
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 8px;
   max-width: 100%;
}
.dl-field{
   display: flex;
   flex-direction: column;
   gap: 4px;
}
.dl-field label{
   font-size: 12px;
   color: #6b7280;
}
/* INPUT STYLE (same feel as OTP) */
.dl-input{
   height: 36px;
   border-radius: 8px;
   width: 100%;
   border: 1px solid #e5e7eb;
   padding: 0 10px;
   font-size: 14px;
   outline: none;
   background: white;
   box-shadow:
       0 1px 2px rgba(0,0,0,0.04),
       0 4px 10px rgba(0,0,0,0.04);
    box-sizing: border-box;
   transition: all 0.2s ease;
}
.dl-input:focus{
   border-color:#c7d2fe;
   box-shadow:
       0 2px 6px rgba(90,124,255,0.15),
       0 8px 18px rgba(90,124,255,0.18);
}
/* EMAIL ROW */
.dl-email-row{
   display: flex;
   align-items: center;
   gap: 6px;
}
.dl-domain{
   font-size: 13px;
   color: #6b7280;
}
/* BUTTON ROW */
.dl-btn-row{
   display: flex;
   gap: 10px;
   margin-top: 8px;
}
/* BUTTON SIZE FIX */
.dl-btn-row button{
   height: 34px;
   padding: 8px 14px;
   font-size: 13px;
   border-radius: 8px;

   border: 1px solid;
   box-sizing: border-box;
}

.dl-input::placeholder{
   font-size: 13px;
   color: #9ca3af;
}


/* DL Expiry placeholder style (default like input placeholder) */
.dl-expiry {
   color: #6b7280; /* same as textbox placeholder */
}
/* When user selects value */
.dl-expiry.selected {
    font-size: 14px;
   color: #111827;
}
/* Clean modern dropdown arrow */
.dl-expiry {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-color: white;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 12px center;
   background-size: 14px;
   padding-right: 36px;
}

/* Make Select expiry EXACT like placeholder */
.dl-expiry {
   font-size: 13px;       /* match placeholder */
   color: #9ca3af;        /* exact placeholder color */
   font-weight: 400;
}

/* Fix dropdown option colors */
.dl-expiry option {
   color: #111827; /* normal text color */
}

.dl-expiry option:hover {
   background-color: #f3f4f6;
}

/* CUSTOM DROPDOWN */
.custom-dropdown {
   position: relative;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
   cursor: pointer;
}
/* Selected box (looks like input) */
.dropdown-selected {
   height: 36px;
   border-radius: 8px;
   border: 1px solid #e5e7eb;
   padding: 0 36px 0 10px; /* space for arrow */
   font-size: 13px;
   color: #9ca3af;
   display: flex;
   align-items: center;
   background: white;
   box-shadow:
       0 1px 2px rgba(0,0,0,0.04),
       0 4px 10px rgba(0,0,0,0.04);
   transition: all 0.2s ease;
   position: relative;
   cursor: pointer;
}
.custom-dropdown.open .dropdown-selected {
  border-color: #c7d2fe;
  box-shadow:
      0 2px 6px rgba(90,124,255,0.15),
      0 8px 18px rgba(90,124,255,0.18);
}
/* Dropdown arrow */
.dropdown-selected::after {
   content: "";
   position: absolute;
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
   width: 14px;
   height: 14px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   background-size: contain;
   background-repeat: no-repeat;
}
/* When selected */
.dropdown-selected.active {
   color: #111827;
   font-size: 14px;
}
/* Dropdown list */
.dropdown-options {
   position: absolute;
   top: 42px;
   left: 0;
   right: 0;
   width: 100%;   /* ✅ lock to input width */
   max-width: 100%; /* ✅ prevent expansion */
   background: white;
   border-radius: 10px;
   overflow-y: auto;
   overflow-x: hidden;
   box-shadow:
       0 6px 18px rgba(0,0,0,0.08),
       0 12px 30px rgba(0,0,0,0.06);
   padding: 6px;
   box-sizing: border-box;
   display: none;
   z-index: 10;
   max-height: 215px;
   scrollbar-gutter: stable;
}
/* Show dropdown */
.custom-dropdown.open .dropdown-options {
   display: block;
}

/* Open upwards */
.custom-dropdown.open-up .dropdown-options {
   top: auto;
   bottom: 42px;
}
/* Option */
.dropdown-option {
   display: block;
   width: 100%;
   padding: 10px 12px;
   font-size: 14px;
   color: #111827;
   transition: background 0.15s ease;
}
/* Hover */
.dropdown-option:hover {
   background: #f3f4f6;
}
/* Rounded corners */
.dropdown-option:first-child {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}
.dropdown-option:last-child {
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
}

.dropdown-options::-webkit-scrollbar {
  width: 6px;
}
.dropdown-options::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 6px;
}
.dropdown-options::-webkit-scrollbar-track {
  background: transparent;
}
 
.dropdown-option.selected {
   background: #eef2ff;   /* light blue */
   font-weight: 500;
}

/* Disabled dropdown */
.custom-dropdown.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Show cursor on inner box also */
.custom-dropdown.disabled .dropdown-selected {
  cursor: not-allowed;
}

/* 🔴 Missing field highlight */
.dl-input.missing,
.dropdown-selected.missing {
   border-color: #fca5a5 !important;
   background-color: #fff1f2;
}

.dl-review {
 display: flex;
 flex-direction: column;
 gap: 10px; 
}
.dl-row {
 line-height: 1.4;
}

.dl-review .dl-btn-row {
 margin-top: 4px;
}

.dl-form {
   display: flex;
   flex-direction: column;
   gap: 10px;   /* 🔥 THIS FIXES ALL YOUR SPACING */
}
.dl-field {
   display: flex;
   flex-direction: column;
   gap: 4px;   /* space between label & input */
}

.dl-confirm:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

.custom-dropdown.missing .dropdown-selected {
   border-color: #fca5a5 !important;
   background-color: #fff1f2;
}

/* =========================
  APPROVAL PAGE STYLES
========================= */
.login-card .approval-title {
 font-size: 20px;
 font-weight: 600;
 line-height: 1.3;
}
.login-card .approval-details {
 font-size: 16px;
 font-weight: 500;
 color: #374151;
}
.login-card .approval-message {
 font-size: 14px;
 font-weight: 400;
 color: #6b7280;
}