/* =========================================================
   LEARNJET ACADEMY PLATFORM
   MAIN STYLESHEET
   Responsive / RTL / LTR / Dashboard / Login
========================================================= */


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;

    background: #f5f8fc;
    color: #102243;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.ltr {
    direction: ltr;
    text-align: left;
}

body.rtl {
    direction: rtl;
    text-align: right;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --lj-navy: #06183f;
    --lj-navy-2: #0b2b68;

    --lj-blue: #087ff5;
    --lj-blue-2: #18b7ff;

    --lj-cyan: #16d7f5;

    --lj-gold: #ffb900;

    --lj-white: #ffffff;

    --lj-bg: #f5f8fc;
    --lj-bg-soft: #f8fbff;

    --lj-border: #e3e9f1;
    --lj-border-soft: #edf1f6;

    --lj-text: #102243;
    --lj-text-soft: #71809a;
    --lj-text-muted: #98a6b9;

    --lj-success: #159a68;
    --lj-warning: #d99500;
    --lj-danger: #d9535f;

    --lj-radius-sm: 9px;
    --lj-radius-md: 12px;
    --lj-radius-lg: 16px;
    --lj-radius-xl: 20px;

    --lj-shadow-sm:
        0 5px 18px rgba(7, 26, 73, .045);

    --lj-shadow:
        0 12px 35px rgba(7, 26, 73, .065);

    --lj-shadow-lg:
        0 20px 60px rgba(7, 26, 73, .10);

    --sidebar-width: 280px;
    --topbar-height: 78px;
}


/* =========================================================
   APP SHELL
========================================================= */

.app-shell {
    min-height: 100vh;
    display: flex;
    background: var(--lj-bg);
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    width: var(--sidebar-width);
    height: 100vh;
    min-height: 100vh;

    z-index: 1000;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            #06183f 0%,
            #08265d 55%,
            #06183f 100%
        );

    border-right:
        1px solid rgba(255,255,255,.07);

    box-shadow:
        8px 0 35px rgba(3,18,52,.08);

    transition:
        transform .28s ease;
}

html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;

    border-right: 0;

    border-left:
        1px solid rgba(255,255,255,.07);

    box-shadow:
        -8px 0 35px rgba(3,18,52,.08);
}


/* =========================================================
   SIDEBAR BRAND
========================================================= */

.sidebar-brand {
    flex: 0 0 auto;

    min-height: 125px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px 18px;

    border-bottom:
        1px solid rgba(255,255,255,.09);
}

.sidebar-brand a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    text-decoration: none;
}

.sidebar-brand img {
    width: 205px;
    max-width: 90%;
    height: auto;
    object-fit: contain;
}


/* =========================================================
   SIDEBAR NAVIGATION
========================================================= */

.sidebar-nav {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 16px 12px 12px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255,255,255,.22)
        transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 5px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background:
        rgba(255,255,255,.20);

    border-radius: 20px;
}


/* =========================================================
   SIDEBAR LINKS
========================================================= */

.sidebar-nav a,
.sidebar-bottom a {
    position: relative;

    display: flex;
    align-items: center;

    gap: 13px;

    min-height: 47px;

    margin-bottom: 5px;

    padding: 0 14px;

    border-radius: 12px;

    color:
        rgba(255,255,255,.78);

    font-size: 12px;
    font-weight: 750;

    text-decoration: none;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.sidebar-nav a:hover,
.sidebar-bottom a:hover {
    color: #ffffff;

    background:
        rgba(255,255,255,.075);

    transform:
        translateX(2px);
}

html[dir="rtl"] .sidebar-nav a:hover,
html[dir="rtl"] .sidebar-bottom a:hover {
    transform:
        translateX(-2px);
}

.sidebar-nav a.active,
.sidebar-bottom a.active {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(8,127,245,.32),
            rgba(24,183,255,.08)
        );

    box-shadow:
        inset 3px 0 0 var(--lj-cyan);
}

html[dir="rtl"] .sidebar-nav a.active,
html[dir="rtl"] .sidebar-bottom a.active {
    box-shadow:
        inset -3px 0 0 var(--lj-cyan);
}


/* =========================================================
   SIDEBAR ICON
========================================================= */

.sidebar-icon {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    display: grid;
    place-items: center;

    color:
        rgba(255,255,255,.78);

    font-size: 14px;

    text-align: center;
}

.sidebar-nav a.active .sidebar-icon,
.sidebar-bottom a.active .sidebar-icon {
    color:
        var(--lj-cyan);
}


/* =========================================================
   SIDEBAR BOTTOM
========================================================= */

.sidebar-bottom {
    flex: 0 0 auto;

    padding:
        10px 12px 16px;

    background:
        rgba(4,20,52,.96);

    border-top:
        1px solid rgba(255,255,255,.10);
}

.sidebar-bottom a {
    margin-bottom: 5px;
}

.sidebar-bottom a:last-child {
    margin-bottom: 0;
}

.sidebar-bottom .sidebar-logout {
    color:
        #ff9ca5;
}

