/* ============================================================
   custom.clean.css
   Cleaned for Bootstrap 5 — duplicates removed, BS5-redundant
   rules dropped, last-wins kept where there were conflicts.
   ============================================================ */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────── */
:root {
    --primary:              #2C4180;
    --dark-primary:         #2db3d6;
    --app-primary:          #17265b;
    --app-secondary:        #2db3d6;
    --app-secondary-light:  #b5e7f1;
}

/* ── 2. GLYPHICONS (Bootstrap 3 icon font — keep if still used) */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url("https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot");
    src: url("https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
         url("https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff") format("woff"),
         url("https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf") format("truetype"),
         url("https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular") format("svg")
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased
}

.glyphicon-asterisk:before { content: "\002a" }
.glyphicon-plus:before { content: "\002b" }
.glyphicon-euro:before, .glyphicon-eur:before { content: "\20ac" }
.glyphicon-minus:before { content: "\2212" }
.glyphicon-cloud:before { content: "\2601" }
.glyphicon-envelope:before { content: "\2709" }
.glyphicon-pencil:before { content: "\270f" }
.glyphicon-glass:before { content: "\e001" }
.glyphicon-music:before { content: "\e002" }
.glyphicon-search:before { content: "\e003" }
.glyphicon-heart:before { content: "\e005" }
.glyphicon-star:before { content: "\e006" }
.glyphicon-star-empty:before { content: "\e007" }
.glyphicon-user:before { content: "\e008" }
.glyphicon-film:before { content: "\e009" }
.glyphicon-th-large:before { content: "\e010" }
.glyphicon-th:before { content: "\e011" }
.glyphicon-th-list:before { content: "\e012" }
.glyphicon-ok:before { content: "\e013" }
.glyphicon-remove:before { content: "\e014" }
.glyphicon-zoom-in:before { content: "\e015" }
.glyphicon-zoom-out:before { content: "\e016" }
.glyphicon-off:before { content: "\e017" }
.glyphicon-signal:before { content: "\e018" }
.glyphicon-cog:before { content: "\e019" }
.glyphicon-trash:before { content: "\e020" }
.glyphicon-home:before { content: "\e021" }
.glyphicon-file:before { content: "\e022" }
.glyphicon-time:before { content: "\e023" }
.glyphicon-road:before { content: "\e024" }
.glyphicon-download-alt:before { content: "\e025" }
.glyphicon-download:before { content: "\e026" }
.glyphicon-upload:before { content: "\e027" }
.glyphicon-inbox:before { content: "\e028" }
.glyphicon-play-circle:before { content: "\e029" }
.glyphicon-repeat:before { content: "\e030" }
.glyphicon-refresh:before { content: "\e031" }
.glyphicon-list-alt:before { content: "\e032" }
.glyphicon-lock:before { content: "\e033" }
.glyphicon-flag:before { content: "\e034" }
.glyphicon-headphones:before { content: "\e035" }
.glyphicon-volume-off:before { content: "\e036" }
.glyphicon-volume-down:before { content: "\e037" }
.glyphicon-volume-up:before { content: "\e038" }
.glyphicon-qrcode:before { content: "\e039" }
.glyphicon-barcode:before { content: "\e040" }
.glyphicon-tag:before { content: "\e041" }
.glyphicon-tags:before { content: "\e042" }
.glyphicon-book:before { content: "\e043" }
.glyphicon-bookmark:before { content: "\e044" }
.glyphicon-print:before { content: "\e045" }
.glyphicon-camera:before { content: "\e046" }
.glyphicon-font:before { content: "\e047" }
.glyphicon-bold:before { content: "\e048" }
.glyphicon-italic:before { content: "\e049" }
.glyphicon-text-height:before { content: "\e050" }
.glyphicon-text-width:before { content: "\e051" }
.glyphicon-align-left:before { content: "\e052" }
.glyphicon-align-center:before { content: "\e053" }
.glyphicon-align-right:before { content: "\e054" }
.glyphicon-align-justify:before { content: "\e055" }
.glyphicon-list:before { content: "\e056" }
.glyphicon-indent-left:before { content: "\e057" }
.glyphicon-indent-right:before { content: "\e058" }
.glyphicon-facetime-video:before { content: "\e059" }
.glyphicon-picture:before { content: "\e060" }
.glyphicon-map-marker:before { content: "\e062" }
.glyphicon-adjust:before { content: "\e063" }
.glyphicon-tint:before { content: "\e064" }
.glyphicon-edit:before { content: "\e065" }
.glyphicon-share:before { content: "\e066" }
.glyphicon-check:before { content: "\e067" }
.glyphicon-move:before { content: "\e068" }
.glyphicon-step-backward:before { content: "\e069" }
.glyphicon-fast-backward:before { content: "\e070" }
.glyphicon-backward:before { content: "\e071" }
.glyphicon-play:before { content: "\e072" }
.glyphicon-pause:before { content: "\e073" }
.glyphicon-stop:before { content: "\e074" }
.glyphicon-forward:before { content: "\e075" }
.glyphicon-fast-forward:before { content: "\e076" }
.glyphicon-step-forward:before { content: "\e077" }
.glyphicon-eject:before { content: "\e078" }
.glyphicon-chevron-left:before { content: "\e079" }
.glyphicon-chevron-right:before { content: "\e080" }
.glyphicon-plus-sign:before { content: "\e081" }
.glyphicon-minus-sign:before { content: "\e082" }
.glyphicon-remove-sign:before { content: "\e083" }
.glyphicon-ok-sign:before { content: "\e084" }
.glyphicon-question-sign:before { content: "\e085" }
.glyphicon-info-sign:before { content: "\e086" }
.glyphicon-screenshot:before { content: "\e087" }
.glyphicon-remove-circle:before { content: "\e088" }
.glyphicon-ok-circle:before { content: "\e089" }
.glyphicon-ban-circle:before { content: "\e090" }
.glyphicon-arrow-left:before { content: "\e091" }
.glyphicon-arrow-right:before { content: "\e092" }
.glyphicon-arrow-up:before { content: "\e093" }
.glyphicon-arrow-down:before { content: "\e094" }
.glyphicon-share-alt:before { content: "\e095" }
.glyphicon-resize-full:before { content: "\e096" }
.glyphicon-resize-small:before { content: "\e097" }
.glyphicon-exclamation-sign:before { content: "\e101" }
.glyphicon-gift:before { content: "\e102" }
.glyphicon-leaf:before { content: "\e103" }
.glyphicon-fire:before { content: "\e104" }
.glyphicon-eye-open:before { content: "\e105" }
.glyphicon-eye-close:before { content: "\e106" }
.glyphicon-warning-sign:before { content: "\e107" }
.glyphicon-plane:before { content: "\e108" }
.glyphicon-calendar:before { content: "\e109" }
.glyphicon-random:before { content: "\e110" }
.glyphicon-comment:before { content: "\e111" }
.glyphicon-magnet:before { content: "\e112" }
.glyphicon-chevron-up:before { content: "\e113" }
.glyphicon-chevron-down:before { content: "\e114" }
.glyphicon-retweet:before { content: "\e115" }
.glyphicon-shopping-cart:before { content: "\e116" }
.glyphicon-folder-close:before { content: "\e117" }
.glyphicon-folder-open:before { content: "\e118" }
.glyphicon-resize-vertical:before { content: "\e119" }
.glyphicon-resize-horizontal:before { content: "\e120" }
.glyphicon-hdd:before { content: "\e121" }
.glyphicon-bullhorn:before { content: "\e122" }
.glyphicon-bell:before { content: "\e123" }
.glyphicon-certificate:before { content: "\e124" }
.glyphicon-thumbs-up:before { content: "\e125" }
.glyphicon-thumbs-down:before { content: "\e126" }
.glyphicon-hand-right:before { content: "\e127" }
.glyphicon-hand-left:before { content: "\e128" }
.glyphicon-hand-up:before { content: "\e129" }
.glyphicon-hand-down:before { content: "\e130" }
.glyphicon-circle-arrow-right:before { content: "\e131" }
.glyphicon-circle-arrow-left:before { content: "\e132" }
.glyphicon-circle-arrow-up:before { content: "\e133" }
.glyphicon-circle-arrow-down:before { content: "\e134" }
.glyphicon-globe:before { content: "\e135" }
.glyphicon-wrench:before { content: "\e136" }
.glyphicon-tasks:before { content: "\e137" }
.glyphicon-filter:before { content: "\e138" }
.glyphicon-briefcase:before { content: "\e139" }
.glyphicon-fullscreen:before { content: "\e140" }
.glyphicon-dashboard:before { content: "\e141" }
.glyphicon-paperclip:before { content: "\e142" }
.glyphicon-heart-empty:before { content: "\e143" }
.glyphicon-link:before { content: "\e144" }
.glyphicon-phone:before { content: "\e145" }
.glyphicon-pushpin:before { content: "\e146" }
.glyphicon-usd:before { content: "\e148" }
.glyphicon-gbp:before { content: "\e149" }
.glyphicon-sort:before { content: "\e150" }
.glyphicon-sort-by-alphabet:before { content: "\e151" }
.glyphicon-sort-by-alphabet-alt:before { content: "\e152" }
.glyphicon-sort-by-order:before { content: "\e153" }
.glyphicon-sort-by-order-alt:before { content: "\e154" }
.glyphicon-sort-by-attributes:before { content: "\e155" }
.glyphicon-sort-by-attributes-alt:before { content: "\e156" }
.glyphicon-unchecked:before { content: "\e157" }
.glyphicon-expand:before { content: "\e158" }
.glyphicon-collapse-down:before { content: "\e159" }
.glyphicon-collapse-up:before { content: "\e160" }
.glyphicon-log-in:before { content: "\e161" }
.glyphicon-flash:before { content: "\e162" }
.glyphicon-log-out:before { content: "\e163" }
.glyphicon-new-window:before { content: "\e164" }
.glyphicon-record:before { content: "\e165" }
.glyphicon-save:before { content: "\e166" }
.glyphicon-open:before { content: "\e167" }
.glyphicon-saved:before { content: "\e168" }
.glyphicon-import:before { content: "\e169" }
.glyphicon-export:before { content: "\e170" }
.glyphicon-send:before { content: "\e171" }
.glyphicon-floppy-disk:before { content: "\e172" }
.glyphicon-floppy-saved:before { content: "\e173" }
.glyphicon-floppy-remove:before { content: "\e174" }
.glyphicon-floppy-save:before { content: "\e175" }
.glyphicon-floppy-open:before { content: "\e176" }
.glyphicon-credit-card:before { content: "\e177" }
.glyphicon-transfer:before { content: "\e178" }
.glyphicon-cutlery:before { content: "\e179" }
.glyphicon-header:before { content: "\e180" }
.glyphicon-compressed:before { content: "\e181" }
.glyphicon-earphone:before { content: "\e182" }
.glyphicon-phone-alt:before { content: "\e183" }
.glyphicon-tower:before { content: "\e184" }
.glyphicon-stats:before { content: "\e185" }
.glyphicon-sd-video:before { content: "\e186" }
.glyphicon-hd-video:before { content: "\e187" }
.glyphicon-subtitles:before { content: "\e188" }
.glyphicon-sound-stereo:before { content: "\e189" }
.glyphicon-sound-dolby:before { content: "\e190" }
.glyphicon-sound-5-1:before { content: "\e191" }
.glyphicon-sound-6-1:before { content: "\e192" }
.glyphicon-sound-7-1:before { content: "\e193" }
.glyphicon-copyright-mark:before { content: "\e194" }
.glyphicon-registration-mark:before { content: "\e195" }
.glyphicon-cloud-download:before { content: "\e197" }
.glyphicon-cloud-upload:before { content: "\e198" }
.glyphicon-tree-conifer:before { content: "\e199" }
.glyphicon-tree-deciduous:before { content: "\e200" }
.glyphicon-cd:before { content: "\e201" }
.glyphicon-save-file:before { content: "\e202" }
.glyphicon-open-file:before { content: "\e203" }
.glyphicon-level-up:before { content: "\e204" }
.glyphicon-copy:before { content: "\e205" }
.glyphicon-paste:before { content: "\e206" }
.glyphicon-alert:before { content: "\e209" }
.glyphicon-equalizer:before { content: "\e210" }
.glyphicon-king:before { content: "\e211" }
.glyphicon-queen:before { content: "\e212" }
.glyphicon-pawn:before { content: "\e213" }
.glyphicon-bishop:before { content: "\e214" }
.glyphicon-knight:before { content: "\e215" }
.glyphicon-baby-formula:before { content: "\e216" }
.glyphicon-tent:before { content: "\26fa" }
.glyphicon-blackboard:before { content: "\e218" }
.glyphicon-bed:before { content: "\e219" }
.glyphicon-apple:before { content: "\f8ff" }
.glyphicon-erase:before { content: "\e221" }
.glyphicon-hourglass:before { content: "\231b" }
.glyphicon-lamp:before { content: "\e223" }
.glyphicon-duplicate:before { content: "\e224" }
.glyphicon-piggy-bank:before { content: "\e225" }
.glyphicon-scissors:before { content: "\e226" }
.glyphicon-bitcoin:before, .glyphicon-btc:before, .glyphicon-xbt:before { content: "\e227" }
.glyphicon-yen:before, .glyphicon-jpy:before { content: "\00a5" }
.glyphicon-ruble:before, .glyphicon-rub:before { content: "\20bd" }
.glyphicon-scale:before { content: "\e230" }
.glyphicon-ice-lolly:before { content: "\e231" }
.glyphicon-ice-lolly-tasted:before { content: "\e232" }
.glyphicon-education:before { content: "\e233" }
.glyphicon-option-horizontal:before { content: "\e234" }
.glyphicon-option-vertical:before { content: "\e235" }
.glyphicon-menu-hamburger:before { content: "\e236" }
.glyphicon-modal-window:before { content: "\e237" }
.glyphicon-oil:before { content: "\e238" }
.glyphicon-grain:before { content: "\e239" }
.glyphicon-sunglasses:before { content: "\e240" }
.glyphicon-text-size:before { content: "\e241" }
.glyphicon-text-color:before { content: "\e242" }
.glyphicon-text-background:before { content: "\e243" }
.glyphicon-object-align-top:before { content: "\e244" }
.glyphicon-object-align-bottom:before { content: "\e245" }
.glyphicon-object-align-horizontal:before { content: "\e246" }
.glyphicon-object-align-left:before { content: "\e247" }
.glyphicon-object-align-vertical:before { content: "\e248" }
.glyphicon-object-align-right:before { content: "\e249" }
.glyphicon-triangle-right:before { content: "\e250" }
.glyphicon-triangle-left:before { content: "\e251" }
.glyphicon-triangle-bottom:before { content: "\e252" }
.glyphicon-triangle-top:before { content: "\e253" }
.glyphicon-console:before { content: "\e254" }
.glyphicon-superscript:before { content: "\e255" }
.glyphicon-subscript:before { content: "\e256" }
.glyphicon-menu-left:before { content: "\e257" }
.glyphicon-menu-right:before { content: "\e258" }
.glyphicon-menu-down:before { content: "\e259" }
.glyphicon-menu-up:before { content: "\e260" }

