/*
 * ============================================================
 *  A1 CRM — Global Unified Design System
 *  File  : ASPXStyles/css/crm-global.css
 *  Scope : AdminMasterPage.master + CompanyMasterPage.master
 *          + PublicMaster.master  (injected via all 3 masters)
 *
 *  TABLE OF CONTENTS
 *  ---------------------------------------------------------
 *  1.  CSS Variables (Design Tokens)
 *  2.  Font Import
 *  3.  Master Page — Navigation & Header
 *  4.  Master Page — Banner
 *  5.  Master Page — Footer
 *  6.  Body / Page Background
 *  7.  Content Area Wrapper
 *  8.  Page Section Header Bar (replaces red banner divs)
 *  9.  Form Layout — Labels
 *  10. Form Layout — Inputs, Selects, Textareas
 *  11. Buttons — Primary & Secondary
 *  12. Bootstrap GridView / Tables (Admingridtable override)
 *  13. Dashboard Stat Cards
 *  14. Search / Filter Bar
 *  15. Login Card
 *  16. Welcome / Home Screen
 *  17. Notification Badge
 *  18. Info Box (confirmation card)
 *  19. Mobile Card List (.card-item)
 *  20. Utilities & Helpers
 *  21. Responsive (≤ 768 px)
 * ============================================================
 */


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
    /* Brand — deep indigo primary (same as Campaign page) */
    --g-primary:        #4F46E5;
    --g-primary-dark:   #4338CA;
    --g-primary-light:  #EEF2FF;
    --g-primary-glow:   rgba(79,70,229,.12);

    /* Neutrals */
    --g-bg:             #F1F5F9;
    --g-surface:        #FFFFFF;
    --g-border:         #E2E8F0;

    /* Text */
    --g-text-heading:   #0F172A;
    --g-text-body:      #334155;
    --g-text-muted:     #94A3B8;
    --g-text-label:     #475569;

    /* Status */
    --g-success:        #10B981;
    --g-warning:        #F59E0B;
    --g-danger:         #EF4444;
    --g-info:           #3B82F6;

    /* Elevation */
    --g-shadow-sm:  0 1px 3px rgba(15,23,42,.07);
    --g-shadow-md:  0 4px 16px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.06);
    --g-shadow-lg:  0 10px 32px rgba(15,23,42,.12);

    /* Shape */
    --g-radius-sm:  6px;
    --g-radius-md:  10px;
    --g-radius-lg:  16px;

    /* Nav */
    --g-nav-bg:     #1E1B4B;
    --g-nav-height: 58px;

    --g-transition: 0.18s ease;
}


/* ============================================================
   2. FONT IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');


/* ============================================================
   3. MASTER PAGE — NAVIGATION & HEADER
   ============================================================ */

