/*
██████╗ ██████╗  ██████╗      ██╗███████╗ ██████╗████████╗    ██████╗ ███████╗██╗      █████╗ ████████╗███████╗██████╗
██╔══██╗██╔══██╗██╔═══██╗     ██║██╔════╝██╔════╝╚══██╔══╝    ██╔══██╗██╔════╝██║     ██╔══██╗╚══██╔══╝██╔════╝██╔══██╗
██████╔╝██████╔╝██║   ██║     ██║█████╗  ██║        ██║       ██████╔╝█████╗  ██║     ███████║   ██║   █████╗  ██║  ██║
██╔═══╝ ██╔══██╗██║   ██║██   ██║██╔══╝  ██║        ██║       ██╔══██╗██╔══╝  ██║     ██╔══██║   ██║   ██╔══╝  ██║  ██║
██║     ██║  ██║╚██████╔╝╚█████╔╝███████╗╚██████╗   ██║       ██║  ██║███████╗███████╗██║  ██║   ██║   ███████╗██████╔╝
╚═╝     ╚═╝  ╚═╝ ╚═════╝  ╚════╝ ╚══════╝ ╚═════╝   ╚═╝       ╚═╝  ╚═╝╚══════╝╚══════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝╚═════╝

    Theme: Blue-Grey / WhatsApp-inspired / Windows 11
    Loads after app.css — overrides with higher specificity or !important where required

    Applied enhancements:
    A — Pill navigation sidebar (Win11 Settings style)
    B — Subtle geometric dot pattern on main background
    C — Glassmorphism top navbar
    D — Coloured top-accent stripe on cards
    G — SVG noise texture on sidebar (Mica material effect)
*/


/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Surfaces */
    --t-bg-main:          #b8cedf;
    --t-bg-card:          #f2f6fc;
    --t-bg-card-header:   #e8f0f9;
    --t-bg-navbar:        #ffffff;
    --t-bg-input:         #f8fafd;
    --t-bg-row-hover:     rgba(74, 143, 212, 0.06);

    /* Sidebar (light panel — Win11 Explorer style) */
    --t-sb-bg:            #ddeaf6;
    --t-sb-header:        #cfe0f0;
    --t-sb-text:          #2a4058;
    --t-sb-text-hover:    #0f1e2e;
    --t-sb-hover:         #c8dff2;
    --t-sb-active:        #4a8fd4;
    --t-sb-accent:        #2e6eb5;
    --t-sb-sub-text:      #486278;
    --t-sb-title:         #7a9cb5;

    /* Brand colours */
    --t-primary:          #4a8fd4;
    --t-primary-dark:     #2e6eb5;
    --t-primary-glow:     rgba(74, 143, 212, 0.28);
    --t-secondary:        #546f85;
    --t-success:          #3aab78;
    --t-success-glow:     rgba(58, 171, 120, 0.28);
    --t-danger:           #de5656;
    --t-danger-glow:      rgba(222, 86, 86, 0.28);
    --t-warning:          #df9f2e;
    --t-warning-glow:     rgba(223, 159, 46, 0.28);
    --t-info:             #26b4d8;
    --t-info-glow:        rgba(38, 180, 216, 0.28);

    /* Text */
    --t-text-primary:     #1c2b3a;
    --t-text-secondary:   #4c6676;
    --t-text-muted:       #7890a4;

    /* Borders */
    --t-border:           #bfd0e0;
    --t-border-light:     #d8e7f2;

    /* Shadows */
    --t-shadow-card:      0 2px 12px rgba(18, 45, 80, 0.10);
    --t-shadow-modal:     0 8px 32px rgba(18, 45, 80, 0.18);

    /* Radii */
    --t-radius-card:      10px;
    --t-radius-modal:     13px;
    --t-radius-btn:       7px;
    --t-radius-pill:      8px;    /* sidebar pill */
}


/* ============================================================
   B — LAYOUT: dot-grid pattern on main content area
   ============================================================ */
#main {
}


/* ============================================================
   G + A — SIDEBAR: noise texture (Mica) + pill navigation
   ============================================================ */

/* G — base: light gradient + SVG fractal-noise overlay (Mica light) */
.sidebar-wrapper {
    background-color: var(--t-sb-bg);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #e4f0fa 0%, #d4e6f4 100%);
    background-size: 200px 200px, 100% 100%;
    border-right: 1px solid rgba(74, 143, 212, 0.25);
    box-shadow: 3px 0 14px rgba(18, 45, 80, 0.10);
}

