/* ============================================
   GLASSMORPHISM DARK THEME - SMS Gateway
   ============================================ */

/* --- Original rules (preserved) --- */
input[type=date].form-control, input[type=time].form-control, input[type=datetime-local].form-control, input[type=month].form-control {
    line-height: 19px;
}
.timeline-body {
    word-wrap: break-word;
}
.timeline-footer {
    display: flex;
    flex-flow: row wrap;
}
.timeline-footer label {
    padding: 0.5rem 0.6rem;
}
textarea {
    max-width: 100%;
    max-height: 100%;
    resize: vertical;
}
.dropzone {
    border: 2px dashed rgba(100, 130, 255, 0.5);
    background: rgba(255, 255, 255, 0.03) !important;
    color: #c0c6d6 !important;
    border-radius: 12px;
}
.dropzone:hover {
    border-color: rgba(130, 160, 255, 0.7);
    background: rgba(255, 255, 255, 0.06) !important;
}
@media only screen and (max-width: 768px) {
    .select-user { width: 220px }
}
@media only screen and (max-width: 768px) {
    .select-contacts-list { width: 125px }
}

/* ============================================
   1. GLOBAL / BODY
   ============================================ */
body {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1035 35%, #0d1f3c 65%, #0a0a1a 100%) !important;
    background-attachment: fixed !important;
    color: #d0d4e0 !important;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

::selection {
    background: rgba(120, 90, 220, 0.4);
    color: #fff;
}

a {
    color: #8a9fff;
    transition: color 0.2s;
}
a:hover, a:focus {
    color: #b0c0ff;
    text-decoration: none;
}

/* ============================================
   2. HEADER / NAVBAR
   ============================================ */
.main-header .logo,
.main-header .navbar {
    background: rgba(15, 15, 35, 0.6) !important;
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.main-header .logo {
    color: #fff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.main-header .logo b,
.main-header .logo .logo-mini,
.main-header .logo .logo-lg {
    color: #fff !important;
}
.main-header .navbar .sidebar-toggle {
    color: #c0c6d6 !important;
}
.main-header .navbar .sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}
.main-header .navbar .nav > li > a {
    color: #c0c6d6 !important;
}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    background: rgba(20, 20, 50, 0.9) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu > li > a {
    color: #c0c6d6 !important;
}
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

/* ============================================
   3. SIDEBAR
   ============================================ */
.main-sidebar,
.left-side {
    background: rgba(12, 12, 30, 0.65) !important;
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.sidebar-menu > li > a {
    color: #a0a8c0 !important;
    border-left: 3px solid transparent !important;
    transition: all 0.25s ease;
}
.sidebar-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #fff !important;
    border-left-color: rgba(120, 90, 220, 0.6) !important;
}
.sidebar-menu > li.active > a {
    background: rgba(120, 90, 220, 0.15) !important;
    color: #fff !important;
    border-left-color: #785adc !important;
    box-shadow: inset 0 0 20px rgba(120, 90, 220, 0.1);
}
.sidebar-menu > li > .treeview-menu {
    background: rgba(0, 0, 0, 0.15) !important;
}
.sidebar-menu > li > .treeview-menu > li > a {
    color: #8a90a8 !important;
}
.sidebar-menu > li > .treeview-menu > li > a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
    color: #6a7090 !important;
    transition: color 0.25s;
}
.sidebar-menu > li:hover > a > .fa,
.sidebar-menu > li:hover > a > .ion,
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .ion {
    color: #a08aff !important;
}
.sidebar-menu .header {
    color: #505670 !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}
.user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.user-panel > .info,
.user-panel > .info > p,
.user-panel > .info > a {
    color: #c0c6d6 !important;
}

/* ============================================
   4. CONTENT WRAPPER
   ============================================ */
.content-wrapper,
.right-side {
    background: transparent !important;
}
.content-header > h1 {
    color: #e8eaf0 !important;
}
.content-header > .breadcrumb {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px;
}
.content-header > .breadcrumb > li > a {
    color: #8a9fff !important;
}
.content-header > .breadcrumb > .active {
    color: #888da0 !important;
}

/* ============================================
   5. BOXES / CARDS (glass effect)
   ============================================ */
.box {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: hidden;
}
.box-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px 14px 0 0 !important;
    color: #e0e4f0 !important;
}
.box-header .box-title {
    color: #e0e4f0 !important;
    font-weight: 600;
}
.box-body {
    color: #c0c6d6 !important;
}
.box-footer {
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 0 0 14px 14px !important;
}
.box.box-primary {
    border-top: 3px solid rgba(120, 90, 220, 0.6) !important;
}
.box.box-success {
    border-top: 3px solid rgba(50, 200, 120, 0.6) !important;
}
.box.box-warning {
    border-top: 3px solid rgba(240, 180, 40, 0.6) !important;
}
.box.box-danger {
    border-top: 3px solid rgba(220, 60, 60, 0.6) !important;
}
.box.box-info {
    border-top: 3px solid rgba(60, 180, 220, 0.6) !important;
}

/* Small boxes (dashboard widgets) */
.small-box {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important;
    color: #e0e4f0 !important;
    overflow: hidden;
}
.small-box > .inner h3,
.small-box > .inner p {
    color: #e8eaf0 !important;
}
.small-box > .small-box-footer {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #a0a8c0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.small-box > .small-box-footer:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}
.small-box > .icon {
    color: rgba(255, 255, 255, 0.12) !important;
}
.small-box.bg-aqua, .small-box.bg-teal,
.small-box.bg-aqua-gradient, .small-box.bg-teal-gradient {
    background: linear-gradient(135deg, rgba(30, 160, 210, 0.45), rgba(20, 100, 170, 0.45)) !important;
    border: 1px solid rgba(30, 160, 210, 0.2) !important;
}
.small-box.bg-green, .small-box.bg-olive,
.small-box.bg-green-gradient, .small-box.bg-olive-gradient {
    background: linear-gradient(135deg, rgba(40, 180, 90, 0.45), rgba(25, 130, 65, 0.45)) !important;
    border: 1px solid rgba(40, 180, 90, 0.2) !important;
}
.small-box.bg-yellow,
.small-box.bg-yellow-gradient {
    background: linear-gradient(135deg, rgba(220, 180, 40, 0.45), rgba(180, 140, 20, 0.45)) !important;
    border: 1px solid rgba(220, 180, 40, 0.2) !important;
}
.small-box.bg-red, .small-box.bg-fuchsia,
.small-box.bg-red-gradient, .small-box.bg-fuchsia-gradient {
    background: linear-gradient(135deg, rgba(210, 55, 55, 0.45), rgba(160, 35, 40, 0.45)) !important;
    border: 1px solid rgba(210, 55, 55, 0.2) !important;
}
.small-box.bg-blue,
.small-box.bg-blue-gradient {
    background: linear-gradient(135deg, rgba(50, 100, 220, 0.45), rgba(35, 70, 180, 0.45)) !important;
    border: 1px solid rgba(50, 100, 220, 0.2) !important;
}
.small-box.bg-purple,
.small-box.bg-purple-gradient {
    background: linear-gradient(135deg, rgba(140, 70, 200, 0.45), rgba(100, 45, 160, 0.45)) !important;
    border: 1px solid rgba(140, 70, 200, 0.2) !important;
}
.small-box.bg-maroon,
.small-box.bg-maroon-gradient {
    background: linear-gradient(135deg, rgba(180, 60, 90, 0.45), rgba(130, 40, 65, 0.45)) !important;
    border: 1px solid rgba(180, 60, 90, 0.2) !important;
}
.small-box.bg-black-gradient {
    background: linear-gradient(135deg, rgba(60, 60, 70, 0.45), rgba(35, 35, 45, 0.45)) !important;
    border: 1px solid rgba(80, 80, 90, 0.2) !important;
}
.small-box[style*="background-color: grey"] {
    background: linear-gradient(135deg, rgba(100, 100, 115, 0.45), rgba(70, 70, 80, 0.45)) !important;
    border: 1px solid rgba(100, 100, 115, 0.2) !important;
}
.small-box.bg-orange,
.small-box.bg-orange-gradient {
    background: linear-gradient(135deg, rgba(230, 130, 30, 0.45), rgba(190, 100, 20, 0.45)) !important;
    border: 1px solid rgba(230, 130, 30, 0.2) !important;
}

/* Info box */
.info-box {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
    color: #d0d4e0 !important;
}
.info-box-icon {
    border-radius: 14px 0 0 14px !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
.info-box-text {
    color: #a0a8c0 !important;
}
.info-box-number {
    color: #e8eaf0 !important;
}

/* ============================================
   6. FORMS & INPUTS
   ============================================ */
.form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #d8dce8 !important;
    transition: all 0.3s ease;
}
.form-control:focus {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(120, 90, 220, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(120, 90, 220, 0.15), 0 0 20px rgba(120, 90, 220, 0.1) !important;
    color: #f0f2ff !important;
}
.form-control::placeholder {
    color: #606880 !important;
}
label {
    color: #b0b8d0 !important;
    font-weight: 500;
}
.input-group-addon {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #8a90a8 !important;
    border-radius: 8px 0 0 8px !important;
}
.input-group .form-control:first-child {
    border-radius: 8px 0 0 8px !important;
}
.input-group .form-control:last-child,
.input-group-addon:last-child {
    border-radius: 0 8px 8px 0 !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #d8dce8 !important;
    min-height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #d8dce8 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #8a90a8 transparent transparent transparent !important;
}
.select2-dropdown {
    background: rgba(20, 20, 50, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
.select2-container--default .select2-results__option {
    color: #c0c6d6 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(120, 90, 220, 0.3) !important;
    color: #fff !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #d8dce8 !important;
    border-radius: 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(120, 90, 220, 0.25) !important;
    border: 1px solid rgba(120, 90, 220, 0.3) !important;
    color: #d0d4ff !important;
    border-radius: 6px;
}

/* Checkbox / Radio */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #785adc;
}

/* ============================================
   7. BUTTONS
   ============================================ */
.btn {
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.25s ease !important;
    font-weight: 500;
    text-shadow: none !important;
    box-shadow: none !important;
}
.btn-primary {
    background: linear-gradient(135deg, rgba(100, 70, 200, 0.6), rgba(80, 50, 180, 0.6)) !important;
    border-color: rgba(120, 90, 220, 0.4) !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, rgba(120, 90, 220, 0.8), rgba(100, 70, 200, 0.8)) !important;
    box-shadow: 0 0 20px rgba(120, 90, 220, 0.3) !important;
    color: #fff !important;
}
.btn-success {
    background: linear-gradient(135deg, rgba(40, 160, 80, 0.6), rgba(30, 130, 60, 0.6)) !important;
    border-color: rgba(50, 180, 90, 0.4) !important;
    color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
    background: linear-gradient(135deg, rgba(50, 180, 90, 0.8), rgba(40, 160, 80, 0.8)) !important;
    box-shadow: 0 0 20px rgba(50, 180, 90, 0.3) !important;
}
.btn-danger {
    background: linear-gradient(135deg, rgba(200, 50, 50, 0.6), rgba(160, 40, 40, 0.6)) !important;
    border-color: rgba(220, 60, 60, 0.4) !important;
    color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus {
    background: linear-gradient(135deg, rgba(220, 60, 60, 0.8), rgba(200, 50, 50, 0.8)) !important;
    box-shadow: 0 0 20px rgba(220, 60, 60, 0.3) !important;
}
.btn-info {
    background: linear-gradient(135deg, rgba(40, 150, 200, 0.6), rgba(30, 120, 170, 0.6)) !important;
    border-color: rgba(60, 180, 220, 0.4) !important;
    color: #fff !important;
}
.btn-info:hover, .btn-info:focus {
    background: linear-gradient(135deg, rgba(60, 180, 220, 0.8), rgba(40, 150, 200, 0.8)) !important;
    box-shadow: 0 0 20px rgba(60, 180, 220, 0.3) !important;
}
.btn-warning {
    background: linear-gradient(135deg, rgba(200, 160, 30, 0.6), rgba(170, 130, 20, 0.6)) !important;
    border-color: rgba(220, 180, 40, 0.4) !important;
    color: #fff !important;
}
.btn-warning:hover, .btn-warning:focus {
    background: linear-gradient(135deg, rgba(220, 180, 40, 0.8), rgba(200, 160, 30, 0.8)) !important;
    box-shadow: 0 0 20px rgba(220, 180, 40, 0.3) !important;
}
.btn-default {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #c0c6d6 !important;
}
.btn-default:hover, .btn-default:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* ============================================
   8. TABLES / DATATABLES
   ============================================ */
.table {
    color: #c0c6d6 !important;
}
.table > thead > tr > th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #a0a8c0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}
.table > tbody > tr > td {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.table > tbody > tr:hover > td {
    background: rgba(255, 255, 255, 0.04) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.02) !important;
}
.table-bordered {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* DataTables controls */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #d8dce8 !important;
    border-radius: 6px !important;
}
.dataTables_wrapper .dataTables_info {
    color: #8a90a8 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #a0a8c0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(120, 90, 220, 0.2) !important;
    border-color: rgba(120, 90, 220, 0.3) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(120, 90, 220, 0.3) !important;
    border-color: rgba(120, 90, 220, 0.4) !important;
    color: #fff !important;
}

/* ============================================
   9. MODALS
   ============================================ */
.modal-content {
    background: rgba(18, 18, 45, 0.92) !important;
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5) !important;
    color: #d0d4e0 !important;
}
.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.modal-header .modal-title {
    color: #e8eaf0 !important;
}
.modal-header .close {
    color: #8a90a8 !important;
    opacity: 0.8;
    text-shadow: none !important;
}
.modal-header .close:hover {
    color: #fff !important;
}
.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.modal-backdrop.in {
    opacity: 0.6;
}

/* ============================================
   10. ALERTS & LABELS & BADGES
   ============================================ */
.alert {
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px);
}
.alert-info {
    background: rgba(40, 150, 200, 0.15) !important;
    color: #a0d8f0 !important;
}
.alert-success {
    background: rgba(40, 160, 80, 0.15) !important;
    color: #a0e8b0 !important;
}
.alert-warning {
    background: rgba(200, 160, 30, 0.15) !important;
    color: #e8d890 !important;
}
.alert-danger {
    background: rgba(200, 50, 50, 0.15) !important;
    color: #f0a0a0 !important;
}

.label {
    border-radius: 6px !important;
    font-weight: 500;
}
.badge {
    border-radius: 10px;
}
.bg-aqua, .bg-teal { background-color: rgba(30, 130, 180, 0.5) !important; }
.bg-green { background-color: rgba(30, 160, 80, 0.5) !important; }
.bg-yellow { background-color: rgba(200, 160, 30, 0.5) !important; }
.bg-red { background-color: rgba(180, 50, 50, 0.5) !important; }
.bg-purple { background-color: rgba(120, 60, 180, 0.5) !important; }

/* ============================================
   11. TOASTR NOTIFICATIONS
   ============================================ */
#toast-container > .toast {
    background: rgba(18, 18, 45, 0.9) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    color: #d0d4e0 !important;
    opacity: 1 !important;
}
#toast-container > .toast-success {
    border-left: 4px solid rgba(50, 200, 120, 0.7) !important;
}
#toast-container > .toast-error {
    border-left: 4px solid rgba(220, 60, 60, 0.7) !important;
}
#toast-container > .toast-info {
    border-left: 4px solid rgba(60, 180, 220, 0.7) !important;
}
#toast-container > .toast-warning {
    border-left: 4px solid rgba(240, 180, 40, 0.7) !important;
}

