/* =========================================================================
   Premium SaaS admin theme
   -------------------------------------------------------------------------
   A visual layer over the existing Sneat/Bootstrap markup. Nothing here
   changes structure or behaviour - every rule targets classes the templates
   already ship, so scripts, ids and Blade logic keep working untouched.
   Load this stylesheet LAST so it wins over core.css / theme-default.css.
   ========================================================================= */

:root {
    --ui-brand: #6D5DF6;
    --ui-brand-hover: #5B4BE0;
    --ui-brand-active: #4E3FD0;
    --ui-brand-soft: #EEECFE;
    --ui-brand-ring: rgba(109, 93, 246, .22);

    --ui-bg: #F8FAFC;
    --ui-surface: #FFFFFF;
    --ui-border: #E5E7EB;
    --ui-border-strong: #D4D8DE;

    --ui-text: #111827;
    --ui-text-muted: #6B7280;
    --ui-text-subtle: #9CA3AF;

    --ui-success: #10B981;
    --ui-warning: #F59E0B;
    --ui-danger: #EF4444;
    --ui-info: #3B82F6;

    --ui-radius-sm: 10px;
    --ui-radius: 14px;
    --ui-radius-lg: 20px;
    --ui-radius-pill: 999px;

    --ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
    --ui-shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --ui-shadow: 0 4px 16px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
    --ui-shadow-lg: 0 12px 32px rgba(16, 24, 40, .10), 0 2px 8px rgba(16, 24, 40, .05);

    --ui-speed: 200ms;
    --ui-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------- base -- */

html,
body {
    background-color: var(--ui-bg) !important;
}

body,
.menu,
.btn,
.form-control,
.form-select,
.card,
.table,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    color: var(--ui-text);
    font-size: .9375rem;
    letter-spacing: -.005em;
}

h1, h2, h3, h4, h5, h6,
.card-header,
.fw-bold {
    color: var(--ui-text);
    letter-spacing: -.02em;
}

a {
    transition: color var(--ui-speed) var(--ui-ease);
}

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

::selection {
    background: var(--ui-brand-soft);
    color: var(--ui-brand-active);
}

/* Scrollbars kept quiet and on-brand */
* {
    scrollbar-width: thin;
    scrollbar-color: #D8DCE3 transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: #D8DCE3;
    border-radius: var(--ui-radius-pill);
}

*::-webkit-scrollbar-thumb:hover {
    background: #C2C7D0;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* ------------------------------------------------------------- sidebar -- */

.layout-menu,
.bg-menu-theme {
    background-color: var(--ui-surface) !important;
    border-right: 1px solid var(--ui-border);
    box-shadow: none !important;
    transition: transform var(--ui-speed) var(--ui-ease);
}

.menu-inner-shadow {
    display: none !important;
}

.app-brand.demo {
    height: 72px;
    padding: 0 1.25rem;
    margin: 0;
    border-bottom: 1px solid var(--ui-border);
}

.app-brand-text {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: var(--ui-text) !important;
    letter-spacing: -.02em;
}

.app-brand-logo svg {
    width: 26px;
    height: auto;
}

.menu-inner {
    padding: 1rem .75rem !important;
}

.menu-vertical .menu-item {
    margin: 2px 0;
}

.menu-vertical .menu-item .menu-link {
    position: relative;
    margin: 0;
    padding: .625rem .75rem;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-muted) !important;
    font-size: .9063rem;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color var(--ui-speed) var(--ui-ease),
        color var(--ui-speed) var(--ui-ease),
        transform var(--ui-speed) var(--ui-ease);
}

.menu-vertical .menu-item .menu-link:hover {
    background-color: #F4F5F7 !important;
    color: var(--ui-text) !important;
    transform: translateX(2px);
}

.menu-vertical .menu-item.active > .menu-link {
    background-color: var(--ui-brand-soft) !important;
    color: var(--ui-brand-active) !important;
    font-weight: 600;
    box-shadow: none !important;
}

/* The base template paints its own right-edge marker on the <li> and the link;
   both are dropped in favour of the left rail below. */
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle)::after,
.bg-menu-theme .menu-inner > .menu-item.active::before,
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Purple rail on the active item (overrides the template's right-edge marker) */
.menu-vertical .menu-item.active > .menu-link::before,
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: -.75rem !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 20px !important;
    border-radius: 0 var(--ui-radius-pill) var(--ui-radius-pill) 0 !important;
    background: var(--ui-brand) !important;
    box-shadow: none !important;
}