.sidebar-wrapper .sidebar-header {
    background-color: transparent;
}

.sidebar-wrapper .sidebar-header,
.sidebar-wrapper .sidebar-header a,
.sidebar-wrapper .sidebar-header span {
    color: #1a2b3a !important;
}

.sidebar-wrapper .menu .sidebar-title {
    color: var(--t-sb-title) !important;
    letter-spacing: 1.1px;
}

/* A — All links get a floating pill shape with margin */
.sidebar-wrapper .menu .sidebar-link {
    margin: 2px 8px;
    border-radius: var(--t-radius-pill);
    transition: background .16s ease;
    padding: .65rem 1.2rem;
}

.sidebar-wrapper .menu .sidebar-link > span {
    color: var(--t-sb-text) !important;
    font-weight: 500;
    opacity: 1;
}

.sidebar-wrapper .menu .sidebar-link i,
.sidebar-wrapper .menu .sidebar-link svg {
    color: var(--t-sb-sub-text);
    stroke: var(--t-sb-sub-text);
}

/* hover pill */
.sidebar-wrapper .menu .sidebar-link:hover {
    background-color: var(--t-sb-hover);
}

.sidebar-wrapper .menu .sidebar-link:hover > span {
    color: var(--t-sb-text-hover) !important;
    opacity: 1;
}

.sidebar-wrapper .menu .sidebar-link:hover i,
.sidebar-wrapper .menu .sidebar-link:hover svg {
    color: var(--t-sb-text-hover);
    stroke: var(--t-sb-text-hover);
}

/* A — active pill: solid primary fill, white text — clear selection state */
.sidebar-wrapper .menu .sidebar-item.active .sidebar-link:before {
    display: none !important;
}

.sidebar-wrapper .menu .sidebar-item.active .sidebar-link {
    background-color: var(--t-sb-active) !important;
    box-shadow: 0 2px 10px rgba(74, 143, 212, 0.35);
}

.sidebar-wrapper .menu .sidebar-item.active .sidebar-link > span {
    color: #ffffff !important;
    opacity: 1;
}

.sidebar-wrapper .menu .sidebar-item.active .sidebar-link i,
.sidebar-wrapper .menu .sidebar-item.active .sidebar-link svg {
    color: rgba(255, 255, 255, 0.90);
    stroke: rgba(255, 255, 255, 0.90);
}

/* Submenu */
.sidebar-wrapper .menu .submenu li a {
    color: var(--t-sb-sub-text) !important;
    padding: 0.55rem 1.6rem;
    border-radius: var(--t-radius-pill);
    margin: 1px 8px;
    display: block;
}

.sidebar-wrapper .menu .submenu li a:hover {
    color: var(--t-sb-text-hover) !important;
    background-color: var(--t-sb-hover);
    margin-left: 8px; /* override app.css margin-left shift on hover */
}

.sidebar-wrapper .menu .submenu li.activeoption a {
    font-weight: 700;
    color: var(--t-sb-accent) !important;
}


/* ============================================================
   C — NAVBAR: glassmorphism
   ============================================================ */
.navbar {
    background-color: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-bottom: 1px solid rgba(74, 143, 212, 0.20);
    box-shadow: 0 2px 14px rgba(18, 45, 80, 0.09);
    position: sticky;
    top: 0;
    z-index: 9;
}

.navbar.navbar-header .dropdown > a {
    color: var(--t-text-secondary) !important;
}

.navbar.navbar-header li.nav-icon .nav-link:hover {
    background-color: rgba(74, 143, 212, 0.10) !important;
}


/* ============================================================
   D + CARDS: coloured top-accent stripe
   ============================================================ */
.card {
    background-color: var(--t-bg-card) !important;
    border: 1px solid var(--t-border-light) !important;
    border-radius: var(--t-radius-card) !important;
    box-shadow: var(--t-shadow-card) !important;
}

/* D — gradient top stripe via border-top (excluded from stat cards) */
.card:not(.card-statistic) {
    border-top: 3px solid var(--t-primary) !important;
}

.card .card-header {
    background-color: var(--t-bg-card-header) !important;
    border-bottom: 1px solid var(--t-border) !important;
    border-radius: calc(var(--t-radius-card) - 1px) calc(var(--t-radius-card) - 1px) 0 0 !important;
    color: var(--t-text-primary);
}

.card .card-header h4,
.card .card-title {
    color: var(--t-text-primary);
}

