/*@import "etc.scss";*/
/*--------------------- General Color Start ----------------------*/
body, #page-content {
  background: #f5f5f5; }

#wrapper, #sidebar, .metismenu {
  background: #212529; }

/*---------------------- General Color End -----------------------*/
/*--------------------- Start blue ----------------------*/
.theme-blue.sidebar-collapse .metismenu li.conditional-bg > a {
  background: #2a94ee;
  color: #fff; }

.theme-blue .spinner {
  border: 3px solid #2a94ee;
  border-left: 3px solid #ccc; }
.theme-blue .grid-example {
  border: 1px solid #2a94ee; }
.theme-blue .double-bounce1, .theme-blue .double-bounce2, .theme-blue .scaleout, .theme-blue .bounces > div, .theme-blue .folding-cube .cube:before,
.theme-blue .header-right,
.theme-blue .metismenu a.current, .theme-blue .metismenu a:hover, .theme-blue .metismenu a:focus, .theme-blue .metismenu a:active {
  background: #2a94ee; }
.theme-blue .pagination > .active > a, .theme-blue .pagination > .active > a:focus, .theme-blue .pagination > .active > a:hover, .theme-blue .pagination > .active > span, .theme-blue .pagination > .active > span:focus, .theme-blue .pagination > .active > span:hover {
  background-color: #2a94ee;
  border-color: #2a94ee; }

.bg-blue,
.btn-blue {
  background: #2a94ee; }

/*---------------------- End blue -----------------------*/
/*--------------------- Start red ----------------------*/
.theme-red.sidebar-collapse .metismenu li.conditional-bg > a {
  background: #f55145;
  color: #fff; }

.theme-red .spinner {
  border: 3px solid #f55145;
  border-left: 3px solid #ccc; }
.theme-red .grid-example {
  border: 1px solid #f55145; }
.theme-red .double-bounce1, .theme-red .double-bounce2, .theme-red .scaleout, .theme-red .bounces > div, .theme-red .folding-cube .cube:before,
.theme-red .header-right,
.theme-red .metismenu a.current, .theme-red .metismenu a:hover, .theme-red .metismenu a:focus, .theme-red .metismenu a:active {
  background: #f55145; }
.theme-red .pagination > .active > a, .theme-red .pagination > .active > a:focus, .theme-red .pagination > .active > a:hover, .theme-red .pagination > .active > span, .theme-red .pagination > .active > span:focus, .theme-red .pagination > .active > span:hover {
  background-color: #f55145;
  border-color: #f55145; }

.bg-red,
.btn-red {
  background: #f55145; }

/*---------------------- End red -----------------------*/
/*--------------------- Start green ----------------------*/
.theme-green.sidebar-collapse .metismenu li.conditional-bg > a {
  background: #53a96b;
  color: #fff; }

.theme-green .spinner {
  border: 3px solid #53a96b;
  border-left: 3px solid #ccc; }
.theme-green .grid-example {
  border: 1px solid #53a96b; }
.theme-green .double-bounce1, .theme-green .double-bounce2, .theme-green .scaleout, .theme-green .bounces > div, .theme-green .folding-cube .cube:before,
.theme-green .header-right,
.theme-green .metismenu a.current, .theme-green .metismenu a:hover, .theme-green .metismenu a:focus, .theme-green .metismenu a:active {
  background: #53a96b; }
.theme-green .pagination > .active > a, .theme-green .pagination > .active > a:focus, .theme-green .pagination > .active > a:hover, .theme-green .pagination > .active > span, .theme-green .pagination > .active > span:focus, .theme-green .pagination > .active > span:hover {
  background-color: #53a96b;
  border-color: #53a96b; }

.bg-green,
.btn-green {
  background: #53a96b; }

/*---------------------- End green -----------------------*/
/*--------------------- Start orange ----------------------*/
.theme-orange.sidebar-collapse .metismenu li.conditional-bg > a {
  background: #ffbd15;
  color: #fff; }

.theme-orange .spinner {
  border: 3px solid #ffbd15;
  border-left: 3px solid #ccc; }
.theme-orange .grid-example {
  border: 1px solid #ffbd15; }
.theme-orange .double-bounce1, .theme-orange .double-bounce2, .theme-orange .scaleout, .theme-orange .bounces > div, .theme-orange .folding-cube .cube:before,
.theme-orange .header-right,
.theme-orange .metismenu a.current, .theme-orange .metismenu a:hover, .theme-orange .metismenu a:focus, .theme-orange .metismenu a:active {
  background: #ffbd15; }
.theme-orange .pagination > .active > a, .theme-orange .pagination > .active > a:focus, .theme-orange .pagination > .active > a:hover, .theme-orange .pagination > .active > span, .theme-orange .pagination > .active > span:focus, .theme-orange .pagination > .active > span:hover {
  background-color: #ffbd15;
  border-color: #ffbd15; }

.bg-orange,
.btn-orange {
  background: #ffbd15; }

/*---------------------- End orange -----------------------*/
/*--------------------- Start purple ----------------------*/
.theme-purple.sidebar-collapse .metismenu li.conditional-bg > a {
  background: #c450d8;
  color: #fff; }

.theme-purple .spinner {
  border: 3px solid #c450d8;
  border-left: 3px solid #ccc; }
.theme-purple .grid-example {
  border: 1px solid #c450d8; }
.theme-purple .double-bounce1, .theme-purple .double-bounce2, .theme-purple .scaleout, .theme-purple .bounces > div, .theme-purple .folding-cube .cube:before,
.theme-purple .header-right,
.theme-purple .metismenu a.current, .theme-purple .metismenu a:hover, .theme-purple .metismenu a:focus, .theme-purple .metismenu a:active {
  background: #c450d8; }
.theme-purple .pagination > .active > a, .theme-purple .pagination > .active > a:focus, .theme-purple .pagination > .active > a:hover, .theme-purple .pagination > .active > span, .theme-purple .pagination > .active > span:focus, .theme-purple .pagination > .active > span:hover {
  background-color: #c450d8;
  border-color: #c450d8; }

.bg-purple,
.btn-purple {
  background: #c450d8; }

/*---------------------- End purple -----------------------*/
/*--------------------- Start deeporange ----------------------*/
.theme-deeporange.sidebar-collapse .metismenu li.conditional-bg > a {
  background: #ff8a65;
  color: #fff; }

.theme-deeporange .spinner {
  border: 3px solid #ff8a65;
  border-left: 3px solid #ccc; }
.theme-deeporange .grid-example {
  border: 1px solid #ff8a65; }
.theme-deeporange .double-bounce1, .theme-deeporange .double-bounce2, .theme-deeporange .scaleout, .theme-deeporange .bounces > div, .theme-deeporange .folding-cube .cube:before,
.theme-deeporange .header-right,
.theme-deeporange .metismenu a.current, .theme-deeporange .metismenu a:hover, .theme-deeporange .metismenu a:focus, .theme-deeporange .metismenu a:active {
  background: #ff8a65; }
.theme-deeporange .pagination > .active > a, .theme-deeporange .pagination > .active > a:focus, .theme-deeporange .pagination > .active > a:hover, .theme-deeporange .pagination > .active > span, .theme-deeporange .pagination > .active > span:focus, .theme-deeporange .pagination > .active > span:hover {
  background-color: #ff8a65;
  border-color: #ff8a65; }

.bg-deeporange,
.btn-deeporange {
  background: #ff8a65; }

/*---------------------- End deeporange -----------------------*/
/*--------------------- Start rose ----------------------*/
.theme-rose.sidebar-collapse .metismenu li.conditional-bg > a {
  background: #e91e63;
  color: #fff; }

.theme-rose .spinner {
  border: 3px solid #e91e63;
  border-left: 3px solid #ccc; }
.theme-rose .grid-example {
  border: 1px solid #e91e63; }
.theme-rose .double-bounce1, .theme-rose .double-bounce2, .theme-rose .scaleout, .theme-rose .bounces > div, .theme-rose .folding-cube .cube:before,
.theme-rose .header-right,
.theme-rose .metismenu a.current, .theme-rose .metismenu a:hover, .theme-rose .metismenu a:focus, .theme-rose .metismenu a:active {
  background: #e91e63; }
.theme-rose .pagination > .active > a, .theme-rose .pagination > .active > a:focus, .theme-rose .pagination > .active > a:hover, .theme-rose .pagination > .active > span, .theme-rose .pagination > .active > span:focus, .theme-rose .pagination > .active > span:hover {
  background-color: #e91e63;
  border-color: #e91e63; }

.bg-rose,
.btn-rose {
  background: #e91e63; }

/*---------------------- End rose -----------------------*/
/*--------------------- Start cyan ----------------------*/
.theme-cyan.sidebar-collapse .metismenu li.conditional-bg > a {
  background: #13a2a6;
  color: #fff; }

.theme-cyan .spinner {
  border: 3px solid #13a2a6;
  border-left: 3px solid #ccc; }
.theme-cyan .grid-example {
  border: 1px solid #13a2a6; }
.theme-cyan .double-bounce1, .theme-cyan .double-bounce2, .theme-cyan .scaleout, .theme-cyan .bounces > div, .theme-cyan .folding-cube .cube:before,
.theme-cyan .header-right,
.theme-cyan .metismenu a.current, .theme-cyan .metismenu a:hover, .theme-cyan .metismenu a:focus, .theme-cyan .metismenu a:active {
  background: #13a2a6; }
.theme-cyan .pagination > .active > a, .theme-cyan .pagination > .active > a:focus, .theme-cyan .pagination > .active > a:hover, .theme-cyan .pagination > .active > span, .theme-cyan .pagination > .active > span:focus, .theme-cyan .pagination > .active > span:hover {
  background-color: #13a2a6;
  border-color: #13a2a6; }

.bg-cyan,
.btn-cyan {
  background: #13a2a6; }

/*---------------------- End cyan -----------------------*/
/*--------------------- Start lime ----------------------*/
.theme-lime.sidebar-collapse .metismenu li.conditional-bg > a {
  background: #90ca4b;
  color: #fff; }

.theme-lime .spinner {
  border: 3px solid #90ca4b;
  border-left: 3px solid #ccc; }
.theme-lime .grid-example {
  border: 1px solid #90ca4b; }
.theme-lime .double-bounce1, .theme-lime .double-bounce2, .theme-lime .scaleout, .theme-lime .bounces > div, .theme-lime .folding-cube .cube:before,
.theme-lime .header-right,
.theme-lime .metismenu a.current, .theme-lime .metismenu a:hover, .theme-lime .metismenu a:focus, .theme-lime .metismenu a:active {
  background: #90ca4b; }
.theme-lime .pagination > .active > a, .theme-lime .pagination > .active > a:focus, .theme-lime .pagination > .active > a:hover, .theme-lime .pagination > .active > span, .theme-lime .pagination > .active > span:focus, .theme-lime .pagination > .active > span:hover {
  background-color: #90ca4b;
  border-color: #90ca4b; }

.bg-lime,
.btn-lime {
  background: #90ca4b; }

/*---------------------- End lime -----------------------*/
/*--------------------- Start darkorange ----------------------*/
.theme-darkorange.sidebar-collapse .metismenu li.conditional-bg > a {
  background: #ee7825;
  color: #fff; }

.theme-darkorange .spinner {
  border: 3px solid #ee7825;
  border-left: 3px solid #ccc; }
.theme-darkorange .grid-example {
  border: 1px solid #ee7825; }
.theme-darkorange .double-bounce1, .theme-darkorange .double-bounce2, .theme-darkorange .scaleout, .theme-darkorange .bounces > div, .theme-darkorange .folding-cube .cube:before,
.theme-darkorange .header-right,
.theme-darkorange .metismenu a.current, .theme-darkorange .metismenu a:hover, .theme-darkorange .metismenu a:focus, .theme-darkorange .metismenu a:active {
  background: #ee7825; }
.theme-darkorange .pagination > .active > a, .theme-darkorange .pagination > .active > a:focus, .theme-darkorange .pagination > .active > a:hover, .theme-darkorange .pagination > .active > span, .theme-darkorange .pagination > .active > span:focus, .theme-darkorange .pagination > .active > span:hover {
  background-color: #ee7825;
  border-color: #ee7825; }

.bg-darkorange,
.btn-darkorange {
  background: #ee7825; }

/*---------------------- End darkorange -----------------------*/
/*--------------------- Start negin ----------------------*/
.theme-negin.sidebar-collapse .metismenu li.conditional-bg > a {
  background: #6b7280;
  color: #fff; }

.theme-negin .spinner {
  border: 3px solid #6b7280;
  border-left: 3px solid #ccc; }
.theme-negin .grid-example {
  border: 1px solid #6b7280; }
.theme-negin .double-bounce1, .theme-negin .double-bounce2, .theme-negin .scaleout, .theme-negin .bounces > div, .theme-negin .folding-cube .cube:before,
.theme-negin .header-right,
.theme-negin .metismenu a.current, .theme-negin .metismenu a:hover, .theme-negin .metismenu a:focus, .theme-negin .metismenu a:active {
  background: #6b7280; }
.theme-negin .pagination > .active > a, .theme-negin .pagination > .active > a:focus, .theme-negin .pagination > .active > a:hover, .theme-negin .pagination > .active > span, .theme-negin .pagination > .active > span:focus, .theme-negin .pagination > .active > span:hover {
  background-color: #6b7280;
  border-color: #6b7280; }

.bg-negin,
.btn-negin {
  background: #6b7280; }

/*---------------------- End negin -----------------------*/

/* Modernized palette layer */

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-soft: #f1f5f9;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;

  --sidebar: #212529;
  --sidebar-soft: #2b3035;

  --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);

  --radius-sm: 12px;
  --radius-md: 16px;

  /* Brand defaults */
  --brand: #6b7280;
  --brand-dark: #4b5563;
  --brand-soft: rgba(107, 114, 128, 0.14);

  /* Status colors */
  --success: #53a96b;
  --danger: #f55145;
  --info: #2a94ee;
  --warning: #d4a017;
}

body,
#page-content {
  background: var(--bg);
  color: var(--text);
}

#wrapper,
#sidebar,
.metismenu {
  background: var(--sidebar);
}

/* General surfaces */
.header-right,
.card,
.panel,
.box {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Make the top area lighter and cleaner */
.header-right {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

/* Sidebar polish */
.metismenu {
  padding-top: 10px;
}

.metismenu a {
  color: rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-sm);
  margin: 4px 10px;
  padding: 11px 14px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.metismenu a:hover,
.metismenu a:focus,
.metismenu a:active {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.metismenu a.current {
  background: var(--brand-soft);
  color: var(--brand);
  border-right: 3px solid var(--brand);
}

.sidebar-collapse .metismenu li.conditional-bg > a {
  background: var(--brand);
  color: #ffffff;
}

/* Buttons and colored utility backgrounds */
.btn-negin,
.bg-negin,
.btn-orange,
.bg-orange {
  color: #ffffff;
}

/* Optional modern card style for dashboard modules */
.module-card,
.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.module-card:hover,
.dashboard-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(107, 114, 128, 0.22);
}

/* Icon badges inside cards */
.icon-box,
.module-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand);
}

/* Inputs */
input,
select,
textarea {
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  border-radius: 10px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.12);
  outline: none;
}

/* Pagination */
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* Spinner and helper elements */
.spinner {
  border: 3px solid var(--brand);
  border-left: 3px solid #d1d5db;
}

.grid-example {
  border: 1px solid var(--brand);
}

.double-bounce1,
.double-bounce2,
.scaleout,
.bounces > div,
.folding-cube .cube:before {
  background: var(--brand);
}


/* theme-negin - corporate gray */
.theme-negin {
  --brand: #6b7280;
  --brand-dark: #4b5563;
  --brand-soft: rgba(107, 114, 128, 0.14);
}


.theme-negin .metismenu a.current {
  background: rgba(107, 114, 128, 0.16);
  color: #e5e7eb;
  border-right: 3px solid #9ca3af;
}

.theme-negin .btn-negin,
.theme-negin .bg-negin {
  background: #6b7280;
}
/* theme-orange - refined gold instead of harsh yellow */
.theme-orange {
  --brand: #d4a017;
  --brand-dark: #b2860f;
  --brand-soft: rgba(212, 160, 23, 0.14);
}

.theme-orange .header-right {
  background: #ffffff;
}

.theme-orange .metismenu a.current {
  background: rgba(212, 160, 23, 0.16);
  color: #ffd76a;
  border-right: 3px solid #d4a017;
}

.theme-orange .metismenu a:hover,
.theme-orange .metismenu a:focus,
.theme-orange .metismenu a:active {
  background: rgba(212, 160, 23, 0.08);
  color: #ffffff;
}

.theme-orange .btn-orange,
.theme-orange .bg-orange {
  background: #d4a017;
}

/* Custom DataTable Style */
.table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 4px !important; /* ایجاد فاصله جزئی بین ردیف‌ها */
    border: none !important;
}

.table.dataTable thead th {
    background: #fdfdfd !important;
    border-bottom: 2px solid #eee !important;
	border-top: 2px solid #eee !important;
    color: #555 !important;
    text-align: center !important;
}

.table.dataTable tbody tr {
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    border-radius: 8px;
}

.table.dataTable tbody td {
    /*background: #fff;*/
    /*border: none !important;*/
    padding: 14px 10px !important;
    font-size: 13px;
}

/* گرد کردن گوشه‌های ردیف اول و آخر برای حس مدرن */
.table.dataTable tbody tr td:first-child { border-radius: 0 8px 8px 0; }
.table.dataTable tbody tr td:last-child { border-radius: 8px 0 0 8px; }

/* استایل آیکون‌های وضعیت (Badge) */
.badge-status {
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 11px;
}

/* تغییر رنگ دکمه ویرایش به حالت مدرن */
.btn-edit-custom {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    border-radius: 6px;
    font-size: 12px;
    padding: 4px 12px;
}
.btn-edit-custom:hover {
    background-color: var(--brand-soft);
    color: var(--brand);
    border-color: var(--brand);
}
.btn-edit-custom-add {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    border-radius: 6px;
    font-size: 12px;
    padding: 4px 12px;
}
.btn-edit-custom-add:hover {
    background-color: var(--brand-soft);
    color: var(--brand);
    border-color: var(--brand);
}