/*=========================================================
    Email Automation Platform
    Professional SaaS UI
    STYLE.CSS
    PART 1.1
    Foundation
=========================================================*/


/*=========================================================
Google Font
=========================================================*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");


/*=========================================================
CSS Variables
=========================================================*/

:root{

    /*=====================================================
    Brand Colors
    =====================================================*/

    --primary:#2563EB;
    --primary-hover:#1D4ED8;

    --secondary:#64748B;

    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;
    --info:#0EA5E9;


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

    --sidebar:#243447;
    --sidebar-hover:#30465B;

    --background:#F8FAFC;
    --surface:#FFFFFF;

    --border:#E5E7EB;


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

    --text:#0F172A;

    --text-light:#64748B;

    --text-muted:#94A3B8;


    /*=====================================================
    Border Radius
    =====================================================*/

    --radius-sm:8px;

    --radius:14px;

    --radius-lg:20px;


    /*=====================================================
    Shadows
    =====================================================*/

    --shadow-xs:
        0 1px 3px rgba(15,23,42,.05);

    --shadow-sm:
        0 4px 12px rgba(15,23,42,.06);

    --shadow:
        0 10px 30px rgba(15,23,42,.08);

    --shadow-lg:
        0 18px 45px rgba(15,23,42,.12);


    /*=====================================================
    Animation
    =====================================================*/

    --transition:.25s ease;


    /*=====================================================
    Sidebar
    =====================================================*/

    --sidebar-width:260px;


    /*=====================================================
    Navbar
    =====================================================*/

    --topbar-height:82px;

}



/*=========================================================
Reset
=========================================================*/

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



/*=========================================================
HTML
=========================================================*/

html{

    scroll-behavior:smooth;

}



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

body{

    background:var(--background);

    color:var(--text);

    font-family:"Inter",sans-serif;

    font-size:.95rem;

    line-height:1.6;

    min-height:100vh;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}



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

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

    color:var(--text);

    font-weight:700;

    line-height:1.25;

    margin-bottom:0;

}

h1{

    font-size:2.4rem;

}

h2{

    font-size:2rem;

}

h3{

    font-size:1.55rem;

}

h4{

    font-size:1.3rem;

}

h5{

    font-size:1.08rem;

}

h6{

    font-size:.95rem;

}



p{

    margin-bottom:0;

    color:var(--text-light);

}



/*=========================================================
Text Utilities
=========================================================*/

.text-muted{

    color:var(--text-light)!important;
    padding-top: 28px;
}

.fw-semibold{

    font-weight:600!important;

}

.fw-bold{

    font-weight:700!important;

}



/*=========================================================
Links
=========================================================*/

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    text-decoration:none;

}



/*=========================================================
Images
=========================================================*/

img{

    max-width:100%;

    height:auto;

    display:block;

}



/*=========================================================
Scrollbar
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EEF2F7;

}

::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94A3B8;

}



/*=========================================================
Selection
=========================================================*/

::selection{

    background:var(--primary);

    color:#FFFFFF;

}



/*=========================================================
Focus
=========================================================*/

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

    outline:none;

}



/*=========================================================
End of Part 1.1
=========================================================*/
/*=========================================================
    STYLE.CSS
    PART 1.2
    Layout • Sidebar • Navigation • Main Content
=========================================================*/


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

.container-fluid{

    padding:0;

}



/*=========================================================
Bootstrap Row
=========================================================*/

.row{

    --bs-gutter-x:1.5rem;

    --bs-gutter-y:1.5rem;

}



/*=========================================================
Application Layout
=========================================================*/

.app-wrapper{

    display:flex;

    min-height:100vh;

    background:var(--background);

}



/*=========================================================
Sidebar
=========================================================*/

.sidebar{

    width:var(--sidebar-width);

    min-height:100vh;

    background:var(--sidebar);

    position:sticky;

    top:0;

    flex-shrink:0;

    padding:28px 18px;

    overflow-y:auto;

    box-shadow:var(--shadow);

    transition:var(--transition);

}



/*=========================================================
Sidebar Brand
=========================================================*/

.sidebar h4{

    color:#FFFFFF;

    font-size:1.4rem;

    font-weight:700;

    text-align:center;

    margin-bottom:40px;

    letter-spacing:.4px;

}



/*=========================================================
Navigation
=========================================================*/

.sidebar .nav{

    display:flex;

    flex-direction:column;

    gap:8px;

}



/*=========================================================
Navigation Item
=========================================================*/

.sidebar .nav-item{

    width:100%;

}



/*=========================================================
Navigation Link
=========================================================*/

.sidebar .nav-link{

    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    color:#D1D5DB;

    font-size:.95rem;

    font-weight:500;

    padding:14px 16px;

    border-radius:14px;

    transition:var(--transition);

}



/*=========================================================
Navigation Icon
=========================================================*/

.sidebar .nav-link i{

    width:22px;

    text-align:center;

    font-size:1.05rem;

}



/*=========================================================
Navigation Hover
=========================================================*/

.sidebar .nav-link:hover{

    color:#FFFFFF;

    background:var(--sidebar-hover);

    transform:translateX(4px);

}



/*=========================================================
Navigation Active
=========================================================*/

.sidebar .nav-link.active{

    color:#FFFFFF;

    background:var(--primary);

    box-shadow:

        0 10px 24px rgba(37,99,235,.25);

}



/*=========================================================
Active Indicator
=========================================================*/

.sidebar .nav-link::before{

    content:"";

    position:absolute;

    left:0;

    top:10px;

    bottom:10px;

    width:4px;

    border-radius:20px;

    background:transparent;

    transition:var(--transition);

}



.sidebar .nav-link:hover::before{

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

}



.sidebar .nav-link.active::before{

    background:#FFFFFF;

}



/*=========================================================
Main Content
=========================================================*/

main{

    flex:1;

    min-height:100vh;

    background:var(--background);

    padding:32px;

}



/*=========================================================
Top Header
=========================================================*/

main>.d-flex.justify-content-between{

    background:var(--surface);

    border-radius:18px;

    padding:24px 30px;

    margin-bottom:32px;

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

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

}



/*=========================================================
Page Title
=========================================================*/

.page-title{

    font-size:1.5rem;

    font-weight:700;

    color:var(--text);

}



.page-subtitle{

    color:var(--text-light);

    margin-top:6px;

}



/*=========================================================
User Information
=========================================================*/

.text-end .fw-semibold{

    color:var(--text);

    font-size:.95rem;

}



.text-end small{

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

}



