@charset "UTF-8";

:root {
  /* Main theme colours */
  --cassiopeia-color-primary: #1f1f1f;
  --cassiopeia-color-link: #7fb3ff;
  --cassiopeia-color-hover: #a8cfff;

  /* Joomla link variables */
  --link-color: #7fb3ff;
  --link-color-rgb: 127, 179, 255;

  --link-hover-color: #a8cfff;
  --link-hover-color-rgb: 168, 207, 255;

  /* Backgrounds */
  --body-bg: #121212;
  --cassiopeia-bg-dark: #1b1b1b;
  --cassiopeia-bg-light: #242424;

  /* Text */
  --body-color: #e6e6e6;
  --emphasis-color: #e6e6e6;
  --cassiopeia-text: #f2f2f2;
  --cassiopeia-text-muted: #b5b5b5;

  /* Borders */
  --cassiopeia-border-color: #3a3a3a;

  /* Buttons */
  --cassiopeia-button-bg: #2f2f2f;
  --cassiopeia-button-text: #ffffff;
  --cassiopeia-button-hover-bg: #444444;
  --cassiopeia-button-border: #555555;

  /* Forms */
  --cassiopeia-input-bg: #1d1d1d;
  --cassiopeia-input-text: #f2f2f2;
  --cassiopeia-input-border: #444444;
  --cassiopeia-input-focus: #7fb3ff;
  --cassiopeia-placeholder: #9a9a9a;

  /* Cards / containers */
  --cassiopeia-card-bg: #1e1e1e;
  --cassiopeia-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);

  /* Header / footer */
  --cassiopeia-header-bg: #181818;
  --cassiopeia-footer-bg: #181818;
}

/* Base page styling */
body {
  background: var(--body-bg);
  color: var(--body-color);
}

/* Links */
a {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-hover-color);
}

/* Header */
.container-header {
  background: var(--cassiopeia-header-bg);
}

/* Footer */
.container-footer {
  background: var(--cassiopeia-footer-bg);
  color: var(--cassiopeia-text-muted);
}

/* Cards / modules */
.card,
.moduletable,
.sidebar
 {
  background: var(--cassiopeia-card-bg);
  border: 1px solid var(--cassiopeia-border-color);
  box-shadow: var(--cassiopeia-card-shadow);
}
/*.container-component*/

/* =========================
   FORM FIELDS
========================= */

input,
textarea,
select,
.form-control {
  background: var(--cassiopeia-input-bg);
  border: 1px solid var(--cassiopeia-input-border);
  color: var(--cassiopeia-input-text);
  border-radius: 6px;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  background: #252525;
  border-color: var(--cassiopeia-input-focus);
  color: #ffffff;
  box-shadow: 0 0 0 0.2rem rgba(127, 179, 255, 0.2);
}

/* Placeholder text */
input::placeholder,
textarea::placeholder {
  color: var(--cassiopeia-placeholder);
  opacity: 1;
}

/* Disabled fields */
input:disabled,
textarea:disabled,
select:disabled {
  background: #2a2a2a;
  color: #888888;
  border-color: #3a3a3a;
}

/* Labels */
label,
.form-label {
  color: #dddddd;
}

/* Input groups */
.input-group-text {
  background: #2b2b2b;
  border: 1px solid var(--cassiopeia-input-border);
  color: #dddddd;
}

/* Filled input fields should remain light text */
input:not(:placeholder-shown),
textarea:not(:placeholder-shown),
select,
.form-control:not(:placeholder-shown) {
  color: #f2f2f2;
}

/* Autofill styling (Chrome/Edge/Safari) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #f2f2f2 !important;
  -webkit-box-shadow: 0 0 0px 1000px #1d1d1d inset !important;
  transition: background-color 5000s ease-in-out 0s;
  border: 1px solid var(--cassiopeia-input-border);
}

/* Joomla select boxes */
select option {
  background: #1d1d1d;
  color: #f2f2f2;
}

/* Date / time / number inputs */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"] {
  color: #f2f2f2;
}

/* Ensure text stays light after typing */
input,
textarea,
.form-control {
  caret-color: #ffffff;
  color: #f2f2f2 !important;
}

/* TinyMCE / editor fields */
.tox .tox-edit-area__iframe,
.tox .tox-toolbar,
.tox .tox-toolbar__primary {
  background: #1d1d1d !important;
  color: #f2f2f2 !important;
}

/* =========================
   BUTTONS
========================= */

.btn,
button,
input[type="submit"],
input[type="button"] {
  background: var(--cassiopeia-button-bg);
  border: 1px solid var(--cassiopeia-button-border);
  color: var(--cassiopeia-button-text);
  border-radius: 6px;
  transition: all 0.2s ease;
}

/* Hover */
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--cassiopeia-button-hover-bg);
  border-color: #777777;
  color: #ffffff;
}

/* Focus */
.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
  box-shadow: 0 0 0 0.2rem rgba(127, 179, 255, 0.25);
}

