/* =========================================================
   LEEMAN ISP MANAGEMENT SYSTEM
========================================================= */

:root{

    /* =====================================================
       LEEMAN NETWORKS DESIGN SYSTEM
       Shared visual language for public + platform UI
    ===================================================== */

    --lm-ink: #0a1420;
    --lm-ink-soft: #101b2b;

    --lm-paper: #f6f4ee;
    --lm-surface: #ffffff;

    --lm-teal-900: #0a5f58;
    --lm-teal-700: #0d9488;
    --lm-teal-600: #109c8f;
    --lm-teal-500: #14b8a6;
    --lm-teal-300: #5eead4;

    --lm-signal: #f0973d;
    --lm-signal-soft: #fdf1e3;

    --lm-line: #e4e0d4;
    --lm-line-strong: #d8d3c4;

    --lm-text: #16212e;
    --lm-text-muted: #5c6a72;
    --lm-text-faint: #8b9299;

    --lm-radius-lg: 22px;
    --lm-radius-md: 15px;
    --lm-radius-sm: 10px;

    --lm-shadow-soft:
        0 1px 2px rgba(10,20,32,.04),
        0 12px 28px rgba(10,20,32,.06);

    --lm-shadow-lift:
        0 4px 10px rgba(10,20,32,.06),
        0 24px 48px rgba(10,20,32,.12);

    /* ==========================
       LEGACY PLATFORM ALIASES
    ========================== */

    --color-primary: var(--lm-teal-700);
    --color-primary-hover: var(--lm-teal-900);
    --color-primary-light: var(--lm-signal-soft);

    --color-background: var(--lm-paper);
    --color-surface: var(--lm-surface);
    --color-surface-elevated: var(--lm-surface);

    --sidebar-bg: var(--lm-ink);
    --sidebar-hover: rgba(255,255,255,.06);
    --sidebar-active: var(--lm-teal-700);
    --sidebar-text: #d1d5db;
    --sidebar-heading: rgba(255,255,255,.55);

    --text-primary: var(--lm-text);
    --text-secondary: var(--lm-text-muted);
    --text-muted: var(--lm-text-faint);

    --border-color: var(--lm-line);
    --border-light: var(--lm-line-strong);

    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #2563eb;

    --shadow-sm:
        0 1px 2px rgba(0,0,0,.04);

    --shadow-md:
        0 8px 24px rgba(15,23,42,.05);

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

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;

    --header-height: 72px;

    --transition:
        all .18s ease;
}

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

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

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    background:var(--color-background);

    color:var(--text-primary);

    font-family:
        Inter,
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size:14px;

    line-height:1.5;

    overflow-x:hidden;

    padding-top:var(--header-height);

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


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

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#eef2f7;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}


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

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    text-decoration:none;

}


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

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

    margin-top:0;

    color:var(--text-primary);

    font-weight:600;

    line-height:1.2;

}

h1{

    font-size:30px;

}

h2{

    font-size:24px;

}

h3{

    font-size:20px;

}

h4{

    font-size:18px;

}

h5{

    font-size:16px;

}

h6{

    font-size:14px;

}

p{

    color:var(--text-secondary);

    margin-bottom:0;

}

small{

    color:var(--text-muted);

}


/* =========================================================
   LOGIN PAGE
========================================================= */

.login-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:32px;

    background:
        radial-gradient(
            circle at top right,
            rgba(13,148,136,.08),
            transparent 35%
        ),
        var(--lm-paper);

}

.login-page .login-card-wrapper .card{

    background:var(--lm-surface);

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

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

    box-shadow:var(--lm-shadow-soft);

}

.login-page .form-label{

    color:var(--lm-text);

}

.login-page .form-control,
.login-page .input-group-text{

    border-color:var(--lm-line-strong);

}

.login-page .input-group-text{

    background:var(--lm-paper);

    color:var(--lm-text-muted);

}

.login-page .form-control{

    background:var(--lm-surface);

    color:var(--lm-text);

}

.login-page .form-control:focus{

    border-color:var(--lm-teal-600);

    box-shadow:
        0 0 0 .2rem rgba(13,148,136,.15);

}

.login-page .input-group:has(input:focus) .input-group-text{

    border-color:var(--lm-teal-600);

    color:var(--lm-teal-700);

}

.login-page .btn-primary{

    background:var(--lm-teal-700);

    border-color:var(--lm-teal-700);

}

.login-page .btn-primary:hover{

    background:var(--lm-teal-900);

    border-color:var(--lm-teal-900);

}

.login-page a{

    color:var(--lm-teal-700);

}

.login-page a:hover{

    color:var(--lm-teal-900);

}
/* =========================================================
   MAIN LAYOUT
========================================================= */

#content{

    margin-left:0;

    min-height:calc(100vh - var(--header-height));

    background:var(--color-background);

    transition:
        margin-left .25s ease;

}

.container-fluid{

    padding-left:28px;

    padding-right:28px;

}

/* =========================================================
SIDEBAR
========================================================= */
#sidebar{
    position:fixed;
    top:0;
    left:0;
    width:270px;
    height:100vh;
    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg,#0f172a 0%,#172554 100%);
    color:#fff;
    overflow-y:auto;
    z-index:1050;
    padding-top:var(--header-height);
    transform:translateX(-270px);
    transition:transform .25s ease;
    border-right:1px solid rgba(255,255,255,.06);
}

#sidebar.show{
    transform:translateX(0);
}

/* =========================================================
SIDEBAR TOGGLE
========================================================= */
#sidebarToggle{
    position:fixed;
    top:calc(var(--header-height) + 12px);
    left:14px;
    z-index:1200;
}

/* =========================================================
SCROLLBAR
========================================================= */
#sidebar::-webkit-scrollbar{
    width:8px;
}

#sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.18);
    border-radius:20px;
}

#sidebar::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.30);
}

/* =========================================================
SECTION HEADINGS
========================================================= */
#sidebar .text-uppercase{
    padding:0 22px;
    margin-top:26px !important;
    margin-bottom:12px !important;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.3px;
    color:rgba(255,255,255,.45);
}

/* =========================================================
LISTS
========================================================= */
#sidebar ul{
    margin:0;
    padding:0;
    list-style:none;
}

#sidebar ul li{
    margin:3px 0;
}

/* =========================================================
LINKS
========================================================= */
#sidebar ul li a{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 12px;
    padding:13px 15px;
    border-radius:12px;
    color:rgba(255,255,255,.82);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:all .2s ease;
}

#sidebar ul li a i{
    width:22px;
    text-align:center;
    font-size:17px;
    color:rgba(255,255,255,.75);
    transition:.2s;
}

/* =========================================================
HOVER
========================================================= */
#sidebar ul li a:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
    transform:translateX(4px);
}

#sidebar ul li a:hover i{
    color:#ffffff;
}

/* =========================================================
ACTIVE
========================================================= */
#sidebar ul li a.active{
    background:linear-gradient(90deg,#2563eb,#3b82f6);
    color:#fff;
    font-weight:600;
    box-shadow:0 10px 25px rgba(37,99,235,.25);
}

#sidebar ul li a.active i{
    color:#fff;
}