/*=========================================================
Logout Button
=========================================================*/

#logoutBtn{

    border-radius:12px;

    padding:10px 20px;

    font-weight:600;

    transition:var(--transition);

}



#logoutBtn:hover{

    transform:translateY(-2px);

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

}



/*=========================================================
Section Spacing
=========================================================*/

section{

    margin-bottom:32px;

}



/*=========================================================
Animation
=========================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



main{

    animation:fadeIn .35s ease;

}



/*=========================================================
End of Part 1.2
=========================================================*/
/*=========================================================
    PART 2.1
    Cards • Dashboard Cards • Card Header • Card Body
=========================================================*/


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

.card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:var(--card);

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

    border-radius:18px;

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

    overflow:hidden;

    transition:all .25s ease;

}

.card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}



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

.card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:#ffffff;

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

    padding:20px 24px;

}

.card-header h5{


    font-size:1.05rem;

    font-weight:700;

    color:var(--text);

}

.card-header small{

    color:var(--text-light);

}



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

.card-body{

    padding:24px;

    flex:1;

}

.card-footer{

    background:#ffffff;

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

    padding:18px 24px;

}



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

.dashboard-stat-card{

    border:none;

    border-radius:18px;

    background:#ffffff;

}

.dashboard-stat-card .card-body{

    padding:28px;

}

.dashboard-stat-card h2{

    margin:8px 0;

    font-size:2.3rem;

    font-weight:700;

    color:var(--text);

}

.dashboard-stat-card small{

    color:var(--text-light);

}

.dashboard-stat-card:hover{

    transform:translateY(-6px);

}



/*=========================================================
Dashboard Icons
=========================================================*/

.dashboard-icon{

    width:62px;

    height:62px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.5rem;

    flex-shrink:0;

}



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

.info-card{

    height:100%;

}

.info-card .card-header{

    padding-bottom:0;

}

.info-card .card-body{

    padding-top:18px;

}



/*=========================================================
Empty State
=========================================================*/

.empty-state{

    text-align:center;

    padding:60px 30px;

}

.empty-state h5{

    margin-top:18px;

    margin-bottom:12px;

    font-weight:700;

}

.empty-state p{

    max-width:450px;

    margin:auto;

    color:var(--text-light);

}



/*=========================================================
Empty State Icon
=========================================================*/

.empty-icon{

    width:82px;

    height:82px;

    margin:auto;

    border-radius:22px;

    background:#EFF6FF;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

}



/*=========================================================
Dashboard Welcome Card
=========================================================*/

.welcome-card{

    border:none;

    background:linear-gradient(135deg,#ffffff,#f8fbff);

}

.welcome-card h3{

    font-size:2rem;

    font-weight:700;

    margin-bottom:10px;

}

.welcome-card p{

    color:var(--text-light);

}



/*=========================================================
Quick Action Card
=========================================================*/

.quick-action-card .btn{

    width:100%;

}



/*=========================================================
Queue Summary
=========================================================*/

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

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

}

.summary-item:last-child{

    border-bottom:none;

}



/*=========================================================
Hover Animation
=========================================================*/

.card,
.dashboard-stat-card{

    will-change:transform;

}



/*=========================================================
End Part 2.1
=========================================================*/
/*=========================================================
    PART 2.2
    Buttons • Forms • Inputs • Select • Textarea
=========================================================*/


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.5rem;

    padding:.7rem 1.35rem;

    border-radius:12px;

    font-weight:600;

    font-size:.95rem;

    transition:all .25s ease;

    border:1px solid transparent;

    box-shadow:none;

}

.btn:hover{

    transform:translateY(-2px);

}

.btn:focus{

    box-shadow:none;

}


/*=========================================================
Primary Button
=========================================================*/

.btn-primary{

    background:var(--primary);

    border-color:var(--primary);

    color:#ffffff;

}

.btn-primary:hover{

    background:var(--primary-hover);

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

}


/*=========================================================
Secondary Button
=========================================================*/

.btn-secondary{

    background:#64748B;

    border-color:#64748B;

    color:#ffffff;

}

.btn-secondary:hover{

    background:#475569;

    border-color:#475569;

}


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

.btn-outline-primary{

    color:var(--primary);

    border-color:var(--primary);

    background:#ffffff;

}

.btn-outline-primary:hover{

    background:var(--primary);

    color:#ffffff;

}


.btn-outline-secondary{

    color:#64748B;

    border-color:#CBD5E1;

}

.btn-outline-secondary:hover{

    background:#64748B;

    color:#ffffff;

}


.btn-outline-success:hover{

    color:#ffffff;

}


.btn-outline-danger:hover{

    color:#ffffff;

}


.btn-outline-warning:hover{

    color:#ffffff;

}


.btn-light{

    background:#F8FAFC;

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

}

.btn-light:hover{

    background:#EEF2F7;

}


/*=========================================================
Button Sizes
=========================================================*/

.btn-sm{

    padding:.45rem .9rem;

    border-radius:10px;

    font-size:.82rem;

}


.btn-lg{

    padding:.9rem 1.6rem;

    border-radius:14px;

}


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

.form-label{

    font-weight:600;

    color:var(--text);

    margin-bottom:.55rem;

}


.form-text{

    color:var(--text-light);

    font-size:.82rem;

}


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

.form-control{

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

    border-radius:12px;

    padding:.8rem 1rem;

    background:#ffffff;

    color:var(--text);

    transition:all .2s ease;

}


.form-control:hover{

    border-color:#CBD5E1;

}


.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(37,99,235,.12);

}


/*=========================================================
Select
=========================================================*/

.form-select{

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

    border-radius:12px;

    padding:.8rem 1rem;

    transition:all .2s ease;

}


.form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(37,99,235,.12);

}


/*=========================================================
Textarea
=========================================================*/

textarea.form-control{

    min-height:150px;

    resize:vertical;

}


/*=========================================================
Input Groups
=========================================================*/

.input-group{

    border-radius:12px;

    overflow:hidden;

}


.input-group-text{

    background:#ffffff;

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

    color:var(--text-light);

}


.input-group .form-control{

    border-left:none;

}


/*=========================================================
Checkbox
=========================================================*/

.form-check{

    margin-bottom:.8rem;

}


.form-check-input{

    cursor:pointer;

}


.form-check-input:checked{

    background-color:var(--primary);

    border-color:var(--primary);

}


.form-check-label{

    cursor:pointer;

    color:var(--text);

}


/*=========================================================
File Upload
=========================================================*/

