/* ==========================================================
   iPC Account Desktop UI
   Global Design System
   File: resources/assets/css/theme.css
   ========================================================== */

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

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

html{
    font-size:16px;
    scroll-behavior:smooth;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

body{
    width:100%;
    height:100vh;
    overflow:hidden;
}

img,
svg{
    display:block;
    max-width:100%;
}

button,
input,
textarea,
select{
    border:none;
    outline:none;
    background:none;
    font:inherit;
}

ul,
ol{
    list-style:none;
}

a{
    text-decoration:none;
    color:inherit;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

/* ==========================================================
   ROOT VARIABLES
   ========================================================== */

:root{

    /* Colors */

    --bg:#000;
    --panel:#0d1117;
    --panel-light:#131a22;

    --border:#263241;
    --border-light:#324354;

    --primary:#60a5fa;
    --primary-hover:#7bb6ff;

    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;
    --info:#38bdf8;

    --text:#f5f7fa;
    --muted:#94a3b8;

    --white:#ffffff;

    /* Glass */

    --glass-bg:rgba(13,17,23,.72);
    --glass-border:rgba(96,165,250,.15);

    /* Radius */

    --radius-xs:4px;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-xl:24px;

    /* Shadows */

    --shadow-sm:0 4px 12px rgba(0,0,0,.25);
    --shadow-md:0 10px 30px rgba(0,0,0,.35);
    --shadow-lg:0 25px 60px rgba(0,0,0,.45);

    --glow:0 0 18px rgba(96,165,250,.18);

    /* Transition */

    --transition:.22s ease;

    /* Font */

    --font:
        "Segoe UI",
        Inter,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

}

/* ==========================================================
   BODY
   ========================================================== */

body{

    font-family:var(--font);

    background:var(--bg);

    color:var(--text);

    line-height:1.5;

}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1{
    font-size:2rem;
    font-weight:700;
}

h2{
    font-size:1.6rem;
    font-weight:700;
}

h3{
    font-size:1.35rem;
    font-weight:600;
}

h4{
    font-size:1.1rem;
    font-weight:600;
}

h5{
    font-size:1rem;
    font-weight:600;
}

h6{
    font-size:.9rem;
    font-weight:600;
}

p{
    color:var(--muted);
    line-height:1.7;
}

small{
    color:var(--muted);
}

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

a{

    color:var(--primary);

    transition:var(--transition);

}

a:hover{

    color:var(--primary-hover);

}

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

button,
.btn{

    cursor:pointer;

    transition:var(--transition);

    border-radius:10px;

    height:42px;

    padding:0 18px;
 

}

button:disabled,
.btn:disabled{

    opacity:.45;

    cursor:not-allowed;

}

.btn-primary{

    background:var(--primary);

    color:#05101f;

}

.btn-primary:hover{

    background:var(--primary-hover);

}

.btn-secondary{

    background:transparent;

    color:var(--text);

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

}

.btn-secondary:hover{

    border-color:var(--primary);

}

.btn-success{

    background:var(--success);

    color:#fff;

}

.btn-danger{

    background:var(--danger);

    color:#fff;

}

/* ==========================================================
   INPUTS
   ========================================================== */

input,
textarea,
select,
.input,
.textarea,
.select{

    width:100%;

    /*background:var(--panel);*/

    color:var(--text);

    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);

    border-radius:0px;

    padding:0px 7px 6px 7px;

    /*transition:var(--transition);*/

}

textarea{

    resize:vertical;

    min-height:130px;

}

input::placeholder,
textarea::placeholder{

    color:var(--muted);

}

input:hover,
textarea:hover,
select:hover{

    border-color:var(--primary);

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    /*box-shadow:var(--glow);*/

}

/* ==========================================================
   LABELS
   ========================================================== */

label{

    display:block;

    margin-bottom:8px;

    color:var(--muted);

    font-size:.9rem;

    font-weight:600;

}

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

.form-group{

    margin-bottom:18px;

}

.form-row{

    display:flex;

    gap:20px;

}

.form-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:20px;

}

/* ==========================================================
   PANELS
   ========================================================== */

.panel,
.card,
.glass-panel{

    background:none;

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

    border-radius:0px;

    padding:10px;

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

}

.glass-panel{

    background:var(--glass-bg);

    backdrop-filter:blur(16px);

    border-color:var(--glass-border);

}

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

.hud-line{

    width:100%;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--primary),
        transparent
    );

    opacity:.45;

}

/* ==========================================================
   DIVIDER
   ========================================================== */

.divider{

    width:100%;

    height:1px;

    background:var(--border);

    margin:20px 0;

}

/* ==========================================================
   TABLE
   ========================================================== */

.table{

    width:100%;

}

.table th{

    background:var(--panel-light);

    color:var(--text);

    text-align:left;

    padding:5px;

}

.table td{

    padding:5px;

    color:var(--muted);

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

}

.table tbody tr{

    transition:var(--transition);

}

.table tbody tr:hover{

    background:rgba(96,165,250,.05);

}

/* ==========================================================
   STATUS
   ========================================================== */

.success,
.warning,
.danger,
.info{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 12px;

    border-radius:999px;

    font-size:.82rem;

    font-weight:600;

}

.success{

    color:var(--success);
    background:rgba(34,197,94,.12);

}

.warning{

    color:var(--warning);
    background:rgba(245,158,11,.12);

}

.danger{

    color:var(--danger);
    background:rgba(239,68,68,.12);

}

.info{

    color:var(--info);
    background:rgba(56,189,248,.12);

}

/* ==========================================================
   UTILITIES
   ========================================================== */

.flex{display:flex;}
.grid{display:grid;}

.items-center{align-items:center;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}

.text-center{text-align:center;}
.text-right{text-align:right;}

.hidden{display:none!important;}

.w-100{width:100%;}
.h-100{height:100%;}

/* Margin */

.mt-1{margin-top:4px;}
.mt-2{margin-top:8px;}
.mt-3{margin-top:12px;}
.mt-4{margin-top:16px;}
.mt-5{margin-top:24px;}

.mb-1{margin-bottom:4px;}
.mb-2{margin-bottom:8px;}
.mb-3{margin-bottom:12px;}
.mb-4{margin-bottom:16px;}
.mb-5{margin-bottom:24px;}

/* Padding */

.p-1{padding:4px;}
.p-2{padding:8px;}
.p-3{padding:12px;}
.p-4{padding:16px;}
.p-5{padding:24px;}

/* Gap */

.gap-1{gap:4px;}
.gap-2{gap:8px;}
.gap-3{gap:12px;}
.gap-4{gap:16px;}
.gap-5{gap:24px;}

/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar{

    width:10px;
    height:10px;

}

::-webkit-scrollbar-track{

    background:var(--bg);

}

::-webkit-scrollbar-thumb{

    background:var(--border);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/* ==========================================================
   STATES
   ========================================================== */

:focus-visible{

    outline:none;
  /*  outline:2px solid var(--primary);

    outline-offset:2px;*/

}

.hover-glow:hover{

    box-shadow:var(--glow);

}

.disabled{

    opacity:.45;

    pointer-events:none;

}

/* ==========================================================
   LOADING
   ========================================================== */

.spinner{

    width:36px;

    height:36px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.08);

    border-top-color:var(--primary);

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   EMPTY STATE
   ========================================================== */

.empty-state{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:220px;

    color:var(--muted);

    text-align:center;

}

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

.hide-mobile{

    display:block;

}

.show-mobile{

    display:none;

}

@media (max-width:900px){

    .form-row{

        flex-direction:column;

    }

    .hide-mobile{

        display:none;

    }

    .show-mobile{

        display:block;

    }

}