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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Inter,Arial,sans-serif;
    background:#f5f5f5;
    color:#222;
}

.main-wrapper{
    display:flex;
    min-height:100vh;
}

/* ====================================
   SIDEBAR
==================================== */

.sidebar{
    width:260px;
    background:#1f1d1a;
    color:#fff;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    overflow-y:auto;
    transition:.3s;
    box-shadow:4px 0 20px rgba(0,0,0,.15);
}

.sidebar-header{
    padding:25px 20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.sidebar-logo{
    width:55px;
    height:55px;
    background:#c6811b;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sidebar-logo svg{
    width:26px;
    height:26px;
}

.sidebar-header h2{
    color:#fff;
    font-size:18px;
}

.sidebar-header p{
    color:#999 !important;
    font-size:12px;
}

/* ====================================
   MENU
==================================== */

.sidebar-menu{
    padding:20px 12px;
}

.sidebar-menu-item{
    margin-bottom:6px;
}

.sidebar-menu-link{
    display:flex;
    align-items:center;
    padding:13px 16px;
    text-decoration:none;
    color:#bdbdbd;
    border-radius:10px;
    transition:.3s;
}

.sidebar-menu-link:hover{
    background:#2d2b28;
    color:#fff;
    border-left:4px solid #d08a20 !important;
    border-radius: 37px;
}
.sidebar-menu-link.active{
    background:#525150 !important;
    color:#fff !important;
    border-left:4px solid #d08a20 !important;
    border-radius: 37px;
}
.sidebar-menu-item.active .sidebar-menu-link{
    background:#525150 !important;
    color:#fff !important;
    border-left:4px solid #d08a20 !important;
    border-radius: 37px;
}
/*.sidebar-menu-item:hover{
    background:#31302d;
    color:#fff;
    border-left:4px solid #d08a20;
}*/
.sidebar-icon-wrapper{
    width:38px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.sidebar-icon{
    width:18px;
    height:18px;
}

.sidebar-text{
    flex:1;
    margin-left:8px;
    font-size:15px;
}

.sidebar-arrow svg{
    width:16px;
    height:16px;
    transition:.3s;
}

.sidebar-menu-item.open .sidebar-arrow{
    transform:rotate(90deg);
}

.sidebar-menu-item:hover {
  background: #525150;
  box-shadow: var(--shadow-sm);
  
/*  border-left:4px solid #d08a20 !important;*/
  border-radius: 27px  !important;
}
.sidebar-menu-item.open > .sidebar-menu-link {
    background: #525150 !important;
    color: #fff !important;
    border-left: 4px solid #d08a20 !important;
    border-radius: 37px;
}

/* Font Awesome / Icon fonts */
.sidebar-menu-item.open > .sidebar-menu-link i,
.sidebar-menu-item.open > .sidebar-menu-link .sidebar-icon {
    color: #fff !important;
}

/* SVG icons */
.sidebar-menu-item.open > .sidebar-menu-link svg,
.sidebar-menu-item.open > .sidebar-menu-link svg path {
    fill: #fff !important;
    color: #fff !important;
}
/* ====================================
   DROPDOWN
==================================== */

.sidebar-dropdown{
    display:none;
    margin-top:8px;
    margin-left:18px;
    border-left:1px solid rgba(255,255,255,.08);
}

.sidebar-menu-item.open .sidebar-dropdown{
    display:block;
}

.sidebar-dropdown a{
    display:block;
    padding:10px 18px;
    color:#bfbfbf;
    text-decoration:none;
    font-size:14px;
    transition:.25s;
}

.sidebar-dropdown a:hover{
    color:#fff;
    background:#2a2826;
}

/* ====================================
   CONTENT AREA
==================================== */

.content-wrapper{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:30px;
}

/* ====================================
   HEADER CARD
==================================== */

.dashboard-header{
    background:#1f1d1a;
    color:#fff;
    border-radius:18px;
    padding:25px;
    margin-bottom:25px;
}

.dashboard-header h3{
    font-size:22px;
}

.dashboard-header p{
    color:#999;
    margin-top:5px;
}

/* ====================================
   STATS
==================================== */

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:20px;
}

.stat-card{
    background:#4b4946;
    color:#fff;
    border-radius:10px;
    padding:18px;
}

.stat-card h5{
    font-size:13px;
    color:#ddd;
}

.stat-card h2{
    margin-top:8px;
    font-size:28px;
}

/* ====================================
   SEARCH BAR
==================================== */

.search-bar{
    background:#fff;
    border-radius:14px;
    padding:18px;
    margin-bottom:25px;
    display:flex;
    gap:10px;
}

.search-bar input{
    flex:1;
    border:1px solid #ddd;
    border-radius:8px;
    padding:12px 15px;
}

.btn-theme{
    background:#c6811b;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:12px 18px;
    cursor:pointer;
}

.btn-theme:hover{
    background:#b77715;
}

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

.table-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
}

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