.menu-icon,
.menu-link i,
.menu-link svg {
    width: 20px;
    height: 20px;
    margin-right: .75rem !important;
    font-size: 1.25rem;
    color: currentColor;
    stroke-width: 1.9;
    flex-shrink: 0;
    transition: color var(--ui-speed) var(--ui-ease);
}

.menu-vertical .menu-item.active > .menu-link .menu-icon,
.menu-vertical .menu-item.active > .menu-link svg {
    color: var(--ui-brand) !important;
}

/* Collapsible groups */
.menu-sub {
    padding-left: 1.5rem !important;
}

.menu-sub .menu-link {
    padding-left: .875rem !important;
    font-size: .875rem;
}

.menu-toggle::after {
    transition: transform var(--ui-speed) var(--ui-ease);
}

/* Optional sidebar section heading */
.menu-header {
    padding: .25rem .75rem .5rem;
    margin: 0;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ui-text-subtle);
}

.menu-header::before {
    display: none !important;
}

/* Brand mark */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ui-radius-sm);
    background: linear-gradient(135deg, var(--ui-brand) 0%, #8B7CF8 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(109, 93, 246, .32);
}

.brand-mark svg {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    stroke-width: 2;
}

/* Sidebar footer action, pinned below the menu */
.menu-footer {
    margin-top: auto;
    padding: .75rem;
    border-top: 1px solid var(--ui-border);
}

.menu-logout {
    display: flex;
    align-items: center;
    padding: .625rem .75rem;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-muted) !important;
    font-size: .9063rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--ui-speed) var(--ui-ease),
        color var(--ui-speed) var(--ui-ease);
}

.menu-logout:hover {
    background-color: #FEF2F2;
    color: var(--ui-danger) !important;
}

/* -------------------------------------------------------------- navbar -- */

.layout-navbar,
.layout-navbar.navbar-detached {
    position: sticky !important;
    top: 0;
    z-index: 1080;
    width: 100% !important;
    height: 72px;
    min-height: 72px;
    padding: 0 1.5rem !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--ui-border);
    background-color: rgba(255, 255, 255, .85) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: none !important;
    max-width: none !important;
}

.layout-navbar .navbar-nav-right {
    width: 100%;
    gap: .5rem;
}

/* Reusable search input (used by listing filters, e.g. .card-toolbar) */
.navbar-search {
    position: relative;
    max-width: 340px;
    width: 100%;
}

.navbar-search svg,
.navbar-search i {
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--ui-text-subtle);
    pointer-events: none;
}

.navbar-search .form-control {
    height: 40px;
    padding-left: 2.5rem !important;
    background-color: #F4F5F7 !important;
    border: 1px solid transparent !important;
    border-radius: var(--ui-radius-sm) !important;
    font-size: .875rem;
    box-shadow: none !important;
}

.navbar-search .form-control:focus {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-brand) !important;
    box-shadow: 0 0 0 3px var(--ui-brand-ring) !important;
}

/* Search + actions cluster in a card header */
.card-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
}

.card-toolbar .navbar-search {
    width: 260px;
    max-width: 260px;
}

.card-toolbar .btn {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .card-toolbar {
        flex-wrap: wrap;
        width: 100%;
    }

    .card-toolbar .navbar-search {
        width: 100%;
        max-width: 100%;
    }
}

/* Icon button in the navbar (mobile menu toggle) */
.navbar-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-muted);
    background: transparent;
    border: 1px solid transparent;
    transition: background-color var(--ui-speed) var(--ui-ease),
        color var(--ui-speed) var(--ui-ease),
        border-color var(--ui-speed) var(--ui-ease);
}

.navbar-icon-btn:hover {
    background-color: #F4F5F7;
    border-color: var(--ui-border);
    color: var(--ui-text);
}

.navbar-icon-btn svg,
.navbar-icon-btn i {
    width: 20px;
    height: 20px;
    stroke-width: 1.9;
}

/* Avatar trigger */
.navbar-nav .dropdown-user .nav-link {
    padding: .25rem !important;
    border-radius: var(--ui-radius-pill);
    transition: background-color var(--ui-speed) var(--ui-ease);
}

.navbar-nav .dropdown-user .nav-link:hover {
    background-color: #F4F5F7;
}

.avatar img {
    border: 2px solid var(--ui-surface);
    box-shadow: var(--ui-shadow-xs);
}

/* ------------------------------------------------------------ dropdown -- */