/* =========================================================
DISABLED
========================================================= */
#sidebar ul li a.disabled{
    opacity:.45;
    cursor:not-allowed;
}

#sidebar ul li a.disabled:hover{
    background:transparent;
    transform:none;
}

/* =========================================================
DIVIDER
========================================================= */
#sidebar hr{
    border-color:rgba(255,255,255,.08);
    margin:18px 20px;
}

/* =========================================================
FOOTER
========================================================= */
.sidebar-footer{
    margin-top:auto;
    padding:18px;
    border-top:1px solid rgba(255,255,255,.08);
}

/* =========================================================
TOP NAVBAR
========================================================= */
.top-navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:var(--header-height);
    display:flex;
    align-items:center;
    background:var(--color-surface);
    border-bottom:1px solid var(--border-color);
    padding:0 28px;
    box-shadow:var(--shadow-sm);
    z-index:1100;
}

.top-navbar .container-fluid{
    padding-left:0;
    padding-right:0;
    position:relative;
}

/* =========================================================
COMPANY LOGO
========================================================= */
.company-logo{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--border-light);
    overflow:hidden;
}

.company-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

/* =========================================================
TITLE
========================================================= */
.navbar-title{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:var(--text-primary);
}

/* =========================================================
DATE & TIME
========================================================= */
.navbar-datetime{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    min-height:36px;
    padding:0 13px;

    white-space:nowrap;
    line-height:1;

    background:rgba(255,255,255,0.94);
    border:1px solid rgba(15,23,42,0.10);
    border-radius:11px;

    box-shadow:
        0 2px 5px rgba(15,23,42,0.05),
        0 6px 16px rgba(15,23,42,0.06);

    color:var(--text-secondary);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.navbar-datetime::before{
    content:"\1F553";

    display:flex;
    align-items:center;
    justify-content:center;

    width:23px;
    height:23px;

    flex:0 0 23px;

    background:rgba(15,23,42,0.055);
    border-radius:7px;

    font-size:12px;
}

.navbar-datetime #currentDate{
    opacity:0.70;

    font-size:11px;
    font-weight:600;
    letter-spacing:0.015em;
}

.navbar-datetime .mx-2{
    margin-left:0 !important;
    margin-right:0 !important;

    font-size:9px;
    opacity:0.30;
}

.navbar-datetime #currentClock{
    font-variant-numeric:tabular-nums;

    font-size:14px;
    font-weight:700;
    letter-spacing:0.045em;

    color:var(--text-primary);
}

.navbar-datetime #currentClock::after{
    content:" EAT";

    margin-left:4px;

    font-size:8px;
    font-weight:700;
    letter-spacing:0.08em;

    color:var(--text-secondary);
    opacity:0.60;
}

.navbar-datetime:hover{
    border-color:rgba(15,23,42,0.15);

    box-shadow:
        0 3px 7px rgba(15,23,42,0.07),
        0 8px 20px rgba(15,23,42,0.07);
}

/* =========================================================
TOGGLE BUTTON
========================================================= */
.sidebar-toggle{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:12px;
    background:#0f172a;
    color:#fff;
    transition:.2s;
}

.sidebar-toggle:hover{
    background:#2563eb;
}

.sidebar-toggle i{
    font-size:20px;
}

/* =========================================================
USER MENU
========================================================= */
.user-menu{

    display:flex;

    align-items:center;

    gap:12px;

    padding:6px 10px 6px 6px;

    background:#fff;

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

    border-radius:999px;

    transition:var(--transition);

}

.user-menu:hover{

    background:#fafafa;

    border-color:#d4d4d8;

}

/* =========================================================
USER AVATAR
========================================================= */
.user-avatar{

    width:40px;

    height:40px;

    border-radius:50%;

    overflow:hidden;

    border:2px solid var(--border-light);

    flex-shrink:0;

    background:#fff;

}

.user-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* =========================================================
USER DETAILS
========================================================= */
.user-details{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    line-height:1.2;

}

.user-name{

    font-size:13px;

    font-weight:600;

    color:var(--text-primary);

}

.user-role{

    font-size:11px;

    color:var(--text-secondary);

}

.user-menu .bi-chevron-down{

    font-size:12px;

    color:var(--text-secondary);

}

/* =========================================================
DROPDOWN
========================================================= */
.dropdown-menu{

    margin-top:12px;

    min-width:240px;

    border:none;

    border-radius:12px;

    padding:8px;

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

}

.dropdown-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 12px;

    border-radius:8px;

    font-size:14px;

    transition:var(--transition);

}

.dropdown-item:hover{

    background:#f4f4f5;

}

.dropdown-divider{

    margin:8px 0;

}

/* =========================================================
PAGE CONTENT
========================================================= */
main.container-fluid{

    padding-top:28px;

    padding-bottom:40px;

}

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

.card{

    background:var(--color-surface);

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

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

    box-shadow:none;

    overflow:hidden;

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

}

.card:hover{

    transform:translateY(-2px);

    border-color:#d4d4d8;

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

}

.card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 20px;

    background:#ffffff;

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

    font-size:15px;

    font-weight:600;

    color:var(--text-primary);

}

.card-body{

    padding:20px;

}

.card-footer{

    background:#ffffff;

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

}


/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:28px;

}

.dashboard-header h2{

    margin-bottom:4px;

    font-size:28px;

    font-weight:700;

    letter-spacing:-.4px;

}

.dashboard-header p{

    color:var(--text-secondary);

}

.dashboard-actions{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}


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

.dashboard-card{

    height:100%;

}

.dashboard-card .card-body{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.dashboard-card h6{

    margin:0;

    color:var(--text-secondary);

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.4px;

}

.dashboard-card h2{

    margin:0;

    font-size:34px;

    font-weight:700;

    line-height:1;

    font-variant-numeric:tabular-nums;

    color:var(--text-primary);

}

.dashboard-card small{

    color:var(--text-secondary);

}


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

.btn{

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

    font-size:13px;

    font-weight:600;

    padding:10px 16px;

    transition:var(--transition);

}

.btn:focus{

    box-shadow:
        0 0 0 3px rgba(15,118,110,.18);

}

.btn-primary{

    background:var(--color-primary);

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

}

.btn-primary:hover{

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

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

}

.btn-outline-primary{

    color:var(--color-primary);

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

}

.btn-outline-primary:hover{

    background:var(--color-primary);

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

}

.btn-light{

    background:#ffffff;

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

}


/* =========================================================
   ALERTS
========================================================= */

.alert{

    border:none;

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

    padding:16px 18px;

    font-size:14px;

    box-shadow:none;

}

.alert-success{

    background:#ecfdf5;

    color:#166534;

}

.alert-warning{

    background:#fffbeb;

    color:#92400e;

}

.alert-danger{

    background:#fef2f2;

    color:#991b1b;

}

.alert-info{

    background:#eff6ff;

    color:#1d4ed8;

}


/* =========================================================
   FLASH MESSAGES
========================================================= */

.flash-container{

    position:fixed;

    top:88px;

    right:24px;

    width:360px;

    z-index:9999;

}

.flash-container.login-welcome-flash{

    left:50%;

    right:auto;

    transform:translateX(-50%);

    width:min(520px,calc(100% - 32px));

}

.flash-container .alert{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

    border:1px solid rgba(0,0,0,.04);

}


/* =========================================================
   DASHBOARD GRID
========================================================= */

#content .row{

    row-gap:24px;

}