.sidebar-bottom .sidebar-logout:hover {
    color:
        #ffffff;

    background:
        rgba(217,83,95,.16);
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.main-content {
    width:
        calc(100% - var(--sidebar-width));

    min-height: 100vh;

    margin-left:
        var(--sidebar-width);

    background:
        var(--lj-bg);
}

html[dir="rtl"] .main-content {
    margin-left: 0;

    margin-right:
        var(--sidebar-width);
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {
    position: sticky;

    top: 0;

    z-index: 900;

    min-height:
        var(--topbar-height);

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        0 24px;

    background:
        rgba(255,255,255,.96);

    border-bottom:
        1px solid var(--lj-border);

    backdrop-filter:
        blur(14px);
}

.topbar-title {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 170px;
}

.topbar-section-label {
    color:
        var(--lj-blue);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .15em;
}

.topbar-title strong {
    color:
        var(--lj-navy);

    font-size: 13px;
    font-weight: 850;
}

.topbar-spacer {
    flex: 1;
}


/* =========================================================
   CLOCK
========================================================= */

.header-clock {
    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        7px 10px;

    min-width: 110px;

    border:
        1px solid var(--lj-border);

    border-radius: 11px;

    background:
        #ffffff;
}

.clock-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color:
        var(--lj-blue);

    background:
        #edf6ff;
}

.clock-icon svg {
    width: 16px;
    height: 16px;
}

.header-clock span,
.header-local-time span {
    display: block;

    color:
        var(--lj-text-muted);

    font-size: 7px;
    font-weight: 850;
}

.header-clock strong,
.header-local-time strong {
    display: block;

    margin-top: 2px;

    color:
        var(--lj-navy);

    font-size: 11px;

    font-variant-numeric:
        tabular-nums;
}

.header-local-time {
    min-width: 75px;
}


/* =========================================================
   ICON BUTTON
========================================================= */

.icon-btn {
    position: relative;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid var(--lj-border);

    border-radius: 11px;

    background:
        #ffffff;

    color:
        var(--lj-navy);

    transition:
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.icon-btn:hover {
    color:
        var(--lj-blue);

    border-color:
        #c5ddf7;

    box-shadow:
        0 7px 20px rgba(8,127,245,.08);

    transform:
        translateY(-1px);
}

.icon-btn svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {
    display: none;

    font-size: 21px;

    line-height: 1;
}


/* =========================================================
   NOTIFICATION
========================================================= */

.notification-button {
    padding: 0;
}

.notification-dot {
    position: absolute;

    top: 6px;
    right: 6px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--lj-gold);

    border:
        1px solid #ffffff;
}


/* =========================================================
   LANGUAGE
========================================================= */

.language-switcher {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 40px;

    padding:
        0 11px;

    border:
        1px solid var(--lj-border);

    border-radius: 10px;

    background:
        #ffffff;

    white-space: nowrap;
}

.language-switcher a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 25px;

    color:
        #7b8ba0;

    font-size: 11px;
    font-weight: 850;

    text-decoration: none;

    cursor: pointer;

    transition:
        color .18s ease,
        transform .18s ease;
}

.language-switcher a:hover {
    color:
        var(--lj-blue);

    transform:
        translateY(-1px);
}

.language-switcher a.active {
    color:
        var(--lj-navy);
}

.language-switcher > span {
    color:
        #c5ced9;

    font-size: 10px;

    user-select: none;
}

html[dir="rtl"] .language-switcher {
    direction: ltr;
}

.language-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    min-height: 40px;

    padding:
        0 11px;

    border:
        1px solid var(--lj-border);

    border-radius: 10px;

    background:
        #ffffff;

    color:
        var(--lj-text-soft);

    font-size: 11px;
    font-weight: 850;
}

.language-btn:hover {
    border-color:
        #c5ddf7;

    color:
        var(--lj-blue);
}

.language-current {
    color:
        var(--lj-navy);
}

.language-divider {
    color:
        #c5ced9;
}


/* =========================================================
   USER MENU
========================================================= */

.user-menu {
    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 175px;
}

.avatar {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #087ff5,
            #15c5e9
        );

    font-size: 10px;
    font-weight: 900;
}

.user-meta {
    min-width: 0;
}

.user-meta strong,
.user-meta small {
    display: block;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.user-meta strong {
    color:
        var(--lj-navy);

    font-size: 10px;
    font-weight: 850;
}

.user-meta small {
    margin-top: 3px;

    color:
        var(--lj-text-muted);

    font-size: 8px;
}

.user-arrow {
    margin-left: auto;

    color:
        #91a0b4;

    font-size: 15px;
}

html[dir="rtl"] .user-arrow {
    margin-left: 0;
    margin-right: auto;
}


/* =========================================================
   CONTENT
========================================================= */

.content {
    padding:
        28px 30px 40px;
}


/* =========================================================
   PAGE HEADING
========================================================= */

.page-heading,
.dashboard-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

.eyebrow {
    color:
        var(--lj-blue);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .15em;
}

.page-heading h1,
.dashboard-heading h1 {
    margin:
        7px 0 6px;

    color:
        var(--lj-navy);

    font-size:
        clamp(28px, 3vw, 38px);

    line-height:
        1.1;

    letter-spacing:
        -.045em;
}

.page-heading p,
.dashboard-heading p {
    margin: 0;

    color:
        var(--lj-text-soft);

    font-size: 12px;
}


/* =========================================================
   DASHBOARD HEADING
========================================================= */

.heading-copy h1 span:not(.wave) {
    color:
        var(--lj-blue);
}

.wave {
    display: inline-block;

    transform-origin:
        70% 70%;

    animation:
        wave-hand 2.5s ease-in-out infinite;
}

@keyframes wave-hand {

    0%,
    60%,
    100% {
        transform: rotate(0deg);
    }

    65% {
        transform: rotate(12deg);
    }

    70% {
        transform: rotate(-8deg);
    }

    75% {
        transform: rotate(12deg);
    }
}


/* =========================================================
   HEADING SIDE
========================================================= */

.heading-side {
    display: flex;

    align-items: center;

    gap: 9px;
}

.date-card,
.timezone-card {
    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        9px 11px;

    border:
        1px solid var(--lj-border);

    border-radius: 12px;

    background:
        #ffffff;
}

.date-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color:
        var(--lj-blue);

    background:
        #edf6ff;
}

.date-icon svg {
    width: 16px;
    height: 16px;
}

.date-card span,
.timezone-card small {
    display: block;

    color:
        var(--lj-text-muted);

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .08em;
}

.date-card strong,
.timezone-card strong {
    display: block;

    margin-top: 3px;

    color:
        var(--lj-navy);

    font-size: 9px;
}

.timezone-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        #19c58b;

    box-shadow:
        0 0 0 4px rgba(25,197,139,.10);
}


/* =========================================================
   STATS
========================================================= */

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.stat-card {
    position: relative;

    overflow: hidden;

    min-width: 0;

    padding:
        17px;

    border:
        1px solid var(--lj-border);

    border-radius: 17px;

    background:
        #ffffff;

    box-shadow:
        var(--lj-shadow-sm);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.stat-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        var(--lj-shadow);
}

.stat-card::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    top: -48px;
    right: -48px;

    border-radius: 50%;

    background:
        rgba(8,127,245,.05);
}

html[dir="rtl"] .stat-card::after {
    right: auto;
    left: -48px;
}

.stat-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;
}

.stat-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 11px;
}

.stat-icon svg {
    width: 19px;
    height: 19px;
}

.stat-blue .stat-icon {
    color: #087ff5;
    background: #edf6ff;
}

.stat-cyan .stat-icon {
    color: #0caed8;
    background: #e9faff;
}

.stat-purple .stat-icon {
    color: #7957df;
    background: #f2efff;
}

.stat-gold .stat-icon {
    color: #d99500;
    background: #fff7df;
}

