/* =========================================================
   BrioCom Solutions — Modular CSS
   topbar.css
   Refactored from the original Time Tracking Workspace CSS.
   ========================================================= */

/* =========================================================
   10. TOPBAR
   ========================================================= */

.workspace-topbar {

    position: sticky;
    top: 74px;
    z-index: 200;

    min-height: 70px;

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

    padding:
        10px 30px;

    background:
        rgba(7,7,7,.94);

    border-bottom:
        1px solid #222;

    backdrop-filter:
        blur(14px);
}


.workspace-topbar-left {

    display: flex;
    align-items: center;

    gap: 15px;
}


.workspace-page-title span {

    display: block;

    color: var(--red);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .13em;
}


.workspace-page-title strong {

    display: block;

    margin-top: 1px;

    color: #eee;

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


/* TOPBAR RIGHT */

.workspace-topbar-right {

    display: flex;
    align-items: center;

    gap: 7px;
}


.topbar-tool,
.theme-toggle {

    width: 40px;
    height: 40px;

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

    color: #bbb;

    background: #101010;

    border:
        1px solid #292929;

    border-radius: 9px;

    font-size: 17px;

    text-decoration: none;

    cursor: pointer;

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


.topbar-tool:hover,
.theme-toggle:hover {

    color: #fff;

    background:
        rgba(220,38,38,.12);

    border-color:
        rgba(220,38,38,.4);

    transform:
        translateY(-2px);
}


/* MOBILE MENU */

.mobile-menu {

    display: none;

    width: 42px;
    height: 42px;

    color: #ddd;

    background: #111;

    border: 1px solid #292929;

    border-radius: 9px;

    font-size: 20px;

    cursor: pointer;
}

/* =====================================================
   TOPBAR CALENDAR BUTTON
   ===================================================== */

.workspace-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =====================================================
   CALENDAR BUTTON
   ===================================================== */

.workspace-topbar-right .calendar-trigger {
    position: relative;

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

    gap: 9px;

    min-width: 118px;
    height: 40px;

    padding: 0 13px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            var(--card-2),
            var(--card)
        );

    color: var(--text-secondary);

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.02em;

    cursor: pointer;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.16);

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.18s ease;
}


/* =====================================================
   RED ACCENT LINE
   ===================================================== */

.workspace-topbar-right .calendar-trigger::before {
    content: "";

    position: absolute;

    left: 9px;
    right: 9px;
    bottom: 0;

    height: 2px;

    border-radius: 3px;

    background: var(--red);

    opacity: 0;

    transform: scaleX(0.4);

    box-shadow:
        0 0 9px rgba(220, 38, 38, 0.7);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


/* =====================================================
   CALENDAR ICON
   ===================================================== */

.workspace-topbar-right .calendar-icon {
    width: 25px;
    height: 25px;

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

    flex-shrink: 0;

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

    border-radius: 6px;

    background: var(--surface);

    font-size: 13px;
    line-height: 1;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* =====================================================
   LABEL
   ===================================================== */

.workspace-topbar-right .calendar-label {
    white-space: nowrap;
}


/* =====================================================
   ARROW
   ===================================================== */

.workspace-topbar-right .calendar-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--muted-dark);

    font-size: 17px;
    font-weight: 400;

    line-height: 1;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


/* =====================================================
   HOVER
   ===================================================== */

.workspace-topbar-right .calendar-trigger:hover {
    color: var(--text);

    border-color:
        rgba(220, 38, 38, 0.35);

    background:
        linear-gradient(
            145deg,
            rgba(220, 38, 38, 0.10),
            var(--card)
        );

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.22),
        0 0 15px rgba(220, 38, 38, 0.07);

    transform: translateY(-1px);
}

.workspace-topbar-right .calendar-trigger:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