#content .card + .card{

    margin-top:24px;

}

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

.table-responsive{

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

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

    background:#ffffff;

    overflow:hidden;

}

.table{

    margin-bottom:0;

    font-size:14px;

    color:var(--text-primary);

}

.table thead th{

    background:#f8fafc;

    color:var(--text-primary);

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

    border-top:none;

    padding:14px 18px;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

}

.table tbody td{

    padding:14px 18px;

    vertical-align:middle;

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

}

.table-hover tbody tr{

    transition:background .15s ease;

}

.table-hover tbody tr:hover{

    background:#fafafa;

}


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

label{

    display:block;

    margin-bottom:6px;

    font-size:13px;

    font-weight:600;

    color:var(--text-primary);

}

.form-control,
.form-select,
textarea{

    height:44px;

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

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

    background:#ffffff;

    color:var(--text-primary);

    font-size:14px;

    transition:var(--transition);

    box-shadow:none;

}

textarea.form-control{

    min-height:120px;

}

.form-control::placeholder,
textarea::placeholder{

    color:var(--text-muted);

}

.form-control:hover,
.form-select:hover{

    border-color:#d4d4d8;

}

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

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

    box-shadow:0 0 0 3px rgba(15,118,110,.15);

}


/* =========================================================
   INPUT GROUPS
========================================================= */

.input-group-text{

    background:#f8fafc;

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

}


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

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:11px;

    font-weight:600;

    letter-spacing:.2px;

}


/* =========================================================
   PAGINATION
========================================================= */

.pagination{

    gap:6px;

}

.page-link{

    border-radius:8px;

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

    color:var(--text-primary);

}

.page-link:hover{

    background:#f4f4f5;

}

.page-item.active .page-link{

    background:var(--color-primary);

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

}


/* =========================================================
   MODALS
========================================================= */

.modal-content{

    border:none;

    border-radius:16px;

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

}

.modal-header{

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

}

.modal-footer{

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

}


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

.text-muted{

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

}

.border-soft{

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

}

.surface{

    background:#ffffff;

}

.shadow-soft{

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

}

.rounded-soft{

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

}


/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:992px){

    #content{

        margin-left:0;

    }

    #sidebar{

        transform:translateX(-260px);

    }

    #sidebar:not(.collapsed){

        transform:translateX(0);

    }

    .top-navbar{

        left:0;

        padding:0 18px;

    }

    .container-fluid{

        padding-left:18px;

        padding-right:18px;

    }

}


@media (max-width:768px){

    .navbar-subtitle{

        display:none;

    }

    .user-details{

        display:none;

    }

    .dashboard-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .dashboard-actions{

        width:100%;

    }

    .dashboard-actions .btn{

        width:100%;

    }

    .flash-container{

        width:calc(100% - 24px);

        left:12px;

        right:12px;

    }

    .table{

        font-size:13px;

    }

    .table thead th,
    .table tbody td{

        padding:12px;

    }

}


/* =========================================================
   DARK MODE FOUNDATION
========================================================= */

body.dark-mode{

    --color-background:#09090b;
    --color-surface:#121214;
    --color-surface-elevated:#1a1a1d;
    --text-primary:#fafafa;
    --text-secondary:#a1a1aa;
    --text-muted:#71717a;
    --border-color:#27272a;
    --border-light:#1f1f22;

}

body.dark-mode .card-header,
body.dark-mode .card-footer,
body.dark-mode .nav-icon-btn,
body.dark-mode .user-menu,
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea,
body.dark-mode .surface,
body.dark-mode .table-responsive{

    background:var(--color-surface);
    color:var(--text-primary);
    border-color:var(--border-color);

}

body.dark-mode .nav-icon-btn:hover,
body.dark-mode .table thead th,
body.dark-mode .input-group-text{

    background:var(--color-surface-elevated);
    color:var(--text-primary);

}

body.dark-mode .dropdown-item:hover,
body.dark-mode .page-link:hover,
body.dark-mode .sidebar-toggle{

    background:var(--color-surface-elevated);

}

body.dark-mode .dropdown-menu,
body.dark-mode .modal-content{

    background:var(--color-surface);
    color:var(--text-primary);

}

body.dark-mode .page-link{

    background:var(--color-surface);
    color:var(--text-primary);

}

body.dark-mode ::-webkit-scrollbar-track{

    background:var(--color-background);

}

body.dark-mode ::-webkit-scrollbar-thumb{

    background:#3f3f46;

}

body.dark-mode .login-page{

    background:
        radial-gradient(
            circle at top right,
            rgba(15,118,110,.10),
            transparent 35%
        ),
        var(--color-background);

}

body.dark-mode .dropdown-item,
body.dark-mode .list-group-item,
body.dark-mode .nav-link,
body.dark-mode .modal-title,
body.dark-mode .modal-body,
body.dark-mode th,
body.dark-mode td,
body.dark-mode .form-check-label,
body.dark-mode .btn-outline-secondary{

    color:var(--text-primary);

}

body.dark-mode .dropdown-item:hover{

    color:var(--text-primary);

}

body.dark-mode .bg-white{

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

}

body.dark-mode .bg-light{

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

}

/* =========================================================
   TRANSITIONS
========================================================= */

button,
.btn,
.card,
.form-control,
.form-select,
.dropdown-menu,
.page-link,
.table tbody tr,
.nav-icon-btn,
.user-menu{

    transition:var(--transition);

}

/* =========================================================
CUSTOMERS MODULE
========================================================= */
.customer-summary-card{
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
}

.customer-summary-card .card-body{
    padding:22px;
}

.customer-summary-card h3{
    margin-top:6px;
    margin-bottom:0;
    font-size:30px;
    font-weight:700;
    line-height:1;
}

.summary-icon{
    font-size:34px;
    color:var(--color-primary);
    opacity:.18;
}

/* =========================================================
CUSTOMER FILTER CARD
========================================================= */
.card form .form-control,
.card form .form-select{
    height:46px;
}

.card form .btn{
    height:46px;
}

/* =========================================================
CUSTOMER TABLE
========================================================= */
.customer-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:999px;
    background:var(--color-primary-light);
    color:var(--color-primary);
    font-size:12px;
    font-weight:700;
    letter-spacing:.4px;
}

.customer-row{
    transition:all .2s ease;
}

.customer-row:hover{
    transform:translateY(-1px);
    background:rgba(var(--bs-primary-rgb),.03);
}

.customer-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--color-primary-light);
    color:var(--color-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:14px;
    flex-shrink:0;
}

body.dark-mode .customer-avatar{
    background:rgba(59,130,246,.18);
    color:#7cb8ff;
}

.table tbody tr{
    transition:
        background .18s ease,
        transform .18s ease;
}

.table-hover tbody tr:hover{
    background:#f8fafc;
}

.table tbody td{
    white-space:nowrap;
}

.table tbody td:nth-child(2){
    white-space:normal;
    min-width:220px;
}