input[type="file"]{

    padding:.65rem;

}


/*=========================================================
Validation
=========================================================*/

.is-invalid{

    border-color:var(--danger);

}


.is-valid{

    border-color:var(--success);

}


/*=========================================================
Search Box
=========================================================*/

.search-box{

    max-width:420px;

}


/*=========================================================
End Part 2.2
=========================================================*/
/*=========================================================
    PART 2.3
    Tables • Badges • Alerts • Pagination • Avatars
=========================================================*/


/*=========================================================
Tables
=========================================================*/

.table{

    margin-bottom:0;

    vertical-align:middle;

}

.table thead{

    background:#F8FAFC;

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

}

.table thead th{

    padding:1rem 1.25rem;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

    color:var(--text-light);

    border-bottom:none;

    white-space:nowrap;

}

.table tbody td{

    padding:1rem 1.25rem;

    border-color:var(--border);

    color:var(--text);

    vertical-align:middle;

}

.table-hover tbody tr{

    transition:all .2s ease;

}

.table-hover tbody tr:hover{

    background:#F8FAFC;

}

.table-responsive{

    border-radius:16px;

}



/*=========================================================
Table Utilities
=========================================================*/

.table td strong{

    color:var(--text);

}

.table td small{

    color:var(--text-light);

}

.table tbody tr:last-child td{

    border-bottom:none;

}



/*=========================================================
Badges
=========================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.5rem .9rem;

    font-size:.74rem;

    font-weight:600;

    border-radius:999px;

    letter-spacing:.02em;

}

.badge.rounded-pill{

    padding:.55rem 1rem;

}



/*=========================================================
Status Badges
=========================================================*/

.badge.bg-success{

    background:#DCFCE7 !important;

    color:#15803D !important;

}

.badge.bg-danger{

    background:#FEE2E2 !important;

    color:#B91C1C !important;

}

.badge.bg-warning{

    background:#FEF3C7 !important;

    color:#B45309 !important;

}

.badge.bg-primary{

    background:#DBEAFE !important;

    color:#1D4ED8 !important;

}

.badge.bg-info{

    background:#E0F2FE !important;

    color:#0369A1 !important;

}

.badge.bg-secondary{

    background:#E2E8F0 !important;

    color:#475569 !important;

}

.badge.bg-dark{

    background:#1E293B !important;

    color:#FFFFFF !important;

}



/*=========================================================
Alerts
=========================================================*/

.alert{

    border:none;

    border-radius:14px;

    padding:1rem 1.25rem;

    margin-bottom:1rem;

}

.alert-success{

    background:#DCFCE7;

    color:#166534;

}

.alert-danger{

    background:#FEE2E2;

    color:#991B1B;

}

.alert-warning{

    background:#FEF3C7;

    color:#92400E;

}

.alert-info{

    background:#E0F2FE;

    color:#075985;

}



/*=========================================================
Pagination
=========================================================*/

.pagination{

    gap:.35rem;

}

.page-link{

    border:none;

    border-radius:10px;

    color:var(--text);

    padding:.55rem .9rem;

    transition:all .2s ease;

}

.page-link:hover{

    background:#EFF6FF;

    color:var(--primary);

}

.page-item.active .page-link{

    background:var(--primary);

    color:#ffffff;

}



/*=========================================================
Avatar
=========================================================*/

.contact-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#DBEAFE;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:.95rem;

    flex-shrink:0;

}

.template-avatar{

    width:58px;

    height:58px;

    border-radius:16px;

    background:#EFF6FF;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.4rem;

    flex-shrink:0;

}

.dashboard-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.45rem;

}



/*=========================================================
Empty State
=========================================================*/

.contact-empty-icon,
.dashboard-empty-icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:20px;

    background:#EFF6FF;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

}



/*=========================================================
Toolbar
=========================================================*/

.page-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    margin-bottom:1.5rem;

    flex-wrap:wrap;

}



/*=========================================================
Page Header
=========================================================*/

.page-header{

    margin-bottom:2rem;

}

.page-header h2{

    margin-bottom:.5rem;

}

.page-header p{

    color:var(--text-light);

}



/*=========================================================
Utilities
=========================================================*/

.shadow-none{

    box-shadow:none !important;

}

.rounded-xl{

    border-radius:18px !important;

}

.cursor-pointer{

    cursor:pointer;

}

.border-light{

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

}

.bg-surface{

    background:var(--surface);

}

.text-light-muted{

    color:var(--text-light);

}



/*=========================================================
Transitions
=========================================================*/

.fade-up{

    animation:fadeIn .35s ease;

}

.transition{

    transition:all .25s ease;

}



/*=========================================================
End Part 2.3
=========================================================*/
/*=========================================================
    PART 3.1
    Dashboard Components
=========================================================*/


/*=========================================================
Dashboard Welcome Card
=========================================================*/

.dashboard-welcome{

    background:linear-gradient(135deg,#FFFFFF,#F8FAFC);

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

    border-radius:20px;

}

.dashboard-welcome h2{

    font-size:2rem;

    font-weight:700;

    color:var(--text);

}

.dashboard-welcome p{

    color:var(--text-light);

}



/*=========================================================
Dashboard Statistics
=========================================================*/

.dashboard-stat-card{

    position:relative;

    overflow:hidden;

    cursor:pointer;

}

.dashboard-stat-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:transparent;

    transition:var(--transition);

}

.dashboard-stat-card:hover::after{

    background:var(--primary);

}

.dashboard-stat-card small{

    letter-spacing:.05rem;

}

.dashboard-stat-card h2{

    font-size:2.4rem;

    font-weight:700;

    margin:.4rem 0;

}



/*=========================================================
Dashboard Icons
=========================================================*/

.dashboard-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.6rem;

    transition:var(--transition);

}

.dashboard-stat-card:hover .dashboard-icon{

    transform:scale(1.08);

}



/*=========================================================
Quick Actions
=========================================================*/

.quick-actions{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.quick-actions .btn{

    justify-content:flex-start;

    height:52px;

    border-radius:14px;

    font-weight:600;

}

.quick-actions .btn i{

    font-size:1rem;

}



/*=========================================================
Recent Activity
=========================================================*/

.activity-item{

    display:flex;

    align-items:flex-start;

    gap:1rem;

    padding:1rem 0;

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

}

.activity-item:last-child{

    border-bottom:none;

}

.activity-icon{

    width:46px;

    height:46px;

    border-radius:12px;

    background:#EFF6FF;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.activity-content h6{

    margin-bottom:.35rem;

    font-size:.95rem;

}

.activity-content p{

    font-size:.88rem;

    color:var(--text-light);

}



/*=========================================================
Queue Summary
=========================================================*/

.queue-summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem 0;

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

}

