/* ==========================================
WTW PAYMENT PORTAL
========================================== */
     /* Hide button on desktop */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
body,
input,
select,
textarea,
button,
table{
    font-family:'Inter',sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6{
    font-family:'Poppins',serif;
    font-weight:600;
}

.wtw-mobile-menu{
    display:none;
}

* {
  box-sizing: border-box;
  }

/* ==========================================
APP LAYOUT
========================================== */

.wtw-app {
display: flex;
width: 100vw;
min-height: 100vh;
margin-left: calc(50% - 50vw);
background: #f8fafc;
}



.wtw-brand {
text-align: center;
margin-bottom: 40px;
}

.wtw-brand img {
max-width: 160px;
width: 100%;
}

.wtw-sidebar{
    width:260px;
    min-width:260px;

    background:#0f172a;
    color:#fff;

    padding:30px 20px;

    display:flex;
    flex-direction:column;

    min-height:100vh;
}

.wtw-sidebar nav{
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
}

.wtw-sidebar nav a{
    color:#fff;
    text-decoration:none;
    padding:14px 16px;
    border-radius:10px;
    transition:.2s ease;
}

.wtw-sidebar nav a:hover{
    background:rgba(255,255,255,.08);
    transform:translateX(3px);
}

.wtw-sidebar nav a.active{
    font-weight:600;
    box-shadow:inset 3px 0 0 #7f35b2;
}

.wtw-content {
    flex: 1;
    min-width: 0;
    padding: 40px;
    color: #0f172a;
}

.wtw-content h1{
    font-family:'Poppins',serif;
    font-size:42px;
    font-weight:600;
    letter-spacing:0px;
    
}

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

.wtw-stats {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
gap: 20px;
}

.wtw-stat-card {
background: #fff;
padding: 24px;
border-radius: 14px;
box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.wtw-stat-card span {
display: block;
color: #64748b;
font-size: 14px;
margin-bottom: 10px;
}

.wtw-stat-card h2 {
margin: 0;
font-size: 32px;
color: #0f172a;
}

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

.wtw-table-card {
background: #fff;
padding: 25px;
margin-top: 25px;
border-radius: 14px;
box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.wtw-table-card h2 {
margin: 0 0 20px;
color: #0f172a;
}

/* ==========================================
FILTER BAR
========================================== */

.wtw-filters {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 20px;
}

.wtw-filters input,
.wtw-filters select {
width: auto !important;
min-width: 180px;
padding: 12px;
border: 1px solid #dbe2ea;
border-radius: 10px;
background: #fff;
}

.wtw-filters button {
padding: 12px 20px;
border: none;
border-radius: 10px;
background: #2563eb;
color: #fff;
cursor: pointer;
font-weight: 600;
}

.wtw-filters button:hover {
opacity: .9;
}

/* ==========================================
EXPORT BUTTON
========================================== */

.wtw-export-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
background: #7f35b2;
color: #fff !important;
text-decoration: none;
border-radius: 10px;
font-weight: 600;
}

.wtw-export-btn:hover {
opacity: .9;
}

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

.wtw-table-card table {
width: 100%;
border-collapse: collapse;
}

.wtw-table-card th {
text-align: left;
background: #f8fafc;
padding: 14px;
color: #475569;
border-bottom: 1px solid #e2e8f0;
}

.wtw-table-card td {
padding: 14px;
border-bottom: 1px solid #f1f5f9;
color: #0f172a;
}

.wtw-table-card tr:hover {
background: rgba(146, 103, 175, 0.199);
}

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

.wtw-table-card a {
color: #2563eb;
text-decoration: none;
font-weight: 600;
}

.wtw-table-card a:hover {
text-decoration: underline;
}

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

.status-paid {
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
background: #dcfce7;
color: #15803d;
font-weight: 600;
}

.status-pending {
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
background: #fef3c7;
color: #b45309;
font-weight: 600;
}

.status-failed {
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
background: #fee2e2;
color: #b91c1c;
font-weight: 600;
}

/* ==========================================
MODAL
========================================== */

.wtw-modal{
    display:none;
    position:fixed;
    inset:0;

    overflow-y:auto;

    background:rgba(0,0,0,.55);

    z-index:99999;
}

.wtw-modal-content {

    width: 750px;
    max-width: 90%;

    max-height: 85vh;

    overflow-y: auto;

    margin: 40px auto;

    background: #fff;

    border-radius: 14px;

    padding: 30px;

    position: relative;
}

.wtw-close {
position: absolute;
top: 15px;
right: 20px;
font-size: 28px;
cursor: pointer;
}

.wtw-detail-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

.wtw-detail-table th,
.wtw-detail-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #eee;
}


/* ==========================================
MOBILE
========================================== */

@media (max-width: 992px) {

    .wtw-app{
        flex-direction:column;
        overflow-x:hidden;
    }

    .wtw-sidebar{

        width:100%;
        min-width:100%;

        height:auto;
        min-height:auto;

        position:relative;

        padding:15px;
    }

    .wtw-brand{
        margin-bottom:15px;
        text-align:center;
    }

    .wtw-brand img{
        max-width:120px;
    }

        .wtw-sidebar nav a{

        margin:0;
        padding:10px 14px;

        border-left:none !important;
    }

    .wtw-user-profile{

        margin-top:15px;

        justify-content:center;

        border-top:none;

        padding-top:10px;
    }

    .wtw-content{
        padding:20px;
    }

    .wtw-filters{
        flex-direction:column;
        align-items:stretch !important;
    }

    .wtw-filters input,
    .wtw-filters select,
    .wtw-filters button,
    .wtw-export-btn{
        width:100% !important;
    }

    .wtw-table-card{
        overflow-x:auto;
    }

    .wtw-detail-table td{
        word-break:break-word;
    }

    .wtw-modal-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:20px;
    }

    .wtw-modal-header h2{
        margin:0;
    }

    .wtw-mobile-menu{

    display:block;

    width:200px;

    margin:0 auto 15px;

    padding:12px;

    border:none;

    border-radius:12px;

    background:#1e293b;

    color:#fff;

    cursor:pointer;
}

.wtw-nav{
    display:none !important;
}

.wtw-nav.active{
    display:flex !important;
    flex-direction:column;
    gap:8px;
}

.wtw-user-profile{
    display:flex;
    justify-conter:center;
    margin-top:-5px;
}

.wtw-user-profile.active{
    display:flex;
    justify-content:center;
}

   
}