.stat-menu {
    color:
        #b0bac8;

    font-size: 10px;

    letter-spacing: 1px;
}

.stat-label {
    margin-top: 14px;

    color:
        var(--lj-text-soft);

    font-size: 10px;
    font-weight: 700;
}

.stat-value {
    margin-top: 3px;

    color:
        var(--lj-navy);

    font-size: 28px;
    font-weight: 900;

    line-height: 1;

    letter-spacing:
        -.04em;
}

.stat-change {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 10px;

    color:
        var(--lj-text-muted);

    font-size: 8px;
}

.change-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #c5cfdb;
}


/* =========================================================
   DASHBOARD GRID
========================================================= */

.dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(320px, .9fr);

    gap: 15px;

    margin-top: 15px;
}


/* =========================================================
   PANEL
========================================================= */

.panel {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid var(--lj-border);

    border-radius: 18px;

    background:
        #ffffff;

    box-shadow:
        var(--lj-shadow-sm);
}

.activity-panel {
    min-height: 350px;
}

.panel-header {
    padding:
        19px 20px 0;
}

.panel-eyebrow {
    margin-bottom: 5px;

    color:
        var(--lj-blue);

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .14em;
}

.panel-header h2 {
    margin:
        0 0 4px;

    color:
        var(--lj-navy);

    font-size: 16px;
}

.panel-header p {
    margin: 0;

    color:
        var(--lj-text-muted);

    font-size: 9px;
}

.panel-action {
    float: right;

    margin-top:
        -31px;

    padding:
        7px 10px;

    border:
        1px solid var(--lj-border);

    border-radius: 8px;

    color:
        var(--lj-text-soft);

    background:
        #ffffff;

    font-size: 8px;
}


/* =========================================================
   EMPTY ACTIVITY
========================================================= */

.empty-activity {
    min-height: 275px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding:
        20px 25px;

    text-align: center;
}

.empty-visual {
    position: relative;

    width: 100px;
    height: 100px;

    display: grid;
    place-items: center;

    margin-bottom: 13px;
}

.empty-ring {
    position: absolute;

    border:
        1px solid #dceeff;

    border-radius: 50%;
}

.ring-one {
    width: 100%;
    height: 100%;

    animation:
        ring-pulse 3s ease-in-out infinite;
}

.ring-two {
    width: 72%;
    height: 72%;

    border-color:
        #cce9ff;

    animation:
        ring-pulse 3s .5s ease-in-out infinite;
}

@keyframes ring-pulse {

    0%,
    100% {
        transform:
            scale(.96);

        opacity:
            .55;
    }

    50% {
        transform:
            scale(1.03);

        opacity:
            1;
    }
}

.empty-center {
    position: relative;

    z-index: 2;

    width: 47px;
    height: 47px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    color:
        var(--lj-blue);

    background:
        linear-gradient(
            135deg,
            #edf7ff,
            #e4f4ff
        );
}

.empty-center svg {
    width: 21px;
    height: 21px;
}

.empty-activity h3 {
    margin:
        0 0 6px;

    color:
        var(--lj-navy);

    font-size: 14px;
}

.empty-activity p {
    max-width: 410px;

    margin: 0;

    color:
        var(--lj-text-muted);

    font-size: 9px;

    line-height:
        1.7;
}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.quick-panel {
    padding-bottom: 12px;
}

.quick-actions {
    display: grid;

    gap: 7px;

    padding:
        17px 12px 12px;
}

.quick-action {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

    padding:
        10px;

    border:
        1px solid #edf0f5;

    border-radius: 11px;

    background:
        #fcfdff;

    text-decoration: none;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.quick-action:hover {
    border-color:
        #dce9f7;

    background:
        #f7fbff;

    transform:
        translateX(2px);
}

html[dir="rtl"] .quick-action:hover {
    transform:
        translateX(-2px);
}

.quick-action-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;
    place-items: center;

    border-radius: 10px;
}

.quick-action-icon svg {
    width: 16px;
    height: 16px;
}

.quick-action-icon.blue {
    color: #087ff5;
    background: #edf6ff;
}

.quick-action-icon.cyan {
    color: #0caed8;
    background: #e9faff;
}

.quick-action-icon.gold {
    color: #d99500;
    background: #fff7df;
}

.quick-action-icon.purple {
    color: #7957df;
    background: #f2efff;
}

.quick-action > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.quick-action strong {
    display: block;

    color:
        var(--lj-navy);

    font-size: 10px;
}

.quick-action small {
    display: block;

    overflow: hidden;

    margin-top: 3px;

    color:
        var(--lj-text-muted);

    font-size: 8px;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.quick-arrow {
    color:
        #aab5c4;

    font-size: 15px;

    transition:
        transform .18s ease,
        color .18s ease;
}

.quick-action:hover .quick-arrow {
    color:
        var(--lj-blue);

    transform:
        translateX(3px);
}

html[dir="rtl"] .quick-action:hover .quick-arrow {
    transform:
        translateX(-3px);
}


/* =========================================================
   LOWER GRID
========================================================= */

.lower-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-top: 15px;
}

.mini-panel {
    min-width: 0;

    padding:
        17px;

    border:
        1px solid var(--lj-border);

    border-radius: 17px;

    background:
        #ffffff;

    box-shadow:
        var(--lj-shadow-sm);
}

.mini-panel-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;
}

.mini-eyebrow {
    display: block;

    margin-bottom: 4px;

    color:
        var(--lj-blue);

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .14em;
}

.mini-panel h3 {
    margin: 0;

    color:
        var(--lj-navy);

    font-size: 13px;
}

.system-live {
    padding:
        5px 8px;

    border-radius:
        999px;

    color:
        var(--lj-success);

    background:
        #eafaf3;

    font-size: 7px;
    font-weight: 900;
}

.system-status-row {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 16px;
}

.system-status-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background:
        #eafaf3;
}

.system-status-icon span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #16b67d;

    box-shadow:
        0 0 0 5px rgba(22,182,125,.10);
}

.system-status-row strong,
.system-status-row small {
    display: block;
}

.system-status-row strong {
    color:
        var(--lj-navy);

    font-size: 9px;
}

.system-status-row small {
    margin-top: 3px;

    color:
        var(--lj-text-muted);

    font-size: 7px;
}

.system-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 15px;

    padding-top: 11px;

    border-top:
        1px solid var(--lj-border-soft);

    color:
        var(--lj-text-muted);

    font-size: 7px;
}