/* Primary buttons */
.btn-primary {
  background: #3a3a3a;
  border-color: #5a5a5a;
}

.btn-primary:hover {
  background: #4a4a4a;
  border-color: #7fb3ff;
}

/* Secondary buttons */
.btn-secondary {
  background: #252525;
  border-color: #444444;
}

/* Outline buttons */
.btn-outline-primary {
  border-color: #7fb3ff;
  color: #7fb3ff;
}

.btn-outline-primary:hover {
  background: #7fb3ff;
  color: #121212;
}

/* =========================
   TABLES
========================= */

.table {
  color: var(--body-color);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03);
}

/* =========================
   DROPDOWNS
========================= */

.dropdown-menu {
  background: #1f1f1f;
  border: 1px solid #3a3a3a;
}

.dropdown-item {
  color: #e6e6e6;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: #2d2d2d;
  color: #ffffff;
}





/* =====================================
COM_USERS LOGIN
========================================*/

/* ========================================
   WRAPPER
======================================== */

.modern-users-login {
    max-width: 420px;
    margin: 0 auto;
}

/* ========================================
   FORM
======================================== */

.modern-login-form {
    background: #1c1c1c;
    border: 1px solid #343434;
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

/* ========================================
   INPUTS
======================================== */

.modern-input-group .input-group-text {
    background: #262626;
    border: 1px solid #444;
    border-right: 0;
    color: #bbbbbb;
    min-width: 48px;
    justify-content: center;
}

.modern-input-group .form-control {
    background: #1d1d1d;
    border: 1px solid #444;
    border-left: 0;
    color: #f2f2f2 !important;
    height: 50px;
    font-size: 0.95rem;
}

.modern-input-group .form-control::placeholder {
    color: #9f9f9f;
    opacity: 1;
}

.modern-input-group .form-control:focus {
    background: #252525;
    border-color: #7fb3ff;
    color: #ffffff;
    box-shadow: none;
}

/* Keep typed text white */
.modern-input-group input:-webkit-autofill,
.modern-input-group input:-webkit-autofill:hover,
.modern-input-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 1000px #1d1d1d inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Password Toggle */
.input-password-toggle {
    background: #262626;
    border: 1px solid #444;
    border-left: 0;
    color: #bbbbbb;
}

.input-password-toggle:hover {
    background: #333333;
    color: #ffffff;
}

/* ========================================
   REMEMBER
======================================== */

.modern-remember {
    font-size: 0.88rem;
    color: #d2d2d2;
}

/* ========================================
   BUTTON
======================================== */
/**
.modern-login-btn {
    height: 50px;
    border: 0;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #4776e6 0%, #5d9cff 100%);
}

.modern-login-btn:hover {
    background: linear-gradient(135deg, #5a88f0 0%, #74abff 100%);
}
*/
/* ========================================
   LINKS
======================================== */

.modern-login-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin-top: 1rem;
    font-size: 0.76rem;
}

.modern-login-links a {
    color: #b7ccff;
    text-decoration: none;
    border: 0 !important;
    padding: 0;
    transition: all .2s ease;
}

.modern-login-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 576px) {

    .modern-login-links {
        flex-direction: column;
        align-items: center;
        gap: 0.45rem;
    }

}

/* Hide Joomla password toggle text only */
.input-password-toggle .icon-eye,
.input-password-toggle .icon-eye-slash {
    font-size: 0;
}

.input-password-toggle .icon-eye::before,
.input-password-toggle .icon-eye-slash::before{
    font-size: 1rem;
}

/* ==========================================
END COM_USERS LOGIN 
============================================ */



/* ================================
   JOOMLA ALERT DARK MODE FIX
================================ */

html[data-theme="dark"] #system-message-container {
    color: #e6e6e6;
}

/* Force base alert container */
html[data-theme="dark"] joomla-alert,
html[data-theme="dark"] .alert {
    background-color: #1e1e1e !important;
    border: 1px solid #3a3a3a !important;
    color: #e6e6e6 !important;
}

/* Ensure inner wrapper inherits */
html[data-theme="dark"] joomla-alert * {
    color: inherit !important;
}

/* SUCCESS */
html[data-theme="dark"] joomla-alert[type="success"] {
    background-color: #1f2f26 !important;
    border-color: #2f5a3a !important;
}

/* DANGER */
html[data-theme="dark"] joomla-alert[type="danger"] {
    background-color: #2f1b1b !important;
    border-color: #6a2d2d !important;
}

/* WARNING */
html[data-theme="dark"] joomla-alert[type="warning"] {
    background-color: #2f2a1a !important;
    border-color: #665a2a !important;
}

/* INFO */
html[data-theme="dark"] joomla-alert[type="info"] {
    background-color: #1b2630 !important;
    border-color: #2a4a66 !important;
}

/* Message area */
html[data-theme="dark"] joomla-alert .alert-wrapper,
html[data-theme="dark"] joomla-alert .alert-message {
    color: #e6e6e6 !important;
}