.table .btn{
    width:36px;
    height:36px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.table .btn + .btn{
    margin-left:4px;
}

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

#customerForm{
    margin-top:24px;
}

#customerForm .card{
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    background:var(--card-bg);
    overflow:hidden;
    box-shadow:0 .35rem 1rem rgba(0,0,0,.05);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#customerForm .card:hover{
    transform:translateY(-3px);
    border-color:rgba(var(--bs-primary-rgb),.25);
    box-shadow:0 .85rem 2rem rgba(0,0,0,.08);
}

#customerForm .card-header{
    background:var(--card-bg);
    border-bottom:1px solid var(--border-color);
    padding:18px 24px;
}

#customerForm .card-header h5{
    margin:0;
    font-size:17px;
    font-weight:600;
}

#customerForm .card-body{
    padding:28px;
}

#customerForm .form-label{
    font-weight:600;
    margin-bottom:8px;
}

#customerForm .row.g-4{
    --bs-gutter-y:1.5rem;
}

#customerForm .form-control,
#customerForm textarea{
    border-radius:12px;
    min-height:50px;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    transition:all .2s ease;
}

#customerForm textarea{
    min-height:140px;
    resize:vertical;
    line-height:1.6;
}

#customerForm .form-control:focus,
#customerForm textarea:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 .18rem rgba(var(--bs-primary-rgb),.15);
}

#customerForm .input-group-text{
    border-radius:12px 0 0 12px;
    background:var(--card-bg);
    border-color:var(--border-color);
    font-weight:600;
}

#customerForm .input-group .form-control{
    border-radius:0 12px 12px 0;
}

#customerForm small{
    display:block;
    margin-top:6px;
}

#customerForm .btn{
    min-height:48px;
    border-radius:12px;
    font-weight:600;
    padding:0 24px;
}

body.dark-mode #customerForm .card-header{
    background:#243245;
    border-bottom-color:#36485d;
}

body.dark-mode #customerForm .input-group-text{
    background:#202b3c;
    color:#d7e0ea;
}

body.dark-mode #customerForm .form-control,
body.dark-mode #customerForm textarea{
    background:#1b2433;
    color:#e6edf5;
}

body.dark-mode #customerForm .form-control::placeholder,
body.dark-mode #customerForm textarea::placeholder{
    color:#8ea0b8;
}

body.dark-mode #customerForm .card{
    box-shadow:0 .45rem 1.25rem rgba(0,0,0,.35);
}

body.dark-mode #customerForm .card:hover{
    box-shadow:0 .8rem 2rem rgba(0,0,0,.45);
}

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

.badge{

    min-width:90px;

    padding:7px 12px;

    font-size:11px;

    font-weight:600;

}


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

.table tbody td .bi.display-5{

    opacity:.25;

}


/* =========================================================
   PAGINATION
========================================================= */

.pagination{

    margin-top:24px;

}

.page-link{

    min-width:42px;

    text-align:center;

}

/* =========================================================
CUSTOMER PROFILE
========================================================= */

.customer-profile-header{
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    background:var(--card-bg);
}

.customer-profile-avatar{
    width:72px;
    height:72px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--color-primary-light);
    color:var(--color-primary);
    font-size:26px;
    font-weight:700;
    flex-shrink:0;
}

.customer-profile-header h4{
    font-weight:700;
    margin-bottom:.35rem;
}

.customer-profile-header .btn{
    min-height:42px;
    border-radius:10px;
    font-weight:600;
}

.customer-kpi-card{
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    background:var(--card-bg);
    transition:all .2s ease;
}

.customer-kpi-card:hover{
    transform:translateY(-3px);
    box-shadow:0 .75rem 1.6rem rgba(0,0,0,.08);
}

.customer-kpi-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.customer-profile-card{
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:var(--card-bg);
}

.customer-profile-card .card-header{
    background:var(--card-bg);
    border-bottom:1px solid var(--border-color);
    padding:18px 24px;
}

.customer-profile-card .card-header h5{
    margin:0;
    font-size:17px;
    font-weight:600;
}

.customer-profile-card .card-body{
    padding:24px;
}

.customer-profile-card small{
    display:block;
    margin-bottom:4px;
    color:var(--bs-secondary-color);
}

.customer-profile-card .fw-semibold{
    word-break:break-word;
}

.customer-profile-card .table{
    margin-bottom:0;
}

.customer-profile-card .table thead th{
    background:#f8fafc;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.4px;
    font-weight:700;
    border-bottom:1px solid var(--border-color);
    white-space:nowrap;
}

.customer-profile-card .table tbody td{
    vertical-align:middle;
    padding:14px 16px;
}

.customer-profile-card .table tbody tr{
    transition:background .2s ease;
}

.customer-profile-card .table tbody tr:hover{
    background:rgba(var(--bs-primary-rgb),.03);
}

.customer-profile-card .btn-sm{
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

#uploadDocumentModal .modal-content{
    border:none;
    border-radius:16px;
    overflow:hidden;
}

#uploadDocumentModal .modal-header{
    border-bottom:1px solid var(--border-color);
    padding:18px 22px;
}

#uploadDocumentModal .modal-body{
    padding:24px;
}

#uploadDocumentModal .modal-footer{
    border-top:1px solid var(--border-color);
    padding:18px 22px;
}

#uploadDocumentModal .form-control,
#uploadDocumentModal .form-select{
    min-height:48px;
    border-radius:12px;
}

body.dark-mode .customer-profile-header,
body.dark-mode .customer-profile-card,
body.dark-mode .customer-kpi-card{
    background:var(--card-bg);
    border-color:#36485d;
}

body.dark-mode .customer-profile-card .card-header{
    background:#243245;
    border-bottom-color:#36485d;
}

body.dark-mode .customer-profile-avatar{
    background:rgba(59,130,246,.18);
    color:#8bc1ff;
}

body.dark-mode .customer-profile-card .table thead th{
    background:#243245;
}

body.dark-mode .customer-profile-card .table tbody tr:hover{
    background:rgba(255,255,255,.04);
}

body.dark-mode #uploadDocumentModal .modal-content{
    background:var(--card-bg);
}

body.dark-mode #uploadDocumentModal .modal-header,
body.dark-mode #uploadDocumentModal .modal-footer{
    border-color:#36485d;
}

@media (max-width:992px){

    .customer-profile-header .btn{
        width:100%;
    }

    .customer-profile-card .table{
        min-width:900px;
    }

}

@media (max-width:768px){

    .customer-profile-avatar{
        width:60px;
        height:60px;
        font-size:22px;
    }

    .customer-kpi-card .card-body{
        padding:18px;
    }

    .customer-profile-card .card-header,
    .customer-profile-card .card-body{
        padding:18px;
    }

}

/* =========================================================
PACKAGES MODULE
========================================================= */

.package-card{
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    background:var(--card-bg);
    box-shadow:0 .35rem 1rem rgba(0,0,0,.05);
}

.package-card .card-body{
    padding:24px;
}

.package-price{
    font-size:15px;
    font-weight:700;
    white-space:nowrap;
}

.package-speed{
    font-weight:600;
    color:var(--color-primary);
}

.package-name{
    font-weight:600;
}