.table-card th{
    background:#f5f5f5;
    padding:16px;
    text-align:left;
    font-size:14px;
}

.table-card td{
    padding:16px;
    border-top:1px solid #eee;
    font-size:14px;
}

.badge-admin{
    background:#ffe8bf;
    color:#b46c00;
    padding:4px 12px;
    border-radius:20px;
    font-size:12px;
}

.badge-active{
    background:#dcf6d6;
    color:#3a8d2f;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
}

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

.sidebar::-webkit-scrollbar{
    width:6px;
}

.sidebar::-webkit-scrollbar-thumb{
    background:#444;
    border-radius:20px;
}

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

@media(max-width:992px){

.sidebar{
    left:-260px;
}

.sidebar.show{
    left:0;
}

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

.stats-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.stats-grid{
    grid-template-columns:1fr;
}

.search-bar{
    flex-direction:column;
}

}

/* ===========================
   PAGE HEADER
=========================== */

.page-header{
    background:#1f1d1a;
    color:#fff;
    border-radius:18px;
    padding:30px;
    margin-bottom:25px;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
}

.page-header-icon{
    width:58px;
    height:58px;
    background:#c8861b;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.page-header-icon svg{
    width:26px;
    height:26px;
    stroke:#fff;
}

.page-header-title{
    font-size:28px;
    font-weight:700;
    margin:0;
    color:#fff;
}

.page-header-subtitle{
    margin-top:4px;
    color:#bdbdbd;
    font-size:14px;
}

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

.page-header .btn{
    border-radius:10px;
    padding:.7rem 1.2rem;
    font-weight:500;
    transition:.25s;
}

.page-header .btn:first-child{
    background:#c8861b;
    color:#fff;
    border:none;
}

.page-header .btn:first-child:hover{
    background:#b97817;
}

.page-header .btn-outline-light,
.page-header a.btn{
    background:transparent;
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
}

.page-header a.btn:hover,
.page-header .btn-outline-light:hover{
    background:rgba(255,255,255,.08);
}

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

.page-header .row>.col-6>div{
    background:#4b4946 !important;
    border-radius:12px;
    padding:18px !important;
    transition:.3s;
}

.page-header .row>.col-6>div:hover{
    transform:translateY(-3px);
}

.page-header .row svg{
    stroke:#d6d6d6;
}

.page-header .small{
    color:#ddd;
}

.page-header .h2{
    font-size:34px;
    margin-top:8px;
    color:#fff;
}

/* ===========================
   CUSTOM CARD
=========================== */

.custom-card{
/*    background:#f7f7f5 !important;*/
    border-radius:16px;
    border:1px solid #ececec;
    box-shadow:0 3px 15px rgba(0,0,0,.05);
    overflow:hidden;
     background: #e4e4e4!important;
}

.custom-card .card-header{
    background:#e4e4e4!important;
    border-bottom:1px solid #eee !important;
}

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

/* ===========================
   SEARCH
=========================== */

.form-control{
    height:48px;
    border-radius:10px;
    border:1px solid #ddd !important;
    box-shadow:none;
}

.form-control:focus{
    border-color:#c8861b !important;
    box-shadow:0 0 0 .15rem rgba(200,134,27,.15);
}

.position-relative svg{
    stroke:#999;
}

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

.btn{
    border-radius:10px;
}

.btn-outline-secondary{
    border:1px solid #ddd !important;
    background:#f5f5f5 !important;
    color:#444;
}

.btn-outline-secondary:hover{
    background:#f5f5f5 !important;
}

/* ===========================
   SWITCH
=========================== */

.form-check-input{
    width:45px;
    height:22px;
    cursor:pointer;
}

.form-check-input:checked{
    background-color:#c8861b;
    border-color:#c8861b;
}

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

.custom-table{
    margin:0;
    background: #FAEEDA !important;
}
.custom-table tbody td:first-child a, .custom-table tbody td{
     background: #f4f4f4 !important;
}
.custom-table thead th{
    background: #f4f4f4 !important;
    color:#777;
    font-size:13px;
    font-weight:600;
    padding:16px 20px;
    border-bottom:1px solid #eee;
    text-transform:uppercase;
    border-bottom: 0.5px solid #e8e7e3 !important;
}

