/* ==========================================================
   THATWARE AI
   Theme v1.0
========================================================== */

:root{

    /* Brand */

    --tw-primary:#00D084;

    --tw-secondary:#00C2FF;

    --tw-primary-hover:#00BA77;

    --tw-secondary-hover:#00A9E0;

    /* Backgrounds */

    --tw-bg:#08111F;

    --tw-surface:#111827;

    --tw-surface-light:#172135;

    --tw-card:#FCFCFD;

    /* Borders */

    --tw-border:#DCE4F0;

    --tw-border-dark:#2A344A;

    /* Text */

    --tw-text:#111827;

    --tw-text-light:#FFFFFF;

    --tw-muted:#7B879C;

    /* Status */

    --tw-success:#16A34A;

    --tw-danger:#DC2626;

    --tw-warning:#F59E0B;

    /* Radius */

    --tw-radius-sm:8px;

    --tw-radius:14px;

    --tw-radius-lg:18px;

    /* Shadow */

    --tw-shadow:

        0 12px 35px rgba(0,0,0,.08);

}

/* ==========================================================
   Typography
========================================================== */

body{

    font-family:'Plus Jakarta Sans',sans-serif;

    background:var(--tw-bg);

    color:var(--tw-text-light);

}

h1,
h2,
h3,
h4,
h5,
h6{

    font-weight:700;

    letter-spacing:-0.02em;

}

.container{

    max-width:1180px;

}

a{

    color:var(--tw-secondary);

    transition:.25s;

}

a:hover{

    color:var(--tw-primary);

}

::selection{
    background:#2f426f;
    color:#fff;
}

html{

    scroll-behavior:smooth;

}

/* ==========================================================
   Cards
========================================================== */

.tw-card{

    position:relative;

    background:linear-gradient(
        180deg,
        #131C2E 0%,
        #0F172A 100%
    );

    border:1px solid rgba(0,208,132,.25);

    border-radius:20px;

    overflow:hidden;

    margin-bottom:32px;

    box-shadow:

        0 20px 45px rgba(0,0,0,.28);

    transition:.30s;

}

.tw-card:hover{

    border-color:

        rgba(0,208,132,.55);

    transform:translateY(-2px);

}


/* ==========================================================
   Card Header
========================================================== */

.tw-card-header{

    display:flex;

    align-items:center;

    gap:18px;

    padding: 26px 28px 20px;

}

.tw-card-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(

            135deg,

            var(--tw-primary),

            var(--tw-secondary)

        );

    color:#fff;

    font-size:24px;

    box-shadow: 0 10px 25px rgba(0,208,132,.28);

}

.tw-card-title{

    color:#fff;

    font-size:24px;

    font-weight:700;

    margin:0;

}

.tw-card-description{

    color:#AAB8D3;

    margin-top:4px;

    font-size:14px;

}

/* ==========================================================
   Card Body
========================================================== */

.tw-card-body{

    padding:  0 28px 28px;

}

.tw-divider{

    height:1px;

    background:  rgba(255,255,255,.05);

    margin: 0 28px 26px;

}

/* ==========================================================
   Labels
========================================================== */

.tw-label{

    display:block;

    margin-bottom:8px;

    color:#E7EDF8;

    font-weight:600;

    font-size:14px;

}

.tw-required{

    color:var(--tw-secondary);

    margin-left:4px;

}

/* ==========================================================
   Inputs
========================================================== */

.tw-input{

    height:48px;

    border-radius:12px;

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

    background:#FFFFFF;

    transition:.25s;

    font-size:15px;

}

.tw-input:focus{

    border-color:

        var(--tw-secondary);

    box-shadow:

        0 0 0 4px rgba(0,194,255,.15);

}

.tw-textarea{

    min-height:120px;

    border-radius:12px;

}

.tw-select{

    height:48px;

    border-radius:12px;

}

/* ==========================================================
   Buttons
========================================================== */

.tw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    /* min-width: 140px; */
    min-width: auto;
    height: 48px;
    padding: 0 24px;

    font-size: 15px;
    font-weight: 600;
    text-decoration: none;

    border: none;
    border-radius: 12px;
    cursor: pointer;

    transition: all 0.25s ease;
}

.tw-btn-primary {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--tw-primary), var(--tw-secondary));
    box-shadow: 0 10px 25px rgba(0, 208, 132, 0.20);
}

.tw-btn-primary:hover {
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0, 208, 132, 0.35);
}

.tw-btn-primary:focus {
    color: #FFFFFF;
}

.tw-btn-secondary {
    color: #FFFFFF;
    background: #25314B;
    border: 1px solid rgba(255,255,255,0.08);
}

.tw-btn-secondary:hover {
    color: #FFFFFF;
    background: #31415F;
}

.tw-btn-success {
    color: #FFFFFF;
    background: linear-gradient(135deg, #0FBF7A, #18D7A0);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 18px rgba(15, 191, 122, 0.18);
}

.tw-btn-success:hover {
    color: #FFFFFF;
    background: linear-gradient(135deg, #13CB84, #20E3AC);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 191, 122, 0.28);
}

.tw-btn-success:focus {
    color: #FFFFFF;
}

.tw-btn-success:active {
    transform: translateY(0);
}

.tw-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==========================================================
   Tooltips
========================================================== */

.tw-tooltip {
    margin-left: 6px;
    color: var(--tw-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: color 0.25s ease;
}

.tw-tooltip:hover {
    color: var(--tw-primary);
}

.tooltip {
    --bs-tooltip-bg: #101827;
    --bs-tooltip-color: #FFFFFF;
    --bs-tooltip-border-radius: 10px;
    --bs-tooltip-max-width: 300px;
}

.tooltip-inner {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
}

.tooltip-inner strong {
    color: var(--tw-primary);
}

.tooltip-ai {
    color: var(--tw-secondary);
    font-weight: 700;
}

.tooltip-recommendation {
    color: #F59E0B;
    font-weight: 700;
}

.tooltip-important {
    color: #EF4444;
    font-weight: 700;
}

.spinner-border-sm {
    width: 18px;
    height: 18px;
    margin-left: 8px;
}

.tw-label {
    display: block;
    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 600;
    color: #E8EEF8;
}


/*==========================================================
KNOWLEDGE SOURCE
==========================================================*/

.tw-document-card{

background:#182338;

border:1px solid rgba(0,208,255,.14);

border-radius:18px;

padding:28px;

margin-bottom:28px;

transition:.25s;

}

.tw-document-card:hover{

border-color:rgba(0,208,255,.35);

box-shadow:0 12px 28px rgba(0,0,0,.25);

}

.tw-document-header{

display:flex;

align-items:center;

gap:18px;

margin-bottom:24px;

}

.tw-document-icon{

width:52px;

height:52px;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,var(--tw-primary),var(--tw-secondary));

color:#fff;

font-size:22px;

flex-shrink:0;

}

.tw-document-title{

margin:0;

font-size:22px;

font-weight:700;

color:#fff;

}

.tw-document-description{

margin-top:4px;

font-size:14px;

color:#9FB0C8;

}

.tw-document-divider{

height:1px;

background:rgba(255,255,255,.06);

margin:22px 0;

}