/* ==========================================================
   GSWebsite Theme for ClientExec
   Version 1.0
   ========================================================== */

:root{
    /* Colors */
    --background:#09090B;
    --surface:#18181B;
    --surface-2:#27272A;

    --primary:#8B5CF6;
    --primary-hover:#7C3AED;

    --secondary:#06B6D4;

    --text:#F8FAFC;
    --muted:#94A3B8;

    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;

    --border:rgba(255,255,255,.08);

    /* Radius */

    --radius-sm:12px;
    --radius:18px;
    --radius-lg:28px;

    /* Shadow */

    --shadow:0 20px 60px rgba(0,0,0,.35);

    /* Transition */

    --transition:.30s ease;
}

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

html,
body{
    background:var(--background)!important;
    color:var(--text)!important;
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif!important;
}

/* ==========================================================
   TEXT
   ========================================================== */

body,
p,
span,
label,
li,
td,
th{
    color:AAA !important;;
}

h1,h2,h3,h4,h5,h6{
    color:var(--text)!important;
    font-weight:700!important;
}

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

a{
    color:#FFFFFF;
    transition:var(--transition);
}

a:hover{
    color:var(--primary-hover)!important;
}

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

.header{
    background:var(--surface)!important;
    border-bottom:1px solid var(--border)!important;
    box-shadow:none!important;
}

.main-meta{
    background:transparent!important;
}

/* ==========================================================
   CARDS
   ========================================================== */