.workspace-topbar-right .calendar-trigger:hover .calendar-icon {
    color: var(--red);

    border-color:
        rgba(220, 38, 38, 0.45);

    background:
        rgba(220, 38, 38, 0.08);

    box-shadow:
        0 0 12px rgba(220, 38, 38, 0.12);

    transform: translateY(-1px);
}

.workspace-topbar-right .calendar-trigger:hover .calendar-arrow {
    color: var(--red);

    transform: translateX(2px);
}


/* =====================================================
   ACTIVE / CALENDAR OPEN
   ===================================================== */

.workspace-topbar-right .calendar-trigger.calendar-open {
    color: var(--red);

    border-color:
        rgba(220, 38, 38, 0.40);

    background:
        linear-gradient(
            145deg,
            rgba(220, 38, 38, 0.12),
            var(--card)
        );

    box-shadow:
        0 0 16px rgba(220, 38, 38, 0.09);
}

.workspace-topbar-right .calendar-trigger.calendar-open::before {
    opacity: 1;
    transform: scaleX(1);
}

.workspace-topbar-right .calendar-trigger.calendar-open .calendar-icon {
    color: var(--red);

    border-color:
        rgba(220, 38, 38, 0.50);

    background:
        rgba(220, 38, 38, 0.10);

    box-shadow:
        0 0 13px rgba(220, 38, 38, 0.14);
}

.workspace-topbar-right .calendar-trigger.calendar-open .calendar-arrow {
    color: var(--red);

    transform: rotate(90deg);
}


/* =====================================================
   CLICK
   ===================================================== */

.workspace-topbar-right .calendar-trigger:active {
    transform: scale(0.97);
}


/* =====================================================
   KEYBOARD FOCUS
   ===================================================== */

.workspace-topbar-right .calendar-trigger:focus-visible {
    outline: none;

    border-color: var(--red);

    box-shadow:
        0 0 0 2px rgba(220, 38, 38, 0.14),
        0 0 15px rgba(220, 38, 38, 0.08);
}


/* =====================================================
   LIGHT THEME
   ===================================================== */

body.light-mode .workspace-topbar-right .calendar-trigger,
body.light-theme .workspace-topbar-right .calendar-trigger {
    background:
        linear-gradient(
            145deg,
            var(--card),
            var(--card-2)
        );

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.07);
}

body.light-mode .workspace-topbar-right .calendar-trigger:hover,
body.light-theme .workspace-topbar-right .calendar-trigger:hover {
    background:
        linear-gradient(
            145deg,
            rgba(220, 38, 38, 0.06),
            var(--card)
        );

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.09),
        0 0 12px rgba(220, 38, 38, 0.05);
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 780px) {

    .workspace-topbar-right .calendar-trigger {
        min-width: 42px;
        width: 42px;
        height: 38px;

        padding: 0;
    }

    .workspace-topbar-right .calendar-label,
    .workspace-topbar-right .calendar-arrow {
        display: none;
    }

    .workspace-topbar-right .calendar-icon {
        width: 25px;
        height: 25px;
    }
}

/* =========================================
   BACK TO HOME BUTTON
========================================= */

.back-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 15px;

    color: #ffffff;
    background: #111111;
    border: 1px solid rgba(255, 37, 37, 0.45);
    border-radius: 8px;

    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

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

.back-home-btn > span:first-child {
    color: #ff2525;
    font-size: 19px;
    line-height: 1;
}

.back-home-btn:hover {
    background: #1b0a0a;
    border-color: #ff2525;
    transform: translateX(-2px);
}

.back-home-btn:focus-visible {
    outline: 2px solid #ff4545;
    outline-offset: 4px;
}

/* Smaller screens */
@media (max-width: 600px) {
    .back-home-btn {
        gap: 6px;
        padding: 8px 10px;
        font-size: 11px;
    }
}

@media (max-width: 380px) {
    .back-home-btn {
        padding: 8px;
    }

    .back-home-btn > span:last-child {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-home-btn {
        transition: none;
    }
}

/* =========================================================