.dropdown-menu {
    padding: .375rem;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    animation: uiDropIn 160ms var(--ui-ease);
}

@keyframes uiDropIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    border-radius: var(--ui-radius-sm);
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--ui-text);
    transition: background-color var(--ui-speed) var(--ui-ease),
        color var(--ui-speed) var(--ui-ease);
}

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

.dropdown-item svg,
.dropdown-item i {
    width: 18px;
    height: 18px;
    stroke-width: 1.9;
}

.dropdown-divider {
    margin: .375rem 0;
    border-color: var(--ui-border);
}

/* ------------------------------------------------------------- content -- */

.content-wrapper {
    background-color: var(--ui-bg);
}

/* Full width: the base template caps .container-xxl at 1320px */
.content-wrapper > .container-xxl {
    padding: 2rem 1.75rem !important;
    max-width: 100% !important;
    width: 100%;
}

.content-wrapper > .container-xxl > *,
.authentication-inner {
    animation: uiFadeUp 300ms var(--ui-ease) both;
}

@keyframes uiFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page heading */
h4.fw-bold.py-3 {
    font-size: 1.5rem;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
    padding-top: 0 !important;
}

/* Title on the left, breadcrumb on the right */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.page-head h4.fw-bold.py-3 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.page-subtitle {
    margin: .125rem 0 0;
    font-size: .9375rem;
    color: var(--ui-text-muted);
}

.page-head .breadcrumb {
    padding-top: .875rem;
}

.welcome-card .card-body {
    padding: 1.75rem 1.5rem;
}

/* --------------------------------------------------------- breadcrumbs -- */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    font-size: .8125rem !important;
    list-style: none;
}

.breadcrumb > li:hover {
    color: inherit;
}

.breadcrumb li + li:before {
    content: "/" !important;
    padding: 0 .5rem !important;
    color: var(--ui-text-subtle) !important;
}

.bread-item {
    color: var(--ui-text-muted);
    font-weight: 500;
    text-decoration: none;
}

.bread-item:hover {
    color: var(--ui-brand) !important;
}

.inactive-bread,
.inactive-bread:hover {
    color: var(--ui-text-subtle);
    font-weight: 500;
}

/* --------------------------------------------------------------- cards -- */

.card {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    transition: box-shadow var(--ui-speed) var(--ui-ease),
        transform var(--ui-speed) var(--ui-ease),
        border-color var(--ui-speed) var(--ui-ease);
}

/* Lift only interactive cards, so static panels stay calm */
.card.card-hover:hover,
a > .card:hover,
.card > a:hover {
    box-shadow: var(--ui-shadow-lg) !important;
    transform: translateY(-2px);
    border-color: #DADEE5 !important;
}

.card-header,
.card > h5.card-header {
    background: transparent;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ui-border);
    font-size: 1rem;
    font-weight: 600;
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-weight: 600;
}

/* Stat tile icon chip */
.card .avatar .menu-icon,
.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ui-radius);
    background: var(--ui-brand-soft);
    color: var(--ui-brand) !important;
    font-size: 1.375rem;
}

/* ------------------------------------------------------------- buttons -- */

.btn {
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--ui-brand-ring);
    border-radius: var(--ui-radius-sm) !important;
    padding: .5625rem 1.125rem;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: -.01em;
    box-shadow: none !important;
    transition: background-color var(--ui-speed) var(--ui-ease),
        border-color var(--ui-speed) var(--ui-ease),
        color var(--ui-speed) var(--ui-ease),
        transform var(--ui-speed) var(--ui-ease),
        box-shadow var(--ui-speed) var(--ui-ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-brand-ring) !important;
}

.btn-primary {
    background-color: var(--ui-brand) !important;
    border-color: var(--ui-brand) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: var(--ui-brand-hover) !important;
    border-color: var(--ui-brand-hover) !important;
    box-shadow: 0 4px 12px rgba(109, 93, 246, .28) !important;
}

.btn-primary:active {
    background-color: var(--ui-brand-active) !important;
}