.queue-summary-item:last-child{

    border-bottom:none;

}

.queue-summary-item strong{

    color:var(--text);

}

.queue-summary-item small{

    color:var(--text-light);

}



/*=========================================================
System Overview Table
=========================================================*/

.system-table td:first-child{

    font-weight:600;

}

.system-table i{

    width:20px;

    text-align:center;

}



/*=========================================================
Analytics Preview
=========================================================*/

.analytics-card{

    text-align:center;

    padding:1.5rem;

    border-radius:16px;

    background:#FFFFFF;

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

    transition:var(--transition);

}

.analytics-card:hover{

    transform:translateY(-4px);

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

}

.analytics-card h3{

    font-size:2rem;

    font-weight:700;

    margin-bottom:.5rem;

}

.analytics-card p{

    color:var(--text-light);

    margin-bottom:0;

}



/*=========================================================
Status List
=========================================================*/

.status-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:.9rem 0;

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

}

.status-item:last-child{

    border-bottom:none;

}



/*=========================================================
Dashboard Empty State
=========================================================*/

.dashboard-empty{

    padding:4rem 2rem;

    text-align:center;

}

.dashboard-empty-icon{

    width:82px;

    height:82px;

    margin:auto auto 1.5rem;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EFF6FF;

    color:var(--primary);

    font-size:2rem;

}

.dashboard-empty h5{

    margin-bottom:.5rem;

}

.dashboard-empty p{

    max-width:420px;

    margin:auto;

}



/*=========================================================
Dashboard Cards Hover
=========================================================*/

.dashboard-stat-card,
.analytics-card,
.dashboard-welcome{

    transition:all .25s ease;

}

.dashboard-stat-card:hover,
.analytics-card:hover,
.dashboard-welcome:hover{

    box-shadow:var(--shadow);

}



/*=========================================================
End Part 3.1
=========================================================*/
/*=========================================================
    PART 3.2
    Contacts Module
=========================================================*/


/*=========================================================
Page Toolbar
=========================================================*/

.page-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    margin-bottom:2rem;

    flex-wrap:wrap;

}

.page-toolbar .input-group{

    max-width:480px;

}

.page-toolbar .btn{

    white-space:nowrap;

}



/*=========================================================
Search Box
=========================================================*/

.search-box{

    max-width:480px;

    width:100%;

}

.search-box .form-control{

    border-left:none;

}

.search-box .input-group-text{

    background:#FFFFFF;

    border-right:none;

}



/*=========================================================
Import Card
=========================================================*/

.import-card{

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

    background:#FCFCFD;

}

.import-card:hover{

    border-color:var(--primary);

}

.import-card .form-control{

    cursor:pointer;

}



/*=========================================================
Contact Table
=========================================================*/

.contact-table tbody tr{

    transition:all .25s ease;

}

.contact-table tbody tr:hover{

    background:#F8FAFC;

}

.contact-table td{

    vertical-align:middle;

}



/*=========================================================
Contact Avatar
=========================================================*/

.contact-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.95rem;

    font-weight:700;

    color:var(--primary);

    background:#DBEAFE;

    flex-shrink:0;

}



/*=========================================================
Contact Name
=========================================================*/

.contact-name{

    font-weight:600;

    color:var(--text);

}

.contact-email{

    color:var(--text-light);

    font-size:.86rem;

}



/*=========================================================
Status Badge
=========================================================*/

.contact-status{

    min-width:90px;

    justify-content:center;

}



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

.contact-actions{

    display:flex;

    justify-content:center;

    gap:.5rem;

}

.contact-actions .btn{

    width:38px;

    height:38px;

    padding:0;

    border-radius:10px;

}

.contact-actions .btn i{

    font-size:.9rem;

}



/*=========================================================
Import Area
=========================================================*/

.csv-upload{

    display:flex;

    align-items:center;

    gap:1rem;

    flex-wrap:wrap;

}

.csv-upload .form-control{

    flex:1;

}



/*=========================================================
Empty State
=========================================================*/

.contact-empty{

    text-align:center;

    padding:4rem 2rem;

}

.contact-empty-icon{

    width:84px;

    height:84px;

    margin:auto auto 1.5rem;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:#EFF6FF;

    color:var(--primary);

    font-size:2rem;

}

.contact-empty h5{

    margin-bottom:.75rem;

}

.contact-empty p{

    max-width:430px;

    margin:auto auto 1.5rem;

}



/*=========================================================
Contact Footer
=========================================================*/

.contact-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:1.5rem;

    flex-wrap:wrap;

    gap:1rem;

    color:var(--text-light);

}



/*=========================================================
Form Sections
=========================================================*/

.form-section{

    margin-bottom:3rem;

}

.form-section h5{

    margin-bottom:.35rem;

}

.form-section p{

    margin-bottom:1.5rem;

}



/*=========================================================
Tags Input
=========================================================*/

.tag-input{

    font-family:inherit;

}



/*=========================================================
Contact Form Actions
=========================================================*/

.contact-form-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:1rem;

}



/*=========================================================
Profile Card
=========================================================*/

.contact-profile{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-bottom:2rem;

}

.contact-profile .contact-avatar{

    width:60px;

    height:60px;

    font-size:1.2rem;

}



/*=========================================================
Hover Effects
=========================================================*/

.contact-table tbody tr:hover .contact-avatar{

    transform:scale(1.05);

    transition:all .2s ease;

}



/*=========================================================
End Part 3.2
=========================================================*/
/*=========================================================
    PART 3.3
    Templates Module
=========================================================*/


/*=========================================================
Templates Toolbar
=========================================================*/

.template-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    margin-bottom:2rem;

    flex-wrap:wrap;

}



/*=========================================================
Template Table
=========================================================*/

.template-table tbody tr{

    transition:all .25s ease;

}

.template-table tbody tr:hover{

    background:#F8FAFC;

}

.template-table td{

    vertical-align:middle;

}



/*=========================================================
Template Name
=========================================================*/

.template-name{

    display:flex;

    align-items:center;

    gap:1rem;

}

.template-icon{

    width:46px;

    height:46px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EFF6FF;

    color:var(--primary);

    font-size:1.15rem;

    flex-shrink:0;

}

.template-name h6{

    margin-bottom:.2rem;

    font-weight:600;

}

