/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
    /* ----------------------------------------------------------------------
       CBC BAKERY COLORS
       ---------------------------------------------------------------------- */
    --cbc-brown-dark: #3a2418;
    --cbc-brown: #5a321f;
    --cbc-brown-medium: #713d23;
    --cbc-brown-light: #8d4f2c;
    --cbc-caramel: #a45f31;
    --cbc-gold: #d6924c;
    --cbc-gold-light: #f4c27b;
    --cbc-cream: #fff8ef;
    --cbc-cream-light: #fffdfb;
    --cbc-cream-dark: #f4dfc8;
    --cbc-beige: #f8ead8;
    --cbc-beige-dark: #ead1b5;
    --cbc-border: #dfd0c3;
    --cbc-border-light: #eee3dc;
    --cbc-text: #3a2418;
    --cbc-text-light: #776458;
    --cbc-muted: #9a897e;
    --cbc-white: #ffffff;
    /* ----------------------------------------------------------------------
       STATUS COLORS
       ---------------------------------------------------------------------- */
    --cbc-success: #2d9b46;
    --cbc-success-bg: #effaf2;
    --cbc-danger: #b42318;
    --cbc-danger-bg: #fff0f0;
    --cbc-warning: #9a6418;
    --cbc-warning-bg: #fff8e7;
    --cbc-info: #2c6e91;
    --cbc-info-bg: #eef7fb;
    /* ----------------------------------------------------------------------
       SHADOWS
       ---------------------------------------------------------------------- */
    --cbc-shadow:
        0 8px 25px rgba(66, 37, 20, 0.12);
    --cbc-shadow-heavy:
        0 15px 40px rgba(66, 37, 20, 0.18);
    --cbc-shadow-card:
        0 5px 15px rgba(58, 36, 24, 0.18);
    /* ----------------------------------------------------------------------
       RADIUS
       ---------------------------------------------------------------------- */
    --cbc-radius-small: 7px;
    --cbc-radius: 10px;
    --cbc-radius-medium: 12px;
    --cbc-radius-large: 18px;
    --cbc-radius-xl: 25px;
    /* ----------------------------------------------------------------------
       TRANSITION
       ---------------------------------------------------------------------- */
    --cbc-transition:
        all 0.25s ease;
    /* ----------------------------------------------------------------------
       APPLICATION DIMENSIONS
       ---------------------------------------------------------------------- */
    --cbc-navbar-height: 52px;
    --cbc-sidebar-width: 250px;
}
/* ==========================================================================
   2. GLOBAL RESET
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    /*
     * IMPORTANT:
     * Do NOT use overflow:hidden here.
     * Application pages may need vertical scrolling.
     */
    overflow-x: hidden;
}
body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family:
        'Poppins',
        Arial,
        sans-serif;
    color: var(--cbc-text);
    background:
        linear-gradient(
            135deg,
            #fff8ef 0%,
            #f8ead8 50%,
            #ead1b5 100%
        );
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img {
    max-width: 100%;
    height: auto;
}
button,
input,
select,
textarea {
    font-family:
        'Poppins',
        Arial,
        sans-serif;
}
button {
    cursor: pointer;
}
a {
    color: inherit;
}
ul,
ol {
    margin: 0;
    padding: 0;
}
/* ==========================================================================
   3. COMMON PAGE BACKGROUND DECORATION
   ========================================================================== */