/* Secondary = white with border */
.btn-secondary,
.btn-outline-secondary,
.btn-light {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-light:hover {
    background-color: #F4F5F7 !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

.btn-success {
    background-color: var(--ui-success) !important;
    border-color: var(--ui-success) !important;
    color: #fff !important;
}

.btn-success:hover {
    background-color: #0EA372 !important;
    border-color: #0EA372 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, .26) !important;
}

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

.btn-danger:hover {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, .26) !important;
}

.btn-outline-primary {
    color: var(--ui-brand) !important;
    border-color: #CFC9FB !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--ui-brand-soft) !important;
    border-color: var(--ui-brand) !important;
    color: var(--ui-brand-active) !important;
}

.btn-outline-info {
    color: var(--ui-info) !important;
    border-color: #BFDBFE !important;
}

.btn-outline-info:hover {
    background-color: #EFF6FF !important;
    border-color: var(--ui-info) !important;
    color: #1D4ED8 !important;
}

.btn-outline-danger {
    color: var(--ui-danger) !important;
    border-color: #FECACA !important;
}

.btn-outline-danger:hover {
    background-color: #FEF2F2 !important;
    border-color: var(--ui-danger) !important;
    color: #B91C1C !important;
}

.btn-outline-success {
    color: var(--ui-success) !important;
    border-color: #A7F3D0 !important;
}

.btn-outline-success:hover {
    background-color: #ECFDF5 !important;
    border-color: var(--ui-success) !important;
    color: #047857 !important;
}

/* Round icon-only action buttons used in table rows */
.btn.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn.rounded-pill,
.btn-icon.rounded-pill {
    border-radius: var(--ui-radius-pill) !important;
}

.btn-sm {
    padding: .375rem .875rem;
    font-size: .8125rem;
}

.btn-lg {
    padding: .75rem 1.5rem;
    font-size: .9375rem;
}

/* -------------------------------------------------------------- forms --- */

.form-label,
.col-form-label {
    margin-bottom: .4375rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: -.005em;
}

.form-control,
.form-select {
    min-height: 42px;
    padding: .5625rem .875rem;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background-color: var(--ui-surface);
    color: var(--ui-text);
    font-size: .875rem;
    box-shadow: var(--ui-shadow-xs);
    transition: border-color var(--ui-speed) var(--ui-ease),
        box-shadow var(--ui-speed) var(--ui-ease),
        background-color var(--ui-speed) var(--ui-ease);
}

.form-control::placeholder {
    color: var(--ui-text-subtle);
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: var(--ui-border-strong) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ui-brand) !important;
    box-shadow: 0 0 0 3px var(--ui-brand-ring) !important;
    background-color: var(--ui-surface);
}

.form-control[readonly] {
    background-color: #F9FAFB;
    color: var(--ui-text-muted);
}

textarea.form-control {
    min-height: 96px;
    line-height: 1.6;
}

.input-group-merge .form-control:not(:last-child) {
    border-right: 0 !important;
}

.input-group-text {
    background-color: #F9FAFB;
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    color: var(--ui-text-muted);
}

.form-text {
    margin-top: .375rem;
    font-size: .8125rem;
    color: var(--ui-text-muted);
}

.text-danger {
    font-size: .8125rem;
}

/* File upload: turn the native control into a modern drop-zone look */
.form-control[type="file"] {
    padding: .5rem .875rem;
    background-color: #F9FAFB;
    border-style: dashed !important;
    border-width: 1.5px !important;
    cursor: pointer;
}

.form-control[type="file"]:hover {
    background-color: var(--ui-brand-soft);
    border-color: var(--ui-brand) !important;
}

.form-control[type="file"]::file-selector-button {
    padding: .375rem .875rem;
    margin-right: .875rem;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-brand);
    color: #fff;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--ui-speed) var(--ui-ease);
}

.form-control[type="file"]::file-selector-button:hover {
    background-color: var(--ui-brand-hover);
}

/* Checkboxes, radios and switches */
.form-check-input {
    border-color: var(--ui-border-strong);
    transition: background-color var(--ui-speed) var(--ui-ease),
        border-color var(--ui-speed) var(--ui-ease),
        box-shadow var(--ui-speed) var(--ui-ease);
}

.form-check-input:checked {
    background-color: var(--ui-brand);
    border-color: var(--ui-brand);
}

.form-check-input:focus {
    border-color: var(--ui-brand);
    box-shadow: 0 0 0 3px var(--ui-brand-ring);
}

.form-switch .form-check-input {
    width: 2.25rem;
    height: 1.25rem;
}

/* Select2, when a page uses it */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 42px;
    padding: .25rem .5rem;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ui-brand) !important;
    box-shadow: 0 0 0 3px var(--ui-brand-ring);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ui-brand) !important;
}

.select2-dropdown {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-lg);
}

/* Groups the uploads that belong to one device, so Phone and iPad artwork
   never get mistaken for each other on the section item form. */