.package-description{
    display:block;
    margin-top:4px;
    color:var(--bs-secondary-color);
    font-size:.875rem;
}

.package-status{
    min-width:90px;
}

.table-dark th{
    border:none;
    font-size:12px;
    font-weight:600;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.table tbody tr:hover{
    background:rgba(var(--bs-primary-rgb),.03);
}

.table td{
    vertical-align:middle;
}

body.dark-mode .package-card{
    border-color:#36485d;
    box-shadow:0 .45rem 1.25rem rgba(0,0,0,.35);
}

body.dark-mode .table-dark{
    --bs-table-bg:#243245;
}

body.dark-mode .table tbody tr:hover{
    background:rgba(255,255,255,.03);
}

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

#packageForm{
    margin-top:24px;
}

#packageForm .card{
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    background:var(--card-bg);
    overflow:hidden;
    box-shadow:0 .35rem 1rem rgba(0,0,0,.05);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

#packageForm .card:hover{
    transform:translateY(-3px);
    border-color:rgba(var(--bs-primary-rgb),.25);
    box-shadow:0 .8rem 2rem rgba(0,0,0,.08);
}

#packageForm .card-header{
    background:var(--card-bg);
    border-bottom:1px solid var(--border-color);
    padding:18px 24px;
}

#packageForm .card-header h5{
    margin:0;
    font-size:17px;
    font-weight:600;
}

#packageForm .card-body{
    padding:28px;
}

#packageForm .form-label{
    font-weight:600;
    margin-bottom:8px;
}

#packageForm .row.g-4{
    --bs-gutter-y:1.5rem;
}

#packageForm .form-control,
#packageForm .form-select{
    min-height:50px;
    border-radius:12px;
    border:1px solid var(--border-color);
    background:var(--card-bg);
    transition:all .2s ease;
}

#packageForm textarea.form-control{
    min-height:140px;
    resize:vertical;
    line-height:1.6;
}

#packageForm .form-control:focus,
#packageForm .form-select:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 .18rem rgba(var(--bs-primary-rgb),.15);
}

#packageForm .input-group-text{
    background:var(--card-bg);
    border-color:var(--border-color);
    font-weight:600;
}

#packageForm .form-check{
    margin-top:6px;
}

#packageForm .form-check-input{
    width:3rem;
    height:1.5rem;
}

#packageForm .form-check-label{
    margin-left:.5rem;
    font-weight:600;
}

#packageForm small{
    display:block;
    margin-top:6px;
}

#packageForm .btn{
    min-height:48px;
    border-radius:12px;
    font-weight:600;
    padding:0 24px;
}

body.dark-mode #packageForm .card{
    box-shadow:0 .45rem 1.25rem rgba(0,0,0,.35);
}

body.dark-mode #packageForm .card:hover{
    box-shadow:0 .8rem 2rem rgba(0,0,0,.45);
}

body.dark-mode #packageForm .card-header{
    background:#243245;
    border-bottom-color:#36485d;
}

body.dark-mode #packageForm .form-control,
body.dark-mode #packageForm .form-select,
body.dark-mode #packageForm textarea{
    background:#1b2433;
    color:#e6edf5;
}

body.dark-mode #packageForm .input-group-text{
    background:#202b3c;
    color:#d7e0ea;
}

body.dark-mode #packageForm .form-control::placeholder,
body.dark-mode #packageForm textarea::placeholder{
    color:#8ea0b8;
}

/* =========================================================
   PAYMENTS MODULE
========================================================= */

.payment-summary-card{
    border:1px solid var(--border-color);
    border-left:5px solid var(--color-primary);
    border-radius:var(--radius-lg);
    background:var(--card-bg,#fff);
    position:relative;
    overflow:hidden;
    transition:all .25s ease;
}

.payment-summary-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 32px rgba(0,0,0,.08);
}

body.dark-mode .payment-summary-card h3{
    color:#1f2937;
}

.payment-summary-card .card-body{
    padding:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    text-align:center;
}

.payment-summary-card .card-body > div:first-child{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.payment-summary-card h6{
    margin:0;
    font-size:.85rem;
    font-weight:600;
    color:var(--text-secondary);
    letter-spacing:.4px;
    text-transform:uppercase;
}

.payment-summary-card h3{
    margin-top:10px;
    margin-bottom:0;
    font-size:34px;
    font-weight:800;
    line-height:1;
    letter-spacing:-.5px;
    font-variant-numeric:tabular-nums;
}

.payment-summary-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    transition:all .25s ease;
}

.payment-summary-card:hover .payment-summary-icon{
    transform:translateY(-50%) scale(1.08);
}

.payment-summary-icon.icon-transactions{
    background:var(--color-primary-light);
    color:var(--color-primary);
}

.payment-summary-icon.icon-collected{
    background:#dcfce7;
    color:var(--success);
}

.payment-summary-card:nth-child(2){
    border-left-color:var(--success);
}

body.dark-mode .payment-summary-icon.icon-collected{
    background:rgba(22,163,74,.15);
}

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

.card-header .form-control,
.card-header .form-select{
    height:46px;
    border-radius:12px;
}

.card-header .btn{
    height:46px;
    border-radius:12px;
    font-weight:600;
}

.card-header{
    padding:1.25rem;
}

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

.table{
    margin-bottom:0;
}

.table thead th{
    white-space:nowrap;
    vertical-align:middle;
    font-size:.84rem;
    letter-spacing:.35px;
}

.table tbody td{
    padding:.95rem .85rem;
    vertical-align:middle;
}

.table-hover tbody tr{
    transition:background .18s ease;
}

.table-hover tbody tr:hover{
    background:rgba(13,110,253,.045);
}

.table td.text-end strong{
    font-size:1rem;
    font-weight:700;
    color:var(--success);
    font-variant-numeric:tabular-nums;
}

.customer-number{
    font-weight:700;
    letter-spacing:.4px;
}

/* =========================================================
   PAYMENT METHOD BADGES
========================================================= */

.badge.method-mpesa,
.badge.method-bank,
.badge.method-cash,
.badge.method-other{
    padding:.55rem .9rem;
    font-size:.78rem;
    font-weight:600;
    border-radius:999px;
}

.badge.method-mpesa{
    background:var(--success);
    color:#fff;
}

.badge.method-bank{
    background:var(--info);
    color:#fff;
}

.badge.method-cash{
    background:var(--text-secondary);
    color:#fff;
}

.badge.method-other{
    background:var(--text-primary);
    color:#fff;
}

/* =========================================================
   PAYMENT ACTION BUTTONS
========================================================= */

.table .btn-sm{
    width:36px;
    height:36px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    transition:all .2s ease;
}

.table .btn-sm:hover{
    transform:translateY(-2px);
}

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

.table tbody td[colspan]{
    padding:4rem 1rem;
}

.table tbody td[colspan] i{
    font-size:3.25rem;
    opacity:.35;
}

/* =========================================================
   PAGINATION
========================================================= */

.pagination .page-link{
    border-radius:10px;
    margin:0 3px;
    min-width:40px;
    text-align:center;
    font-weight:600;
}

.pagination .page-item.active .page-link{
    box-shadow:0 4px 12px rgba(13,110,253,.25);
}

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