.custom-table tbody td{
    padding:18px 20px;
    vertical-align:middle;
    border-color:#FAEEDA !important;
     border-bottom: 0.5px solid #e8e7e3 !important;
}

.custom-table tbody tr:hover{
    background:#FAEEDA !important;
}

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

.badge-admin{
    background:#fdecc8;
    color:#b46a00;
    padding:4px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.badge-active{
    background:#dff7d7;
    color:#2e8b3c;
    padding:4px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

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

@media(max-width:991px){

.page-header{
    padding:20px;
}

.page-header-title{
    font-size:22px;
}

.page-header .d-flex.justify-content-between{
    flex-direction:column;
    align-items:flex-start!important;
    gap:20px;
}

.page-header .btn{
    width:100%;
}

}



.table-responsive{
    background:var(--table-bg);
}

.custom-table{
    width:100%;
    border-collapse:collapse;
    margin:0;
    background:#fff;
}

.custom-table thead th{
    background:var(--table-head);
    color:var(--table-head-text);
    font-size:12px;
    text-transform:uppercase;
    font-weight:600;
    letter-spacing:.5px;
    padding:15px 18px;
    border-bottom:1px solid var(--table-border);
}

.custom-table tbody td{
    padding:16px 18px;
    color:var(--table-text);
    border-bottom:1px solid var(--table-border);
    vertical-align:middle;
    font-size:14px;
}

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

.custom-table tbody tr:last-child td{
    border-bottom:none;
}

/* User ID */

.custom-table tbody td:first-child a,
.custom-table tbody td:first-child{
    color:var(--table-link);
    font-weight:600;
    text-decoration:none;
}

/* Admin Badge */

.badge-admin{
    display:inline-block;
    background:var(--admin-bg);
    color:var(--admin-text);
    padding:4px 12px;
    border-radius:30px;
    font-size:11px;
    font-weight:700;
}

/* Active Badge */

.badge-active{
    display:inline-block;
    background:var(--active-bg);
    color:var(--active-text);
    padding:4px 12px;
    border-radius:30px;
    font-size:11px;
    font-weight:700;
}

/* Modify Link */

.custom-table .modify-link{
    color:var(--table-link);
    text-decoration:none;
    font-weight:600;
}

.custom-table .modify-link:hover{
    color:#b64521;
}


.table-responsive{
    background:var(--table-bg);
}

.custom-table{
    width:100%;
    border-collapse:collapse;
    margin:0;
    background:#fff;
}

.custom-table thead th{
    background:var(--table-head);
    color:var(--table-head-text);
    font-size:12px;
    text-transform:uppercase;
    font-weight:600;
    letter-spacing:.5px;
    padding:15px 18px;
    border-bottom:1px solid var(--table-border);
}

.custom-table tbody td{
    padding:16px 18px;
    color:var(--table-text);
    border-bottom:1px solid var(--table-border);
    vertical-align:middle;
    font-size:14px;
}

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

.custom-table tbody tr:last-child td{
    border-bottom:none;
}

/* User ID */

.custom-table tbody td:first-child a,
.custom-table tbody td:first-child{
    color:var(--table-link);
    font-weight:600;
    text-decoration:none;
}

/* Admin Badge */

.badge-admin{
    display:inline-block;
    background:var(--admin-bg);
    color:var(--admin-text);
    padding:4px 12px;
    border-radius:30px;
    font-size:11px;
    font-weight:700;
}

/* Active Badge */

.badge-active{
    display:inline-block;
    background:var(--active-bg);
    color:var(--active-text);
    padding:4px 12px;
    border-radius:30px;
    font-size:11px;
    font-weight:700;
}

/* Modify Link */

.custom-table .modify-link{
    color:var(--table-link);
    text-decoration:none;
    font-weight:600;
}

.custom-table .modify-link:hover{
    color:#b64521;
}
.btn-primary-custom{
    background:var(--primary);
    color:var(--primary-text);
    border:none;
    border-radius:10px;
}

.btn-primary-custom:hover{
    background:#a86915;
    color:var(--primary-text);
}
.rounded {
        background: #d3d3d3 !important;
    border: none;
}
.d-flex.align-items-center.justify-content-center {
    background: #c8861b !important;
    border-radius: 14px !important;
    width: 32px !important;
    height: 32px !important;
}