.system-footer strong {
    color:
        var(--lj-success);

    font-size: 7px;
}

.mini-panel-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color:
        var(--lj-blue);

    background:
        #edf6ff;
}

.mini-panel-icon.billing {
    color:
        #d99500;

    background:
        #fff7df;
}

.mini-panel-icon svg {
    width: 16px;
    height: 16px;
}

.mini-value {
    margin-top: 15px;

    color:
        var(--lj-navy);

    font-size: 26px;
    font-weight: 900;

    line-height: 1;
}

.mini-description {
    display: block;

    max-width: 240px;

    margin-top: 8px;

    color:
        var(--lj-text-muted);

    font-size: 7px;

    line-height:
        1.6;
}


/* =========================================================
   UTC BANNER
========================================================= */

.utc-banner {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 15px;

    padding:
        12px 15px;

    border:
        1px solid #dcebf9;

    border-radius: 14px;

    background:
        linear-gradient(
            100deg,
            #f5fbff,
            #ffffff
        );
}

.utc-banner-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color:
        var(--lj-blue);

    background:
        #eaf5ff;
}

.utc-banner-icon svg {
    width: 18px;
    height: 18px;
}

.utc-banner-content {
    flex: 1;
    min-width: 0;
}

.utc-banner-content strong,
.utc-banner-content span {
    display: block;
}

.utc-banner-content strong {
    color:
        var(--lj-navy);

    font-size: 9px;
}

.utc-banner-content span {
    margin-top: 3px;

    color:
        #8795a8;

    font-size: 7px;

    line-height:
        1.5;
}

.utc-banner-value {
    min-width: 80px;

    padding-left: 13px;

    border-left:
        1px solid #e5edf5;

    text-align: right;
}

html[dir="rtl"] .utc-banner-value {
    padding-left: 0;
    padding-right: 13px;

    border-left: 0;

    border-right:
        1px solid #e5edf5;

    text-align: left;
}

.utc-banner-value span,
.utc-banner-value small {
    color:
        #a0adbd;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: .07em;
}

.utc-banner-value span {
    display: block;
}

.utc-banner-value strong {
    display: inline-block;

    margin-top: 2px;

    color:
        var(--lj-blue);

    font-size: 14px;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   FORMS
========================================================= */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    color:
        var(--lj-navy);

    font-size: 10px;
    font-weight: 850;
}

.input-box {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 46px;

    border:
        1px solid var(--lj-border);

    border-radius: 11px;

    background:
        #ffffff;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.input-box:focus-within {
    border-color:
        #83bdf8;

    box-shadow:
        0 0 0 3px rgba(8,127,245,.08);
}

.input-box input,
.input-box select,
.input-box textarea {
    width: 100%;

    border: 0;

    outline: 0;

    background:
        transparent;

    color:
        var(--lj-text);

    font-size: 12px;
}

.input-box input {
    min-height: 44px;

    padding:
        0 13px;
}

.input-box input::placeholder {
    color:
        #a7b4c5;
}

.field-icon {
    width: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    color:
        #8da0b8;
}

.field-icon svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   LOGIN PAGE
   DESKTOP
========================================================= */

.login-page {

    position: relative;

    min-height: 100vh;

    overflow-x: hidden;

    overflow-y: auto;

    background:
        #06183f;
}


/* =========================================================
   ANIMATED LOGIN SCENE
========================================================= */

.login-scene {

    position: fixed;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            #06183f 0%,
            #073b8f 45%,
            #087ff5 100%
        );
}


/* Main animated gradient */

.scene-gradient {

    position: absolute;

    inset: -15%;

    background:

        radial-gradient(
            circle at 12% 20%,
            rgba(22,215,245,.38),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 78%,
            rgba(8,127,245,.45),
            transparent 35%
        ),

        radial-gradient(
            circle at 55% 5%,
            rgba(255,185,0,.10),
            transparent 25%
        ),

        linear-gradient(
            125deg,
            #06183f 0%,
            #092c68 42%,
            #087ff5 100%
        );

    animation:
        gradientMove 14s ease-in-out infinite alternate;
}


/* Animated grid */

.scene-grid {

    position: absolute;

    inset: -20%;

    opacity: .15;

    background-image:

        linear-gradient(
            rgba(255,255,255,.07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.07) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    transform:
        perspective(700px)
        rotateX(55deg)
        translateY(18%);

    animation:
        gridMove 18s linear infinite;
}


/* =========================================================
   LOGIN GLOWS
========================================================= */

.scene-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(5px);

    opacity: .72;

    animation:
        loginFloat 9s ease-in-out infinite;
}

.glow-one {

    width: 430px;
    height: 430px;

    left: -180px;
    top: -140px;

    background:
        radial-gradient(
            circle,
            rgba(16,205,255,.30),
            transparent 68%
        );
}

.glow-two {

    width: 500px;
    height: 500px;

    right: -210px;
    bottom: -190px;

    background:
        radial-gradient(
            circle,
            rgba(8,127,245,.34),
            transparent 68%
        );

    animation-delay:
        -3s;
}

.glow-three {

    width: 260px;
    height: 260px;

    left: 48%;
    top: 5%;

    background:
        radial-gradient(
            circle,
            rgba(255,185,0,.11),
            transparent 68%
        );

    animation-delay:
        -6s;
}


/* =========================================================
   LOGIN PARTICLES
========================================================= */

.particles {

    position: absolute;

    inset: 0;

}

.particles span {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.70);

    box-shadow:
        0 0 10px rgba(255,255,255,.30);

    animation:
        particleFloat
        7s
        ease-in-out
        infinite;
}

.particles span:nth-child(1) {
    left: 9%;
    top: 21%;
}

.particles span:nth-child(2) {
    left: 18%;
    top: 72%;
    animation-delay: -1s;
}

.particles span:nth-child(3) {
    left: 31%;
    top: 17%;
    animation-delay: -2s;
}

.particles span:nth-child(4) {
    left: 44%;
    top: 63%;
    animation-delay: -4s;
}

.particles span:nth-child(5) {
    left: 53%;
    top: 29%;
    animation-delay: -3s;
}

.particles span:nth-child(6) {
    left: 65%;
    top: 77%;
    animation-delay: -1.5s;
}

.particles span:nth-child(7) {
    left: 72%;
    top: 18%;
    animation-delay: -5s;
}

.particles span:nth-child(8) {
    left: 82%;
    top: 57%;
    animation-delay: -2.5s;
}