.client-area-top-box{

    position: relative;

    overflow: hidden;

    background: linear-gradient(
        135deg,
        #18181B 0%,
        #23232A 45%,
        #2E1065 100%
    ) !important;

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

    border-radius: var(--radius-lg);

    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

/* Glow u gornjem desnom uglu */
.client-area-top-box::before{

    content:"";

    position:absolute;

    top:-80px;
    right:-80px;

    width:220px;
    height:220px;

    border-radius:50%;

    background:rgba(139,92,246,.18);

    filter:blur(70px);

    pointer-events:none;
}

/* Hover */
.client-area-top-box:hover{

    transform:translateY(-5px);

    border-color:rgba(139,92,246,.35);

    box-shadow:
        0 28px 80px rgba(0,0,0,.45),
        0 0 35px rgba(139,92,246,.12);
}

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

button,
.btn,
.app-btns.primary{

    background:var(--primary)!important;

    border:none!important;

    color:white!important;

    border-radius:var(--radius-sm)!important;

    transition:var(--transition)!important;
}

button:hover,
.btn:hover,
.app-btns.primary:hover{

    background:var(--primary-hover)!important;
}

/* ==========================================================
   FORMS
   ========================================================== */

input,
select,
textarea,
.form-control{

    background:var(--surface-2)!important;

    color:var(--text)!important;

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

    border-radius:var(--radius-sm)!important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus{

    border-color:var(--primary)!important;

    box-shadow:0 0 0 4px rgba(139,92,246,.20)!important;
}

/* ==========================================================
   TABLES
   ========================================================== */

table{

    background:var(--surface)!important;
}

table th{

    background:var(--surface-2)!important;

    color:var(--text)!important;
}

table td{

    color:var(--text)!important;

    border-color:var(--border)!important;
}

/* ==========================================================
   GSWebsite Layout
   ========================================================== */

.content-area,
.dashboard-wrapper{
    background: var(--background) !important;
}

.content-area .container{
    background: transparent !important;
}

.client-area-page{
    background: transparent !important;
}

/* Kartice */

.client-area-top-box{
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

/* Footer */

.footer{
    background: var(--surface) !important;
}

/* ==========================================================
   ClientExec Dark Content
   ========================================================== */

.data-table-wrapper{
    background: var(--surface) !important;
    border-radius: var(--radius) !important;
}

.data-table-wrapper .head{
    background: #000 !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
}

.data-table-wrapper .cs-padding{
    background: var(--surface) !important;
}

.data-table-wrapper h1,
.data-table-wrapper h2,
.data-table-wrapper h3,
.data-table-wrapper label,
.data-table-wrapper p{
    color: var(--text) !important;
}

/* ===========================================
   Tabs Container
   =========================================== */

.resp-tabs-container{
    background: var(--surface) !important;
}

.resp-tab-content{
    background: var(--surface) !important;
    color: var(--text) !important;
}

.resp-tab-content *{
    color: var(--text);
}

/* ===========================================
   Client Area Tabs Block
   =========================================== */

.client-area-tabs-block{

    position: relative;

    overflow: visible !important;

    background: linear-gradient(
        135deg,
        #18181B 0%,
        #23232A 45%,
        #2E1065 100%
    ) !important;

    border: 1px solid rgba(255,255,255,.08) !important;


    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        all .35s ease;
}

/* GSWebsite glow */
.client-area-tabs-block::before{

    content:"";

    position:absolute;

    top:-90px;
    right:-90px;

    width:240px;
    height:240px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(139,92,246,.22) 0%,
        rgba(139,92,246,0) 70%
    );

    pointer-events:none;
}

/* Donji akcenat */
.client-area-tabs-block::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:2px;

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

    opacity:.65;
}

/* Hover */
.client-area-tabs-block:hover{

    transform:translateY(-4px);

    border-color:rgba(139,92,246,.35);

    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        0 0 35px rgba(139,92,246,.12);
}

.resp-tabs-list{

    position: relative !important;

    z-index: 9999 !important;

    margin-bottom: -1px;
}

/* ==========================================================
   GSWebsite Forms
   ========================================================== */

/* Input */

input,
textarea,
select,
.form-control{

    background: var(--surface-2) !important;
    color: var(--text) !important;

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

    border-radius: 12px !important;

    transition: var(--transition);
}

/* Placeholder */

input::placeholder,
textarea::placeholder{

    color: var(--muted) !important;
}

/* Focus */

input:focus,
textarea:focus,
select:focus,
.form-control:focus{

    background: var(--surface-2) !important;

    color: var(--text) !important;

    border-color: var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(139,92,246,.20) !important;

    outline: none !important;
}

/* Select2 */

.select2-selection{

    background: var(--surface-2) !important;

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

    color: var(--text) !important;

    border-radius: 12px !important;
}

.select2-selection__rendered{

    color: var(--text) !important;
}

/* Buttons */

button,
.btn,
input[type=submit]{

    background: var(--primary) !important;

    color: #fff !important;

    border: none !important;

    border-radius: 12px !important;

    transition: var(--transition);
}

button:hover,
.btn:hover,
input[type=submit]:hover{

    background: var(--primary-hover) !important;
}

/* ==========================================================
   Knowledge Base
   ========================================================== */

.knowledge-base-search2{
    background:#18181B !important;
}

.knowledge-base-box{
    background:#000000 !important;
}


.knowledge-base-wrapper h1{

    color: var(--text) !important;
}

.knowledge-base-wrapper p{

    color: var(--muted) !important;
}

.knowledge-base-wrapper .knowledge-base-search-box{

    background: transparent !important;
}

.knowledge-base-boxes-block{

    background: linear-gradient(
        135deg,
        #18181B 0%,
        #27272A 35%,
        #312E81 70%,
        #8B5CF6 100%
    ) !important;

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

    border-radius: var(--radius-lg) !important;

    box-shadow: var(--shadow) !important;
}

.product-groups-block{

    background: linear-gradient(
        135deg,
        #18181B 0%,
        #1F1F23 45%,
        #2E1065 100%
    ) !important;

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

    border-radius: var(--radius-lg) !important;

    box-shadow: var(--shadow) !important;

    transition: var(--transition);
}

.product-groups-block:hover{

    transform: translateY(-3px);

    box-shadow: 0 24px 70px rgba(0,0,0,.45) !important;
}

.product-group-box{

    background: linear-gradient(
        135deg,
        #232329 0%,
        #2B2B33 100%
    ) !important;

    border: 1px solid rgba(255,255,255,.08) !important;

    border-radius: var(--radius) !important;

    box-shadow: 0 15px 40px rgba(0,0,0,.30) !important;

    transition: var(--transition);
}

.product-group-box:hover{

    background: linear-gradient(
        135deg,
        #2B2B33 0%,
        #312E81 100%
    ) !important;

    transform: translateY(-3px);

    box-shadow: 0 20px 50px rgba(0,0,0,.45) !important;
}

.knowledge-base-content-block{

    background: linear-gradient(
        135deg,
        #18181B 0%,
        #23232A 45%,
        #2E1065 100%
    ) !important;

    border: 1px solid rgba(255,255,255,.08) !important;

    border-radius: var(--radius-lg) !important;

    box-shadow: var(--shadow) !important;

    transition: var(--transition);
}

.knowledge-base-content-block:hover{

    background: linear-gradient(
        135deg,
        #202026 0%,
        #2B2B33 45%,
        #4338CA 100%
    ) !important;
}

.system-requirements-block{

    background: linear-gradient(
        135deg,
        #18181B 0%,
        #23232A 45%,
        #2E1065 100%
    ) !important;

    border: 1px solid rgba(255,255,255,.08) !important;

    border-radius: var(--radius-lg) !important;

    box-shadow: var(--shadow) !important;

    transition: var(--transition);
}

.system-requirements-block:hover{

    background: linear-gradient(
        135deg,
        #202026 0%,
        #2B2B33 45%,
        #4338CA 100%
    ) !important;

    transform: translateY(-2px);

    box-shadow: 0 22px 60px rgba(0,0,0,.45) !important;
}

.knowledge-base-search{

    background: linear-gradient(
        135deg,
        rgba(39,39,42,.95) 0%,
        rgba(35,35,42,.95) 55%,
        rgba(46,16,101,.90) 100%
    ) !important;

    border: 1px solid rgba(139,92,246,.25) !important;

    border-radius: var(--radius-lg) !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.05);

    padding: 35px;

    transition: var(--transition);
}