/* Override the existing main-navigation with premium dark bar */
/*.main-navigation {
    background: linear-gradient(135deg, var(--g-nav-bg) 0%, #3730A3 100%) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    min-height: var(--g-nav-height) !important;
}*/
.main-navigation {

    /* Background image + dark teal overlay */
background:
linear-gradient(
    135deg,
    rgba(0,0,0,.80),
    rgba(4,169,119,.45)
),
url('https://images.unsplash.com/photo-1557683316-973673baf926')
center/cover no-repeat;

    min-height: 60px !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-bottom: 1px solid rgba(4,169,119,.35);

    box-shadow:
        0 4px 25px rgba(0,0,0,.40),
        0 0 20px rgba(4,169,119,.15);

    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

.main-navigation .container {
    display: flex !important;
    align-items: center !important;
    min-height: var(--g-nav-height) !important;
    padding: 0 20px !important;
}

/* Nav links */
/* Menu Links */
.main-navigation ul.dd-menu li a,
.main-navigation nav ul li a {

    color: rgba(255,255,255,.92) !important;

    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;

    transition: all .3s ease !important;

    border-radius: 6px;
}

/* Hover Effect */
.main-navigation ul.dd-menu li a:hover,
.main-navigation nav ul li a:hover {

    background: rgba(4,169,119,.20) !important;

    color: #5eead4 !important;

    box-shadow:
        inset 0 0 0 1px rgba(4,169,119,.30),
        0 0 15px rgba(4,169,119,.20);

    transform: translateY(-1px);
}

/* Active Menu */
.main-navigation ul.dd-menu li.active a,
.main-navigation ul.dd-menu li.current a {

    background: rgba(4,169,119,.22) !important;

    color: #5eead4 !important;

    border: 1px solid rgba(4,169,119,.30);
}

/* Logout link button */
.main-navigation ul li a[href*="Logout"],
.main-navigation ul li span[id*="lnkLogout"] a {
    background: rgba(239,68,68,.15) !important;
    color: #FCA5A5 !important;
    border: 1px solid rgba(239,68,68,.25) !important;
}
.main-navigation ul li a[href*="Logout"]:hover {
    background: rgba(239,68,68,.30) !important;
    color: #fff !important;
}

/* Mobile menu toggle */
#menu-toggle,
button[id="menu-toggle"] {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: var(--g-radius-sm) !important;
    padding: 7px 14px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin: 8px 0 !important;
}


/* ============================================================
   4. MASTER PAGE — BANNER
   ============================================================ */
/* Constrain and polish the top banner image */
#site-header img,
body > form > div > div > img[src*="Banner"] {
    width: 100% !important;
    max-height: 90px !important;
    object-fit: cover !important;
    display: block !important;
}


/* ============================================================
   5. MASTER PAGE — FOOTER
   ============================================================ */
footer.footer-28,
.footer-28 {
    /*background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%) !important;*/
    background:
linear-gradient(
    135deg,
    rgba(0,0,0,.80),
    rgba(4,169,119,.45)
),
url('https://images.unsplash.com/photo-1557683316-973673baf926')
center/cover no-repeat;
    margin-top: 40px !important;
}

.footer-28 p,
.footer-28 a {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.78rem !important;
}

/* Move-to-top button */
#movetop {
    background: var(--g-primary) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    box-shadow: var(--g-shadow-md) !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    text-decoration: none !important;
}


/* ============================================================
   6. BODY / PAGE BACKGROUND
   ============================================================ */
body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif !important;
    background-color: var(--g-bg) !important;
    background-image: radial-gradient(circle, #CBD5E1 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    color: var(--g-text-body) !important;
}


/* ============================================================
   7. CONTENT AREA WRAPPER
   ============================================================ */
