/* Site look (2026 redesign, UBB identity colours: see _colors/README.md).
   One stylesheet for the whole site: tokens, base, header/footer, cards, Bootstrap theming, home page, components.
   Dark mode follows the visitor's setting; it is on for every page unless a page sets $darkOk = false (view/header.php),
   which leaves out <html class="dark-ok">. */

/* ---------- 1. Tokens ---------- */
:root {
    /* UBB identity manual */
    --ubb-navy:  #0F2B4C;
    --ubb-blue:  #1F4976;   /* ALBASTRU UBB, dominant colour */
    --ubb-sky:   #A8C9EA;
    --ubb-tan:   #AB8C72;
    --ubb-sand:  #DBC5B4;
    --ubb-cream: #F4DFBD;
    /* the teacher's own dark blue: page and cards in dark mode */
    --night-rgb: 35, 53, 76;
    --night:     rgb(var(--night-rgb));

    /* language colours (RO / EN / DE) */
    --lang-ro: #008cd1;
    --lang-en: #80221b;
    --lang-de: #009344;
    --lang-en-text: #80221b;            /* the "en" tag in running text (a lighter red in dark mode) */

    --page: #F6F8FC;
    --card: rgba(250,250,250,.57);       /* a little see-through: the page logos show faintly through the cards */
    --shadow: 0 2px 12px rgba(15,43,76,.10);
    --title: var(--ubb-navy);
    --text: #1d2a38;
    --muted: #5b6b7c;
    --line: #D9E2EE;
    --link: #2B6CB0;                    /* the manual's web blue #4982C3, darkened to be readable (4.0 -> 5.4:1) */
    --link-line: rgba(43,108,176,.45);
    --hover-bg: var(--ubb-blue);
    --hover-text: #F9EFE0;
    --logo-opacity: .05;
    /* header and footer have no bar: their text sits on the page, so the colours follow the theme */
    --nav-text: var(--ubb-navy);
    --nav-hover: var(--ubb-blue);
    --brand: var(--ubb-blue);           /* the name */
    --sub: var(--muted);                /* the role line under the name */
    --footer-text: var(--muted);
    --toggler-filter: invert(1);
    --toggler-border: rgba(15,43,76,.35);
    /* inner pages */
    --soft: rgba(15,43,76,.04);
    --soft-hover: rgba(15,43,76,.08);
    --code: #d63384;
    --ok: #198754;
    --grid-line: #dee2e6;               /* calendar grid, timeline */
    --grid-line-soft: #e9ecef;
    --tree-link: #003C71;               /* "About this site" structure tree */
    --tree-hover: #0d6efd;
}
@media (prefers-color-scheme: dark) {
    :root.dark-ok {
        --page: var(--night);
        --card: rgba(var(--night-rgb), .8);
        --shadow: 0 2px 14px rgba(0,0,0,.48);
        --title: var(--ubb-cream);
        --text: #DCE6F2;
        --muted: var(--ubb-sky);
        --line: rgba(168,201,234,.22);
        --link: var(--ubb-sky);
        --link-line: rgba(168,201,234,.5);
        --hover-text: #fff;
        --logo-opacity: .06;
        --nav-text: #f6f8fc;
        --nav-hover: var(--ubb-cream);
        --brand: #f6f8fc;
        --sub: var(--ubb-sand);
        --footer-text: rgba(246,248,252,.8);
        --toggler-filter: none;
        --toggler-border: rgba(255,255,255,.35);
        --soft: rgba(255,255,255,.06);
        --soft-hover: rgba(255,255,255,.11);
        --code: #ff9ac7;
        --ok: #5fd1a0;
        --lang-en-text: #E34344;
        --grid-line: rgba(168,201,234,.25);
        --grid-line-soft: rgba(168,201,234,.12);
        --tree-link: var(--link);
        --tree-hover: var(--title);
    }
}

