/* ================= GLOBAL ================= */

body{
font-family: Arial, sans-serif;
background:#f6f6f6;
margin:0;
padding:0;
}

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

.header{
background:linear-gradient(90deg,#ff7a18,#ffb347);
color:white;
padding:15px;
text-align:center;
font-size:26px;
font-weight:bold;
}

/* ================= TOOL BAR ================= */

.tools{
background:white;
padding:10px;
text-align:center;
border-bottom:1px solid #ddd;
}

.tools button{
background:#ff7a18;
color:white;
border:none;
padding:8px 15px;
margin:5px;
border-radius:5px;
cursor:pointer;
font-size:14px;
}

.tools button:hover{
background:#ff5e00;
}

/* ================= CONTAINER ================= */

.container{
width:92%;
margin:auto;
margin-top:20px;
}

/* ================= TEXTAREAS ================= */

.boxes{
display:flex;
gap:20px;
}

textarea{
width:100%;
height:260px;
padding:10px;
border:1px solid #ccc;
border-radius:5px;
font-family:monospace;
resize:vertical;
}

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

.buttons{
text-align:center;
margin:20px;
}

button{
padding:10px 20px;
margin:5px;
border:none;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}

.compare{ background:#28a745; color:white; }
.switch{ background:#007bff; color:white; }
.clear{ background:#dc3545; color:white; }

.compare:hover{ background:#1e7e34; }
.switch:hover{ background:#0056b3; }
.clear:hover{ background:#c82333; }

/* ================= RESULT ================= */

.result{
margin-top:40px;
}

.diff-container{
display:flex;
gap:20px;
}

/* ================= DIFF BOX ================= */

.diff-box{
width:50%;
background:white;
border:1px solid #ddd;
padding:10px;
height:350px;
overflow:auto;
font-family:monospace;
}

/* ================= LINE ================= */

.line{
display:flex;
border-bottom:1px solid #f0f0f0;
}

.number{
width:45px;
text-align:right;
color:#999;
padding-right:10px;
user-select:none;
}

.code{
flex:1;
white-space:pre-wrap;
}

/* ================= DIFF COLORS ================= */

.add{
background:#d6ffd6;
color:#060;
padding:2px 4px;
border-radius:3px;
display:inline-block;
width:100%;
}

.remove{
background:#ffd6d6;
color:#900;
padding:2px 4px;
border-radius:3px;
display:inline-block;
width:100%;
}

/* ================= NAV ================= */

.nav-strip{
width:55px;
text-align:center;
}

.nav-strip button{
display:block;
margin:12px auto;
background:#ff7a18;
color:white;
width:38px;
height:38px;
border-radius:50%;
font-size:16px;
}

.nav-strip button:hover{
background:#ff5e00;
}

/* ================= FOOTER ================= */

.footer{
position: fixed;
bottom: 0;
width: 100%;
margin-top:40px;
background:#333;
color:white;
text-align:center;
padding:15px;
font-size:14px;


/* 
margin-top:40px;
background:#333;
color:white;
text-align:center;
padding:15px;
font-size:14px; */
}

/* ================= JSON TOOL ================= */

.json-container{
display:flex;
gap:20px;
padding:20px;
/* background:linear-gradient(135deg,#1abc9c,#16a085); */
border-radius:10px;
}

.editor-box{
flex:1;
height:500px;
background:white;
border-radius:8px;
overflow:hidden;
}

.editor{
height:100%;
}

.json-actions{
display:flex;
flex-direction:column;
justify-content:center;
gap:15px;
}

.json-actions button{
background:#ff7a18;
color:white;
border:none;
padding:10px 15px;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}

.json-actions button:hover{
background:#ff5e00;
}

/* ================= TOASTER ================= */

.toaster {
visibility: hidden;
min-width: 250px;
background: #333;
color: #fff;
text-align: center;
border-radius: 8px;
padding: 12px;
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}

.toaster.show {
visibility: visible;
animation: fadein 0.3s, fadeout 0.3s 2.7s;
}

.toaster.success { background: #28a745; }
.toaster.error { background: #dc3545; }
.toaster.info { background: #17a2b8; }

@keyframes fadein {
from { opacity: 0; bottom: 0; }
to { opacity: 1; bottom: 30px; }
}

@keyframes fadeout {
from { opacity: 1; bottom: 30px; }
to { opacity: 0; bottom: 0; }
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){

/* FIX: pehle galat jagah band ho raha tha */
.boxes{
flex-direction:column;
}

.diff-container{
flex-direction:column;
}

.diff-box{
width:100%;
}

.nav-strip{
display:flex;
justify-content:center;
gap:10px;
width:100%;
}

.nav-strip button{
display:inline-block;
}

/* LINE FIX */
.line{
padding:2px 5px;
}

.number{
width:40px;
margin-right:10px;
}

.code{
white-space:pre;
}

/* JSON RESPONSIVE FIX */
.json-container{
flex-direction:column;
}

.json-actions{
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}

} /* FIX: yaha closing properly diya */



/* ================= SQL TOOL ================= */

.sql-container{
display:flex;
gap:20px;
padding:20px;
background:linear-gradient(135deg,#ff7a18,#ffb347);
border-radius:10px;
flex-wrap:wrap;
}

.sql-container textarea{
width:100%;
height:400px;
padding:10px;
border:none;
outline:none;
resize:both;
font-family:monospace;
}

/* BUTTONS */
.sql-actions{
display:flex;
flex-direction:column;
justify-content:center;
gap:10px;
}

.sql-actions button{
background:#ff7a18;
color:white;
border:none;
padding:10px;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}

.sql-actions button:hover{
background:#ff5e00;
}

/* RESPONSIVE */
@media(max-width:900px){
.sql-container{
flex-direction:column;
}
.sql-actions{
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
}

/* ================= DASHBOARD ================= */

.dashboard{
text-align:center;
padding:20px;
}

.dashboard-title{
font-size:28px;
margin-bottom:20px;
color:#333;
}

/* GRID */

.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

/* CARD */

.tool-card{
background:white;
border-radius:15px;
padding:30px 20px;
cursor:pointer;
transition:0.3s;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
}

/* ICON */

.tool-card i{
font-size:40px;
color:#ff7a18;
margin-bottom:15px;
}

/* TITLE */

.tool-card h3{
margin:10px 0;
}

/* TEXT */

.tool-card p{
color:#777;
font-size:14px;
}

/* HOVER EFFECT */

.tool-card:hover{
transform:translateY(-8px) scale(1.03);
box-shadow:0 15px 25px rgba(0,0,0,0.2);
}

/* GRADIENT BORDER EFFECT */

.tool-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,#ff7a18,#ffb347);
}

/* RESPONSIVE */

@media(max-width:600px){
.dashboard-title{
font-size:22px;
}
}

.tools button.active{
background:#333;
}
/* ===== NAVBAR PREMIUM ===== */

.tools{
position:relative; /* 🔥 IMPORTANT */
background:white;
padding:10px;
text-align:center;
border-bottom:1px solid #ddd;
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}

/* BUTTON */

.tools button{
background:transparent;
color:#333;
border:none;
padding:8px 15px;
margin:5px;
border-radius:5px;
cursor:pointer;
font-size:14px;
position:relative;
z-index:2;
transition:0.3s;
}

.tools button:hover{
color:#ff7a18;
}

/* ACTIVE TEXT */

.tools button.active{
color:#ff7a18;
font-weight:bold;
}

/* 🔥 SLIDING INDICATOR */

.nav-indicator{
position:absolute;
bottom:0;
height:3px;
background:linear-gradient(90deg,#ff7a18,#ffb347);
border-radius:5px;
transition:all 0.3s ease;
left:0;
width:0;
}

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

.ultra-nav{
position:sticky;
top:0;
z-index:999;
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;

/* GLASS EFFECT */
background:rgba(255,255,255,0.7);
backdrop-filter:blur(10px);

padding:10px;
border-bottom:1px solid rgba(0,0,0,0.1);
transition:0.3s;
}

/* SHADOW ON SCROLL */
.ultra-nav.scrolled{
box-shadow:0 5px 20px rgba(0,0,0,0.15);
}

/* BUTTON STYLE */

.ultra-nav button{
background:transparent;
border:none;
padding:8px 15px;
cursor:pointer;
font-size:14px;
position:relative;
color:#333;
transition:0.3s;
z-index:2;
}

.ultra-nav button:hover{
color:#ff7a18;
transform:translateY(-2px);
}

/* ACTIVE */

.ultra-nav button.active{
color:#ff7a18;
font-weight:bold;
}

/* INDICATOR */

.nav-indicator{
position:absolute;
bottom:0;
height:3px;
background:linear-gradient(90deg,#ff7a18,#ffb347);
border-radius:5px;
transition:all 0.35s cubic-bezier(.4,0,.2,1);
left:0;
width:0;
}

/* HOVER GLOW */

.ultra-nav button::after{
content:"";
position:absolute;
bottom:-5px;
left:50%;
transform:translateX(-50%);
width:0;
height:6px;
background:rgba(255,122,24,0.2);
border-radius:50%;
transition:0.3s;
}

.ultra-nav button:hover::after{
width:40%;
}

/* MOBILE */

@media(max-width:768px){
.ultra-nav{
overflow-x:auto;
justify-content:flex-start;
}
}
/* ================= DARK MODE ================= */

body.dark{
background:#121212;
color:#eee;
}

/* HEADER */
body.dark .header{
background:linear-gradient(90deg,#232526,#414345);
}

/* NAVBAR */
body.dark .ultra-nav{
background:rgba(30,30,30,0.8);
}

/* BUTTONS */
body.dark .tools button{
color:#ccc;
}

body.dark .tools button.active{
color:#ffb347;
}

/* BOXES */
body.dark textarea,
body.dark .diff-box,
body.dark .editor-box{
background:#1e1e1e;
color:#eee;
border:1px solid #333;
}

/* JSON AREA */
body.dark .json-container{
background:linear-gradient(135deg,#232526,#414345);
}

/* SQL AREA */
body.dark .sql-container{
background:linear-gradient(135deg,#232526,#414345);
}

/* CARDS */
body.dark .tool-card{
background:#1e1e1e;
color:#eee;
}

/* FOOTER */
body.dark .footer{
background:#111;
}

/* TOASTER */
body.dark .toaster{
background:#222;
color:#fff;
}

/* ICON TOGGLE STYLE */
.dark-toggle{
position:absolute;
right:20px;
top:15px;
cursor:pointer;
font-size:18px;
color:white;
}
#darkToggle{
font-size:20px;
margin-right:20px;
transition:0.3s;
}

#darkToggle:hover{
transform:scale(1.2) rotate(10deg);
}

/* ===================== */
/* CODE BEAUTIFIER UI */
/* ===================== */

.beautifier-container{
display:flex;
gap:20px;
padding:20px;
flex-wrap:wrap;
background:linear-gradient(135deg,#ff7a18,#ffb347);
border-radius:10px;
}

.beautifier-actions{
display:flex;
flex-direction:column;
justify-content:center;
gap:12px;
}

.beautifier-actions button{
background:#fff;
color:#ff7a18;
border:none;
padding:10px;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}

.beautifier-actions button:hover{
background:#ffe0cc;
}

.editor-header{
display:flex;
justify-content:space-between;
align-items:center;
}

.editor-header select{
padding:5px;
border-radius:5px;
border:none;
}

/* Fix for footer and content overlap */
.main-content {
    min-height: 100vh;
    padding-bottom: 80px;
    display: block;
    clear: both;
}

.main-footer {
    position: relative;
    z-index: 10;
    background: #fff;
    border-top: 2px solid #f0f0f0;
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
    clear: both;
    width: 100%;
    margin-top: 0;
}

/* Ensure body has proper spacing */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > .main-content {
    flex: 1;
}