.device-panel {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background-color: var(--ui-bg);
    padding: 1rem;
}

.device-panel-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .875rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid var(--ui-border);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

.device-panel-head i,
.device-panel-head svg {
    color: var(--ui-brand);
}

.device-panel .form-control {
    background-color: var(--ui-surface);
}

/* -------------------------------------------------------------- tables -- */

/* No border here: the surrounding card already draws one */
.table-responsive {
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}

/* The card already draws a border, so nested tables drop theirs */
.card > .table-responsive,
.card-body > .table-responsive {
    border-radius: var(--ui-radius);
}

/* Table that runs edge to edge inside a card, with no card-body gutter */
.card-table .table-responsive {
    border-radius: 0;
}

/* Last block in the card, so it inherits the card's rounded bottom */
.card-table:last-child .table-responsive:last-child {
    border-bottom-left-radius: var(--ui-radius-lg);
    border-bottom-right-radius: var(--ui-radius-lg);
}

.card-table .table-pagination {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--ui-border);
}

.card-table .table-pagination .pagination {
    margin-bottom: 0;
}

.table {
    margin-bottom: 0;
    color: var(--ui-text);
    font-size: .875rem;
    border-color: var(--ui-border);
}

.table > thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.table > thead > tr > th {
    padding: .875rem 1.25rem;
    background-color: #F9FAFB;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: .9375rem 1.25rem;
    border-bottom: 1px solid #F1F3F5;
    vertical-align: middle;
}

.table > tbody > tr {
    transition: background-color var(--ui-speed) var(--ui-ease);
}

.table > tbody > tr:hover {
    background-color: #FAFBFC;
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.table img {
    border-radius: var(--ui-radius-sm);
    object-fit: cover;
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding: .875rem .25rem;
    font-size: .875rem;
    color: var(--ui-text-muted);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    min-height: 38px;
    margin-left: .5rem;
    padding: .375rem .75rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    transition: border-color var(--ui-speed) var(--ui-ease),
        box-shadow var(--ui-speed) var(--ui-ease);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--ui-brand);
    box-shadow: 0 0 0 3px var(--ui-brand-ring);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 36px;
    margin: 0 2px;
    padding: .375rem .625rem !important;
    border: 1px solid transparent !important;
    border-radius: var(--ui-radius-sm) !important;
    background: transparent !important;
    color: var(--ui-text-muted) !important;
    font-size: .875rem;
    transition: background-color var(--ui-speed) var(--ui-ease),
        color var(--ui-speed) var(--ui-ease),
        border-color var(--ui-speed) var(--ui-ease);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #F4F5F7 !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--ui-brand) !important;
    border-color: var(--ui-brand) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .45;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
}

/* Laravel pagination, if a page uses it instead */
.pagination {
    gap: .25rem;
}

.page-link {
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm) !important;
    color: var(--ui-text-muted);
    font-size: .875rem;
    transition: background-color var(--ui-speed) var(--ui-ease),
        color var(--ui-speed) var(--ui-ease);
}

.page-link:hover {
    background-color: #F4F5F7;
    color: var(--ui-text);
}

.page-item.active .page-link {
    background-color: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

/* Row preview on the section item listing. Fixed box so every row keeps the
   same height whatever shape the artwork is. */
.media-thumb {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-bg);
}

.media-thumb img,
.media-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-thumb-empty {
    color: var(--ui-text-subtle);
    border-style: dashed;
}

.media-thumb-play {
    position: absolute;
    right: 3px;
    bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--ui-radius-pill);
    background-color: rgba(17, 24, 39, .65);
    color: #FFFFFF;
}

/* Lets a long title truncate instead of pushing the row wide. */
.media-cell-text {
    min-width: 0;
}

/* -------------------------------------------------------------- badges -- */

.badge {
    padding: .3125rem .625rem;
    border-radius: var(--ui-radius-pill);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: -.005em;
}

.bg-label-primary {
    background-color: var(--ui-brand-soft) !important;
    color: var(--ui-brand-active) !important;
}

.bg-label-success {
    background-color: #ECFDF5 !important;
    color: #047857 !important;
}

.bg-label-danger {
    background-color: #FEF2F2 !important;
    color: #B91C1C !important;
}

.bg-label-warning {
    background-color: #FFFBEB !important;
    color: #B45309 !important;
}

.bg-label-info {
    background-color: #EFF6FF !important;
    color: #1D4ED8 !important;
}