.cbc-page-decoration {
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.cbc-page-decoration.top {
    top: -220px;
    left: -180px;
    background:
        rgba(116, 63, 35, 0.06);
}
.cbc-page-decoration.bottom {
    right: -200px;
    bottom: -230px;
    background:
        rgba(214, 146, 76, 0.08);
}
/* ==========================================================================
   4. TOP NAVBAR
   ========================================================================== */
.top-navbar {
    width: 100%;
    height: var(--cbc-navbar-height);
    min-height: var(--cbc-navbar-height);
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 1000;
    background:
        linear-gradient(
            135deg,
            var(--cbc-brown-dark),
            var(--cbc-brown-medium)
        );
    color: var(--cbc-white);
    box-shadow:
        0 5px 20px
        rgba(58, 36, 24, 0.22);
}
/* ==========================================================================
   5. NAV LEFT
   ========================================================================== */
.nav-left {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
/* ==========================================================================
   6. SIDEBAR TOGGLE
   ========================================================================== */
.toggle-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border:
        1px solid
        rgba(255,255,255,0.25);
    border-radius: 8px;
    background:
        rgba(255,255,255,0.10);
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    transition:
        var(--cbc-transition);
}
.toggle-btn:hover {
    background:
        rgba(255,255,255,0.20);
    border-color:
        rgba(255,255,255,0.40);
    transform:
        translateY(-1px);
}
/* ==========================================================================
   7. APPLICATION TITLE
   ========================================================================== */
.app-title {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family:
        'Playfair Display',
        Georgia,
        serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;
}
/* ==========================================================================
   8. ONLINE COUNT
   ========================================================================== */
.online-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 20px;
    background:
        rgba(255,255,255,0.14);
    border:
        1px solid
        rgba(255,255,255,0.25);
    color:
        var(--cbc-cream-dark);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
/* ==========================================================================
   9. NAV CENTER
   ========================================================================== */
.nav-center {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ==========================================================================
   10. FIRM NAME
   ========================================================================== */
.firm-name {
    max-width: 500px;
    padding: 6px 16px;
    border-radius: 30px;
    background:
        rgba(255,255,255,0.08);
    border:
        1px solid
        rgba(255,255,255,0.16);
    color:
        var(--cbc-beige);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ==========================================================================
   11. NAV RIGHT
   ========================================================================== */
.top-navbar-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
/* ==========================================================================
   12. USER NAME
   ========================================================================== */
.user-name {
    color:
        var(--cbc-beige);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.user-name small {
    color:
        var(--cbc-gold-light);
    font-size: 10px;
    font-weight: 600;
}
/* ==========================================================================
   13. PROFILE DROPDOWN
   ========================================================================== */
.dropdown {
    position: relative;
    display: inline-block;
}
.profile-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border:
        1px solid
        rgba(255,255,255,0.28);
    border-radius: 50%;
    background:
        var(--cbc-gold-light);
    color:
        var(--cbc-brown-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        var(--cbc-transition);
}
.profile-btn:hover {
    background:
        var(--cbc-gold);
    border-color:
        rgba(255,255,255,0.45);
    transform:
        translateY(-1px);
}
.profile-icon {
    font-size: 17px;
    line-height: 1;
}
/* ==========================================================================
   14. DROPDOWN CONTENT
   ========================================================================== */
.dropdown-content {
    display: none;
    position: absolute;
    top:
        calc(100% + 7px);
    right: 0;
    min-width: 230px;
    background:
        #ffffff;
    border:
        1px solid
        var(--cbc-border-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        var(--cbc-shadow-heavy);
    z-index: 2000;
}
.dropdown-content.show {
    display: block;
    animation:
        cbcDropdownAppear
        0.18s ease;
}
.dropdown-content a {
    display: block;
    padding: 12px 16px;
    color:
        var(--cbc-text);
    background:
        #ffffff;
    border-bottom:
        1px solid
        var(--cbc-border-light);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition:
        var(--cbc-transition);
}
.dropdown-content a:last-child {
    border-bottom: none;
}
.dropdown-content a:hover {
    background:
        var(--cbc-cream);
    color:
        var(--cbc-brown-light);
    padding-left: 20px;
}
.dropdown-content a span {
    color:
        var(--cbc-success) !important;
    font-weight: 600;
}
/* ==========================================================================
   15. MAIN APPLICATION CONTAINER
   ========================================================================== */
.container {
    width: 100%;
    min-height:
        calc(100vh - var(--cbc-navbar-height));
    display: flex;
    align-items: stretch;
    position: relative;
    background:
        linear-gradient(
            135deg,
            #fff8ef 0%,
            #f8ead8 55%,
            #ead1b5 100%
        );
}
/* ==========================================================================
   16. SIDEBAR
   ========================================================================== */
.sidebar {
    width: var(--cbc-sidebar-width);
    min-width: var(--cbc-sidebar-width);
    min-height:
        calc(100vh - var(--cbc-navbar-height));
    padding: 18px 12px;
    flex: 0 0 var(--cbc-sidebar-width);
    flex-shrink: 0;
    background:
        linear-gradient(
            180deg,
            #4a2819 0%,
            #3a2418 100%
        );
    color: #ffffff;
    box-shadow:
        5px 0 20px
        rgba(58,36,24,0.12);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color:
        var(--cbc-brown-light)
        var(--cbc-brown-dark);
    transition:
        width 0.25s ease,
        min-width 0.25s ease,
        flex-basis 0.25s ease,
        padding 0.25s ease;
}
/* ==========================================================================
   17. SIDEBAR SCROLLBAR
   ========================================================================== */
.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background:
        var(--cbc-brown-dark);
}
.sidebar::-webkit-scrollbar-thumb {
    background:
        var(--cbc-brown-light);
    border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background:
        var(--cbc-caramel);
}
/* ==========================================================================
   18. SIDEBAR COLLAPSED
   ========================================================================== */
.sidebar.sidebar-collapsed {
    width: 0 !important;
    min-width: 0 !important;
    flex-basis: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}
/* ==========================================================================
   19. SIDEBAR MENU
   ========================================================================== */
.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-menu > li {
    margin-bottom: 5px;
    position: relative;
}
/* ==========================================================================
   20. SIDEBAR MAIN LINKS
   ========================================================================== */
.sidebar-menu > li > a {
    min-height: 45px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 9px;
    color:
        var(--cbc-beige);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition:
        var(--cbc-transition);
}
.sidebar-menu > li > a:hover {
    background:
        rgba(244,194,123,0.13);
    color:
        var(--cbc-gold-light);
    padding-left: 17px;
}
.sidebar-menu > li.active > a {
    background:
        linear-gradient(
            135deg,
            var(--cbc-brown-medium),
            var(--cbc-caramel)
        );
    color:
        #ffffff;
    box-shadow:
        0 5px 15px
        rgba(113,61,35,0.25);
}
/* ==========================================================================
   21. SIDEBAR DROPDOWN ICON
   ========================================================================== */
.dropdown-icon {
    width: 23px;
    height: 23px;
    min-width: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        rgba(255,255,255,0.10);
    color:
        var(--cbc-gold-light);
    font-size: 15px;
    font-weight: 600;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}
.sidebar-menu > li > a:hover .dropdown-icon {
    background:
        rgba(244,194,123,0.18);
}
/* ==========================================================================
   22. SUBMENU
   ========================================================================== */
.submenu {
    display: none;
    list-style: none;
    margin: 3px 0 6px;
    padding:
        4px 0 4px 13px;
    border-left:
        1px solid
        rgba(244,194,123,0.22);
}
.submenu li {
    margin: 2px 0;
    position: relative;
}
.submenu li a {
    display: block;
    padding: 9px 11px;
    border-radius: 7px;
    color:
        #dbc4b1;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    transition:
        var(--cbc-transition);
}
.submenu li a:hover {
    background:
        rgba(244,194,123,0.10);
    color:
        var(--cbc-gold-light);
    padding-left: 15px;
}
.submenu li.active a {
    background:
        rgba(164,95,49,0.28);
    color:
        var(--cbc-gold-light);
    font-weight: 600;
}
/* ==========================================================================
   23. SIDEBAR LOGOUT
   ========================================================================== */
.sidebar-logout {
    margin-top: 18px !important;
    padding-top: 12px;
    border-top:
        1px solid
        rgba(255,255,255,0.10);
}
.sidebar-menu .sidebar-logout a {
    justify-content: center;
    background:
        rgba(180,60,45,0.15);
    border:
        1px solid
        rgba(255,150,130,0.15);
    color:
        #f4c7bb;
}
.sidebar-menu .sidebar-logout a:hover {
    background:
        rgba(180,60,45,0.28);
    color:
        #ffffff;
    padding-left: 13px;
}
/* ==========================================================================
   24. MAIN CONTENT
   ========================================================================== */
.main-content {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height:
        calc(100vh - var(--cbc-navbar-height));
    margin-left: 0;
    padding: 20px;
    overflow-x: hidden;
    /*
     * Vertical scrolling belongs to the page/content naturally.
     */
}
/* ==========================================================================
   25. CONTENT HEADER
   ========================================================================== */
.page-header {
    width: 100%;
    margin-bottom: 18px;
}
.page-header h1 {
    margin: 0;
    color:
        var(--cbc-brown-dark);
    font-family:
        'Playfair Display',
        Georgia,
        serif;
    font-size: 28px;
    line-height: 1.2;
}
.page-header p {
    margin: 6px 0 0;
    color:
        var(--cbc-text-light);
    font-size: 13px;
}
/* ==========================================================================
   26. DASHBOARD CONTAINER
   ========================================================================== */
.card-container {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
}
/* ==========================================================================
   27. DASHBOARD MARQUEE
   ========================================================================== */
.marquee-container {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 4px;
    padding: 0;
    overflow: hidden;
    border-radius: 7px;
    background:
        var(--cbc-cream-dark);
    border:
        1px solid
        rgba(90, 50, 31, 0.15);
    box-shadow:
        0 2px 6px
        rgba(58, 36, 24, 0.08);
}
.marquee-container marquee {
    display: block;
    width: 100%;
    height: 25px;
    line-height: 25px;
    padding: 0 8px;
    margin: 0;
    color:
        var(--cbc-brown-dark) !important;
    background:
        var(--cbc-cream-dark) !important;
    font-size: 13px !important;
    font-weight: 600;
}
/* ==========================================================================
   28. DASHBOARD CARD
   --------------------------------------------------------------------------
   FOUR CAKE THEME TYPES
   --------------------------------------------------------------------------
   TYPE 1 - CHOCOLATE
       11, 15, 19, 23
   TYPE 2 - CARAMEL
       12, 16, 20, 24
   TYPE 3 - COFFEE / VANILLA
       13, 17, 21, 25
   TYPE 4 - VANILLA / CREAM
       14, 18, 22, 26
   ========================================================================== */
.koushik_card {
    position: relative;
    min-width: 0;
    min-height: 100px;
    padding: 14px 12px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    color:
        var(--cbc-white);
    border:
        1px solid
        rgba(255,255,255,0.12);
    box-shadow:
        var(--cbc-shadow-card);
    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease;
}
.koushik_card:hover {
    transform:
        translateY(-3px);
    box-shadow:
        0 9px 20px
        rgba(58,36,24,0.25);
}
/* ==========================================================================
   29. CAKE CARD DECORATION
   ========================================================================== */
.koushik_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background:
        var(--cbc-gold-light);
    opacity: 0.90;
}
.koushik_card::after {
    content: "🍰";
    position: absolute;
    right: 10px;
    bottom: 5px;
    font-size: 27px;
    opacity: 0.10;
    pointer-events: none;
}
/* ==========================================================================
   30. TYPE 1 — CHOCOLATE CAKE
   Cards: 11, 15, 19, 23
   ========================================================================== */
.card11,
.card15,
.card19,
.card23 {
    background:
        linear-gradient(
            135deg,
            #70452f 0%,
            #54301f 52%,
            #382116 100%
        );
}
.card11::before,
.card15::before,
.card19::before,
.card23::before {
    background:
        #d8a06f;
}
.card11 i,
.card15 i,
.card19 i,
.card23 i,
.card11 .card-icon,
.card15 .card-icon,
.card19 .card-icon,
.card23 .card-icon {
    color:
        #f0c79e;
}
/* ==========================================================================
   31. TYPE 2 — CARAMEL CAKE
   Cards: 12, 16, 20, 24
   ========================================================================== */
.card12,
.card16,
.card20,
.card24 {
    background:
        linear-gradient(
            135deg,
            #a66b3f 0%,
            #85502d 52%,
            #60371f 100%
        );
}
.card12::before,
.card16::before,
.card20::before,
.card24::before {
    background:
        #f1c27d;
}
.card12 i,
.card16 i,
.card20 i,
.card24 i,
.card12 .card-icon,
.card16 .card-icon,
.card20 .card-icon,
.card24 .card-icon {
    color:
        #ffe0a6;
}
/* ==========================================================================
   32. TYPE 3 — LIGHT / DEEP COFFEE-VANILLA CAKE
   Cards: 13, 17, 21, 25
   This replaces the previous strawberry color.
   ========================================================================== */
.card13,
.card17,
.card21,
.card25 {
    background:
        linear-gradient(
            135deg,
            #c49a72 0%,
            #9b704d 52%,
            #68452f 100%
        );
}
.card13::before,
.card17::before,
.card21::before,
.card25::before {
    background:
        #f1d3a5;
}
.card13 i,
.card17 i,
.card21 i,
.card25 i,
.card13 .card-icon,
.card17 .card-icon,
.card21 .card-icon,
.card25 .card-icon {
    color:
        #f6dfbf;
}
/* ==========================================================================
   33. TYPE 4 — VANILLA / CREAM CAKE
   Cards: 14, 18, 22, 26
   ========================================================================== */
.card14,
.card18,
.card22,
.card26 {
    background:
        linear-gradient(
            135deg,
            #a4866e 0%,
            #80634f 52%,
            #594132 100%
        );
}
.card14::before,
.card18::before,
.card22::before,
.card26::before {
    background:
        #ead0ae;
}
.card14 i,
.card18 i,
.card22 i,
.card26 i,
.card14 .card-icon,
.card18 .card-icon,
.card22 .card-icon,
.card26 .card-icon {
    color:
        #f3dfc2;
}
/* ==========================================================================
   34. DASHBOARD CARD TEXT
   ========================================================================== */
.top-text {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    min-height: 32px;
    font-weight: 600;
    letter-spacing: 0.35px;
    color:
        var(--cbc-cream-dark);
    text-transform:
        uppercase;
}
.main-text {
    position: relative;
    z-index: 2;
    margin: 5px 0 0;
    padding: 0;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 700;
    color:
        var(--cbc-white);
    text-shadow:
        0 2px 4px
        rgba(0,0,0,0.25);
}
.koushik_card a {
    position: relative;
    z-index: 3;
    color:
        var(--cbc-white);
    text-decoration: none;
}
.koushik_card a:hover {
    color:
        var(--cbc-gold-light);
}
/* ==========================================================================
   35. COMMON CARD / PANEL
   ========================================================================== */
.cbc-card {
    width: 100%;
    background:
        #ffffff;
    border:
        1px solid
        var(--cbc-border-light);
    border-radius:
        var(--cbc-radius-medium);
    box-shadow:
        var(--cbc-shadow);
    padding: 20px;
}
.cbc-card-title {
    margin: 0 0 15px;
    color:
        var(--cbc-brown-dark);
    font-family:
        'Playfair Display',
        Georgia,
        serif;
    font-size: 20px;
}
/* ==========================================================================
   36. COMMON FORM GROUP
   ========================================================================== */
.form-group {
    margin-bottom: 18px;
}
.form-group label {
    display: block;
    margin-bottom: 7px;
    color:
        #4d372b;
    font-size: 13px;
    font-weight: 600;
}
/* ==========================================================================
   37. COMMON INPUT
   ========================================================================== */
.form-control {
    width: 100%;
    height: 46px;
    padding:
        0 13px;
    border:
        1px solid
        var(--cbc-border);
    border-radius:
        var(--cbc-radius);
    outline: none;
    background:
        var(--cbc-cream-light);
    color:
        var(--cbc-text);
    font-size: 13px;
    transition:
        var(--cbc-transition);
}
.form-control:focus {
    border-color:
        var(--cbc-brown-light);
    background:
        #ffffff;
    box-shadow:
        0 0 0 3px
        rgba(155,92,50,0.10);
}
.form-control::placeholder {
    color:
        #b6a59a;
}
/* ==========================================================================
   38. INPUT WITH ICON
   ========================================================================== */
.input-wrapper {
    position: relative;
    width: 100%;
}
.input-wrapper > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform:
        translateY(-50%);
    color:
        #a27a5d;
    font-size: 15px;
    z-index: 2;
    pointer-events: none;
}
.input-wrapper .form-control {
    padding-left: 42px;
}
/* ==========================================================================
   39. SELECT
   ========================================================================== */
select.form-control {
    cursor: pointer;
}
/* ==========================================================================
   40. TEXTAREA
   ========================================================================== */
textarea.form-control {
    height: auto;
    min-height: 100px;
    padding-top: 11px;
    padding-bottom: 11px;
    resize: vertical;
}
/* ==========================================================================
   41. COMMON BUTTON
   ========================================================================== */
.cbc-btn {
    min-height: 42px;
    padding:
        9px 18px;
    border: none;
    border-radius:
        var(--cbc-radius);
    background:
        linear-gradient(
            135deg,
            var(--cbc-brown-medium),
            var(--cbc-caramel)
        );
    color:
        #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow:
        0 6px 15px
        rgba(113,61,35,0.20);
    transition:
        var(--cbc-transition);
}
.cbc-btn:hover {
    transform:
        translateY(-1px);
    box-shadow:
        0 9px 20px
        rgba(113,61,35,0.28);
}
.cbc-btn:active {
    transform:
        translateY(0);
}
.cbc-btn:disabled {
    opacity: 0.60;
    cursor: not-allowed;
    transform: none;
}
/* ==========================================================================
   42. BUTTON VARIANTS
   ========================================================================== */
.cbc-btn-secondary {
    background:
        #ffffff;
    color:
        var(--cbc-brown);
    border:
        1px solid
        var(--cbc-border);
    box-shadow: none;
}
.cbc-btn-secondary:hover {
    background:
        var(--cbc-cream);
    border-color:
        var(--cbc-brown-light);
}
.cbc-btn-danger {
    background:
        linear-gradient(
            135deg,
            #a33a2c,
            #7d281f
        );
}
.cbc-btn-success {
    background:
        linear-gradient(
            135deg,
            #348f4b,
            #217a3b
        );
}
/* ==========================================================================
   43. LOGIN PAGE
   ========================================================================== */
/*
 * IMPORTANT:
 *
 * Login page uses a dedicated wrapper.
 *
 * We DO NOT modify body globally for login.
 *
 * Add class "cbc-login-page" to the login body:
 *
 * <body class="cbc-login-page">
 */
/* ==========================================================================
   44. LOGIN BACKGROUND
   ========================================================================== */
.cbc-login-page {
    min-height: 100vh;
    background:
        linear-gradient(
            135deg,
            #fff8ef 0%,
            #f8ead8 45%,
            #ead1b5 100%
        );
}
/* ==========================================================================
   45. LOGIN WRAPPER
   ========================================================================== */
.login-wrapper {
    width:
        calc(100% - 40px);
    max-width: 1050px;
    min-height: 620px;
    height:
        calc(100vh - 40px);
    max-height: 700px;
    margin: 20px auto;
    display: grid;
    grid-template-columns:
        1fr 1fr;
    background:
        #ffffff;
    border-radius:
        var(--cbc-radius-xl);
    overflow: hidden;
    box-shadow:
        0 25px 70px
        rgba(66,37,20,0.20);
    position: relative;
    z-index: 1;
    animation:
        cbcPageAppear
        0.65s ease;
}
/* ==========================================================================
   46. LOGIN BRAND PANEL
   ========================================================================== */
.brand-panel {
    position: relative;
    min-height: 0;
    height: 100%;
    padding: 55px 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background:
        linear-gradient(
            rgba(63,31,15,0.78),
            rgba(63,31,15,0.88)
        ),
        url("../bakery-bg.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.brand-panel::before {
    content: "";
    position: absolute;
    inset: 20px;
    border:
        1px solid
        rgba(255,255,255,0.25);
    border-radius: 18px;
    pointer-events: none;
}
/* ==========================================================================
   47. BAKERY ICON
   ========================================================================== */
.bakery-icon {
    width: 105px;
    height: 105px;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        rgba(255,255,255,0.12);
    border:
        2px solid
        rgba(255,255,255,0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color:
        var(--cbc-gold-light);
    font-size: 48px;
    box-shadow:
        0 10px 30px
        rgba(0,0,0,0.25);
}
/* ==========================================================================
   48. BRAND TITLE
   ========================================================================== */
.brand-panel h1 {
    margin: 0 0 12px;
    font-family:
        'Playfair Display',
        Georgia,
        serif;
    font-size: 42px;
    line-height: 1.15;
    color:
        #ffffff;
}
/* ==========================================================================
   49. BRAND TAGLINE
   ========================================================================== */
.brand-panel .tagline {
    margin: 0;
    max-width: 380px;
    color:
        #f4dfc8;
    font-size: 15px;
    line-height: 1.8;
}
/* ==========================================================================
   50. WELCOME LINE
   ========================================================================== */
.welcome-line {
    margin-top: 30px;
    color:
        var(--cbc-gold-light);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
/* ==========================================================================
   51. LOGIN PANEL
   ========================================================================== */
.login-panel {
    height: 100%;
    min-height: 0;
    padding: 55px 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        #ffffff;
    overflow: hidden;
}
/* ==========================================================================
   52. LOGIN BOX
   ========================================================================== */
.login-box {
    width: 100%;
    max-width: 390px;
}
/* ==========================================================================
   53. LOGIN TITLE
   ========================================================================== */
.login-box h2 {
    margin: 0 0 8px;
    font-family:
        'Playfair Display',
        Georgia,
        serif;
    font-size: 34px;
    color:
        var(--cbc-brown-dark);
}
/* ==========================================================================
   54. LOGIN SUBTITLE
   ========================================================================== */
.login-subtitle {
    margin: 0 0 30px;
    color:
        #8b7567;
    font-size: 14px;
}
/* ==========================================================================
   55. LOGIN ALERT
   ========================================================================== */
.login-alert {
    display: none;
    padding: 12px 15px;
    border-radius: 9px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.4;
}
.login-alert.error {
    display: block;
    background:
        var(--cbc-danger-bg);
    color:
        var(--cbc-danger);
    border:
        1px solid
        #f3c0c0;
}
.login-alert.success {
    display: block;
    background:
        var(--cbc-success-bg);
    color:
        #217a3b;
    border:
        1px solid
        #b9e5c3;
}
.login-alert.info {
    display: block;
    background:
        var(--cbc-cream);
    color:
        #70442b;
    border:
        1px solid
        #ead4c3;
}
/* ==========================================================================
   56. LOGIN PASSWORD TOGGLE
   ========================================================================== */
.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform:
        translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    color:
        #9a8273;
    font-size: 15px;
    padding: 3px;
    z-index: 3;
}
.password-toggle:hover {
    color:
        #6d4329;
}
/* ==========================================================================
   57. LOGIN FORM OPTIONS
   ========================================================================== */
.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:
        3px 0 25px;
    font-size: 12px;
}
.remember-me {
    display: flex;
    align-items: center;
    gap: 7px;
    color:
        var(--cbc-text-light);
    cursor: pointer;
}
.remember-me input {
    accent-color:
        var(--cbc-brown-light);
    cursor: pointer;
}
.forgot-link {
    color:
        var(--cbc-brown-light);
    text-decoration: none;
    font-weight: 600;
}
.forgot-link:hover {
    text-decoration: underline;
}
/* ==========================================================================
   58. LOGIN BUTTON
   ========================================================================== */
.login-btn {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 10px;
    background:
        linear-gradient(
            135deg,
            var(--cbc-brown-medium),
            var(--cbc-caramel)
        );
    color:
        #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow:
        0 8px 20px
        rgba(113,61,35,0.22);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}
.login-btn:hover {
    transform:
        translateY(-2px);
    box-shadow:
        0 12px 25px
        rgba(113,61,35,0.30);
}
.login-btn:active {
    transform:
        translateY(0);
}
.login-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}
/* ==========================================================================
   59. LOGIN FOOTER
   ========================================================================== */
.login-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 22px;
    border-top:
        1px solid
        var(--cbc-border-light);
    color:
        var(--cbc-muted);
    font-size: 11px;
    line-height: 1.7;
}
.login-footer strong {
    color:
        #70442b;
}
/* ==========================================================================
   60. LOADING SPINNER
   ========================================================================== */
.spinner {
    display: none;
    width: 16px;
    height: 16px;
    border:
        2px solid
        rgba(255,255,255,0.45);
    border-top-color:
        #ffffff;
    border-radius: 50%;
    animation:
        cbcSpin
        0.7s linear infinite;
    vertical-align: middle;
    margin-right: 7px;
}
.loading .spinner {
    display: inline-block;
}
/* ==========================================================================
   61. COMMON STATUS BADGES
   ========================================================================== */
.cbc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding:
        4px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.cbc-badge-success {
    background:
        var(--cbc-success-bg);
    color:
        var(--cbc-success);
}
.cbc-badge-danger {
    background:
        var(--cbc-danger-bg);
    color:
        var(--cbc-danger);
}
.cbc-badge-warning {
    background:
        var(--cbc-warning-bg);
    color:
        var(--cbc-warning);
}
.cbc-badge-info {
    background:
        var(--cbc-info-bg);
    color:
        var(--cbc-info);
}
/* ==========================================================================
   62. DESKTOP / MOBILE HELPERS
   ========================================================================== */
.mobile-only {
    display: none;
}
.desktop-only {
    display: block;
}
/* ==========================================================================
   63. ANIMATIONS
   ========================================================================== */
@keyframes cbcSpin {
    to {
        transform:
            rotate(360deg);
    }
}
@keyframes cbcPageAppear {
    from {
        opacity: 0;
        transform:
            translateY(20px);
    }
    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}
@keyframes cbcDropdownAppear {
    from {
        opacity: 0;
        transform:
            translateY(-5px);
    }
    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}
/* ==========================================================================
   64. RESPONSIVE — TABLET
   ========================================================================== */
@media screen and (max-width: 1000px) {
    .top-navbar {
        padding:
            0 10px;
    }
    .app-title {
        font-size: 17px;
    }
    .firm-name {
        max-width: 280px;
        font-size: 11px;
        padding:
            5px 12px;
    }
    .user-name {
        font-size: 11px;
    }
    .sidebar {
        width: 220px;
        min-width: 220px;
        flex-basis: 220px;
    }
    /*
     * TABLET:
     * 2 CARDS PER ROW
     */
    .card-container {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .main-content {
        padding: 16px;
    }
}
/* ==========================================================================
   65. RESPONSIVE — MOBILE
   ========================================================================== */
@media screen and (max-width: 850px) {
    :root {
        --cbc-navbar-height: 48px;
    }
    .top-navbar {
        height: 48px;
        min-height: 48px;
        padding:
            0 8px;
        gap: 7px;
    }
    .nav-left {
        gap: 7px;
    }
    .toggle-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        font-size: 17px;
    }
    .app-title {
        font-size: 16px;
        gap: 6px;
    }
    .online-count {
        min-height: 22px;
        padding:
            2px 6px;
        font-size: 11px;
    }
    .nav-center {
        display: none;
    }
    .user-name {
        display: none;
    }
    .profile-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }
    .profile-icon {
        font-size: 16px;
    }
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: inline !important;
    }
    .container {
        min-height:
            calc(100vh - var(--cbc-navbar-height));
    }
    .sidebar {
        width: 235px;
        min-width: 235px;
        flex-basis: 235px;
        min-height:
            calc(100vh - var(--cbc-navbar-height));
        padding:
            12px 10px;
    }
    .main-content {
        padding: 12px;
    }
    /*
     * MOBILE:
     * KEEP 2 CARDS PER ROW
     */
    .card-container {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .koushik_card {
        min-height: 105px;
        padding:
            14px 10px;
        border-radius: 10px;
    }
    .top-text {
        font-size: 11px;
        line-height: 1.35;
        min-height: 30px;
    }
    .main-text {
        font-size: 25px;
    }
    .koushik_card::after {
        font-size: 26px;
        right: 8px;
        bottom: 6px;
    }
    /* ----------------------------------------------------------------------
       LOGIN TABLET / MOBILE
       ---------------------------------------------------------------------- */
    .login-wrapper {
        width:
            calc(100% - 20px);
        height:
            calc(100vh - 20px);
        min-height: 0;
        max-width: 500px;
        max-height: none;
        margin:
            10px auto;
        grid-template-columns: 1fr;
        grid-template-rows:
            minmax(170px, 30vh)
            minmax(0, 1fr);
        border-radius: 18px;
    }
    .brand-panel {
        height: auto;
        min-height: 0;
        padding:
            15px 20px;
    }
    .brand-panel::before {
        inset: 8px;
        border-radius: 13px;
    }
    .bakery-icon {
        width: 58px;
        height: 58px;
        font-size: 27px;
        margin-bottom: 8px;
    }
    .brand-panel h1 {
        font-size:
            clamp(24px, 6vw, 30px);
        line-height: 1.05;
        margin-bottom: 6px;
    }
    .brand-panel .tagline {
        font-size: 11px;
        line-height: 1.35;
        max-width: 340px;
    }
    .welcome-line {
        margin-top: 8px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }
    .login-panel {
        height: auto;
        min-height: 0;
        padding:
            18px 25px;
    }
    .login-box h2 {
        font-size: 27px;
        margin-bottom: 3px;
    }
    .login-subtitle {
        font-size: 11px;
        margin-bottom: 15px;
    }
    .login-alert {
        padding:
            8px 10px;
        margin-bottom: 10px;
        font-size: 10px;
    }
    .form-group {
        margin-bottom: 12px;
    }
    .form-group label {
        font-size: 11px;
        margin-bottom: 5px;
    }
    .login-box .form-control {
        height: 43px;
        font-size: 12px;
    }
    .form-options {
        margin:
            2px 0 14px;
        font-size: 10px;
    }
    .login-btn {
        height: 44px;
        font-size: 12px;
    }
    .login-footer {
        margin-top: 14px;
        padding-top: 10px;
        font-size: 9px;
    }
}
/* ==========================================================================
   66. RESPONSIVE — SMALL MOBILE
   ========================================================================== */
