admin-lte 4.0.0-rc7 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/README.md +43 -17
  3. package/dist/UI/general.html +303 -126
  4. package/dist/UI/icons.html +303 -126
  5. package/dist/UI/timeline.html +303 -126
  6. package/dist/css/adminlte.css +2798 -1167
  7. package/dist/css/adminlte.css.map +1 -1
  8. package/dist/css/adminlte.min.css +2 -2
  9. package/dist/css/adminlte.min.css.map +1 -1
  10. package/dist/css/adminlte.rtl.css +2798 -1167
  11. package/dist/css/adminlte.rtl.css.map +1 -1
  12. package/dist/css/adminlte.rtl.min.css +2 -2
  13. package/dist/css/adminlte.rtl.min.css.map +1 -1
  14. package/dist/docs/browser-support.html +261 -397
  15. package/dist/docs/color-mode.html +242 -382
  16. package/dist/docs/components/main-header.html +238 -374
  17. package/dist/docs/components/main-sidebar.html +253 -389
  18. package/dist/docs/customization.html +1056 -0
  19. package/dist/docs/deployment.html +1121 -0
  20. package/dist/docs/faq.html +857 -409
  21. package/dist/docs/getting-started.html +967 -0
  22. package/dist/docs/how-to-contribute.html +335 -462
  23. package/dist/docs/index.html +16 -0
  24. package/dist/docs/integrations.html +1207 -0
  25. package/dist/docs/introduction.html +453 -446
  26. package/dist/docs/javascript/accessibility.html +361 -491
  27. package/dist/docs/javascript/card-widget.html +446 -450
  28. package/dist/docs/javascript/direct-chat.html +324 -421
  29. package/dist/docs/javascript/fullscreen.html +348 -416
  30. package/dist/docs/javascript/layout.html +345 -436
  31. package/dist/docs/javascript/plugins-overview.html +1120 -0
  32. package/dist/docs/javascript/pushmenu.html +485 -492
  33. package/dist/docs/javascript/treeview.html +466 -400
  34. package/dist/docs/layout-blueprint.html +1063 -0
  35. package/dist/docs/layout.html +287 -415
  36. package/dist/docs/license.html +252 -387
  37. package/dist/docs/migration.html +1125 -0
  38. package/dist/docs/recipes.html +1161 -0
  39. package/dist/docs/rtl.html +933 -0
  40. package/dist/examples/lockscreen.html +65 -1
  41. package/dist/examples/login-v2.html +65 -1
  42. package/dist/examples/login.html +65 -1
  43. package/dist/examples/register-v2.html +65 -1
  44. package/dist/examples/register.html +65 -1
  45. package/dist/forms/{general.html → elements.html} +489 -463
  46. package/dist/forms/layout.html +1243 -0
  47. package/dist/forms/validation.html +1251 -0
  48. package/dist/forms/wizard.html +1386 -0
  49. package/dist/generate/theme.html +134 -4
  50. package/dist/index.html +303 -126
  51. package/dist/index2.html +306 -126
  52. package/dist/index3.html +303 -126
  53. package/dist/js/adminlte.js +5 -5
  54. package/dist/js/adminlte.js.map +1 -1
  55. package/dist/js/adminlte.min.js +2 -2
  56. package/dist/js/adminlte.min.js.map +1 -1
  57. package/dist/layout/collapsed-sidebar-without-hover.html +303 -126
  58. package/dist/layout/collapsed-sidebar.html +303 -126
  59. package/dist/layout/fixed-complete.html +303 -126
  60. package/dist/layout/fixed-footer.html +303 -126
  61. package/dist/layout/fixed-header.html +303 -126
  62. package/dist/layout/fixed-sidebar.html +303 -126
  63. package/dist/layout/layout-custom-area.html +303 -126
  64. package/dist/layout/layout-rtl.html +303 -126
  65. package/dist/layout/logo-switch.html +134 -4
  66. package/dist/layout/sidebar-mini.html +303 -126
  67. package/dist/layout/unfixed-sidebar.html +303 -126
  68. package/dist/mailbox/compose.html +1127 -0
  69. package/dist/mailbox/inbox.html +1477 -0
  70. package/dist/mailbox/read.html +1178 -0
  71. package/dist/pages/404.html +213 -0
  72. package/dist/pages/500.html +201 -0
  73. package/dist/pages/calendar.html +1242 -0
  74. package/dist/pages/chat.html +1403 -0
  75. package/dist/pages/faq.html +1359 -0
  76. package/dist/pages/file-manager.html +1811 -0
  77. package/dist/pages/invoice.html +1175 -0
  78. package/dist/pages/kanban.html +1415 -0
  79. package/dist/pages/maintenance.html +204 -0
  80. package/dist/pages/pricing.html +1255 -0
  81. package/dist/pages/profile.html +1358 -0
  82. package/dist/pages/projects.html +1620 -0
  83. package/dist/pages/settings.html +1363 -0
  84. package/dist/tables/data.html +1295 -0
  85. package/dist/tables/simple.html +303 -126
  86. package/dist/widgets/cards.html +303 -126
  87. package/dist/widgets/info-box.html +303 -126
  88. package/dist/widgets/small-box.html +303 -126
  89. package/netlify.toml +16 -0
  90. package/package.json +29 -23
  91. package/src/scss/_app-header.scss +27 -0
  92. package/src/scss/_app-sidebar.scss +24 -30
  93. package/src/scss/_bootstrap-variables.scss +11 -4
  94. package/src/scss/_docs.scss +816 -0
  95. package/src/scss/_table.scss +4 -4
  96. package/src/scss/adminlte.scss +4 -1
  97. package/src/ts/adminlte.ts +1 -1
  98. package/src/ts/fullscreen.ts +8 -4
  99. package/src/ts/push-menu.ts +66 -5
  100. package/.claude/settings.local.json +0 -37
  101. package/CLAUDE.md +0 -79
  102. package/release.md +0 -75
