/* ============================================================
   ORCHID PHARMA BRAND THEME OVERRIDE
   Version: 2.0

   IMPORTANT:
   Load this file AFTER Bootstrap, AdminLTE, your existing
   MyOrchidMenu, MyOrchidLogin, MyOrchidChat and
   MyOrchidChatLogin stylesheets.

   This file changes only colours, shadows and surface styling.
   Existing page structure, sizes and responsive behaviour remain.
   ============================================================ */

:root {
    /* Official-logo inspired palette */
    --orchid-navy-950: #06143d;
    --orchid-navy-900: #09163f;
    --orchid-navy-800: #10265f;
    --orchid-navy-700: #173878;
    --orchid-blue-600: #145bc7;
    --orchid-blue-500: #1f6fe5;
    --orchid-blue-100: #eaf2ff;
    --orchid-red-600: #c90033;
    --orchid-red-500: #e00037;
    --orchid-red-100: #fff0f4;
    --orchid-cyan-500: #00a6c8;
    --orchid-green-500: #15936b;
    --orchid-orange-500: #ed7a18;

    --orchid-text: #16213f;
    --orchid-muted: #66708a;
    --orchid-line: #dbe2ef;
    --orchid-bg: #f3f7fd;
    --orchid-surface: rgba(255,255,255,.96);
    --orchid-surface-soft: rgba(255,255,255,.86);
    --orchid-border: rgba(9,22,63,.13);
    --orchid-shadow: 0 18px 42px rgba(9,22,63,.14);
    --orchid-shadow-soft: 0 8px 24px rgba(9,22,63,.10);

    /* Backward compatibility with your login variables */
    --purple-900: var(--orchid-navy-950);
    --purple-800: var(--orchid-navy-900);
    --purple-700: var(--orchid-navy-800);
    --purple-500: var(--orchid-blue-600);
    --pink-500: var(--orchid-red-500);
    --ink: var(--orchid-text);
    --muted: var(--orchid-muted);
    --line: var(--orchid-line);
    --card: var(--orchid-surface);

    /* Backward compatibility with centralized menu variables */
    --orchid-primary: var(--orchid-navy-900);
    --orchid-primary-dark: var(--orchid-navy-950);
    --orchid-primary-light: var(--orchid-blue-500);
    --orchid-accent: var(--orchid-red-500);
    --orchid-blue: var(--orchid-blue-600);
    --orchid-danger: var(--orchid-red-600);

    /* Backward compatibility with MyOrchidChat variables */
    --chat-primary: var(--orchid-navy-900);
    --chat-primary-dark: var(--orchid-navy-950);
    --chat-primary-light: var(--orchid-blue-500);
    --chat-primary-soft: var(--orchid-blue-100);
    --chat-accent: var(--orchid-red-500);
    --chat-blue: var(--orchid-blue-600);
    --chat-green: var(--orchid-green-500);
    --chat-green-soft: #e8f7f1;
    --chat-danger: var(--orchid-red-600);
    --chat-warning: var(--orchid-orange-500);
    --chat-bg: var(--orchid-bg);
    --chat-panel: #ffffff;
    --chat-panel-soft: #f8fbff;
    --chat-border: var(--orchid-line);
    --chat-line: var(--orchid-line);
    --chat-text: var(--orchid-text);
    --chat-muted: var(--orchid-muted);
    --chat-incoming: #ffffff;
    --chat-outgoing: #dceaff;
    --chat-left-bubble: #ffffff;
    --chat-right-bubble: #dceaff;
    --chat-secure-left: #edf4ff;
    --chat-secure-right: #d6e7ff;
    --chat-shadow: var(--orchid-shadow);
    --chat-shadow-soft: var(--orchid-shadow-soft);

    /* Backward compatibility with MyOrchidChatLogin variables */
    --orchid-dark: var(--orchid-navy-900);
    --orchid-deep: var(--orchid-navy-950);
    --orchid-light: var(--orchid-blue-500);
    --orchid-pink: var(--orchid-red-500);
    --page-bg: var(--orchid-bg);
    --surface: var(--orchid-surface);
    --surface-soft: var(--orchid-surface-soft);
    --text: var(--orchid-text);
    --shadow: var(--orchid-shadow-soft);
}