.wtw-note-item{

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:12px;

    padding:14px;

    margin-bottom:12px;
}

.wtw-note-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:8px;
}

.wtw-note-header strong{

    color:#0f172a;

    font-size:14px;
}

.wtw-note-header span{

    color:#64748b;

    font-size:12px;
}

.wtw-note-text{

    color:#334155;

    line-height:1.5;
}

#wtw-notes-list{

    max-height:300px;

    overflow-y:auto;

    margin-bottom:15px;
}


.wtw-chart-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:20px;

    margin-top:25px;
}

#wtwPaymentsChart{

    width:100% !important;

    height:350px !important;
}

#wtwStatusChart{

    width:100% !important;

    height:350px !important;
}

@media (max-width:992px){

    .wtw-chart-grid{

        grid-template-columns:1fr;
    }
}

.wtw-subtitle{

    margin-top:-15px;

    margin-bottom:30px;

    color:#7f35b2;

    font-size:15px;
}

.wtw-chart-toolbar{

    display:flex;

    justify-content:flex-end;

    margin-bottom:20px;
}

.wtw-chart-toolbar select{

    padding:10px 14px;

    border:1px solid #dbe2ea;

    border-radius:10px;

    background:#fff;

    cursor:pointer;
}

.wtw-date-time{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.wtw-date-time small{

    color:#64748b;

    font-size:12px;

}

.wtw-footer{

    margin-top:40px;

    text-align:left;

    font-size:12px;

    color:#94a3b8;

}

.wtw-status-badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

    line-height:1;

}

.wtw-status-paid{

    background:#dcfce7;

    color:#166534;

}

.wtw-status-pending{

    background:#fef3c7;

    color:#92400e;

}

.wtw-status-failed{

    background:#fee2e2;

    color:#991b1b;

}

.wtw-table-card table a.wtw-view-transaction{
    color:#7f35b2 !important;
    text-decoration:underline;
    font-weight:600;
}