.particles span:nth-child(9) {
    left: 91%;
    top: 32%;
    animation-delay: -3.5s;
}

.particles span:nth-child(10) {
    left: 39%;
    top: 88%;
    animation-delay: -5.5s;
}

.particles span:nth-child(11) {
    left: 58%;
    top: 90%;
    animation-delay: -4.5s;
}

.particles span:nth-child(12) {
    left: 14%;
    top: 46%;
    animation-delay: -6s;
}


/* =========================================================
   LOGIN ORBITS
========================================================= */

.orbit {

    position: absolute;

    border:
        1px solid rgba(30,195,255,.18);

    border-radius: 50%;

    animation:
        orbitRotate
        18s
        linear
        infinite;
}

.orbit-one {

    width: 520px;
    height: 520px;

    left: -260px;
    bottom: -250px;
}

.orbit-two {

    width: 430px;
    height: 430px;

    right: -210px;
    top: -210px;

    animation-duration:
        23s;
}

.orbit-three {

    width: 230px;
    height: 230px;

    left: 47%;
    top: -110px;

    animation-duration:
        15s;
}


/* =========================================================
   LOGIN ANIMATIONS
========================================================= */

@keyframes gradientMove {

    0% {
        transform:
            scale(1)
            translate3d(0,0,0);
    }

    50% {
        transform:
            scale(1.08)
            translate3d(-2%,1%,0);
    }

    100% {
        transform:
            scale(1.12)
            translate3d(2%,-2%,0);
    }
}

@keyframes gridMove {

    0% {
        transform:
            perspective(700px)
            rotateX(55deg)
            translate3d(0,18%,0);
    }

    50% {
        transform:
            perspective(700px)
            rotateX(55deg)
            translate3d(-2%,21%,0);
    }

    100% {
        transform:
            perspective(700px)
            rotateX(55deg)
            translate3d(2%,24%,0);
    }
}

@keyframes loginFloat {

    0%,
    100% {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    50% {
        transform:
            translate3d(35px,-25px,0)
            scale(1.08);
    }
}

@keyframes particleFloat {

    0%,
    100% {
        transform:
            translate3d(0,0,0)
            scale(.75);

        opacity:
            .25;
    }

    50% {
        transform:
            translate3d(0,-24px,0)
            scale(1.25);

        opacity:
            1;
    }
}

@keyframes orbitRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   LOGIN LAYOUT
========================================================= */

.login-layout {

    position: relative;

    z-index: 2;

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(420px, .92fr);
}


/* =========================================================
   LOGIN BRAND
========================================================= */

.login-brand {

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding:
        34px
        clamp(45px, 7vw, 90px);

    background:
        transparent;
}

.brand-inner {

    width: 100%;

    max-width: 760px;

    margin:
        0 auto;
}

.brand-logo {

    margin-bottom:
        65px;
}

.brand-logo img {

    width: 330px;

    max-width: 75%;

    height: auto;

    object-fit: contain;
}

.brand-kicker {

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        #48d5ff;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .15em;
}

.kicker-line {

    width: 38px;
    height: 3px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--lj-gold),
            var(--lj-cyan)
        );
}

.brand-copy h2 {

    max-width: 700px;

    margin:
        25px 0 18px;

    color:
        #ffffff;

    font-size:
        clamp(50px, 6vw, 80px);

    line-height:
        .98;

    letter-spacing:
        -.06em;
}

.brand-copy h2 span {
    color:
        var(--lj-cyan);
}

.brand-copy p {

    max-width: 640px;

    margin: 0;

    color:
        rgba(255,255,255,.70);

    font-size: 16px;

    line-height:
        1.75;
}


/* =========================================================
   PLATFORM FLOW
========================================================= */

.platform-flow {

    display: flex;

    align-items: center;

    margin-top:
        55px;

    max-width: 650px;
}

.flow-item {

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        rgba(255,255,255,.50);

    font-size: 9px;

    font-weight: 800;

    white-space: nowrap;
}

.flow-item.active {
    color:
        #ffffff;
}

.flow-icon {

    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius: 13px;

    background:
        rgba(255,255,255,.06);
}

.flow-item.active .flow-icon {

    color:
        var(--lj-cyan);

    border-color:
        rgba(22,215,245,.35);

    background:
        rgba(22,215,245,.09);
}

.flow-icon svg {
    width: 18px;
    height: 18px;
}

.flow-connector {

    flex: 1;

    min-width: 10px;

    height: 1px;

    margin:
        0 7px;

    background:
        rgba(255,255,255,.12);
}


/* =========================================================
   LOGIN BRAND BOTTOM
========================================================= */

.brand-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 650px;

    margin-top:
        45px;

    color:
        rgba(255,255,255,.45);

    font-size: 9px;
}

.bottom-status {

    display: flex;

    align-items: center;

    gap: 7px;
}