@media screen and (max-width: 480px) {
    :root {
        --cbc-navbar-height: 46px;
    }
    .top-navbar {
        height: 46px;
        min-height: 46px;
        padding:
            0 6px;
        gap: 5px;
    }
    .nav-left {
        gap: 6px;
    }
    .toggle-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        font-size: 16px;
    }
    .app-title {
        font-size: 14px;
        gap: 4px;
    }
    .online-count {
        min-height: 18px;
        padding:
            1px 5px;
        font-size: 8px;
    }
    .profile-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }
    .profile-icon {
        font-size: 14px;
    }
    .dropdown-content {
        right:
            -4px;
        min-width:
            205px;
    }
    .dropdown-content a {
        padding:
            10px 13px;
        font-size:
            11px;
    }
    .sidebar {
        width: 220px;
        min-width: 220px;
        flex-basis: 220px;
    }
    .sidebar-menu > li > a {
        min-height:
            42px;
        padding:
            10px 11px;
        font-size:
            12px;
    }
    .submenu li a {
        padding:
            8px 9px;
        font-size:
            11px;
    }
    .main-content {
        padding: 10px;
    }
    /*
     * SMALL MOBILE:
     * 1 CARD PER ROW
     */
    .card-container {
        grid-template-columns:
            1fr;
        gap: 10px;
    }
    .koushik_card {
        min-height: 90px;
        padding: 13px;
    }
    .top-text {
        font-size: 11px;
        line-height: 1.35;
        min-height: 30px;
    }
    .main-text {
        font-size: 26px;
    }
    .koushik_card::after {
        font-size: 25px;
        right: 8px;
        bottom: 5px;
    }
    /* ----------------------------------------------------------------------
       LOGIN SMALL MOBILE
       ---------------------------------------------------------------------- */
    .login-wrapper {
        width:
            calc(100% - 12px);
        height:
            calc(100vh - 12px);
        margin:
            6px auto;
        border-radius: 15px;
        grid-template-rows:
            minmax(145px, 25vh)
            minmax(0, 1fr);
    }
    .brand-panel {
        padding:
            10px 15px;
    }
    .brand-panel::before {
        inset: 6px;
        border-radius: 11px;
    }
    .bakery-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
        margin-bottom: 5px;
    }
    .brand-panel h1 {
        font-size: 23px;
        line-height: 1;
        margin-bottom: 4px;
    }
    .brand-panel .tagline {
        font-size: 9px;
        line-height: 1.25;
    }
    .welcome-line {
        margin-top: 5px;
        font-size: 8px;
        letter-spacing: 1px;
    }
    .login-panel {
        padding:
            15px 20px;
    }
    .login-box h2 {
        font-size: 24px;
        margin-bottom: 2px;
    }
    .login-subtitle {
        font-size: 10px;
        margin-bottom: 12px;
    }
    .login-alert {
        padding:
            7px 9px;
        margin-bottom: 8px;
        font-size: 9px;
    }
    .login-box .form-group {
        margin-bottom: 10px;
    }
    .login-box .form-group label {
        font-size: 10px;
        margin-bottom: 4px;
    }
    .login-box .form-control {
        height: 40px;
        font-size: 11px;
        border-radius: 8px;
    }
    .login-box .input-wrapper > i {
        left: 12px;
        font-size: 12px;
    }
    .login-box .password-toggle {
        right: 12px;
        font-size: 12px;
    }
    .form-options {
        margin:
            2px 0 11px;
        font-size: 9px;
    }
    .login-btn {
        height: 41px;
        border-radius: 8px;
        font-size: 11px;
    }
    .login-footer {
        margin-top: 10px;
        padding-top: 8px;
        font-size: 8px;
        line-height: 1.45;
    }
}
/* ==========================================================================
   67. VERY SMALL MOBILE
   ========================================================================== */