.card .card-heading {
    color: var(--t-text-secondary);
}

/* Stat card gradient override */
.card.card-statistic {
    background: linear-gradient(135deg, var(--t-primary) 0%, var(--t-primary-dark) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 16px var(--t-primary-glow) !important;
}

/* Stat card colour variants */
.card.card-statistic-success {
    background: linear-gradient(135deg, var(--t-success) 0%, #2d8a60 100%) !important;
    border: none !important;
    box-shadow: 0 4px 16px var(--t-success-glow) !important;
    color: #fff !important;
}
.card.card-statistic-info {
    background: linear-gradient(135deg, var(--t-info) 0%, #1a90b0 100%) !important;
    border: none !important;
    box-shadow: 0 4px 16px var(--t-info-glow) !important;
    color: #fff !important;
}
.card.card-statistic-secondary {
    background: linear-gradient(135deg, var(--t-secondary) 0%, #3d5466 100%) !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(84,111,133,0.28) !important;
    color: #fff !important;
}
.card.card-statistic,
.card.card-statistic-success,
.card.card-statistic-info,
.card.card-statistic-secondary {
    color: #fff !important;
}
.card.card-statistic *,
.card.card-statistic-success *,
.card.card-statistic-info *,
.card.card-statistic-secondary * { color: inherit !important; }

/* Subtle lift on card hover */
.card:not(.card-statistic) {
    transition: transform .18s ease, box-shadow .18s ease;
}

.card:not(.card-statistic):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(18, 45, 80, 0.15) !important;
}


/* ============================================================
   TABLES
   ============================================================ */
.table thead th,
.dataTable-table thead th {
    border-bottom: 2px solid var(--t-primary) !important;
    color: var(--t-text-secondary);
    font-size: 0.77rem;
    text-transform: uppercase;
    letter-spacing: 0.55px;
}

/* Left-accent bar appears on row hover (like Teams/WhatsApp notification style) */
.table > tbody > tr {
    border-left: 3px solid transparent;
    transition: border-color .12s ease, background-color .12s ease;
}

.table > tbody > tr:hover {
    background-color: var(--t-bg-row-hover);
    border-left-color: var(--t-primary);
}

table.tablemanycolumns th,
table.tablemanycolumns td {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}

table.tablemanycolumns .btn {
    font-size: 13px;
    padding: 4px 8px;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 3px;
}

table.manyrows {
    width: 100%;
}

table.manyrows td {
    font-size: 0.755rem;
    color: var(--t-text-secondary);
    font-weight: 500;
}


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    border-radius: var(--t-radius-btn) !important;
}

.btn-primary {
    background-color: var(--t-primary) !important;
    border-color:     var(--t-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--t-primary-dark) !important;
    border-color:     var(--t-primary-dark) !important;
    box-shadow: 0 0 0 0.2rem var(--t-primary-glow) !important;
}

.btn-secondary {
    background-color: var(--t-secondary) !important;
    border-color:     var(--t-secondary) !important;
}

.btn-success {
    background-color: var(--t-success) !important;
    border-color:     var(--t-success) !important;
}
.btn-success:hover { box-shadow: 0 0 0 0.2rem var(--t-success-glow) !important; }

.btn-danger {
    background-color: var(--t-danger) !important;
    border-color:     var(--t-danger) !important;
}
.btn-danger:hover { box-shadow: 0 0 0 0.2rem var(--t-danger-glow) !important; }

.btn-warning {
    background-color: var(--t-warning) !important;
    border-color:     var(--t-warning) !important;
}
.btn-warning:hover { box-shadow: 0 0 0 0.2rem var(--t-warning-glow) !important; }

.btn-info {
    background-color: var(--t-info) !important;
    border-color:     var(--t-info) !important;
}
.btn-info:hover { box-shadow: 0 0 0 0.2rem var(--t-info-glow) !important; }

.btn-vsm {
    padding: 2px 6px;
    font-size: 12px;
}


/* ============================================================
   BADGES
   ============================================================ */
.badge.bg-primary   { background-color: var(--t-primary)   !important; }
.badge.bg-secondary { background-color: var(--t-secondary) !important; }
.badge.bg-success   { background-color: var(--t-success)   !important; }
.badge.bg-danger    { background-color: var(--t-danger)    !important; }
.badge.bg-warning   { background-color: var(--t-warning)   !important; }
.badge.bg-info      { background-color: var(--t-info)      !important; }


/* ============================================================
   ALERTS
   ============================================================ */
.alert-primary  { background-color: var(--t-primary)  !important; box-shadow: 1px 2px 9px var(--t-primary-glow)  !important; }
.alert-success  { background-color: var(--t-success)  !important; box-shadow: 1px 2px 9px var(--t-success-glow)  !important; }
.alert-danger   { background-color: var(--t-danger)   !important; box-shadow: 1px 2px 9px var(--t-danger-glow)   !important; }
.alert-warning  { background-color: var(--t-warning)  !important; box-shadow: 1px 2px 9px var(--t-warning-glow)  !important; }
.alert-info     { background-color: var(--t-info)     !important; box-shadow: 1px 2px 9px var(--t-info-glow)     !important; }


/* ============================================================
   TYPOGRAPHY
   ============================================================ */
body, #main .main-content {
    color: var(--t-text-primary);
}

#main .main-content .page-title h3 {
    color: var(--t-text-primary);
}

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