@media (max-width:992px){

    #content{
        margin-left:0;
        width:100%;
    }

    #sidebar{
        width:270px;
        max-width:85vw;
        transform:translateX(-100%);
        visibility:hidden;
        pointer-events:none;
        box-shadow:0 18px 45px rgba(0,0,0,.25);
    }

    #sidebar.show{
        transform:translateX(0);
        visibility:visible;
        pointer-events:auto;
    }

    #sidebarToggle{
        position:fixed;
        top:calc(var(--header-height) + 12px);
        left:14px;
        z-index:1200;
    }

    #sidebarBackdrop{
        position:fixed;
        inset:0;
        background:rgba(15,23,42,.45);
        z-index:1040;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:
            opacity .25s ease,
            visibility .25s ease;
    }

    #sidebarBackdrop.show{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    body.sidebar-open{
        overflow:hidden;
    }

    .top-navbar{
        left:0;
        right:0;
        padding:0 18px;
    }

    .container-fluid{
        padding-left:18px;
        padding-right:18px;
    }

}

@media (max-width:768px){

    .top-navbar{
        padding-left:12px;
        padding-right:12px;
    }

    .company-logo{
        width:40px;
        height:40px;
        border-radius:10px;
    }

    .navbar-title{
        font-size:15px;
    }

    .navbar-datetime{
        display:none;
    }

    .navbar-subtitle{
        display:none;
    }

    .user-details{
        display:none;
    }

    .user-menu{
        padding:4px;
        gap:0;
    }

    .user-avatar{
        width:36px;
        height:36px;
    }

    main.container-fluid{
        padding-top:20px;
        padding-left:12px;
        padding-right:12px;
        padding-bottom:30px;
    }

    .dashboard-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .dashboard-actions{
        width:100%;
    }

    .dashboard-actions .btn{
        width:100%;
    }

    .card-body{
        padding:16px;
    }

    .card-header{
        padding:14px 16px;
    }

    .flash-container{
        width:calc(100% - 24px);
        left:12px;
        right:12px;
    }

    .table-responsive{
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .table{
        font-size:13px;
        min-width:600px;
    }

    .table thead th,
    .table tbody td{
        padding:10px;
        white-space:nowrap;
    }

}

/* =========================================================
   SMS MODULE
========================================================= */

/* Summary Cards */

.sms-summary-card{
    border:1px solid var(--border-color);
    border-left:5px solid var(--color-primary);
    border-radius:var(--radius-lg);
    background:var(--color-surface);
    transition:all .25s ease;
}

.sms-summary-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.sms-summary-card .card-body{
    padding:24px;
    position:relative;
}

.sms-summary-card h6{
    font-size:.82rem;
    font-weight:600;
    color:var(--text-secondary);
    text-transform:uppercase;
    margin-bottom:10px;
}

.sms-summary-card h3{
    font-size:32px;
    font-weight:700;
    margin:0;
}

.sms-summary-icon{
    position:absolute;
    right:22px;
    top:50%;
    transform:translateY(-50%);
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.sms-summary-card:nth-child(1){
    border-left-color:var(--info);
}

.sms-summary-card:nth-child(1) .sms-summary-icon{
    background:#dbeafe;
    color:var(--info);
}

.sms-summary-card:nth-child(2){
    border-left-color:var(--success);
}

.sms-summary-card:nth-child(2) .sms-summary-icon{
    background:#dcfce7;
    color:var(--success);
}

.sms-summary-card:nth-child(3){
    border-left-color:var(--danger);
}

.sms-summary-card:nth-child(3) .sms-summary-icon{
    background:#fee2e2;
    color:var(--danger);
}

.sms-summary-card:nth-child(4){
    border-left-color:#8b5cf6;
}

.sms-summary-card:nth-child(4) .sms-summary-icon{
    background:#ede9fe;
    color:#8b5cf6;
}

/* Filter Card */

.sms-filter-card{
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
}

.sms-filter-card .card-body{
    padding:20px;
}

.sms-filter-card .form-control,
.sms-filter-card .form-select{
    height:46px;
}

.sms-filter-card .btn{
    height:46px;
}

/* Send SMS Form */

.sms-form-card{
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
}

.sms-form-card .card-body{
    padding:30px;
}

.sms-form-card textarea{
    min-height:170px;
    resize:vertical;
    line-height:1.7;
}

.sms-form-card .btn{
    min-width:130px;
}

/* Character Counter */

#character-count{
    font-weight:600;
    transition:.2s;
}

#character-count.text-danger{
    color:var(--danger)!important;
}

/* SMS Table */

.sms-table .table{
    margin-bottom:0;
}

.sms-table th{
    white-space:nowrap;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.45px;
}

.sms-table td{
    vertical-align:middle;
}

.sms-table tbody tr{
    transition:all .18s ease;
}

.sms-table tbody tr:hover{
    background:#f8fafc;
}

/* Customer Avatar */

.sms-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--color-primary-light);
    color:var(--color-primary);
    font-weight:700;
    flex-shrink:0;
}

/* Message */

.sms-message{
    white-space:normal;
    line-height:1.6;
    max-width:360px;
}

/* Cost */

