/* Components — Bootstrap's own classes, redrawn on tokens.css. */

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

/* The old template wrote `shadow-none` on nearly every card; on the grey page
   that left a white box with only a hairline to hold it. A card keeps its lift. */
.page-content .card.shadow-none {
    box-shadow: var(--shadow-xs) !important;
}

.card-header {
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}

.card-header:first-child {
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}

.card-body {
    padding: var(--space-4);
}

.card-footer {
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-muted);
    border-top: 1px solid var(--color-border);
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
}

.card-title {
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.dropdown-menu {
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
    font-size: var(--text-sm);
}

.dropdown-item {
    padding: var(--space-1-5) var(--space-2);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}

.offcanvas-end {
    --bs-offcanvas-width: 300px;
}

/* Background Colors */

.bg-primary {
    background-color: var(--color-accent) !important;
}

.bg-danger {
    background-color: var(--color-danger) !important;
}

.bg-success {
    background-color: var(--color-success) !important;
}

.bg-info {
    background-color: var(--color-info) !important;
}

.bg-warning {
    background-color: var(--color-warning) !important;
}

.bg-purple {
    background-color: #8932ff!important;
}

.bg-orange {
    background-color: #ff6632!important;
}

.bg-bronze {
    background-color: #cc7429!important;
}

.bg-pink {
    background-color: #e72e7a!important;
}

.bg-tiffany {
    background-color: var(--color-accent)!important;
}

.bg-login {

	background-color: #0259e6!important;

}

.bg-surface {
	background-color: #f7f8fa !important;
}

.bg-white-1 {
    background-color: rgba(255, 255, 255, 0.16)!important;
}


.bg-light-primary {
    background-color: rgba(52, 96, 255, 0.22)!important;
}

.bg-light-success {
    background-color: rgb(18 191 35 / 22%)!important;
}

.bg-light-danger {
    background-color: rgb(231 46 46 / 22%)!important;
}

.bg-light-info {
    background-color: rgba(50, 190, 255, 0.22)!important;
}

.bg-light-warning {
    background-color: rgba(255, 204, 50, 0.22)!important;
}

.bg-light-purple {
    background-color: rgba(135, 50, 255, 0.22)!important;
}

.bg-light-orange {
    background-color: rgba(255, 101, 50, 0.22)!important;
}

.bg-light-bronze {
    background-color: rgba(204, 117, 41, 0.22)!important;
}

.bg-light-pink {
    background-color: rgba(231, 46, 123, 0.22)!important;
}

.bg-light-tiffany {
    background-color: rgba(51, 99, 255, 0.22)!important;
}

.bg-light-dark {
    background-color: rgba(33, 37, 41, 0.22)!important;
}


.bg-facebook {
	background-color: #3b5998!important
}

.bg-twitter {
	background-color: #55acee!important
}

.bg-google {
	background-color: #e52d27!important
}

.bg-linkedin {
	background-color: #0976b4!important
}


.bg-gradient-purple {
	background-image: linear-gradient(310deg,#7928ca,#ff0080);
}


.bg-gradient-success {
	background-image: linear-gradient( 310deg,#17ad37,#98ec2d);
}


.bg-gradient-danger {
	background: linear-gradient(to right, rgb(238, 9, 121), rgb(255, 106, 0));
}


.bg-gradient-info {
	background-image: linear-gradient(to top, rgb(0, 198, 251) 0%, rgb(0, 91, 234) 100%);
}

.bg-gradient-warning {
	background: linear-gradient(to right, rgb(247, 151, 30), rgb(255, 210, 0));
}


.bg-gradient-voilet {
	background: linear-gradient(to right, rgb(52, 148, 230), rgb(236, 110, 173));
}


.bg-gradient-royal {
	background-image: linear-gradient(-20deg, rgb(43, 88, 118) 0%, rgb(78, 67, 118) 100%);
}


/* Text Colors */

.text-primary {
    color: var(--color-accent) !important;
}

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

.text-success {
    color: var(--color-success) !important;
}

.text-info {
    color: var(--color-info) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-purple {
    color: #8932ff!important;
}

.text-orange {
    color: #ff6632!important;
}

.text-bronze {
    color: #cc7429!important;
}

.text-pink {
    color: #e72e7a!important;
}

.text-tiffany {
    color: var(--color-accent)!important;
}


.text-option{
	color: #32393f!important
 }

.text-facebook{
	color: #3b5998!important
 }

 .text-twitter{
	 color: #55acee!important
  }

  .text-youtube{
	 color: #e52d27!important
  }

.text-sky-light {
    color: #b4d2ff;
}


/* Borders */

.border-primary {
    border-color: var(--color-accent) !important;
}

.border-danger {
    border-color: var(--color-danger) !important;
}

.border-success {
    border-color: var(--color-success) !important;
}

.border-info {
    border-color: var(--color-info) !important;
}

.border-warning {
    border-color: var(--color-warning) !important;
}

.border-purple {
    border-color: #8932ff!important;
}

.border-orange {
    border-color: #ff6632!important;
}

.border-bronze {
    border-color: #cc7429!important;
}

.border-pink {
    border-color: #e72e7a!important;
}

.border-tiffany {
    border-color: var(--color-accent)!important;
}

.border-light-1 {
    border-color: rgb(255 255 255 / 24%)!important;
}

/* Buttons
 *
 * One shape for every button: 32px tall (28 small, 36 large), 6px corners,
 * 13px medium text, an icon gap of 6px and the one focus ring. Primary,
 * success, danger and dark are solid; warning and info are soft, because on a
 * register they are row actions (edit, view) repeated down the page and a
 * column of solid amber shouts. Secondary and every outline are white.
 */

.btn {
    --btn-bg: var(--color-surface);
    --btn-border: var(--color-border-strong);
    --btn-color: var(--color-text);
    --btn-hover-bg: var(--color-surface-hover);
    --btn-hover-border: var(--color-border-strong);
    --btn-hover-color: var(--color-text);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    min-height: var(--control-height);
    padding: var(--space-1) var(--space-3);
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    color: var(--btn-color);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    white-space: nowrap;
    box-shadow: none;
    transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.btn:hover,
.btn-check:checked + .btn,
.btn.active,
.btn:active,
.show > .btn.dropdown-toggle {
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
    color: var(--btn-hover-color);
}

/* Bootstrap 5.0 paints :focus and :disabled in its own blue at the same
   specificity as the hover rule above; both states read the variables. */
.btn:focus,
.btn:focus-visible,
.btn-check:focus + .btn {
    background-color: var(--btn-bg);
    border-color: var(--btn-border);
    color: var(--btn-color);
    outline: 0;
    box-shadow: var(--focus-ring);
}

.btn:focus:hover,
.btn:active:focus,
.btn.active:focus,
.btn-check:checked + .btn:focus,
.show > .btn.dropdown-toggle:focus {
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
    color: var(--btn-hover-color);
    box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    background-color: var(--btn-bg);
    border-color: var(--btn-border);
    color: var(--btn-color);
    opacity: 0.5;
    pointer-events: none;
}

.btn i,
.btn .bi,
.btn .bx {
    margin: 0;
    font-size: 1.08em;
    line-height: 1;
    vertical-align: middle;
}

.btn > .me-1,
.btn > .me-2,
.btn > .ms-1,
.btn > .ms-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.btn-sm,
.btn-group-sm > .btn {
    min-height: var(--control-height-sm);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
}

.btn-lg,
.btn-group-lg > .btn {
    min-height: var(--control-height-lg);
    padding: var(--space-1-5) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.btn-xs {
    min-height: 24px;
    padding: 0 var(--space-1-5);
    font-size: var(--text-2xs);
}

/* Solid */
.btn-primary {
    --btn-bg: var(--color-accent);
    --btn-border: var(--color-accent);
    --btn-color: var(--color-text-inverse);
    --btn-hover-bg: var(--color-accent-hover);
    --btn-hover-border: var(--color-accent-hover);
    --btn-hover-color: var(--color-text-inverse);
    box-shadow: var(--shadow-xs);
}

.btn-success {
    --btn-bg: var(--color-success);
    --btn-border: var(--color-success);
    --btn-color: var(--color-text-inverse);
    --btn-hover-bg: var(--color-success-hover);
    --btn-hover-border: var(--color-success-hover);
    --btn-hover-color: var(--color-text-inverse);
    box-shadow: var(--shadow-xs);
}

.btn-danger {
    --btn-bg: var(--color-danger);
    --btn-border: var(--color-danger);
    --btn-color: var(--color-text-inverse);
    --btn-hover-bg: var(--color-danger-hover);
    --btn-hover-border: var(--color-danger-hover);
    --btn-hover-color: var(--color-text-inverse);
    box-shadow: var(--shadow-xs);
}

.btn-dark {
    --btn-bg: var(--gray-900);
    --btn-border: var(--gray-900);
    --btn-color: var(--color-text-inverse);
    --btn-hover-bg: var(--gray-700);
    --btn-hover-border: var(--gray-700);
    --btn-hover-color: var(--color-text-inverse);
}

/* Soft */
.btn-warning {
    --btn-bg: var(--color-warning-soft);
    --btn-border: var(--color-warning-border);
    --btn-color: var(--color-warning-text);
    --btn-hover-bg: var(--color-warning);
    --btn-hover-border: var(--color-warning);
    --btn-hover-color: var(--color-text-inverse);
}

.btn-info {
    --btn-bg: var(--color-info-soft);
    --btn-border: var(--color-info-border);
    --btn-color: var(--color-info-text);
    --btn-hover-bg: var(--color-info);
    --btn-hover-border: var(--color-info);
    --btn-hover-color: var(--color-text-inverse);
}

/* Neutral */
.btn-secondary,
.btn-white,
.btn-outline-secondary,
.btn-outline-dark {
    --btn-bg: var(--color-surface);
    --btn-border: var(--color-border-strong);
    --btn-color: var(--color-text);
    --btn-hover-bg: var(--color-surface-hover);
    --btn-hover-border: var(--color-border-strong);
    --btn-hover-color: var(--color-text);
    box-shadow: var(--shadow-xs);
}

.btn-light {
    --btn-bg: var(--color-surface-muted);
    --btn-border: var(--color-border);
    --btn-color: var(--color-text-secondary);
    --btn-hover-bg: var(--color-surface-hover);
    --btn-hover-border: var(--color-border-strong);
    --btn-hover-color: var(--color-text);
}

.btn-outline-light {
    --btn-bg: transparent;
    --btn-border: rgb(255 255 255 / 0.4);
    --btn-color: var(--color-text-inverse);
    --btn-hover-bg: rgb(255 255 255 / 0.12);
    --btn-hover-border: rgb(255 255 255 / 0.6);
    --btn-hover-color: var(--color-text-inverse);
}

/* Outline — white, tinted text, fills softly on hover. */
.btn-outline-primary {
    --btn-bg: var(--color-surface);
    --btn-border: var(--color-accent-border);
    --btn-color: var(--color-accent);
    --btn-hover-bg: var(--color-accent-soft);
    --btn-hover-border: var(--color-accent);
    --btn-hover-color: var(--color-accent-hover);
}

.btn-outline-success {
    --btn-bg: var(--color-surface);
    --btn-border: var(--color-success-border);
    --btn-color: var(--color-success-text);
    --btn-hover-bg: var(--color-success-soft);
    --btn-hover-border: var(--color-success);
    --btn-hover-color: var(--color-success-text);
}

.btn-outline-danger {
    --btn-bg: var(--color-surface);
    --btn-border: var(--color-danger-border);
    --btn-color: var(--color-danger-text);
    --btn-hover-bg: var(--color-danger-soft);
    --btn-hover-border: var(--color-danger);
    --btn-hover-color: var(--color-danger-text);
}

.btn-outline-warning {
    --btn-bg: var(--color-surface);
    --btn-border: var(--color-warning-border);
    --btn-color: var(--color-warning-text);
    --btn-hover-bg: var(--color-warning-soft);
    --btn-hover-border: var(--color-warning);
    --btn-hover-color: var(--color-warning-text);
}

.btn-outline-info {
    --btn-bg: var(--color-surface);
    --btn-border: var(--color-info-border);
    --btn-color: var(--color-info-text);
    --btn-hover-bg: var(--color-info-soft);
    --btn-hover-border: var(--color-info);
    --btn-hover-color: var(--color-info-text);
}

.btn-link {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-color: var(--color-accent);
    --btn-hover-bg: transparent;
    --btn-hover-border: transparent;
    --btn-hover-color: var(--color-accent-hover);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-close:focus {
    box-shadow: var(--focus-ring);
}

.btn-group > .btn {
    box-shadow: none;
}

/* A register row's labelled More toggle. It leaves `btn` off on purpose, so
   style.css's 28px icon box cannot crop its label (AppDropdownTest), and
   Bootstrap then drew it as a solid gray block. It is a small neutral button. */
.dropdown-toggle.btn-sm:not(.btn) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 24px;
    padding: 0 var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.dropdown-toggle.btn-sm:not(.btn).text-white {
    color: var(--color-text-secondary) !important;
}

.dropdown-toggle.btn-sm:not(.btn):hover,
.dropdown-toggle.btn-sm:not(.btn):focus,
.dropdown-toggle.btn-sm:not(.btn).show {
    background-color: var(--color-surface-hover);
    border-color: var(--color-border-strong);
    color: var(--color-text);
    box-shadow: var(--focus-ring);
}

/* ------------------------------------------------ Legacy text-white on soft
 *
 * 113 row Edit buttons read `btn btn-warning` around `<i class="… text-white">`
 * — white on the old solid amber. Warning, info, light and every neutral
 * button are soft now, so a white icon inside one would vanish. The icon and
 * the label take the button's own colour instead. */

.btn-warning.text-white,
.btn-info.text-white,
.btn-light.text-white,
.btn-secondary.text-white,
.btn-outline-secondary.text-white {
    color: var(--btn-color) !important;
}

.btn-warning.text-white:hover,
.btn-info.text-white:hover,
.btn-light.text-white:hover,
.btn-secondary.text-white:hover,
.btn-outline-secondary.text-white:hover {
    color: var(--btn-hover-color) !important;
}

.btn-warning .text-white,
.btn-info .text-white,
.btn-light .text-white,
.btn-secondary .text-white,
.btn-outline-secondary .text-white,
.btn-outline-primary .text-white,
.btn-outline-danger .text-white,
.btn-outline-success .text-white {
    color: inherit !important;
}


/* Nav-Tabs */

.nav-search input.form-control {
    background-color: rgb(255 255 255 / 20%);
    border: 1px solid rgb(255 255 255 / 45%);
    color: #fff;
}

.nav-search button[type=submit] {
    background-color: rgb(255 255 255 / 20%);
    border: 1px solid rgb(255 255 255 / 32%);
    color: #fff;
}

.nav-tabs {
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--color-text);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: var(--weight-semibold);
}

.nav-pills {
    gap: var(--space-1);
}

.nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.nav-pills .nav-link:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-accent);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}


.nav-primary.nav-tabs .nav-link.active {
	color: var(--color-accent);
	border-color: var(--color-accent)
}

.nav-danger.nav-tabs .nav-link.active {
	color: #f41127;
	border-color: #f41127 #f41127 #fff
}

.nav-success.nav-tabs .nav-link.active {
	color: #17a00e;
	border-color: #17a00e #17a00e #fff
}

.nav-warning.nav-tabs .nav-link.active {
	color: #ffc107;
	border-color: #ffc107 #ffc107 #fff
}

.nav-pills-danger.nav-pills .nav-link.active {
	color: #fff;
	background-color: #f41127
}

.nav-pills-success.nav-pills .nav-link.active {
	color: #fff;
	background-color: #17a00e
}

.nav-pills-warning.nav-pills .nav-link.active {
	color: #000;
	background-color: #ffc107
}


/* Tables */

.color-table .table {
	color: #ffffff;
	border-color: rgb(255 255 255 / 22%);
}

.info-table .table, .warning-table .table {
	color: #16191d;
	border-color: rgb(0 0 0 / 12%);
}
.card {
    margin-bottom: 0;
}

/* Cards keep one gap between them on every page, --layout-gap (10px): side
   by side in a Bootstrap row, whatever gutter class the row was written
   with, and stacked through the margin utility a view put on the card. */
.page-content .row:not(.g-0):not(.gx-0):has(> [class*="col"] > .card) {
    --bs-gutter-x: var(--layout-gap);
    --bs-gutter-y: var(--layout-gap);
}

.page-content .card.mb-2,
.page-content .card.mb-3,
.page-content .card.mb-4,
.page-content .card.mb-5 {
    margin-bottom: var(--layout-gap) !important;
}

.page-content .card.mt-2,
.page-content .card.mt-3,
.page-content .card.mt-4,
.page-content .card.mt-5 {
    margin-top: var(--layout-gap) !important;
}

/* =============================================
   CSS Grid Utilities
   Mobile-first grid system. Base classes apply
   at all sizes, .grid-cols-md-* override at 768px+.
   Compose: class="grid-wrapper grid-cols-2 grid-cols-md-4-auto"
   ============================================= */

.grid-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--layout-gap);
}

.grid-wrapper.gap-lg { gap: var(--space-6); }
.grid-wrapper.gap-sm { gap: var(--space-3); }

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
.grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
.grid-cols-4-auto { grid-template-columns: repeat(4, 1fr) auto; }
.grid-full { grid-column: 1 / -1; }

@media (min-width: 768px) {
    .grid-cols-md-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-md-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-md-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-cols-md-2-1 { grid-template-columns: 2fr 1fr; }
    .grid-cols-md-1-2 { grid-template-columns: 1fr 2fr; }
    .grid-cols-md-4-auto { grid-template-columns: repeat(4, 1fr) auto; }
}

.grid-wrapper > * { min-width: 0; }

/* A wrapper that exists for JavaScript, not for layout: its children become the
   grid items in its place, so tagging a region for partial refresh never adds a
   row or a gap — and an empty region takes no space at all. */
.grid-passthrough { display: contents; }
.grid-wrapper > .grid-passthrough > * { min-width: 0; }