/* =============================================================
   ORAR USARB — Cherry Blossom Glassmorphism
   Minimal-diff: original sizing preserved, only visual polish added
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Lexend:wght@300;400;500;600;700&display=swap');

:root {
    /* Cherry Blossom palette — every color from the background photo */
    --cherry: #9b2335;         /* primary — cherry branches, warm wine-red */
    --cherry-dark: #7d1c2a;    /* gradient depth — deeper cherry bark */
    --blossom: #c4697e;        /* hover highlight — actual petal color */
    --amber: #c47a35;          /* Examene accent — golden sunlight on brick */
    --sage: #3a6b5c;           /* Planificare accent — foliage sage-teal */
    --petal: #fdf0f2;          /* lightest tint — barely-there blossom */
    --ink: #2c1e1e;            /* text — warm dark, not cold black */
    --ink-secondary: #5a4040;  /* secondary text — warm gray-brown */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --speed: 0.25s;
}

/* ── Base (original preserved, only font changed) ─────────── */
html {
    background-image: url('/img/2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Lexend', sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
}

* {
    outline: 0;
}

/* ── Typography (original sizing, only font upgraded) ─────── */
.text-white {
    color: white;
    font-weight: 900;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ── Left panel — glass directly on section ────────────────────── */
#app > section:first-child {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 15px !important;
    animation: panelReveal 0.6s var(--ease) both;
}

/* ── Right panel — transparent, glass on table only ───────── */
#section2 {
    background: transparent;
    animation: panelReveal 0.6s var(--ease) 0.1s both;
}

/* ── Title Banner ─────────────────────────────────────────── */
#app > section:first-child > [uk-alert] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

h4.text-white.uk-text-center {
    font-family: 'Bricolage Grotesque', sans-serif;
}

/* ── Buttons (original sizing, visual upgrade) ────────────── */
.uk-button {
    background-color: var(--cherry);
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-transform: none;
    border-radius: 999px;
    border: 2px solid transparent;
    transition: all var(--speed) var(--ease);
    box-shadow: 0 2px 8px rgba(155, 35, 53, 0.25);
}

.uk-button:hover {
    background-color: white;
    color: black;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.uk-button.active {
    background-color: white;
    color: black;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.uk-search-icon {
    color: var(--cherry) !important;
}

/* ── Search (glass style) ─────────────────────────────────── */
#searchZone {
    min-width: 150px;
    width: 100%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all var(--speed) var(--ease);
}

#searchZone:focus-within {
    border-color: var(--blossom);
    box-shadow: 0 0 0 3px rgba(155, 35, 53, 0.1);
}

/* ── Original sizing for search/selects ───────────────────── */
#searchZone,
#semesterSelector,
#daySelector,
#weekSelector2 {
    font-size: 16px;
    font-weight: bold;
}


/* ── Results (glass style) ────────────────────────────────── */
#resultZone {
    height: 100px;
    max-height: 100px;
    font-size: 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

#resultZone ul {
    display: none;
}

/* ── Selects (glass style) ────────────────────────────────── */
.uk-select {
    border-radius: 10px !important;
    background-color: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: all var(--speed) var(--ease);
}

.uk-select:focus {
    border-color: var(--blossom) !important;
    box-shadow: 0 0 0 3px rgba(155, 35, 53, 0.1);
}

#weekSelector2 {
    display: none;
}

/* ── Toggle switch (original sizing) ──────────────────────── */
switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

#isStudentMode {
    position: relative;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 34px;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

input:checked + .slider {
    background: linear-gradient(135deg, var(--cherry), var(--blossom));
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--cherry);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* ── Tables (original sizing preserved exactly) ───────────── */
table {
    border-collapse: collapse;
    font-size: 16px;
}

table,
td,
th {
    border: 1px solid gray;
}

tbody tr:hover {
    cursor: pointer;
}

tbody tr:hover td {
    background-color: rgba(155, 35, 53, 0.08);
    color: black;
}

/* ── Lessons table (original shadow + glass) ──────────────── */
#tableForLesssons {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    -webkit-box-shadow: 3px 0px 9px 5px rgba(26, 25, 26, 1);
    -moz-box-shadow: 3px 0px 9px 5px rgba(26, 25, 26, 1);
    box-shadow: 3px 0px 9px 5px rgba(26, 25, 26, 1);
}

#tableForLesssons tbody tr:hover td.uk-background-white {
    background-color: var(--petal);
}

.col-space {
    height: 60px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
}

.lessonsHide > div {
    display: none;
}

/* ── Color classes (gradients instead of flat) ────────────── */
th.uk-background-green {
    color: white !important;
}

.uk-background-green {
    border: 1px solid white;
    background: linear-gradient(135deg, var(--cherry), var(--cherry-dark)) !important;
    color: white;
}

.uk-background-white {
    background-color: white;
}

.uk-background-gray {
    background-color: #b5b0b0;
}

.uk-background-red {
    background-color: var(--amber);
}

.uk-background-violet {
    background-color: var(--sage);
}