.sms-cost{
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

/* Status */

.sms-status-success{
    background:#16a34a;
    color:#fff;
}

.sms-status-failed{
    background:#dc2626;
    color:#fff;
}

.sms-status-pending{
    background:#d97706;
    color:#fff;
}

/* Empty State */

.sms-empty{
    padding:70px 20px;
    text-align:center;
}

.sms-empty i{
    font-size:58px;
    opacity:.25;
}

.sms-empty h5{
    margin-top:18px;
    font-weight:700;
}

.sms-empty p{
    margin-top:8px;
}

/* Pagination */

.sms-pagination{
    margin-top:24px;
}

/* Dark Mode */

body.dark-mode .sms-summary-card,
body.dark-mode .sms-filter-card,
body.dark-mode .sms-form-card{
    background:var(--color-surface);
    border-color:var(--border-color);
}

body.dark-mode .sms-table tbody tr:hover{
    background:rgba(255,255,255,.04);
}

body.dark-mode .sms-avatar{
    background:rgba(59,130,246,.18);
    color:#7cb8ff;
}

body.dark-mode .sms-summary-card:nth-child(1) .sms-summary-icon{
    background:rgba(37,99,235,.15);
}

body.dark-mode .sms-summary-card:nth-child(2) .sms-summary-icon{
    background:rgba(22,163,74,.15);
}

body.dark-mode .sms-summary-card:nth-child(3) .sms-summary-icon{
    background:rgba(220,38,38,.15);
}

body.dark-mode .sms-summary-card:nth-child(4) .sms-summary-icon{
    background:rgba(139,92,246,.15);
}

/* Responsive */

@media (max-width:992px){

    .sms-summary-card{
        margin-bottom:16px;
    }

    .sms-form-card .card-body{
        padding:22px;
    }

}

@media (max-width:768px){

    .sms-message{
        max-width:220px;
    }

    .sms-table{
        min-width:900px;
    }

}

/* =========================================================
   SUBSCRIPTIONS MODULE
========================================================= */

.subscription-search-card{
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
}

.subscription-search-card .card-body{
    padding:22px;
}

.subscription-search-card .form-control,
.subscription-search-card .input-group-text{
    height:46px;
}

.subscription-search-card .btn{
    height:46px;
}

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

.subscription-table{
    margin-bottom:0;
}

.subscription-table thead th{
    background:#f8fafc;
    border-bottom:1px solid var(--border-color);
    font-size:13px;
    font-weight:700;
    letter-spacing:.3px;
    padding:16px 18px;
    white-space:nowrap;
    vertical-align:middle;
}

.subscription-table tbody td{
    padding:16px 18px;
    vertical-align:middle;
}

.subscription-table tbody tr{
    transition:all .18s ease;
}

.subscription-table tbody tr:hover{
    background:#f8fafc;
}

.subscription-table td:first-child{
    font-weight:700;
    white-space:nowrap;
}

.subscription-table td:nth-child(2){
    min-width:240px;
}

.subscription-table td:nth-child(3){
    min-width:180px;
}

/* =========================================================
CUSTOMER LINK
========================================================= */

.subscription-table td a{
    font-weight:600;
    color:var(--text-primary);
}

.subscription-table td a:hover{
    color:var(--color-primary);
}

/* =========================================================
PACKAGE NAME
========================================================= */

.subscription-table .fw-semibold{
    font-weight:600 !important;
}

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

.subscription-table .badge{
    min-width:100px;
    font-size:11px;
    font-weight:600;
}

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

.subscription-table .btn-group{
    gap:6px;
}

.subscription-table .btn-sm{
    width:36px;
    height:36px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
}

.subscription-table .btn-sm:hover{
    transform:translateY(-2px);
}

/* =========================================================
PAGINATION
========================================================= */

.subscription-pagination{
    padding:18px 24px;
    border-top:1px solid var(--border-color);
}

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

.subscription-empty{
    padding:70px 20px;
}

.subscription-empty i{
    font-size:54px;
    opacity:.25;
}

.subscription-empty p{
    margin-top:14px;
}

/* =========================================================
DARK MODE
========================================================= */

body.dark-mode .subscription-table thead th{
    background:#243245;
}

body.dark-mode .subscription-table tbody tr:hover{
    background:rgba(255,255,255,.04);
}

/* =========================================================
   LEEMAN ISP — MOBILE RESPONSIVE SIDEBAR / LAYOUT FIX
   Added without changing existing desktop/module styles.
========================================================= */
@media (max-width: 992px){
    #sidebar{
        width:270px;
        transform:translateX(-100%);
        box-shadow:0 18px 45px rgba(0,0,0,.28);
        transition:transform .25s ease;
    }

    #sidebar.show{
        transform:translateX(0);
    }

    #content{
        width:100%;
        margin-left:0;
    }

    .sidebar-backdrop{
        position:fixed;
        inset:0;
        background:rgba(15,23,42,.45);
        z-index:1040;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .25s ease, visibility .25s ease;
    }

    .sidebar-backdrop.show{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    body.sidebar-open{
        overflow:hidden;
    }
}

@media (max-width: 768px){
    .top-navbar{
        padding:0 12px;
    }

    .top-navbar .container-fluid{
        min-width:0;
        display:flex;
        align-items:center;
        width:100%;
    }

    .sidebar-toggle{
        width:40px;
        height:40px;
        flex-shrink:0;
        position:static;
    }

    #sidebarToggle{
        position:static;
        top:auto;
        left:auto;
        margin:0;
        z-index:auto;
    }

    .navbar-title{
        min-width:0;
        max-width:45vw;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .user-menu{
        min-width:40px;
        margin-left:auto;
        flex-shrink:0;
        position:relative;
    }

    main.container-fluid{
        padding-top:20px;
        padding-bottom:28px;
    }

    .container-fluid{
        padding-left:16px;
        padding-right:16px;
    }

    .card-body{
        padding:16px;
    }

    .card-header{
        padding:14px 16px;
        gap:10px;
        flex-wrap:wrap;
    }

    .dashboard-header{
        gap:14px;
        margin-bottom:20px;
    }

    .dashboard-header h2{
        font-size:23px;
    }

    .dashboard-actions{
        width:100%;
    }

    .dashboard-actions .btn{
        flex:1 1 auto;
    }

    .table-responsive{
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .table-responsive .table{
        margin-bottom:0;
    }

    .table{
        min-width:650px;
    }

    .modal-dialog{
        margin:10px;
    }

    .modal-content{
        max-height:calc(100vh - 20px);
        overflow-y:auto;
    }
}

@media (max-width: 576px){
    .top-navbar{
        height:64px;
    }

    body{
        padding-top:64px;
    }

    :root{
        --header-height:64px;
    }

    .company-logo{
        width:38px;
        height:38px;
    }

    .navbar-title{
        font-size:14px;
        max-width:40vw;
    }

    .user-menu{
        padding:2px;
        border:none;
        background:transparent;
    }

    .user-menu:hover{
        background:transparent;
        border-color:transparent;
    }

    .user-avatar{
        width:36px;
        height:36px;
    }

    main.container-fluid{
        padding-top:16px;
    }

    .container-fluid{
        padding-left:12px;
        padding-right:12px;
    }

    .btn{
        min-height:42px;
    }

    .form-control,
    .form-select{
        min-height:42px;
    }

    .dashboard-card h2{
        font-size:28px;
    }

    .pagination{
        flex-wrap:wrap;
        gap:4px;
    }

    .pagination .page-link{
        min-width:36px;
    }
}

@media (min-width: 993px){
    .sidebar-backdrop{
        display:none !important;
    }
}

/* =========================================================
   THEME COMPATIBILITY
   Keeps Bootstrap utility classes readable in both themes.
   ========================================================= */

/* ---------- LIGHT MODE ---------- */

html:not([data-bs-theme="dark"]) body{
    color:var(--text-primary);
    background:var(--color-background);
}

html:not([data-bs-theme="dark"]) .card,
html:not([data-bs-theme="dark"]) .card-header,
html:not([data-bs-theme="dark"]) .card-footer,
html:not([data-bs-theme="dark"]) .modal-content,
html:not([data-bs-theme="dark"]) .dropdown-menu{
    background-color:var(--color-surface);
    color:var(--text-primary);
    border-color:var(--border-color);
}

html:not([data-bs-theme="dark"]) .bg-white{
    background-color:var(--color-surface) !important;
    color:var(--text-primary);
}

html:not([data-bs-theme="dark"]) .text-muted{
    color:var(--text-muted) !important;
}

html:not([data-bs-theme="dark"]) .table{
    color:var(--text-primary);
}

html:not([data-bs-theme="dark"]) .table td,
html:not([data-bs-theme="dark"]) .table th{
    border-color:var(--border-color);
}

html:not([data-bs-theme="dark"]) .form-control,
html:not([data-bs-theme="dark"]) .form-select,
html:not([data-bs-theme="dark"]) textarea{
    background-color:var(--color-surface);
    color:var(--text-primary);
    border-color:var(--border-color);
}

html:not([data-bs-theme="dark"]) .form-control::placeholder,
html:not([data-bs-theme="dark"]) textarea::placeholder{
    color:var(--text-muted);
}


/* ---------- DARK MODE ---------- */

html[data-bs-theme="dark"] body{
    background:var(--color-background);
    color:var(--text-primary);
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu{
    background-color:var(--color-surface);
    color:var(--text-primary);
    border-color:var(--border-color);
}

html[data-bs-theme="dark"] .bg-white{
    background-color:var(--color-surface) !important;
    color:var(--text-primary) !important;
}

html[data-bs-theme="dark"] .text-dark{
    color:var(--text-primary) !important;
}

html[data-bs-theme="dark"] .text-muted{
    color:var(--text-secondary) !important;
}

html[data-bs-theme="dark"] .table{
    --bs-table-color:var(--text-primary);
    --bs-table-bg:var(--color-surface);
    --bs-table-border-color:var(--border-color);
    color:var(--text-primary);
}

html[data-bs-theme="dark"] .table td,
html[data-bs-theme="dark"] .table th{
    color:var(--text-primary);
    border-color:var(--border-color);
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] textarea{
    background-color:var(--color-surface);
    color:var(--text-primary);
    border-color:var(--border-color);
}

html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="dark"] textarea::placeholder{
    color:var(--text-secondary);
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] textarea:focus{
    background-color:var(--color-surface);
    color:var(--text-primary);
    border-color:var(--color-primary);
}

html[data-bs-theme="dark"] .btn-light{
    background-color:var(--color-surface-elevated);
    color:var(--text-primary);
    border-color:var(--border-color);
}

html[data-bs-theme="dark"] .btn-light:hover{
    background-color:var(--color-surface);
    color:var(--text-primary);
    border-color:var(--border-color);
}

html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-end,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-start{
    border-color:var(--border-color) !important;
}









/* =========================================================
MOBILE USER MENU — TOP RIGHT
========================================================= */
@media (max-width: 768px){

    .top-navbar .dropdown{
        position:static;
    }

    .top-navbar .user-menu{
        position:relative;
        z-index:1300;
    }

    .top-navbar .dropdown-menu{
        position:fixed !important;
        top:calc(var(--header-height) + 8px) !important;
        right:12px !important;
        left:auto !important;
        margin:0 !important;
        z-index:1400 !important;
        min-width:220px;
    }

}

/* =========================================================
MOBILE NAVBAR — FORCE USER MENU TO TOP RIGHT
========================================================= */
@media (max-width: 768px){

    .top-navbar > .container-fluid{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        width:100% !important;
    }

    .top-navbar > .container-fluid > .d-flex.align-items-center:last-child{
        margin-left:auto !important;
        flex-shrink:0 !important;
        position:relative !important;
        display:flex !important;
        align-items:center !important;
    }

    .top-navbar .user-menu{
        margin-left:0 !important;
        position:relative !important;
        z-index:1300 !important;
    }

    .top-navbar .navbar-datetime{
        display:none !important;
    }

    .top-navbar .dropdown{
        position:relative !important;
    }

    .top-navbar .dropdown-menu{
        position:fixed !important;
        top:calc(var(--header-height) + 8px) !important;
        right:12px !important;
        left:auto !important;
        margin:0 !important;
        z-index:1400 !important;
    }

}

@media (max-width: 576px){

    .top-navbar > .container-fluid{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .top-navbar > .container-fluid > .d-flex.align-items-center:last-child{
        margin-left:auto !important;
    }

}

/* =========================================================
MOBILE SIDEBAR TOGGLE — CLICK PRIORITY
========================================================= */
@media (max-width: 768px){

    #sidebarToggle{
        position:relative;
        z-index:1500 !important;
        pointer-events:auto !important;
    }

    .top-navbar{
        z-index:1400 !important;
    }

    #sidebar{
        z-index:1450 !important;
    }

    .top-navbar .user-menu{
        z-index:1500 !important;
        pointer-events:auto !important;
    }

}