.bg-label-secondary,
.bg-label-dark {
    background-color: #F3F4F6 !important;
    color: #374151 !important;
}

/* -------------------------------------------------------------- alerts -- */

.alert {
    padding: .875rem 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--ui-radius) !important;
    font-size: .875rem;
    box-shadow: var(--ui-shadow-xs);
}

.alert-success {
    background-color: #ECFDF5;
    border-color: #A7F3D0;
    color: #047857;
}

.alert-danger {
    background-color: #FEF2F2;
    border-color: #FECACA;
    color: #B91C1C;
}

.alert-warning {
    background-color: #FFFBEB;
    border-color: #FDE68A;
    color: #B45309;
}

.alert-info {
    background-color: #EFF6FF;
    border-color: #BFDBFE;
    color: #1D4ED8;
}

.alert .close {
    padding: 0 .25rem;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .6;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity var(--ui-speed) var(--ui-ease);
}

.alert .close:hover {
    opacity: 1;
}

/* -------------------------------------------------------------- modals -- */

.modal-content {
    border: 0;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
}

.modal-header,
.modal-footer {
    padding: 1.25rem 1.5rem;
    border-color: var(--ui-border);
}

.modal-body {
    padding: 1.5rem;
}

.modal-title {
    font-size: 1.0625rem;
    font-weight: 600;
}

/* SweetAlert, used for flash messages and delete confirms */
.swal-modal {
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
}

.swal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ui-text);
}

.swal-text {
    font-size: .9375rem;
    color: var(--ui-text-muted);
}

/*
    Buttons sit centred under the message on every dialog, not flushed right.
    Scoped through .swal-modal on purpose: sweetalert injects its own
    ".swal-footer { text-align: right }" into the head when its script runs, so
    a plain .swal-footer rule here would lose on source order.
*/
.swal-modal .swal-footer {
    text-align: center;
}

.swal-button {
    border-radius: var(--ui-radius-sm);
    padding: .5625rem 1.25rem;
    font-size: .875rem;
    font-weight: 500;
    transition: background-color var(--ui-speed) var(--ui-ease);
}

.swal-button--confirm {
    background-color: var(--ui-brand);
}

.swal-button--confirm:not([disabled]):hover {
    background-color: var(--ui-brand-hover);
}

.swal-button--cancel {
    background-color: #F4F5F7;
    color: var(--ui-text);
}

.swal-button--danger {
    background-color: var(--ui-danger);
}

/* ------------------------------------------------------------ auth page -- */

/* Soft brand wash behind the login card */
.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(900px 480px at 50% -10%, #EEECFE 0%, rgba(238, 236, 254, 0) 65%),
        var(--ui-bg) !important;
}

/* The base template scatters decorative dot/shape art around the auth card */
.authentication-wrapper .authentication-inner::before,
.authentication-wrapper .authentication-inner::after,
.authentication-wrapper::before,
.authentication-wrapper::after {
    display: none !important;
    content: none !important;
}

.authentication-wrapper.authentication-basic .authentication-inner {
    max-width: 420px;
}

.authentication-wrapper .card {
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

.authentication-wrapper .card-body {
    padding: 2.5rem 2.25rem;
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.25rem;
    border-radius: var(--ui-radius);
    background: linear-gradient(135deg, var(--ui-brand) 0%, #8B7CF8 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(109, 93, 246, .3);
}

.auth-logo svg {
    width: 26px;
    height: 26px;
    stroke-width: 2;
}

.auth-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .375rem;
}

.auth-subtitle {
    font-size: .9375rem;
    color: var(--ui-text-muted);
    margin-bottom: 1.75rem;
}

.auth-footnote {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .8125rem;
    color: var(--ui-text-subtle);
}

.authentication-wrapper .app-brand {
    margin-bottom: 1.25rem;
}

.authentication-wrapper .app-brand-text {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
}

.authentication-wrapper .form-control {
    min-height: 44px;
}

.authentication-wrapper .btn-primary {
    min-height: 44px;
    font-weight: 600;
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1199.98px) {
    .layout-navbar {
        padding: 0 1rem !important;
    }
}

@media (max-width: 767.98px) {
    .content-wrapper > .container-xxl {
        padding: 1.25rem 1rem !important;
    }

    h4.fw-bold.py-3 {
        font-size: 1.25rem;
    }

    .card-body,
    .card-header {
        padding: 1.125rem;
    }

    .breadcrumb {
        float: none !important;
        margin-bottom: .5rem;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: .75rem .875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}