/* ============================================================
   COMMON PAGE BACKGROUND
   ============================================================ */
html,
body {
    color: var(--orchid-text) !important;
    background:
        radial-gradient(circle at 7% 8%, rgba(31,111,229,.14), transparent 31%),
        radial-gradient(circle at 94% 11%, rgba(224,0,55,.08), transparent 25%),
        linear-gradient(135deg, #f8fbff 0%, #eef4fc 100%) !important;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
    background:
        radial-gradient(circle at 4% 15%, rgba(31,111,229,.13), transparent 26%),
        radial-gradient(circle at 96% 82%, rgba(224,0,55,.10), transparent 25%),
        linear-gradient(135deg, rgba(246,249,255,.98), rgba(235,243,253,.98)) !important;
}

.page-shell {
    border-color: rgba(255,255,255,.94) !important;
    background: rgba(255,255,255,.93) !important;
    box-shadow: 0 25px 70px rgba(9,22,63,.16), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.orchid-mark {
    color: var(--orchid-navy-900) !important;
    text-shadow: 0 8px 20px rgba(9,22,63,.18) !important;
}

.brand-header h1 span:first-child {
    color: var(--orchid-navy-900) !important;
}

.brand-header h1 span:last-child {
    background: linear-gradient(90deg,
        var(--orchid-navy-900) 0%,
        var(--orchid-blue-600) 62%,
        var(--orchid-red-500) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.brand-header h2,
.brand-header p {
    color: var(--orchid-text) !important;
}

.brand-line {
    background: linear-gradient(90deg, var(--orchid-blue-600), var(--orchid-red-500)) !important;
}

.module-card {
    border-color: rgba(9,22,63,.11) !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 8px 22px rgba(9,22,63,.08) !important;
}

.module-card:hover {
    border-color: rgba(20,91,199,.26) !important;
    box-shadow: 0 15px 32px rgba(9,22,63,.14) !important;
}

.module-purple i,
.module-purple h3,
.module-indigo i,
.module-indigo h3 { color: var(--orchid-navy-800) !important; }
.module-blue i,
.module-blue h3 { color: var(--orchid-blue-600) !important; }
.module-pink i,
.module-pink h3 { color: var(--orchid-red-500) !important; }
.module-green i,
.module-green h3 { color: var(--orchid-green-500) !important; }
.module-orange i,
.module-orange h3 { color: var(--orchid-orange-500) !important; }
.module-teal i,
.module-teal h3 { color: var(--orchid-cyan-500) !important; }

.benefit-strip {
    border-color: var(--orchid-line) !important;
    background: rgba(255,255,255,.84) !important;
}

.benefit-strip i {
    color: var(--orchid-navy-800) !important;
}

.login-card {
    border-color: rgba(9,22,63,.12) !important;
    background: var(--orchid-surface) !important;
    box-shadow: 0 24px 60px rgba(9,22,63,.16) !important;
}

.employee-photo {
    border-color: var(--orchid-navy-800) !important;
    background: var(--orchid-blue-100) !important;
    box-shadow: 0 9px 24px rgba(9,22,63,.18) !important;
}

.login-card h2 {
    color: var(--orchid-navy-900) !important;
}

.login-subtitle {
    color: var(--orchid-muted) !important;
}

.input-shell {
    border-color: #cfd9e9 !important;
    background: rgba(255,255,255,.98) !important;
}

.input-shell:focus-within {
    border-color: var(--orchid-blue-600) !important;
    box-shadow: 0 0 0 4px rgba(20,91,199,.12) !important;
}

.input-shell > i {
    color: var(--orchid-navy-800) !important;
}

.input-shell input {
    color: var(--orchid-text) !important;
}

.password-toggle:hover {
    color: var(--orchid-navy-800) !important;
    background: var(--orchid-blue-100) !important;
}

.sign-in-button {
    /*background: linear-gradient(90deg, var(--orchid-navy-900) 0%, var(--orchid-blue-600) 74%, var(--orchid-navy-800) 100%) !important;*/
    background: linear-gradient(90deg, var(--orchid-navy-900) 0%, var(--orchid-blue-600) 72%, var(--orchid-red-500) 100%) !important;
    box-shadow: 0 11px 26px rgba(9,22,63,.25) !important;
}

.sign-in-button:hover {
    box-shadow: 0 14px 30px rgba(9,22,63,.30) !important;
}

.login-button {
    color: #fff !important;
    background: linear-gradient(90deg, var(--orchid-navy-900) 0%, var(--orchid-blue-600) 72%, var(--orchid-red-500) 100%) !important;
    box-shadow: 0 10px 22px rgba(9,22,63,.28) !important;
}

    .login-button:hover {
        box-shadow: 0 13px 28px rgba(9,22,63,.33) !important;
    }

.authorized-box {
    background: linear-gradient(135deg, #f4f8ff, #eaf2ff) !important;
    border: 1px solid rgba(20,91,199,.13);
}

.authorized-box > i,
.authorized-box strong,
.trust-row div,
footer strong,
.loader-box {
    color: var(--orchid-navy-900) !important;
}

.login-loader {
    background: rgba(6,20,61,.38) !important;
}

/* ============================================================
   CENTRALIZED HEADER AND MENU
   ============================================================ */
.centralized-header,
#topnavbar {

    background: linear-gradient( 135deg, var(--orchid-navy-950), var(--orchid-navy-900), var(--orchid-blue-600) ) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 12px 30px rgba(6,20,61,.30) !important;
}

.central-header-control:hover,
.central-header-control.active {
    color: var(--orchid-navy-900) !important;
    background: #fff !important;
    box-shadow: 0 7px 18px rgba(6,20,61,.22) !important;
}

.central-header-control-admin {
    color: var(--orchid-red-500) !important;
    border-color: rgba(255,255,255,.95) !important;
    box-shadow: 0 7px 18px rgba(6,20,61,.22) !important;
}

.central-profile-photo {
    border-color: #fff !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.25) !important;
}

.main-sidebar {
    background:
        radial-gradient(circle at 10% 8%, rgba(31,111,229,.12), transparent 32%),
        linear-gradient(135deg, #f8fbff 0%, #eef4fc 100%) !important;
}

#main_sidebar {
    border-color: var(--orchid-border) !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: var(--orchid-shadow-soft) !important;
}

#navbar {
    background: linear-gradient(180deg, #f9fbff 0%, #f0f5fc 100%) !important;
    border-color: rgba(255,255,255,.92) !important;
    box-shadow: var(--orchid-shadow) !important;
}

.sidebar-menu-divider {
    background: linear-gradient(90deg,
        transparent,
        rgba(9,22,63,.20),
        transparent) !important;
}

#dynamicMenuArea::-webkit-scrollbar-thumb {
    background: #b9c8e2 !important;
}

.outlook-module {
    border-color: #e0e7f2 !important;
    box-shadow: 0 4px 12px rgba(9,22,63,.07) !important;
}

.outlook-module:hover {
    border-color: rgba(20,91,199,.22) !important;
    box-shadow: 0 10px 24px rgba(9,22,63,.12) !important;
}

.outlook-module-header:hover {
    background: #eef4ff !important;
}

.outlook-module.open > .outlook-module-header {
    color: var(--orchid-navy-900) !important;
    background: #e7f0ff !important;
    border-bottom-color: #d2e0f6 !important;
}

.outlook-module-icon {
    color: var(--orchid-navy-800) !important;
    background: var(--orchid-blue-100) !important;
    border-color: #d3e0f5 !important;
}

.outlook-module.open .outlook-module-icon {
    color: #fff !important;
    background: linear-gradient(135deg,
        var(--orchid-navy-900),
        var(--orchid-blue-600)) !important;
    box-shadow: 0 7px 16px rgba(9,22,63,.24) !important;
}

.outlook-module.open .outlook-module-title,
.outlook-module.open .outlook-module-arrow {
    color: var(--orchid-navy-900) !important;
}

.outlook-module-count {
    color: var(--orchid-navy-800) !important;
    background: var(--orchid-blue-100) !important;
    border-color: #d3e0f5 !important;
}

.outlook-menu-link:hover {
    color: var(--orchid-navy-900) !important;
    background: #e8f1ff !important;
    border-color: rgba(20,91,199,.11) !important;
}

.outlook-menu-link.active,
.fixed-menu-link.active {
    color: #fff !important;
    background: linear-gradient(90deg,
        var(--orchid-navy-900) 0%,
        var(--orchid-blue-600) 100%) !important;
    box-shadow: 0 7px 18px rgba(9,22,63,.26) !important;
}

.outlook-menu-link:hover .outlook-menu-text,
.outlook-menu-link:hover .outlook-menu-item-icon {
    color: var(--orchid-navy-900) !important;
}

.logout-menu-link,
.logout-menu-link .outlook-menu-text,
.logout-menu-link .outlook-menu-item-icon {
    color: var(--orchid-red-600) !important;
}

.logout-menu-link:hover {
    background: var(--orchid-red-100) !important;
}

.main-footer {
    border-color: rgba(9,22,63,.10) !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 5px 16px rgba(9,22,63,.08) !important;
}

/* ============================================================
   SECURE LOCK
   ============================================================ */
.securelock-overlay {
    background: linear-gradient(135deg,
        rgba(6,20,61,.82),
        rgba(16,38,95,.70)) !important;
}

.secure-lock-control {
    border-color: rgba(207,218,237,.96) !important;
    box-shadow: 0 24px 70px rgba(6,20,61,.32) !important;
}

.secure-lock-heading {
    background: linear-gradient(135deg,
        var(--orchid-navy-950) 0%,
        var(--orchid-navy-900) 55%,
        var(--orchid-blue-600) 100%) !important;
}

.secure-lock-employee-name {
    color: #ffd4df !important;
}

.secure-lock-content,
.secure-lock-error {
    background: linear-gradient(135deg, #fbfdff, #eef4fc) !important;
}

.secure-lock-avatar {
    box-shadow: 0 0 0 2px var(--orchid-blue-600), 0 10px 24px rgba(9,22,63,.22) !important;
}

.secure-lock-field input:focus,
.secure-lock-field .form-control:focus {
    border-color: var(--orchid-blue-600) !important;
    box-shadow: 0 0 0 3px rgba(20,91,199,.14) !important;
}

.secure-lock-buttons .btn-success,
.secure-lock-buttons .btn-primary {
    background: linear-gradient(90deg,
        var(--orchid-navy-900),
        var(--orchid-blue-600)) !important;
    box-shadow: 0 8px 18px rgba(9,22,63,.24) !important;
}

.secure-lock-buttons .btn-danger {
    color: var(--orchid-red-600) !important;
    background: var(--orchid-red-100) !important;
    border-color: #f1c3cf !important;
}

/* ============================================================
   MYORCHID CHAT
   ============================================================ */
.content-wrapper {
    background: transparent !important;
}

.left-panel,
.right-panel {
    border-color: #dce4f0 !important;
}

.left-panel {
    background: rgba(255,255,255,.94) !important;
}

.right-panel {
    background: #f4f7fc !important;
}

.chat-row-card:hover {
    background: #e7f0ff !important;
}

.chat-row-card.selected,
.chat-row-selected,
tr.chat-row-selected .chat-row-card {
    background: #dceaff !important;
    border-left-color: var(--orchid-blue-600) !important;
}

.badge.unread-badge {
    background: var(--orchid-red-500) !important;
}

.msg-left {
    background: #fff !important;
    border: 1px solid #e1e7f0;
    box-shadow: 0 3px 10px rgba(9,22,63,.06);
}

.msg-right {
    background: #dceaff !important;
    border: 1px solid #c3d9fa;
    box-shadow: 0 3px 10px rgba(9,22,63,.07);
}

.reply-box,
.reply-panel {
    border-left-color: var(--orchid-blue-600) !important;
    background: #edf4ff !important;
}

.chat-box {
    border: 1px solid #d8e1ef;
    box-shadow: 0 3px 12px rgba(9,22,63,.09) !important;
}

.send-btn {
    background: linear-gradient(135deg,
        var(--orchid-navy-900),
        var(--orchid-blue-600)) !important;
    box-shadow: 0 5px 14px rgba(9,22,63,.22);
}

.leftPanel_btn {
    color: var(--orchid-navy-900) !important;
    border-color: var(--orchid-blue-600) !important;
}

.leftPanel_btn.active {
    color: #fff !important;
    background: var(--orchid-navy-900) !important;
}

#dateBadge {
    background: var(--orchid-navy-900) !important;
}

.msg-status,
.msg-status.sent,
.msg-status.read,
.left-msg-status.read {
    color: var(--orchid-blue-600) !important;
}

.mention-name,
.mention-text,
.secure-lock {
    color: var(--orchid-blue-600) !important;
}

.mention-item:hover,
.mention-item.active {
    background: #e8f1ff !important;
}

.Desktop-announcement-card,
.Mobile-announcement-card {
    border-top-color: var(--orchid-blue-600) !important;
}

.announcement-title {
    color: var(--orchid-navy-900) !important;
}

.announcement-for-me {
    border-top-color: var(--orchid-green-500) !important;
}

.announcement-sent-not-for-me {
    border-top-color: var(--orchid-orange-500) !important;
}

.feature-info-btn:hover {
    color: #fff !important;
    background: var(--orchid-navy-800) !important;
}

.emoji-btn:hover {
    color: var(--orchid-blue-600) !important;
    background: #eef4ff !important;
}

.emoji-item:hover {
    background: #e8f1ff !important;
}

.topLoaderimage {
    border-top-color: var(--orchid-blue-600) !important;
}

/* ============================================================
   MYORCHID CHAT LOGIN
   Colour, gradient, border and shadow overrides only.
   ============================================================ */
body.chat-login-page {
    color: var(--orchid-text) !important;
    background: var(--orchid-bg) !important;
}

.product-panel {
    background:
        radial-gradient(circle at 82% 10%, rgba(31,111,229,.15), transparent 31%),
        radial-gradient(circle at 71% 58%, rgba(9,22,63,.06), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f7faff 58%, #edf4fc 100%) !important;
}

.product-panel::before {
    border-color: rgba(9,22,63,.08) !important;
    background-image: radial-gradient(circle, rgba(20,91,199,.20) 1.2px, transparent 1.5px) !important;
}

.product-panel::after {
    border-color: rgba(9,22,63,.08) !important;
    box-shadow:
        inset 0 0 0 72px rgba(20,91,199,.018),
        inset 0 0 0 145px rgba(9,22,63,.015) !important;
}

.brand-divider {
    background: linear-gradient(transparent, rgba(9,22,63,.30), transparent) !important;
}

.product-name,
.hero-eyebrow {
    color: var(--orchid-navy-900) !important;
}

.hero-copy h1 {
    color: var(--orchid-text) !important;
}

.hero-copy h2 {
    background: linear-gradient(90deg,
        var(--orchid-navy-900),
        var(--orchid-blue-600) 62%,
        var(--orchid-red-500)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.hero-copy p,
.feature-card small,
.benefit-list span {
    color: var(--orchid-muted) !important;
}

.connectivity-visual {
    background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.96), transparent 11%),
        radial-gradient(circle at 50% 48%, rgba(31,111,229,.18), transparent 29%),
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(20,91,199,.07)) !important;
}

.factory-silhouette {
    background: linear-gradient(90deg,
        transparent 0 3%, #b9cbe8 3% 9%, transparent 9% 11%,
        #b9cbe8 11% 18%, transparent 18% 22%, #b9cbe8 22% 34%,
        transparent 34% 39%, #b9cbe8 39% 46%, transparent 46% 54%,
        #b9cbe8 54% 66%, transparent 66% 70%, #b9cbe8 70% 81%,
        transparent 81% 84%, #b9cbe8 84% 95%, transparent 95%) !important;
}

.network-core {
    color: #fff !important;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.42), transparent 16%),
        linear-gradient(145deg,
            var(--orchid-blue-500),
            var(--orchid-blue-600) 58%,
            var(--orchid-navy-900)) !important;
    border-color: rgba(255,255,255,.90) !important;
    box-shadow:
        0 16px 35px rgba(9,22,63,.26),
        0 0 45px rgba(31,111,229,.20) !important;
}

.core-ring {
    border-color: rgba(255,255,255,.58) !important;
}

.network-orbit {
    border-color: rgba(20,91,199,.25) !important;
}

.network-node {
    color: var(--orchid-navy-900) !important;
    background: rgba(255,255,255,.97) !important;
    border-color: rgba(20,91,199,.18) !important;
    box-shadow: 0 9px 22px rgba(9,22,63,.15) !important;
}

.feature-card,
.benefit-card {
    background: var(--orchid-surface) !important;
    border-color: var(--orchid-border) !important;
    box-shadow: 0 8px 20px rgba(9,22,63,.08) !important;
}

.feature-icon {
    color: #fff !important;
    background: linear-gradient(145deg,
        var(--orchid-blue-500),
        var(--orchid-navy-900)) !important;
    box-shadow: 0 5px 13px rgba(9,22,63,.22) !important;
}

.feature-card strong {
    color: var(--orchid-text) !important;
}

.benefit-card h3,
.benefit-card h3 i,
.benefit-list span::before,
.product-footer {
    color: var(--orchid-navy-900) !important;
}

.login-panel {
    background:
        radial-gradient(circle at 80% 12%, rgba(31,111,229,.28), transparent 30%),
        radial-gradient(circle at 15% 82%, rgba(224,0,55,.13), transparent 27%),
        linear-gradient(150deg,
            var(--orchid-navy-950) 0%,
            var(--orchid-navy-900) 48%,
            var(--orchid-navy-800) 100%) !important;
}

.login-panel::before {
    background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1.3px) !important;
}

.login-panel-decoration {
    border-color: rgba(255,255,255,.13) !important;
}

.login-brand,
.login-brand strong {
    color: #fff !important;
}

.login-panel .login-card {
    background: rgba(255,255,255,.98) !important;
    border-color: rgba(255,255,255,.88) !important;
    box-shadow: 0 26px 65px rgba(6,20,61,.38) !important;
}

.card-accent {
    background: linear-gradient(90deg,
        var(--orchid-red-500),
        var(--orchid-blue-600) 52%,
        var(--orchid-navy-900)) !important;
}

.server-banner {
    color: var(--orchid-red-600) !important;
    background: var(--orchid-red-100) !important;
    border-color: #f3c3cf !important;
}

.welcome-copy h2,
.welcome-copy #LoginName {
    color: var(--orchid-navy-900) !important;
}

.welcome-copy p {
    color: var(--orchid-muted) !important;
}

.employee-photo-wrap {
    background: linear-gradient(145deg, #ffffff, var(--orchid-blue-100)) !important;
    border-color: rgba(20,91,199,.38) !important;
    box-shadow: 0 8px 20px rgba(9,22,63,.18) !important;
}

.field-group label {
    color: var(--orchid-text) !important;
}

.login-panel .input-shell {
    background: #fff !important;
    border-color: #ced9e9 !important;
}

.login-panel .input-shell:focus-within {
    border-color: var(--orchid-blue-600) !important;
    box-shadow: 0 0 0 3px rgba(20,91,199,.13) !important;
}

.login-panel .input-shell > i,
.security-row i {
    color: var(--orchid-navy-800) !important;
}

.login-panel .input-shell input {
    color: var(--orchid-text) !important;
}

.login-panel .input-shell input::placeholder {
    color: #929bb0 !important;
}

.login-panel .password-toggle {
    color: var(--orchid-muted) !important;
}

.login-panel .password-toggle:hover {
    color: var(--orchid-navy-900) !important;
    background: var(--orchid-blue-100) !important;
}

.security-row {
    border-top-color: var(--orchid-line) !important;
}

.security-row span {
    color: var(--orchid-text) !important;
}


body.chat-login-page .loaderbg {
    background: rgba(6,20,61,.43) !important;
}

body.chat-login-page .loader {
    border-color: rgba(255,255,255,.35) !important;
    border-top-color: #fff !important;
}

/* ============================================================
   CHAT - EXTENDED COLOUR COVERAGE
   ============================================================ */
.chat-left-head,
.modal-header {
    color: #fff !important;
    background: linear-gradient(135deg,
        var(--orchid-navy-950),
        var(--orchid-blue-600)) !important;
    box-shadow: 0 8px 20px rgba(9,22,63,.22) !important;
}

#img_search,
.back-circle-btn,
.feature-info-btn,
#SecureImage {
    color: var(--orchid-navy-900) !important;
    background: var(--orchid-blue-100) !important;
    border-color: #d3e0f5 !important;
}

#img_search:hover,
.back-circle-btn:hover {
    color: #fff !important;
    background: var(--orchid-navy-900) !important;
}

.left-search,
.chat-box,
.modal .form-control,
.modal select {
    background: #fff !important;
    border-color: #d4deec !important;
}

.left-search:focus-within,
.chat-box:focus-within,
.modal .form-control:focus,
.modal select:focus {
    border-color: var(--orchid-blue-600) !important;
    box-shadow: 0 0 0 3px rgba(20,91,199,.11) !important;
}

.leftPanel_btn {
    color: var(--orchid-navy-900) !important;
    background: #f3f7fd !important;
    border-color: #cfdbed !important;
}

.leftPanel_btn:hover,
.leftPanel_btn.active {
    color: #fff !important;
    background: linear-gradient(90deg,
        var(--orchid-navy-900),
        var(--orchid-blue-600)) !important;
    border-color: transparent !important;
    box-shadow: 0 5px 13px rgba(9,22,63,.22) !important;
}

#ChatArea::-webkit-scrollbar-thumb,
#chatBox::-webkit-scrollbar-thumb,
#chatMessages::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.emoji-picker::-webkit-scrollbar-thumb {
    background: #b9c8e2 !important;
}

.chat-row-card {
    color: var(--orchid-text) !important;
}

.chat-row-card:hover {
    background: #eaf2ff !important;
    border-color: #d8e4f5 !important;
}

.chat-row-card.selected,
.chat-row-selected,
tr.chat-row-selected .chat-row-card {
    color: var(--orchid-navy-900) !important;
    background: linear-gradient(90deg, #dceaff, #edf4ff) !important;
    border-color: #c7dafa !important;
    border-left-color: var(--orchid-blue-600) !important;
    box-shadow: 0 5px 13px rgba(9,22,63,.10) !important;
}

.chat-row-card .name,
#lblSelectedEmployee,
.message {
    color: var(--orchid-text) !important;
}

.chat-row-card .truncateText,
.last-msg-date,
#rightgroupmembers,
.msg-time,
#topLoader,
#charCount,
.footer,
.footer p {
    color: var(--orchid-muted) !important;
}

#announcementRow {
    color: var(--orchid-navy-900) !important;
    background: linear-gradient(90deg, #f8fbff, #edf4ff) !important;
    border-color: #d8e4f5 !important;
}

.badge.unread-badge {
    color: #fff !important;
    background: linear-gradient(135deg,
        var(--orchid-red-500),
        var(--orchid-red-600)) !important;
    box-shadow: 0 4px 9px rgba(201,0,51,.20) !important;
}

#LabelHeader,
#rightProfileHeader,
#divSendArea,
.footer {
    background: rgba(255,255,255,.98) !important;
    border-color: var(--orchid-line) !important;
}

#chatBox,
.messages,
#chatMessages {
    background:
        radial-gradient(circle at 20% 20%, rgba(31,111,229,.035), transparent 26%),
        linear-gradient(135deg, #f8fbff 0%, #f2f6fc 100%) !important;
}

.msg-left {
    color: var(--orchid-text) !important;
    background: #fff !important;
    border-color: #e1e7f0 !important;
    box-shadow: 0 3px 10px rgba(9,22,63,.06) !important;
}

.msg-right {
    color: var(--orchid-text) !important;
    background: #dceaff !important;
    border-color: #c3d9fa !important;
    box-shadow: 0 3px 10px rgba(9,22,63,.07) !important;
}

.msg-left:has(.secure-lock) {
    background: #edf4ff !important;
}

.msg-right:has(.secure-lock) {
    background: #d6e7ff !important;
}

.senderDisplayName,
.mention-name,
.mention-text,
.secure-lock,
.message a,
.announcement-message a {
    color: var(--orchid-blue-600) !important;
}

.msg-status.read,
.left-msg-status.read {
    color: var(--orchid-blue-600) !important;
}

.reply-box,
.reply-panel {
    color: var(--orchid-text) !important;
    background: #edf4ff !important;
    border-left-color: var(--orchid-blue-600) !important;
}

.date-divider,
.date-divider::before,
.date-divider::after {
    color: var(--orchid-muted) !important;
    border-color: var(--orchid-line) !important;
}

#dateBadge {
    color: #fff !important;
    background: rgba(9,22,63,.90) !important;
    box-shadow: 0 4px 12px rgba(9,22,63,.18) !important;
}

.att-btn,
.emoji-btn {
    color: var(--orchid-muted) !important;
    background: transparent !important;
}

.att-btn:hover,
.emoji-btn:hover {
    color: var(--orchid-blue-600) !important;
    background: var(--orchid-blue-100) !important;
}

.send-btn {
    color: #fff !important;
    background: linear-gradient(135deg,
        var(--orchid-navy-900),
        var(--orchid-blue-600)) !important;
    box-shadow: 0 7px 17px rgba(9,22,63,.25) !important;
}

#dropdownMenu,
#mentionList,
.emoji-picker,
.format-toolbar,
#newGroupMemberSearchResult,
#groupMemberSearchResult {
    background: rgba(255,255,255,.99) !important;
    border-color: #d4deec !important;
    box-shadow: 0 14px 35px rgba(9,22,63,.20) !important;
}