.text-subtitle {
    color: var(--t-text-muted);
}

section .section-title:after {
    background-color: var(--t-primary);
}

.form-group label {
    text-transform: none;
    font-size: 15px;
    color: var(--t-text-secondary);
    font-weight: 500;
}

.fv_field {
    padding: 3px 6px;
    font-size: 13px;
    font-weight: 400;
    background-clip: padding-box;
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
    border-color: var(--t-border);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.fv_field_sm {
    padding: 2px 4px;
    font-size: 10px;
    font-weight: 400;
    background-clip: padding-box;
    border-style: solid;
    border-radius: 4px;
    border-width: 1px;
    border-color: var(--t-border);
}

div.fv_fieldlabel_description {
    font-size: 0.8rem;
    color: var(--t-text-muted);
}


/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form-control,
.form-select,
.dataTable-input {
    background-color: var(--t-bg-input);
    border-color: var(--t-border);
    color: var(--t-text-primary);
}

.form-control:focus,
.form-select:focus,
.dataTable-input:focus {
    border-color: var(--t-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--t-primary-glow) !important;
    background-color: #fff;
}

.form-group[class*=has-icon-] .form-control:focus ~ .form-control-icon i,
.form-group[class*=has-icon-] .form-control:focus ~ .form-control-icon svg {
    color: var(--t-primary);
    stroke: var(--t-primary);
}

.form-group.with-title .form-control:focus ~ label,
.form-group.with-title dataTable-input:focus ~ label {
    border-left-color:  var(--t-primary) !important;
    border-top-color:   var(--t-primary) !important;
    border-right-color: var(--t-primary) !important;
}


/* ============================================================
   MODAL
   ============================================================ */
.modal .modal-content {
    background-color: var(--t-bg-card) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-modal) !important;
    box-shadow: var(--t-shadow-modal) !important;
}

.modal .modal-header {
    background-color: var(--t-bg-card-header) !important;
    border-bottom: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-modal) var(--t-radius-modal) 0 0 !important;
}

.modal .modal-footer {
    background-color: var(--t-bg-card-header) !important;
    border-top: 1px solid var(--t-border-light) !important;
    border-radius: 0 0 var(--t-radius-modal) var(--t-radius-modal) !important;
}

.modal-content form {
    display: contents;
}

.modal-content pre {
    display: contents;
}


/* ============================================================
   DIVIDERS
   ============================================================ */
.divider .divider-text {
    background-color: var(--t-bg-card);
    color: var(--t-text-muted);
}

.divider .divider-text:before,
.divider .divider-text:after {
    border-top-color: var(--t-border);
}


/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress.progress-primary .progress-bar {
    background-color: var(--t-primary) !important;
    box-shadow: 0 2px 4px var(--t-primary-glow) !important;
}

.progress.progress-success .progress-bar {
    background-color: var(--t-success) !important;
    box-shadow: 0 2px 4px var(--t-success-glow) !important;
}

.progress.progress-danger .progress-bar {
    background-color: var(--t-danger) !important;
    box-shadow: 0 2px 4px var(--t-danger-glow) !important;
}

.progress.progress-warning .progress-bar {
    background-color: var(--t-warning) !important;
    box-shadow: 0 2px 4px var(--t-warning-glow) !important;
}

.progress.progress-info .progress-bar {
    background-color: var(--t-info) !important;
    box-shadow: 0 2px 4px var(--t-info-glow) !important;
}


/* ============================================================
   NAV — TABS & PILLS
   ============================================================ */
.nav-tabs .nav-link.active {
    color: var(--t-primary);
}

