/* ===================================================
   IMA WiFi - NOC Dashboard
   style.css
=================================================== */

:root{
    --bg:#0f172a;
    --card:#1e293b;
    --card-hover:#2563eb;
    --border:#334155;
    --text:#ffffff;
    --text2:#cbd5e1;
    --muted:#94a3b8;
    --shadow:0 10px 30px rgba(0,0,0,.25);
    --radius:18px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:linear-gradient(135deg,#0f172a,#111827,#1e293b);
    color:var(--text);
    font-family:'Poppins',sans-serif;
    min-height:100vh;
}

/* Background */

.background{
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at top left,#2563eb33,transparent 40%),
    radial-gradient(circle at bottom right,#06b6d433,transparent 35%);
    z-index:-1;
}

/* Container */

.container{
    width:min(1400px,95%);
    margin:auto;
    padding:30px 0 50px;
}

/* Header */

header{

display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:20px;
margin-bottom:35px;

}

.logo{

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

}

.logo-icon{

width:70px;
height:70px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
background:linear-gradient(135deg,#2563eb,#0ea5e9);
box-shadow:var(--shadow);

}

.logo h1{

font-size:34px;
font-weight:700;

}

.logo p{

margin-top:4px;
color:var(--muted);

}

.datetime{

text-align:right;

}

#clock{

font-size:30px;
font-weight:700;

}

#date{

margin-top:6px;
color:var(--muted);

}

/* Search */

.search-box{

margin-bottom:35px;

}

.search-box input{

width:100%;
padding:18px 22px;
border:none;
outline:none;
border-radius:15px;
background:#1e293bcc;
backdrop-filter:blur(12px);
font-size:16px;
color:white;
border:1px solid var(--border);

}

.search-box input::placeholder{

color:#94a3b8;

}

/* Category */

.category{

margin:35px 0 18px;
font-size:22px;
font-weight:600;

}

/* Grid */

.grid{

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

}

/* Card */

.card{

background:rgba(30,41,59,.85);
border:1px solid var(--border);
border-radius:var(--radius);
padding:24px;
text-decoration:none;
color:white;
transition:.25s;
display:block;
backdrop-filter:blur(12px);
box-shadow:var(--shadow);

}

.card:hover{

transform:translateY(-8px);
background:var(--card-hover);

}

.card-icon{

font-size:42px;
margin-bottom:18px;

}

.card-title{

font-size:21px;
font-weight:600;

}

.card-desc{

margin-top:8px;
font-size:14px;
color:var(--text2);

}

.card-url{

margin-top:18px;
font-size:12px;
color:#93c5fd;
word-break:break-all;

}

/* Footer */

footer{

margin-top:60px;
padding-top:25px;
border-top:1px solid var(--border);

display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;

font-size:14px;
color:var(--muted);

}

/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#334155;
border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#475569;

}

/* Responsive */

@media(max-width:768px){

header{

flex-direction:column;
align-items:flex-start;

}

.datetime{

text-align:left;

}

.logo h1{

font-size:28px;

}

#clock{

font-size:24px;

}

.grid{

grid-template-columns:1fr;

}

footer{

flex-direction:column;
text-align:center;

}

}