/* ---------- 2. Base ---------- */
body {
    font-family: 'DM Sans', sans-serif;
    font-variation-settings: "opsz" 14;   /* body text stays exactly as before (the static DM Sans was optical size 14); only titles adapt, below */
    color: var(--text);
    background: var(--page);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { text-decoration: none; color: var(--link); }
a:hover { color: var(--title); }
a:active { background-color: var(--night) !important; color: wheat !important;}

/* Links inside page content are underlined (colour alone is too weak a cue); hover makes the line solid.
   Buttons, tabs, menus, list items, breadcrumbs, footer, "details" links and the home rows stay plain. */
.container a { text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.container a:hover { text-decoration-color: currentColor; }
.container a.btn, .container a.nav-link, .container a.dropdown-item, .container a.list-group-item, .container a.page-link,
.container a.navbar-brand, .container a.row-link, .breadcrumb a, .navbar a, footer a, footer .container a, a.details { text-decoration: none; }
.navbar a:hover, .dropdown-item:hover, .btn:hover, a.row-link:hover, a.navbar-brand:hover { text-decoration: none; }
a.details { border-bottom: 1px dashed; }

/* Titles: DM Sans' optical-size axis switches to its finer display cut at large sizes, plus a touch more air */
h1, h2, h3, h4, .card-title { font-variation-settings: normal; font-optical-sizing: auto; letter-spacing: .01em; }

/* the two big logos behind the page */
.logos { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; }
.logos picture { position: absolute; display: block; }
.logos img { display: block; width: 100%; height: auto; opacity: var(--logo-opacity); }
.logos .cs  { right: 0; top: 0; width: 45vw; }
.logos .ubb { left: -25px; top: 48%; width: 55vw; transform: translateY(-50%); }

/* ---------- 3. Header and footer: no bar, text directly on the page ---------- */
.custom-bg { background: transparent; border-bottom: 0; }
.custom-bg, .custom-bg a, .custom-bg .nav-item a.nav-link { color: var(--nav-text); }
.custom-bg a.navbar-brand { color: var(--brand); }
.custom-bg a.navbar-brand:hover, .custom-bg .nav-item a.nav-link:hover { color: var(--nav-hover); }
.custom-bg .navbar-nav .show > .nav-link, .custom-bg .navbar-nav .nav-link.active { color: var(--nav-hover); }
.navbar-brand { font-family: 'Corinthia', cursive; font-weight: 700; font-size: clamp(1.7rem, 8.5vw, 2.3rem) !important; }
.navbar-dark .navbar-toggler { border-color: var(--toggler-border); }
.navbar-dark .navbar-toggler-icon { filter: var(--toggler-filter); }
.dropdown-menu li, .dropdown-menu li a { color: var(--ubb-navy); }
.brandblock { line-height: 1.1; padding: .35rem 0; }
.brandblock .navbar-brand { display: block; margin: 0; padding: 0; line-height: 1.1; }
.brandblock .subtitle { display: block; margin-top: .1rem; font-size: .85rem; color: var(--sub); letter-spacing: .02em; }

footer.custom-bg { border-top: 0; font-size: .85rem; color: var(--footer-text); }
footer.custom-bg a { color: var(--footer-text); }
footer.custom-bg a:hover { color: var(--nav-hover); }
footer.custom-bg p { margin-bottom: .75rem; }

#backToTop { position: fixed; display: none; background-color: #FFC300; color: #003C71; cursor: pointer; z-index: 1000; }

/* ---------- 4. Cards (home page and inner pages): rounded, soft shadow, no border ---------- */
.card { background: var(--card); border: 0; border-radius: 1rem; box-shadow: var(--shadow); color: var(--text); }
.bg-white { background-color: var(--card) !important; }
.bg-light { background-color: var(--soft) !important; }
.shadow { box-shadow: var(--shadow) !important; }
.bg-white.rounded, .shadow.rounded { border-radius: 1rem !important; }

/* inner pages: ONE card per page = breadcrumbs, title, then the page's sections */
.page { margin: 1rem 0 1.5rem; }
.page > .card-body { padding: 1rem 1.5rem 1.5rem; }
.page .breadcrumb { margin: 0 0 .6rem; padding: 0; font-size: .9rem; }
.page h1 { margin-bottom: 1rem; padding-bottom: .25rem; color: var(--title); font-weight: 600; border-bottom: 1px solid var(--line); }
.page > .card-body > section, .page .row > section { margin-top: 3rem; }
.page section > h3:first-child, .page section > h4:first-child { padding-bottom: .25rem; border-bottom: 1px solid var(--line); }

/* ---------- 5. Bootstrap pieces that carry their own light colours: tied to the theme ---------- */
.text-muted, .text-secondary, .text-black-50, .blockquote-footer, .figure-caption { color: var(--muted) !important; }
.text-dark { color: var(--text) !important; }
.text-primary { color: var(--link) !important; }
.text-success { color: var(--ok) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end, .border-y { border-color: var(--line) !important; }
.breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }
code { color: var(--code); }
.table, .table-light { --bs-table-striped-color: var(--text); --bs-table-striped-bg: var(--soft);
                       --bs-table-hover-color: var(--text); --bs-table-hover-bg: var(--soft-hover);
                       --bs-table-active-color: var(--text); --bs-table-active-bg: var(--soft-hover);
                       color: var(--text); border-color: var(--line); }
.table-light { --bs-table-bg: var(--soft); }
.list-group-item { background-color: transparent; color: var(--text); border-color: var(--line); }
.list-group-item-action { color: var(--text); }
.list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--soft-hover); color: var(--text); }
.nav-tabs { border-bottom-color: var(--line); }
.nav-tabs .nav-link { color: var(--link); }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border-color: var(--line) var(--line) transparent; }
.nav-tabs .nav-link.active { color: var(--text); background-color: var(--card); border-color: var(--line) var(--line) transparent; }