.dropdown_btn,
.format-toolbar button {
    color: var(--orchid-text) !important;
    background: transparent !important;
}

.dropdown_btn:hover,
.mention-item:hover,
.mention-item.active,
.format-toolbar button:hover,
.emoji-item:hover {
    color: var(--orchid-navy-900) !important;
    background: #eaf2ff !important;
}

.Desktop-announcement-card,
.Mobile-announcement-card {
    background: rgba(255,255,255,.98) !important;
    border-color: #dce5f1 !important;
    border-top-color: var(--orchid-blue-600) !important;
    box-shadow: 0 9px 24px rgba(9,22,63,.12) !important;
}

.announcement-title {
    color: var(--orchid-navy-900) !important;
}

.announcement-message {
    color: var(--orchid-text) !important;
}

.announcement-footer,
.announcement-postedby {
    color: var(--orchid-muted) !important;
}

.announcement-for-me {
    background: #f4fbf8 !important;
    border-top-color: var(--orchid-green-500) !important;
}

.announcement-sent-not-for-me {
    background: #fffaf3 !important;
    border-top-color: var(--orchid-orange-500) !important;
}

.modal-backdrop {
    background: var(--orchid-navy-950) !important;
}

.modal-content {
    border-color: #d5dfed !important;
    box-shadow: 0 22px 60px rgba(9,22,63,.30) !important;
}