@media screen and (max-width: 360px) {
    .app-title {
        font-size: 13px;
    }
    .online-count {
        display: none;
    }
    .sidebar {
        width: 205px;
        min-width: 205px;
        flex-basis: 205px;
    }
    /* Login */
    .login-box h2 {
        font-size: 22px;
    }
    .brand-panel h1 {
        font-size: 21px;
    }
}
/* ==========================================================================
   68. VERY SHORT MOBILE SCREENS
   ========================================================================== */
@media screen and (max-height: 650px) and (max-width: 850px) {
    .login-wrapper {
        grid-template-rows:
            minmax(120px, 23vh)
            minmax(0, 1fr);
    }
    .brand-panel {
        padding:
            7px 15px;
    }
    .bakery-icon {
        width: 42px;
        height: 42px;
        font-size: 19px;
        margin-bottom: 3px;
    }
    .brand-panel h1 {
        font-size: 21px;
        margin-bottom: 2px;
    }
    .brand-panel .tagline {
        font-size: 8px;
        line-height: 1.2;
    }
    .welcome-line {
        margin-top: 3px;
        font-size: 7px;
    }
    .login-panel {
        padding:
            10px 18px;
    }
    .login-box h2 {
        font-size: 22px;
    }
    .login-subtitle {
        font-size: 9px;
        margin-bottom: 8px;
    }
    .login-box .form-group {
        margin-bottom: 7px;
    }
    .login-box .form-group label {
        font-size: 9px;
        margin-bottom: 3px;
    }
    .login-box .form-control {
        height: 36px;
        font-size: 10px;
    }
    .form-options {
        margin-bottom: 8px;
        font-size: 8px;
    }
    .login-btn {
        height: 37px;
        font-size: 10px;
    }
    .login-footer {
        margin-top: 7px;
        padding-top: 5px;
        font-size: 7px;
    }
}
/* ==========================================================================
   69. FINAL SIDEBAR TOGGLE / LAYOUT RULES
   ========================================================================== */