.template-name small{

    color:var(--text-light);

}



/*=========================================================
Template Actions
=========================================================*/

.template-actions{

    display:flex;

    justify-content:center;

    gap:.5rem;

}

.template-actions .btn{

    width:38px;

    height:38px;

    padding:0;

    border-radius:10px;

}

.template-actions .btn i{

    font-size:.9rem;

}



/*=========================================================
Template Form
=========================================================*/

.template-form{

    display:flex;

    flex-direction:column;

    gap:2rem;

}

.template-form textarea{

    font-family:

        "Consolas",

        "Courier New",

        monospace;

    line-height:1.7;

}



/*=========================================================
Editor Section
=========================================================*/

.editor-section{

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

    border-radius:16px;

    overflow:hidden;

}

.editor-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem 1.25rem;

    background:#F8FAFC;

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

}

.editor-body{

    padding:1.5rem;

}



/*=========================================================
Available Variables
=========================================================*/

.variables-box{

    background:#F8FAFC;

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

    border-radius:16px;

    padding:1.5rem;

}

.variables-box h6{

    margin-bottom:1rem;

}

.variables-box code{

    display:block;

    margin-bottom:.75rem;

    padding:.65rem .9rem;

    border-radius:10px;

    background:#FFFFFF;

    color:var(--primary);

    font-size:.88rem;

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

}



/*=========================================================
Preview Layout
=========================================================*/

.template-preview{

    background:#F8FAFC;

    border-radius:20px;

    padding:2rem;

}

.preview-email{

    background:#FFFFFF;

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

    border-radius:16px;

    min-height:550px;

    padding:2rem;

    overflow:auto;

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

}



/*=========================================================
Preview Sidebar
=========================================================*/

.preview-sidebar{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.preview-sidebar table{

    margin-bottom:0;

}

.preview-sidebar th{

    width:130px;

    color:var(--text);

    font-weight:600;

}

.preview-sidebar td{

    color:var(--text-light);

}



/*=========================================================
Template Avatar
=========================================================*/

.template-avatar{

    width:64px;

    height:64px;

    border-radius:18px;

    background:#EFF6FF;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.6rem;

}



/*=========================================================
Preview Notice
=========================================================*/

.preview-notice{

    border-left:4px solid var(--primary);

}

.preview-notice ul{

    margin-top:1rem;

    padding-left:1.2rem;

}

.preview-notice li{

    margin-bottom:.5rem;

}



/*=========================================================
Empty Templates
=========================================================*/

.template-empty{

    text-align:center;

    padding:4rem 2rem;

}

.template-empty i{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:1rem;

}

.template-empty h5{

    margin-bottom:.75rem;

}

.template-empty p{

    color:var(--text-light);

    max-width:420px;

    margin:auto auto 1.5rem;

}



/*=========================================================
Template Footer
=========================================================*/

.template-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:1.5rem;

}



/*=========================================================
Editor Focus
=========================================================*/

.template-form textarea:focus{

    background:#FFFFFF;

}



/*=========================================================
End Part 3.3
=========================================================*/
/*=========================================================
    PART 4.1
    Campaigns Module
    Campaign List • Campaign Form • Campaign Details
=========================================================*/


/*=========================================================
Campaign Toolbar
=========================================================*/

.campaign-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    margin-bottom:2rem;

    flex-wrap:wrap;

}



/*=========================================================
Campaign Table
=========================================================*/

.campaign-table tbody tr{

    transition:all .25s ease;

}

.campaign-table tbody tr:hover{

    background:#F8FAFC;

}

.campaign-table td{

    vertical-align:middle;

}



/*=========================================================
Campaign Name
=========================================================*/

.campaign-name{

    display:flex;

    align-items:center;

    gap:1rem;

}

.campaign-icon{

    width:48px;

    height:48px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EFF6FF;

    color:var(--primary);

    font-size:1.2rem;

    flex-shrink:0;

}

.campaign-name h6{

    margin-bottom:.25rem;

    font-weight:600;

}

.campaign-name small{

    color:var(--text-light);

}



/*=========================================================
Campaign Status
=========================================================*/

.status-draft{

    background:#E2E8F0;

    color:#475569;

}

.status-ready{

    background:#DBEAFE;

    color:#1D4ED8;

}

.status-running{

    background:#FEF3C7;

    color:#B45309;

}

.status-paused{

    background:#E0F2FE;

    color:#0369A1;

}

.status-completed{

    background:#DCFCE7;

    color:#15803D;

}



/*=========================================================
Campaign Actions
=========================================================*/

.campaign-actions{

    display:flex;

    justify-content:center;

    gap:.5rem;

}

.campaign-actions .btn{

    width:38px;

    height:38px;

    padding:0;

    border-radius:10px;

}

.campaign-actions i{

    font-size:.9rem;

}



/*=========================================================
Campaign Form
=========================================================*/

.campaign-form{

    display:flex;

    flex-direction:column;

    gap:2rem;

}



/*=========================================================
Form Sections
=========================================================*/

.form-section{

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

    padding-bottom:2rem;

}

.form-section:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.form-section h5{

    margin-bottom:.35rem;

}

.form-section p{

    margin-bottom:1.5rem;

    color:var(--text-light);

}



/*=========================================================
Contact Selector
=========================================================*/

.contact-selector{

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

    border-radius:16px;

    background:#FFFFFF;

    max-height:320px;

    overflow-y:auto;

}

.contact-selector .form-check{

    padding:1rem 1.25rem;

    margin:0;

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

}

.contact-selector .form-check:last-child{

    border-bottom:none;

}

.contact-selector .form-check:hover{

    background:#F8FAFC;

}



/*=========================================================
Schedule Input
=========================================================*/

.schedule-box{

    max-width:420px;

}



/*=========================================================
Information Box
=========================================================*/

.campaign-info{

    border-left:4px solid var(--primary);

}

.campaign-info h6{

    margin-bottom:.75rem;

}

.campaign-info p{

    margin-bottom:0;

}



/*=========================================================
Campaign Summary Cards
=========================================================*/

.summary-card{

    text-align:center;

    padding:1.75rem;

}

.summary-card h2{

    font-size:2.3rem;

    margin-bottom:.5rem;

}

.summary-card p{

    color:var(--text-light);

}



/*=========================================================
Queue Statistics
=========================================================*/

.queue-stat{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem 0;

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

}

.queue-stat:last-child{

    border-bottom:none;

}



/*=========================================================
Campaign Information Table
=========================================================*/