@@ -1,6 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  /*!
3
- * AdminLTE v4.0.0-rc7
3
+ * AdminLTE v4.0.0
4
4
  * Author: Colorlib
5
5
  * Website: AdminLTE.io <https://adminlte.io>
6
6
  * License: Open source - MIT <https://opensource.org/licenses/MIT>
@@ -12838,6 +12838,76 @@ textarea.form-control-lg {
12838
12838
  top: 0;
12839
12839
  z-index: 1030;
12840
12840
  }
12841
+ @media (min-width: 576px) {
12842
+ .fixed-header.sidebar-expand-sm .app-sidebar {
12843
+ position: sticky;
12844
+ top: 0;
12845
+ max-height: 100vh;
12846
+ }
12847
+ .fixed-header.sidebar-expand-sm .app-sidebar .sidebar-wrapper {
12848
+ height: calc(100vh - (calc(3.5rem + 1px)));
12849
+ overflow-x: hidden;
12850
+ overflow-y: auto;
12851
+ }
12852
+ }
12853
+ @media (min-width: 768px) {
12854
+ .fixed-header.sidebar-expand-md .app-sidebar {
12855
+ position: sticky;
12856
+ top: 0;
12857
+ max-height: 100vh;
12858
+ }
12859
+ .fixed-header.sidebar-expand-md .app-sidebar .sidebar-wrapper {
12860
+ height: calc(100vh - (calc(3.5rem + 1px)));
12861
+ overflow-x: hidden;
12862
+ overflow-y: auto;
12863
+ }
12864
+ }
12865
+ @media (min-width: 992px) {
12866
+ .fixed-header.sidebar-expand-lg .app-sidebar {
12867
+ position: sticky;
12868
+ top: 0;
12869
+ max-height: 100vh;
12870
+ }
12871
+ .fixed-header.sidebar-expand-lg .app-sidebar .sidebar-wrapper {
12872
+ height: calc(100vh - (calc(3.5rem + 1px)));
12873
+ overflow-x: hidden;
12874
+ overflow-y: auto;
12875
+ }
12876
+ }
12877
+ @media (min-width: 1200px) {
12878
+ .fixed-header.sidebar-expand-xl .app-sidebar {
12879
+ position: sticky;
12880
+ top: 0;
12881
+ max-height: 100vh;
12882
+ }
12883
+ .fixed-header.sidebar-expand-xl .app-sidebar .sidebar-wrapper {
12884
+ height: calc(100vh - (calc(3.5rem + 1px)));
12885
+ overflow-x: hidden;
12886
+ overflow-y: auto;
12887
+ }
12888
+ }
12889
+ @media (min-width: 1400px) {
12890
+ .fixed-header.sidebar-expand-xxl .app-sidebar {
12891
+ position: sticky;
12892
+ top: 0;
12893
+ max-height: 100vh;
12894
+ }
12895
+ .fixed-header.sidebar-expand-xxl .app-sidebar .sidebar-wrapper {
12896
+ height: calc(100vh - (calc(3.5rem + 1px)));
12897
+ overflow-x: hidden;
12898
+ overflow-y: auto;
12899
+ }
12900
+ }
12901
+ .fixed-header.sidebar-expand .app-sidebar {
12902
+ position: sticky;
12903
+ top: 0;
12904
+ max-height: 100vh;
12905
+ }
12906
+ .fixed-header.sidebar-expand .app-sidebar .sidebar-wrapper {
12907
+ height: calc(100vh - (calc(3.5rem + 1px)));
12908
+ overflow-x: hidden;
12909
+ overflow-y: auto;
12910
+ }
12841
12911
 
12842
12912
  .app-sidebar {
12843
12913
  --lte-sidebar-hover-bg: rgba(0, 0, 0, 0.1);
@@ -12965,21 +13035,25 @@ textarea.form-control-lg {
12965
13035
  min-width: 1.5rem;
12966
13036
  max-width: 1.5rem;
12967
13037
  }
12968
- .sidebar-wrapper .sidebar-menu > .nav-item.menu-open .nav-link.active:not(:hover) {
12969
- --lte-sidebar-menu-active-bg: transparent;
12970
- }
12971
- .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:active, .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:focus {
13038
+ .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link {
12972
13039
  color: var(--lte-sidebar-color);
12973
13040
  }
12974
- .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active:not(:hover) {
13041
+ .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:hover, .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:focus {
13042
+ color: var(--lte-sidebar-hover-color);
13043
+ background-color: var(--lte-sidebar-hover-bg);
13044
+ }
13045
+ .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active {
12975
13046
  color: var(--lte-sidebar-menu-active-color);
12976
13047
  background-color: var(--lte-sidebar-menu-active-bg);
12977
13048
  }
12978
- .sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link, .sidebar-wrapper .sidebar-menu > .nav-item:hover > .nav-link,
12979
- .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:focus {
13049
+ .sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link {
12980
13050
  color: var(--lte-sidebar-hover-color);
12981
13051
  background-color: var(--lte-sidebar-hover-bg);
12982
13052
  }
13053
+ .sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link.active {
13054
+ color: var(--lte-sidebar-menu-active-color);
13055
+ background-color: var(--lte-sidebar-menu-active-bg);
13056
+ }
12983
13057
  .sidebar-wrapper .sidebar-menu > .nav-item > .nav-treeview {
12984
13058
  background-color: var(--lte-sidebar-submenu-bg);
12985
13059
  }
@@ -12998,14 +13072,12 @@ textarea.form-control-lg {
12998
13072
  }
12999
13073
  .sidebar-wrapper .nav-treeview > .nav-item > .nav-link:hover, .sidebar-wrapper .nav-treeview > .nav-item > .nav-link:focus {
13000
13074
  color: var(--lte-sidebar-submenu-hover-color);
13075
+ background-color: var(--lte-sidebar-submenu-hover-bg);
13001
13076
  }
13002
- .sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active, .sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active:hover, .sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active:focus {
13077
+ .sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active {
13003
13078
  color: var(--lte-sidebar-submenu-active-color);
13004
13079
  background-color: var(--lte-sidebar-submenu-active-bg);
13005
13080
  }
13006
- .sidebar-wrapper .nav-treeview > .nav-item > .nav-link:hover {
13007
- background-color: var(--lte-sidebar-submenu-hover-bg);
13008
- }
13009
13081
 
13010
13082
  .sidebar-menu .nav-item > .nav-link {
13011
13083
  margin-bottom: 0.2rem;
@@ -13072,9 +13144,6 @@ textarea.form-control-lg {
13072
13144
  padding: 0;
13073
13145
  list-style: none;
13074
13146
  }
13075
- .nav-indent .sidebar-menu .nav-treeview {
13076
- padding-right: 0.5rem;
13077
- }
13078
13147
  .sidebar-menu .menu-open > .nav-treeview {
13079
13148
  display: block;
13080
13149
  }
@@ -13089,6 +13158,10 @@ textarea.form-control-lg {
13089
13158
  right: auto !important;
13090
13159
  }
13091
13160
 
13161
+ .nav-indent .nav-treeview {
13162
+ padding-right: 0.5rem;
13163
+ }
13164
+
13092
13165
  .nav-compact.nav-indent .nav-treeview {
13093
13166
  padding-right: 0;
13094
13167
  }
@@ -14143,1459 +14216,3017 @@ body:not(.app-loaded) .app-footer {
14143
14216
  border-radius: 0.375rem;
14144
14217
  }
14145
14218
 
14146
- .progress {
14147
- border-radius: 1px;
14219
+ .docs-page .app-content > .container-fluid, .docs-page .app-content > .container-sm, .docs-page .app-content > .container-md, .docs-page .app-content > .container-lg, .docs-page .app-content > .container-xl, .docs-page .app-content > .container-xxl {
14220
+ max-width: 60rem;
14148
14221
  }
14149
- .progress.vertical {
14150
- position: relative;
14151
- display: inline-block;
14152
- width: 30px;
14153
- height: 200px;
14154
- margin-left: 10px;
14222
+ @media (min-width: 1400px) {
14223
+ .docs-page .app-content > .container-fluid, .docs-page .app-content > .container-sm, .docs-page .app-content > .container-md, .docs-page .app-content > .container-lg, .docs-page .app-content > .container-xl, .docs-page .app-content > .container-xxl {
14224
+ max-width: 64rem;
14225
+ }
14155
14226
  }
14156
- .progress.vertical > .progress-bar {
14157
- position: absolute;
14158
- bottom: 0;
14159
- width: 100%;
14227
+ .docs-page .card > .card-body {
14228
+ padding: 1.5rem;
14229
+ font-size: 1rem;
14230
+ line-height: 1.7;
14231
+ color: var(--bs-body-color);
14160
14232
  }
14161
- .progress.vertical.sm, .progress.vertical.progress-sm {
14162
- width: 20px;
14233
+ @media (min-width: 768px) {
14234
+ .docs-page .card > .card-body {
14235
+ padding: 2.5rem;
14236
+ }
14237
+ }
14238
+ .docs-page .card > .card-body h1,
14239
+ .docs-page .card > .card-body h2,
14240
+ .docs-page .card > .card-body h3,
14241
+ .docs-page .card > .card-body h4,
14242
+ .docs-page .card > .card-body h5,
14243
+ .docs-page .card > .card-body h6,
14244
+ .docs-page .card > .card-body .h1,
14245
+ .docs-page .card > .card-body .h2,
14246
+ .docs-page .card > .card-body .h3,
14247
+ .docs-page .card > .card-body .h4,
14248
+ .docs-page .card > .card-body .h5,
14249
+ .docs-page .card > .card-body .h6 {
14250
+ margin-top: 2em;
14251
+ margin-bottom: 0.5em;
14252
+ font-weight: 600;
14253
+ line-height: 1.3;
14254
+ color: var(--bs-emphasis-color);
14255
+ scroll-margin-top: 4rem;
14256
+ }
14257
+ .docs-page .card > .card-body h1:first-child,
14258
+ .docs-page .card > .card-body h2:first-child,
14259
+ .docs-page .card > .card-body h3:first-child,
14260
+ .docs-page .card > .card-body h4:first-child,
14261
+ .docs-page .card > .card-body h5:first-child,
14262
+ .docs-page .card > .card-body h6:first-child,
14263
+ .docs-page .card > .card-body .h1:first-child,
14264
+ .docs-page .card > .card-body .h2:first-child,
14265
+ .docs-page .card > .card-body .h3:first-child,
14266
+ .docs-page .card > .card-body .h4:first-child,
14267
+ .docs-page .card > .card-body .h5:first-child,
14268
+ .docs-page .card > .card-body .h6:first-child {
14269
+ margin-top: 0;
14163
14270
  }
14164
- .progress.vertical.xs, .progress.vertical.progress-xs {
14165
- width: 10px;
14271
+ .docs-page .card > .card-body h2,
14272
+ .docs-page .card > .card-body .h2 {
14273
+ padding-bottom: 0.35em;
14274
+ font-size: 1.75rem;
14275
+ border-bottom: 1px solid var(--bs-border-color);
14166
14276
  }
14167
- .progress.vertical.xxs, .progress.vertical.progress-xxs {
14168
- width: 3px;
14277
+ .docs-page .card > .card-body h3,
14278
+ .docs-page .card > .card-body .h3 {
14279
+ font-size: 1.4rem;
14169
14280
  }
14170
-
14171
- .progress-group {
14172
- margin-bottom: 0.5rem;
14281
+ .docs-page .card > .card-body h4,
14282
+ .docs-page .card > .card-body .h4 {
14283
+ font-size: 1.2rem;
14173
14284
  }
14174
-
14175
- .progress-sm {
14176
- height: 10px;
14285
+ .docs-page .card > .card-body h5,
14286
+ .docs-page .card > .card-body .h5 {
14287
+ padding-top: 1.5em;
14288
+ margin-top: 2.5em;
14289
+ font-size: 1.3rem;
14290
+ border-top: 1px solid var(--bs-border-color);
14177
14291
  }
14178
-
14179
- .progress-xs {
14180
- height: 7px;
14292
+ .docs-page .card > .card-body h5:first-child,
14293
+ .docs-page .card > .card-body .h5:first-child {
14294
+ padding-top: 0;
14295
+ border-top: 0;
14181
14296
  }
14182
-
14183
- .progress-xxs {
14184
- height: 3px;
14297
+ .docs-page .card > .card-body h6,
14298
+ .docs-page .card > .card-body .h6 {
14299
+ margin-top: 1.75em;
14300
+ font-size: 1.08rem;
14301
+ color: var(--bs-emphasis-color);
14185
14302
  }
14186
-
14187
- .table tr > td .progress {
14188
- margin: 0;
14303
+ .docs-page .card > .card-body p,
14304
+ .docs-page .card > .card-body ul,
14305
+ .docs-page .card > .card-body ol,
14306
+ .docs-page .card > .card-body dl,
14307
+ .docs-page .card > .card-body blockquote,
14308
+ .docs-page .card > .card-body table {
14309
+ margin-bottom: 1.1rem;
14189
14310
  }
14190
-
14191
- .card {
14192
- box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
14311
+ .docs-page .card > .card-body ul,
14312
+ .docs-page .card > .card-body ol {
14313
+ padding-right: 1.5rem;
14193
14314
  }
14194
- .card[class*=card-]:not(.card-outline) > .card-header, .card[class*=text-bg-]:not(.card-outline) > .card-header {
14195
- color: var(--lte-card-variant-color);
14196
- background-color: var(--lte-card-variant-bg);
14315
+ .docs-page .card > .card-body ul li,
14316
+ .docs-page .card > .card-body ol li {
14317
+ margin-bottom: 0.35rem;
14197
14318
  }
14198
- .card[class*=card-]:not(.card-outline) > .card-header .btn-tool, .card[class*=text-bg-]:not(.card-outline) > .card-header .btn-tool {
14199
- --bs-btn-color: rgba(var(--lte-card-variant-color-rgb), .8);
14200
- --bs-btn-hover-color: var(--lte-card-variant-color);
14319
+ .docs-page .card > .card-body ul ul,
14320
+ .docs-page .card > .card-body ul ol,
14321
+ .docs-page .card > .card-body ol ul,
14322
+ .docs-page .card > .card-body ol ol {
14323
+ margin-top: 0.35rem;
14324
+ margin-bottom: 0;
14201
14325
  }
14202
- .card.card-outline {
14203
- border-top: 3px solid var(--lte-card-variant-bg);
14326
+ .docs-page .card > .card-body h2 + p, .docs-page .card > .card-body .h2 + p,
14327
+ .docs-page .card > .card-body h3 + p,
14328
+ .docs-page .card > .card-body .h3 + p,
14329
+ .docs-page .card > .card-body h5 + p,
14330
+ .docs-page .card > .card-body .h5 + p {
14331
+ margin-top: 0;
14204
14332
  }
14205
- .card.maximized-card {
14206
- position: fixed;
14207
- top: 0;
14208
- right: 0;
14209
- z-index: 1050;
14210
- width: 100% !important;
14211
- max-width: 100% !important;
14212
- height: 100% !important;
14213
- max-height: 100% !important;
14333
+ .docs-page .card > .card-body p code,
14334
+ .docs-page .card > .card-body li code,
14335
+ .docs-page .card > .card-body td code,
14336
+ .docs-page .card > .card-body th code,
14337
+ .docs-page .card > .card-body h2 code,
14338
+ .docs-page .card > .card-body .h2 code,
14339
+ .docs-page .card > .card-body h3 code,
14340
+ .docs-page .card > .card-body .h3 code,
14341
+ .docs-page .card > .card-body h4 code,
14342
+ .docs-page .card > .card-body .h4 code,
14343
+ .docs-page .card > .card-body h5 code,
14344
+ .docs-page .card > .card-body .h5 code,
14345
+ .docs-page .card > .card-body h6 code,
14346
+ .docs-page .card > .card-body .h6 code {
14347
+ padding: 0.15em 0.4em;
14348
+ font-size: 0.875em;
14349
+ color: var(--bs-emphasis-color);
14350
+ background: var(--bs-tertiary-bg);
14351
+ border: 1px solid var(--bs-border-color);
14352
+ border-radius: 0.25rem;
14214
14353
  }
14215
- .card.maximized-card.was-collapsed .card-body {
14216
- display: block !important;
14354
+ .docs-page .card > .card-body pre.astro-code,
14355
+ .docs-page .card > .card-body pre {
14356
+ padding: 1rem 1.25rem;
14357
+ margin-top: 1.25rem;
14358
+ margin-bottom: 1.5rem;
14359
+ overflow-x: auto;
14360
+ font-size: 0.875rem;
14361
+ line-height: 1.6;
14362
+ border-radius: 0.375rem;
14217
14363
  }
14218
- .card.maximized-card .card-body {
14219
- overflow: auto;
14364
+ .docs-page .card > .card-body pre.astro-code code,
14365
+ .docs-page .card > .card-body pre code {
14366
+ padding: 0;
14367
+ background: transparent;
14368
+ border: 0;
14220
14369
  }
14221
- .card.maximized-card [data-lte-toggle=card-collapse] {
14222
- display: none;
14370
+ .docs-page .card > .card-body table {
14371
+ width: 100%;
14372
+ margin-top: 1.25rem;
14373
+ margin-bottom: 1.5rem;
14374
+ overflow: hidden;
14375
+ font-size: 0.95rem;
14376
+ border-collapse: collapse;
14377
+ border: 1px solid var(--bs-border-color);
14378
+ border-radius: 0.25rem;
14223
14379
  }
14224
- .card.maximized-card [data-lte-icon=maximize] {
14225
- display: none;
14380
+ .docs-page .card > .card-body table th,
14381
+ .docs-page .card > .card-body table td {
14382
+ padding: 0.65rem 0.9rem;
14383
+ text-align: right;
14384
+ vertical-align: top;
14385
+ border-bottom: 1px solid var(--bs-border-color);
14226
14386
  }
14227
- .card.maximized-card .card-header,
14228
- .card.maximized-card .card-footer {
14229
- border-radius: 0 !important;
14387
+ .docs-page .card > .card-body table th {
14388
+ font-weight: 600;
14389
+ color: var(--bs-emphasis-color);
14390
+ background: var(--bs-tertiary-bg);
14230
14391
  }
14231
- .card:not(.maximized-card) [data-lte-icon=minimize] {
14232
- display: none;
14392
+ .docs-page .card > .card-body table tr:last-child td {
14393
+ border-bottom: 0;
14233
14394
  }
14234
- .card.collapsed-card > .card-header [data-lte-icon=collapse] {
14235
- display: none;
14395
+ .docs-page .card > .card-body table code {
14396
+ white-space: nowrap;
14236
14397
  }
14237
- .card.collapsed-card > .card-body,
14238
- .card.collapsed-card > .card-footer {
14239
- display: none;
14398
+ .docs-page .card > .card-body blockquote {
14399
+ padding: 0.85rem 1.1rem;
14400
+ margin-top: 1.25rem;
14401
+ color: var(--bs-emphasis-color);
14402
+ background: var(--bs-info-bg-subtle);
14403
+ border-right: 4px solid var(--bs-info-border-subtle);
14404
+ border-radius: 0.25rem;
14240
14405
  }
14241
- .card:not(.collapsed-card) > .card-header [data-lte-icon=expand] {
14242
- display: none;
14406
+ .docs-page .card > .card-body blockquote p:last-child {
14407
+ margin-bottom: 0;
14243
14408
  }
14244
- .card .nav.flex-column > li {
14245
- margin: 0;
14246
- border-bottom: 1px solid var(--bs-border-color-translucent);
14409
+ .docs-page .card > .card-body blockquote code {
14410
+ background: rgba(0, 0, 0, 0.05);
14247
14411
  }
14248
- .card .nav.flex-column > li:last-of-type {
14249
- border-bottom: 0;
14412
+ .docs-page .card > .card-body a:not(.btn):not(.nav-link) {
14413
+ color: var(--bs-primary);
14414
+ text-decoration: underline;
14415
+ text-decoration-thickness: 1px;
14416
+ text-underline-offset: 3px;
14250
14417
  }
14251
- .card.height-control .card-body {
14252
- max-height: 300px;
14253
- overflow: auto;
14418
+ .docs-page .card > .card-body a:not(.btn):not(.nav-link):hover {
14419
+ text-decoration-thickness: 2px;
14254
14420
  }
14255
- .card .border-end {
14256
- border-left: 1px solid var(--bs-border-color-translucent);
14421
+ .docs-page .card > .card-body hr {
14422
+ margin: 2.5rem 0;
14423
+ border: 0;
14424
+ border-top: 1px solid var(--bs-border-color);
14425
+ opacity: 1;
14257
14426
  }
14258
- .card .border-start {
14259
- border-right: 1px solid var(--bs-border-color-translucent);
14427
+ .docs-page .card > .card-body > p:first-child,
14428
+ .docs-page .card > .card-body > p:first-of-type {
14429
+ margin-bottom: 2rem;
14430
+ font-size: 1.125rem;
14431
+ line-height: 1.6;
14432
+ color: var(--bs-body-color);
14260
14433
  }
14261
- .card.card-tabs:not(.card-outline) > .card-header {
14262
- border-bottom: 0;
14434
+ .docs-page .card > .card-body details.faq-item {
14435
+ margin-bottom: 0.5rem;
14436
+ overflow: hidden;
14437
+ background: var(--bs-body-bg);
14438
+ border: 1px solid var(--bs-border-color);
14439
+ border-radius: 0.375rem;
14440
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
14263
14441
  }
14264
- .card.card-tabs:not(.card-outline) > .card-header .nav-item:first-child .nav-link {
14265
- border-right-color: transparent;
14442
+ @media (prefers-reduced-motion: reduce) {
14443
+ .docs-page .card > .card-body details.faq-item {
14444
+ transition: none;
14445
+ }
14266
14446
  }
14267
- .card.card-tabs.card-outline .nav-item {
14268
- border-bottom: 0;
14447
+ .docs-page .card > .card-body details.faq-item:hover {
14448
+ border-color: var(--bs-primary-border-subtle);
14269
14449
  }
14270
- .card.card-tabs.card-outline .nav-item:first-child .nav-link {
14271
- margin-right: 0;
14272
- border-right: 0;
14450
+ .docs-page .card > .card-body details.faq-item[open] {
14451
+ background: var(--bs-body-bg);
14452
+ border-color: var(--bs-primary-border-subtle);
14453
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
14273
14454
  }
14274
- .card.card-tabs .card-tools {
14275
- margin: 0.3rem 0.5rem;
14455
+ .docs-page .card > .card-body details.faq-item summary {
14456
+ position: relative;
14457
+ padding: 0.9rem 1.1rem 0.9rem 3rem;
14458
+ font-size: 1rem;
14459
+ font-weight: 600;
14460
+ color: var(--bs-emphasis-color);
14461
+ list-style: none;
14462
+ cursor: pointer;
14463
+ -webkit-user-select: none;
14464
+ user-select: none;
14465
+ transition: color 0.15s ease;
14276
14466
  }
14277
- .card.card-tabs:not(.expanding-card).collapsed-card .card-header {
14278
- border-bottom: 0;
14467
+ @media (prefers-reduced-motion: reduce) {
14468
+ .docs-page .card > .card-body details.faq-item summary {
14469
+ transition: none;
14470
+ }
14279
14471
  }
14280
- .card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
14281
- border-bottom: 0;
14472
+ .docs-page .card > .card-body details.faq-item summary::-webkit-details-marker {
14473
+ display: none;
14282
14474
  }
14283
- .card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
14284
- margin-bottom: 0;
14475
+ .docs-page .card > .card-body details.faq-item summary::marker {
14476
+ content: "";
14285
14477
  }
14286
- .card.card-tabs.expanding-card .card-header .nav-tabs .nav-item {
14287
- margin-bottom: -1px;
14478
+ .docs-page .card > .card-body details.faq-item summary:hover {
14479
+ color: var(--bs-primary);
14288
14480
  }
14289
- .card.card-outline-tabs {
14290
- border-top: 0;
14481
+ .docs-page .card > .card-body details.faq-item summary::after {
14482
+ position: absolute;
14483
+ top: 50%;
14484
+ left: 1.1rem;
14485
+ display: inline-block;
14486
+ width: 0.55rem;
14487
+ height: 0.55rem;
14488
+ margin-top: -0.4rem;
14489
+ content: "";
14490
+ border-left: 2px solid currentcolor;
14491
+ border-bottom: 2px solid currentcolor;
14492
+ opacity: 0.55;
14493
+ transform: rotate(-45deg);
14494
+ transition: transform 0.2s ease;
14291
14495
  }
14292
- .card.card-outline-tabs .card-header .nav-item:first-child .nav-link {
14293
- margin-right: 0;
14294
- border-right: 0;
14496
+ @media (prefers-reduced-motion: reduce) {
14497
+ .docs-page .card > .card-body details.faq-item summary::after {
14498
+ transition: none;
14499
+ }
14295
14500
  }
14296
- .card.card-outline-tabs .card-header a {
14297
- text-decoration: none;
14298
- border-top: 3px solid transparent;
14501
+ .docs-page .card > .card-body details.faq-item[open] > summary {
14502
+ color: var(--bs-primary);
14503
+ border-bottom: 1px solid var(--bs-border-color);
14299
14504
  }
14300
- .card.card-outline-tabs .card-header a:hover {
14301
- border-top: 3px solid var(--bs-border-color);
14505
+ .docs-page .card > .card-body details.faq-item[open] > summary::after {
14506
+ margin-top: -0.15rem;
14507
+ opacity: 1;
14508
+ transform: rotate(135deg);
14302
14509
  }
14303
- .card.card-outline-tabs .card-header a.active:hover {
14304
- margin-top: 0;
14510
+ .docs-page .card > .card-body details.faq-item > *:not(summary) {
14511
+ padding-left: 1.1rem;
14512
+ padding-right: 1.1rem;
14305
14513
  }
14306
- .card.card-outline-tabs .card-tools {
14307
- margin: 0.5rem 0.5rem 0.3rem;
14514
+ .docs-page .card > .card-body details.faq-item > *:not(summary):first-of-type {
14515
+ padding-top: 1rem;
14308
14516
  }
14309
- .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header {
14310
- border-bottom: 0;
14517
+ .docs-page .card > .card-body details.faq-item > *:not(summary):last-child {
14518
+ padding-bottom: 1rem;
14311
14519
  }
14312
- .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
14313
- border-bottom: 0;
14520
+ .docs-page .card > .card-body details.faq-item p,
14521
+ .docs-page .card > .card-body details.faq-item ul,
14522
+ .docs-page .card > .card-body details.faq-item ol {
14523
+ margin-bottom: 0.65rem;
14314
14524
  }
14315
- .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
14525
+ .docs-page .card > .card-body details.faq-item > *:last-child p:last-child,
14526
+ .docs-page .card > .card-body details.faq-item > p:last-child,
14527
+ .docs-page .card > .card-body details.faq-item > ul:last-child,
14528
+ .docs-page .card > .card-body details.faq-item > ol:last-child {
14316
14529
  margin-bottom: 0;
14317
14530
  }
14318
- .card.card-outline-tabs.expanding-card .card-header .nav-tabs .nav-item {
14319
- margin-bottom: -1px;
14531
+ .docs-page .card > .card-body details.faq-item pre.astro-code,
14532
+ .docs-page .card > .card-body details.faq-item pre {
14533
+ margin-left: 0;
14534
+ margin-right: 0;
14320
14535
  }
14321
-
14322
- html.maximized-card {
14323
- overflow: hidden;
14536
+ .docs-page[data-bs-theme=dark] .card > .card-body blockquote code, [data-bs-theme=dark] .docs-page .card > .card-body blockquote code {
14537
+ background: rgba(255, 255, 255, 0.08);
14324
14538
  }
14325
14539
 
14326
- .card-header::after,
14327
- .card-body::after,
14328
- .card-footer::after {
14329
- display: block;
14330
- clear: both;
14331
- content: "";
14540
+ .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
14541
+ max-width: 64rem;
14332
14542
  }
14333
-
14334
- .card-header {
14543
+ @media (min-width: 1400px) {
14544
+ .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
14545
+ max-width: 72rem;
14546
+ }
14547
+ }
14548
+ .faq-page .faq-hero {
14335
14549
  position: relative;
14336
- padding: 1rem 1rem;
14337
- background-color: transparent;
14338
- border-bottom: 1px solid var(--bs-border-color-translucent);
14339
- border-top-right-radius: 0.375rem;
14340
- border-top-left-radius: 0.375rem;
14550
+ padding: 3rem 1.5rem 2.5rem;
14551
+ margin-top: 1rem;
14552
+ overflow: hidden;
14553
+ background: radial-gradient(ellipse at top right, rgba(var(--bs-primary-rgb), 0.12), transparent 60%), radial-gradient(ellipse at bottom left, rgba(var(--bs-info-rgb), 0.1), transparent 65%), var(--bs-body-bg);
14554
+ border: 1px solid var(--bs-border-color);
14555
+ border-radius: 1rem;
14341
14556
  }
14342
- .collapsed-card .card-header {
14343
- border-bottom: 0;
14557
+ .faq-page .faq-hero-eyebrow {
14558
+ display: inline-flex;
14559
+ gap: 0.4rem;
14560
+ align-items: center;
14561
+ padding: 0.35rem 0.85rem;
14562
+ margin-bottom: 1rem;
14563
+ font-size: 0.75rem;
14564
+ font-weight: 600;
14565
+ color: var(--bs-primary);
14566
+ text-transform: uppercase;
14567
+ letter-spacing: 0.08em;
14568
+ background: var(--bs-primary-bg-subtle);
14569
+ border: 1px solid var(--bs-primary-border-subtle);
14570
+ border-radius: 50rem;
14344
14571
  }
14345
- .card-header > .card-tools {
14346
- float: left;
14347
- margin-left: -0.5rem;
14572
+ .faq-page .faq-hero-eyebrow .bi {
14573
+ font-size: 0.9rem;
14348
14574
  }
14349
- .card-header > .card-tools .input-group,
14350
- .card-header > .card-tools .nav,
14351
- .card-header > .card-tools .pagination {
14352
- margin-top: -0.4rem;
14353
- margin-bottom: -0.4rem;
14575
+ .faq-page .faq-hero-title {
14576
+ margin: 0 0 0.5rem;
14577
+ font-size: 2.25rem;
14578
+ font-weight: 700;
14579
+ line-height: 1.15;
14580
+ color: var(--bs-emphasis-color);
14354
14581
  }
14355
- .card-header > .card-tools [data-bs-toggle=tooltip] {
14582
+ @media (min-width: 768px) {
14583
+ .faq-page .faq-hero-title {
14584
+ font-size: 2.75rem;
14585
+ }
14586
+ }
14587
+ .faq-page .faq-hero-lead {
14588
+ max-width: 36rem;
14589
+ margin: 0 auto 1.75rem;
14590
+ font-size: 1.05rem;
14591
+ line-height: 1.55;
14592
+ color: var(--bs-secondary-color);
14593
+ }
14594
+ .faq-page .faq-search {
14356
14595
  position: relative;
14596
+ max-width: 32rem;
14597
+ margin: 0 auto;
14357
14598
  }
14358
-
14359
- .card-title {
14360
- float: right;
14361
- margin: 0;
14362
- font-size: 1.1rem;
14363
- font-weight: 400;
14599
+ .faq-page .faq-search .form-control {
14600
+ height: 3rem;
14601
+ padding-left: 3rem;
14602
+ padding-right: 3rem;
14603
+ font-size: 1rem;
14604
+ background: var(--bs-body-bg);
14605
+ border-radius: 50rem;
14606
+ transition: box-shadow 0.15s ease, border-color 0.15s ease;
14364
14607
  }
14365
-
14366
- .btn-tool {
14367
- --bs-btn-padding-x: .5rem;
14368
- --bs-btn-padding-y: .25rem;
14608
+ @media (prefers-reduced-motion: reduce) {
14609
+ .faq-page .faq-search .form-control {
14610
+ transition: none;
14611
+ }
14369
14612
  }
14370
- .btn-tool:not(.btn-tool-custom) {
14371
- --bs-btn-color: var(--bs-tertiary-color);
14372
- --bs-btn-bg: transparent;
14373
- --bs-btn-box-shadow: none;
14374
- --bs-btn-hover-color: var(--bs-secondary-color);
14375
- --bs-btn-active-border-color: transparent;
14613
+ .faq-page .faq-search .form-control:focus {
14614
+ box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
14376
14615
  }
14377
- .btn-tool {
14378
- margin: -1rem 0;
14616
+ .faq-page .faq-search-icon {
14617
+ position: absolute;
14618
+ top: 50%;
14619
+ right: 1.2rem;
14620
+ color: var(--bs-secondary-color);
14621
+ pointer-events: none;
14622
+ transform: translateY(-50%);
14623
+ }
14624
+ .faq-page .faq-search-clear {
14625
+ position: absolute;
14626
+ top: 50%;
14627
+ left: 0.65rem;
14628
+ display: inline-flex;
14629
+ align-items: center;
14630
+ justify-content: center;
14631
+ width: 2rem;
14632
+ height: 2rem;
14633
+ padding: 0;
14634
+ color: var(--bs-secondary-color);
14635
+ background: var(--bs-tertiary-bg);
14636
+ border: 0;
14637
+ transform: translateY(-50%);
14638
+ border-radius: 50%;
14639
+ transition: background 0.15s ease, color 0.15s ease;
14640
+ }
14641
+ @media (prefers-reduced-motion: reduce) {
14642
+ .faq-page .faq-search-clear {
14643
+ transition: none;
14644
+ }
14645
+ }
14646
+ .faq-page .faq-search-clear:hover {
14647
+ color: var(--bs-body-color);
14648
+ background: var(--bs-secondary-bg);
14649
+ }
14650
+ .faq-page .faq-empty-state {
14651
+ max-width: 32rem;
14652
+ padding: 1rem;
14653
+ margin: 1.5rem auto 0;
14654
+ font-size: 0.95rem;
14655
+ color: var(--bs-secondary-color);
14656
+ background: var(--bs-tertiary-bg);
14657
+ border-radius: 0.375rem;
14658
+ }
14659
+ .faq-page .faq-empty-state .bi {
14660
+ margin-left: 0.35rem;
14661
+ }
14662
+ .faq-page .faq-chips {
14663
+ display: flex;
14664
+ flex-wrap: wrap;
14665
+ gap: 0.5rem;
14666
+ justify-content: center;
14667
+ }
14668
+ .faq-page .faq-chip {
14669
+ display: inline-flex;
14670
+ gap: 0.45rem;
14671
+ align-items: center;
14672
+ padding: 0.45rem 0.85rem;
14379
14673
  font-size: 0.875rem;
14674
+ font-weight: 500;
14675
+ color: var(--bs-body-color);
14676
+ text-decoration: none;
14677
+ background: var(--bs-body-bg);
14678
+ border: 1px solid var(--bs-border-color);
14679
+ border-radius: 50rem;
14680
+ transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
14380
14681
  }
14381
-
14382
- .card-primary,
14383
- .bg-primary,
14384
- .text-bg-primary {
14385
- --lte-card-variant-bg: #0d6efd;
14386
- --lte-card-variant-bg-rgb: 13, 110, 253;
14387
- --lte-card-variant-color: #fff;
14388
- --lte-card-variant-color-rgb: 255, 255, 255;
14682
+ @media (prefers-reduced-motion: reduce) {
14683
+ .faq-page .faq-chip {
14684
+ transition: none;
14685
+ }
14389
14686
  }
14390
-
14391
- .card-secondary,
14392
- .bg-secondary,
14393
- .text-bg-secondary {
14394
- --lte-card-variant-bg: #6c757d;
14395
- --lte-card-variant-bg-rgb: 108, 117, 125;
14396
- --lte-card-variant-color: #fff;
14397
- --lte-card-variant-color-rgb: 255, 255, 255;
14687
+ .faq-page .faq-chip:hover {
14688
+ color: var(--bs-emphasis-color);
14689
+ background: var(--bs-tertiary-bg);
14690
+ transform: translateY(-1px);
14398
14691
  }
14399
-
14400
- .card-success,
14401
- .bg-success,
14402
- .text-bg-success {
14403
- --lte-card-variant-bg: #198754;
14404
- --lte-card-variant-bg-rgb: 25, 135, 84;
14405
- --lte-card-variant-color: #fff;
14406
- --lte-card-variant-color-rgb: 255, 255, 255;
14692
+ .faq-page .faq-chip .bi {
14693
+ font-size: 1rem;
14407
14694
  }
14408
-
14409
- .card-info,
14410
- .bg-info,
14411
- .text-bg-info {
14412
- --lte-card-variant-bg: #0dcaf0;
14413
- --lte-card-variant-bg-rgb: 13, 202, 240;
14414
- --lte-card-variant-color: #000;
14415
- --lte-card-variant-color-rgb: 0, 0, 0;
14695
+ .faq-page .faq-chip-count {
14696
+ padding: 0 0.45rem;
14697
+ font-size: 0.7rem;
14698
+ font-weight: 600;
14699
+ color: var(--bs-secondary-color);
14700
+ background: var(--bs-tertiary-bg);
14701
+ border-radius: 50rem;
14702
+ }
14703
+ .faq-page .faq-chip-primary:hover {
14704
+ color: var(--bs-primary-text-emphasis);
14705
+ background: var(--bs-primary-bg-subtle);
14706
+ border-color: var(--bs-primary-border-subtle);
14707
+ }
14708
+ .faq-page .faq-chip-primary:hover .faq-chip-count {
14709
+ color: var(--bs-primary-text-emphasis);
14710
+ background: rgba(0, 0, 0, 0.06);
14711
+ }
14712
+ .faq-page .faq-chip-info:hover {
14713
+ color: var(--bs-info-text-emphasis);
14714
+ background: var(--bs-info-bg-subtle);
14715
+ border-color: var(--bs-info-border-subtle);
14716
+ }
14717
+ .faq-page .faq-chip-info:hover .faq-chip-count {
14718
+ color: var(--bs-info-text-emphasis);
14719
+ background: rgba(0, 0, 0, 0.06);
14720
+ }
14721
+ .faq-page .faq-chip-warning:hover {
14722
+ color: var(--bs-warning-text-emphasis);
14723
+ background: var(--bs-warning-bg-subtle);
14724
+ border-color: var(--bs-warning-border-subtle);
14725
+ }
14726
+ .faq-page .faq-chip-warning:hover .faq-chip-count {
14727
+ color: var(--bs-warning-text-emphasis);
14728
+ background: rgba(0, 0, 0, 0.06);
14729
+ }
14730
+ .faq-page .faq-chip-success:hover {
14731
+ color: var(--bs-success-text-emphasis);
14732
+ background: var(--bs-success-bg-subtle);
14733
+ border-color: var(--bs-success-border-subtle);
14734
+ }
14735
+ .faq-page .faq-chip-success:hover .faq-chip-count {
14736
+ color: var(--bs-success-text-emphasis);
14737
+ background: rgba(0, 0, 0, 0.06);
14738
+ }
14739
+ .faq-page .faq-chip-danger:hover {
14740
+ color: var(--bs-danger-text-emphasis);
14741
+ background: var(--bs-danger-bg-subtle);
14742
+ border-color: var(--bs-danger-border-subtle);
14743
+ }
14744
+ .faq-page .faq-chip-danger:hover .faq-chip-count {
14745
+ color: var(--bs-danger-text-emphasis);
14746
+ background: rgba(0, 0, 0, 0.06);
14747
+ }
14748
+ .faq-page .faq-chip-secondary:hover {
14749
+ color: var(--bs-secondary-text-emphasis);
14750
+ background: var(--bs-secondary-bg-subtle);
14751
+ border-color: var(--bs-secondary-border-subtle);
14752
+ }
14753
+ .faq-page .faq-chip-secondary:hover .faq-chip-count {
14754
+ color: var(--bs-secondary-text-emphasis);
14755
+ background: rgba(0, 0, 0, 0.06);
14756
+ }
14757
+ .faq-page .faq-section {
14758
+ margin-bottom: 2.5rem;
14759
+ scroll-margin-top: 5rem;
14760
+ }
14761
+ .faq-page .faq-section-header {
14762
+ display: flex;
14763
+ gap: 1rem;
14764
+ align-items: center;
14765
+ padding: 1rem 1.25rem;
14766
+ margin-bottom: 1rem;
14767
+ background: var(--bs-body-bg);
14768
+ border: 1px solid var(--bs-border-color);
14769
+ border-right: 4px solid var(--bs-primary);
14770
+ border-radius: 0.375rem;
14416
14771
  }
14417
-
14418
- .card-warning,
14419
- .bg-warning,
14420
- .text-bg-warning {
14421
- --lte-card-variant-bg: #ffc107;
14422
- --lte-card-variant-bg-rgb: 255, 193, 7;
14423
- --lte-card-variant-color: #000;
14424
- --lte-card-variant-color-rgb: 0, 0, 0;
14772
+ .faq-page .faq-section-icon {
14773
+ display: inline-flex;
14774
+ flex-shrink: 0;
14775
+ align-items: center;
14776
+ justify-content: center;
14777
+ width: 2.75rem;
14778
+ height: 2.75rem;
14779
+ font-size: 1.35rem;
14780
+ color: var(--bs-primary);
14781
+ background: var(--bs-primary-bg-subtle);
14782
+ border-radius: 0.375rem;
14425
14783
  }
14426
-
14427
- .card-danger,
14428
- .bg-danger,
14429
- .text-bg-danger {
14430
- --lte-card-variant-bg: #dc3545;
14431
- --lte-card-variant-bg-rgb: 220, 53, 69;
14432
- --lte-card-variant-color: #fff;
14433
- --lte-card-variant-color-rgb: 255, 255, 255;
14784
+ .faq-page .faq-section-title {
14785
+ margin: 0;
14786
+ font-size: 1.4rem;
14787
+ font-weight: 600;
14788
+ line-height: 1.2;
14789
+ color: var(--bs-emphasis-color);
14434
14790
  }
14435
-
14436
- .card-light,
14437
- .bg-light,
14438
- .text-bg-light {
14439
- --lte-card-variant-bg: #f8f9fa;
14440
- --lte-card-variant-bg-rgb: 248, 249, 250;
14441
- --lte-card-variant-color: #000;
14442
- --lte-card-variant-color-rgb: 0, 0, 0;
14791
+ .faq-page .faq-section-count {
14792
+ margin: 0.1rem 0 0;
14793
+ font-size: 0.8rem;
14794
+ color: var(--bs-secondary-color);
14443
14795
  }
14444
-
14445
- .card-dark,
14446
- .bg-dark,
14447
- .text-bg-dark {
14448
- --lte-card-variant-bg: #212529;
14449
- --lte-card-variant-bg-rgb: 33, 37, 41;
14450
- --lte-card-variant-color: #fff;
14451
- --lte-card-variant-color-rgb: 255, 255, 255;
14796
+ .faq-page .faq-section-primary {
14797
+ border-right-color: var(--bs-primary);
14452
14798
  }
14453
-
14454
- .card-body > .table {
14455
- margin-bottom: 0;
14799
+ .faq-page .faq-section-primary .faq-section-icon {
14800
+ color: var(--bs-primary-text-emphasis);
14801
+ background: var(--bs-primary-bg-subtle);
14456
14802
  }
14457
- .card-body > .table > thead > tr > th,
14458
- .card-body > .table > thead > tr > td {
14459
- border-top-width: 0;
14803
+ .faq-page .faq-section-info {
14804
+ border-right-color: var(--bs-info);
14460
14805
  }
14461
-
14462
- .table:not(.table-dark) {
14463
- color: inherit;
14806
+ .faq-page .faq-section-info .faq-section-icon {
14807
+ color: var(--bs-info-text-emphasis);
14808
+ background: var(--bs-info-bg-subtle);
14464
14809
  }
14465
- .table.table-head-fixed thead tr:nth-child(1) th {
14466
- position: sticky;
14467
- top: 0;
14468
- z-index: 10;
14469
- background-color: #fff;
14470
- border-bottom: 0;
14471
- box-shadow: inset 0 1px 0 var(--bs-border-color), inset 0 -1px 0 var(--bs-border-color);
14810
+ .faq-page .faq-section-warning {
14811
+ border-right-color: var(--bs-warning);
14472
14812
  }
14473
- .table.no-border,
14474
- .table.no-border td,
14475
- .table.no-border th {
14476
- border: 0;
14813
+ .faq-page .faq-section-warning .faq-section-icon {
14814
+ color: var(--bs-warning-text-emphasis);
14815
+ background: var(--bs-warning-bg-subtle);
14477
14816
  }
14478
- .table.text-center,
14479
- .table.text-center td,
14480
- .table.text-center th {
14481
- text-align: center;
14817
+ .faq-page .faq-section-success {
14818
+ border-right-color: var(--bs-success);
14482
14819
  }
14483
- .table.table-valign-middle thead > tr > th,
14484
- .table.table-valign-middle thead > tr > td,
14485
- .table.table-valign-middle tbody > tr > th,
14486
- .table.table-valign-middle tbody > tr > td {
14487
- vertical-align: middle;
14820
+ .faq-page .faq-section-success .faq-section-icon {
14821
+ color: var(--bs-success-text-emphasis);
14822
+ background: var(--bs-success-bg-subtle);
14488
14823
  }
14489
- .card-body.p-0 .table thead > tr > th:first-of-type,
14490
- .card-body.p-0 .table thead > tr > td:first-of-type,
14491
- .card-body.p-0 .table tfoot > tr > th:first-of-type,
14492
- .card-body.p-0 .table tfoot > tr > td:first-of-type,
14493
- .card-body.p-0 .table tbody > tr > th:first-of-type,
14494
- .card-body.p-0 .table tbody > tr > td:first-of-type {
14495
- padding-right: 1.5rem;
14824
+ .faq-page .faq-section-danger {
14825
+ border-right-color: var(--bs-danger);
14496
14826
  }
14497
- .card-body.p-0 .table thead > tr > th:last-of-type,
14498
- .card-body.p-0 .table thead > tr > td:last-of-type,
14499
- .card-body.p-0 .table tfoot > tr > th:last-of-type,
14500
- .card-body.p-0 .table tfoot > tr > td:last-of-type,
14501
- .card-body.p-0 .table tbody > tr > th:last-of-type,
14502
- .card-body.p-0 .table tbody > tr > td:last-of-type {
14503
- padding-left: 1.5rem;
14827
+ .faq-page .faq-section-danger .faq-section-icon {
14828
+ color: var(--bs-danger-text-emphasis);
14829
+ background: var(--bs-danger-bg-subtle);
14504
14830
  }
14505
-
14506
- .small-box {
14507
- border-radius: 0.375rem;
14508
- box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
14509
- position: relative;
14510
- display: block;
14511
- margin-bottom: 1.25rem;
14512
- --bs-link-color-rgb: none;
14513
- --bs-link-hover-color-rgb: none;
14514
- --bs-heading-color: none;
14515
- }
14516
- .small-box > .inner {
14517
- padding: 10px;
14518
- }
14519
- .small-box > .small-box-footer {
14520
- position: relative;
14521
- z-index: 10;
14522
- display: block;
14523
- padding: 3px 0;
14524
- text-align: center;
14525
- background-color: rgba(0, 0, 0, 0.07);
14526
- }
14527
- .small-box > .small-box-footer:hover {
14528
- background-color: rgba(0, 0, 0, 0.1);
14529
- }
14530
- .small-box h3, .small-box .h3 {
14531
- font-size: calc(1.345rem + 1.14vw);
14532
- }
14533
- @media (min-width: 1200px) {
14534
- .small-box h3, .small-box .h3 {
14535
- font-size: 2.2rem;
14536
- }
14831
+ .faq-page .faq-section-secondary {
14832
+ border-right-color: var(--bs-secondary);
14537
14833
  }
14538
- .small-box h3, .small-box .h3 {
14539
- padding: 0;
14540
- margin: 0 0 10px;
14541
- font-weight: 700;
14542
- white-space: nowrap;
14543
- }
14544
- @media (min-width: 992px) {
14545
- .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
14546
- font-size: calc(1.285rem + 0.42vw);
14547
- }
14834
+ .faq-page .faq-section-secondary .faq-section-icon {
14835
+ color: var(--bs-secondary-text-emphasis);
14836
+ background: var(--bs-secondary-bg-subtle);
14548
14837
  }
14549
- @media (min-width: 992px) and (min-width: 1200px) {
14550
- .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
14551
- font-size: 1.6rem;
14552
- }
14838
+ .faq-page .faq-section-items .faq-item {
14839
+ margin-bottom: 0.5rem;
14840
+ overflow: hidden;
14841
+ background: var(--bs-body-bg);
14842
+ border: 1px solid var(--bs-border-color);
14843
+ border-radius: 0.375rem;
14844
+ transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
14553
14845
  }
14554
- @media (min-width: 992px) {
14555
- .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
14556
- font-size: calc(1.285rem + 0.42vw);
14846
+ @media (prefers-reduced-motion: reduce) {
14847
+ .faq-page .faq-section-items .faq-item {
14848
+ transition: none;
14557
14849
  }
14558
14850
  }
14559
- @media (min-width: 992px) and (min-width: 1200px) {
14560
- .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
14561
- font-size: 1.6rem;
14562
- }
14851
+ .faq-page .faq-section-items .faq-item:hover {
14852
+ border-color: var(--bs-primary-border-subtle);
14853
+ transform: translateX(-2px);
14563
14854
  }
14564
- @media (min-width: 1200px) {
14565
- .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
14566
- font-size: calc(1.345rem + 1.14vw);
14567
- }
14855
+ .faq-page .faq-section-items .faq-item[open] {
14856
+ border-color: var(--bs-primary-border-subtle);
14857
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
14858
+ transform: none;
14568
14859
  }
14569
- @media (min-width: 1200px) and (min-width: 1200px) {
14570
- .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
14571
- font-size: 2.2rem;
14572
- }
14860
+ .faq-page .faq-section-items .faq-item summary {
14861
+ display: flex;
14862
+ gap: 0.85rem;
14863
+ align-items: center;
14864
+ padding: 1rem 1.25rem;
14865
+ font-size: 1rem;
14866
+ font-weight: 500;
14867
+ color: var(--bs-emphasis-color);
14868
+ list-style: none;
14869
+ cursor: pointer;
14870
+ -webkit-user-select: none;
14871
+ user-select: none;
14573
14872
  }
14574
- @media (min-width: 1200px) {
14575
- .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
14576
- font-size: calc(1.345rem + 1.14vw);
14577
- }
14873
+ .faq-page .faq-section-items .faq-item summary::-webkit-details-marker {
14874
+ display: none;
14578
14875
  }
14579
- @media (min-width: 1200px) and (min-width: 1200px) {
14580
- .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
14581
- font-size: 2.2rem;
14582
- }
14876
+ .faq-page .faq-section-items .faq-item summary::marker {
14877
+ content: "";
14583
14878
  }
14584
- .small-box p {
14585
- font-size: 1rem;
14879
+ .faq-page .faq-section-items .faq-item summary::after {
14880
+ content: none;
14586
14881
  }
14587
- .small-box p > small, .small-box p > .small {
14588
- display: block;
14589
- margin-top: 5px;
14590
- font-size: 0.9rem;
14591
- color: #f8f9fa;
14882
+ .faq-page .faq-section-items .faq-item .faq-q-icon {
14883
+ display: inline-flex;
14884
+ flex-shrink: 0;
14885
+ align-items: center;
14886
+ justify-content: center;
14887
+ width: 1.75rem;
14888
+ height: 1.75rem;
14889
+ font-size: 0.85rem;
14890
+ color: var(--bs-primary);
14891
+ background: var(--bs-primary-bg-subtle);
14892
+ border-radius: 50%;
14592
14893
  }
14593
- .small-box h3, .small-box .h3,
14594
- .small-box p {
14595
- z-index: 5;
14894
+ .faq-page .faq-section-items .faq-item .faq-q-text {
14895
+ flex-grow: 1;
14596
14896
  }
14597
- .small-box .small-box-icon {
14598
- position: absolute;
14599
- top: 15px;
14600
- left: 15px;
14601
- z-index: 0;
14602
- height: 70px;
14603
- font-size: 70px;
14604
- color: rgba(0, 0, 0, 0.15);
14605
- transition: transform 0.3s linear;
14897
+ .faq-page .faq-section-items .faq-item .faq-q-chevron {
14898
+ flex-shrink: 0;
14899
+ color: var(--bs-secondary-color);
14900
+ transition: transform 0.2s ease, color 0.2s ease;
14606
14901
  }
14607
14902
  @media (prefers-reduced-motion: reduce) {
14608
- .small-box .small-box-icon {
14903
+ .faq-page .faq-section-items .faq-item .faq-q-chevron {
14609
14904
  transition: none;
14610
14905
  }
14611
14906
  }
14612
- .small-box:hover .small-box-icon {
14613
- transform: scale(1.1);
14907
+ .faq-page .faq-section-items .faq-item[open] .faq-q-chevron {
14908
+ color: var(--bs-primary);
14909
+ transform: rotate(-180deg);
14614
14910
  }
14615
-
14616
- @media (max-width: 575.98px) {
14617
- .small-box {
14618
- text-align: center;
14619
- }
14620
- .small-box .small-box-icon {
14621
- display: none;
14622
- }
14623
- .small-box p {
14624
- font-size: 12px;
14625
- }
14911
+ .faq-page .faq-section-items .faq-item[open] summary {
14912
+ color: var(--bs-primary);
14913
+ border-bottom: 1px solid var(--bs-border-color);
14626
14914
  }
14627
- .info-box {
14628
- box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
14629
- border-radius: 0.375rem;
14630
- position: relative;
14631
- display: flex;
14632
- width: 100%;
14633
- min-height: 80px;
14634
- padding: 0.5rem;
14635
- margin-bottom: 1rem;
14915
+ .faq-page .faq-section-items .faq-item .faq-answer {
14916
+ padding: 1.1rem 3.85rem 1.1rem 1.25rem;
14917
+ font-size: 0.95rem;
14918
+ line-height: 1.65;
14636
14919
  color: var(--bs-body-color);
14637
- background-color: var(--bs-body-bg);
14638
- }
14639
- .info-box .progress {
14640
- height: 2px;
14641
- margin: 5px 0;
14642
- background-color: rgba(var(--lte-card-variant-color-rgb), 0.125);
14643
14920
  }
14644
- .info-box .progress .progress-bar {
14645
- background-color: var(--lte-card-variant-color);
14921
+ .faq-page .faq-section-items .faq-item .faq-answer p:last-child,
14922
+ .faq-page .faq-section-items .faq-item .faq-answer ul:last-child,
14923
+ .faq-page .faq-section-items .faq-item .faq-answer ol:last-child,
14924
+ .faq-page .faq-section-items .faq-item .faq-answer pre:last-child {
14925
+ margin-bottom: 0;
14646
14926
  }
14647
- .info-box .info-box-icon {
14648
- display: flex;
14649
- align-items: center;
14650
- justify-content: center;
14651
- width: 70px;
14652
- font-size: 1.875rem;
14653
- text-align: center;
14654
- border-radius: 0.375rem;
14927
+ .faq-page .faq-section-items .faq-item .faq-answer a {
14928
+ color: var(--bs-primary);
14929
+ text-decoration: underline;
14930
+ text-underline-offset: 2px;
14655
14931
  }
14656
- .info-box .info-box-icon > img {
14657
- max-width: 100%;
14932
+ .faq-page .faq-section-items .faq-item .faq-answer a:hover {
14933
+ text-decoration-thickness: 2px;
14658
14934
  }
14659
- .info-box .info-box-content {
14660
- display: flex;
14661
- flex: 1;
14662
- flex-direction: column;
14663
- justify-content: center;
14664
- padding: 0 10px;
14665
- line-height: 1.8;
14935
+ .faq-page .faq-section-items .faq-item .faq-answer code {
14936
+ padding: 0.12em 0.35em;
14937
+ font-size: 0.875em;
14938
+ color: var(--bs-emphasis-color);
14939
+ background: var(--bs-tertiary-bg);
14940
+ border: 1px solid var(--bs-border-color);
14941
+ border-radius: 0.25rem;
14666
14942
  }
14667
- .info-box .info-box-number {
14668
- display: block;
14669
- margin-top: 0.25rem;
14670
- font-weight: 700;
14943
+ .faq-page .faq-section-items .faq-item .faq-answer pre.astro-code,
14944
+ .faq-page .faq-section-items .faq-item .faq-answer pre {
14945
+ padding: 0.85rem 1rem;
14946
+ margin-top: 0.75rem;
14947
+ margin-bottom: 0.75rem;
14948
+ overflow-x: auto;
14949
+ font-size: 0.85rem;
14950
+ line-height: 1.55;
14951
+ border-radius: 0.25rem;
14671
14952
  }
14672
- .info-box .progress-description,
14673
- .info-box .info-box-text {
14674
- display: block;
14675
- overflow: hidden;
14676
- text-overflow: ellipsis;
14677
- white-space: nowrap;
14953
+ .faq-page .faq-section-items .faq-item .faq-answer pre.astro-code code,
14954
+ .faq-page .faq-section-items .faq-item .faq-answer pre code {
14955
+ padding: 0;
14956
+ background: transparent;
14957
+ border: 0;
14678
14958
  }
14679
- .info-box .info-box-more {
14680
- display: block;
14959
+ .faq-page .faq-cta {
14960
+ padding: 2.5rem 1.5rem;
14961
+ text-align: center;
14962
+ background: radial-gradient(ellipse at top, rgba(var(--bs-primary-rgb), 0.08), transparent 60%), var(--bs-body-bg);
14963
+ border: 1px solid var(--bs-border-color);
14964
+ border-radius: 1rem;
14681
14965
  }
14682
- .info-box .progress-description {
14683
- margin: 0;
14966
+ .faq-page .faq-cta-icon {
14967
+ display: inline-flex;
14968
+ align-items: center;
14969
+ justify-content: center;
14970
+ width: 3.5rem;
14971
+ height: 3.5rem;
14972
+ margin-bottom: 1rem;
14973
+ font-size: 1.6rem;
14974
+ color: var(--bs-primary);
14975
+ background: var(--bs-primary-bg-subtle);
14976
+ border-radius: 50%;
14684
14977
  }
14685
- @media (min-width: 768px) {
14686
- .col-xl-2 .info-box .progress-description, .col-lg-2 .info-box .progress-description, .col-md-2 .info-box .progress-description {
14687
- display: none;
14688
- }
14689
- .col-xl-3 .info-box .progress-description, .col-lg-3 .info-box .progress-description, .col-md-3 .info-box .progress-description {
14690
- display: none;
14691
- }
14978
+ .faq-page .faq-cta h2, .faq-page .faq-cta .h2 {
14979
+ margin: 0 0 0.5rem;
14980
+ font-size: 1.5rem;
14981
+ font-weight: 600;
14982
+ color: var(--bs-emphasis-color);
14692
14983
  }
14693
- @media (min-width: 992px) {
14694
- .col-xl-2 .info-box .progress-description, .col-lg-2 .info-box .progress-description, .col-md-2 .info-box .progress-description {
14695
- font-size: 0.75rem;
14696
- display: block;
14697
- }
14698
- .col-xl-3 .info-box .progress-description, .col-lg-3 .info-box .progress-description, .col-md-3 .info-box .progress-description {
14699
- font-size: 0.75rem;
14700
- display: block;
14701
- }
14984
+ .faq-page .faq-cta p {
14985
+ max-width: 32rem;
14986
+ margin: 0 auto 1.5rem;
14987
+ color: var(--bs-secondary-color);
14702
14988
  }
14703
- @media (min-width: 1200px) {
14704
- .col-xl-2 .info-box .progress-description, .col-lg-2 .info-box .progress-description, .col-md-2 .info-box .progress-description {
14705
- font-size: 1rem;
14706
- display: block;
14707
- }
14708
- .col-xl-3 .info-box .progress-description, .col-lg-3 .info-box .progress-description, .col-md-3 .info-box .progress-description {
14709
- font-size: 1rem;
14710
- display: block;
14711
- }
14989
+ .faq-page .faq-cta-actions {
14990
+ display: inline-flex;
14991
+ flex-wrap: wrap;
14992
+ gap: 0.5rem;
14993
+ justify-content: center;
14712
14994
  }
14713
14995
 
14714
- .timeline {
14996
+ .progress {
14997
+ border-radius: 1px;
14998
+ }
14999
+ .progress.vertical {
14715
15000
  position: relative;
14716
- padding: 0;
14717
- margin: 0 0 45px;
15001
+ display: inline-block;
15002
+ width: 30px;
15003
+ height: 200px;
15004
+ margin-left: 10px;
14718
15005
  }
14719
- .timeline::before {
14720
- border-radius: 0.375rem;
15006
+ .progress.vertical > .progress-bar {
14721
15007
  position: absolute;
14722
- top: 0;
14723
15008
  bottom: 0;
14724
- right: 31px;
14725
- width: 4px;
14726
- margin: 0;
14727
- content: "";
14728
- background-color: var(--bs-border-color);
15009
+ width: 100%;
14729
15010
  }
14730
- .timeline > div::before, .timeline > div::after {
14731
- display: table;
14732
- content: "";
15011
+ .progress.vertical.sm, .progress.vertical.progress-sm {
15012
+ width: 20px;
14733
15013
  }
14734
- .timeline > div {
14735
- position: relative;
14736
- margin-left: 10px;
14737
- margin-bottom: 15px;
14738
- }
14739
- .timeline > div > .timeline-item {
14740
- box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
14741
- border-radius: 0.375rem;
14742
- position: relative;
14743
- padding: 0;
14744
- margin-top: 0;
14745
- margin-left: 15px;
14746
- margin-right: 60px;
14747
- color: var(--bs-body-color);
14748
- background-color: var(--bs-body-bg);
15014
+ .progress.vertical.xs, .progress.vertical.progress-xs {
15015
+ width: 10px;
14749
15016
  }
14750
- .timeline > div > .timeline-item > .time {
14751
- float: left;
14752
- padding: 10px;
14753
- font-size: 12px;
14754
- color: var(--bs-secondary-color);
15017
+ .progress.vertical.xxs, .progress.vertical.progress-xxs {
15018
+ width: 3px;
14755
15019
  }
14756
- .timeline > div > .timeline-item > .timeline-header {
14757
- padding: 10px;
14758
- margin: 0;
14759
- font-size: 16px;
14760
- line-height: 1.1;
14761
- color: var(--bs-secondary-color);
14762
- border-bottom: 1px solid var(--bs-border-color);
15020
+
15021
+ .progress-group {
15022
+ margin-bottom: 0.5rem;
14763
15023
  }
14764
- .timeline > div > .timeline-item > .timeline-header > a {
14765
- font-weight: 600;
14766
- text-decoration: none;
15024
+
15025
+ .progress-sm {
15026
+ height: 10px;
14767
15027
  }
14768
- .timeline > div > .timeline-item > .timeline-body,
14769
- .timeline > div > .timeline-item > .timeline-footer {
14770
- padding: 10px;
15028
+
15029
+ .progress-xs {
15030
+ height: 7px;
14771
15031
  }
14772
- .timeline > div > .timeline-item > .timeline-body > img {
14773
- margin: 10px;
15032
+
15033
+ .progress-xxs {
15034
+ height: 3px;
14774
15035
  }
14775
- .timeline > div > .timeline-item > .timeline-body > dl,
14776
- .timeline > div > .timeline-item > .timeline-body ol,
14777
- .timeline > div > .timeline-item > .timeline-body ul {
15036
+
15037
+ .table tr > td .progress {
14778
15038
  margin: 0;
14779
15039
  }
14780
- .timeline > div .timeline-icon {
14781
- position: absolute;
14782
- top: 0;
14783
- right: 18px;
14784
- width: 30px;
14785
- height: 30px;
14786
- font-size: 16px;
14787
- line-height: 30px;
14788
- text-align: center;
14789
- background-color: var(--bs-secondary-bg);
14790
- border-radius: 50%;
14791
- }
14792
- .timeline > .time-label > span {
14793
- border-radius: 4px;
14794
- display: inline-block;
14795
- padding: 5px;
14796
- font-weight: 600;
14797
- background-color: var(--bs-body-bg);
14798
- }
14799
15040
 
14800
- .timeline-inverse > div > .timeline-item {
14801
- box-shadow: none;
14802
- background-color: var(--bs-tertiary-bg);
14803
- border: 1px solid var(--bs-border-color);
15041
+ .card {
15042
+ box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
14804
15043
  }
14805
- .timeline-inverse > div > .timeline-item > .timeline-header {
14806
- border-bottom-color: var(--bs-border-color);
15044
+ .card[class*=card-]:not(.card-outline) > .card-header, .card[class*=text-bg-]:not(.card-outline) > .card-header {
15045
+ color: var(--lte-card-variant-color);
15046
+ background-color: var(--lte-card-variant-bg);
14807
15047
  }
14808
-
14809
- .direct-chat .card-body {
14810
- position: relative;
14811
- padding: 0;
14812
- overflow-x: hidden;
15048
+ .card[class*=card-]:not(.card-outline) > .card-header .btn-tool, .card[class*=text-bg-]:not(.card-outline) > .card-header .btn-tool {
15049
+ --bs-btn-color: rgba(var(--lte-card-variant-color-rgb), .8);
15050
+ --bs-btn-hover-color: var(--lte-card-variant-color);
14813
15051
  }
14814
- .direct-chat.chat-pane-open .direct-chat-contacts {
14815
- transform: translate(0, 0);
15052
+ .card.card-outline {
15053
+ border-top: 3px solid var(--lte-card-variant-bg);
14816
15054
  }
14817
- .direct-chat.timestamp-light .direct-chat-timestamp {
14818
- color: rgba(var(--bs-body-color-rgb), 0.65);
15055
+ .card.maximized-card {
15056
+ position: fixed;
15057
+ top: 0;
15058
+ right: 0;
15059
+ z-index: 1050;
15060
+ width: 100% !important;
15061
+ max-width: 100% !important;
15062
+ height: 100% !important;
15063
+ max-height: 100% !important;
14819
15064
  }
14820
- .direct-chat.timestamp-dark .direct-chat-timestamp {
14821
- color: rgba(var(--bs-body-color-rgb), 0.9);
15065
+ .card.maximized-card.was-collapsed .card-body {
15066
+ display: block !important;
14822
15067
  }
14823
-
14824
- .direct-chat-messages {
14825
- height: 250px;
14826
- padding: 10px;
15068
+ .card.maximized-card .card-body {
14827
15069
  overflow: auto;
14828
- transform: translate(0, 0);
14829
15070
  }
14830
-
14831
- .direct-chat-msg,
14832
- .direct-chat-text {
14833
- display: block;
15071
+ .card.maximized-card [data-lte-toggle=card-collapse] {
15072
+ display: none;
14834
15073
  }
14835
-
14836
- .direct-chat-msg::after {
14837
- display: block;
14838
- clear: both;
14839
- content: "";
15074
+ .card.maximized-card [data-lte-icon=maximize] {
15075
+ display: none;
14840
15076
  }
14841
- .direct-chat-msg {
14842
- margin-bottom: 10px;
15077
+ .card.maximized-card .card-header,
15078
+ .card.maximized-card .card-footer {
15079
+ border-radius: 0 !important;
14843
15080
  }
14844
-
14845
- .direct-chat-messages,
14846
- .direct-chat-contacts {
14847
- transition: transform 0.5s ease-in-out;
15081
+ .card:not(.maximized-card) [data-lte-icon=minimize] {
15082
+ display: none;
14848
15083
  }
14849
- @media (prefers-reduced-motion: reduce) {
14850
- .direct-chat-messages,
14851
- .direct-chat-contacts {
14852
- transition: none;
14853
- }
15084
+ .card.collapsed-card > .card-header [data-lte-icon=collapse] {
15085
+ display: none;
14854
15086
  }
14855
-
14856
- .direct-chat-text {
14857
- border-radius: 0.5rem;
14858
- position: relative;
14859
- padding: 5px 10px;
14860
- margin: 5px 50px 0 0;
14861
- color: var(--bs-emphasis-color);
14862
- background-color: var(--bs-secondary-bg);
14863
- border: 1px solid var(--bs-border-color);
15087
+ .card.collapsed-card > .card-body,
15088
+ .card.collapsed-card > .card-footer {
15089
+ display: none;
14864
15090
  }
14865
- .direct-chat-text::after, .direct-chat-text::before {
14866
- position: absolute;
14867
- top: 15px;
14868
- left: 100%;
14869
- width: 0;
14870
- height: 0;
14871
- pointer-events: none;
14872
- content: " ";
14873
- border: solid transparent;
14874
- border-left-color: var(--bs-border-color);
15091
+ .card:not(.collapsed-card) > .card-header [data-lte-icon=expand] {
15092
+ display: none;
14875
15093
  }
14876
- .direct-chat-text::after {
14877
- margin-top: -5px;
14878
- border-width: 5px;
15094
+ .card .nav.flex-column > li {
15095
+ margin: 0;
15096
+ border-bottom: 1px solid var(--bs-border-color-translucent);
14879
15097
  }
14880
- .direct-chat-text::before {
14881
- margin-top: -6px;
14882
- border-width: 6px;
15098
+ .card .nav.flex-column > li:last-of-type {
15099
+ border-bottom: 0;
14883
15100
  }
14884
- .end .direct-chat-text {
14885
- margin-left: 50px;
14886
- margin-right: 0;
15101
+ .card.height-control .card-body {
15102
+ max-height: 300px;
15103
+ overflow: auto;
14887
15104
  }
14888
- .end .direct-chat-text::after, .end .direct-chat-text::before {
14889
- left: auto;
14890
- right: 100%;
14891
- border-left-color: transparent;
14892
- border-right-color: var(--bs-border-color);
15105
+ .card .border-end {
15106
+ border-left: 1px solid var(--bs-border-color-translucent);
14893
15107
  }
14894
-
14895
- .direct-chat-img {
14896
- border-radius: 50%;
14897
- float: right;
14898
- width: 40px;
14899
- height: 40px;
15108
+ .card .border-start {
15109
+ border-right: 1px solid var(--bs-border-color-translucent);
14900
15110
  }
14901
- .end .direct-chat-img {
14902
- float: left;
15111
+ .card.card-tabs:not(.card-outline) > .card-header {
15112
+ border-bottom: 0;
14903
15113
  }
14904
-
14905
- .direct-chat-infos {
14906
- display: block;
14907
- margin-bottom: 2px;
14908
- font-size: 0.875rem;
15114
+ .card.card-tabs:not(.card-outline) > .card-header .nav-item:first-child .nav-link {
15115
+ border-right-color: transparent;
14909
15116
  }
14910
-
14911
- .direct-chat-name {
14912
- font-weight: 600;
15117
+ .card.card-tabs.card-outline .nav-item {
15118
+ border-bottom: 0;
14913
15119
  }
14914
-
14915
- .direct-chat-timestamp {
14916
- color: rgba(var(--bs-body-color-rgb), 0.75);
15120
+ .card.card-tabs.card-outline .nav-item:first-child .nav-link {
15121
+ margin-right: 0;
15122
+ border-right: 0;
14917
15123
  }
14918
-
14919
- .direct-chat-contacts-open .direct-chat-contacts {
14920
- transform: translate(0, 0);
15124
+ .card.card-tabs .card-tools {
15125
+ margin: 0.3rem 0.5rem;
14921
15126
  }
14922
-
14923
- .direct-chat-contacts {
14924
- position: absolute;
14925
- top: 0;
14926
- bottom: 0;
14927
- width: 100%;
14928
- height: 250px;
14929
- overflow: auto;
14930
- color: var(--bs-body-bg);
14931
- background-color: var(--bs-body-color);
14932
- transform: translate(-101%, 0);
15127
+ .card.card-tabs:not(.expanding-card).collapsed-card .card-header {
15128
+ border-bottom: 0;
14933
15129
  }
14934
-
14935
- .direct-chat-contacts-light {
14936
- background-color: var(--bs-light-bg-subtle);
15130
+ .card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
15131
+ border-bottom: 0;
14937
15132
  }
14938
- .direct-chat-contacts-light .contacts-list-name {
14939
- color: var(--bs-body-color);
15133
+ .card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
15134
+ margin-bottom: 0;
14940
15135
  }
14941
- .direct-chat-contacts-light .contacts-list-date {
14942
- color: var(--bs-secondary-color);
14943
- }
14944
- .direct-chat-contacts-light .contacts-list-msg {
14945
- color: var(--bs-secondary-color);
15136
+ .card.card-tabs.expanding-card .card-header .nav-tabs .nav-item {
15137
+ margin-bottom: -1px;
14946
15138
  }
14947
-
14948
- .contacts-list {
14949
- padding-right: 0;
14950
- list-style: none;
15139
+ .card.card-outline-tabs {
15140
+ border-top: 0;
14951
15141
  }
14952
- .contacts-list > li::after {
14953
- display: block;
14954
- clear: both;
14955
- content: "";
15142
+ .card.card-outline-tabs .card-header .nav-item:first-child .nav-link {
15143
+ margin-right: 0;
15144
+ border-right: 0;
14956
15145
  }
14957
- .contacts-list > li {
14958
- padding: 10px;
14959
- margin: 0;
15146
+ .card.card-outline-tabs .card-header a {
14960
15147
  text-decoration: none;
14961
- border-bottom: 1px solid rgba(0, 0, 0, 0.2);
15148
+ border-top: 3px solid transparent;
14962
15149
  }
14963
- .contacts-list > li:last-of-type {
15150
+ .card.card-outline-tabs .card-header a:hover {
15151
+ border-top: 3px solid var(--bs-border-color);
15152
+ }
15153
+ .card.card-outline-tabs .card-header a.active:hover {
15154
+ margin-top: 0;
15155
+ }
15156
+ .card.card-outline-tabs .card-tools {
15157
+ margin: 0.5rem 0.5rem 0.3rem;
15158
+ }
15159
+ .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header {
14964
15160
  border-bottom: 0;
14965
15161
  }
14966
- .contacts-list > li a {
14967
- text-decoration: none;
15162
+ .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
15163
+ border-bottom: 0;
14968
15164
  }
14969
-
14970
- .contacts-list-img {
14971
- border-radius: 50%;
14972
- float: right;
14973
- width: 40px;
15165
+ .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
15166
+ margin-bottom: 0;
15167
+ }
15168
+ .card.card-outline-tabs.expanding-card .card-header .nav-tabs .nav-item {
15169
+ margin-bottom: -1px;
14974
15170
  }
14975
15171
 
14976
- .contacts-list-info {
14977
- margin-right: 45px;
14978
- color: var(--bs-body-bg);
15172
+ html.maximized-card {
15173
+ overflow: hidden;
14979
15174
  }
14980
15175
 
14981
- .contacts-list-name,
14982
- .contacts-list-status {
15176
+ .card-header::after,
15177
+ .card-body::after,
15178
+ .card-footer::after {
14983
15179
  display: block;
15180
+ clear: both;
15181
+ content: "";
14984
15182
  }
14985
15183
 
14986
- .contacts-list-name {
14987
- font-weight: 600;
15184
+ .card-header {
15185
+ position: relative;
15186
+ padding: 1rem 1rem;
15187
+ background-color: transparent;
15188
+ border-bottom: 1px solid var(--bs-border-color-translucent);
15189
+ border-top-right-radius: 0.375rem;
15190
+ border-top-left-radius: 0.375rem;
14988
15191
  }
14989
-
14990
- .contacts-list-status {
14991
- font-size: 0.875rem;
15192
+ .collapsed-card .card-header {
15193
+ border-bottom: 0;
15194
+ }
15195
+ .card-header > .card-tools {
15196
+ float: left;
15197
+ margin-left: -0.5rem;
15198
+ }
15199
+ .card-header > .card-tools .input-group,
15200
+ .card-header > .card-tools .nav,
15201
+ .card-header > .card-tools .pagination {
15202
+ margin-top: -0.4rem;
15203
+ margin-bottom: -0.4rem;
15204
+ }
15205
+ .card-header > .card-tools [data-bs-toggle=tooltip] {
15206
+ position: relative;
14992
15207
  }
14993
15208
 
14994
- .contacts-list-date {
15209
+ .card-title {
15210
+ float: right;
15211
+ margin: 0;
15212
+ font-size: 1.1rem;
14995
15213
  font-weight: 400;
14996
- color: var(--bs-secondary-bg);
14997
15214
  }
14998
15215
 
14999
- .contacts-list-msg {
15000
- color: var(--bs-secondary-bg);
15216
+ .btn-tool {
15217
+ --bs-btn-padding-x: .5rem;
15218
+ --bs-btn-padding-y: .25rem;
15001
15219
  }
15002
-
15003
- .end > .direct-chat-text {
15004
- color: var(--lte-direct-chat-color);
15005
- background-color: var(--lte-direct-chat-bg);
15006
- border-color: var(--lte-direct-chat-bg);
15220
+ .btn-tool:not(.btn-tool-custom) {
15221
+ --bs-btn-color: var(--bs-tertiary-color);
15222
+ --bs-btn-bg: transparent;
15223
+ --bs-btn-box-shadow: none;
15224
+ --bs-btn-hover-color: var(--bs-secondary-color);
15225
+ --bs-btn-active-border-color: transparent;
15007
15226
  }
15008
- .end > .direct-chat-text::after, .end > .direct-chat-text::before {
15009
- border-right-color: var(--lte-direct-chat-bg);
15227
+ .btn-tool {
15228
+ margin: -1rem 0;
15229
+ font-size: 0.875rem;
15010
15230
  }
15011
15231
 
15012
- .direct-chat-primary {
15013
- --lte-direct-chat-color: #fff;
15014
- --lte-direct-chat-bg: #0d6efd;
15232
+ .card-primary,
15233
+ .bg-primary,
15234
+ .text-bg-primary {
15235
+ --lte-card-variant-bg: #0d6efd;
15236
+ --lte-card-variant-bg-rgb: 13, 110, 253;
15237
+ --lte-card-variant-color: #fff;
15238
+ --lte-card-variant-color-rgb: 255, 255, 255;
15015
15239
  }
15016
15240
 
15017
- .direct-chat-secondary {
15018
- --lte-direct-chat-color: #fff;
15019
- --lte-direct-chat-bg: #6c757d;
15241
+ .card-secondary,
15242
+ .bg-secondary,
15243
+ .text-bg-secondary {
15244
+ --lte-card-variant-bg: #6c757d;
15245
+ --lte-card-variant-bg-rgb: 108, 117, 125;
15246
+ --lte-card-variant-color: #fff;
15247
+ --lte-card-variant-color-rgb: 255, 255, 255;
15020
15248
  }
15021
15249
 
15022
- .direct-chat-success {
15023
- --lte-direct-chat-color: #fff;
15024
- --lte-direct-chat-bg: #198754;
15250
+ .card-success,
15251
+ .bg-success,
15252
+ .text-bg-success {
15253
+ --lte-card-variant-bg: #198754;
15254
+ --lte-card-variant-bg-rgb: 25, 135, 84;
15255
+ --lte-card-variant-color: #fff;
15256
+ --lte-card-variant-color-rgb: 255, 255, 255;
15025
15257
  }
15026
15258
 
15027
- .direct-chat-info {
15028
- --lte-direct-chat-color: #000;
15029
- --lte-direct-chat-bg: #0dcaf0;
15259
+ .card-info,
15260
+ .bg-info,
15261
+ .text-bg-info {
15262
+ --lte-card-variant-bg: #0dcaf0;
15263
+ --lte-card-variant-bg-rgb: 13, 202, 240;
15264
+ --lte-card-variant-color: #000;
15265
+ --lte-card-variant-color-rgb: 0, 0, 0;
15030
15266
  }
15031
15267
 
15032
- .direct-chat-warning {
15033
- --lte-direct-chat-color: #000;
15034
- --lte-direct-chat-bg: #ffc107;
15268
+ .card-warning,
15269
+ .bg-warning,
15270
+ .text-bg-warning {
15271
+ --lte-card-variant-bg: #ffc107;
15272
+ --lte-card-variant-bg-rgb: 255, 193, 7;
15273
+ --lte-card-variant-color: #000;
15274
+ --lte-card-variant-color-rgb: 0, 0, 0;
15035
15275
  }
15036
15276
 
15037
- .direct-chat-danger {
15038
- --lte-direct-chat-color: #fff;
15039
- --lte-direct-chat-bg: #dc3545;
15277
+ .card-danger,
15278
+ .bg-danger,
15279
+ .text-bg-danger {
15280
+ --lte-card-variant-bg: #dc3545;
15281
+ --lte-card-variant-bg-rgb: 220, 53, 69;
15282
+ --lte-card-variant-color: #fff;
15283
+ --lte-card-variant-color-rgb: 255, 255, 255;
15040
15284
  }
15041
15285
 
15042
- .direct-chat-light {
15043
- --lte-direct-chat-color: #000;
15044
- --lte-direct-chat-bg: #f8f9fa;
15286
+ .card-light,
15287
+ .bg-light,
15288
+ .text-bg-light {
15289
+ --lte-card-variant-bg: #f8f9fa;
15290
+ --lte-card-variant-bg-rgb: 248, 249, 250;
15291
+ --lte-card-variant-color: #000;
15292
+ --lte-card-variant-color-rgb: 0, 0, 0;
15045
15293
  }
15046
15294
 
15047
- .direct-chat-dark {
15048
- --lte-direct-chat-color: #fff;
15049
- --lte-direct-chat-bg: #212529;
15295
+ .card-dark,
15296
+ .bg-dark,
15297
+ .text-bg-dark {
15298
+ --lte-card-variant-bg: #212529;
15299
+ --lte-card-variant-bg-rgb: 33, 37, 41;
15300
+ --lte-card-variant-color: #fff;
15301
+ --lte-card-variant-color-rgb: 255, 255, 255;
15050
15302
  }
15051
15303
 
15052
- .toast-primary {
15053
- --bs-toast-header-color: #fff;
15054
- --bs-toast-header-bg: #0d6efd;
15055
- --bs-toast-header-border-color: #0d6efd;
15056
- --bs-toast-border-color: #0d6efd;
15057
- --bs-toast-bg: var(--bs-primary-bg-subtle);
15304
+ .card-body > .table {
15305
+ margin-bottom: 0;
15058
15306
  }
15059
- .toast-primary .btn-close {
15060
- --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15307
+ .card-body > .table > thead > tr > th,
15308
+ .card-body > .table > thead > tr > td {
15309
+ border-top-width: 0;
15061
15310
  }
15062
15311
 
15063
- .toast-secondary {
15064
- --bs-toast-header-color: #fff;
15065
- --bs-toast-header-bg: #6c757d;
15066
- --bs-toast-header-border-color: #6c757d;
15067
- --bs-toast-border-color: #6c757d;
15068
- --bs-toast-bg: var(--bs-secondary-bg-subtle);
15312
+ .table:not(.table-dark) {
15313
+ color: inherit;
15069
15314
  }
15070
- .toast-secondary .btn-close {
15071
- --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15315
+ .table.table-head-fixed thead tr:nth-child(1) th {
15316
+ position: sticky;
15317
+ top: 0;
15318
+ z-index: 10;
15319
+ background-color: var(--bs-body-bg, #fff);
15320
+ border-bottom: 0;
15321
+ box-shadow: inset 0 1px 0 var(--bs-border-color, var(--bs-border-color)), inset 0 -1px 0 var(--bs-border-color, var(--bs-border-color));
15072
15322
  }
15073
-
15074
- .toast-success {
15075
- --bs-toast-header-color: #fff;
15076
- --bs-toast-header-bg: #198754;
15077
- --bs-toast-header-border-color: #198754;
15078
- --bs-toast-border-color: #198754;
15079
- --bs-toast-bg: var(--bs-success-bg-subtle);
15323
+ .table.no-border,
15324
+ .table.no-border td,
15325
+ .table.no-border th {
15326
+ border: 0;
15080
15327
  }
15081
- .toast-success .btn-close {
15082
- --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15328
+ .table.text-center,
15329
+ .table.text-center td,
15330
+ .table.text-center th {
15331
+ text-align: center;
15083
15332
  }
15084
-
15085
- .toast-info {
15086
- --bs-toast-header-color: #000;
15087
- --bs-toast-header-bg: #0dcaf0;
15088
- --bs-toast-header-border-color: #0dcaf0;
15089
- --bs-toast-border-color: #0dcaf0;
15090
- --bs-toast-bg: var(--bs-info-bg-subtle);
15333
+ .table.table-valign-middle thead > tr > th,
15334
+ .table.table-valign-middle thead > tr > td,
15335
+ .table.table-valign-middle tbody > tr > th,
15336
+ .table.table-valign-middle tbody > tr > td {
15337
+ vertical-align: middle;
15091
15338
  }
15092
-
15093
- .toast-warning {
15094
- --bs-toast-header-color: #000;
15095
- --bs-toast-header-bg: #ffc107;
15096
- --bs-toast-header-border-color: #ffc107;
15097
- --bs-toast-border-color: #ffc107;
15098
- --bs-toast-bg: var(--bs-warning-bg-subtle);
15099
- }
15100
-
15101
- .toast-danger {
15102
- --bs-toast-header-color: #fff;
15103
- --bs-toast-header-bg: #dc3545;
15104
- --bs-toast-header-border-color: #dc3545;
15105
- --bs-toast-border-color: #dc3545;
15106
- --bs-toast-bg: var(--bs-danger-bg-subtle);
15107
- }
15108
- .toast-danger .btn-close {
15109
- --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15339
+ .card-body.p-0 .table thead > tr > th:first-of-type,
15340
+ .card-body.p-0 .table thead > tr > td:first-of-type,
15341
+ .card-body.p-0 .table tfoot > tr > th:first-of-type,
15342
+ .card-body.p-0 .table tfoot > tr > td:first-of-type,
15343
+ .card-body.p-0 .table tbody > tr > th:first-of-type,
15344
+ .card-body.p-0 .table tbody > tr > td:first-of-type {
15345
+ padding-right: 1.5rem;
15110
15346
  }
15111
-
15112
- .toast-light {
15113
- --bs-toast-header-color: #000;
15114
- --bs-toast-header-bg: #f8f9fa;
15115
- --bs-toast-header-border-color: #f8f9fa;
15116
- --bs-toast-border-color: #f8f9fa;
15117
- --bs-toast-bg: var(--bs-light-bg-subtle);
15347
+ .card-body.p-0 .table thead > tr > th:last-of-type,
15348
+ .card-body.p-0 .table thead > tr > td:last-of-type,
15349
+ .card-body.p-0 .table tfoot > tr > th:last-of-type,
15350
+ .card-body.p-0 .table tfoot > tr > td:last-of-type,
15351
+ .card-body.p-0 .table tbody > tr > th:last-of-type,
15352
+ .card-body.p-0 .table tbody > tr > td:last-of-type {
15353
+ padding-left: 1.5rem;
15118
15354
  }
15119
15355
 
15120
- .toast-dark {
15121
- --bs-toast-header-color: #fff;
15122
- --bs-toast-header-bg: #212529;
15123
- --bs-toast-header-border-color: #212529;
15124
- --bs-toast-border-color: #212529;
15125
- --bs-toast-bg: var(--bs-dark-bg-subtle);
15356
+ .small-box {
15357
+ border-radius: 0.375rem;
15358
+ box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
15359
+ position: relative;
15360
+ display: block;
15361
+ margin-bottom: 1.25rem;
15362
+ --bs-link-color-rgb: none;
15363
+ --bs-link-hover-color-rgb: none;
15364
+ --bs-heading-color: none;
15126
15365
  }
15127
- .toast-dark .btn-close {
15128
- --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15366
+ .small-box > .inner {
15367
+ padding: 10px;
15129
15368
  }
15130
-
15131
- [data-bs-theme=dark] .toast-info .btn-close {
15132
- --bs-btn-close-white-filter: none;
15369
+ .small-box > .small-box-footer {
15370
+ position: relative;
15371
+ z-index: 10;
15372
+ display: block;
15373
+ padding: 3px 0;
15374
+ text-align: center;
15375
+ background-color: rgba(0, 0, 0, 0.07);
15133
15376
  }
15134
- [data-bs-theme=dark] .toast-warning .btn-close {
15135
- --bs-btn-close-white-filter: none;
15377
+ .small-box > .small-box-footer:hover {
15378
+ background-color: rgba(0, 0, 0, 0.1);
15136
15379
  }
15137
- [data-bs-theme=dark] .toast-light .btn-close {
15138
- --bs-btn-close-white-filter: none;
15380
+ .small-box h3, .small-box .h3 {
15381
+ font-size: calc(1.345rem + 1.14vw);
15139
15382
  }
15140
- .login-logo,
15141
- .register-logo {
15142
- margin-bottom: 0.9rem;
15143
- font-size: 2.1rem;
15144
- font-weight: 300;
15145
- text-align: center;
15383
+ @media (min-width: 1200px) {
15384
+ .small-box h3, .small-box .h3 {
15385
+ font-size: 2.2rem;
15386
+ }
15146
15387
  }
15147
- .login-logo a,
15148
- .register-logo a {
15149
- color: var(--bs-secondary-color);
15150
- text-decoration: none;
15388
+ .small-box h3, .small-box .h3 {
15389
+ padding: 0;
15390
+ margin: 0 0 10px;
15391
+ font-weight: 700;
15392
+ white-space: nowrap;
15151
15393
  }
15152
-
15153
- .login-page,
15154
- .register-page {
15155
- display: flex;
15156
- flex-direction: column;
15157
- align-items: center;
15158
- justify-content: center;
15159
- min-height: 100vh;
15394
+ @media (min-width: 992px) {
15395
+ .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
15396
+ font-size: calc(1.285rem + 0.42vw);
15397
+ }
15160
15398
  }
15161
-
15162
- .login-box,
15163
- .register-box {
15164
- width: 400px;
15399
+ @media (min-width: 992px) and (min-width: 1200px) {
15400
+ .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
15401
+ font-size: 1.6rem;
15402
+ }
15165
15403
  }
15166
- @media (max-width: 576px) {
15167
- .login-box,
15168
- .register-box {
15169
- width: 90%;
15170
- margin-top: 0.5rem;
15404
+ @media (min-width: 992px) {
15405
+ .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
15406
+ font-size: calc(1.285rem + 0.42vw);
15171
15407
  }
15172
15408
  }
15173
- .login-box .card,
15174
- .register-box .card {
15175
- margin-bottom: 0;
15409
+ @media (min-width: 992px) and (min-width: 1200px) {
15410
+ .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
15411
+ font-size: 1.6rem;
15412
+ }
15176
15413
  }
15177
-
15178
- .login-card-body,
15179
- .register-card-body {
15180
- padding: 20px;
15181
- color: var(--bs-secondary-color);
15182
- background-color: var(--bs-body-bg);
15183
- border-top: 0;
15414
+ @media (min-width: 1200px) {
15415
+ .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
15416
+ font-size: calc(1.345rem + 1.14vw);
15417
+ }
15184
15418
  }
15185
- .login-card-body .input-group .form-control:focus,
15186
- .register-card-body .input-group .form-control:focus {
15187
- box-shadow: none;
15419
+ @media (min-width: 1200px) and (min-width: 1200px) {
15420
+ .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
15421
+ font-size: 2.2rem;
15422
+ }
15188
15423
  }
15189
- .login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
15190
- .login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
15191
- .register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
15192
- .register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
15193
- border-color: rgb(134, 182.5, 254);
15424
+ @media (min-width: 1200px) {
15425
+ .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
15426
+ font-size: calc(1.345rem + 1.14vw);
15427
+ }
15194
15428
  }
15195
- .login-card-body .input-group .form-control.is-valid:focus,
15196
- .register-card-body .input-group .form-control.is-valid:focus {
15197
- box-shadow: none;
15429
+ @media (min-width: 1200px) and (min-width: 1200px) {
15430
+ .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
15431
+ font-size: 2.2rem;
15432
+ }
15198
15433
  }
15199
- .login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
15200
- .login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
15201
- .register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
15202
- .register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
15203
- border-color: #198754;
15434
+ .small-box p {
15435
+ font-size: 1rem;
15204
15436
  }
15205
- .login-card-body .input-group .form-control.is-invalid:focus,
15206
- .register-card-body .input-group .form-control.is-invalid:focus {
15207
- box-shadow: none;
15437
+ .small-box p > small, .small-box p > .small {
15438
+ display: block;
15439
+ margin-top: 5px;
15440
+ font-size: 0.9rem;
15441
+ color: #f8f9fa;
15208
15442
  }
15209
- .login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
15210
- .register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
15211
- border-color: #dc3545;
15443
+ .small-box h3, .small-box .h3,
15444
+ .small-box p {
15445
+ z-index: 5;
15212
15446
  }
15213
- .login-card-body .input-group .input-group-text,
15214
- .register-card-body .input-group .input-group-text {
15215
- color: var(--bs-secondary-color);
15216
- background-color: transparent;
15217
- border-top-left-radius: 0.375rem;
15218
- border-bottom-left-radius: 0.375rem;
15219
- transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
15447
+ .small-box .small-box-icon {
15448
+ position: absolute;
15449
+ top: 15px;
15450
+ left: 15px;
15451
+ z-index: 0;
15452
+ height: 70px;
15453
+ font-size: 70px;
15454
+ color: rgba(0, 0, 0, 0.15);
15455
+ transition: transform 0.3s linear;
15220
15456
  }
15221
15457
  @media (prefers-reduced-motion: reduce) {
15222
- .login-card-body .input-group .input-group-text,
15223
- .register-card-body .input-group .input-group-text {
15458
+ .small-box .small-box-icon {
15224
15459
  transition: none;
15225
15460
  }
15226
15461
  }
15227
-
15228
- .login-box-msg,
15229
- .register-box-msg {
15230
- padding: 0 20px 20px;
15231
- margin: 0;
15232
- text-align: center;
15233
- }
15234
-
15235
- .social-auth-links {
15236
- margin: 10px 0;
15462
+ .small-box:hover .small-box-icon {
15463
+ transform: scale(1.1);
15237
15464
  }
15238
15465
 
15239
- .lockscreen .lockscreen-name {
15240
- font-weight: 600;
15241
- text-align: center;
15242
- }
15243
- .lockscreen .lockscreen-logo {
15244
- margin-bottom: 25px;
15245
- font-size: 35px;
15246
- font-weight: 300;
15247
- text-align: center;
15248
- }
15249
- .lockscreen .lockscreen-logo a {
15250
- color: var(--bs-emphasis-color);
15251
- text-decoration: none;
15252
- }
15253
- .lockscreen .lockscreen-wrapper {
15254
- max-width: 400px;
15255
- margin: 0 auto;
15256
- margin-top: 10%;
15466
+ @media (max-width: 575.98px) {
15467
+ .small-box {
15468
+ text-align: center;
15469
+ }
15470
+ .small-box .small-box-icon {
15471
+ display: none;
15472
+ }
15473
+ .small-box p {
15474
+ font-size: 12px;
15475
+ }
15257
15476
  }
15258
- .lockscreen .lockscreen-item {
15477
+ .info-box {
15478
+ box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
15479
+ border-radius: 0.375rem;
15259
15480
  position: relative;
15260
- width: 290px;
15261
- padding: 0;
15262
- margin: 10px auto 30px;
15481
+ display: flex;
15482
+ width: 100%;
15483
+ min-height: 80px;
15484
+ padding: 0.5rem;
15485
+ margin-bottom: 1rem;
15486
+ color: var(--bs-body-color);
15263
15487
  background-color: var(--bs-body-bg);
15264
- border-radius: 4px;
15265
15488
  }
15266
- .lockscreen .lockscreen-image {
15489
+ .info-box .progress {
15490
+ height: 2px;
15491
+ margin: 5px 0;
15492
+ background-color: rgba(var(--lte-card-variant-color-rgb), 0.125);
15493
+ }
15494
+ .info-box .progress .progress-bar {
15495
+ background-color: var(--lte-card-variant-color);
15496
+ }
15497
+ .info-box .info-box-icon {
15498
+ display: flex;
15499
+ align-items: center;
15500
+ justify-content: center;
15501
+ width: 70px;
15502
+ font-size: 1.875rem;
15503
+ text-align: center;
15504
+ border-radius: 0.375rem;
15505
+ }
15506
+ .info-box .info-box-icon > img {
15507
+ max-width: 100%;
15508
+ }
15509
+ .info-box .info-box-content {
15510
+ display: flex;
15511
+ flex: 1;
15512
+ flex-direction: column;
15513
+ justify-content: center;
15514
+ padding: 0 10px;
15515
+ line-height: 1.8;
15516
+ }
15517
+ .info-box .info-box-number {
15518
+ display: block;
15519
+ margin-top: 0.25rem;
15520
+ font-weight: 700;
15521
+ }
15522
+ .info-box .progress-description,
15523
+ .info-box .info-box-text {
15524
+ display: block;
15525
+ overflow: hidden;
15526
+ text-overflow: ellipsis;
15527
+ white-space: nowrap;
15528
+ }
15529
+ .info-box .info-box-more {
15530
+ display: block;
15531
+ }
15532
+ .info-box .progress-description {
15533
+ margin: 0;
15534
+ }
15535
+ @media (min-width: 768px) {
15536
+ .col-xl-2 .info-box .progress-description, .col-lg-2 .info-box .progress-description, .col-md-2 .info-box .progress-description {
15537
+ display: none;
15538
+ }
15539
+ .col-xl-3 .info-box .progress-description, .col-lg-3 .info-box .progress-description, .col-md-3 .info-box .progress-description {
15540
+ display: none;
15541
+ }
15542
+ }
15543
+ @media (min-width: 992px) {
15544
+ .col-xl-2 .info-box .progress-description, .col-lg-2 .info-box .progress-description, .col-md-2 .info-box .progress-description {
15545
+ font-size: 0.75rem;
15546
+ display: block;
15547
+ }
15548
+ .col-xl-3 .info-box .progress-description, .col-lg-3 .info-box .progress-description, .col-md-3 .info-box .progress-description {
15549
+ font-size: 0.75rem;
15550
+ display: block;
15551
+ }
15552
+ }
15553
+ @media (min-width: 1200px) {
15554
+ .col-xl-2 .info-box .progress-description, .col-lg-2 .info-box .progress-description, .col-md-2 .info-box .progress-description {
15555
+ font-size: 1rem;
15556
+ display: block;
15557
+ }
15558
+ .col-xl-3 .info-box .progress-description, .col-lg-3 .info-box .progress-description, .col-md-3 .info-box .progress-description {
15559
+ font-size: 1rem;
15560
+ display: block;
15561
+ }
15562
+ }
15563
+
15564
+ .timeline {
15565
+ position: relative;
15566
+ padding: 0;
15567
+ margin: 0 0 45px;
15568
+ }
15569
+ .timeline::before {
15570
+ border-radius: 0.375rem;
15267
15571
  position: absolute;
15268
- top: -25px;
15269
- right: -10px;
15270
- z-index: 10;
15271
- padding: 5px;
15572
+ top: 0;
15573
+ bottom: 0;
15574
+ right: 31px;
15575
+ width: 4px;
15576
+ margin: 0;
15577
+ content: "";
15578
+ background-color: var(--bs-border-color);
15579
+ }
15580
+ .timeline > div::before, .timeline > div::after {
15581
+ display: table;
15582
+ content: "";
15583
+ }
15584
+ .timeline > div {
15585
+ position: relative;
15586
+ margin-left: 10px;
15587
+ margin-bottom: 15px;
15588
+ }
15589
+ .timeline > div > .timeline-item {
15590
+ box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
15591
+ border-radius: 0.375rem;
15592
+ position: relative;
15593
+ padding: 0;
15594
+ margin-top: 0;
15595
+ margin-left: 15px;
15596
+ margin-right: 60px;
15597
+ color: var(--bs-body-color);
15272
15598
  background-color: var(--bs-body-bg);
15273
- border-radius: 50%;
15274
15599
  }
15275
- .lockscreen .lockscreen-image > img {
15600
+ .timeline > div > .timeline-item > .time {
15601
+ float: left;
15602
+ padding: 10px;
15603
+ font-size: 12px;
15604
+ color: var(--bs-secondary-color);
15605
+ }
15606
+ .timeline > div > .timeline-item > .timeline-header {
15607
+ padding: 10px;
15608
+ margin: 0;
15609
+ font-size: 16px;
15610
+ line-height: 1.1;
15611
+ color: var(--bs-secondary-color);
15612
+ border-bottom: 1px solid var(--bs-border-color);
15613
+ }
15614
+ .timeline > div > .timeline-item > .timeline-header > a {
15615
+ font-weight: 600;
15616
+ text-decoration: none;
15617
+ }
15618
+ .timeline > div > .timeline-item > .timeline-body,
15619
+ .timeline > div > .timeline-item > .timeline-footer {
15620
+ padding: 10px;
15621
+ }
15622
+ .timeline > div > .timeline-item > .timeline-body > img {
15623
+ margin: 10px;
15624
+ }
15625
+ .timeline > div > .timeline-item > .timeline-body > dl,
15626
+ .timeline > div > .timeline-item > .timeline-body ol,
15627
+ .timeline > div > .timeline-item > .timeline-body ul {
15628
+ margin: 0;
15629
+ }
15630
+ .timeline > div .timeline-icon {
15631
+ position: absolute;
15632
+ top: 0;
15633
+ right: 18px;
15634
+ width: 30px;
15635
+ height: 30px;
15636
+ font-size: 16px;
15637
+ line-height: 30px;
15638
+ text-align: center;
15639
+ background-color: var(--bs-secondary-bg);
15276
15640
  border-radius: 50%;
15277
- width: 70px;
15278
- height: 70px;
15279
15641
  }
15280
- .lockscreen .lockscreen-credentials {
15281
- margin-right: 70px;
15642
+ .timeline > .time-label > span {
15643
+ border-radius: 4px;
15644
+ display: inline-block;
15645
+ padding: 5px;
15646
+ font-weight: 600;
15647
+ background-color: var(--bs-body-bg);
15648
+ }
15649
+
15650
+ .timeline-inverse > div > .timeline-item {
15651
+ box-shadow: none;
15652
+ background-color: var(--bs-tertiary-bg);
15653
+ border: 1px solid var(--bs-border-color);
15654
+ }
15655
+ .timeline-inverse > div > .timeline-item > .timeline-header {
15656
+ border-bottom-color: var(--bs-border-color);
15657
+ }
15658
+
15659
+ .direct-chat .card-body {
15660
+ position: relative;
15661
+ padding: 0;
15662
+ overflow-x: hidden;
15663
+ }
15664
+ .direct-chat.chat-pane-open .direct-chat-contacts {
15665
+ transform: translate(0, 0);
15666
+ }
15667
+ .direct-chat.timestamp-light .direct-chat-timestamp {
15668
+ color: rgba(var(--bs-body-color-rgb), 0.65);
15669
+ }
15670
+ .direct-chat.timestamp-dark .direct-chat-timestamp {
15671
+ color: rgba(var(--bs-body-color-rgb), 0.9);
15672
+ }
15673
+
15674
+ .direct-chat-messages {
15675
+ height: 250px;
15676
+ padding: 10px;
15677
+ overflow: auto;
15678
+ transform: translate(0, 0);
15679
+ }
15680
+
15681
+ .direct-chat-msg,
15682
+ .direct-chat-text {
15683
+ display: block;
15684
+ }
15685
+
15686
+ .direct-chat-msg::after {
15687
+ display: block;
15688
+ clear: both;
15689
+ content: "";
15690
+ }
15691
+ .direct-chat-msg {
15692
+ margin-bottom: 10px;
15693
+ }
15694
+
15695
+ .direct-chat-messages,
15696
+ .direct-chat-contacts {
15697
+ transition: transform 0.5s ease-in-out;
15698
+ }
15699
+ @media (prefers-reduced-motion: reduce) {
15700
+ .direct-chat-messages,
15701
+ .direct-chat-contacts {
15702
+ transition: none;
15703
+ }
15704
+ }
15705
+
15706
+ .direct-chat-text {
15707
+ border-radius: 0.5rem;
15708
+ position: relative;
15709
+ padding: 5px 10px;
15710
+ margin: 5px 50px 0 0;
15711
+ color: var(--bs-emphasis-color);
15712
+ background-color: var(--bs-secondary-bg);
15713
+ border: 1px solid var(--bs-border-color);
15714
+ }
15715
+ .direct-chat-text::after, .direct-chat-text::before {
15716
+ position: absolute;
15717
+ top: 15px;
15718
+ left: 100%;
15719
+ width: 0;
15720
+ height: 0;
15721
+ pointer-events: none;
15722
+ content: " ";
15723
+ border: solid transparent;
15724
+ border-left-color: var(--bs-border-color);
15725
+ }
15726
+ .direct-chat-text::after {
15727
+ margin-top: -5px;
15728
+ border-width: 5px;
15729
+ }
15730
+ .direct-chat-text::before {
15731
+ margin-top: -6px;
15732
+ border-width: 6px;
15733
+ }
15734
+ .end .direct-chat-text {
15735
+ margin-left: 50px;
15736
+ margin-right: 0;
15737
+ }
15738
+ .end .direct-chat-text::after, .end .direct-chat-text::before {
15739
+ left: auto;
15740
+ right: 100%;
15741
+ border-left-color: transparent;
15742
+ border-right-color: var(--bs-border-color);
15743
+ }
15744
+
15745
+ .direct-chat-img {
15746
+ border-radius: 50%;
15747
+ float: right;
15748
+ width: 40px;
15749
+ height: 40px;
15750
+ }
15751
+ .end .direct-chat-img {
15752
+ float: left;
15753
+ }
15754
+
15755
+ .direct-chat-infos {
15756
+ display: block;
15757
+ margin-bottom: 2px;
15758
+ font-size: 0.875rem;
15759
+ }
15760
+
15761
+ .direct-chat-name {
15762
+ font-weight: 600;
15763
+ }
15764
+
15765
+ .direct-chat-timestamp {
15766
+ color: rgba(var(--bs-body-color-rgb), 0.75);
15767
+ }
15768
+
15769
+ .direct-chat-contacts-open .direct-chat-contacts {
15770
+ transform: translate(0, 0);
15771
+ }
15772
+
15773
+ .direct-chat-contacts {
15774
+ position: absolute;
15775
+ top: 0;
15776
+ bottom: 0;
15777
+ width: 100%;
15778
+ height: 250px;
15779
+ overflow: auto;
15780
+ color: var(--bs-body-bg);
15781
+ background-color: var(--bs-body-color);
15782
+ transform: translate(-101%, 0);
15783
+ }
15784
+
15785
+ .direct-chat-contacts-light {
15786
+ background-color: var(--bs-light-bg-subtle);
15787
+ }
15788
+ .direct-chat-contacts-light .contacts-list-name {
15789
+ color: var(--bs-body-color);
15790
+ }
15791
+ .direct-chat-contacts-light .contacts-list-date {
15792
+ color: var(--bs-secondary-color);
15793
+ }
15794
+ .direct-chat-contacts-light .contacts-list-msg {
15795
+ color: var(--bs-secondary-color);
15796
+ }
15797
+
15798
+ .contacts-list {
15799
+ padding-right: 0;
15800
+ list-style: none;
15801
+ }
15802
+ .contacts-list > li::after {
15803
+ display: block;
15804
+ clear: both;
15805
+ content: "";
15806
+ }
15807
+ .contacts-list > li {
15808
+ padding: 10px;
15809
+ margin: 0;
15810
+ text-decoration: none;
15811
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
15812
+ }
15813
+ .contacts-list > li:last-of-type {
15814
+ border-bottom: 0;
15815
+ }
15816
+ .contacts-list > li a {
15817
+ text-decoration: none;
15818
+ }
15819
+
15820
+ .contacts-list-img {
15821
+ border-radius: 50%;
15822
+ float: right;
15823
+ width: 40px;
15824
+ }
15825
+
15826
+ .contacts-list-info {
15827
+ margin-right: 45px;
15828
+ color: var(--bs-body-bg);
15829
+ }
15830
+
15831
+ .contacts-list-name,
15832
+ .contacts-list-status {
15833
+ display: block;
15834
+ }
15835
+
15836
+ .contacts-list-name {
15837
+ font-weight: 600;
15838
+ }
15839
+
15840
+ .contacts-list-status {
15841
+ font-size: 0.875rem;
15842
+ }
15843
+
15844
+ .contacts-list-date {
15845
+ font-weight: 400;
15846
+ color: var(--bs-secondary-bg);
15847
+ }
15848
+
15849
+ .contacts-list-msg {
15850
+ color: var(--bs-secondary-bg);
15851
+ }
15852
+
15853
+ .end > .direct-chat-text {
15854
+ color: var(--lte-direct-chat-color);
15855
+ background-color: var(--lte-direct-chat-bg);
15856
+ border-color: var(--lte-direct-chat-bg);
15857
+ }
15858
+ .end > .direct-chat-text::after, .end > .direct-chat-text::before {
15859
+ border-right-color: var(--lte-direct-chat-bg);
15860
+ }
15861
+
15862
+ .direct-chat-primary {
15863
+ --lte-direct-chat-color: #fff;
15864
+ --lte-direct-chat-bg: #0d6efd;
15865
+ }
15866
+
15867
+ .direct-chat-secondary {
15868
+ --lte-direct-chat-color: #fff;
15869
+ --lte-direct-chat-bg: #6c757d;
15870
+ }
15871
+
15872
+ .direct-chat-success {
15873
+ --lte-direct-chat-color: #fff;
15874
+ --lte-direct-chat-bg: #198754;
15875
+ }
15876
+
15877
+ .direct-chat-info {
15878
+ --lte-direct-chat-color: #000;
15879
+ --lte-direct-chat-bg: #0dcaf0;
15880
+ }
15881
+
15882
+ .direct-chat-warning {
15883
+ --lte-direct-chat-color: #000;
15884
+ --lte-direct-chat-bg: #ffc107;
15885
+ }
15886
+
15887
+ .direct-chat-danger {
15888
+ --lte-direct-chat-color: #fff;
15889
+ --lte-direct-chat-bg: #dc3545;
15890
+ }
15891
+
15892
+ .direct-chat-light {
15893
+ --lte-direct-chat-color: #000;
15894
+ --lte-direct-chat-bg: #f8f9fa;
15895
+ }
15896
+
15897
+ .direct-chat-dark {
15898
+ --lte-direct-chat-color: #fff;
15899
+ --lte-direct-chat-bg: #212529;
15900
+ }
15901
+
15902
+ .toast-primary {
15903
+ --bs-toast-header-color: #fff;
15904
+ --bs-toast-header-bg: #0d6efd;
15905
+ --bs-toast-header-border-color: #0d6efd;
15906
+ --bs-toast-border-color: #0d6efd;
15907
+ --bs-toast-bg: var(--bs-primary-bg-subtle);
15908
+ }
15909
+ .toast-primary .btn-close {
15910
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15911
+ }
15912
+
15913
+ .toast-secondary {
15914
+ --bs-toast-header-color: #fff;
15915
+ --bs-toast-header-bg: #6c757d;
15916
+ --bs-toast-header-border-color: #6c757d;
15917
+ --bs-toast-border-color: #6c757d;
15918
+ --bs-toast-bg: var(--bs-secondary-bg-subtle);
15919
+ }
15920
+ .toast-secondary .btn-close {
15921
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15922
+ }
15923
+
15924
+ .toast-success {
15925
+ --bs-toast-header-color: #fff;
15926
+ --bs-toast-header-bg: #198754;
15927
+ --bs-toast-header-border-color: #198754;
15928
+ --bs-toast-border-color: #198754;
15929
+ --bs-toast-bg: var(--bs-success-bg-subtle);
15930
+ }
15931
+ .toast-success .btn-close {
15932
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15933
+ }
15934
+
15935
+ .toast-info {
15936
+ --bs-toast-header-color: #000;
15937
+ --bs-toast-header-bg: #0dcaf0;
15938
+ --bs-toast-header-border-color: #0dcaf0;
15939
+ --bs-toast-border-color: #0dcaf0;
15940
+ --bs-toast-bg: var(--bs-info-bg-subtle);
15941
+ }
15942
+
15943
+ .toast-warning {
15944
+ --bs-toast-header-color: #000;
15945
+ --bs-toast-header-bg: #ffc107;
15946
+ --bs-toast-header-border-color: #ffc107;
15947
+ --bs-toast-border-color: #ffc107;
15948
+ --bs-toast-bg: var(--bs-warning-bg-subtle);
15949
+ }
15950
+
15951
+ .toast-danger {
15952
+ --bs-toast-header-color: #fff;
15953
+ --bs-toast-header-bg: #dc3545;
15954
+ --bs-toast-header-border-color: #dc3545;
15955
+ --bs-toast-border-color: #dc3545;
15956
+ --bs-toast-bg: var(--bs-danger-bg-subtle);
15957
+ }
15958
+ .toast-danger .btn-close {
15959
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15960
+ }
15961
+
15962
+ .toast-light {
15963
+ --bs-toast-header-color: #000;
15964
+ --bs-toast-header-bg: #f8f9fa;
15965
+ --bs-toast-header-border-color: #f8f9fa;
15966
+ --bs-toast-border-color: #f8f9fa;
15967
+ --bs-toast-bg: var(--bs-light-bg-subtle);
15968
+ }
15969
+
15970
+ .toast-dark {
15971
+ --bs-toast-header-color: #fff;
15972
+ --bs-toast-header-bg: #212529;
15973
+ --bs-toast-header-border-color: #212529;
15974
+ --bs-toast-border-color: #212529;
15975
+ --bs-toast-bg: var(--bs-dark-bg-subtle);
15976
+ }
15977
+ .toast-dark .btn-close {
15978
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15979
+ }
15980
+
15981
+ [data-bs-theme=dark] .toast-info .btn-close {
15982
+ --bs-btn-close-white-filter: none;
15983
+ }
15984
+ [data-bs-theme=dark] .toast-warning .btn-close {
15985
+ --bs-btn-close-white-filter: none;
15986
+ }
15987
+ [data-bs-theme=dark] .toast-light .btn-close {
15988
+ --bs-btn-close-white-filter: none;
15989
+ }
15990
+ .login-logo,
15991
+ .register-logo {
15992
+ margin-bottom: 0.9rem;
15993
+ font-size: 2.1rem;
15994
+ font-weight: 300;
15995
+ text-align: center;
15996
+ }
15997
+ .login-logo a,
15998
+ .register-logo a {
15999
+ color: var(--bs-secondary-color);
16000
+ text-decoration: none;
16001
+ }
16002
+
16003
+ .login-page,
16004
+ .register-page {
16005
+ display: flex;
16006
+ flex-direction: column;
16007
+ align-items: center;
16008
+ justify-content: center;
16009
+ min-height: 100vh;
16010
+ }
16011
+
16012
+ .login-box,
16013
+ .register-box {
16014
+ width: 400px;
16015
+ }
16016
+ @media (max-width: 576px) {
16017
+ .login-box,
16018
+ .register-box {
16019
+ width: 90%;
16020
+ margin-top: 0.5rem;
16021
+ }
16022
+ }
16023
+ .login-box .card,
16024
+ .register-box .card {
16025
+ margin-bottom: 0;
16026
+ }
16027
+
16028
+ .login-card-body,
16029
+ .register-card-body {
16030
+ padding: 20px;
16031
+ color: var(--bs-secondary-color);
16032
+ background-color: var(--bs-body-bg);
16033
+ border-top: 0;
16034
+ }
16035
+ .login-card-body .input-group .form-control:focus,
16036
+ .register-card-body .input-group .form-control:focus {
16037
+ box-shadow: none;
16038
+ }
16039
+ .login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
16040
+ .login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
16041
+ .register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
16042
+ .register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
16043
+ border-color: rgb(134, 182.5, 254);
16044
+ }
16045
+ .login-card-body .input-group .form-control.is-valid:focus,
16046
+ .register-card-body .input-group .form-control.is-valid:focus {
16047
+ box-shadow: none;
16048
+ }
16049
+ .login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
16050
+ .login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
16051
+ .register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
16052
+ .register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
16053
+ border-color: #198754;
16054
+ }
16055
+ .login-card-body .input-group .form-control.is-invalid:focus,
16056
+ .register-card-body .input-group .form-control.is-invalid:focus {
16057
+ box-shadow: none;
16058
+ }
16059
+ .login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
16060
+ .register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
16061
+ border-color: #dc3545;
16062
+ }
16063
+ .login-card-body .input-group .input-group-text,
16064
+ .register-card-body .input-group .input-group-text {
16065
+ color: var(--bs-secondary-color);
16066
+ background-color: transparent;
16067
+ border-top-left-radius: 0.375rem;
16068
+ border-bottom-left-radius: 0.375rem;
16069
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
16070
+ }
16071
+ @media (prefers-reduced-motion: reduce) {
16072
+ .login-card-body .input-group .input-group-text,
16073
+ .register-card-body .input-group .input-group-text {
16074
+ transition: none;
16075
+ }
16076
+ }
16077
+
16078
+ .login-box-msg,
16079
+ .register-box-msg {
16080
+ padding: 0 20px 20px;
16081
+ margin: 0;
16082
+ text-align: center;
16083
+ }
16084
+
16085
+ .social-auth-links {
16086
+ margin: 10px 0;
16087
+ }
16088
+
16089
+ .lockscreen .lockscreen-name {
16090
+ font-weight: 600;
16091
+ text-align: center;
16092
+ }
16093
+ .lockscreen .lockscreen-logo {
16094
+ margin-bottom: 25px;
16095
+ font-size: 35px;
16096
+ font-weight: 300;
16097
+ text-align: center;
16098
+ }
16099
+ .lockscreen .lockscreen-logo a {
16100
+ color: var(--bs-emphasis-color);
16101
+ text-decoration: none;
16102
+ }
16103
+ .lockscreen .lockscreen-wrapper {
16104
+ max-width: 400px;
16105
+ margin: 0 auto;
16106
+ margin-top: 10%;
16107
+ }
16108
+ .lockscreen .lockscreen-item {
16109
+ position: relative;
16110
+ width: 290px;
16111
+ padding: 0;
16112
+ margin: 10px auto 30px;
16113
+ background-color: var(--bs-body-bg);
16114
+ border-radius: 4px;
16115
+ }
16116
+ .lockscreen .lockscreen-image {
16117
+ position: absolute;
16118
+ top: -25px;
16119
+ right: -10px;
16120
+ z-index: 10;
16121
+ padding: 5px;
16122
+ background-color: var(--bs-body-bg);
16123
+ border-radius: 50%;
16124
+ }
16125
+ .lockscreen .lockscreen-image > img {
16126
+ border-radius: 50%;
16127
+ width: 70px;
16128
+ height: 70px;
16129
+ }
16130
+ .lockscreen .lockscreen-credentials {
16131
+ margin-right: 70px;
16132
+ }
16133
+ .lockscreen .lockscreen-credentials .form-control {
16134
+ border: 0;
16135
+ }
16136
+ .lockscreen .lockscreen-credentials .btn {
16137
+ padding: 0 10px;
16138
+ border: 0;
16139
+ }
16140
+ .lockscreen .lockscreen-footer {
16141
+ margin-top: 10px;
16142
+ }
16143
+
16144
+ .img-size-64,
16145
+ .img-size-50,
16146
+ .img-size-32 {
16147
+ height: auto;
16148
+ }
16149
+
16150
+ .img-size-64 {
16151
+ width: 64px;
16152
+ }
16153
+
16154
+ .img-size-50 {
16155
+ width: 50px;
16156
+ }
16157
+
16158
+ .img-size-32 {
16159
+ width: 32px;
16160
+ }
16161
+
16162
+ /* ==========================================================================
16163
+ AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
16164
+ ========================================================================== */
16165
+ /* Skip Links - WCAG 2.4.1: Bypass Blocks */
16166
+ .skip-link {
16167
+ position: absolute;
16168
+ top: -40px;
16169
+ right: 6px;
16170
+ z-index: 999999;
16171
+ padding: 8px 16px;
16172
+ font-weight: 600;
16173
+ color: var(--bs-white);
16174
+ text-decoration: none;
16175
+ background: var(--bs-primary);
16176
+ }
16177
+ .skip-link:focus {
16178
+ top: 0;
16179
+ outline: 3px solid var(--bs-warning);
16180
+ outline-offset: 2px;
16181
+ }
16182
+ .skip-link:hover {
16183
+ color: var(--bs-white);
16184
+ text-decoration: none;
16185
+ background: var(--bs-primary-emphasis);
16186
+ }
16187
+
16188
+ /* Enhanced Focus Indicators - WCAG 2.4.7: Focus Visible */
16189
+ .focus-enhanced:focus {
16190
+ outline: 3px solid var(--bs-focus-ring-color, #0d6efd);
16191
+ outline-offset: 2px;
16192
+ box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
16193
+ }
16194
+
16195
+ /* High Contrast Mode Support */
16196
+ @media (prefers-contrast: high) {
16197
+ .card {
16198
+ border: 2px solid;
16199
+ }
16200
+ .btn {
16201
+ border-width: 2px;
16202
+ }
16203
+ .nav-link {
16204
+ border: 1px solid transparent;
16205
+ }
16206
+ .nav-link:hover, .nav-link:focus {
16207
+ border-color: currentcolor;
16208
+ }
16209
+ }
16210
+ /* Reduced Motion Support - WCAG 2.3.3: Animation from Interactions */
16211
+ @media (prefers-reduced-motion: reduce) {
16212
+ *,
16213
+ *::before,
16214
+ *::after {
16215
+ transition-duration: 0.01ms !important;
16216
+ animation-duration: 0.01ms !important;
16217
+ animation-iteration-count: 1 !important;
16218
+ scroll-behavior: auto !important;
16219
+ }
16220
+ .fade {
16221
+ opacity: 1 !important;
16222
+ /* stylelint-disable-next-line property-disallowed-list */
16223
+ transition: none !important;
16224
+ }
16225
+ .collapse {
16226
+ /* stylelint-disable-next-line property-disallowed-list */
16227
+ transition: none !important;
16228
+ }
16229
+ .modal.fade .modal-dialog {
16230
+ transform: none !important;
16231
+ }
16232
+ }
16233
+ /* Screen Reader Only Content */
16234
+ .sr-only {
16235
+ position: absolute !important;
16236
+ width: 1px !important;
16237
+ height: 1px !important;
16238
+ padding: 0 !important;
16239
+ margin: -1px !important;
16240
+ overflow: hidden !important;
16241
+ clip: rect(0, 0, 0, 0) !important;
16242
+ white-space: nowrap !important;
16243
+ border: 0 !important;
16244
+ }
16245
+
16246
+ .sr-only-focusable:focus {
16247
+ position: static !important;
16248
+ width: auto !important;
16249
+ height: auto !important;
16250
+ padding: inherit !important;
16251
+ margin: inherit !important;
16252
+ overflow: visible !important;
16253
+ clip: auto !important;
16254
+ white-space: normal !important;
16255
+ }
16256
+
16257
+ /* Focus Trap Utilities */
16258
+ .focus-trap:focus {
16259
+ box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
16260
+ }
16261
+
16262
+ /* Accessible Color Combinations - WCAG 1.4.3: Contrast (Minimum) */
16263
+ .text-accessible-primary {
16264
+ color: #003d82; /* 4.5:1 contrast on white */
16265
+ }
16266
+
16267
+ .text-accessible-success {
16268
+ color: #0f5132; /* 4.5:1 contrast on white */
16269
+ }
16270
+
16271
+ .text-accessible-danger {
16272
+ color: #842029; /* 4.5:1 contrast on white */
16273
+ }
16274
+
16275
+ .text-accessible-warning {
16276
+ color: #664d03; /* 4.5:1 contrast on white */
16277
+ }
16278
+
16279
+ /* ARIA Live Regions */
16280
+ .live-region {
16281
+ position: absolute;
16282
+ right: -10000px;
16283
+ width: 1px;
16284
+ height: 1px;
16285
+ overflow: hidden;
16286
+ }
16287
+ .live-region.live-region-visible {
16288
+ position: static;
16289
+ right: auto;
16290
+ width: auto;
16291
+ height: auto;
16292
+ overflow: visible;
16293
+ }
16294
+
16295
+ /* Enhanced Error States - WCAG 3.3.1: Error Identification */
16296
+ .form-control.is-invalid {
16297
+ border-color: var(--bs-danger);
16298
+ }
16299
+ .form-control.is-invalid:focus {
16300
+ border-color: var(--bs-danger);
16301
+ box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
16302
+ }
16303
+
16304
+ .invalid-feedback[role=alert] {
16305
+ font-weight: 600;
16306
+ }
16307
+
16308
+ /* Target Size - WCAG 2.5.8: Target Size (Minimum) */
16309
+ .touch-target {
16310
+ min-width: 44px;
16311
+ min-height: 44px;
16312
+ }
16313
+ .touch-target.touch-target-small {
16314
+ min-width: 24px;
16315
+ min-height: 24px;
16316
+ }
16317
+
16318
+ /* Table Accessibility */
16319
+ .table-accessible th {
16320
+ font-weight: 600;
16321
+ background-color: var(--bs-secondary-bg);
16322
+ }
16323
+ .table-accessible th[scope=col] {
16324
+ border-bottom: 2px solid var(--bs-border-color);
16325
+ }
16326
+ .table-accessible th[scope=row] {
16327
+ border-left: 2px solid var(--bs-border-color);
16328
+ }
16329
+ .table-accessible caption {
16330
+ padding: 0.75rem;
16331
+ font-weight: 600;
16332
+ color: var(--bs-secondary);
16333
+ text-align: right;
16334
+ caption-side: top;
16335
+ }
16336
+
16337
+ /* Navigation Landmarks */
16338
+ nav[role=navigation]:not([aria-label]):not([aria-labelledby])::before {
16339
+ position: absolute;
16340
+ right: -10000px;
16341
+ content: "Navigation";
16342
+ }
16343
+
16344
+ /* Form Fieldset Styling */
16345
+ fieldset {
16346
+ padding: 1rem;
16347
+ margin-bottom: 1rem;
16348
+ border: 1px solid var(--bs-border-color);
16349
+ }
16350
+ fieldset legend {
16351
+ padding: 0 0.5rem;
16352
+ margin-bottom: 0.5rem;
16353
+ font-size: 1.1em;
16354
+ font-weight: 600;
16355
+ }
16356
+
16357
+ /* Loading States */
16358
+ .loading[aria-busy=true] {
16359
+ position: relative;
16360
+ pointer-events: none;
16361
+ }
16362
+ .loading[aria-busy=true]::after {
16363
+ position: absolute;
16364
+ top: 50%;
16365
+ right: 50%;
16366
+ width: 20px;
16367
+ height: 20px;
16368
+ margin-top: -10px;
16369
+ margin-right: -10px;
16370
+ content: "";
16371
+ border: 2px solid var(--bs-primary);
16372
+ border-top-color: transparent;
16373
+ animation: spin 1s linear infinite;
16374
+ }
16375
+ @media (prefers-reduced-motion: reduce) {
16376
+ .loading[aria-busy=true]::after {
16377
+ border-top-color: var(--bs-primary);
16378
+ animation: none;
16379
+ }
16380
+ }
16381
+
16382
+ @keyframes spin {
16383
+ to {
16384
+ transform: rotate(-360deg);
16385
+ }
16386
+ }
16387
+ /* Dark Mode Accessibility */
16388
+ [data-bs-theme=dark] .text-accessible-primary {
16389
+ color: #6ea8fe;
16390
+ }
16391
+ [data-bs-theme=dark] .text-accessible-success {
16392
+ color: #75b798;
16393
+ }
16394
+ [data-bs-theme=dark] .text-accessible-danger {
16395
+ color: #f1aeb5;
16396
+ }
16397
+ [data-bs-theme=dark] .text-accessible-warning {
16398
+ color: #ffda6a;
16399
+ }
16400
+
16401
+ /* Print Accessibility */
16402
+ @media print {
16403
+ .skip-link,
16404
+ .btn,
16405
+ .nav-link {
16406
+ color: #000 !important;
16407
+ background: transparent !important;
16408
+ border: 1px solid #000 !important;
16409
+ }
16410
+ a[href^=http]::after {
16411
+ font-size: 0.8em;
16412
+ content: " (" attr(href) ")";
16413
+ }
16414
+ /* Print Layout Fix - Ensure sidebar and main content are both visible */
16415
+ .app-wrapper {
16416
+ display: grid !important;
16417
+ grid-template-rows: auto 1fr auto !important;
16418
+ grid-template-columns: auto 1fr !important;
16419
+ }
16420
+ .sidebar-overlay {
16421
+ display: none !important;
16422
+ }
16423
+ .app-sidebar {
16424
+ position: static !important;
16425
+ display: block !important;
16426
+ min-width: 200px !important;
16427
+ max-width: 200px !important;
16428
+ max-height: none !important;
16429
+ margin-right: 0 !important;
16430
+ overflow: visible !important;
16431
+ }
16432
+ .sidebar-wrapper {
16433
+ height: auto !important;
16434
+ overflow: visible !important;
16435
+ }
16436
+ .app-header {
16437
+ position: static !important;
16438
+ }
16439
+ .app-main {
16440
+ width: auto !important;
16441
+ max-width: 100% !important;
16442
+ overflow: visible !important;
16443
+ }
16444
+ .app-content {
16445
+ overflow: visible !important;
16446
+ }
16447
+ .app-footer {
16448
+ position: static !important;
16449
+ }
16450
+ }
16451
+ .astro-code {
16452
+ padding: 0.75rem;
16453
+ border-radius: 0.375rem;
16454
+ }
16455
+
16456
+ .docs-page .app-content > .container-fluid, .docs-page .app-content > .container-sm, .docs-page .app-content > .container-md, .docs-page .app-content > .container-lg, .docs-page .app-content > .container-xl, .docs-page .app-content > .container-xxl {
16457
+ max-width: 60rem;
16458
+ }
16459
+ @media (min-width: 1400px) {
16460
+ .docs-page .app-content > .container-fluid, .docs-page .app-content > .container-sm, .docs-page .app-content > .container-md, .docs-page .app-content > .container-lg, .docs-page .app-content > .container-xl, .docs-page .app-content > .container-xxl {
16461
+ max-width: 64rem;
16462
+ }
16463
+ }
16464
+ .docs-page .card > .card-body {
16465
+ padding: 1.5rem;
16466
+ font-size: 1rem;
16467
+ line-height: 1.7;
16468
+ color: var(--bs-body-color);
16469
+ }
16470
+ @media (min-width: 768px) {
16471
+ .docs-page .card > .card-body {
16472
+ padding: 2.5rem;
16473
+ }
16474
+ }
16475
+ .docs-page .card > .card-body h1,
16476
+ .docs-page .card > .card-body h2,
16477
+ .docs-page .card > .card-body h3,
16478
+ .docs-page .card > .card-body h4,
16479
+ .docs-page .card > .card-body h5,
16480
+ .docs-page .card > .card-body h6,
16481
+ .docs-page .card > .card-body .h1,
16482
+ .docs-page .card > .card-body .h2,
16483
+ .docs-page .card > .card-body .h3,
16484
+ .docs-page .card > .card-body .h4,
16485
+ .docs-page .card > .card-body .h5,
16486
+ .docs-page .card > .card-body .h6 {
16487
+ margin-top: 2em;
16488
+ margin-bottom: 0.5em;
16489
+ font-weight: 600;
16490
+ line-height: 1.3;
16491
+ color: var(--bs-emphasis-color);
16492
+ scroll-margin-top: 4rem;
16493
+ }
16494
+ .docs-page .card > .card-body h1:first-child,
16495
+ .docs-page .card > .card-body h2:first-child,
16496
+ .docs-page .card > .card-body h3:first-child,
16497
+ .docs-page .card > .card-body h4:first-child,
16498
+ .docs-page .card > .card-body h5:first-child,
16499
+ .docs-page .card > .card-body h6:first-child,
16500
+ .docs-page .card > .card-body .h1:first-child,
16501
+ .docs-page .card > .card-body .h2:first-child,
16502
+ .docs-page .card > .card-body .h3:first-child,
16503
+ .docs-page .card > .card-body .h4:first-child,
16504
+ .docs-page .card > .card-body .h5:first-child,
16505
+ .docs-page .card > .card-body .h6:first-child {
16506
+ margin-top: 0;
16507
+ }
16508
+ .docs-page .card > .card-body h2,
16509
+ .docs-page .card > .card-body .h2 {
16510
+ padding-bottom: 0.35em;
16511
+ font-size: 1.75rem;
16512
+ border-bottom: 1px solid var(--bs-border-color);
16513
+ }
16514
+ .docs-page .card > .card-body h3,
16515
+ .docs-page .card > .card-body .h3 {
16516
+ font-size: 1.4rem;
16517
+ }
16518
+ .docs-page .card > .card-body h4,
16519
+ .docs-page .card > .card-body .h4 {
16520
+ font-size: 1.2rem;
16521
+ }
16522
+ .docs-page .card > .card-body h5,
16523
+ .docs-page .card > .card-body .h5 {
16524
+ padding-top: 1.5em;
16525
+ margin-top: 2.5em;
16526
+ font-size: 1.3rem;
16527
+ border-top: 1px solid var(--bs-border-color);
16528
+ }
16529
+ .docs-page .card > .card-body h5:first-child,
16530
+ .docs-page .card > .card-body .h5:first-child {
16531
+ padding-top: 0;
16532
+ border-top: 0;
16533
+ }
16534
+ .docs-page .card > .card-body h6,
16535
+ .docs-page .card > .card-body .h6 {
16536
+ margin-top: 1.75em;
16537
+ font-size: 1.08rem;
16538
+ color: var(--bs-emphasis-color);
16539
+ }
16540
+ .docs-page .card > .card-body p,
16541
+ .docs-page .card > .card-body ul,
16542
+ .docs-page .card > .card-body ol,
16543
+ .docs-page .card > .card-body dl,
16544
+ .docs-page .card > .card-body blockquote,
16545
+ .docs-page .card > .card-body table {
16546
+ margin-bottom: 1.1rem;
16547
+ }
16548
+ .docs-page .card > .card-body ul,
16549
+ .docs-page .card > .card-body ol {
16550
+ padding-right: 1.5rem;
16551
+ }
16552
+ .docs-page .card > .card-body ul li,
16553
+ .docs-page .card > .card-body ol li {
16554
+ margin-bottom: 0.35rem;
16555
+ }
16556
+ .docs-page .card > .card-body ul ul,
16557
+ .docs-page .card > .card-body ul ol,
16558
+ .docs-page .card > .card-body ol ul,
16559
+ .docs-page .card > .card-body ol ol {
16560
+ margin-top: 0.35rem;
16561
+ margin-bottom: 0;
16562
+ }
16563
+ .docs-page .card > .card-body h2 + p, .docs-page .card > .card-body .h2 + p,
16564
+ .docs-page .card > .card-body h3 + p,
16565
+ .docs-page .card > .card-body .h3 + p,
16566
+ .docs-page .card > .card-body h5 + p,
16567
+ .docs-page .card > .card-body .h5 + p {
16568
+ margin-top: 0;
16569
+ }
16570
+ .docs-page .card > .card-body p code,
16571
+ .docs-page .card > .card-body li code,
16572
+ .docs-page .card > .card-body td code,
16573
+ .docs-page .card > .card-body th code,
16574
+ .docs-page .card > .card-body h2 code,
16575
+ .docs-page .card > .card-body .h2 code,
16576
+ .docs-page .card > .card-body h3 code,
16577
+ .docs-page .card > .card-body .h3 code,
16578
+ .docs-page .card > .card-body h4 code,
16579
+ .docs-page .card > .card-body .h4 code,
16580
+ .docs-page .card > .card-body h5 code,
16581
+ .docs-page .card > .card-body .h5 code,
16582
+ .docs-page .card > .card-body h6 code,
16583
+ .docs-page .card > .card-body .h6 code {
16584
+ padding: 0.15em 0.4em;
16585
+ font-size: 0.875em;
16586
+ color: var(--bs-emphasis-color);
16587
+ background: var(--bs-tertiary-bg);
16588
+ border: 1px solid var(--bs-border-color);
16589
+ border-radius: 0.25rem;
15282
16590
  }
15283
- .lockscreen .lockscreen-credentials .form-control {
16591
+ .docs-page .card > .card-body pre.astro-code,
16592
+ .docs-page .card > .card-body pre {
16593
+ padding: 1rem 1.25rem;
16594
+ margin-top: 1.25rem;
16595
+ margin-bottom: 1.5rem;
16596
+ overflow-x: auto;
16597
+ font-size: 0.875rem;
16598
+ line-height: 1.6;
16599
+ border-radius: 0.375rem;
16600
+ }
16601
+ .docs-page .card > .card-body pre.astro-code code,
16602
+ .docs-page .card > .card-body pre code {
16603
+ padding: 0;
16604
+ background: transparent;
15284
16605
  border: 0;
15285
16606
  }
15286
- .lockscreen .lockscreen-credentials .btn {
15287
- padding: 0 10px;
16607
+ .docs-page .card > .card-body table {
16608
+ width: 100%;
16609
+ margin-top: 1.25rem;
16610
+ margin-bottom: 1.5rem;
16611
+ overflow: hidden;
16612
+ font-size: 0.95rem;
16613
+ border-collapse: collapse;
16614
+ border: 1px solid var(--bs-border-color);
16615
+ border-radius: 0.25rem;
16616
+ }
16617
+ .docs-page .card > .card-body table th,
16618
+ .docs-page .card > .card-body table td {
16619
+ padding: 0.65rem 0.9rem;
16620
+ text-align: right;
16621
+ vertical-align: top;
16622
+ border-bottom: 1px solid var(--bs-border-color);
16623
+ }
16624
+ .docs-page .card > .card-body table th {
16625
+ font-weight: 600;
16626
+ color: var(--bs-emphasis-color);
16627
+ background: var(--bs-tertiary-bg);
16628
+ }
16629
+ .docs-page .card > .card-body table tr:last-child td {
16630
+ border-bottom: 0;
16631
+ }
16632
+ .docs-page .card > .card-body table code {
16633
+ white-space: nowrap;
16634
+ }
16635
+ .docs-page .card > .card-body blockquote {
16636
+ padding: 0.85rem 1.1rem;
16637
+ margin-top: 1.25rem;
16638
+ color: var(--bs-emphasis-color);
16639
+ background: var(--bs-info-bg-subtle);
16640
+ border-right: 4px solid var(--bs-info-border-subtle);
16641
+ border-radius: 0.25rem;
16642
+ }
16643
+ .docs-page .card > .card-body blockquote p:last-child {
16644
+ margin-bottom: 0;
16645
+ }
16646
+ .docs-page .card > .card-body blockquote code {
16647
+ background: rgba(0, 0, 0, 0.05);
16648
+ }
16649
+ .docs-page .card > .card-body a:not(.btn):not(.nav-link) {
16650
+ color: var(--bs-primary);
16651
+ text-decoration: underline;
16652
+ text-decoration-thickness: 1px;
16653
+ text-underline-offset: 3px;
16654
+ }
16655
+ .docs-page .card > .card-body a:not(.btn):not(.nav-link):hover {
16656
+ text-decoration-thickness: 2px;
16657
+ }
16658
+ .docs-page .card > .card-body hr {
16659
+ margin: 2.5rem 0;
15288
16660
  border: 0;
16661
+ border-top: 1px solid var(--bs-border-color);
16662
+ opacity: 1;
15289
16663
  }
15290
- .lockscreen .lockscreen-footer {
15291
- margin-top: 10px;
16664
+ .docs-page .card > .card-body > p:first-child,
16665
+ .docs-page .card > .card-body > p:first-of-type {
16666
+ margin-bottom: 2rem;
16667
+ font-size: 1.125rem;
16668
+ line-height: 1.6;
16669
+ color: var(--bs-body-color);
15292
16670
  }
15293
-
15294
- .img-size-64,
15295
- .img-size-50,
15296
- .img-size-32 {
15297
- height: auto;
16671
+ .docs-page .card > .card-body details.faq-item {
16672
+ margin-bottom: 0.5rem;
16673
+ overflow: hidden;
16674
+ background: var(--bs-body-bg);
16675
+ border: 1px solid var(--bs-border-color);
16676
+ border-radius: 0.375rem;
16677
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
15298
16678
  }
15299
-
15300
- .img-size-64 {
15301
- width: 64px;
16679
+ @media (prefers-reduced-motion: reduce) {
16680
+ .docs-page .card > .card-body details.faq-item {
16681
+ transition: none;
16682
+ }
15302
16683
  }
15303
-
15304
- .img-size-50 {
15305
- width: 50px;
16684
+ .docs-page .card > .card-body details.faq-item:hover {
16685
+ border-color: var(--bs-primary-border-subtle);
15306
16686
  }
15307
-
15308
- .img-size-32 {
15309
- width: 32px;
16687
+ .docs-page .card > .card-body details.faq-item[open] {
16688
+ background: var(--bs-body-bg);
16689
+ border-color: var(--bs-primary-border-subtle);
16690
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
15310
16691
  }
15311
-
15312
- /* ==========================================================================
15313
- AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
15314
- ========================================================================== */
15315
- /* Skip Links - WCAG 2.4.1: Bypass Blocks */
15316
- .skip-link {
15317
- position: absolute;
15318
- top: -40px;
15319
- right: 6px;
15320
- z-index: 999999;
15321
- padding: 8px 16px;
16692
+ .docs-page .card > .card-body details.faq-item summary {
16693
+ position: relative;
16694
+ padding: 0.9rem 1.1rem 0.9rem 3rem;
16695
+ font-size: 1rem;
15322
16696
  font-weight: 600;
15323
- color: var(--bs-white);
15324
- text-decoration: none;
15325
- background: var(--bs-primary);
16697
+ color: var(--bs-emphasis-color);
16698
+ list-style: none;
16699
+ cursor: pointer;
16700
+ -webkit-user-select: none;
16701
+ user-select: none;
16702
+ transition: color 0.15s ease;
15326
16703
  }
15327
- .skip-link:focus {
15328
- top: 0;
15329
- outline: 3px solid var(--bs-warning);
15330
- outline-offset: 2px;
16704
+ @media (prefers-reduced-motion: reduce) {
16705
+ .docs-page .card > .card-body details.faq-item summary {
16706
+ transition: none;
16707
+ }
15331
16708
  }
15332
- .skip-link:hover {
15333
- color: var(--bs-white);
15334
- text-decoration: none;
15335
- background: var(--bs-primary-emphasis);
16709
+ .docs-page .card > .card-body details.faq-item summary::-webkit-details-marker {
16710
+ display: none;
15336
16711
  }
15337
-
15338
- /* Enhanced Focus Indicators - WCAG 2.4.7: Focus Visible */
15339
- .focus-enhanced:focus {
15340
- outline: 3px solid var(--bs-focus-ring-color, #0d6efd);
15341
- outline-offset: 2px;
15342
- box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
16712
+ .docs-page .card > .card-body details.faq-item summary::marker {
16713
+ content: "";
15343
16714
  }
15344
-
15345
- /* High Contrast Mode Support */
15346
- @media (prefers-contrast: high) {
15347
- .card {
15348
- border: 2px solid;
15349
- }
15350
- .btn {
15351
- border-width: 2px;
16715
+ .docs-page .card > .card-body details.faq-item summary:hover {
16716
+ color: var(--bs-primary);
16717
+ }
16718
+ .docs-page .card > .card-body details.faq-item summary::after {
16719
+ position: absolute;
16720
+ top: 50%;
16721
+ left: 1.1rem;
16722
+ display: inline-block;
16723
+ width: 0.55rem;
16724
+ height: 0.55rem;
16725
+ margin-top: -0.4rem;
16726
+ content: "";
16727
+ border-left: 2px solid currentcolor;
16728
+ border-bottom: 2px solid currentcolor;
16729
+ opacity: 0.55;
16730
+ transform: rotate(-45deg);
16731
+ transition: transform 0.2s ease;
16732
+ }
16733
+ @media (prefers-reduced-motion: reduce) {
16734
+ .docs-page .card > .card-body details.faq-item summary::after {
16735
+ transition: none;
15352
16736
  }
15353
- .nav-link {
15354
- border: 1px solid transparent;
16737
+ }
16738
+ .docs-page .card > .card-body details.faq-item[open] > summary {
16739
+ color: var(--bs-primary);
16740
+ border-bottom: 1px solid var(--bs-border-color);
16741
+ }
16742
+ .docs-page .card > .card-body details.faq-item[open] > summary::after {
16743
+ margin-top: -0.15rem;
16744
+ opacity: 1;
16745
+ transform: rotate(135deg);
16746
+ }
16747
+ .docs-page .card > .card-body details.faq-item > *:not(summary) {
16748
+ padding-left: 1.1rem;
16749
+ padding-right: 1.1rem;
16750
+ }
16751
+ .docs-page .card > .card-body details.faq-item > *:not(summary):first-of-type {
16752
+ padding-top: 1rem;
16753
+ }
16754
+ .docs-page .card > .card-body details.faq-item > *:not(summary):last-child {
16755
+ padding-bottom: 1rem;
16756
+ }
16757
+ .docs-page .card > .card-body details.faq-item p,
16758
+ .docs-page .card > .card-body details.faq-item ul,
16759
+ .docs-page .card > .card-body details.faq-item ol {
16760
+ margin-bottom: 0.65rem;
16761
+ }
16762
+ .docs-page .card > .card-body details.faq-item > *:last-child p:last-child,
16763
+ .docs-page .card > .card-body details.faq-item > p:last-child,
16764
+ .docs-page .card > .card-body details.faq-item > ul:last-child,
16765
+ .docs-page .card > .card-body details.faq-item > ol:last-child {
16766
+ margin-bottom: 0;
16767
+ }
16768
+ .docs-page .card > .card-body details.faq-item pre.astro-code,
16769
+ .docs-page .card > .card-body details.faq-item pre {
16770
+ margin-left: 0;
16771
+ margin-right: 0;
16772
+ }
16773
+ .docs-page[data-bs-theme=dark] .card > .card-body blockquote code, [data-bs-theme=dark] .docs-page .card > .card-body blockquote code {
16774
+ background: rgba(255, 255, 255, 0.08);
16775
+ }
16776
+
16777
+ .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
16778
+ max-width: 64rem;
16779
+ }
16780
+ @media (min-width: 1400px) {
16781
+ .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
16782
+ max-width: 72rem;
15355
16783
  }
15356
- .nav-link:hover, .nav-link:focus {
15357
- border-color: currentcolor;
16784
+ }
16785
+ .faq-page .faq-hero {
16786
+ position: relative;
16787
+ padding: 3rem 1.5rem 2.5rem;
16788
+ margin-top: 1rem;
16789
+ overflow: hidden;
16790
+ background: radial-gradient(ellipse at top right, rgba(var(--bs-primary-rgb), 0.12), transparent 60%), radial-gradient(ellipse at bottom left, rgba(var(--bs-info-rgb), 0.1), transparent 65%), var(--bs-body-bg);
16791
+ border: 1px solid var(--bs-border-color);
16792
+ border-radius: 1rem;
16793
+ }
16794
+ .faq-page .faq-hero-eyebrow {
16795
+ display: inline-flex;
16796
+ gap: 0.4rem;
16797
+ align-items: center;
16798
+ padding: 0.35rem 0.85rem;
16799
+ margin-bottom: 1rem;
16800
+ font-size: 0.75rem;
16801
+ font-weight: 600;
16802
+ color: var(--bs-primary);
16803
+ text-transform: uppercase;
16804
+ letter-spacing: 0.08em;
16805
+ background: var(--bs-primary-bg-subtle);
16806
+ border: 1px solid var(--bs-primary-border-subtle);
16807
+ border-radius: 50rem;
16808
+ }
16809
+ .faq-page .faq-hero-eyebrow .bi {
16810
+ font-size: 0.9rem;
16811
+ }
16812
+ .faq-page .faq-hero-title {
16813
+ margin: 0 0 0.5rem;
16814
+ font-size: 2.25rem;
16815
+ font-weight: 700;
16816
+ line-height: 1.15;
16817
+ color: var(--bs-emphasis-color);
16818
+ }
16819
+ @media (min-width: 768px) {
16820
+ .faq-page .faq-hero-title {
16821
+ font-size: 2.75rem;
15358
16822
  }
15359
16823
  }
15360
- /* Reduced Motion Support - WCAG 2.3.3: Animation from Interactions */
16824
+ .faq-page .faq-hero-lead {
16825
+ max-width: 36rem;
16826
+ margin: 0 auto 1.75rem;
16827
+ font-size: 1.05rem;
16828
+ line-height: 1.55;
16829
+ color: var(--bs-secondary-color);
16830
+ }
16831
+ .faq-page .faq-search {
16832
+ position: relative;
16833
+ max-width: 32rem;
16834
+ margin: 0 auto;
16835
+ }
16836
+ .faq-page .faq-search .form-control {
16837
+ height: 3rem;
16838
+ padding-left: 3rem;
16839
+ padding-right: 3rem;
16840
+ font-size: 1rem;
16841
+ background: var(--bs-body-bg);
16842
+ border-radius: 50rem;
16843
+ transition: box-shadow 0.15s ease, border-color 0.15s ease;
16844
+ }
15361
16845
  @media (prefers-reduced-motion: reduce) {
15362
- *,
15363
- *::before,
15364
- *::after {
15365
- transition-duration: 0.01ms !important;
15366
- animation-duration: 0.01ms !important;
15367
- animation-iteration-count: 1 !important;
15368
- scroll-behavior: auto !important;
15369
- }
15370
- .fade {
15371
- opacity: 1 !important;
15372
- /* stylelint-disable-next-line property-disallowed-list */
15373
- transition: none !important;
15374
- }
15375
- .collapse {
15376
- /* stylelint-disable-next-line property-disallowed-list */
15377
- transition: none !important;
16846
+ .faq-page .faq-search .form-control {
16847
+ transition: none;
15378
16848
  }
15379
- .modal.fade .modal-dialog {
15380
- transform: none !important;
16849
+ }
16850
+ .faq-page .faq-search .form-control:focus {
16851
+ box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
16852
+ }
16853
+ .faq-page .faq-search-icon {
16854
+ position: absolute;
16855
+ top: 50%;
16856
+ right: 1.2rem;
16857
+ color: var(--bs-secondary-color);
16858
+ pointer-events: none;
16859
+ transform: translateY(-50%);
16860
+ }
16861
+ .faq-page .faq-search-clear {
16862
+ position: absolute;
16863
+ top: 50%;
16864
+ left: 0.65rem;
16865
+ display: inline-flex;
16866
+ align-items: center;
16867
+ justify-content: center;
16868
+ width: 2rem;
16869
+ height: 2rem;
16870
+ padding: 0;
16871
+ color: var(--bs-secondary-color);
16872
+ background: var(--bs-tertiary-bg);
16873
+ border: 0;
16874
+ transform: translateY(-50%);
16875
+ border-radius: 50%;
16876
+ transition: background 0.15s ease, color 0.15s ease;
16877
+ }
16878
+ @media (prefers-reduced-motion: reduce) {
16879
+ .faq-page .faq-search-clear {
16880
+ transition: none;
15381
16881
  }
15382
16882
  }
15383
- /* Screen Reader Only Content */
15384
- .sr-only {
15385
- position: absolute !important;
15386
- width: 1px !important;
15387
- height: 1px !important;
15388
- padding: 0 !important;
15389
- margin: -1px !important;
15390
- overflow: hidden !important;
15391
- clip: rect(0, 0, 0, 0) !important;
15392
- white-space: nowrap !important;
15393
- border: 0 !important;
16883
+ .faq-page .faq-search-clear:hover {
16884
+ color: var(--bs-body-color);
16885
+ background: var(--bs-secondary-bg);
15394
16886
  }
15395
-
15396
- .sr-only-focusable:focus {
15397
- position: static !important;
15398
- width: auto !important;
15399
- height: auto !important;
15400
- padding: inherit !important;
15401
- margin: inherit !important;
15402
- overflow: visible !important;
15403
- clip: auto !important;
15404
- white-space: normal !important;
16887
+ .faq-page .faq-empty-state {
16888
+ max-width: 32rem;
16889
+ padding: 1rem;
16890
+ margin: 1.5rem auto 0;
16891
+ font-size: 0.95rem;
16892
+ color: var(--bs-secondary-color);
16893
+ background: var(--bs-tertiary-bg);
16894
+ border-radius: 0.375rem;
16895
+ }
16896
+ .faq-page .faq-empty-state .bi {
16897
+ margin-left: 0.35rem;
16898
+ }
16899
+ .faq-page .faq-chips {
16900
+ display: flex;
16901
+ flex-wrap: wrap;
16902
+ gap: 0.5rem;
16903
+ justify-content: center;
16904
+ }
16905
+ .faq-page .faq-chip {
16906
+ display: inline-flex;
16907
+ gap: 0.45rem;
16908
+ align-items: center;
16909
+ padding: 0.45rem 0.85rem;
16910
+ font-size: 0.875rem;
16911
+ font-weight: 500;
16912
+ color: var(--bs-body-color);
16913
+ text-decoration: none;
16914
+ background: var(--bs-body-bg);
16915
+ border: 1px solid var(--bs-border-color);
16916
+ border-radius: 50rem;
16917
+ transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
16918
+ }
16919
+ @media (prefers-reduced-motion: reduce) {
16920
+ .faq-page .faq-chip {
16921
+ transition: none;
16922
+ }
15405
16923
  }
15406
-
15407
- /* Focus Trap Utilities */
15408
- .focus-trap:focus {
15409
- box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
16924
+ .faq-page .faq-chip:hover {
16925
+ color: var(--bs-emphasis-color);
16926
+ background: var(--bs-tertiary-bg);
16927
+ transform: translateY(-1px);
15410
16928
  }
15411
-
15412
- /* Accessible Color Combinations - WCAG 1.4.3: Contrast (Minimum) */
15413
- .text-accessible-primary {
15414
- color: #003d82; /* 4.5:1 contrast on white */
16929
+ .faq-page .faq-chip .bi {
16930
+ font-size: 1rem;
15415
16931
  }
15416
-
15417
- .text-accessible-success {
15418
- color: #0f5132; /* 4.5:1 contrast on white */
16932
+ .faq-page .faq-chip-count {
16933
+ padding: 0 0.45rem;
16934
+ font-size: 0.7rem;
16935
+ font-weight: 600;
16936
+ color: var(--bs-secondary-color);
16937
+ background: var(--bs-tertiary-bg);
16938
+ border-radius: 50rem;
16939
+ }
16940
+ .faq-page .faq-chip-primary:hover {
16941
+ color: var(--bs-primary-text-emphasis);
16942
+ background: var(--bs-primary-bg-subtle);
16943
+ border-color: var(--bs-primary-border-subtle);
16944
+ }
16945
+ .faq-page .faq-chip-primary:hover .faq-chip-count {
16946
+ color: var(--bs-primary-text-emphasis);
16947
+ background: rgba(0, 0, 0, 0.06);
16948
+ }
16949
+ .faq-page .faq-chip-info:hover {
16950
+ color: var(--bs-info-text-emphasis);
16951
+ background: var(--bs-info-bg-subtle);
16952
+ border-color: var(--bs-info-border-subtle);
16953
+ }
16954
+ .faq-page .faq-chip-info:hover .faq-chip-count {
16955
+ color: var(--bs-info-text-emphasis);
16956
+ background: rgba(0, 0, 0, 0.06);
16957
+ }
16958
+ .faq-page .faq-chip-warning:hover {
16959
+ color: var(--bs-warning-text-emphasis);
16960
+ background: var(--bs-warning-bg-subtle);
16961
+ border-color: var(--bs-warning-border-subtle);
16962
+ }
16963
+ .faq-page .faq-chip-warning:hover .faq-chip-count {
16964
+ color: var(--bs-warning-text-emphasis);
16965
+ background: rgba(0, 0, 0, 0.06);
16966
+ }
16967
+ .faq-page .faq-chip-success:hover {
16968
+ color: var(--bs-success-text-emphasis);
16969
+ background: var(--bs-success-bg-subtle);
16970
+ border-color: var(--bs-success-border-subtle);
16971
+ }
16972
+ .faq-page .faq-chip-success:hover .faq-chip-count {
16973
+ color: var(--bs-success-text-emphasis);
16974
+ background: rgba(0, 0, 0, 0.06);
16975
+ }
16976
+ .faq-page .faq-chip-danger:hover {
16977
+ color: var(--bs-danger-text-emphasis);
16978
+ background: var(--bs-danger-bg-subtle);
16979
+ border-color: var(--bs-danger-border-subtle);
16980
+ }
16981
+ .faq-page .faq-chip-danger:hover .faq-chip-count {
16982
+ color: var(--bs-danger-text-emphasis);
16983
+ background: rgba(0, 0, 0, 0.06);
16984
+ }
16985
+ .faq-page .faq-chip-secondary:hover {
16986
+ color: var(--bs-secondary-text-emphasis);
16987
+ background: var(--bs-secondary-bg-subtle);
16988
+ border-color: var(--bs-secondary-border-subtle);
16989
+ }
16990
+ .faq-page .faq-chip-secondary:hover .faq-chip-count {
16991
+ color: var(--bs-secondary-text-emphasis);
16992
+ background: rgba(0, 0, 0, 0.06);
16993
+ }
16994
+ .faq-page .faq-section {
16995
+ margin-bottom: 2.5rem;
16996
+ scroll-margin-top: 5rem;
16997
+ }
16998
+ .faq-page .faq-section-header {
16999
+ display: flex;
17000
+ gap: 1rem;
17001
+ align-items: center;
17002
+ padding: 1rem 1.25rem;
17003
+ margin-bottom: 1rem;
17004
+ background: var(--bs-body-bg);
17005
+ border: 1px solid var(--bs-border-color);
17006
+ border-right: 4px solid var(--bs-primary);
17007
+ border-radius: 0.375rem;
15419
17008
  }
15420
-
15421
- .text-accessible-danger {
15422
- color: #842029; /* 4.5:1 contrast on white */
17009
+ .faq-page .faq-section-icon {
17010
+ display: inline-flex;
17011
+ flex-shrink: 0;
17012
+ align-items: center;
17013
+ justify-content: center;
17014
+ width: 2.75rem;
17015
+ height: 2.75rem;
17016
+ font-size: 1.35rem;
17017
+ color: var(--bs-primary);
17018
+ background: var(--bs-primary-bg-subtle);
17019
+ border-radius: 0.375rem;
15423
17020
  }
15424
-
15425
- .text-accessible-warning {
15426
- color: #664d03; /* 4.5:1 contrast on white */
17021
+ .faq-page .faq-section-title {
17022
+ margin: 0;
17023
+ font-size: 1.4rem;
17024
+ font-weight: 600;
17025
+ line-height: 1.2;
17026
+ color: var(--bs-emphasis-color);
15427
17027
  }
15428
-
15429
- /* ARIA Live Regions */
15430
- .live-region {
15431
- position: absolute;
15432
- right: -10000px;
15433
- width: 1px;
15434
- height: 1px;
15435
- overflow: hidden;
17028
+ .faq-page .faq-section-count {
17029
+ margin: 0.1rem 0 0;
17030
+ font-size: 0.8rem;
17031
+ color: var(--bs-secondary-color);
15436
17032
  }
15437
- .live-region.live-region-visible {
15438
- position: static;
15439
- right: auto;
15440
- width: auto;
15441
- height: auto;
15442
- overflow: visible;
17033
+ .faq-page .faq-section-primary {
17034
+ border-right-color: var(--bs-primary);
15443
17035
  }
15444
-
15445
- /* Enhanced Error States - WCAG 3.3.1: Error Identification */
15446
- .form-control.is-invalid {
15447
- border-color: var(--bs-danger);
17036
+ .faq-page .faq-section-primary .faq-section-icon {
17037
+ color: var(--bs-primary-text-emphasis);
17038
+ background: var(--bs-primary-bg-subtle);
15448
17039
  }
15449
- .form-control.is-invalid:focus {
15450
- border-color: var(--bs-danger);
15451
- box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
17040
+ .faq-page .faq-section-info {
17041
+ border-right-color: var(--bs-info);
15452
17042
  }
15453
-
15454
- .invalid-feedback[role=alert] {
15455
- font-weight: 600;
17043
+ .faq-page .faq-section-info .faq-section-icon {
17044
+ color: var(--bs-info-text-emphasis);
17045
+ background: var(--bs-info-bg-subtle);
15456
17046
  }
15457
-
15458
- /* Target Size - WCAG 2.5.8: Target Size (Minimum) */
15459
- .touch-target {
15460
- min-width: 44px;
15461
- min-height: 44px;
17047
+ .faq-page .faq-section-warning {
17048
+ border-right-color: var(--bs-warning);
15462
17049
  }
15463
- .touch-target.touch-target-small {
15464
- min-width: 24px;
15465
- min-height: 24px;
17050
+ .faq-page .faq-section-warning .faq-section-icon {
17051
+ color: var(--bs-warning-text-emphasis);
17052
+ background: var(--bs-warning-bg-subtle);
15466
17053
  }
15467
-
15468
- /* Table Accessibility */
15469
- .table-accessible th {
15470
- font-weight: 600;
15471
- background-color: var(--bs-secondary-bg);
17054
+ .faq-page .faq-section-success {
17055
+ border-right-color: var(--bs-success);
15472
17056
  }
15473
- .table-accessible th[scope=col] {
15474
- border-bottom: 2px solid var(--bs-border-color);
17057
+ .faq-page .faq-section-success .faq-section-icon {
17058
+ color: var(--bs-success-text-emphasis);
17059
+ background: var(--bs-success-bg-subtle);
15475
17060
  }
15476
- .table-accessible th[scope=row] {
15477
- border-left: 2px solid var(--bs-border-color);
17061
+ .faq-page .faq-section-danger {
17062
+ border-right-color: var(--bs-danger);
15478
17063
  }
15479
- .table-accessible caption {
15480
- padding: 0.75rem;
15481
- font-weight: 600;
15482
- color: var(--bs-secondary);
15483
- text-align: right;
15484
- caption-side: top;
17064
+ .faq-page .faq-section-danger .faq-section-icon {
17065
+ color: var(--bs-danger-text-emphasis);
17066
+ background: var(--bs-danger-bg-subtle);
15485
17067
  }
15486
-
15487
- /* Navigation Landmarks */
15488
- nav[role=navigation]:not([aria-label]):not([aria-labelledby])::before {
15489
- position: absolute;
15490
- right: -10000px;
15491
- content: "Navigation";
17068
+ .faq-page .faq-section-secondary {
17069
+ border-right-color: var(--bs-secondary);
15492
17070
  }
15493
-
15494
- /* Form Fieldset Styling */
15495
- fieldset {
15496
- padding: 1rem;
15497
- margin-bottom: 1rem;
15498
- border: 1px solid var(--bs-border-color);
17071
+ .faq-page .faq-section-secondary .faq-section-icon {
17072
+ color: var(--bs-secondary-text-emphasis);
17073
+ background: var(--bs-secondary-bg-subtle);
15499
17074
  }
15500
- fieldset legend {
15501
- padding: 0 0.5rem;
17075
+ .faq-page .faq-section-items .faq-item {
15502
17076
  margin-bottom: 0.5rem;
15503
- font-size: 1.1em;
15504
- font-weight: 600;
17077
+ overflow: hidden;
17078
+ background: var(--bs-body-bg);
17079
+ border: 1px solid var(--bs-border-color);
17080
+ border-radius: 0.375rem;
17081
+ transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
15505
17082
  }
15506
-
15507
- /* Loading States */
15508
- .loading[aria-busy=true] {
15509
- position: relative;
15510
- pointer-events: none;
17083
+ @media (prefers-reduced-motion: reduce) {
17084
+ .faq-page .faq-section-items .faq-item {
17085
+ transition: none;
17086
+ }
15511
17087
  }
15512
- .loading[aria-busy=true]::after {
15513
- position: absolute;
15514
- top: 50%;
15515
- right: 50%;
15516
- width: 20px;
15517
- height: 20px;
15518
- margin-top: -10px;
15519
- margin-right: -10px;
17088
+ .faq-page .faq-section-items .faq-item:hover {
17089
+ border-color: var(--bs-primary-border-subtle);
17090
+ transform: translateX(-2px);
17091
+ }
17092
+ .faq-page .faq-section-items .faq-item[open] {
17093
+ border-color: var(--bs-primary-border-subtle);
17094
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
17095
+ transform: none;
17096
+ }
17097
+ .faq-page .faq-section-items .faq-item summary {
17098
+ display: flex;
17099
+ gap: 0.85rem;
17100
+ align-items: center;
17101
+ padding: 1rem 1.25rem;
17102
+ font-size: 1rem;
17103
+ font-weight: 500;
17104
+ color: var(--bs-emphasis-color);
17105
+ list-style: none;
17106
+ cursor: pointer;
17107
+ -webkit-user-select: none;
17108
+ user-select: none;
17109
+ }
17110
+ .faq-page .faq-section-items .faq-item summary::-webkit-details-marker {
17111
+ display: none;
17112
+ }
17113
+ .faq-page .faq-section-items .faq-item summary::marker {
15520
17114
  content: "";
15521
- border: 2px solid var(--bs-primary);
15522
- border-top-color: transparent;
15523
- animation: spin 1s linear infinite;
17115
+ }
17116
+ .faq-page .faq-section-items .faq-item summary::after {
17117
+ content: none;
17118
+ }
17119
+ .faq-page .faq-section-items .faq-item .faq-q-icon {
17120
+ display: inline-flex;
17121
+ flex-shrink: 0;
17122
+ align-items: center;
17123
+ justify-content: center;
17124
+ width: 1.75rem;
17125
+ height: 1.75rem;
17126
+ font-size: 0.85rem;
17127
+ color: var(--bs-primary);
17128
+ background: var(--bs-primary-bg-subtle);
17129
+ border-radius: 50%;
17130
+ }
17131
+ .faq-page .faq-section-items .faq-item .faq-q-text {
17132
+ flex-grow: 1;
17133
+ }
17134
+ .faq-page .faq-section-items .faq-item .faq-q-chevron {
17135
+ flex-shrink: 0;
17136
+ color: var(--bs-secondary-color);
17137
+ transition: transform 0.2s ease, color 0.2s ease;
15524
17138
  }
15525
17139
  @media (prefers-reduced-motion: reduce) {
15526
- .loading[aria-busy=true]::after {
15527
- border-top-color: var(--bs-primary);
15528
- animation: none;
17140
+ .faq-page .faq-section-items .faq-item .faq-q-chevron {
17141
+ transition: none;
15529
17142
  }
15530
17143
  }
15531
-
15532
- @keyframes spin {
15533
- to {
15534
- transform: rotate(-360deg);
15535
- }
17144
+ .faq-page .faq-section-items .faq-item[open] .faq-q-chevron {
17145
+ color: var(--bs-primary);
17146
+ transform: rotate(-180deg);
15536
17147
  }
15537
- /* Dark Mode Accessibility */
15538
- [data-bs-theme=dark] .text-accessible-primary {
15539
- color: #6ea8fe;
17148
+ .faq-page .faq-section-items .faq-item[open] summary {
17149
+ color: var(--bs-primary);
17150
+ border-bottom: 1px solid var(--bs-border-color);
15540
17151
  }
15541
- [data-bs-theme=dark] .text-accessible-success {
15542
- color: #75b798;
17152
+ .faq-page .faq-section-items .faq-item .faq-answer {
17153
+ padding: 1.1rem 3.85rem 1.1rem 1.25rem;
17154
+ font-size: 0.95rem;
17155
+ line-height: 1.65;
17156
+ color: var(--bs-body-color);
15543
17157
  }
15544
- [data-bs-theme=dark] .text-accessible-danger {
15545
- color: #f1aeb5;
17158
+ .faq-page .faq-section-items .faq-item .faq-answer p:last-child,
17159
+ .faq-page .faq-section-items .faq-item .faq-answer ul:last-child,
17160
+ .faq-page .faq-section-items .faq-item .faq-answer ol:last-child,
17161
+ .faq-page .faq-section-items .faq-item .faq-answer pre:last-child {
17162
+ margin-bottom: 0;
15546
17163
  }
15547
- [data-bs-theme=dark] .text-accessible-warning {
15548
- color: #ffda6a;
17164
+ .faq-page .faq-section-items .faq-item .faq-answer a {
17165
+ color: var(--bs-primary);
17166
+ text-decoration: underline;
17167
+ text-underline-offset: 2px;
15549
17168
  }
15550
-
15551
- /* Print Accessibility */
15552
- @media print {
15553
- .skip-link,
15554
- .btn,
15555
- .nav-link {
15556
- color: #000 !important;
15557
- background: transparent !important;
15558
- border: 1px solid #000 !important;
15559
- }
15560
- a[href^=http]::after {
15561
- font-size: 0.8em;
15562
- content: " (" attr(href) ")";
15563
- }
15564
- /* Print Layout Fix - Ensure sidebar and main content are both visible */
15565
- .app-wrapper {
15566
- display: grid !important;
15567
- grid-template-rows: auto 1fr auto !important;
15568
- grid-template-columns: auto 1fr !important;
15569
- }
15570
- .sidebar-overlay {
15571
- display: none !important;
15572
- }
15573
- .app-sidebar {
15574
- position: static !important;
15575
- display: block !important;
15576
- min-width: 200px !important;
15577
- max-width: 200px !important;
15578
- max-height: none !important;
15579
- margin-right: 0 !important;
15580
- overflow: visible !important;
15581
- }
15582
- .sidebar-wrapper {
15583
- height: auto !important;
15584
- overflow: visible !important;
15585
- }
15586
- .app-header {
15587
- position: static !important;
15588
- }
15589
- .app-main {
15590
- width: auto !important;
15591
- max-width: 100% !important;
15592
- overflow: visible !important;
15593
- }
15594
- .app-content {
15595
- overflow: visible !important;
15596
- }
15597
- .app-footer {
15598
- position: static !important;
15599
- }
17169
+ .faq-page .faq-section-items .faq-item .faq-answer a:hover {
17170
+ text-decoration-thickness: 2px;
17171
+ }
17172
+ .faq-page .faq-section-items .faq-item .faq-answer code {
17173
+ padding: 0.12em 0.35em;
17174
+ font-size: 0.875em;
17175
+ color: var(--bs-emphasis-color);
17176
+ background: var(--bs-tertiary-bg);
17177
+ border: 1px solid var(--bs-border-color);
17178
+ border-radius: 0.25rem;
17179
+ }
17180
+ .faq-page .faq-section-items .faq-item .faq-answer pre.astro-code,
17181
+ .faq-page .faq-section-items .faq-item .faq-answer pre {
17182
+ padding: 0.85rem 1rem;
17183
+ margin-top: 0.75rem;
17184
+ margin-bottom: 0.75rem;
17185
+ overflow-x: auto;
17186
+ font-size: 0.85rem;
17187
+ line-height: 1.55;
17188
+ border-radius: 0.25rem;
17189
+ }
17190
+ .faq-page .faq-section-items .faq-item .faq-answer pre.astro-code code,
17191
+ .faq-page .faq-section-items .faq-item .faq-answer pre code {
17192
+ padding: 0;
17193
+ background: transparent;
17194
+ border: 0;
17195
+ }
17196
+ .faq-page .faq-cta {
17197
+ padding: 2.5rem 1.5rem;
17198
+ text-align: center;
17199
+ background: radial-gradient(ellipse at top, rgba(var(--bs-primary-rgb), 0.08), transparent 60%), var(--bs-body-bg);
17200
+ border: 1px solid var(--bs-border-color);
17201
+ border-radius: 1rem;
17202
+ }
17203
+ .faq-page .faq-cta-icon {
17204
+ display: inline-flex;
17205
+ align-items: center;
17206
+ justify-content: center;
17207
+ width: 3.5rem;
17208
+ height: 3.5rem;
17209
+ margin-bottom: 1rem;
17210
+ font-size: 1.6rem;
17211
+ color: var(--bs-primary);
17212
+ background: var(--bs-primary-bg-subtle);
17213
+ border-radius: 50%;
17214
+ }
17215
+ .faq-page .faq-cta h2, .faq-page .faq-cta .h2 {
17216
+ margin: 0 0 0.5rem;
17217
+ font-size: 1.5rem;
17218
+ font-weight: 600;
17219
+ color: var(--bs-emphasis-color);
17220
+ }
17221
+ .faq-page .faq-cta p {
17222
+ max-width: 32rem;
17223
+ margin: 0 auto 1.5rem;
17224
+ color: var(--bs-secondary-color);
17225
+ }
17226
+ .faq-page .faq-cta-actions {
17227
+ display: inline-flex;
17228
+ flex-wrap: wrap;
17229
+ gap: 0.5rem;
17230
+ justify-content: center;
15600
17231
  }
15601
17232
  /*# sourceMappingURL=adminlte.rtl.css.map */