/*
 * The application uses:
 *
 *     .container { display:flex; }
 *
 * Therefore JavaScript should NOT set:
 *
 *     margin-left
 *     width
 *
 * on .main-content.
 *
 * The sidebar controls the available width naturally.
 */
/* --------------------------------------------------------------------------
   NORMAL CONTAINER
   -------------------------------------------------------------------------- */
.container {
    display: flex;
    width: 100%;
}
/* --------------------------------------------------------------------------
   NORMAL SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar {
    width: var(--cbc-sidebar-width);
    min-width: var(--cbc-sidebar-width);
    flex:
        0 0 var(--cbc-sidebar-width);
}
/* --------------------------------------------------------------------------
   COLLAPSED SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar.sidebar-collapsed {
    width: 0 !important;
    min-width: 0 !important;
    flex:
        0 0 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}
/* --------------------------------------------------------------------------
   MAIN CONTENT
   -------------------------------------------------------------------------- */
.main-content {
    flex:
        1 1 auto;
    width: auto !important;
    min-width: 0;
    margin-left: 0 !important;
}
/* ==========================================================================
   70. FINAL DESKTOP
   ========================================================================== */
@media screen and (min-width: 769px) {
    .sidebar:not(.sidebar-collapsed) {
        width: var(--cbc-sidebar-width);
        min-width: var(--cbc-sidebar-width);
        flex-basis:
            var(--cbc-sidebar-width);
    }
    /*
     * FINAL DESKTOP DASHBOARD
     *
     * 4 CARDS PER ROW
     */
    .card-container {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
        gap: 12px;
    }
    .koushik_card {
        min-height: 100px;
        padding:
            14px 12px;
    }
    .top-text {
        font-size: 12px;
    }
    .main-text {
        font-size: 26px;
    }
}
/* ==========================================================================
   71. FINAL MOBILE
   ========================================================================== */