/* ---------- 6. Home page ---------- */
.home { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.home .card { height: 100%; }
.home .card-body { display: flex; flex-direction: column; padding: 1.25rem 1.5rem; }
.home .card-title { color: var(--title); border-color: var(--line) !important; font-size: 1.7rem; font-weight: 600; }
@media (min-width: 992px) {
    .home { grid-template-columns: 2fr 1fr; gap: 1.5rem; }
    #teaching { grid-column: 1; grid-row: 1; }
    #coordination { grid-column: 2; grid-row: 1; }
    #research { grid-column: 1; grid-row: 2; }
    #contact { grid-column: 2; grid-row: 2; }
}

/* the week of the semester, on the right of the semester line */
.term-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; }
.week-badge { padding: .05rem .75rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--title); font-size: .9rem; font-weight: 600; white-space: nowrap; }

/* rows (courses, coordination): plain text with hairlines; fill with colour on mouse over */
.rows { margin: .25rem 0 .75rem; }
.home a.row-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem 1rem; padding: .6rem .75rem; margin: 0 -.25rem; border-top: 1px solid var(--line); border-radius: .6rem; color: var(--text); transition: background-color .15s ease, color .15s ease; }
.rows .row-link:last-child { border-bottom: 1px solid var(--line); }
.home a.row-link:hover, .home a.row-link:focus-visible { background: var(--hover-bg); color: var(--hover-text); border-top-color: transparent; text-decoration: none; outline: none; }
.rows .row-link:hover + .row-link { border-top-color: transparent; }
.rl-title { flex: 1 1 auto; font-weight: 600; }
.rl-meta, .rl-label { color: var(--muted); font-size: .9rem; }
.rl-meta { margin-left: auto; }
.rl-label { width: 4.2em; }
.row-link:hover .rl-meta, .row-link:hover .rl-label, .row-link:focus-visible .rl-meta, .row-link:focus-visible .rl-label { color: var(--ubb-sand); }
.more { margin-top: auto; text-align: end; }