/* Wrap the ContentPlaceHolder area in a padded container feel */
.container {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.feature-block {
    background: var(--g-surface) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: var(--g-shadow-md) !important;
    border: 1px solid rgba(226,232,240,.6) !important;
    padding: 28px 28px 20px !important;
    margin: 24px 0 !important;
    position: relative !important;
}

.feature-block::before {
    content: '' !important;
    position: absolute !important;
    top: 18px !important; bottom: 18px !important;
    left: 0 !important;
    width: 4px !important;
    background: linear-gradient(180deg, var(--g-primary) 0%, #818CF8 100%) !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Panel body inside feature-block */
.panel-body {
    padding: 8px 0 0 !important;
}


/* ============================================================
   8. PAGE SECTION HEADER BAR
   ============================================================ */
/* Replaces the old inline-styled dark red header divs */
.col-md-12.col-sm-12[style*="background-color: #9b1e1a"],
.col-md-12.col-sm-12[style*="background-color: #901911"],
.col-md-12.col-sm-12[style*="background-color: #730000"],
div[style*="background-color: #9b1e1a"],
div[style*="background-color: #901911"],
div[style*="background-color: #730000"] {
    /*background: linear-gradient(135deg, var(--g-primary) 0%, var(--g-primary-dark) 100%) !important;*/
    background: linear-gradient(135deg, #089088 0%, #02997e 100%) !important;
    border-radius: var(--g-radius-sm) !important;
    padding: 12px 18px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    box-shadow: 0 2px 8px var(--g-primary-glow) !important;
    margin-bottom: 8px !important;
}

/* Section sub-header text (Search By etc.) */
h4.box-title,
.box-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: var(--g-text-heading) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}


/* ============================================================
   9. FORM LAYOUT — LABELS
   ============================================================ */
.LabelStyles,
label,
.LabelStyle {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--g-text-label) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.LabelStyleRequired,
.LabelStyleValidation {
    font-size: 0.75rem !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}


/* ============================================================
   10. FORM LAYOUT — INPUTS, SELECTS, TEXTAREAS
   ============================================================ */
.form-control,
input[type="text"].form-control,
input[type="number"].form-control,
input[type="password"].form-control,
textarea.form-control,
select.form-control,
.TextBox,
.TextboxStyle {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: var(--g-text-heading) !important;
    background: #FAFBFE !important;
    border: 1.5px solid var(--g-border) !important;
    border-radius: var(--g-radius-sm) !important;
    padding: 9px 13px !important;
    box-shadow: none !important;
    transition: border-color var(--g-transition), box-shadow var(--g-transition) !important;
    outline: none !important;
}

.form-control:focus,
input[type="text"].form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--g-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px var(--g-primary-glow) !important;
}


/* ============================================================
   11. BUTTONS — PRIMARY & SECONDARY
   ============================================================ */
.btn.btn-primary,
a.btn.btn-primary,
input.btn.btn-primary,
button.btn.btn-primary {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    /*background: linear-gradient(135deg, var(--g-primary) 0%, var(--g-primary-dark) 100%) !important;*/
  background: linear-gradient(135deg, #089088 0%, #02997e 100%) !important;

    border: none !important;
    border-radius: var(--g-radius-sm) !important;
    padding: 9px 20px !important;
    color: #fff !important;
    letter-spacing: .01em !important;
    box-shadow: 0 2px 6px var(--g-primary-glow) !important;
    transition: filter var(--g-transition), transform var(--g-transition), box-shadow var(--g-transition) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.btn.btn-primary:hover,
a.btn.btn-primary:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 4px 14px rgba(79,70,229,.35) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

.btn.btn-primary:active {
    transform: scale(.98) translateY(0) !important;
}

/* Success / danger small buttons (used in CustomerManagement amount update) */
.btn.btn-success {
    background: linear-gradient(135deg, var(--g-success) 0%, #059669 100%) !important;
    border: none !important;
    border-radius: var(--g-radius-sm) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.btn.btn-danger {
    background: linear-gradient(135deg, var(--g-danger) 0%, #DC2626 100%) !important;
    border: none !important;
    border-radius: var(--g-radius-sm) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    color: #fff !important;
}


/* ============================================================
   12. GRIDVIEW / TABLES (Admingridtable override)
   ============================================================ */
table.Admingridtable {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.82rem !important;
    border-collapse: collapse !important;
    width: 100% !important;
    background: var(--g-surface) !important;
    border-radius: var(--g-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--g-shadow-sm) !important;
    border: 1px solid var(--g-border) !important;
}

table.Admingridtable th {
    /*background: linear-gradient(135deg, var(--g-primary) 0%, var(--g-primary-dark) 100%) !important;*/
    background: linear-gradient(135deg, #089088 0%, #02997e 100%) !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: 12px 14px !important;
    border: none !important;
    text-align: left !important;
    white-space: nowrap !important;
}

table.Admingridtable td {
    color: var(--g-text-body) !important;
    background: var(--g-surface) !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid var(--g-border) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    font-size: 0.83rem !important;
    vertical-align: middle !important;
}

table.Admingridtable tr:nth-child(even) td {
    background: #F8FAFC !important;
}

table.Admingridtable tr:hover td {
    background: var(--g-primary-light) !important;
    transition: background var(--g-transition) !important;
}

/* Icon action links inside grid */
table.Admingridtable .fa-edit   { color: var(--g-primary) !important; }
table.Admingridtable .fa-trash  { color: var(--g-danger) !important; }footer-28
table.Admingridtable .fa-paper-plane,
table.Admingridtable .fa-envelope { color: var(--g-success) !important; }

/* Bootstrap table fallback */
.table.table-bordered th {
    /*background: linear-gradient(135deg, var(--g-primary) 0%, var(--g-primary-dark) 100%) !important;*/
    background: linear-gradient(135deg, #089088 0%, #02997e 100%) !important;
    color: #fff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border: none !important;
}

.table.table-bordered td {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.83rem !important;
    vertical-align: middle !important;
}


/* ============================================================
   13. DASHBOARD STAT CARDS
   ============================================================ */
/* Used in Home.aspx and CustomerHome.aspx */
.company-card,
div[style*="border-radius:12px"][style*="background:#fff"],
div[style*="border-radius: 12px"][style*="background: #fff"] {
    background: var(--g-surface) !important;
    border-radius: var(--g-radius-md) !important;
    box-shadow: var(--g-shadow-md) !important;
    border: 1px solid var(--g-border) !important;
    transition: box-shadow var(--g-transition), transform var(--g-transition) !important;
    padding: 28px 24px !important;
}

.company-card:hover,
div[style*="border-radius:12px"][style*="background:#fff"]:hover {
    box-shadow: var(--g-shadow-lg) !important;
    transform: translateY(-2px) !important;
}

.company-title { color: var(--g-text-heading) !important; font-weight: 700 !important; }
.company-count { color: var(--g-primary) !important; }

/* Stat number label override */
h1 > span[id*="lbl"] {
    color: var(--g-primary) !important;
    font-weight: 800 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}


/* ============================================================
   14. SEARCH / FILTER BAR
   ============================================================ */
/* The search "by" label */
.box-header,
.box-header.with-border {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Record count labels */
span[id*="lblCount"],
span[id*="lblRecordCount"] {
    background: var(--g-primary-light) !important;
    color: var(--g-primary) !important;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    display: inline-block !important;
}


/* ============================================================
   15. LOGIN CARD
   ============================================================ */
/* Applies to Login.aspx and CompanyLogin.aspx */
.box.box-danger,
div.box.box.box-danger {
    background: var(--g-surface) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: var(--g-shadow-lg) !important;
    border: 1px solid var(--g-border) !important;
    padding: 32px 36px 28px !important;
}

/* Login header bar */
div[style*="background-color: #901911"] h3 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.1rem !important;
    letter-spacing: .01em !important;
}

/* CAPTCHA sum box */
div[style*="box-shadow: inset"] {
    background: #F8FAFC !important;
    border: 1.5px solid var(--g-border) !important;
    border-radius: var(--g-radius-md) !important;
    box-shadow: none !important;
}

/* Login button override to indigo */
a[id*="btnSignIn"].btn.btn-primary {
    width: 100% !important;
    text-align: center !important;
    padding: 11px !important;
    font-size: 0.95rem !important;
    background: linear-gradient(135deg, #089088 0%, #02997e 100%) !important;
}


/* ============================================================
   16. WELCOME / HOME SCREEN
   ============================================================ */
.welcome-container {
    background: linear-gradient(135deg, #1E1B4B 0%, #4F46E5 100%) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: var(--g-shadow-lg) !important;
    padding: 60px 40px !important;
}

.welcome-container h1 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}

.btn-appointment {
    background: linear-gradient(135deg, var(--g-primary) 0%, #818CF8 100%) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(79,70,229,.35) !important;
}

.btn-appointment:hover {
    filter: brightness(1.1) !important;
    transform: scale(1.04) !important;
    color: #fff !important;
}


/* ============================================================
   17. NOTIFICATION BADGE
   ============================================================ */
.notification {
    /*background: linear-gradient(135deg, var(--g-primary) 0%, var(--g-primary-dark) 100%) !important;*/
    background: linear-gradient(135deg, #089088 0%, #02997e 100%) !important;
    border-radius: var(--g-radius-sm) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    box-shadow: var(--g-shadow-sm) !important;
}

.notification:hover {
    background: linear-gradient(135deg, var(--g-primary-dark) 0%, #3730A3 100%) !important;
    color: #fff !important;
}

.notification .badge {
    background: var(--g-danger) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
}


/* ============================================================
   18. INFO BOX (confirmation card)
   ============================================================ */
.info-box {
    background: var(--g-surface) !important;
    border: 1.5px solid var(--g-border) !important;
    border-radius: var(--g-radius-md) !important;
    box-shadow: var(--g-shadow-sm) !important;
    padding: 16px 20px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.info-row {
    border-bottom: 1px solid var(--g-border) !important;
    padding: 8px 0 !important;
}

.info-row:last-child { border-bottom: none !important; }

.info-label {
    color: var(--g-text-label) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.info-value {
    color: var(--g-text-heading) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}


/* ============================================================
   19. MOBILE CARD LIST (.card-item)
   ============================================================ */
.card-item {
    background: var(--g-surface) !important;
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius-md) !important;
    box-shadow: var(--g-shadow-sm) !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    transition: box-shadow var(--g-transition) !important;
}

.card-item:hover {
    box-shadow: var(--g-shadow-md) !important;
}

.label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: var(--g-text-muted) !important;
}

.value {
    font-size: 0.87rem !important;
    font-weight: 500 !important;
    color: var(--g-text-heading) !important;
}

.name {
    color: var(--g-primary) !important;
    font-weight: 600 !important;
}


/* ============================================================
   20. UTILITIES & HELPERS
   ============================================================ */

/* Horizontal rule */
hr {
    border-color: var(--g-border) !important;
    opacity: 1 !important;
}

/* Global h4 / h5 color */
h4, h5 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: var(--g-text-heading) !important;
    font-weight: 700 !important;
}

/* Send icon button links (Repeater, GridView) */
a.send-btn,
.send-btn {
    color: var(--g-success) !important;
}

/* Record not found / empty text */
.EmptyData,
td.Empty {
    color: var(--g-text-muted) !important;
    font-style: italic !important;
    padding: 16px !important;
    text-align: center !important;
}

/* Admin table (alternate plain tables) */
.admin-table {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

.admin-table th {
    /*background: linear-gradient(135deg, var(--g-primary) 0%, var(--g-primary-dark) 100%) !important;*/
    background: linear-gradient(135deg, #089088 0%, #02997e 100%) !important;
    color: #fff !important;
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: 11px 12px !important;
    border: none !important;
}

.admin-table td {
    padding: 10px 12px !important;
    font-size: 0.83rem !important;
    border-bottom: 1px solid var(--g-border) !important;
    color: var(--g-text-body) !important;
}

.admin-table tr:hover td {
    background: var(--g-primary-light) !important;
}

/* QR image border */
img[id*="QRCode"],
asp\:image[id*="QRCode"] {
    border: 2px solid var(--g-primary) !important;
    border-radius: var(--g-radius-sm) !important;
}

/* Download QR button */
a.btn.btn-success[id*="lnkDownload"] {
    font-size: 0.73rem !important;
    padding: 4px 10px !important;
    border-radius: var(--g-radius-sm) !important;
}

/* card (used in GroupMem result card) */
.card1,
.card {
    background: var(--g-surface) !important;
    border-radius: var(--g-radius-lg) !important;
    box-shadow: var(--g-shadow-md) !important;
    border: 1px solid var(--g-border) !important;
    padding: 24px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Decorative circle on some cards */
.card .circle,
.card1 .circle {
    background: linear-gradient(135deg, var(--g-primary-light) 0%, #C7D2FE 100%) !important;
}


/* ============================================================
   21. RESPONSIVE (≤ 768 px)
   ============================================================ */
@media (max-width: 768px) {
    .feature-block {
        padding: 18px 14px !important;
    }

    .main-navigation ul.dd-menu {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .main-navigation ul.dd-menu li a {
        padding: 10px 16px !important;
        border-radius: 0 !important;
    }

    table.Admingridtable th,
    table.Admingridtable td {
        font-size: 0.75rem !important;
        padding: 8px 8px !important;
    }

    .box.box-danger {
        padding: 20px 16px !important;
    }
}