.nav-tabs .nav-link.active:after {
    background-color: var(--t-primary);
    box-shadow: 0 2px 5px var(--t-primary-glow);
}

.nav-tabs .nav-link:hover {
    text-shadow: 0 0 2px var(--t-primary-glow);
}

.nav-pills .nav-link.active {
    background-color: var(--t-primary) !important;
    box-shadow: 0 2px 10px var(--t-primary-glow) !important;
}


/* ============================================================
   PAGINATION
   ============================================================ */
.pagination.pagination-primary .page-item.active .page-link {
    background-color: var(--t-primary) !important;
    border-color:     var(--t-primary) !important;
    box-shadow: 0 2px 5px var(--t-primary-glow) !important;
}


/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb-item a,
.breadcrumb-item a:hover {
    color: var(--t-primary);
}


/* ============================================================
   SCROLLBAR (WebKit)
   ============================================================ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

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

::-webkit-scrollbar-thumb {
    background: #8aafc8;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--t-primary);
}


/* ============================================================
   CHARTS
   ============================================================ */
.stdwhitechart {
    background: rgba(242, 246, 252, 0.88);
    width: 95%;
    margin: 0 auto 20px auto;
    padding: 15px 10px;
    border-radius: 8px;
    border: 1px solid var(--t-border-light);
}

.stdwhitechart100 {
    background: rgba(242, 246, 252, 0.88);
    width: 100%;
    margin: 0 auto 20px auto;
    padding: 15px 10px;
    border-radius: 8px;
    border: 1px solid var(--t-border-light);
}

.card.card-statistic .card-title-smaller {
    text-transform: none;
    color: #fff;
    letter-spacing: .8px;
    font-weight: 400;
    font-size: 1.1rem;
    margin-bottom: 0;
    margin-top: 5px;
}

.card h1.card-title {
    font-size: 4em;
}


/* ============================================================
   POP-UPS / DIALOGS
   ============================================================ */
div#ysed_background_canvas {
    width: 100% !important;
}

div.backofficePopoups {
    border-radius: 20px;
    overflow: hidden;
}

div.offcanvas {
    overflow: auto;
}

div.session-expired {
    text-align: center;
}


/* ============================================================
   LOADING SPINNER
   ============================================================ */
.loader-roller-block {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.loader-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.loader-roller div {
    animation: loader-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

.loader-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--t-primary);
    margin: -4px 0 0 -4px;
}

.loader-roller div:nth-child(1)  { animation-delay: -0.036s; }
.loader-roller div:nth-child(1):after { top: 63px; left: 63px; }
.loader-roller div:nth-child(2)  { animation-delay: -0.072s; }
.loader-roller div:nth-child(2):after { top: 68px; left: 56px; }
.loader-roller div:nth-child(3)  { animation-delay: -0.108s; }
.loader-roller div:nth-child(3):after { top: 71px; left: 48px; }
.loader-roller div:nth-child(4)  { animation-delay: -0.144s; }
.loader-roller div:nth-child(4):after { top: 72px; left: 40px; }
.loader-roller div:nth-child(5)  { animation-delay: -0.180s; }
.loader-roller div:nth-child(5):after { top: 71px; left: 32px; }
.loader-roller div:nth-child(6)  { animation-delay: -0.216s; }
.loader-roller div:nth-child(6):after { top: 68px; left: 24px; }
.loader-roller div:nth-child(7)  { animation-delay: -0.252s; }
.loader-roller div:nth-child(7):after { top: 63px; left: 17px; }
.loader-roller div:nth-child(8)  { animation-delay: -0.288s; }
.loader-roller div:nth-child(8):after { top: 56px; left: 12px; }