/* ---------- 7. Components ---------- */
/* language tags in running text and badges */
.teaching [lang]::before { border-right: 1px solid; font-size: small; padding: .15em; border-radius: 5em; margin-right: .4em; }
.teaching [lang=en]::before { content: "en"; color: var(--lang-en-text); }
.teaching [lang=de]::before { content: "de"; color: var(--lang-de); }
.teaching [lang=ro]::before { content: "ro"; color: var(--lang-ro); }
.bg-en { background-color: var(--lang-en); }
.bg-ro { background-color: var(--lang-ro); }
.bg-de { background-color: var(--lang-de); }
.bg-sem { opacity: .85; }
.bg-lab { opacity: .65; }

/* Experience page */
/* #myTeachingExperienceTab { margin: -1.8rem .9rem 0; z-index: 100; position: relative; } */

/* Thesis supervision page: level colours (UBB manual: bachelor orange, master purple) and a bold total */
.lvl-bachelor { background: #F89B1C; color: #0F2B4C; }
.lvl-master   { background: #652C90; color: #fff; }
.thesis-num   { font-weight: 700; margin-right: .35em; }
.thesis-detail .badge { font-weight: 600; min-width: 1.9em; }
.thesis-lang th .badge { font-size: .85em; }
.thesis-count[data-bs-toggle] { cursor: help; border-bottom: 1px dotted currentColor; }

/* Calendar page: weekly grid (a day = one column, an event = a box placed by its time) */
.cal { display: flex; gap: 4px; margin-top: 1rem; }
.cal-hours { flex: 0 0 3.2rem; position: relative; font-size: .75rem; color: var(--muted); }
.cal-hours span { position: absolute; right: .3rem; transform: translateY(-50%); }
.cal-day { flex: 1 1 0; min-width: 0; }
.cal-day h3 { font-size: 1rem; text-align: center; margin: 0 0 .4rem; }
.cal-body { position: relative; border-left: 1px solid var(--grid-line); background-image: linear-gradient(var(--grid-line-soft) 1px, transparent 1px); }
.cal-ev { position: absolute; box-sizing: border-box; overflow: hidden; padding: .2rem .35rem; border-radius: .35rem; color: #fff;
          font-size: .78rem; line-height: 1.2; text-decoration: none; }
.cal-ev b { display: block; font-weight: 600; }
.cal-ev small { display: block; opacity: .92; font-size: .72rem; }
.cal-ro { background: var(--lang-ro); } .cal-en { background: var(--lang-en); } .cal-de { background: var(--lang-de); } .cal-other { background: #6c757d; }
.cal-seminar { opacity: .78; } .cal-lab { opacity: .72; }
.cal-wk { background: #e9ecef; color: #333; border-radius: .6rem; padding: 0 .35rem; font-size: .68rem; margin-left: .3rem; }
@media (max-width: 767px) {
    .cal { flex-direction: column; }
    .cal-hours { display: none; }
    .cal-body { height: auto !important; border-left: 0; background: none; }
    .cal-ev { position: static; margin-bottom: .3rem; width: auto !important; height: auto !important; }
}

/* About this site: structure tree and timeline */
.tree ul { position: relative; list-style: none; margin-left: 0; padding-left: 1.2em; }
.tree ul li:before { color: gray; content: "↳"; position: absolute; left: 0; }
#structure a { color: var(--tree-link); }
#structure a:hover { color: var(--tree-hover); }
.horizontal-timeline .items { border-top: 3px solid var(--grid-line-soft); }
.horizontal-timeline .items .items-list { display: block; position: relative; text-align: center; padding-top: 70px; margin-right: 0; }
.horizontal-timeline .items .items-list:before { content: ""; position: absolute; height: 36px; border-right: 2px dashed var(--grid-line); top: 0; }
.horizontal-timeline .items .items-list .event-date { position: absolute; top: 36px; left: 0; right: 0; width: 100px; margin: 0 auto; font-size: 0.9rem; padding-top: 8px; }
@media (min-width: 1140px) {
    .horizontal-timeline .items .items-list { display: inline-block; width: 24%; padding-top: 45px; }
    .horizontal-timeline .items .items-list .event-date { top: -40px; }
}