/* ============================================
   12. FOOTER
   ============================================ */
.main-footer {
    background: rgba(12, 12, 30, 0.5) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #606880 !important;
}
.main-footer a {
    color: #8a9fff !important;
}

/* ============================================
   13. LOGIN PAGE
   ============================================ */
.login-page,
.register-page {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1035 35%, #0d1f3c 65%, #0a0a1a 100%) !important;
}
.login-box-body,
.register-box-body {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.4) !important;
    color: #d0d4e0 !important;
}
.login-box-body .form-control,
.register-box-body .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #d8dce8 !important;
}
.login-logo a,
.register-logo a {
    color: #e8eaf0 !important;
}

/* ============================================
   14. PROGRESS BARS & MISC
   ============================================ */
.progress {
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    overflow: hidden;
}
.progress-bar {
    background: linear-gradient(90deg, #785adc, #5a8aff) !important;
    border-radius: 8px;
}

.callout {
    background: rgba(255, 255, 255, 0.04) !important;
    border-left-width: 4px;
    border-radius: 0 10px 10px 0 !important;
    color: #c0c6d6 !important;
}

.nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.nav-tabs > li > a {
    color: #a0a8c0 !important;
    border-radius: 8px 8px 0 0 !important;
}
.nav-tabs > li > a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: transparent !important;
    color: #fff !important;
}