/* =========================================================
MOBILE SIDEBAR FOOTER — ALWAYS VISIBLE
========================================================= */
@media (max-width: 768px){

    #sidebar{
        display:flex;
        flex-direction:column;
    }

    #sidebar .sidebar-footer{
        display:block !important;
        margin-top:auto !important;
        flex-shrink:0;
        width:100%;
    }

}

/* =========================================================
MOBILE SIDEBAR — FOOTER POSITIONING
========================================================= */
@media (max-width: 768px){

    #sidebar{
        height:100vh !important;
        max-height:100vh !important;
        display:flex !important;
        flex-direction:column !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
    }

    #sidebar .sidebar-footer{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        margin-top:auto !important;
        flex-shrink:0 !important;
        width:100% !important;
    }

}

/* =========================================================
   MOBILE SIDEBAR — FOOTER ALWAYS VISIBLE
========================================================= */
@media (max-width: 768px){

    #sidebar{
        height:100dvh !important;
        max-height:100dvh !important;
        overflow-y:auto !important;
        display:flex !important;
        flex-direction:column !important;
    }

    #sidebar .sidebar-footer{
        position:sticky !important;
        bottom:0 !important;
        z-index:10 !important;
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        width:100% !important;
        flex-shrink:0 !important;
        margin-top:auto !important;
        background:linear-gradient(180deg,#0f172a 0%,#172554 100%) !important;
    }

}

/* =========================================================
   MOBILE SIDEBAR — FOOTER NORMAL FLOW
========================================================= */
@media (max-width: 768px){

    #sidebar .sidebar-footer{
        position:static !important;
        bottom:auto !important;
        z-index:auto !important;
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        width:100% !important;
        flex-shrink:0 !important;
        margin-top:auto !important;
    }

}

/* =========================================================
   MOBILE SIDEBAR — FINAL FOOTER POSITION
========================================================= */
@media (max-width: 768px){

    #sidebar{
        position:fixed !important;
        height:100dvh !important;
        max-height:100dvh !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        padding-bottom:58px !important;
    }

    #sidebar .sidebar-footer{
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;

        width:100% !important;
        height:58px !important;

        margin:0 !important;
        padding:8px 12px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        flex-shrink:0 !important;
        z-index:20 !important;

        background:linear-gradient(
            180deg,
            #0f172a 0%,
            #172554 100%
        ) !important;

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

    #sidebar .sidebar-footer .fw-semibold{
        font-size:12px !important;
        line-height:16px !important;
    }

    #sidebar .sidebar-footer small{
        font-size:9px !important;
        line-height:12px !important;
    }

}

/* =========================================================
   MOBILE SIDEBAR — CLEAN FOOTER LAYOUT
========================================================= */
@media (max-width:768px){

    #sidebar{
        display:flex !important;
        flex-direction:column !important;
        height:100dvh !important;
        max-height:100dvh !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
    }

    #sidebar .sidebar-footer{
        position:static !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        width:100% !important;
        height:auto !important;

        margin-top:auto !important;
        padding:10px 12px !important;

        display:block !important;
        flex-shrink:0 !important;

        z-index:auto !important;

        background:transparent !important;
    }

    #sidebar .sidebar-footer .fw-semibold{
        font-size:11px !important;
        line-height:15px !important;
    }

    #sidebar .sidebar-footer small{
        font-size:9px !important;
        line-height:12px !important;
    }

}