/* ── 3. GLOBAL OVERRIDES ────────────────────────────────────── */
/* Site-wide RTL text alignment */
* { font-family: "Tajawal", sans-serif; text-align: right !important; }

body {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    line-height: 1.471;
}

a { color: black; font-size: 1rem; }
a:hover { color: var(--app-primary); }
a:hover, a:focus { text-decoration: none; }

input { text-align: right !important; }

input[type=date],
input[type=time] { text-align-last: justify; }

input[type=file] { font-size: 16px; font-weight: bold; }

textarea { padding: 10px; resize: none; vertical-align: top; }
textarea:focus { outline-style: solid; outline-width: 2px; }

/* ── 4. LAYOUT ──────────────────────────────────────────────── */

/* Force full-width container */
.container { width: 100%; padding: 0; max-width: 100% }

.left_col { background: white; }

.no-padding { padding: 0 !important }

.col-md-55 { width: 50%; margin-bottom: 10px }
@media (min-width: 768px)  { .col-md-55 { width: 20% } }
@media (min-width: 992px)  { .col-md-55 { width: 20% } }
@media (min-width: 1200px) { .col-md-55 { width: 20% } }

.center-margin { margin: 0 auto; float: none !important }

.display-layout { display: flex; }

/* ── 5. NAVIGATION — LEFT SIDEBAR ──────────────────────────── */

/* --- Medium nav (expanded) --- */
.nav-md .container.body .col-md-3.left_col {
    min-height: 100%;
    width: 230px;
    padding: 0;
    position: absolute;
    display: flex;
    right: 0;
    z-index: 1
}

.nav-md .container.body .col-md-3.left_col.menu_fixed {
    height: 100%;
    position: fixed
}

.nav-md .container.body .right_col {
    padding: 10px 20px 0;
    margin-right: 230px;
    border-right: 3px solid gray;
}

.nav_title {
    width: 230px;
    float: left;
    background: #00003f;
    border-radius: 0;
    padding: 0
}

.main_container .top_nav {
    display: block;
    margin-left: 230px
}

/* --- Small nav (collapsed) --- */
.nav-sm .container.body .col-md-3.left_col {
    min-height: 100%;
    width: 70px;
    padding: 0;
    z-index: 9999;
    right: 0;
    position: absolute
}

.nav-sm .container.body .col-md-3.left_col.menu_fixed {
    position: fixed;
    height: 100%
}

.nav-sm .container.body .col-md-3.left_col .mCSB_container,
.nav-sm .container.body .col-md-3.left_col .mCustomScrollBox {
    overflow: visible
}

.nav-sm .hidden-small { visibility: hidden }

.nav-sm .container.body .right_col {
    padding: 10px 20px;
    margin-right: 70px;
    z-index: 2
}

.nav-sm .navbar.nav_title { width: 70px }
.nav-sm .navbar.nav_title a span { display: none }
.nav-sm .navbar.nav_title a i { font-size: 27px; margin: 13px 0 0 3px }

.nav-sm .main_container .top_nav {
    display: block;
    margin-left: 70px;
    z-index: 2
}

.nav-sm .nav.side-menu li a {
    text-align: center !important;
    font-weight: bold;
    font-size: 12px;
    padding: 10px 5px;
}

.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active-sm {
    border-right: 5px solid var(--app-primary)
}

.nav-sm ul.nav.child_menu ul,
.nav-sm .nav.side-menu li.active-sm ul ul {
    position: static;
    width: 200px;
    background: none
}