.pagination > li > a,
.pagination > li > span {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #a0a8c0 !important;
    border-radius: 6px !important;
    margin: 0 2px;
}
.pagination > li > a:hover {
    background: rgba(120, 90, 220, 0.2) !important;
    color: #fff !important;
}
.pagination > .active > a {
    background: rgba(120, 90, 220, 0.3) !important;
    border-color: rgba(120, 90, 220, 0.4) !important;
    color: #fff !important;
}

/* Panel */
.panel {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 14px !important;
}
.panel-heading {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e0e4f0 !important;
    border-radius: 14px 14px 0 0 !important;
}

/* Well */
.well {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 12px !important;
    color: #c0c6d6 !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
    background: rgba(120, 90, 220, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 90, 220, 0.5);
}

/* ============================================
   15. PACE LOADING BAR
   ============================================ */
.pace .pace-progress {
    background: linear-gradient(90deg, #785adc, #5a8aff) !important;
}

/* ============================================
   16. TIMELINE
   ============================================ */
.timeline > li > .timeline-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 12px !important;
    color: #c0c6d6 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
}
.timeline > li > .timeline-item > .timeline-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e0e4f0 !important;
}
.timeline > li > .fa,
.timeline > li > .glyphicon,
.timeline > li > .ion {
    background: rgba(120, 90, 220, 0.3) !important;
    color: #d0d4ff !important;
}

/* ============================================
   17. SMOOTH TRANSITIONS
   ============================================ */
.sidebar-menu > li,
.box,
.btn,
.form-control,
.small-box,
.info-box,
.modal-content,
.nav-tabs > li > a {
    transition: all 0.25s ease;
}