@media screen and (max-width: 768px) {
    .sidebar {
        width: 235px;
        min-width: 235px;
        flex-basis: 235px;
    }
    .sidebar.sidebar-collapsed {
        width: 0 !important;
        min-width: 0 !important;
        flex-basis: 0 !important;
    }
    .main-content {
        width: 100% !important;
        margin-left: 0 !important;
    }
    /*
     * MOBILE:
     * 2 CARDS PER ROW
     */
    .card-container {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}
/* ==========================================================================
   72. FINAL SMALL MOBILE
   ========================================================================== */
@media screen and (max-width: 480px) {
    /*
     * Small phones:
     * 1 card per row.
     */
    .card-container {
        grid-template-columns:
            1fr;
        gap: 10px;
    }
    .koushik_card {
        min-height: 90px;
        padding: 13px;
    }
    .main-text {
        font-size: 26px;
    }
}
/* ==========================================================================
   73. REDUCE MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;
        animation-iteration-count:
            1 !important;
        transition-duration:
            0.01ms !important;
        scroll-behavior:
            auto !important;
    }
}
/* ==========================================================================
   END OF CBC MASTER CSS
   ========================================================================== */
.koushik_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        #9b6428 0%,
        #d9a441 25%,
        #ffe0a3 50%,
        #d9a441 75%,
        #9b6428 100%
    );
    opacity: 0.95;
}