.campaign-info-table{

    margin-bottom:0;

}

.campaign-info-table th{

    width:160px;

    color:var(--text);

    font-weight:600;

}

.campaign-info-table td{

    color:var(--text-light);

}



/*=========================================================
Send Campaign Panel
=========================================================*/

.send-panel{

    text-align:center;

    padding:2rem;

}

.send-panel .btn{

    width:100%;

    height:56px;

    font-size:1rem;

    font-weight:600;

}

.send-panel small{

    display:block;

    margin-top:1rem;

}



/*=========================================================
Campaign Footer
=========================================================*/

.campaign-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    flex-wrap:wrap;

}



/*=========================================================
Hover Effects
=========================================================*/

.campaign-table tbody tr:hover .campaign-icon{

    transform:scale(1.08);

    transition:all .25s ease;

}



/*=========================================================
End Part 4.1
=========================================================*/
/*=========================================================
    PART 4.2
    Queue • Logs • Log Details • Settings
=========================================================*/


/*=========================================================
Queue Table
=========================================================*/

.queue-table tbody tr{

    transition:all .25s ease;

}

.queue-table tbody tr:hover{

    background:#F8FAFC;

}

.queue-table td{

    vertical-align:middle;

}



/*=========================================================
Queue Contact
=========================================================*/

.queue-contact{

    display:flex;

    align-items:center;

    gap:1rem;

}

.queue-contact-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#DBEAFE;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:600;

    flex-shrink:0;

}

.queue-contact-name{

    font-weight:600;

    color:var(--text);

}

.queue-contact-email{

    font-size:.85rem;

    color:var(--text-light);

}



/*=========================================================
Queue Status Panel
=========================================================*/

.queue-status-list{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.queue-status-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem 0;

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

}

.queue-status-item:last-child{

    border-bottom:none;

}



/*=========================================================
Queue Summary Card
=========================================================*/

.queue-summary{

    text-align:center;

    padding:2rem;

}

.queue-summary h2{

    font-size:2.6rem;

    font-weight:700;

    margin-bottom:.4rem;

}

.queue-summary p{

    color:var(--text-light);

}



/*=========================================================
Future Features Card
=========================================================*/

.future-card{

    background:#F8FAFC;

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

    border-radius:18px;

}

.future-card ul{

    margin:1rem 0 0;

    padding-left:1.25rem;

}

.future-card li{

    margin-bottom:.65rem;

}



/*=========================================================
Logs Table
=========================================================*/

.logs-table tbody tr{

    transition:all .25s ease;

}

.logs-table tbody tr:hover{

    background:#F8FAFC;

}

.logs-table td{

    vertical-align:middle;

}



/*=========================================================
Log Subject
=========================================================*/

.log-subject{

    font-weight:600;

    color:var(--text);

}

.log-meta{

    font-size:.85rem;

    color:var(--text-light);

}



/*=========================================================
Log Actions
=========================================================*/

.log-actions{

    display:flex;

    justify-content:center;

    gap:.5rem;

}

.log-actions .btn{

    width:38px;

    height:38px;

    padding:0;

}



/*=========================================================
Log Detail
=========================================================*/

.log-detail-table{

    margin-bottom:0;

}

.log-detail-table th{

    width:180px;

    color:var(--text);

    font-weight:600;

}

.log-detail-table td{

    color:var(--text-light);

}



/*=========================================================
Error Box
=========================================================*/

.error-box{

    border-left:4px solid var(--danger);

    word-break:break-word;

}



/*=========================================================
Success Box
=========================================================*/

.success-box{

    border-left:4px solid var(--success);

}



/*=========================================================
Preview Information
=========================================================*/

.preview-information{

    display:flex;

    flex-direction:column;

    gap:1rem;

}



/*=========================================================
Settings Table
=========================================================*/

.settings-table{

    margin-bottom:0;

}

.settings-table th{

    width:220px;

    font-weight:600;

    color:var(--text);

}

.settings-table td{

    color:var(--text-light);

}



/*=========================================================
Settings Feature List
=========================================================*/

.settings-features{

    display:flex;

    flex-direction:column;

    gap:.75rem;

}

.settings-feature{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:.9rem 0;

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

}

.settings-feature:last-child{

    border-bottom:none;

}



/*=========================================================
Platform Status
=========================================================*/

.platform-status{

    text-align:center;

}

.platform-status .alert{

    margin-bottom:0;

}



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

.info-list{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.info-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:.9rem 0;

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

}

.info-item:last-child{

    border-bottom:none;

}



/*=========================================================
Code Blocks
=========================================================*/

code{

    background:#F1F5F9;

    color:var(--primary);

    padding:.25rem .55rem;

    border-radius:8px;

    font-size:.85rem;

    font-family:Consolas, Monaco, monospace;

}



/*=========================================================
Utility Spacing
=========================================================*/

.mb-section{

    margin-bottom:2rem;

}

.mt-section{

    margin-top:2rem;

}



/*=========================================================
Hover Effects
=========================================================*/

.logs-table tbody tr:hover .badge,

.queue-table tbody tr:hover .badge{

    transform:scale(1.05);

    transition:all .2s ease;

}



/*=========================================================
End Part 4.2
=========================================================*/
/*=========================================================
    PART 5
    Responsive Design • Utilities • Animations
    Final Polish
=========================================================*/


/*=========================================================
Smooth Animation
=========================================================*/

.fade-in{

    animation:fadeIn .35s ease;

}

.slide-up{

    animation:slideUp .35s ease;

}