@keyframes loader-roller {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ============================================================
   LOG / DATE RIBBON COMPONENTS
   ============================================================ */
div.dateRibbon {
    position: relative;
    background: var(--t-bg-card);
    border-bottom: 4px solid var(--t-border);
    height: 135px;
}

div.logEventArea {
    position: relative;
    width: 100%;
    overflow: auto;
}

div.singleDate {
    position: relative;
    display: block;
    padding-top: 30px;
    width: 12%;
    height: 122px;
    text-align: center;
    border: 1px solid var(--t-bg-card);
    background: var(--t-border-light);
    margin: 3px;
    float: left;
}

div.previousWeek,
div.nextWeek {
    position: relative;
    display: block;
    padding-top: 40px;
    padding-left: 4px;
    padding-right: 4px;
    height: 118px;
    text-align: center;
    border: 1px solid var(--t-border-light);
    margin: 3px;
    font-weight: bold;
    background-color: var(--t-border);
    color: #fff;
}

div.previousWeek { float: left; }
div.nextWeek     { float: right; }


/* ============================================================
   MESSAGE PREVIEW
   ============================================================ */
span.message_preview_field_delimiter {
    display: inline-block;
    background: var(--t-bg-card-header);
    margin-right: 5px;
    border: 1px solid var(--t-border);
    padding: 2px 6px;
    margin-bottom: 3px;
    min-width: 75px;
    text-align: right;
}

div.message_preview_body span.message_preview_field_delimiter {
    display: block;
    margin-right: 0;
    text-align: center;
}

form.setpasswordform .fv_fieldlabel_labelspan {
    font-size: 0.9rem;
}


/* ============================================================
   PASSWORD COMPLEXITY VIEWER
   ============================================================ */
div.fv_fieldlabel_password_complexity_viewer {
    display: block;
    width: 100%;
    height: 12px;
    border: 1px solid var(--t-border);
    margin-bottom: 10px;
    padding: 2px;
}

div.fv_fieldlabel_password_complexity_viewer_progress_bar {
    display: block;
    width: 0%;
    height: 6px;
    border: 1px solid var(--t-border);
    margin-bottom: 10px;
    background-color: var(--t-primary);
    transition: width 2s, height 4s;
}


/* ============================================================
   EDITOR (TinyMCE) — hide branding
   ============================================================ */
div.tox-promotion,
span.tox-statusbar__branding {
    display: none !important;
}


/* Workstation area */
@keyframes wsDetailExpand {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ws-detail-panel {
    animation: wsDetailExpand 0.22s ease-out;
    background: var(--t-bg-card, #f2f6fc);
    border: 1px solid var(--t-border, #bfd0e0);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--t-shadow-card, 0 2px 12px rgba(18,45,80,0.10));
    display: flex;
    flex-direction: column;
    margin: 4px 2px 8px 2px;
}
.ws-detail-top {
    display: flex;
}
.ws-detail-sidebar {
    background: linear-gradient(160deg, var(--t-primary, #4a8fd4) 0%, var(--t-primary-dark, #2e6eb5) 100%);
    width: 136px;
    min-width: 136px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ws-detail-sidebar svg {
    width: 52px;
    height: 52px;
    color: #fff;
    stroke-width: 1.2;
}
.ws-detail-sidebar .ws-sidebar-name {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
}
.ws-detail-sidebar .ws-sidebar-ip {
    color: rgba(255,255,255,0.72);
    font-size: 10px;
    text-align: center;
}
.ws-detail-sidebar .ws-sidebar-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    margin-top: 2px;
}
.ws-detail-sidebar .ws-sidebar-conn {
    color: rgba(255,255,255,0.65);
    font-size: 10px;
    text-align: center;
    margin-top: 2px;
}
.ws-detail-content {
    flex: 1;
    padding: 14px 16px 10px 16px;
    min-width: 0;
    background: var(--t-bg-card, #f2f6fc);
}
.ws-detail-content .ws-detail-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--t-text-primary, #1c2b3a);
    margin-bottom: 1px;
}
.ws-detail-content .ws-detail-subtitle {
    font-size: 11px;
    color: var(--t-text-muted, #7890a4);
    margin-bottom: 10px;
}
.ws-tile {
    background: #fff;
    border: 1px solid var(--t-border-light, #d8e7f2);
    border-radius: 7px;
    padding: 7px 11px 8px 11px;
    height: 100%;
    min-height: 54px;
}
.ws-tile-label {
    font-size: 9.5px;
    color: var(--t-text-muted, #7890a4);
    text-transform: uppercase;
    letter-spacing: 0.55px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-tile-value {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t-text-primary, #1c2b3a);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-tile-sub {
    font-size: 10px;
    color: var(--t-text-muted, #7890a4);
    margin-top: 1px;
}
.ws-tile-progress {
    height: 5px;
    border-radius: 3px;
    margin-top: 5px;
    background: var(--t-border-light, #d8e7f2);
    overflow: hidden;
}
.ws-tile-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.ws-detail-cmds {
    background: var(--t-bg-card-header, #e8f0f9);
    border-top: 1px solid var(--t-border-light, #d8e7f2);
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.ws-cmd-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--t-text-muted, #7890a4);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-right: 6px;
    white-space: nowrap;
}