/* ============================================================
   OLT Cloud — UI refresh (Nível 0: modernização global)
   Camada aditiva e reversível. Carregada por ÚLTIMO (depois do
   Fomantic e do custom_alt.css), então vence por ordem de carga.
   Para reverter TUDO: remover o <link> de ui_refresh.css no base.html.

   Regra: nenhuma cor fixa de superfície/texto — só as vars de tema
   (colors.css / colors_dark.css), então funciona em light e dark.
   Acento da marca: --base_color (laranja), usado com disciplina.
   ============================================================ */

:root {
    --ui-radius-sm: 8px;
    --ui-radius: 10px;
    --ui-radius-lg: 14px;
    --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
    --ui-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.09);
    --ui-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.13);
    --ui-accent-soft: rgba(242, 113, 28, 0.16);
}

/* ---- rendering / typography base ---- */
body,
.ui,
.ui.menu,
.ui.header,
.ui.form {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* section dividers become quiet uppercase "eyebrows" — they label
   real content groups (menu categories, test sections), so encode that */
.ui.horizontal.divider.header {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.85;
}

/* ---- surfaces ---- */
.ui.segment {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
}
.ui.card,
.ui.cards > .card {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
}
.ui.menu {
    border-radius: var(--ui-radius-sm);
}
.ui.modal {
    border-radius: var(--ui-radius-lg);
}
.ui.modal > .header:first-child {
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
}

/* ---- buttons: micro-interaction, no color hijack ---- */
.ui.button {
    border-radius: var(--ui-radius-sm);
    font-weight: 700;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, background-color 0.12s ease;
}
.ui.button:hover {
    transform: translateY(-1px);
    box-shadow: var(--ui-shadow-sm);
}
.ui.button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ---- inputs: consistent radius + brand focus ring ---- */
.ui.input > input,
.ui.form input:not([type=checkbox]):not([type=radio]),
.ui.form textarea,
.ui.selection.dropdown {
    border-radius: var(--ui-radius-sm);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ui.input > input:focus,
.ui.form input:not([type=checkbox]):not([type=radio]):focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus,
.ui.selection.dropdown.active {
    border-color: var(--base_color);
    box-shadow: 0 0 0 2px var(--ui-accent-soft);
}

/* the inline <input class="search"> inside a (multi)select dropdown is
   borderless by design — keep it that way so it doesn't grow an orange
   ring/box of its own inside the field */
.ui.selection.dropdown > input.search,
.ui.selection.dropdown > input.search:focus,
.ui.search.dropdown > input.search,
.ui.search.dropdown > input.search:focus {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* search-results filter row (thead .th-busca): compact, flush, custom
   header fields. Opt them OUT of the global input/dropdown polish so they
   don't grow a radius or an orange focus ring that breaks the tight header */
.th-busca input,
.th-busca .ui.input > input,
.th-busca .ui.selection.dropdown {
    border-radius: 0 !important;
}
.th-busca input:focus,
.th-busca .ui.input > input:focus,
.th-busca .ui.selection.dropdown:focus,
.th-busca .ui.selection.dropdown.active {
    box-shadow: none !important;
}
/* these header inputs flip to a hard white bg on focus — a dark-mode quirk.
   Bind focus bg/text to the theme vars so it's correct in light and dark. */
.th-busca input:focus,
.th-busca .ui.input > input:focus {
    background: var(--input_color) !important;
    color: var(--text_color) !important;
}

/* align every filter cell to the same height: the Fomantic selection
   dropdowns sit at ~29px while the transparent text inputs were ~17px,
   which left the filter row ragged */
.th-busca .ui.input,
.th-busca .ui.input > input {
    min-height: 29px;
    height: 29px;
}
/* .ui.input is an inline-flex box; centering its children lines up the
   "select all" checkbox (natural height) in the 29px row without touching
   layout. Text inputs are forced to 29px above, so they still fill the row. */
.th-busca .ui.input {
    align-items: center;
}
/* that checkbox carries an inline left:28% (template) that overflows its
   narrow cell and overlaps the first filter field — cancel it and center
   the checkbox horizontally inside its own cell */
.th-busca th:first-child .ui.input {
    justify-content: center;
}
.th-busca .ui.checkbox {
    left: 0 !important;
}
/* the clear + search action buttons at the end of the filter row were ~43px
   (and mismatched sizes) — bring them down to the 29px field height so the
   whole row lines up */
.th-busca .ui.button {
    height: 29px !important;
    min-height: 29px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.th-busca .ui.input > input {
    line-height: 27px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ---- tables: crisper header, subtle row hover ---- */
.ui.table {
    border-radius: var(--ui-radius-sm);
}
.ui.table thead th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    font-weight: 700;
}
.ui.table tbody tr:hover {
    background: var(--secondary_color);
}

/* ---- thin themed scrollbars ---- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--outline_color) transparent;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: var(--outline_color);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--cto_full);
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* ---- top navbar ---- */
.fx_navbar.ui.menu {
    box-shadow: var(--ui-shadow-sm);
}

/* ============================================================
   Signature 1 — home menu tiles
   ============================================================ */
#dv_menus .ui.cards {
    gap: 1rem;
}
.z_menu.ui.card {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
    border: 1px solid var(--border_color);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.z_menu.ui.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ui-shadow-md);
    border-color: var(--base_color);
}
.z_menu .ui.labeled.icon.menu {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}
.z_menu .item {
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.16s ease;
}
.z_menu .circular.icon {
    transition: transform 0.18s ease;
}
.z_menu.ui.card:hover .item {
    color: var(--base_color) !important;
}
.z_menu.ui.card:hover .circular.icon {
    transform: scale(1.08);
}

/* ============================================================
   Signature 2 — sidebar
   Only the container + search get polish. The vertical menu is a dense,
   multi-level native component with its own backgrounds and orange active
   state — generic .item styling (radius/hover/active bar) fought it and
   looked off, so we leave the menu items alone.
   ============================================================ */
#content_sidebar.ui.segment {
    box-shadow: var(--ui-shadow-md);
    border-radius: 0 var(--ui-radius-lg) var(--ui-radius-lg) 0;
}
.menu_search .ui.input input {
    border-radius: 999px;
}