.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #25d69b;

    box-shadow:
        0 0 0 5px rgba(37,214,155,.08);

    animation:
        statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {

    0%,
    100% {
        opacity: .6;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

.bottom-text span {

    color:
        var(--lj-gold);

    margin:
        0 5px;
}


/* =========================================================
   LOGIN AREA
   DESKTOP WHITE PANEL
========================================================= */

.login-area {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        45px 38px;

    background:
        rgba(255,255,255,.975);

    position: relative;

    z-index: 3;
}

.login-card {

    width: 100%;

    max-width: 540px;

    position: relative;

    z-index: 4;
}

.mobile-brand {
    display: none;
}


/* =========================================================
   LOGIN HEADER
========================================================= */

.login-header {

    display: flex;

    align-items: flex-start;

    gap: 17px;

    margin-bottom:
        34px;
}

.login-icon {

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: grid;

    place-items: center;

    border:
        1px solid #dcecff;

    border-radius: 15px;

    color:
        var(--lj-blue);

    background:
        linear-gradient(
            145deg,
            #f1f8ff,
            #e8f4ff
        );
}

.login-icon svg {
    width: 23px;
    height: 23px;
}

.login-kicker {

    display: block;

    margin-bottom: 6px;

    color:
        var(--lj-blue);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .13em;
}

.login-header h1 {

    margin: 0;

    color:
        var(--lj-navy);

    font-size:
        clamp(34px, 4vw, 46px);

    line-height:
        1;

    letter-spacing:
        -.055em;
}

.login-header p {

    margin:
        9px 0 0;

    color:
        var(--lj-text-soft);

    font-size: 12px;

    line-height:
        1.6;
}


/* =========================================================
   LOGIN ERROR
========================================================= */

.login-error {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom:
        18px;

    padding:
        12px 13px;

    border:
        1px solid #ffd7da;

    border-radius:
        11px;

    background:
        #fff5f6;

    color:
        #a33a43;
}

.error-symbol {

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: grid;

    place-items: center;

    border-radius:
        9px;

    background:
        #ffe3e6;

    font-weight:
        900;
}

.login-error strong,
.login-error span {
    display: block;
}

.login-error strong {
    font-size:
        9px;
}

.login-error span {

    margin-top:
        3px;

    font-size:
        8px;
}


/* =========================================================
   LOGIN FORM
========================================================= */

.login-form .form-group {

    margin-bottom:
        22px;
}

.label-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom:
        7px;
}

.label-row label {
    margin: 0;
}

.forgot-password {

    color:
        var(--lj-blue);

    font-size:
        9px;

    font-weight:
        850;

    text-decoration:
        none;
}

.forgot-password:hover {
    text-decoration:
        underline;
}


/* =========================================================
   LOGIN INPUT
========================================================= */

.login-form .input-box {

    min-height:
        58px;

    border-radius:
        13px;

    background:
        #fbfcfe;
}

.login-form .input-box input {

    min-height:
        56px;

    padding:
        0 14px 0 0;

    font-size:
        12px;
}

html[dir="rtl"] .login-form .input-box input {

    padding:
        0 0 0 14px;
}

.login-form .field-icon {

    width:
        50px;

    flex-basis:
        50px;
}


/* =========================================================
   PASSWORD
========================================================= */

.show-password {

    width: 45px;
    height: 45px;

    flex:
        0 0 45px;

    display: grid;

    place-items: center;

    margin-right:
        5px;

    border: 0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #7d91ac;
}

.show-password:hover {

    color:
        var(--lj-blue);

    background:
        #edf6ff;
}

.show-password svg {

    width:
        19px;

    height:
        19px;
}

html[dir="rtl"] .show-password {

    margin-right:
        0;

    margin-left:
        5px;
}


/* =========================================================
   REMEMBER
========================================================= */

.form-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin:
        -3px 0 22px;
}

.remember-option {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--lj-text-soft);

    font-size:
        9px;

    cursor:
        pointer;

    user-select:
        none;
}

.remember-option input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}

.checkmark {

    width:
        20px;

    height:
        20px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid #ccd8e6;

    border-radius:
        6px;

    background:
        #ffffff;
}

.remember-option input:checked + .checkmark {

    border-color:
        var(--lj-blue);

    background:
        var(--lj-blue);
}

.remember-option input:checked + .checkmark::after {

    content:
        "✓";

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        900;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.submit-button {

    position:
        relative;

    width:
        100%;

    min-height:
        58px;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        13px;

    color:
        #ffffff;

    background:
        linear-gradient(
            110deg,
            #061b52,
            #087ff5,
            #1498ff
        );

    background-size:
        200% 100%;

    box-shadow:
        0 15px 32px rgba(8,127,245,.20);

    font-size:
        11px;

    font-weight:
        900;

    overflow:
        hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;

    animation:
        buttonGradient 5s ease infinite;
}

@keyframes buttonGradient {

    0% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }

    100% {
        background-position:
            0% 50%;
    }
}

.submit-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 20px 42px rgba(8,127,245,.27);
}

.submit-button:disabled {

    cursor:
        wait;

    opacity:
        .82;
}

.submit-content {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;
}

.submit-arrow {
    font-size:
        18px;
}

.submit-loading {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;
}

.submit-button.is-loading .submit-content {
    display:
        none;
}

.submit-button.is-loading .submit-loading {
    display:
        flex;
}

.spinner {

    width:
        15px;

    height:
        15px;

    border:
        2px solid rgba(255,255,255,.35);

    border-top-color:
        #ffffff;

    border-radius:
        50%;

    animation:
        spinnerRotate .7s linear infinite;
}

@keyframes spinnerRotate {

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   SECURITY
========================================================= */

.security-note {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        23px;

    padding:
        12px;

    border:
        1px solid #e5edf5;

    border-radius:
        12px;

    background:
        #fbfdff;
}

.security-icon {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    color:
        #13a56f;

    background:
        #e9faf3;
}

.security-icon svg {

    width:
        17px;

    height:
        17px;
}

.security-note strong,
.security-note span {
    display:
        block;
}

.security-note strong {

    color:
        var(--lj-text);

    font-size:
        9px;
}

.security-note span {

    margin-top:
        2px;

    color:
        var(--lj-text-muted);

    font-size:
        8px;
}


/* =========================================================
   LOGIN FOOTER
========================================================= */

.login-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        24px;

    color:
        #9aa7b8;

    font-size:
        8px;
}

.footer-separator {

    color:
        var(--lj-gold);
}


/* =========================================================
   RTL
========================================================= */

html[dir="rtl"] {
    direction:
        rtl;
}

html[dir="ltr"] {
    direction:
        ltr;
}

html[dir="rtl"] .login-layout {
    direction:
        rtl;
}

html[dir="rtl"] .brand-copy,
html[dir="rtl"] .brand-bottom {
    text-align:
        right;
}

html[dir="rtl"] .brand-kicker {

    flex-direction:
        row-reverse;

    justify-content:
        flex-end;
}

html[dir="rtl"] .brand-logo {

    display:
        flex;

    justify-content:
        flex-end;
}


/* =========================================================
   MOBILE OVERLAY
========================================================= */

.sidebar-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        999;

    display:
        none;

    background:
        rgba(3,12,32,.50);

    backdrop-filter:
        blur(2px);
}