.scale-in{

    animation:scaleIn .25s ease;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/*=========================================================
Card Hover Effects
=========================================================*/

.card{

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        border-color .25s ease;

}

.card:hover{

    border-color:#D6E4FF;

}



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

.btn{

    transition:

        background-color .2s ease,

        border-color .2s ease,

        transform .2s ease,

        box-shadow .2s ease;

}

.btn:active{

    transform:scale(.98);

}



/*=========================================================
Form Controls
=========================================================*/

.form-control,

.form-select{

    transition:

        border-color .2s ease,

        box-shadow .2s ease,

        background-color .2s ease;

}



/*=========================================================
Tables
=========================================================*/

.table tbody tr{

    transition:

        background-color .2s ease,

        transform .2s ease;

}



/*=========================================================
Badges
=========================================================*/

.badge{

    transition:

        transform .2s ease,

        opacity .2s ease;

}



/*=========================================================
Images
=========================================================*/

img{

    max-width:100%;

    height:auto;

}



/*=========================================================
Overflow Helpers
=========================================================*/

.overflow-hidden{

    overflow:hidden !important;

}

.overflow-auto{

    overflow:auto !important;

}



/*=========================================================
Width Utilities
=========================================================*/

.w-fit{

    width:fit-content;

}

.min-vh-100{

    min-height:100vh;

}



/*=========================================================
Rounded Utilities
=========================================================*/

.rounded-12{

    border-radius:12px !important;

}

.rounded-16{

    border-radius:16px !important;

}

.rounded-20{

    border-radius:20px !important;

}



/*=========================================================
Shadow Utilities
=========================================================*/

.shadow-soft{

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

}

.shadow-medium{

    box-shadow:var(--shadow);

}

.shadow-large{

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

}



/*=========================================================
Border Utilities
=========================================================*/

.border-dashed{

    border:2px dashed var(--border);

}

.border-primary{

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

}



/*=========================================================
Cursor Utilities
=========================================================*/

.cursor-pointer{

    cursor:pointer;

}

.cursor-default{

    cursor:default;

}



/*=========================================================
Flex Utilities
=========================================================*/

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



/*=========================================================
Desktop (1200px and above)
=========================================================*/

@media (min-width:1200px){

    main{

        padding:32px;

    }

    .login-card{

        max-width:500px;

    }

}



/*=========================================================
Laptop (992px - 1199px)
=========================================================*/

@media (max-width:1199px){

    main{

        padding:24px;

    }

    .dashboard-stat-card h2{

        font-size:2rem;

    }

    .contacts-toolbar,

    .campaign-toolbar,

    .template-toolbar{

        margin-bottom:1.5rem;

    }

}



/*=========================================================
Tablet (768px - 991px)
=========================================================*/

@media (max-width:991px){

    /*---------------------------------------------
    Sidebar
    ---------------------------------------------*/

    .sidebar{

        width:85px;

        min-width:85px;

        padding:18px 10px;

    }

    .sidebar h4{

        display:none;

    }

    .sidebar .nav-link{

        justify-content:center;

        padding:14px 10px;

        border-radius:12px;

    }

    .sidebar .nav-link span{

        display:none;

    }

    .sidebar .nav-link i{

        margin:0;

        font-size:1.2rem;

    }


    /*---------------------------------------------
    Main
    ---------------------------------------------*/

    main{

        padding:20px;

    }


    /*---------------------------------------------
    Dashboard Cards
    ---------------------------------------------*/

    .dashboard-stat-card{

        margin-bottom:20px;

    }

    .dashboard-stat-card h2{

        font-size:1.9rem;

    }


    /*---------------------------------------------
    Toolbars
    ---------------------------------------------*/

    .contacts-toolbar .row,

    .campaign-toolbar .row,

    .template-toolbar .row{

        row-gap:20px;

    }

    .contacts-toolbar .btn,

    .campaign-toolbar .btn,

    .template-toolbar .btn{

        width:100%;

    }


    /*---------------------------------------------
    Search + Import
    ---------------------------------------------*/

    .input-group{

        flex-wrap:nowrap;

    }


    /*---------------------------------------------
    Tables
    ---------------------------------------------*/

    .table-responsive{

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

    }

    .table{

        min-width:900px;

    }


    /*---------------------------------------------
    Forms
    ---------------------------------------------*/

    .card-body{

        padding:22px;

    }

    .form-control,

    .form-select{

        height:52px;

    }


    textarea.form-control{

        height:auto;

        min-height:180px;

    }


    /*---------------------------------------------
    Contact Avatar
    ---------------------------------------------*/

    .contact-avatar{

        width:42px;

        height:42px;

        font-size:.9rem;

    }

}
/*=========================================================
Mobile (Below 768px)
=========================================================*/

@media (max-width:767px){

    /*---------------------------------------------
    Layout
    ---------------------------------------------*/

    body{

        font-size:.92rem;

    }

    main{

        padding:16px;

    }

    .sidebar{

        position:fixed;

        left:-260px;

        top:0;

        width:260px;

        height:100vh;

        z-index:1050;

        transition:left .3s ease;

    }

    .sidebar.show{

        left:0;

    }


    /*---------------------------------------------
    Toolbar
    ---------------------------------------------*/

    .contacts-toolbar .row,

    .campaign-toolbar .row,

    .template-toolbar .row{

        row-gap:18px;

    }

    .contacts-toolbar .btn,

    .campaign-toolbar .btn,

    .template-toolbar .btn{

        width:100%;

    }


    /*---------------------------------------------
    Search & Import
    ---------------------------------------------*/

    .input-group{

        flex-wrap:wrap;

        gap:10px;

    }

    .input-group>.form-control,

    .input-group>.btn,

    .input-group>.input-group-text{

        width:100%;

        border-radius:12px !important;

    }

    .input-group>.input-group-text{

        display:none;

    }


    /*---------------------------------------------
    Cards
    ---------------------------------------------*/

    .card{

        border-radius:18px;

    }

    .card-header{

        padding:18px 20px;

    }

    .card-body{

        padding:18px;

    }


    /*---------------------------------------------
    Dashboard
    ---------------------------------------------*/

    .dashboard-stat-card{

        margin-bottom:18px;

    }

    .dashboard-stat-card h2{

        font-size:1.75rem;

    }

    .dashboard-icon{

        width:54px;

        height:54px;

        font-size:1.3rem;

    }


    /*---------------------------------------------
    Tables
    ---------------------------------------------*/

    .table{

        min-width:850px;

    }

    .table th,

    .table td{

        white-space:nowrap;

    }


    /*---------------------------------------------
    Forms
    ---------------------------------------------*/

    .form-control,

    .form-select{

        height:50px;

    }

    textarea.form-control{

        min-height:180px;

    }


    /*---------------------------------------------
    Buttons
    ---------------------------------------------*/

    .btn-action{

        width:100%;

    }


    /*---------------------------------------------
    Contact Avatar
    ---------------------------------------------*/

    .contact-avatar{

        width:40px;

        height:40px;

        font-size:.85rem;

    }


    /*---------------------------------------------
    Footer Sections
    ---------------------------------------------*/

    .contact-footer,

    .campaign-footer,

    .template-footer{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

}



/*=========================================================
Small Mobile (Below 576px)
=========================================================*/

@media (max-width:576px){

    h1{

        font-size:1.9rem;

    }

    h2{

        font-size:1.6rem;

    }

    h3{

        font-size:1.35rem;

    }

    h4{

        font-size:1.15rem;

    }

    h5{

        font-size:1rem;

    }


    .page-title{

        font-size:1.5rem;

    }


    .dashboard-stat-card h2{

        font-size:1.5rem;

    }


    .template-avatar{

        width:50px;

        height:50px;

    }

    .contact-avatar{

        width:38px;

        height:38px;

    }


    .login-card{

        padding:26px;

        border-radius:20px;

    }

}



/*=========================================================
Print
=========================================================*/

@media print{

    .sidebar,

    .btn,

    .contacts-toolbar,

    .campaign-toolbar,

    .template-toolbar,

    .login-left{

        display:none !important;

    }

    body{

        background:#FFFFFF;

        color:#000000;

    }

    main{

        margin:0;

        padding:0;

    }

    .card{

        border:1px solid #D1D5DB;

        box-shadow:none;

        page-break-inside:avoid;

    }

    .table{

        min-width:100%;

    }

}
/*=========================================================
End of style.css
=========================================================*/
/*=========================================================
    LOGIN PAGE
=========================================================*/


/*=========================================================
Page Background
=========================================================*/

.login-page{

    min-height:100vh;

    background:
        radial-gradient(circle at top right,
        rgba(37,99,235,.06),
        transparent 35%),

        radial-gradient(circle at bottom left,
        rgba(37,99,235,.04),
        transparent 40%),

        #F8FAFC;

    overflow:hidden;

}



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

.login-page .container-fluid{

    padding:0;

}

.login-page .row{

    min-height:100vh;

}



/*=========================================================
Left Panel
=========================================================*/

.login-left{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #2563EB 0%,
        #1D4ED8 100%
    );

    overflow:hidden;

}



/*=========================================================
Background Circles
=========================================================*/

.login-left::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

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

    top:-100px;

    right:-80px;

}