.uk-background-yellow {
    color: white;
    background: linear-gradient(135deg, var(--blossom), #d4859a) !important;
    font-weight: bold;
}

/* ── ShorTable (original sizing, visual upgrade) ──────────── */
#shorTable td[class*=uk-width],
#shorTable th[class*=uk-width] {
    box-sizing: border-box;
    width: 50px !important;
    max-width: 100%;
}

#shorTable {
    -webkit-box-shadow: 3px 0px 9px 5px rgba(26, 25, 26, 0.7);
    -moz-box-shadow: 3px 0px 9px 5px rgba(26, 25, 26, 0.7);
    box-shadow: 3px 0px 9px 5px rgba(26, 25, 26, 0.7);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Legend (original sizing) ─────────────────────────────── */
#tableLegend p {
    margin-top: 0px;
    margin-left: 10px;
    font-size: 12px;
}

/* ── Group hover ──────────────────────────────────────────── */
.groupName:hover {
    cursor: pointer;
    color: white;
    background: linear-gradient(135deg, var(--cherry), var(--blossom));
    font-weight: bold;
}

.selectedGroup {
    background: linear-gradient(135deg, var(--cherry), var(--blossom));
    color: white;
}

/* ── Timetable cells ──────────────────────────────────────── */
.timetableWeek {
    color: white !important;
}

.timetableWeek:hover {
    outline: 1px solid white;
}

.uk-text-black {
    color: black !important;
}

.clear:hover {
    cursor: pointer;
}

.shortDay {
    width: 120px !important;
}

/* ── Action labels (pill shape + gradients) ───────────────── */
.uk-label.uk-background-green {
    background: linear-gradient(135deg, var(--cherry), var(--cherry-dark)) !important;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(155, 35, 53, 0.3);
    transition: all var(--speed) var(--ease);
}

.uk-label.uk-background-red {
    background: linear-gradient(135deg, var(--amber), #a86228) !important;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(196, 122, 53, 0.35);
    transition: all var(--speed) var(--ease);
}

.uk-label.uk-background-violet {
    background: linear-gradient(135deg, var(--sage), #2d5447) !important;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(58, 107, 92, 0.35);
    transition: all var(--speed) var(--ease);
}

.uk-label:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/* ── Info banner ──────────────────────────────────────────── */
.uk-alert-primary {
    background: rgba(214, 235, 252, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #1e56a0;
    border: 1px solid rgba(30, 135, 240, 0.2);
    border-radius: 10px;
    font-weight: 500;
}

/* ── Plan table ───────────────────────────────────────────── */
.planTable {
    overflow-y: auto;
    height: 300px;
}

/* ── Alerts ───────────────────────────────────────────────── */
.span-alert {
    background: #d8eafc;
    color: #1e87f0;
    border-radius: 8px;
}

.span-success {
    background: #edfbf6;
    color: var(--cherry);
    border-radius: 8px;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(155, 35, 53, 0.25);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(155, 35, 53, 0.35);
}

/* ── Smooth transitions ───────────────────────────────────── */
a, button, input, select, .uk-label, .groupName {
    transition: all var(--speed) var(--ease);
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes panelReveal {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Exact original breakpoints
   ══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1086px) {
    .changer,
    .changer2,
    #studentMode {
        margin-top: 15px;
    }
}

@media screen and (max-width: 726px) {
    .changer2 {
        margin-top: 15px;
    }

    #studentMode {
        margin-top: 15px;
        height: 38px;
    }
}

@media (min-width: 600px) {
    #headerLogo,
    #headerText {
        visibility: hidden;
    }

    #tableForLesssons {
        margin-top: 150px !important;
        margin-left: 100px !important;
    }
}

@media (max-width: 639px) {
    /* Cancel UIkit grid negative margin — no columns on mobile */
    #app[uk-grid] {
        margin-left: 0 !important;
    }
}

@media (max-width: 480px) {
    .text-white {
        color: black;
    }

    #headerLogo,
    #headerText {
        visibility: visible;
    }

    /* Buttons: fit mobile width */
    .uk-button {
        font-size: 14px;
        padding: 0 12px;
    }

    /* Less rounding on mobile */
    .uk-select {
        border-radius: 8px !important;
    }

    #searchZone {
        border-radius: 8px;
    }

    #resultZone {
        border-radius: 8px;
    }

    #shorTable {
        border-radius: 10px;
    }

    .uk-label {
        padding: 6px 12px;
        font-size: 12px;
    }

    .uk-alert-primary {
        border-radius: 8px;
    }
    .uk-label.uk-background-violet{
        margin-top: 10px;
    }
    #section2{
        padding-left: 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   FIREFOX — Exact original fixes
   ══════════════════════════════════════════════════════════════ */

@-moz-document url-prefix() {
    #shorTable thead tr {
        display: flex;
        flex-direction: row;
    }

    #shorTable tbody tr {
        display: flex;
        flex-direction: row;
    }

    .shortDay {
        max-width: 100%;
        width: 100% !important;
    }

    #shorTable td[class*=uk-width],
    #shorTable th[class*=uk-width] {
        box-sizing: border-box;
        width: 90% !important;
        max-width: 90%;
    }
}