.sidebar-overlay.active {
    display:
        block;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    :root {
        --sidebar-width:
            250px;
    }

    .content {
        padding:
            24px 22px 35px;
    }

    .topbar {
        padding:
            0 18px;
    }

    .user-menu {
        min-width:
            auto;
    }

    .user-meta {
        display:
            none;
    }

    .stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(300px, .9fr);
    }

    .login-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(400px, .8fr);
    }

    .login-brand {
        padding:
            35px 50px;
    }

    .brand-copy h2 {
        font-size:
            clamp(46px, 6vw, 70px);
    }
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 900px) {

    html,
    body {
        min-height: 100%;
    }

    body.login-page {

        min-height: 100dvh;

        overflow-x: hidden;

        overflow-y: auto;

        background:
            linear-gradient(
                135deg,
                #06183f 0%,
                #083b91 48%,
                #087ff5 100%
            );
    }


    /* -----------------------------------------------------
       SIDEBAR
    ----------------------------------------------------- */

    .mobile-menu {
        display:
            grid;
    }

    .sidebar {

        transform:
            translateX(-105%);

        box-shadow:
            15px 0 45px rgba(0,0,0,.20);
    }

    html[dir="rtl"] .sidebar {
        transform:
            translateX(105%);
    }

    .sidebar.open {
        transform:
            translateX(0);
    }

    html[dir="rtl"] .sidebar.open {
        transform:
            translateX(0);
    }

    .main-content {

        width:
            100%;

        margin-left:
            0;

        margin-right:
            0;
    }

    .topbar {

        min-height:
            72px;

        padding:
            0 15px;
    }

    .topbar-title {
        display:
            none;
    }

    .header-clock {
        display:
            none;
    }

    .header-local-time {
        display:
            none;
    }

    .dashboard-heading {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .heading-side {
        width:
            100%;
    }

    .lower-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       LOGIN MOBILE
    ----------------------------------------------------- */

    .login-page {

        background:
            linear-gradient(
                135deg,
                #06183f 0%,
                #073b8f 45%,
                #087ff5 100%
            );
    }

    .login-scene {

        position:
            fixed;

        inset:
            0;

        display:
            block;

        z-index:
            0;

        opacity:
            1;
    }

    .login-layout {

        position:
            relative;

        z-index:
            2;

        display:
            block;

        min-height:
            100dvh;
    }

    .login-brand {
        display:
            none;
    }


    /* -----------------------------------------------------
       LOGIN AREA
       IMPORTANT:
       transparent so animated background shows
    ----------------------------------------------------- */

    .login-area {

        position:
            relative;

        z-index:
            2;

        display:
            flex;

        align-items:
            flex-start;

        justify-content:
            center;

        width:
            100%;

        min-height:
            100dvh;

        padding:
            34px 15px 45px;

        background:
            transparent;
    }

    .login-card {

        width:
            100%;

        max-width:
            540px;

        padding:
            0;

        background:
            transparent;
    }


    /* -----------------------------------------------------
       MOBILE LOGO
    ----------------------------------------------------- */

    .mobile-brand {

        position:
            relative;

        display:
            block;

        width:
            100%;

        margin:
            0 auto 24px;

        padding:
            8px 0 0;

        text-align:
            center;

        z-index:
            5;
    }

    .mobile-brand img {

        display:
            block;

        width:
            185px;

        max-width:
            75%;

        height:
            auto;

        margin:
            0 auto;

        object-fit:
            contain;

        filter:
            drop-shadow(
                0 8px 18px
                rgba(0,0,0,.16)
            );
    }


    /* -----------------------------------------------------
       LOGIN HEADER MOBILE
    ----------------------------------------------------- */

    .login-header {

        display:
            block;

        margin-bottom:
            25px;

        padding:
            0 5px;
    }

    .login-icon {

        width:
            48px;

        height:
            48px;

        margin-bottom:
            13px;

        border:
            1px solid rgba(255,255,255,.30);

        background:
            rgba(255,255,255,.13);

        color:
            #ffffff;

        box-shadow:
            0 8px 22px
            rgba(0,0,0,.10);
    }

    .login-icon svg {

        width:
            21px;

        height:
            21px;
    }

    .login-kicker {

        margin-bottom:
            6px;

        color:
            #4cdbff;

        font-size:
            9px;
    }

    .login-header h1 {

        color:
            #ffffff;

        font-size:
            clamp(32px, 9vw, 42px);

        line-height:
            1;
    }

    .login-header p {

        margin-top:
            8px;

        color:
            rgba(255,255,255,.72);

        font-size:
            11px;

        line-height:
            1.55;
    }


    /* -----------------------------------------------------
       LOGIN FORM MOBILE
    ----------------------------------------------------- */

    .login-form {

        position:
            relative;

        z-index:
            3;
    }

    .login-form .form-group {

        margin-bottom:
            19px;
    }

    .form-group label {

        color:
            #ffffff;

        font-size:
            10px;
    }

    .label-row label {

        color:
            #ffffff;
    }

    .forgot-password {

        color:
            #50dcff;

        font-size:
            9px;
    }

    .login-form .input-box {

        min-height:
            54px;

        border:
            1px solid
            rgba(255,255,255,.28);

        border-radius:
            12px;

        background:
            rgba(255,255,255,.96);

        box-shadow:
            0 8px 22px
            rgba(0,0,0,.08);

        backdrop-filter:
            blur(10px);

        -webkit-backdrop-filter:
            blur(10px);
    }

    .login-form .input-box input {

        min-height:
            52px;

        color:
            #102243;

        font-size:
            11px;
    }

    .login-form .input-box input::placeholder {

        color:
            #9aa9bc;
    }

    .login-form .field-icon {

        width:
            46px;

        flex-basis:
            46px;

        color:
            #7d95b2;
    }

    .show-password {

        color:
            #7d95b2;
    }


    /* -----------------------------------------------------
       REMEMBER MOBILE
    ----------------------------------------------------- */

    .form-options {

        margin:
            -1px 0 20px;
    }

    .remember-option {

        color:
            rgba(255,255,255,.80);

        font-size:
            9px;
    }

    .checkmark {

        width:
            19px;

        height:
            19px;

        border:
            1px solid
            rgba(255,255,255,.55);

        background:
            rgba(255,255,255,.13);
    }

    .remember-option input:checked + .checkmark {

        border-color:
            #087ff5;

        background:
            #087ff5;
    }


    /* -----------------------------------------------------
       BUTTON MOBILE
    ----------------------------------------------------- */

    .submit-button {

        min-height:
            56px;

        border-radius:
            12px;

        background:
            linear-gradient(
                110deg,
                #061b52,
                #087ff5,
                #1498ff
            );

        background-size:
            200% 100%;

        box-shadow:
            0 14px 32px
            rgba(0,0,0,.18);
    }

    .submit-button:hover {

        transform:
            none;
    }


    /* -----------------------------------------------------
       SECURITY MOBILE
    ----------------------------------------------------- */

    .security-note {

        margin-top:
            18px;

        padding:
            11px;

        border:
            1px solid
            rgba(255,255,255,.25);

        border-radius:
            12px;

        background:
            rgba(255,255,255,.12);

        box-shadow:
            0 8px 25px
            rgba(0,0,0,.08);

        backdrop-filter:
            blur(12px);

        -webkit-backdrop-filter:
            blur(12px);
    }

    .security-icon {

        width:
            33px;

        height:
            33px;

        flex-basis:
            33px;

        background:
            rgba(22,215,245,.14);

        color:
            #4dffbf;
    }

    .security-note strong {

        color:
            #ffffff;

        font-size:
            9px;
    }

    .security-note span {

        color:
            rgba(255,255,255,.60);

        font-size:
            7px;
    }


    /* -----------------------------------------------------
       FOOTER MOBILE
    ----------------------------------------------------- */

    .login-footer {

        margin-top:
            20px;

        color:
            rgba(255,255,255,.48);

        font-size:
            7px;
    }

    .footer-separator {

        color:
            #ffcf35;
    }
}


/* =========================================================
   MOBILE 600
========================================================= */

@media (max-width: 600px) {

    .content {
        padding:
            20px 14px 30px;
    }

    .topbar {

        min-height:
            68px;

        gap:
            7px;
    }

    .language-switcher {

        min-height:
            37px;

        padding:
            0 8px;

        gap:
            5px;
    }

    .language-switcher a {
        font-size:
            10px;
    }

    .user-menu {
        min-width:
            40px;
    }

    .user-meta,
    .user-arrow {
        display:
            none;
    }

    .avatar {

        width:
            37px;

        height:
            37px;

        flex-basis:
            37px;
    }

    .dashboard-heading {
        margin-bottom:
            19px;
    }

    .heading-copy h1 {
        font-size:
            28px;
    }

    .heading-copy p {

        font-size:
            10px;

        line-height:
            1.6;
    }

    .heading-side {

        align-items:
            stretch;

        flex-direction:
            column;
    }

    .date-card,
    .timezone-card {
        width:
            100%;
    }

    .stats-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            10px;
    }

    .stat-card {
        padding:
            14px;
    }

    .stat-value {
        font-size:
            24px;
    }

    .stat-label {
        margin-top:
            11px;
    }

    .stat-change {
        font-size:
            7px;
    }

    .dashboard-grid {
        grid-template-columns:
            1fr;
    }

    .lower-grid {
        grid-template-columns:
            1fr;
    }

    .utc-banner {

        align-items:
            flex-start;

        flex-wrap:
            wrap;
    }

    .utc-banner-content {

        flex:
            1 1 calc(100% - 55px);
    }

    .utc-banner-value {

        width:
            100%;

        margin-top:
            3px;

        padding:
            9px 0 0;

        border:
            0;

        border-top:
            1px solid #e5edf5;

        text-align:
            left;
    }

    html[dir="rtl"] .utc-banner-value {

        padding:
            9px 0 0;

        border:
            0;

        border-top:
            1px solid #e5edf5;

        text-align:
            right;
    }


    /* -----------------------------------------------------
       LOGIN SMALL MOBILE
    ----------------------------------------------------- */

    .login-area {

        padding:
            25px 10px 40px;
    }

    .mobile-brand {

        margin-bottom:
            20px;

        padding-top:
            4px;
    }

    .mobile-brand img {

        width:
            175px;

        max-width:
            72%;
    }

    .login-header {

        margin-bottom:
            23px;

        padding:
            0 0;
    }

    .login-icon {

        width:
            45px;

        height:
            45px;

        margin-bottom:
            11px;
    }

    .login-header h1 {

        font-size:
            34px;
    }

    .login-header p {

        font-size:
            10px;
    }

    .login-form .input-box {

        min-height:
            53px;
    }

    .login-form .input-box input {

        min-height:
            51px;
    }

    .submit-button {

        min-height:
            55px;
    }

    .login-footer {

        flex-wrap:
            wrap;

        text-align:
            center;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .stats-grid {
        grid-template-columns:
            1fr;
    }

    .language-switcher {
        padding:
            0 6px;
    }

    .language-switcher a {
        font-size:
            9px;
    }

    .mobile-menu {

        width:
            38px;

        height:
            38px;
    }

    .avatar {

        width:
            36px;

        height:
            36px;
    }

    .quick-action small {
        white-space:
            normal;
    }

    .login-area {

        padding:
            20px 10px 35px;
    }

    .mobile-brand img {

        width:
            160px;
    }

    .login-header h1 {

        font-size:
            32px;
    }

    .login-header p {

        font-size:
            9px;
    }

    .login-form .form-group {

        margin-bottom:
            17px;
    }

    .login-form .input-box {

        min-height:
            51px;
    }

    .login-form .input-box input {

        min-height:
            49px;

        font-size:
            10px;
    }

    .submit-button {

        min-height:
            53px;
    }

    .security-note {

        margin-top:
            16px;
    }
}


/* =========================================================
   SHORT DESKTOP SCREENS
========================================================= */

@media (min-width: 901px) and (max-height: 800px) {

    .content {

        padding:
            20px 25px 30px;
    }

    .dashboard-heading {

        margin-bottom:
            17px;
    }

    .stats-grid,
    .dashboard-grid,
    .lower-grid {

        gap:
            11px;
    }

    .stat-card {

        padding:
            14px;
    }

    .stat-value {

        font-size:
            25px;
    }

    .activity-panel {

        min-height:
            290px;
    }

    .empty-activity {

        min-height:
            220px;
    }

    .quick-action {

        padding:
            8px 9px;
    }

    .quick-action-icon {

        width:
            32px;

        height:
            32px;

        flex-basis:
            32px;
    }

    .mini-panel {

        padding:
            14px;
    }

    .utc-banner {

        margin-top:
            11px;

        padding:
            9px 12px;
    }
}


/* =========================================================
   MOBILE SAFE AREA
========================================================= */

@media (max-width: 900px) {

    .login-area {

        padding-bottom:
            calc(
                40px +
                env(safe-area-inset-bottom)
            );
    }

    .login-card {

        padding-bottom:
            env(safe-area-inset-bottom);
    }
}


/* =========================================================
   IOS / SAFARI FIX
========================================================= */

@supports (-webkit-touch-callout: none) {

    .login-page {

        min-height:
            -webkit-fill-available;
    }

    .login-layout {

        min-height:
            -webkit-fill-available;
    }

    .login-area {

        min-height:
            -webkit-fill-available;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible {

    outline:
        3px solid rgba(8,127,245,.25);

    outline-offset:
        2px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto !important;
    }

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}