.modal-body {
    background: #f8fbff !important;
}

.modal-footer {
    background: #fff !important;
    border-top-color: var(--orchid-line) !important;
}

.modal .btn-primary,
.modal .btn-success {
    color: #fff !important;
    background: linear-gradient(90deg,
        var(--orchid-navy-900),
        var(--orchid-blue-600)) !important;
    border-color: transparent !important;
}

#SignalRConnectionMessageInfo {
    color: #8a5610 !important;
    background: #fff8e8 !important;
    border-color: #efd49a !important;
}

.topLoaderimage {
    border-color: #d6deeb !important;
    border-top-color: var(--orchid-blue-600) !important;
}

.chat-topbar {
    background: linear-gradient( 135deg, var(--orchid-navy-950), var(--orchid-navy-900), var(--orchid-blue-600) ) !important;
}
/* ============================================================
   GLOBAL IOS / PWA INPUT AUTO-ZOOM PREVENTION
   ============================================================ */

@media screen and (max-width: 767.98px) {

    html body.MyOrchidMenu input:not([type="checkbox"]):not([type="radio"]),
    html body.MyOrchidMenu textarea,
    html body.MyOrchidMenu select,
    html body.MyOrchidMenu [contenteditable="true"],
    html body.MyOrchidMenu .form-control,
    html body.MyOrchidMenu .select2-search__field,
    html body.MyOrchidMenu #page-content input:not([type="checkbox"]):not([type="radio"]),
    html body.MyOrchidMenu #page-content textarea,
    html body.MyOrchidMenu #page-content select,
    html body.MyOrchidMenu #page-content [contenteditable="true"] {
        font-size: 16px !important;
    }
}