/* Hide redundant labels ("success", "danger") */
html[data-theme="dark"] joomla-alert .visually-hidden {
    display: none !important;
}

/* Close button */
html[data-theme="dark"] joomla-alert .joomla-alert--close {
    color: #ffffff !important;
    opacity: 0.75;
}

html[data-theme="dark"] joomla-alert .joomla-alert--close:hover {
    opacity: 1;
}

.icon-qi {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgIHdpZHRoPSI2MDAuMDAwMDAwcHQiIGhlaWdodD0iNjAwLjAwMDAwMHB0IiB2aWV3Qm94PSIwIDAgNjAwLjAwMDAwMCA2MDAuMDAwMDAwIiAgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDYwMC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiIGZpbGw9IiNmZmZmZmYiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik0yNjgwIDQ3MzAgYy0zMTUgLTI0IC02MTEgLTE1OCAtODQ3IC0zODMgLTIxMSAtMjAyIC0zNDggLTQ1MSAtNDA5IC03NDIgLTI4IC0xMzQgLTI2IC00MDMgNCAtNTQyIDEyMSAtNTU4IDU0NyAtOTc3IDExMDkgLTEwOTAgMTMzIC0yNiAzOTUgLTI0IDUzMyA2IDE4MSAzOSAzMzYgMTA0IDQ5MyAyMDggMzkgMjYgNzIgNDIgNzcgMzcgNSA1IDMxIC00MCA1OSAtNzggbDUwIC02OSAtMjAgLTM5IC0yMCAtMzkgNTggLTcyIGMxNDIgLTE3NCAzOTUgLTQzNCA1NTkgLTU3MyA4MyAtNzEgMjQwIC0xOTEgMzM3IC0yNTcgNjYgLTQ1IDcwIC00NiA5NyAtMzIgOTYgNTAgMjExIDE4MSAyNjkgMzA2IDU0IDExNiA2MiAxMDIgLTExMSAxOTkgLTE5MCAxMDYgLTQ2OSAyOTEgLTYwOCA0MDMgLTU4IDQ2IC0xNjAgMTM3IC0yMjcgMjAxIGwtMTIzIDExOCAtMzEgLTIyIGMtMzUgLTI2IC0zMCAtMjggLTk4IDU0IGwtNDAgNDkgNTUgNjUgYzIyMiAyNjEgMzM0IDU2NCAzMzQgOTAyIDAgMzM4IC0xMDEgNjIyIC0zMTQgODg1IC0yODIgMzUwIC03MjggNTM5IC0xMTg2IDUwNXogbTI2NSAtMTgxIGM0MjcgLTUyIDc3OCAtMzM5IDkyOSAtNzU2IDE3NyAtNDk0IDE1IC0xMDc2IC0zODkgLTEzOTkgLTIwNyAtMTY2IC00MjMgLTI0OSAtNjgxIC0yNjEgLTM5OSAtMTkgLTc3NSAxODYgLTk5MSA1NDMgLTE3OCAyOTMgLTIyMiA2ODIgLTExNiAxMDE4IDEyNiA0MDAgNDM5IDcxMCA4MjkgODIxIDE1MCA0MiAyNzAgNTIgNDE5IDM0eiIvPgo8cGF0aCBkPSJNMjcxNCA0Mzk4IGMtMTIgLTUgLTI3IC0yMiAtMzUgLTM3IC0xNiAtMzQgLTI0IC0yMTggLTEwIC0yNTQgMzAgLTc4IDI0MSAtNzUgMjYyIDMgMTIgNDIgOSAyMDMgLTQgMjQwIC03IDE5IC0yMyA0MCAtMzcgNDcgLTMwIDE1IC0xNDYgMTYgLTE3NiAxeiIvPgo8cGF0aCBkPSJNMjM2MyAzNzc2IGMtNTMgLTI0IC02NCAtMTEwIC0xOSAtMTU1IDI2IC0yNiAyOSAtMjYgMTkxIC0yOSBsMTY1IC0zIDAgLTQ0NSAwIC00NDQgLTIzOSAwIGMtMjM5IDAgLTI0MCAwIC0yNjggLTI0IC0zNyAtMzIgLTQwIC0xMDMgLTUgLTEzOGwyMyAtMjMgNjA1IDAgNjA2IDAgMTkgMjQgYzI5IDM1IDI2IDEwNSAtNiAxMzYgbC0yNCAyNSAtMjUxIDAgLTI1MCAwIDAgNTI5IGMwIDQ3OSAtMiA1MzAgLTE3IDU0MiAtMjQgMjEgLTQ4NSAyNSAtNTMwIDV6Ii8+CjwvZz4KPC9zdmc+Cg==");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	vertical-align: -.125em;
	font-size: inherit;
	line-height: 1;
	color: inherit;
	fill: currentColor;
	flex-shrink: 0;
}