/* =========================================================
   FREENET ISP — LUXURY ENTERPRISE GLOBAL UI
   UI ONLY — NO BACKEND / LOGIC CHANGES
   ========================================================= */

:root{
    --fn-bg:#020914;
    --fn-bg2:#061426;
    --fn-panel:rgba(4,20,38,.88);
    --fn-panel2:rgba(5,27,49,.72);
    --fn-cyan:#00cfff;
    --fn-blue:#159dff;
    --fn-red:#ff304f;
    --fn-purple:#8b5cff;
    --fn-green:#00f59b;
    --fn-text:#eef8ff;
    --fn-muted:#8eacc7;
    --fn-border:rgba(0,191,255,.34);
    --fn-glow:0 0 22px rgba(0,190,255,.16);
}

html,body{
    min-height:100%;
    background:
        radial-gradient(circle at 72% 12%,rgba(0,120,255,.14),transparent 30%),
        radial-gradient(circle at 15% 80%,rgba(0,210,255,.07),transparent 28%),
        linear-gradient(135deg,#010610,#03101e 50%,#010713);
    color:var(--fn-text)!important;
}

body{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    background-attachment:fixed;
}

/* futuristic grid */
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.22;
    background-image:
        linear-gradient(rgba(0,180,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,180,255,.035) 1px,transparent 1px);
    background-size:45px 45px;
}

/* main application surfaces */
main,
.min-h-screen,
.max-w-7xl,
.container{
    position:relative;
    z-index:1;
}

main{
    background:transparent!important;
}

/* navigation / header */
nav,
header{
    background:
        linear-gradient(90deg,rgba(2,12,25,.97),rgba(4,22,42,.93),rgba(2,10,22,.97))
    !important;
    border-color:rgba(0,196,255,.28)!important;
    box-shadow:
        0 10px 35px rgba(0,0,0,.45),
        inset 0 -1px rgba(0,210,255,.14);
    backdrop-filter:blur(18px);
}

nav a,
header a{
    color:#9edbff!important;
    transition:.2s ease;
}

nav a:hover,
header a:hover{
    color:#fff!important;
    text-shadow:0 0 12px rgba(0,207,255,.75);
}

/* links */
a{
    transition:.2s ease;
}

/* cards */
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-gray-200,
.dark\:bg-gray-800,
.dark\:bg-gray-700,
.rounded-lg,
.rounded-xl,
.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg{
    background:
        linear-gradient(145deg,rgba(5,27,49,.94),rgba(2,15,29,.94))
        !important;
    color:var(--fn-text)!important;
    border-color:var(--fn-border)!important;
}

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg{
    box-shadow:
        0 12px 35px rgba(0,0,0,.35),
        inset 0 0 25px rgba(0,170,255,.035)!important;
}

/* headings */
h1,h2,h3,h4,h5,h6{
    color:#f4fbff!important;
    letter-spacing:.01em;
}

h1{
    text-shadow:0 0 22px rgba(0,174,255,.25);
}

/* text */
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-gray-600,
.text-gray-500,
.text-gray-400,
.dark\:text-white,
.dark\:text-gray-100,
.dark\:text-gray-200,
.dark\:text-gray-300,
.dark\:text-gray-400{
    color:#b9d5e9!important;
}

/* forms */
input,
textarea,
select{
    background:rgba(1,12,24,.9)!important;
    color:#eef8ff!important;
    border:1px solid rgba(0,181,255,.3)!important;
    border-radius:10px!important;
    box-shadow:inset 0 0 15px rgba(0,90,150,.08)!important;
}

input:focus,
textarea:focus,
select:focus{
    border-color:var(--fn-cyan)!important;
    box-shadow:
        0 0 0 2px rgba(0,207,255,.12),
        0 0 20px rgba(0,207,255,.16)!important;
    outline:none!important;
}

input::placeholder,
textarea::placeholder{
    color:#66849c!important;
}

/* buttons */
button,
[type="submit"],
[type="button"],
.btn,
a.inline-flex{
    border-radius:9px!important;
    transition:.2s ease!important;
}

button:hover,
[type="submit"]:hover,
[type="button"]:hover{
    transform:translateY(-1px);
    box-shadow:0 0 18px rgba(0,198,255,.24)!important;
}

/* blue/cyan buttons */
.bg-indigo-600,
.bg-blue-600,
.bg-sky-600,
.bg-cyan-600{
    background:linear-gradient(135deg,#087cff,#00cfff)!important;
    color:#fff!important;
    border:1px solid rgba(0,220,255,.65)!important;
}

/* red */
.bg-red-600,
.bg-red-500{
    background:linear-gradient(135deg,#b90d2d,#ff304f)!important;
}

/* green */
.bg-green-600,
.bg-emerald-600{
    background:linear-gradient(135deg,#008d68,#00e69a)!important;
}

/* tables */
table{
    width:100%;
    border-collapse:separate!important;
    border-spacing:0;
    overflow:hidden;
    background:rgba(2,15,29,.72)!important;
    border:1px solid rgba(0,181,255,.28)!important;
    border-radius:14px!important;
}

thead{
    background:linear-gradient(90deg,rgba(0,91,151,.34),rgba(6,31,55,.75))!important;
}

th{
    color:#71dcff!important;
    font-size:.76rem!important;
    text-transform:uppercase;
    letter-spacing:.08em;
    border-bottom:1px solid rgba(0,196,255,.24)!important;
}

td{
    color:#c7e0ef!important;
    border-color:rgba(0,160,220,.13)!important;
}

tbody tr{
    transition:.18s ease;
}

tbody tr:hover{
    background:rgba(0,183,255,.07)!important;
}

/* status badges */
.text-green-600,
.text-green-500,
.text-emerald-600,
.text-emerald-500{
    color:#00f59b!important;
}

.text-red-600,
.text-red-500{
    color:#ff5068!important;
}

.text-blue-600,
.text-indigo-600,
.text-cyan-600{
    color:#27cfff!important;
}

/* alerts */
.bg-red-50,
.bg-yellow-50,
.bg-green-50,
.bg-blue-50{
    background:rgba(4,25,43,.85)!important;
    border:1px solid rgba(0,190,255,.22)!important;
}

/* dividers */
.border-gray-100,
.border-gray-200,
.border-gray-300,
.dark\:border-gray-600,
.dark\:border-gray-700{
    border-color:rgba(0,175,235,.18)!important;
}

/* premium panels */
[class*="border"]{
    border-color:rgba(0,175,235,.16);
}

/* pagination */
nav[role="navigation"]{
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
}

/* scrollbar */
::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-track{
    background:#020914;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(#008fd5,#174b91);
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#00cfff;
}

/* mobile */
@media(max-width:768px){
    nav,header{
        backdrop-filter:blur(12px);
    }

    table{
        font-size:.82rem;
    }

    h1{
        font-size:1.65rem!important;
    }

    .shadow,
    .shadow-sm,
    .shadow-md,
    .shadow-lg{
        box-shadow:0 8px 24px rgba(0,0,0,.35)!important;
    }
}