.nav-sm>.nav.side-menu>li.active-sm>a { color: #1ABB9C !important }

.nav-sm .nav.side-menu li a i.toggle-up { display: none !important }

.nav-sm .nav.side-menu li a i {
    font-size: 25px !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 5px
}

.nav-sm ul.nav.child_menu {
    position: static;
    width: 100%;
    background: white;
    display: none
}

.nav-sm ul.nav.child_menu li { padding: 0 1px }
.nav-sm ul.nav.child_menu li a { text-align: center !important }
.nav-sm .profile { display: none }
.nav-sm .menu_section { margin: 0 }
.nav-sm span.fa, .nav-sm .menu_section h3 { display: none }
.nav-sm li li span.fa { display: inline-block }
.nav-sm footer { margin-right: 70px }

/* --- Responsive breakpoints --- */
@media (max-width: 991px) {
    .nav-md .container.body .right_col,
    .nav-md .container.body .top_nav { width: 100%; margin: 0 }
    .nav-md .container.body .col-md-3.left_col { display: none }
    .nav-md .container.body .right_col { width: 100%; padding-right: 0 }
    .right_col { padding: 10px !important }
    .item { display: block }
}

@media (min-width: 992px) {
    footer { margin-right: 230px }
}

/* ── 6. TOP NAV BAR ─────────────────────────────────────────── */
.nav_menu {
    display: flex;
    justify-content: space-between;
    background: white;
    border-bottom: 1px solid #D9DEE4;
    width: 100%;
    position: relative
}

@media (min-width: 480px) {
    .nav_menu { position: static }
    .item { display: block }
    .top_nav .navbar-right li { position: relative }
}

.top_nav .navbar-right { margin: 13px; width: auto; float: right }
.top_nav .navbar-right li { display: inline-block; position: static }
.top_nav .dropdown-menu li { width: 100% }
.top_nav li a i { font-size: 15px }

.navbar-static-top { position: fixed; top: 0; width: 100% }

.info-number .badge {
    font-size: 10px;
    font-weight: normal;
    line-height: 13px;
    padding: 2px 6px;
    position: absolute;
    right: -12px;
    top: -8px
}

@media (min-width: 360px) and (max-width: 812px) {
    .info-number .badge { right: 0px; top: -7px }
    .tile, .graph { zoom: 71%; height: inherit }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .info-number .badge { right: -2px; top: -6px }
}

.toggle { margin: 0 }
.toggle a { padding: 15px 15px 0; margin: 0; cursor: pointer }
.toggle a i { font-size: 26px }

.navbar-nav>li>a,
.navbar-brand {
    color: #fff !important;
    font-weight: 500;
    margin-left: 0 !important;
    line-height: 32px
}

.nav.navbar-nav>li>a { color: #515356 !important }
.nav.top_menu>li>a { position: relative; display: block; padding: 10px 15px; color: #34495E !important }
.nav>li>a:hover, .nav>li>a:focus { background-color: transparent }

/* ── 7. SIDE MENU ITEMS ─────────────────────────────────────── */
.nav.side-menu>li {
    position: relative;
    display: block;
    cursor: pointer;
    direction: initial;
}

.nav.side-menu>li>a { margin-bottom: 6px }
.nav.side-menu>li>a:hover { color: var(--app-primary) !important; text-decoration: none; background: transparent }

.nav.side-menu>li>a,
.nav.child_menu>li>a {
    color: black;
    font-weight: bold;
    font-size: 15px;
    direction: rtl;
    text-align: right !important;
    text-decoration: none;
}

.nav.side-menu>li.active>a {
    text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
    background: var(--app-primary);
    color: white !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
}

.nav.child_menu { display: none }

.nav.child_menu li:hover,
.nav.child_menu li.active { background-color: rgba(255, 255, 255, 0.06) }

.nav.child_menu li { padding-right: 36px }

.nav-md ul.nav.child_menu li:before {
    background: transparent;
    border: 2px solid #8297a9;
    bottom: auto;
    content: "";
    height: 8px;
    right: 23px;
    margin-top: 15px;
    position: absolute;
    left: auto;
    width: 8px;
    z-index: 1;
    border-radius: 50%
}

.nav-md ul.nav.child_menu li:after {
    border-left: 1px solid #b8c8d6;
    bottom: 0;
    left: 27px;
    position: absolute;
    top: 0
}

.nav-md ul.nav.child_menu li:last-child::after { bottom: 50% }

.nav.child_menu li li:hover,
.nav.child_menu li li.active { background: none }

.nav.child_menu li li a:hover,
.nav.child_menu li li a.active { color: #fff }

.nav.child_menu>li>a { font-size: 14px; padding: 9px; text-decoration:none; }

.nav li.current-page { background: rgba(255, 255, 255, 0.05) }
.nav li li li.current-page { background: none }
.nav li li.current-page a { color: var(--app-primary) }

.nav>li>a { position: relative; display: block; padding: 13px 15px 12px }

.side-menu a span.fa {
    float: left;
    text-align: center;
    margin-top: 5px;
    font-size: 10px;
    min-width: inherit;
    color: black !important;
}

.side-menu li.active a span.fa {
    text-align: left !important;
    margin-right: 4px;
    color: white !important;
}

.main_menu .fa {
    opacity: .99;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/* ── 8. SIDEBAR CHROME ──────────────────────────────────────── */
.site_title {
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 400;
    font-size: 22px;
    width: 100%;
    color: #ECF0F1 !important;
    margin: 0;
    line-height: 59px;
    display: block;
    height: 55px;
    text-align: center !important;
}

.site_title:hover, .site_title:focus { text-decoration: none }
.site_title i { border: 1px solid #EAEAEA; padding: 5px 6px; border-radius: 50% }

.menu_section { margin-bottom: 35px }
.menu_section h3 {
    padding-left: 23px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: bold;
    font-size: 11px;
    margin: 0;
    text-shadow: 1px 1px #000
}
.menu_section>ul { display: block; text-align: left; padding-right: 0 }

.sidebar-header { border-bottom: 0; margin-top: 46px }
.sidebar-header:first-of-type { margin-top: 0 }

.sidebar-footer {
    bottom: 0;
    clear: both;
    display: block;
    padding: 5px 0 0;
    position: fixed;
    width: 230px;
    background: #00003f;
}
.sidebar-footer a {
    padding: 7px 0 3px;
    text-align: center;
    width: 25%;
    font-size: 17px;
    display: block;
    float: left;
    background: #172D44
}
.sidebar-footer a:hover { background: #425567 }

/* ── 9. PROFILE WIDGET ──────────────────────────────────────── */
.profile_pic { width: 35%; float: left }

.img-circle.profile_img {
    width: 70%;
    background: #fff;
    margin-left: 15%;
    z-index: 1000;
    position: inherit;
    margin-top: 20px;
    border: 1px solid rgba(52, 73, 94, 0.44);
    padding: 4px
}

.profile_info { padding: 25px 10px 10px; text-align: left }
.profile_info span { font-size: 13px; line-height: 30px; color: white; font-weight: bold }
.profile_info h2 { font-size: 14px; color: white; margin: 0; font-weight: 300 }

.profile.img_2 { text-align: center }
.profile.img_2 .profile_pic { width: 100% }
.profile.img_2 .profile_pic .img-circle.profile_img { width: 50%; margin: 10px 0 0 }
.profile.img_2 .profile_info { padding: 15px 10px 0; width: 100%; margin-bottom: 10px; float: right }

.profile-bottom { background: #F2F5F7; padding: 9px 0; border-top: 1px solid #E6E9ED }

/* ── 10. PAGE TITLE ─────────────────────────────────────────── */
.page-title { width: 100%; height: 65px; padding: 10px 0 }
.page-title .title_left { display: block; color: black }
.page-title .title_left h3 { margin: 9px 0 }
.page-title .title_right { width: 55%; float: left; display: block }
.page-title .title_right .pull-right { margin: 10px 0; float: right }

/* ── 11. PANEL TOOLBOX ──────────────────────────────────────── */
.panel_toolbox { float: right; padding-right: 0 }
.panel_toolbox>li { float: left; cursor: pointer }
.panel_toolbox>li>a { padding: 5px; font-size: 14px }
.panel_toolbox>li>a:hover { background: #F5F7FA !important; color: black !important }
.panel_toolbox>li>a.add-btn.bg-app-primary:hover { background-color: var(--dark-primary) !important; color: white !important }
.panel_toolbox>li>a:focus { color: white !important }

/* ── 12. X-PANEL / X-TITLE (content panels) ────────────────── */
.x_panel {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    display: inline-block;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    opacity: 1;
    transition: all .2s ease
}

.x_title {
    border-bottom: 2px solid #E6E9ED;
    padding: 1px 5px 6px;
    margin-bottom: 10px
}

.x_title .filter { width: 40%; float: right }

.x_title h2 {
    margin: 5px 0 6px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: black;
    font-weight: bold;
}

.x_title h2 small { margin-left: 10px }
.x_title span { color: #BDBDBD }

.x_content {
    padding: 0 3px 6px;
    position: relative;
    width: 100%;
    clear: both;
    margin-top: 5px
}

.x_content h4 { font-size: 16px; font-weight: 500 }
.x_panel h3 { color: var(--app-primary) }

@media (max-width: 1200px) {
    .x_title h2 { width: 62%; font-size: 17px }
    .tile, .graph { zoom: 76%; height: inherit }
    .item { display: block }
}

@media (max-width: 1270px) and (min-width: 192px) {
    .x_title h2 small { display: none }
}

/* ── 13. TOP SEARCH ─────────────────────────────────────────── */
.top_search { padding: 0 }
.top_search .form-control {
    border-right: 0;
    box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.075);
    border-radius: 25px 0 0 25px;
    padding-left: 20px;
    border: 1px solid rgba(221, 226, 232, 0.49)
}
.top_search .form-control:focus { border: 1px solid rgba(221, 226, 232, 0.49); border-right: 0 }
.top_search .input-group-btn button {
    border-radius: 0 25px 25px 0;
    border: 1px solid rgba(221, 226, 232, 0.49);
    border-left: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    color: #93A2B2;
    margin-bottom: 0 !important
}

/* ── 14. UTILITY / HELPER CLASSES ───────────────────────────── */
.line_30 { line-height: 30px }
.main_menu_side { padding: 0 }
.main_content { padding: 10px 20px }
.main_container { padding: 0 }
.overflow_hidden { overflow: hidden }
.fixed_height_320 { height: 320px }
.fixed_height_390 { height: 390px }
.fixed_height_200 { height: 200px }
.inl-bl { display: inline-block }
.no-padding { padding: 0 !important }
.left { float: left }
.calendar.left { float: initial !important }
.alignleft { float: left; margin-right: 15px }
.alignright { float: right; margin-left: 15px }

/* Color utilities */
.blue   { color: #3498DB }
.purple { color: #9B59B6 }
.green  { color: #1ABB9C }
.aero   { color: #9CC2CB }
.red    { color: #E74C3C }
.dark   { color: #34495E }

.border-blue   { border-color: #3498DB !important }
.border-purple { border-color: #9B59B6 !important }
.border-green  { border-color: #1ABB9C !important }
.border-aero   { border-color: #9CC2CB !important }
.border-red    { border-color: #E74C3C !important }
.border-dark   { border-color: #34495E !important }

.bg-white    { background: #fff !important; border: 1px solid #fff !important; color: #73879C }
.bg-green    { background: #1ABB9C !important; border: 1px solid #1ABB9C !important; color: #fff }
.bg-red      { background: #E74C3C !important; border: 1px solid #E74C3C !important; color: #fff }
.bg-blue     { background: #3498DB !important; border: 1px solid #3498DB !important; color: #fff }
.bg-orange   { background: #F39C12 !important; border: 1px solid #F39C12 !important; color: #fff }
.bg-purple   { background: #9B59B6 !important; border: 1px solid #9B59B6 !important; color: #fff }
.bg-blue-sky { background: #50C1CF !important; border: 1px solid #50C1CF !important; color: #fff }

.bg-custom-light    { background-color: #F8F9FA }
.bg-smowhite        { background-color: #f5f4f1 }
.bg-gray            { background-color: #F8F9FA; color: var(--app-primary) }
.bg-app-primary     { background-color: var(--primary) !important }
.bg-app-primary:focus,
.bg-app-primary:hover { background-color: var(--dark-primary) !important }
.bg-app-secondary   { background-color: var(--app-secondary) }
.bg-btn-primary     { background-color: var(--app-primary); color: white }
.bg-login {
    background-size: cover;
    background-image: url(https://www.shutterstock.com/image-vector/hud-interface-virtual-hologram-future-260nw-764856502.jpg);
}
.overlay-login { background-color: black; height: 100% }
.bg-blur {
    box-shadow: inset 0 0 2px #fefefed1;
    -webkit-backdrop-filter: saturate(200%) blur(30px);
    backdrop-filter: saturate(200%) blur(30px);
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.app-bg-secondary-light  { background-color: var(--app-secondary-light) }
.app-border-primary      { border-color: var(--app-primary) !important }

.text-app-primary        { color: var(--app-primary) }
.text-font               { color: black !important; font-size: 17px; font-weight: bold }
.text-hover:hover        { color: var(--app-primary); cursor: pointer }

.bg-secondary-text-primary { color: var(--app-primary); background-color: var(--app-secondary) }

/* Progress */
.progress-bar-dark { background-color: #34495E !important }
.progress-bar-gray { background-color: #BDC3C7 !important }
.progress-bar-info    { background-color: #3498DB }
.progress-bar-success { background-color: #26B99A }
.progress { border-radius: 0 }

/* ── 15. TYPOGRAPHY ─────────────────────────────────────────── */
span.section {
    display: block;
    width: 100%;
    padding: 0 0 12px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    line-height: inherit;
    color: var(--app-primary);
    border-bottom: 1px solid #e5e5e5;
}

.ln_solid {
    border-top: 1px solid #e5e5e5;
    color: #ffffff;
    background-color: #ffffff;
    margin: 20px 0
}

/* ── 16. FORMS ──────────────────────────────────────────────── */
.form-control {
    width: 100%;
    font-size: 15px;
    color: black;
    font-weight: bold;
}

.form-control:focus, .form-select:focus {
    border-color: var(--app-primary);
    border-width: 1px;
    box-shadow: none !important;
}

.form-select { font-weight: bold }

.form-switch .form-check-input { font-size: 19px }

.form-check-input { width: 1.4em; height: 1.4em }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-secondary) }
.form-check-input:focus { box-shadow: 0 0 0 .25rem rgb(224 167 93 / 28%) }
.form-checkbox-control:checked { background-color: var(--app-primary) }

label { font-size: 16px; font-weight: bold; color: black }
.custom-labels label { margin-left: 2% }
.label-align { text-align: left; font-weight: bold; font-size: 16px; color: black }
.form-horizontal .control-label { padding-top: 8px }
.form-horizontal .form-group { margin-right: 0; margin-left: 0 }

option { font-weight: bold; font-size: 16px; color: black }

.form-control-feedback {
    position: absolute;
    margin-top: 8px;
    height: 23px;
    color: #bbb;
    line-height: 24px;
    font-size: 15px;
    top: 0;
    width: 34px;
    text-align: center
}
.form-control-feedback.left  { border-right: 1px solid #ccc; left: 13px }
.form-control-feedback.right { border-left: 1px solid #ccc; right: 13px }
.form-control.has-feedback-left  { padding-left: 45px }
.form-control.has-feedback-right { padding-right: 45px }

::placeholder { color: var(--primary) !important }

.validate { margin-top: 10px }

.invalid-form-error-message { margin-top: 10px; padding: 5px }
.invalid-form-error-message.filled { border-left: 2px solid #E74C3C }

p.parsley-success { color: #468847; background-color: #DFF0D8; border: 1px solid #D6E9C6 }
p.parsley-error   { color: #B94A48; background-color: #F2DEDE; border: 1px solid #EED3D7 }
ul.parsley-errors-list { list-style: none; color: #E74C3C; padding-left: 0 }

input.parsley-error,
textarea.parsley-error,
select.parsley-error { background: #FAEDEC; border: 1px solid #E85445 }

.bad input, .bad select, .bad textarea {
    border: 1px solid #CE5454;
    box-shadow: 0 0 4px -2px #CE5454;
    position: relative;
    left: 0;
    animation: .7s 1 shake linear;
}

.item { display: flex }
.item input, .item textarea { transition: 0.42s }

.item .alert {
    float: left;
    margin: 0 0 0 20px;
    padding: 3px 10px;
    color: #FFF;
    border-radius: 3px 4px 4px 3px;
    background-color: #CE5454;
    max-width: 170px;
    white-space: pre;
    position: relative;
    left: -15px;
    opacity: 0;
    z-index: 1;
    transition: 0.15s ease-out
}

.item .alert::after {
    content: '';
    display: block;
    height: 0; width: 0;
    border-color: transparent #CE5454 transparent transparent;
    border-style: solid;
    border-width: 11px 7px;
    position: absolute;
    left: -13px; top: 1px
}

.item.bad .alert { left: 0; opacity: 1 }

@media (max-width: 414px) {
    .item { display: block }
    .label-align { text-align: left }
}

/* ── 17. BUTTONS ────────────────────────────────────────────── */
.btn { border-radius: 3px; font-weight: bold }

a.btn-success,
a.btn-primary,
a.btn-warning,
a.btn-danger { color: #fff !important }

.btn-success { background: #26B99A; border: 1px solid #169F85 }
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active { background: #169F85 }

.btn-dark { color: #E9EDEF; background-color: #4B5F71; border-color: #364B5F }
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active { color: #fff; background-color: #394D5F; border-color: #394D5F }

.btn-round { border-radius: 30px }

.btn.bg-btn-primary:hover { background-color: #30489a }

.add-btn { width: 35px; height: 35px; cursor: pointer }
.add-btn.bg-app-primary:hover { background-color: var(--dark-primary) }
.add-btn.bg-success:hover     { background-color: rgb(22 86 57) !important }
.add-btn.bg-primary:hover     { background-color: rgb(18 92 202) !important }

button.close {
    background: #dc3545;
    color: white;
    font-weight: bold;
    font-size: 18px;
    margin: 0;
    border: 2px solid;
    border-radius: 5px;
}

/* ── 18. TABLES ─────────────────────────────────────────────── */
table th, table td { color: black }

table.no-margin .progress { margin-bottom: 0 }

table thead { background: #f7f7f7 }

table tbody tr:hover td {
    background: rgba(38, 185, 154, 0.07);
    border-top: 1px solid rgba(38, 185, 154, 0.11);
    border-bottom: 1px solid rgba(38, 185, 154, 0.11)
}

table tbody tr.selected { background: rgba(38, 185, 154, 0.16) }
table tbody tr.selected td {
    border-top: 1px solid rgba(38, 185, 154, 0.4);
    border-bottom: 1px solid rgba(38, 185, 154, 0.4)
}

tbody, td, tfoot, th, thead, tr {
    border-color: #eee;
    border-style: solid;
    border-width: 1px;
}

table.dataTable tbody td, tbody td { font-size: 18px }

table.display { margin: 0 auto; clear: both; width: 100% }
table.display thead th {
    background-color: white;
    padding: 14px !important;
    border-bottom: 1px solid black;
    font-weight: bold;
    cursor: pointer
}
table.display tfoot th { padding: 3px 18px 3px 10px; border-top: 1px solid black; font-weight: bold }
table.display td { padding: 12px !important }
table.display td.center { text-align: center }

.table.display thead th { background-color: white !important }

table.custom-table thead th { font-size: 16px; font-weight: bold }
table.custom-table tbody td { font-size: 15px; font-weight: bold }
table.custom-table tr td a { font-weight: bold !important }

table.tile_info {
    width: 100%;
    padding: 10px 15px;
}
table.tile_info td { text-align: left; padding: 1px; font-size: 15px }
table.tile_info td p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; line-height: 28px }
table.tile_info td i { margin-right: 8px; font-size: 17px; float: left; width: 18px; line-height: 28px }
table.tile_info td:first-child { width: 83% }
table.tile_info span.right { margin-right: 0; float: right; position: absolute; right: 4% }

@media (min-width: 192px) and (max-width: 1270px) {
    table.tile_info span.right { margin-right: 7px; float: left }
}

/* Table row colors */
.table-custom-danger   { background: #f8d7da !important }
.table-custom-primary  { background: #cfe2ff !important }
.table-custom-warning  { background-color: #fff3cd !important }
.table-custom-success  { background-color: #d1e7dd !important }

td span { line-height: 28px }
td p { margin-bottom: 0 }

/* ── 19. DATATABLES ─────────────────────────────────────────── */
.dataTables_wrapper { position: relative; clear: both; zoom: 1 }

.dataTables_processing {
    position: absolute;
    top: 50%; left: 50%;
    width: 250px; height: 30px;
    margin-left: -125px; margin-top: -15px;
    padding: 14px 0 2px;
    border: 1px solid #ddd;
    text-align: center; color: #999;
    font-size: 14px;
    background-color: white
}

.dataTables_info { width: 60%; float: left }

.dataTables_paginate { float: none !important; margin-top: 10px }

.dataTables_wrapper .dataTables_paginate .paginate_button { padding: 0 !important }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { border: 1px solid; background: transparent }

.dataTables_wrapper .dataTables_length select { width: 70px; margin: 0 7px }

#myTable_length label { display: flex; align-items: center; margin-bottom: 15px }
#myTable_wrapper>.row:nth-child(3) .col-md-5 { display: none }
#myTable_wrapper>.row:nth-child(1) .col-md-6:nth-child(2) { display: none }

table.dataTable th.focus,
table.dataTable td.focus { outline: 2px solid #1ABB9C !important; outline-offset: -1px }

/* DataTable sorting — RTL arrow positions */
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting_asc_disabled,
table.dataTable thead>tr>th.sorting_desc_disabled,
table.dataTable thead>tr>td.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting_asc_disabled,
table.dataTable thead>tr>td.sorting_desc_disabled {
    cursor: pointer;
    position: relative;
    padding-right: 10px;
    padding-left: 26px;
}

table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
    right: auto;
    left: 10px;
}

.dataTables_scrollBody { margin-top: -1px; -webkit-overflow-scrolling: touch }

/* ── 20. PAGINATION ─────────────────────────────────────────── */
.pagination { flex-direction: row-reverse !important }

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: white !important;
    background-color: var(--primary) !important;
    border-color: #0d6efd;
}

.page-link:focus {
    color: white;
    background-color: var(--primary);
    box-shadow: none;
}

.paging_full_numbers { width: 400px; height: 22px; line-height: 22px }
.paging_full_numbers a:active { outline: none }
.paging_full_numbers a:hover { text-decoration: none }

.paging_full_numbers a.paginate_button,
.paging_full_numbers a.paginate_active {
    border: 1px solid #aaa;
    border-radius: 5px;
    padding: 2px 5px;
    margin: 0 3px;
    cursor: pointer
}

.paging_full_numbers a.paginate_button { background-color: #ddd }
.paging_full_numbers a.paginate_button:hover { background-color: #ccc; text-decoration: none !important }
.paging_full_numbers a.paginate_active  { background-color: #99B3FF }

/* ── 21. DROPDOWN MENU ──────────────────────────────────────── */
.dropdown-menu {
    border: medium none;
    box-shadow: none;
    display: none;
    float: left;
    font-size: 12px;
    left: 0;
    list-style: none outside none;
    padding: 0;
    position: absolute;
    text-shadow: none;
    top: 100%;
    z-index: 9998;
    border: 1px solid #D9DEE4;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.dropdown-menu>li>a { color: #5A738E }
.dropdown-menu a { cursor: pointer }

.navbar-nav .open .dropdown-menu {
    position: absolute;
    background: #fff;
    margin-top: 0;
    border: 1px solid #D9DEE4;
    box-shadow: none;
    right: auto;
    left: auto;
    text-align: left;
}

.navbar-nav .open .dropdown-menu.msg_list { width: 300px !important }

/* ── 22. ALERTS / NOTIFICATIONS ─────────────────────────────── */
.alert-success { color: #fff; background-color: rgba(38, 185, 154, 0.88); border-color: rgba(38, 185, 154, 0.88) }
.alert-info    { color: #E9EDEF; background-color: rgba(52, 152, 219, 0.88); border-color: rgba(52, 152, 219, 0.88) }
.alert-warning { color: white; background-color: rgba(243, 156, 18, 0.88); border-color: rgba(243, 156, 18, 0.88) }
.alert-danger,
.alert-error   { color: white; font-size: 18px; background-color: rgba(231, 76, 60, 0.88); border-color: rgba(231, 76, 60, 0.88) }
.alert-primary { color: #fff; background-color: #007bff; border-color: #007bff }

.ui-pnotify.dark .ui-pnotify-container {
    color: white;
    background-color: rgba(52, 73, 94, 0.88);
    border-color: rgba(52, 73, 94, 0.88)
}

.custom-notifications { position: fixed; margin: 15px; right: 0; float: right; width: 400px; z-index: 4000; bottom: 0 }

ul.notifications { float: right; display: block; margin-bottom: 7px; padding: 0; width: 100% }
.notifications li { float: right; margin: 3px; width: 36px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3) }
.notifications li:last-child { margin-left: 0 }
.notifications a { display: block; text-align: center; text-decoration: none; text-transform: uppercase; padding: 9px 8px }

.tabbed_notifications .text {
    padding: 5px 15px;
    height: 140px;
    border-radius: 7px;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.3)
}

/* ── 23. MODAL ──────────────────────────────────────────────── */
.modal-title { color: var(--app-primary); font-size: 20px; font-weight: bold }
.modal-body  { color: black; font-size: 19px }

/* ── 24. SELECT2 ────────────────────────────────────────────── */
.select2 { width: 100% !important }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border: 2px solid #ced4da !important;
    border-radius: 5px !important;
    min-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: black;
    padding-top: 5px;
    font-size: 16px;
    line-height: 28px;
    font-weight: bold;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding-top: 3px }

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-width: 8px 8px 0 8px !important;
    margin-left: -2px !important;
    margin-top: 0 !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent !important;
    border-width: 0 8px 8px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    margin-top: 2px;
    border: none;
    border-radius: 0;
    padding: 3px 5px
}

/* Merged — last-wins rule kept (border-radius: 5px) */
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 2px solid #ccc !important;
    border-radius: 5px;
    outline: 0;
}

.select2-container--default .select2-selection--multiple {
    border: 2px solid #ccc !important;
    border-radius: 6px !important;
}

.select2-container .select2-search--inline .select2-search__field {
    padding: 2px !important;
    font-size: 15px !important;
    font-weight: bold;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    list-style: none;
    color: black;
    font-weight: bold;
}

.select2-results__option {
    padding: 6px;
    user-select: none;
    color: black;
    font-weight: bold;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: black !important }

/* ── 25. NAVIGATION PILLS / TABS ─────────────────────────────── */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link { background-color: var(--app-primary) }

.nav-pills .nav-link { font-size: 16px; color: dimgray }

.custom-tabs-style.nav-pills .nav-link.active,
.custom-tabs-style.nav-pills .show>.nav-link {
    background-color: white;
    color: var(--app-primary);
    border-bottom: 2px solid;
    border-radius: 0;
}

.custom-tabs-style.nav-pills .nav-link { font-size: 18px; font-weight: bold }

/* ── 26. SCROLLBARS ─────────────────────────────────────────── */
.scroll-overflow { height: calc(100vh - 52px); overflow-y: auto; overflow-x: hidden }
.custom-scroll-design { overflow-y: auto; overflow-x: hidden }
.max-height-400 { max-height: 400px }
.tableOverflow { overflow-x: auto; overflow-y: hidden }
.min-height { min-height: auto !important }

/* Scrollbar style (Webkit) */
#style-3::-webkit-scrollbar-track,
.style-4::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar,
.style-4::-webkit-scrollbar { width: 4px; background-color: var(--app-primary) }

#style-3::-webkit-scrollbar-thumb,
.style-4::-webkit-scrollbar-thumb { background-color: var(--app-primary) }

.left_col .mCSB_scrollTools { width: 6px }
.left_col .mCSB_dragger { max-height: 400px !important }

/* ── 27. USER PROFILE ───────────────────────────────────────── */
a.user-profile { color: black !important; font-size: 1rem }
.user-profile img { width: 29px; height: 29px; border-radius: 50%; margin-left: 8px }

.user-profile.dropdown-toggle::after {
    vertical-align: .155em;
    border-top: .4em solid;
    border-left: .4em solid transparent;
    border-bottom: 0;
    border-right: .4em solid transparent;
}

/* ── 28. TILE / DASHBOARD STATS ─────────────────────────────── */
.tile-stats {
    position: relative;
    display: block;
    margin-bottom: 12px;
    border: 1px solid #E4E4E4;
    -webkit-border-radius: 5px;
    overflow: hidden;
    padding-bottom: 5px;
    border-radius: 5px;
    background: #FFF;
    transition: all 300ms ease-in-out
}

.tile-stats:hover .icon i {
    animation: tansformAnimation .5s 1 ease forwards;
    color: rgba(58, 58, 58, 0.41);
}

.tile-stats .icon { width: 20px; height: 20px; color: #BAB8B8; position: absolute; right: 53px; top: 22px; z-index: 1 }
.tile-stats .icon i { margin: 0; font-size: 60px; line-height: 0; vertical-align: bottom; padding: 0 }
.tile-stats .count { font-size: 38px; font-weight: bold; line-height: 1.65857143 }
.tile-stats .count, .tile-stats h3, .tile-stats p { position: relative; margin: 0 0 0 10px; z-index: 5; padding: 0 }
.tile-stats h3 { color: #BAB8B8 }
.tile-stats p { margin-top: 5px; font-size: 12px }

/* dash-box-footer — duplicate removed, single definition */
.tile-stats>.dash-box-footer {
    position: relative;
    text-align: center;
    margin-top: 5px;
    padding: 3px 0;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    z-index: 10;
    background: rgba(0, 0, 0, 0.1);
    text-decoration: none
}
.tile-stats>.dash-box-footer:hover { color: #fff; background: rgba(0, 0, 0, 0.15) }

.tile_count { margin-bottom: 20px; margin-top: 20px }

.tile_count .tile_stats_count {
    border-bottom: 1px solid #D9DEE4;
    padding: 0 10px 0 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative
}

@media (min-width: 992px) {
    .tile_count .tile_stats_count { margin-bottom: 10px; border-bottom: 0; padding-bottom: 10px }
}

.tile_count .tile_stats_count:before {
    content: "";
    position: absolute;
    left: 0;
    height: 65px;
    border-left: 2px solid #ADB2B5;
    margin-top: 10px
}

@media (min-width: 992px) {
    .tile_count .tile_stats_count:first-child:before { border-left: 0 }
}

.tile_count .tile_stats_count .count { font-size: 30px; line-height: 47px; font-weight: 600 }
@media (min-width: 768px) { .tile_count .tile_stats_count .count { font-size: 40px } }
@media (min-width: 992px) and (max-width: 1100px) { .tile_count .tile_stats_count .count { font-size: 30px } }

.tile_count .tile_stats_count span { font-size: 12px }
@media (min-width: 768px) { .tile_count .tile_stats_count span { font-size: 13px } }

.tile_count .tile_stats_count .count_bottom i { width: 12px }

/* ── 29. FOOTER ─────────────────────────────────────────────── */
footer { background: #fff; padding: 10px 20px; display: block }

.footer_fixed footer { position: fixed; left: 0; bottom: 0; width: 100% }

/* ── 30. BS-GLYPHICONS DEMO GRID ────────────────────────────── */
.bs-glyphicons { margin: 0 -10px 20px; overflow: hidden }
.bs-glyphicons-list { padding-left: 0; list-style: none }
.bs-glyphicons li {
    float: left; width: 25%; height: 115px;
    padding: 10px; font-size: 10px; line-height: 1.4;
    text-align: center;
    background-color: #f9f9f9; border: 1px solid #fff
}
.bs-glyphicons .glyphicon { margin-top: 5px; margin-bottom: 10px; font-size: 24px }
.bs-glyphicons .glyphicon-class { display: block; text-align: center; word-wrap: break-word }
.bs-glyphicons li:hover { color: #fff; background-color: #1ABB9C }
@media (min-width: 768px) {
    .bs-glyphicons { margin-right: 0; margin-left: 0 }
    .bs-glyphicons li { width: 12.5%; font-size: 12px }
}

/* ── 31. TAGS INPUT ─────────────────────────────────────────── */
.tagsinput { border: 1px solid #CCC; background: #FFF; padding: 6px 6px 0; width: 300px; overflow-y: auto }

span.tag {
    border-radius: 2px;
    display: block;
    float: left;
    padding: 5px 9px;
    text-decoration: none;
    background: #1ABB9C;
    color: #F1F6F7;
    margin-right: 5px;
    font-weight: 500;
    margin-bottom: 5px;
    font-family: cairo;
}

span.tag a { color: #F1F6F7 !important }
.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration: none; font-size: 11px }
.tagsinput input {
    width: 80px; margin: 0;
    font-family: cairo; font-size: 13px;
    border: 1px solid transparent; padding: 3px;
    background: transparent; color: #000; outline: 0
}
.tagsinput div { display: block; float: left }
.tags_clear { clear: both; width: 100%; height: 0 }
.not_valid { background: #FBD8DB !important; color: #90111A !important }

/* ── 32. MESSAGES / CHAT ────────────────────────────────────── */
ul.msg_list li {
    background: #f7f7f7;
    padding: 5px;
    display: flex;
    margin: 6px 6px 0;
    width: 96% !important
}
ul.msg_list li:last-child { margin-bottom: 6px; padding: 10px }
ul.msg_list li a { padding: 3px 5px !important }
ul.msg_list li a .image img { border-radius: 2px; float: left; margin-right: 10px; width: 11% }
ul.msg_list li a .time { font-size: 11px; font-style: italic; font-weight: bold; position: absolute }
ul.msg_list li a .message { display: block !important; font-size: 11px }
.dropdown-menu.msg_list span { white-space: normal }

ul.messages { padding: 0; list-style: none }
ul.messages li, .tasks li { border-bottom: 1px dotted #e6e6e6; padding: 8px 0 }
ul.messages li img.avatar, img.avatar {
    height: 32px; width: 32px; float: left;
    display: inline-block; border-radius: 2px;
    padding: 2px; background: #f7f7f7; border: 1px solid #e6e6e6
}
ul.messages li .message_date { float: right; text-align: left }
ul.messages li .message_wrapper { margin-left: 50px; margin-right: 40px }
ul.messages li .message_wrapper h4.heading { font-weight: 600; margin: 0 0 10px; line-height: 100%; cursor: pointer }
ul.messages li .message_wrapper blockquote { padding: 0 10px; margin: 0; border-left: 5px solid #eee }

/* Chat */
.chat .thumb img { width: 27px; height: 27px; border-radius: 50% }
.chat .status {
    float: left; margin: 16px 0 0 -16px;
    font-size: 14px; font-weight: bold;
    width: 12px; height: 12px; display: block;
    border: 2px solid #FFF; border-radius: 50%
}
.chat .status.online  { background: #1ABB9C }
.chat .status.away    { background: #F39C12 }
.chart .status.offline { background: #ccc }
.chat .media-body { padding-top: 5px }

/* ── 33. TIMELINE ───────────────────────────────────────────── */
ul.timeline li { position: relative; border-bottom: 1px solid #e8e8e8; clear: both }
.timeline .block { margin: 0 0 0 105px; border-left: 3px solid #e8e8e8; overflow: visible; padding: 10px 15px }
.timeline.widget { min-width: 0; max-width: inherit }
.timeline.widget .block { margin-left: 5px }
.timeline .tags { position: absolute; top: 15px; left: 0; width: 84px }
.timeline .tag { display: block; height: 30px; font-size: 13px; padding: 8px }
.timeline .tag span { display: block; overflow: hidden; width: 100%; white-space: nowrap; text-overflow: ellipsis }
.timeline h2.title { position: relative; font-size: 16px; margin: 0 }
.timeline h2.title:before {
    content: ""; position: absolute; left: -23px; top: 3px;
    display: block; width: 14px; height: 14px;
    border: 3px solid #d2d3d2; border-radius: 14px; background: #f9f9f9
}
.timeline .byline { padding: .25em 0 }

.tag { line-height: 1; background: #1ABB9C; color: #fff !important }
.tag:after {
    content: " "; height: 30px; width: 0;
    position: absolute; left: 100%; top: 0; margin: 0;
    pointer-events: none;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 11px solid #1ABB9C
}

/* ── 34. LIGHTBOX RTL ───────────────────────────────────────── */
.lightbox .lb-prev { right: 0; left: auto }
.lightbox .lb-next { left: 0; right: auto }

/* ── 35. INPUT GROUP RTL ────────────────────────────────────── */
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    text-align: right !important;
}

/* ── 36. PASSWORD SHOW/HIDE ─────────────────────────────────── */
.show-hide { position: absolute; left: 15px; top: 7px }

/* ── 37. MISC WIDGETS ───────────────────────────────────────── */
.custom-breadcrumb-font { font-size: 16px }
.custom-height-img { height: 120px }
.font-big { font-size: 50px; position: absolute; left: 14%; top: calc(50% - 40px) }
.card-overlay a {
    display: block; text-align: center !important;
    color: white; padding: 2%; font-size: 19px;
    background: #80808073; margin-top: 6%;
}
.custom-img { height: 150px }
#slash { display: none }

a.text-app-primary:hover { color: black }
.bs-docs-sidebar .nav>li>a { display: block; padding: 4px 6px }

/* ── 38. LOGIN PAGE ─────────────────────────────────────────── */
.login-page {
    --lp-bg:           #fafafa;
    --lp-panel:        #ffffff;
    --lp-text:         #111827;
    --lp-text-muted:   #6b7280;
    --lp-border:       #ececec;
    --lp-border-focus: #111827;
    --lp-accent:       #111827;
    --lp-accent-fg:    #ffffff;
    --lp-danger:       #dc2626;
    --lp-radius:       12px;
    --lp-radius-lg:    20px;
    --lp-shadow:       0 1px 2px rgba(17,24,39,.04), 0 12px 32px rgba(17,24,39,.08);
    --lp-ease:         cubic-bezier(.2,.7,.2,1);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--lp-text);
    background: var(--lp-bg);
    min-height: 100vh;
}

.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr }

.login-shell__brand {
    position: relative; overflow: hidden; padding: 64px 56px; color: var(--lp-accent-fg);
    background:
        radial-gradient(900px 500px at 85% 15%, rgba(99,102,241,.10), transparent 60%),
        radial-gradient(700px 400px at 15% 100%, rgba(59,130,246,.08), transparent 55%),
        linear-gradient(160deg, #0a0a0a 0%, #111827 55%, #0b1220 100%);
    display: flex; flex-direction: column; justify-content: space-between;
}
.login-shell__brand::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 35%, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 35%, #000 35%, transparent 78%);
    pointer-events: none;
}
.login-shell__brand::after {
    content: ""; position: absolute; right: -120px; top: -120px;
    width: 420px; height: 420px;
    background: radial-gradient(closest-side, rgba(124,58,237,.22), transparent 70%);
    filter: blur(8px); pointer-events: none;
}
[dir="rtl"] .login-shell__brand::after { right: auto; left: -120px }

.lp-mark {
    position: relative; width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, #ffffff 0%, #d4d4d4 100%);
    color: #111827; display: inline-grid; place-items: center;
    font-weight: 800; font-size: 22px; letter-spacing: -.02em; margin-bottom: 28px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
}

.lp-brandname {
    position: relative; font-size: clamp(34px, 4.2vw, 46px); font-weight: 800;
    letter-spacing: -.02em; line-height: 1.05; margin: 0;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.72) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lp-brandtag {
    position: relative; margin: 10px 0 0; color: rgba(255,255,255,.55);
    font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
}

.lp-headline { position: relative; margin: 44px 0 10px; font-size: 22px; font-weight: 600; color: #fff; max-width: 24ch }

.login-shell__brand p.lp-welcome {
    position: relative; color: rgba(255,255,255,.72);
    max-width: 40ch; margin: 0; font-size: 15px; line-height: 1.7;
}

.lp-features { position: relative; list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px }
.lp-features li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.82); font-size: 14.5px }
.lp-features .tick {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(74,222,128,.16); color: #4ade80;
    display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

.login-shell__brand .lp-foot { position: relative; font-size: 13px; color: rgba(255,255,255,.5) }

.login-shell__form { display: grid; place-items: center; padding: 32px 20px }

.lp-card {
    width: 100%; max-width: 420px;
    background: var(--lp-panel); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg); box-shadow: var(--lp-shadow);
    padding: 36px 32px;
    animation: lp-rise .45s var(--lp-ease) both;
}
@keyframes lp-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }

.lp-logo { display: block; max-width: 96px; margin: 0 auto 18px }
.lp-logo--mobile { display: none }
@media (max-width: 992px) { .lp-logo--mobile { display: block } }

.lp-title    { text-align: center; font-weight: 700; font-size: 22px; letter-spacing: -.01em; margin: 0 0 6px }
.lp-subtitle { text-align: center; font-size: 14px; margin: 0 0 26px }

.lp-field { margin-bottom: 16px }
.lp-label { display: block; font-size: 13px; font-weight: 500; color: var(--lp-text); margin-bottom: 6px }

.lp-input {
    width: 100%; height: 46px; padding: 0 14px;
    font-size: 15px; line-height: 1.4; color: var(--lp-text);
    background: #fff; border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius); outline: none;
    transition: border-color .18s var(--lp-ease), box-shadow .18s var(--lp-ease);
}
.lp-input:hover { border-color: #d4d4d4 }
.lp-input:focus { border-color: var(--lp-border-focus); box-shadow: 0 0 0 4px rgba(17,24,39,.08) }
.lp-input::placeholder { color: #9ca3af }

.lp-password { position: relative }
.lp-password .lp-input { padding-right: 44px }
.lp-eye {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    width: 32px; height: 32px; display: inline-grid; place-items: center;
    border: 0; background: transparent; color: var(--lp-text-muted);
    border-radius: 8px; cursor: pointer;
}
.lp-eye:hover { color: var(--lp-text); background: #f5f5f5 }
[dir="rtl"] .lp-password .lp-input { padding-right: 14px; padding-left: 44px }
[dir="rtl"] .lp-eye { right: auto; left: 8px }

.lp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 22px }
.lp-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lp-text); user-select: none }
.lp-check input { width: 16px; height: 16px; accent-color: var(--lp-accent); margin: 0 }
.lp-link { color: var(--lp-text); font-weight: 600; font-size: 14px; text-decoration: none }
.lp-link:hover { text-decoration: underline }

.lp-btn {
    display: block; width: 100%; height: 48px;
    font-size: 15px; font-weight: 600; color: var(--lp-accent-fg);
    background: var(--lp-accent); border: 0;
    border-radius: var(--lp-radius); cursor: pointer;
    transition: transform .15s var(--lp-ease), background .15s var(--lp-ease), box-shadow .15s var(--lp-ease);
}
.lp-btn:hover  { background: #000; box-shadow: 0 6px 16px rgba(17,24,39,.18) }
.lp-btn:active { transform: translateY(1px) }
.lp-btn[disabled] { opacity: .6; cursor: not-allowed }

@media (max-width: 992px) {
    .login-shell { grid-template-columns: 1fr }
    .login-shell__brand { display: none }
    .login-shell__form { padding: 24px 16px; min-height: 100vh }
}
@media (prefers-reduced-motion: reduce) {
    .lp-card { animation: none }
    *, *::before, *::after { transition: none !important }
}

/* ── 39. DASHBOARD FILTER / STAT CARDS ──────────────────────── */
.dash-root { padding: 1.5rem 0 }

.filter-card {
    background: #fff;
    border-radius: 14px;
    border: 0.5px solid rgba(0,0,0,0.1);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    gap: 10px;
    align-items: center;
}
.filter-card .filter-icon { font-size: 18px; color: #888 }
.filter-card select.form-select {
    flex: 1; height: 36px;
    border: 1px solid #dee2e6; border-radius: 8px;
    background: #f8f9fa; color: #333;
    padding: 0 10px; font-size: 14px;
}
.filter-card .btn-search {
    height: 36px; padding: 0 18px; border-radius: 8px;
    border: 1px solid #dee2e6; background: #f8f9fa;
    color: #333; font-size: 14px; cursor: pointer;
    white-space: nowrap; transition: background 0.15s;
}
.filter-card .btn-search:hover { background: #e9ecef }
.filter-card .btn-reset {
    height: 36px; padding: 0 14px; border-radius: 8px;
    border: 1px solid #dee2e6; background: transparent;
    color: #888; font-size: 13px; cursor: pointer;
    transition: opacity 0.15s;
}
.filter-card .btn-reset:hover { opacity: 0.7 }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px }

.stat-card {
    background: #f8f9fa; border-radius: 8px; padding: 1rem;
    display: flex; flex-direction: column; gap: 6px;
    position: relative; overflow: hidden;
}
.stat-card .accent-bar { position: absolute; top: 0; left: 0; width: 3px; height: 100%; border-radius: 3px 0 0 3px }
.stat-card .stat-inner { padding-left: 8px }
.accent-blue  { background: #378ADD }
.accent-teal  { background: #1D9E75 }
.accent-amber { background: #BA7517 }
.stat-icon  { font-size: 18px; margin-bottom: 2px }
.stat-value { font-size: 26px; font-weight: 600; line-height: 1 }
.stat-label { font-size: 13px; margin: 0 }

/* ── 40. BROADCAST / COMPOSE PAGE ───────────────────────────── */
.broadcast-page {
    font-family: 'DM Sans', sans-serif;
    background: #f5f4f0;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    color: #1a1a2e;
}

.bc-wrap { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #888; margin-bottom: 0.5rem }
.bc-wrap a { color: #888; text-decoration: none }
.bc-wrap a:hover { color: #1a1a2e }

.section-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: #888; margin-bottom: 0.75rem;
}

.audience-btns { display: flex; gap: 8px; margin-bottom: 1rem }

.btn-audience {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px;
    border: 0.5px solid rgba(0,0,0,0.15);
    background: #fff; color: #1a1a2e;
    font-size: 13px; font-family: 'DM Sans', sans-serif; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
}
.btn-audience:hover { background: #f5f4f0 }
.btn-audience.active { background: #1a1a2e; color: #fff; border-color: #1a1a2e }

.filter-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end }
.field-group { display: flex; flex-direction: column; gap: 5px }
.field-group label { font-size: 12px; color: #555; font-weight: 500 }
.field-group input,
.field-group select {
    height: 38px; border-radius: 8px;
    border: 0.5px solid rgba(0,0,0,0.12);
    background: #f5f4f0; color: #1a1a2e;
    font-family: 'DM Sans', sans-serif; font-size: 13px;
    padding: 0 10px; outline: none; transition: border 0.15s;
}
.field-group input:focus, .field-group select:focus { border-color: rgba(0,0,0,0.3); background: #fff }
.filter-btn-group { display: flex; gap: 6px }

.btn-search {
    height: 38px; padding: 0 16px; border-radius: 8px;
    border: none; background: #1a1a2e; color: #fff;
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap; transition: background 0.15s;
}
.btn-search:hover { background: #2d2d4a }

.btn-reset {
    height: 38px; padding: 0 12px; border-radius: 8px;
    border: 0.5px solid rgba(0,0,0,0.12); background: #f5f4f0;
    color: #555; font-family: 'DM Sans', sans-serif; font-size: 13px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    transition: background 0.15s;
}
.btn-reset:hover { background: #e8e7e3 }

.compose-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; align-items: start }

.compose-card {
    background: #fff; border-radius: 14px;
    border: 0.5px solid rgba(0,0,0,0.1); padding: 1.5rem;
}

.form-field { margin-bottom: 1.1rem }
.form-field label { display: block; font-size: 12px; color: #555; font-weight: 500; margin-bottom: 5px }
.form-field input, .form-field select, .form-field textarea {
    width: 100%; border-radius: 8px; border: 0.5px solid rgba(0,0,0,0.12);
    background: #f5f4f0; color: #1a1a2e;
    font-family: 'DM Sans', sans-serif; font-size: 13px;
    padding: 9px 11px; outline: none; transition: border 0.15s, background 0.15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: rgba(0,0,0,0.3); background: #fff }
.form-field textarea { resize: vertical; min-height: 110px }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }

.toggle-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    background: #f5f4f0; border: 0.5px solid rgba(0,0,0,0.1);
    margin-bottom: 1.1rem; cursor: pointer; user-select: none;
}
.toggle-row label { font-size: 13px; color: #555; cursor: pointer; margin: 0 }

.toggle-switch { position: relative; width: 34px; height: 18px; flex-shrink: 0 }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute }
.toggle-track {
    position: absolute; inset: 0; background: #ccc;
    border-radius: 9px; transition: 0.2s; cursor: pointer;
}
.toggle-track:before {
    content: ''; position: absolute; width: 12px; height: 12px;
    top: 3px; left: 3px; background: #fff; border-radius: 50%; transition: 0.2s;
}
.toggle-switch input:checked + .toggle-track { background: #1a1a2e }
.toggle-switch input:checked + .toggle-track:before { transform: translateX(16px) }

.templates-area { display: none }
.templates-area.visible { display: block }

.file-upload-area {
    border: 1.5px dashed rgba(0,0,0,0.15); border-radius: 8px;
    padding: 16px; text-align: center; cursor: pointer;
    transition: background 0.15s; position: relative;
}
.file-upload-area:hover { background: #f5f4f0 }
.file-upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0 }
.file-upload-area .bi { font-size: 22px; color: #aaa; display: block; margin-bottom: 4px }
.file-upload-text { font-size: 12px; color: #aaa }

.submit-row { display: flex; gap: 8px; padding-top: 0.5rem }

.btn-submit {
    flex: 1; height: 40px; border-radius: 8px; border: none;
    background: #1a1a2e; color: #fff;
    font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 0.15s;
}
.btn-submit:hover { background: #2d2d4a }

.btn-back {
    height: 40px; padding: 0 18px; border-radius: 8px;
    border: 0.5px solid rgba(0,0,0,0.12); background: #f5f4f0;
    color: #555; font-family: 'DM Sans', sans-serif; font-size: 14px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none; transition: background 0.15s;
}
.btn-back:hover { background: #e8e7e3; color: #1a1a2e }

.recipients-card {
    background: #fff; border-radius: 14px;
    border: 0.5px solid rgba(0,0,0,0.1); overflow: hidden;
    position: sticky; top: 1rem;
}
.recipients-header {
    padding: 1rem 1.25rem;
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
    display: flex; align-items: center; justify-content: space-between;
}
.recipients-header h3 { font-size: 13px; font-weight: 600; color: #1a1a2e }
.count-badge { background: #1a1a2e; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px }
.recipients-list { max-height: 340px; overflow-y: auto }
.recipient-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 1.25rem;
    border-bottom: 0.5px solid rgba(0,0,0,0.06);
    transition: background 0.1s;
}
.recipient-item:last-child { border-bottom: none }
.recipient-item:hover { background: #f5f4f0 }
.recipient-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: #e3f2fd; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: #1565c0; flex-shrink: 0;
}
.recipient-info { flex: 1; min-width: 0 }
.recipient-name { font-size: 13px; font-weight: 500; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.recipient-phone { font-size: 11px; color: #aaa; direction: ltr }
.network-pill { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0 }
.net-vodafone { background: #fff0f0; color: #cc2200 }
.net-mobinil  { background: #fff3e0; color: #c96000 }
.net-etisalat { background: #e8f5e9; color: #2e7d32 }
.net-we       { background: #e3f2fd; color: #1565c0 }
.net-other    { background: #f5f4f0; color: #888 }
.recipients-footer { padding: 0.75rem 1.25rem; border-top: 0.5px solid rgba(0,0,0,0.08); background: #f5f4f0 }
.btn-manage {
    width: 100%; height: 36px; border-radius: 8px;
    border: 0.5px solid rgba(0,0,0,0.12); background: #fff; color: #1a1a2e;
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 0.15s;
}
.btn-manage:hover { background: #f5f4f0 }

.empty-state { padding: 2.5rem 1rem; text-align: center }
.empty-icon { width: 48px; height: 48px; border-radius: 50%; background: #f5f4f0; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; font-size: 20px; color: #bbb }
.empty-title { font-size: 13px; font-weight: 500; color: #888; margin-bottom: 3px }
.empty-sub   { font-size: 12px; color: #bbb }

/* Modal overlay */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 9999; align-items: center; justify-content: center; padding: 1rem }
.modal-overlay.open { display: flex }
.modal-box { background: #fff; border-radius: 14px; border: 0.5px solid rgba(0,0,0,0.1); width: 100%; max-width: 580px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden }
.modal-head { padding: 1rem 1.25rem; border-bottom: 0.5px solid rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: space-between }
.modal-head h4 { font-size: 15px; font-weight: 600; color: #1a1a2e }
.btn-close-modal { width: 28px; height: 28px; border-radius: 8px; border: 0.5px solid rgba(0,0,0,0.12); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #555; transition: background 0.15s }
.btn-close-modal:hover { background: #f5f4f0 }
.modal-search-wrap { padding: 0.75rem 1.25rem; border-bottom: 0.5px solid rgba(0,0,0,0.08); position: relative }
.modal-search-wrap .bi-search { position: absolute; left: 1.75rem; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 14px }
.modal-search-wrap input { width: 100%; height: 36px; border-radius: 8px; border: 0.5px solid rgba(0,0,0,0.12); background: #f5f4f0; color: #1a1a2e; font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 0 10px 0 32px; outline: none }
.modal-body-scroll { overflow-y: auto; flex: 1 }
.modal-customer-row { display: flex; align-items: center; gap: 10px; padding: 9px 1.25rem; border-bottom: 0.5px solid rgba(0,0,0,0.06); cursor: pointer; transition: background 0.1s }
.modal-customer-row:hover { background: #f5f4f0 }
.modal-customer-row:last-child { border-bottom: none }
.modal-cust-info { flex: 1 }
.modal-cust-name { font-size: 13px; font-weight: 500; color: #1a1a2e }
.modal-cust-phone { font-size: 11px; color: #aaa }
.modal-foot { padding: 0.75rem 1.25rem; border-top: 0.5px solid rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: space-between; gap: 8px }
.modal-sel-count { font-size: 12px; color: #888 }
.btn-confirm { height: 36px; padding: 0 18px; border-radius: 8px; border: none; background: #1a1a2e; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s }
.btn-confirm:hover { background: #2d2d4a }
.btn-select-all { height: 36px; padding: 0 14px; border-radius: 8px; border: 0.5px solid rgba(0,0,0,0.12); background: #f5f4f0; color: #1a1a2e; font-family: 'DM Sans', sans-serif; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s }
.btn-select-all:hover { background: #e8e7e3 }

@media (max-width: 900px) {
    .compose-layout { grid-template-columns: 1fr }
    .filter-row { grid-template-columns: 1fr 1fr }
    .recipients-card { position: static }
}

@media (max-width: 600px) {
    .filter-row { grid-template-columns: 1fr }
    .form-row { grid-template-columns: 1fr }
}

/* ============================================================
   export-buttons.css  — إضافة على custom.clean.css
   ============================================================ */

.export-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #fff !important;
    margin-right: 4px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.export-pdf   { background: #dc3545; }
.export-excel { background: #198754; }

.export-btn:hover {
    transform: translateY(-2px);
    opacity: 0.88;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* ── dashboard-home.css ── */

/* Stat cards — redesigned */
.stat-card {
    background: var(--color-background-primary, #fff);
    border: 0.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

/* Accent bar — move to right (RTL) */
.stat-card .accent-bar {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 4px;
    height: 100%;
    border-radius: 0 12px 12px 0;
}

/* Icon wrapper */
.stat-card .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* Icon colors per accent */
.stat-card:has(.accent-blue) .stat-icon  { background: #E6F1FB; color: #185FA5; }
.stat-card:has(.accent-teal) .stat-icon  { background: #E1F5EE; color: #0F6E56; }
.stat-card:has(.accent-amber) .stat-icon { background: #FAEEDA; color: #854F0B; }

/* Value & label */
.stat-card .stat-value {
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 4px;
    color: #111827;
}


/* stat-inner layout */
.stat-card .stat-inner {
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Filter card — تنظيف */
.filter-card {
    border-radius: 12px;
    border: 0.5px solid #e5e7eb;
    padding: 1rem 1.25rem;
}

.filter-card .form-select {
    height: 38px;
    background: #f9fafb;
    border: 0.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
}

/* ── activity-types.css ── */

/* Panel wrapper */
.x_panel {
    background: var(--color-background-primary, #fff);
    border: 0.5px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
}

/* Panel header */
.x_panel .border-bottom {
    padding: 1rem 1.25rem !important;
    border-bottom: 0.5px solid #e5e7eb !important;
}

.x_panel .border-bottom h3 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    color: var(--app-primary);
}

/* Action buttons in header */
.panel_toolbox { gap: 8px; }

.panel_toolbox .btn {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 8px;
}

/* Filter row */
.x_content .row.gy-2 input.form-control {
    height: 36px;
    border: 0.5px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    font-size: 13px;
}

.x_content .row.gy-2 .btn {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
}

/* Table */
#myTable {
    border-collapse: collapse;
    
}

#myTable thead tr {
    background: #f9fafb;
}

#myTable thead th {
    padding: 10px 12px;
    font-weight: 500;
    border-bottom: 0.5px solid #e5e7eb;
}

#myTable tbody td {
    padding: 10px 12px;
    border-bottom: 0.5px solid #f3f4f6;
    vertical-align: middle;
}

#myTable tbody tr:last-child td { border-bottom: none; }
#myTable tbody tr:hover td { background: #f9fafb; }

/* Dropdown action button */
.dropdown .btn-light {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    border: 0.5px solid #e5e7eb;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

.dropdown .btn-light:hover { background: #f3f4f6; }

/* Dropdown menu items */
.dropdown-menu { border: 0.5px solid #e5e7eb; border-radius: 10px; padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); min-width: 140px; }

.dropdown-item {
    border-radius: 6px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-item:hover { background: #f3f4f6; }

.dropdown-item.text-info   { color: #185FA5 !important; }
.dropdown-item.text-danger { color: #A32D2D !important; }
.dropdown-item.text-app-primary { color: var(--app-primary) !important; }

/* Delete all button */
#deleteAllModalArea .btn-danger {
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate { margin-top: 8px; }
#myTable td .btn-sm {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}


    .page-header-box {
        background: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        padding: 14px 18px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .page-header-box h3 {
        font-size: 18px;
        font-weight: 600;
        color: #222;
        margin: 0;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        border: 1px solid #dee2e6;
        background: #f8f9fa;
        color: #444;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.15s;
    }

    .btn-icon:hover {
        background: #e9ecef;
        color: #222;
    }

    .btn-icon.btn-primary-icon {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
    }

    .btn-icon.btn-primary-icon:hover {
        background: #0b5ed7;
    }

    .filter-box {
        background: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        padding: 14px 18px;
        margin-bottom: 14px;
    }

    .filter-box .form-control {
        height: 36px;
        font-size: 14px;
        border-radius: 8px;
        border: 1px solid #dee2e6;
        background: #f8f9fa;
    }

    .filter-box .form-control:focus {
        background: #fff;
        border-color: #86b7fe;
        box-shadow: 0 0 0 3px rgba(13,110,253,.15);
    }

    .filter-box .btn {
        height: 36px;
        width: 36px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 14px;
    }

    .table-container {
        background: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 14px;
    }

    .table {
        margin: 0;
        font-size: 14px;
    }

    .table thead tr {
        background: #f8f9fa;
    }

    .table th {
        font-weight: 600;
        font-size: 13px;
        color: #555;
        padding: 11px 14px;
        border-bottom: 1px solid #e9ecef;
        white-space: nowrap;
    }

    .table td {
        padding: 11px 14px;
        vertical-align: middle;
        color: #333;
        border-bottom: 1px solid #f1f3f5;
    }

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

    .table tbody tr:hover td {
        background: #f8f9fa;
    }

    .table td.muted {
        color: #999;
        font-style: italic;
    }

    .action-icons {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .action-icons a {
        width: 30px;
        height: 30px;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: #fff !important;
        text-decoration: none;
        transition: opacity 0.15s;
    }

    .action-icons a:hover {
        opacity: 0.75;
    }

    .icon-edit   { background: #0d6efd; }
    .icon-view   { background: #198754; }
    .icon-delete { background: #dc3545; }

    .idx-badge {
        display: inline-block;
        background: #f1f3f5;
        color: #666;
        border-radius: 6px;
        padding: 2px 8px;
        font-size: 12px;
        font-weight: 600;
    }
    
    a{
        text-decoration: none;
    }
    
    /* ── messages-index.css ── */

.messages-filter-wrap {
    background: #f9fafb;
    border: 0.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem;
}

.messages-filter-wrap .form-label {
    font-weight: 500;
    margin-bottom: 4px;
}

.messages-filter-wrap .form-control,
.messages-filter-wrap .form-select {
    height: 34px;
    border: 0.5px solid #e5e7eb;
    border-radius: 8px;
}

.messages-filter-wrap .btn { height: 34px; border-radius: 8px; }

/* Table */
.messages-table th {
    font-weight: 500;
    color: #6b7280;
    background: #f9fafb;
    padding: 9px 12px;
    white-space: nowrap;
    border-bottom: 0.5px solid #e5e7eb;
}

.messages-table td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 0.5px solid #f3f4f6;
}

.messages-table tbody tr:last-child td { border-bottom: none; }
.messages-table tbody tr:hover td { background: #f9fafb; }

.msg-body-text {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.date-text { color: #6b7280; white-space: nowrap; }

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 500;
}

.status-sent       { background: #E1F5EE; color: #0F6E56; }
.status-notsent    { background: #FAEEDA; color: #854F0B; }
.status-processing { background: #E6F1FB; color: #185FA5; }

.status-count { color: #6b7280; margin-top: 2px; }

/* Action buttons */
.msg-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 0.5px solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s;
}

.msg-action-view       { background: #E6F1FB; border-color: #B5D4F4; color: #185FA5; }
.msg-action-view:hover { background: #B5D4F4; color: #185FA5; }

.msg-action-edit       { background: #E1F5EE; border-color: #9FE1CB; color: #0F6E56; }
.msg-action-edit:hover { background: #9FE1CB; color: #0F6E56; }

/* ── message-show.css ── */

.msg-show-meta {
    background: #f9fafb;
    border: 0.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.msg-show-meta .meta-label {
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 4px;
}

.msg-show-meta .meta-value {
    color: #111827;
}

.msg-show-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 1.25rem;
}

.msg-show-stats .stat-box {
    background: #f9fafb;
    border: 0.5px solid #e5e7eb;
    border-radius: 10px;
    padding: .875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.msg-show-stats .s-label {
    color: #6b7280;
}

.msg-show-stats .s-val {
    font-weight: 500;
    color: #111827;
}

.msg-show-stats .s-val-success { color: #0F6E56; }

.msg-show-stats .s-val-warning  { color: #854F0B; }

/* ── devices-index.css ── */

.devices-filter-wrap {
    background: #f9fafb;
    border: 0.5px solid #e5e7eb;
    border-radius: 10px;
    padding: .875rem 1rem;
    margin-bottom: 1rem;
}

.devices-filter-wrap .form-control {
    height: 34px;
    border: 0.5px solid #e5e7eb;
    border-radius: 8px;
    max-width: 280px;
}

.devices-filter-wrap .btn { height: 34px; border-radius: 8px; }

.devices-table th {
    font-weight: 500;
    color: #6b7280;
    background: #f9fafb;
    padding: 9px 12px;
    border-bottom: 0.5px solid #e5e7eb;
}

.devices-table td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 0.5px solid #f3f4f6;
}

.devices-table tbody tr:last-child td { border-bottom: none; }
.devices-table tbody tr:hover td { background: #f9fafb; }

/* Connect / Disconnect buttons */
.dev-action-btn {
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    border: 0.5px solid;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.dev-action-btn:hover { opacity: 0.85; }

.dev-btn-connect    { background: #E1F5EE; border-color: #9FE1CB; color: #0F6E56; }
.dev-btn-disconnect { background: #FCEBEB; border-color: #F7C1C1; color: #A32D2D; }

/* Icon action buttons (edit/delete) — reuse from messages */
.msg-action-delete {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 0.5px solid #F7C1C1;
    background: #FCEBEB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #A32D2D;
    transition: background 0.15s;
}

.msg-action-delete:hover { background: #F7C1C1; color: #A32D2D; }

/* ── device-connect.css ── */

.qr-wrap {
    max-width: 420px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.qr-device-info {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f9fafb;
    border: 0.5px solid #e5e7eb;
    border-radius: 10px;
    padding: .875rem 1.25rem;
    width: 100%;
}

.qr-phone-icon {
    font-size: 28px;
    color: var(--app-primary);
}

.qr-label {
    color: #6b7280;
    margin-bottom: 2px;
}

.qr-phone {
    font-weight: 500;
    color: #111827;
    direction: ltr;
}

.qr-box {
    background: #f9fafb;
    border: 0.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.qr-img {
    width: 220px;
    height: 220px;
    border-radius: 8px;
    border: 0.5px solid #e5e7eb;
}

.qr-success {
    color: #0F6E56;
    font-weight: 500;
}

.qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 2rem;
}

.qr-placeholder-icon {
    font-size: 64px;
    color: #d1d5db;
}

.qr-error {
    color: #A32D2D;
    font-weight: 500;
    margin: 0;
}

.qr-hint {
    color: #6b7280;
    text-align: center;
    margin: 0;
}

/* ── template-create.css ── */

.placeholders-panel {
    background: #f9fafb;
    border: 0.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem;
    height: 100%;
}

.placeholders-label {
    font-weight: 500;
    color: #6b7280;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 0.5px solid #e5e7eb;
}

.placeholders-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.placeholder-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 12px;
    border-radius: 8px;
    border: 0.5px solid #e5e7eb;
    background: #fff;
    color: var(--app-primary);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: right;
}

.placeholder-chip:hover {
    background: var(--app-primary);
    color: #fff;
    border-color: var(--app-primary);
}

.placeholder-chip .fa {
    opacity: 0.7;
}