.login-left::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

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

    bottom:-80px;

    left:-70px;

}



/*=========================================================
Left Content
=========================================================*/

.login-left-content{

    position:relative;

    z-index:2;

    width:100%;

    max-width:460px;

    padding:40px;

}



/*=========================================================
Brand Icon
=========================================================*/

.brand-icon{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    margin-bottom:35px;

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

    backdrop-filter:blur(12px);

    box-shadow:

        0 15px 40px rgba(0,0,0,.15);

}

.brand-icon i{

    font-size:2.7rem;

    color:#FFFFFF;

}



/*=========================================================
Heading
=========================================================*/

.login-left-content h1{

    color:#FFFFFF;

    font-size:3rem;

    font-weight:800;

    line-height:1.15;

    margin-bottom:24px;

}



/*=========================================================
Description
=========================================================*/

.login-left-content p{

    color:rgba(255,255,255,.90);

    font-size:1.08rem;

    line-height:1.9;

    max-width:430px;

}



/*=========================================================
Features
=========================================================*/

.login-features{

    margin-top:50px;

    display:flex;

    flex-direction:column;

    gap:22px;

}

.login-features div{

    display:flex;

    align-items:center;

    gap:14px;

    color:#FFFFFF;

    font-size:1rem;

    font-weight:500;

}

.login-features i{

    font-size:1.15rem;

    color:#BBF7D0;

}



/*=========================================================
Right Side
=========================================================*/

.login-page .col-lg-6:last-child{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:50px;

}
/*=========================================================
Login Card
=========================================================*/

.login-card{

    width:100%;

    max-width:500px;

    background:#FFFFFF;

    border-radius:28px;

    padding:50px;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:

        0 30px 80px rgba(15,23,42,.10);

    position:relative;

    z-index:5;

    margin-left:-60px;

    transition:all .35s ease;

}

.login-card:hover{

    transform:translateY(-6px);

    box-shadow:

        0 40px 90px rgba(15,23,42,.14);

}



/*=========================================================
Login Heading
=========================================================*/

.login-card h2{

    font-size:2.35rem;

    font-weight:700;

    color:var(--text);

    margin-bottom:.35rem;

}

.login-card p{

    color:var(--text-light);

    font-size:.98rem;

}



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

.login-card .form-label{

    font-size:.92rem;

    font-weight:600;

    color:var(--text);

    margin-bottom:.7rem;

}



/*=========================================================
Input Group
=========================================================*/

.login-card .input-group{

    border-radius:16px;

    overflow:hidden;

}

.login-card .input-group-text{

    width:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#F8FAFC;

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

    border-right:none;

    color:#64748B;

}

.login-card .input-group-text i{

    font-size:1rem;

}



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

.login-card .form-control{

    height:60px;

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

    border-left:none;

    background:#FFFFFF;

    font-size:.95rem;

    padding:0 18px;

    box-shadow:none;

}

.login-card .form-control::placeholder{

    color:#94A3B8;

}

.login-card .form-control:focus{

    border-color:var(--primary);

    box-shadow:none;

}

.login-card .input-group:focus-within{

    border-radius:16px;

    box-shadow:

        0 0 0 .20rem rgba(37,99,235,.12);

}



/*=========================================================
Login Button
=========================================================*/

.login-card .btn{

    height:60px;

    border-radius:16px;

    font-size:1rem;

    font-weight:600;

    letter-spacing:.2px;

}

.login-card .btn i{

    font-size:1rem;

}

.login-card .btn:hover{

    transform:translateY(-2px);

}



/*=========================================================
Footer
=========================================================*/

.login-footer{

    margin-top:35px;

    text-align:center;

    color:var(--text-light);

    font-size:.88rem;

}

.login-footer span{

    margin:0 .45rem;

}



/*=========================================================
Loading State
=========================================================*/

.login-card .btn.loading{

    opacity:.85;

    pointer-events:none;

}

.login-card .btn.loading i{

    animation:loginSpin .8s linear infinite;

}

@keyframes loginSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/*=========================================================
Responsive
=========================================================*/

@media (max-width:991px){

    .login-left{

        display:none !important;

    }

    .login-page .col-lg-6:last-child{

        flex:0 0 100%;

        max-width:100%;

        padding:30px;

    }

    .login-card{

        margin-left:0;

        max-width:520px;

        padding:42px;

    }

}



@media (max-width:576px){

    .login-page .col-lg-6:last-child{

        padding:18px;

    }

    .login-card{

        padding:30px;

        border-radius:22px;

    }

    .login-card h2{

        font-size:2rem;

    }

    .login-card .form-control{

        height:56px;

    }

    .login-card .btn{

        height:56px;

    }

    .login-footer{

        font-size:.82rem;

    }

}



/*=========================================================
End Login Section
=========================================================*/