.knowledge-base-search:hover{

    border-color: rgba(139,92,246,.45) !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.45),
        0 0 30px rgba(139,92,246,.15);
}

.data{

    background: linear-gradient(
        135deg,
        #18181B 0%,
        #23232A 50%,
        #2E1065 100%
    ) !important;

    border: 1px solid rgba(255,255,255,.08) !important;

    border-radius: var(--radius) !important;

    box-shadow: var(--shadow) !important;

    color: var(--text) !important;
}

.accordion-item.open{

    background: linear-gradient(
        135deg,
        #23232A 0%,
        #2E1065 100%
    ) !important;

    border: 1px solid rgba(139,92,246,.35) !important;

    border-radius: var(--radius) !important;

    box-shadow:
        0 15px 40px rgba(0,0,0,.35),
        0 0 20px rgba(139,92,246,.12);

    transition: var(--transition);
}

.footer a{
	color: #000 !important;
}

.dropdown-toggle{

    color: var(--text) !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    transition: all .3s ease;
}

.dropdown-toggle:hover{

    color: var(--primary) !important;

    text-shadow: 0 0 10px rgba(139,92,246,.35);
}

.dropdown-toggle:focus,
.dropdown-toggle:active,
.dropdown-toggle.show{

    color: var(--primary) !important;

    background: transparent !important;

    box-shadow: none !important;

    outline: none !important;
}

.main-menu .dropdown-menu{

    background: linear-gradient(
        135deg,
        #18181B 0%,
        #23232A 45%,
        #2E1065 100%
    ) !important;

    border: 1px solid rgba(255,255,255,.08) !important;

    border-radius: var(--radius) !important;

    padding:8px;

    overflow:hidden;
}

.main-menu .dropdown-menu li{

    background: transparent !important;
}

.main-menu .dropdown-menu li a{

    background: transparent !important;

    color: var(--text) !important;

    border-radius:10px;

    transition:all .25s ease;
}

.main-menu .dropdown-menu li a:hover{

    background: rgba(139,92,246,.15) !important;

    color: var(--primary) !important;
    
}
    
#announcement-page #announcements{

    background: linear-gradient(
        135deg,
        #2A2A31 0%,
        #34343D 35%,
        #4338CA 75%,
        #5B21B6 100%
    ) !important;

    border: 1px solid rgba(255,255,255,.18) !important;

    border-radius: var(--radius-lg) !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 0 1px rgba(255,255,255,.05);

    padding: 30px !important;

    color: var(--text) !important;

    transition: var(--transition);
}

.select2-container--default .select2-results__options{

    background: #18181B !important;

    color: #FFFFFF !important;
}

.select2-container--default .select2-results__option{

    color: #FFFFFF !important;
}

.select2-container--default 
.select2-results__option--highlighted.select2-results__option--selectable{

    background: linear-gradient(
        135deg,
        #2E1065 0%,
        #4338CA 100%
    ) !important;

    color: #FFFFFF !important;
}

.data-table-wrapper table tr td{

    background: #18181B !important;

    color: #FFFFFF !important;

    border-color: rgba(255,255,255,.08) !important;
}

.select2-dropdown{

    background: linear-gradient(
        135deg,
        #18181B 0%,
        #23232A 45%,
        #2E1065 100%
    ) !important;

    border: 1px solid rgba(255,255,255,.08) !important;

    border-radius: var(--radius) !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.05);

    overflow: hidden;

    color: var(--text) !important;
}

.client-area-page .client-area-bottom-block ul.resp-tabs-list .resp-tab-item.resp-tab-active{
    background: #18181B;
    color: #F8FAFC;
    border-color: rgba(255,255,255,.08);
}