/* =========================================================
   MODERN PORTAL THEME
   This stylesheet updates login + home/dashboard aesthetics.
   ========================================================= */

:root {
    --bg: #07101d;
    --bg-soft: #0e1728;
    --panel: rgba(30, 41, 59, 0.7);
    --panel-soft: rgba(255, 255, 255, 0.05);
    --panel-strong: rgba(255, 255, 255, 0.08);
    --accent: #f97316;
    --accent-soft: rgba(249, 115, 22, 0.18);
    --text: #ffffff;
    --text-muted: #94a3b8;
    --border: rgba(148, 163, 184, 0.2);
    --card-bg: rgba(15, 23, 42, 0.98);
    --input-bg: rgba(255, 255, 255, 0.05);
}

html,
body,
app-root,
.login-page-wrapper,
app-login .mobileHide,
app-login-partner .mobileHide {
    background-color: #020617 !important;
    background: radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.15) 0%, transparent 35%),
        #020617 !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: var(--text) !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100% !important;
    height: 100vh !important;
}

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

app-login,
app-login-partner,
.login-page-wrapper {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

app-login .mobileHide,
app-login-partner .mobileHide,
.login-page-wrapper .mobileHide {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    background-color: transparent !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =========================================================
   PARTNER LOGIN - prisili transparentnost na wrapper dive
   ========================================================= */
app-login-partner div[fxLayout],
app-login-partner div[fxlayout],
app-login-partner .mobileHide>div,
app-login-partner .mobileHide>div>div {
    background: transparent !important;
    background-color: transparent !important;
}

/* =========================================================
   LOGIN KARTICA - skupni selektorji za oba tipa prijave
   ========================================================= */
app-login div[fxlayoutalign*="end start" i],
app-login-partner div[fxlayoutalign*="end start" i],
app-login div[style*="width: 500px"],
app-login div[style*="width:500px"],
app-login div[style*="rgb(41, 44, 47)"],
app-login div[style*="background-color: #292c2f"],
app-login-partner div[style*="background-color: #ffe8bf"],
app-login-partner div[style*="background-color: #FFE8BF"],
app-login-partner div[style*="background-color: rgb(255, 232, 191)"],
app-login-partner div[style*="width: 500px"],
app-login-partner div[style*="width:500px"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 350px !important;
    max-width: 90vw !important;
    min-height: auto !important;
    background: var(--card-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
    padding: 30px !important;
    margin: 20px !important;
}

app-login img.mobileHide,
app-login-partner img.mobileHide {
    height: 45px !important;
    width: auto !important;
    margin-bottom: 15px !important;
    filter: drop-shadow(0 0 15px rgba(249, 115, 22, 0.4)) !important;
}

app-login h4,
app-login-partner h4 {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 20px !important;
    color: #fff !important;
    text-align: center !important;
}

app-login form,
app-login-partner form {
    width: 100% !important;
}

app-login mat-form-field,
app-login-partner mat-form-field {
    width: 100% !important;
    margin-bottom: 12px !important;
}

app-login input.mat-input-element,
app-login-partner input.mat-input-element {
    background: var(--input-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
}

app-login input.mat-input-element:focus,
app-login-partner input.mat-input-element:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1) !important;
    outline: none !important;
}

app-login mat-label,
app-login-partner mat-label {
    color: var(--text-muted) !important;
}

app-login button[mat-raised-button],
app-login-partner button[mat-raised-button] {
    width: 100% !important;
    height: 52px !important;
    background: linear-gradient(to right, #f97316, #ea580c) !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: white !important;
    box-shadow: 0 10px 15px -3px rgba(234, 88, 12, 0.3) !important;
    border: none !important;
    margin-top: 12px !important;
}

app-login button[mat-raised-button]:hover,
app-login-partner button[mat-raised-button]:hover {
    transform: scale(1.02) !important;
    filter: brightness(1.1) !important;
}

app-login a,
app-login-partner a {
    color: #6366f1 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    display: block !important;
    text-align: center !important;
    margin-top: 24px !important;
    transition: color 0.2s ease !important;
}

app-login a:hover,
app-login-partner a:hover {
    color: var(--accent) !important;
}

@media (max-width: 500px) {

    app-login div[style*="width:500px"],
    app-login-partner div[style*="width:500px"] {
        padding: 32px 24px !important;
        margin: 16px !important;
        max-width: calc(100% - 32px) !important;
    }
}

body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100vh !important;
    background-color: #020617 !important;
}

app-login,
app-login-partner {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

/* =========================================================
   SKRIVANJE STRANSKIH PANELOV
   ========================================================= */
app-login div[style*="background-color: rgb(247, 248, 249)"],
app-login-partner div[style*="background-color: rgb(247, 248, 249)"],
app-login div[style*="background-color: #F7F8F9"],
app-login-partner div[style*="background-color: #F7F8F9"],
app-login div[style*="width: 1000px"],
app-login-partner div[style*="width: 1000px"] {
    display: none !important;
}

/* Skrij mobilni layout */
app-login .desktopHide,
app-login-partner .desktopHide {
    display: none !important;
}

/* =========================================================
   PARTNER LOGIN - barva teksta znotraj kartice
   ========================================================= */
app-login-partner mat-label,
app-login-partner .mat-form-field-label,
app-login-partner .mat-hint {
    color: var(--text-muted) !important;
}

app-login-partner h4 {
    color: #fff !important;
}

app-login-partner .mat-form-field-underline,
app-login-partner .mat-form-field-ripple {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

app-login-partner .mat-form-field-ripple {
    background-color: var(--accent) !important;
}

/* =========================================================
   PARTNER LOGIN - popravek logo containerja (300px → auto)
   ========================================================= */

/* Skrci prazen 300px div kjer je logo */
app-login-partner div[style*="height:300px"],
app-login-partner div[style*="height: 300px"] {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 0 !important;
}

/* Logo slika znotraj partner login kartice */
app-login-partner div[fxlayoutalign*="end start" i] img,
app-login-partner div[fxLayoutAlign*="end start" i] img {
    height: 70px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 0 15px rgba(249, 115, 22, 0.5)) !important;
    /* Popravi broken {{assets}} placeholder z pravilno potjo */
    content: url(assets/images/biluminaLogo_pobrisan.png) !important;
}

/* Skrci tudi form container da ne zavzame preveč prostora */
app-login-partner div[style*="height:70%"],
app-login-partner div[style*="height: 70%"] {
    height: auto !important;
    padding-bottom: 0 !important;
}

/* =========================================================
   DASHBOARD / TABLE & TOP BAR
   ========================================================= */

/* "Zgornji napisi" - Table headers */
.table thead th {
    color: var(--accent) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--border) !important;
    opacity: 1 !important;
}

/* Data text - Table body content and descriptive paragraphs (mostly for detail views) */
.table.body tbody td,
.table.text-center tbody td,
.mx-auto p,
.mx-auto h5,
.text-center p,
.text-center h5 {
    color: var(--accent) !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* Revert main dashboard table text to white for readability on status backgrounds */
#tableContainer .table td {
    color: var(--accent) !important;
    font-weight: 500 !important;
}

/* =========================================================
   MODERN ROW STATUS INDICATORS
   ========================================================= */

/* Remove old solid backgrounds and use subtle tints + borders */
#tableContainer tbody {
    border-bottom: 1px solid var(--border) !important;
}

#tableContainer tr.onHover {
    border-left: 4px solid transparent !important;
    transition: all 0.2s ease !important;
}

/* Red / Error */
.redMap,
.redMap tr {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

.redMap tr {
    border-left: 4px solid #ef4444 !important;
}

/* Orange / Warning */
.orangeMap,
.orangeMap tr {
    background-color: rgba(249, 115, 22, 0.12) !important;
}

.orangeMap tr {
    border-left: 4px solid #f97316 !important;
}

/* Green / Success */
.greenMap,
.greenMap tr {
    background-color: rgba(34, 197, 94, 0.08) !important;
}

.greenMap tr {
    border-left: 4px solid #22c55e !important;
}

/* Working / Gray */
.workingMap,
.workingMap tr {
    background-color: rgba(148, 163, 184, 0.08) !important;
}

.workingMap tr {
    border-left: 4px solid #94a3b8 !important;
}

#tableContainer tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    filter: brightness(1.1);
}

/* Top control bar icons and text (clock, settings, filter, volume) */
.padTop a,
.padTop a i,
.padLeft i {
    color: var(--accent) !important;
    opacity: 1 !important;
    transition: all 0.2s ease !important;
}

.padTop a:hover,
.padLeft:hover i {
    filter: brightness(1.2) !important;
    transform: scale(1.1) !important;
}

/* Ensure the table container doesn't hide headers */
#tableContainer {
    background: transparent !important;
}

/* =========================================================
   REFINEMENTS & GLOBAL UI
   ========================================================= */

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

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

::-webkit-scrollbar-thumb {
    background: var(--accent-soft);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* Form Elements (Filters, Settings) */
.form-control,
input[type="text"] {
    background: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
}

.form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none !important;
}

/* Dropdown & Cards */
.dropdown-menu {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: 12px !important;
    padding: 8px !important;
}

.dropdown-item {
    color: var(--text) !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
}

.dropdown-item:hover {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

.card,
.collapse .card-body {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    color: var(--text) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* =========================================================
   HOME SCREEN / DASHBOARD CARDS
   ========================================================= */

.homescreenButton {
    padding: 15px !important;
}

.homescreenButton .card.cardBackground {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    min-height: 140px !important;
    /* Zmanjšana višina */
    height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    /* Stisne ikono in tekst navpično */
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.homescreenButton .card.cardBackground:hover {
    transform: translateY(-8px) scale(1.02) !important;
    background: var(--panel-strong) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
}

/* Icons - Force Orange & Center */
.homescreenButton .card-body,
.homescreenButton .gumb {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 100% !important;
}

.homescreenButton .card-title,
.homescreenButton .card-title i,
.homescreenButton .card-title fa-icon,
.homescreenButton fa-icon,
.homescreenButton .fa {
    color: var(--accent) !important;
    font-size: 2.4rem !important;
    /* Malo manjše za boljšo poravnavo */
    margin-bottom: 8px !important;
    margin-top: 0 !important;
    display: block !important;
    text-align: center !important;
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.3)) !important;
}

/* Text - Clean White */
.homescreenButton .card-text,
.homescreenButton h5 {
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.02em !important;
}

/* =========================================================
   MODERNA POSODOBITEV TABEL (Glassmorphism & Premium UI)
   ========================================================= */

.mat-table,
.table {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    /* Razmik med vrsticami */
    width: 100% !important;
}

/* Stil za glavo tabele */
.mat-header-row,
tr.mat-header-row {
    background: rgba(249, 115, 22, 0.05) !important;
    border-bottom: 2px solid #f97316 !important;
}

.mat-header-cell,
th {
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 800 !important;
    color: #f97316 !important;
    padding: 15px !important;
    border: none !important;
}

/* Moderna vrstica (Glassmorphism) */
.mat-row,
tr.mat-row,
.table tbody tr {
    background: rgba(30, 41, 59, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(249, 115, 22, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 12px !important;
}

/* Celice v vrstici */
.mat-cell,
td {
    padding: 15px !important;
    border: none !important;
    color: #ffd8a8 !important;
    font-size: 0.9rem !important;
}

/* HOVER EFEKT - Vrstica "oživi" */
.mat-row:hover,
tr.mat-row:hover,
.table tbody tr:hover {
    background: rgba(30, 41, 59, 0.8) !important;
    transform: translateY(-2px) scale(1.005) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(249, 115, 22, 0.1) !important;
    border-color: rgba(249, 115, 22, 0.4) !important;
    cursor: pointer !important;
}

/* Poseben poudarek za ikone v vrstici */
.mat-row:hover .mat-icon,
tr.mat-row:hover i {
    transform: scale(1.2) !important;
    color: #fb923c !important;
    /* Svetlejša oranžna ob hoverju */
}

/* Zaobljeni robovi za celotno vrstico */
.mat-row td:first-child,
tr.mat-row td:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

.mat-row td:last-child,
tr.mat-row td:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Vrstica s številom vrstic na vrhu */
div[style*="background-color: #f89624"],
div[style*="background-color:#f89624"] {
    background: #f97316 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
}

/* 2. Gumbi in ikone na desni (Akcije) - NUKE MODE */
.mat-icon-button,
.mat-icon-button *,
.mat-cell button,
.mat-cell i,
.mat-cell mat-icon,
.material-icons,
.fa,
[class*="button"],
[class*="icon"] {
    color: #f97316 !important;
    -webkit-text-fill-color: #f97316 !important;
    fill: #f97316 !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Poseben popravek za krogce, ki se skrivajo v tabeli */
td [style*="border-radius"],
td [style*="50%"],
td [class*="circle"],
td [class*="dot"]:not(.dotYellow):not(.dotGreen):not(.dotRed):not(.dotBlue):not(.dotGray):not(.dotBrown):not(.dotDarkBlue):not(.dotPurple):not(.dotPink) {
    background-color: #f97316 !important;
    background: #f97316 !important;
    opacity: 1 !important;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.6) !important;
}

/* Targetiramo vse oblike in psevdo-elemente */
td [style*="border-radius"],
td [style*="50%"],
td [style*="black"],
td [style*="rgb(0, 0, 0)"],
td div::before,
td div::after,
td span::before,
td span::after,
circle,
svg circle {
    background-color: #f97316 !important;
    background: #f97316 !important;
    fill: #f97316 !important;
    border: 1px solid #f97316 !important;
    opacity: 1 !important;
    display: inline-block !important;
    min-width: 12px !important;
    min-height: 12px !important;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.8) !important;
}

/* Če so krogci dejansko slike (ikone), jih prisilno pobarvamo s filtrom */
td img[src*="circle"],
td i[class*="circle"],
.black-to-orange {
    filter: invert(53%) sepia(93%) saturate(1487%) hue-rotate(346deg) brightness(101%) contrast(105%) !important;
}

/* 3. Popravek za označeno besedilo (Selection) */
::selection {
    background: #f97316 !important;
    color: #000 !important;
}

/* 1. Naslovi tabel (Vključno z Angular Sort gumbi) */
.mat-header-cell,
.mat-header-cell *,
.mat-sort-header-button,
.mat-sort-header-container,
th.mat-header-cell {
    color: #f97316 !important;
    fill: #f97316 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    background: transparent !important;
}

/* Prisilno temno ozadje naslovne vrstice */
.mat-header-row,
tr.mat-header-row,
thead {
    background-color: #020617 !important;
    background: #020617 !important;
}

/* 2. Ponovno nastavimo našo temno barvo za celotno aplikacijo */
html,
body,
app-root,
.mat-drawer-container,
.mat-drawer-content {
    background-color: #020617 !important;
    background: radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.15) 0%, transparent 35%),
        #020617 !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: #ffd8a8 !important;
}

/* Odstranimo agresivno skrivanje, ki je uničilo meni */
/* Namesto tega bomo podvojene logotipe rešili tako, da skrijemo vse razen prvega logotipa v toolbar-u */
.mat-toolbar img:nth-of-type(n+2),
.logo img:nth-of-type(n+2) {
    display: none !important;
}

/* Prisilna vidnost logotipa in menija */
.mat-toolbar img:first-of-type,
.logo img:first-of-type,
button.mat-icon-button {
    display: inline-block !important;
    visibility: visible !important;
}

/* Poseben popravek za FAQ-video, da ne lebdi na sredini */
app-uredi-task .mobileHide,
app-uredi-task .mobileHide * {
    display: none !important;
}

/* 1. Vse ikone (Globalna oranžna) */
.mat-icon,
i,
.mat-icon-button,
.material-icons,
[class*="icon"] {
    color: #f97316 !important;
    fill: #f97316 !important;
}

/* 4. POPRAVEK ZA SPOROČILA (Nastja Soko itd.) */
.him,
.me,
li.him,
li.me {
    background-color: #1e293b !important;
    /* Temno modro ozadje za sporočilo */
    border: 1px solid #f97316 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin: 10px 0 !important;
    color: #ffd8a8 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* 5. POPRAVEK ZA POLJE ZA ODGOVOR (Spodaj) */
.desktopHide div[style*="bottom: 0"],
.mobileHide[style*="bottom: 0"],
[style*="position: fixed;background-color: white"] {
    background-color: #020617 !important;
    /* Trdno temno ozadje */
    border-top: 2px solid #f97316 !important;
    padding: 10px !important;
}

/* Polje za vnos besedila */
textarea,
.angular-editor-wrapper {
    background-color: #1e293b !important;
    color: #ffd8a8 !important;
    border: 1px solid #f97316 !important;
    border-radius: 4px !important;
}

/* Gumb Odgovori / Letalo / In vsi oranžni gumbi */
button[color="primary"],
.fa-paper-plane,
button[color="primary"] *,
.mat-flat-button.mat-primary *,
.mat-raised-button.mat-primary * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Prisilna odstranitev trdo kodiranih belih ozadij v sporočilih */
[style*="background-color: white"],
[style*="background-color:white"],
.mobileHide,
.desktopHide {
    background-color: transparent !important;
}

.mat-card {
    background-color: #1e293b !important;
    color: #f97316 !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
}

/* 2. Vse besedilo v zgornji vrstici (Header/Toolbar) */
header *,
.mat-toolbar,
.mat-toolbar *,
.navbar,
.navbar *,
.row-counter,
h5,
h4,
h3 {
    color: #f97316 !important;
}

/* 3. Poseben popravek za gumbe na desni */
.mat-icon-button:hover {
    background-color: rgba(249, 115, 22, 0.1) !important;
}

/* Prisilno oranžna barva za vse znotraj tega dela */
app-uredi-task div[style*="background-color: white"] *,
app-uredi-task div[style*="background-color: #fff"] *,
app-uredi-task .row:first-child * {
    color: #f97316 !important;
    font-weight: bold !important;
}

/* 3. Gumb Nazaj - Boljša vidljivost */
app-uredi-task a[routerLink*="pregled-helpdeska"] {
    background: #1e293b !important;
    border: 2px solid #f97316 !important;
    color: #f97316 !important;
    padding: 12px 25px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

/* 4. Meni na levi - Enotna oranžna */
.col-md-2 a,
.sidebar-container a {
    color: #ffffff !important;
    font-weight: bold !important;
}

.col-md-2 a i {
    color: #f97316 !important;
}

/* =========================================================
   MODERNIZACIJA PRENOSA DATOTEK & STRANSKEGA MENIJA
   ========================================================= */

/* 1. Drag & Drop kontejner (Tisti beige del) */
.dragDropContainer {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(15px) !important;
    border: 2px dashed rgba(249, 115, 22, 0.3) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    transition: all 0.4s ease !important;
    color: #ffd8a8 !important;
    margin: 10px !important;
}

.dragDropContainer:hover {
    border-color: #f97316 !important;
    background: rgba(249, 115, 22, 0.05) !important;
    box-shadow: 0 0 30px rgba(249, 115, 22, 0.1) !important;
    transform: scale(1.01) !important;
}

/* Ikona v Drag & Drop */
.dragDropContainer i.fa-upload {
    color: #f97316 !important;
    filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.3)) !important;
    margin-bottom: 20px !important;
}

/* 2. Kartice naloženih datotek */
.example-card,
mat-card {
    background: rgba(30, 41, 59, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(249, 115, 22, 0.1) !important;
    border-radius: 16px !important;
    color: #ffd8a8 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Gumbi znotraj kartic (IZBRIŠI, PRENOS) */
mat-card-actions button {
    color: #f97316 !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

mat-card-actions button:hover {
    background: rgba(249, 115, 22, 0.1) !important;
}

/* =========================================================
   MODERNIZACIJA V2: POSTAVITEV, VELIKOST IN OBLIKA
   ========================================================= */

/* =========================================================
   RADIKALNA MODERNIZACIJA (v3): NEON GLASS UI
   ========================================================= */

/* 1. Drag & Drop kontejner - Popolna preobrazba */
.dragDropContainer {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
    backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    /* Tanek, eleganten rob */
    border-radius: 40px !important;
    /* Še bolj soft robovi */
    padding: 80px 40px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(249, 115, 22, 0.05) !important;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.dragDropContainer::before {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(249, 115, 22, 0.1) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.dragDropContainer:hover {
    transform: translateY(-10px) scale(1.02) !important;
    border-color: rgba(249, 115, 22, 0.6) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(249, 115, 22, 0.2) !important;
}

/* Ikona za nalaganje - NEON GLOW */
.dragDropContainer i.fa-upload {
    font-size: 5rem !important;
    color: #f97316 !important;
    text-shadow: 0 0 20px rgba(249, 115, 22, 0.8) !important;
    margin-bottom: 30px !important;
}

/* 2. Gumb "Dodaj" - 3D PREMIUM GUMB (BRUTAL FORCE WHITE TEXT) */
.dragDropContainer button,
.dragDropContainer button *,
.dragDropContainer .mat-raised-button,
.dragDropContainer .mat-raised-button *,
.dragDropContainer .mat-button-wrapper,
.dragDropContainer .mat-button-wrapper * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.dragDropContainer button.mat-raised-button,
.dragDropContainer .mat-primary,
.dragDropContainer button {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    border-radius: 20px !important;
    padding: 15px 40px !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.dragDropContainer button:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 15px 30px rgba(234, 88, 12, 0.6) !important;
}

/* 3. Kartice na desni - FLOATING EFFECT */
mat-card {
    background: rgba(30, 41, 59, 0.6) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 30px !important;
    margin: 15px !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

/* 4. Levi meni - HIGH END SIDEBAR */
app-uredi-task .col-md-2 {
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), rgba(2, 6, 17, 0.9)) !important;
    border-right: 1px solid rgba(249, 115, 22, 0.1) !important;
    padding: 40px 20px !important;
}

/* Aktivne povezave z GLOW črto */
.sidebar-container a.active,
app-uredi-task .col-md-2 a[style*="orange"] {
    background: rgba(249, 115, 22, 0.1) !important;
    border-left: 5px solid #f97316 !important;
    box-shadow: inset 10px 0 20px rgba(249, 115, 22, 0.05) !important;
    color: #f97316 !important;
    font-weight: 900 !important;
}

/* 11. Napredni poudarki in mikro-animacije */
.dragDropContainer h3 {
    text-shadow: 0 0 15px rgba(249, 115, 22, 0.2) !important;
    animation: fadeInSlide 0.8s ease-out !important;
}

/* Poseben Neon učinek za prazno mapo */
mat-card i.fa-folder {
    color: #f97316 !important;
    opacity: 0.4 !important;
    font-size: 6rem !important;
    margin-bottom: 25px !important;
    filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.3)) !important;
    transition: all 0.5s ease !important;
}

mat-card:hover i.fa-folder {
    opacity: 0.8 !important;
    transform: scale(1.1) rotate(-5deg) !important;
    filter: drop-shadow(0 0 30px rgba(249, 115, 22, 0.5)) !important;
}

/* Animacija za vstop elementov */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 12. Popravek za sence in globino celotne sekcije */
app-uredi-task .desktopHide {
    perspective: 1000px !important;
}

/* Mehak prehod za vse interaktivne elemente */
* {
    transition: background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 6. Detajli: Gumb "Pošlji datoteke" */
.buttonBilumina,
app-uredi-task button[color="primary"].buttonBilumina {
    width: 100% !important;
    max-width: 250px !important;
    height: 50px !important;
    border-radius: 25px !important;
    font-size: 1rem !important;
    margin-top: 20px !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    box-shadow: 0 10px 20px rgba(234, 88, 12, 0.3) !important;
    transition: all 0.3s ease !important;
}

.buttonBilumina:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px rgba(234, 88, 12, 0.5) !important;
}

/* 7. Ikona za brisanje (Koš) */
.fa-trash {
    color: rgba(239, 68, 68, 0.6) !important;
    /* Soft red */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    padding: 10px !important;
    border-radius: 50% !important;
}

.fa-trash:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
    transform: scale(1.2) rotate(5deg) !important;
}

/* 8. Števec datotek (Badge) */
.mat-badge-content {
    background-color: #f97316 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* 9. Moderni drsniki (Scrollbars) */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3) !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.2) !important;
    border-radius: 10px !important;
    transition: background 0.3s ease !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.5) !important;
}

/* 10. Besedilo in imena datotek v seznamu */
app-uredi-task p[fxLayoutAlign="none center"] {
    color: #ffd8a8 !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* Popravek za "Na to nalogo še ni dodanih datotek" */
mat-card div h5 {
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
}

/* =========================================================
   MODERNIZACIJA: DOLOČI PROCES & VPRAŠALNIKI
   ========================================================= */

/* 1. Odstranitev trdo kodiranih beige/belih ozadij */
[style*="background-color: #FFE8BF"],
[style*="background-color: #FFF5E3"],
[style*="background-color: white"],
[style*="background-color:white"],
.example-container {
    background: rgba(30, 41, 59, 0.5) !important;
    background-color: rgba(30, 41, 59, 0.5) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(249, 115, 22, 0.1) !important;
    color: #ffd8a8 !important;
}

/* 2. Prisilno barvanje besedila v beige celicah */
td[style*="background-color"],
th[style*="background-color"] {
    color: #ffd8a8 !important;
    border-bottom: 1px solid rgba(249, 115, 22, 0.1) !important;
}

/* 3. Poseben poudarek za krepko besedilo (kode procesov) */
td[style*="font-weight: bold"] {
    color: #f97316 !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
}

/* 4. Vnosna polja (Iskalni niz, Dodaj vprašanje...) */
mat-form-field {
    background: rgba(15, 23, 42, 0.4) !important;
    border-radius: 12px !important;
    padding: 5px 15px !important;
    transition: all 0.3s ease !important;
}

mat-form-field:focus-within {
    background: rgba(249, 115, 22, 0.05) !important;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.1) !important;
}

/* 5. Gumbi na dnu (Zaključi, Shrani) */
.buttonBilumina {
    min-width: 180px !important;
    height: 55px !important;
    border-radius: 28px !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.4) !important;
}

/* 6. Ikone za dodajanje in osveževanje */
.addIcons,
[style*="color: lightgreen"],
[style*="color: goldenrod"] {
    color: #f97316 !important;
    /* Poenotimo v oranžno */
    filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.5)) !important;
    transform: scale(1.3) !important;
}

/* 7. Popravek za "zoom_out_map" in ostale ikone v vrstici */
mat-icon[style*="cursor: pointer"] {
    color: #f97316 !important;
    transition: all 0.3s ease !important;
}

mat-icon[style*="cursor: pointer"]:hover {
    transform: scale(1.4) rotate(10deg) !important;
    color: #fb923c !important;
}

/* 5. Vnosna polja in Partner dropdown */
app-uredi-task input,
app-uredi-task select,
app-uredi-task textarea,
.mat-select-trigger {
    background: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: #fff !important;
    padding: 10px 15px !important;
    width: 100% !important;
}

app-uredi-task input:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* =========================================================
   ZADNJI POPRAVKI ZA VIDLJIVOST (FORCE WHITE & ORANGE)
   ========================================================= */

/* =========================================================
   PREMIUM MODERN LAYOUT (v4) - MATCHING REFERENCE IMAGE
   ========================================================= */

/* 1. TOP NAVIGATION TABS (Pill-shaped) */
/* Target buttons that act as tabs in the header section */
.mat-tab-link,
.nav-tabs .nav-link,
.top-nav-buttons button,
[fxLayout]>button[mat-button],
[fxLayout]>button[mat-raised-button] {
    border-radius: 50px !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
    background: transparent !important;
    color: #f97316 !important;
    padding: 8px 25px !important;
    margin: 0 5px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

/* Active tab state - ONLY for navigation, not general buttons */
.mat-tab-link-active,
.nav-link.active,
button.active-tab,
.top-nav-buttons button.active {
    background: #007bff !important;
    /* Blue from image - kept for navigation only */
    color: #ffffff !important;
    border-color: #007bff !important;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important;
}

/* 2. MAIN CONTENT CARD (Glass Container) */
.main-content-container,
.mat-card.content-card,
[style*="background-color: white"],
[style*="background-color: #fff"] {
    background: rgba(30, 41, 59, 0.4) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 30px !important;
    padding: 30px !important;
    margin-top: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

/* 3. DROPDOWNS & INPUTS REFINEMENT */
.mat-form-field-appearance-outline .mat-form-field-outline {
    border-radius: 12px !important;
    color: rgba(249, 115, 22, 0.3) !important;
}

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: #f97316 !important;
}

/* Labels above inputs */
.mat-form-field-label-wrapper {
    top: -1.2em !important;
}

.mat-form-field-label {
    color: #f97316 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

/* 4. PREMIUM LIST ITEMS (Gradient Bars) */
.mat-header-row,
tr.mat-header-row,
.mat-row,
tr.mat-row,
.table thead tr,
.table tbody tr,
.process-item-row {
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
    width: 100% !important;
    min-width: 1000px !important;
    /* Ensure enough width for many columns */
    box-sizing: border-box !important;
}

.mat-row,
tr.mat-row,
.table tbody tr {
    background: linear-gradient(to right, #0a1425, #1e293b, #0a1425) !important;
    border: 1px solid rgba(249, 115, 22, 0.1) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    min-height: 60px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Header Row specific */
.mat-header-row,
tr.mat-header-row,
thead tr {
    background: transparent !important;
    border: none !important;
    margin-bottom: 5px !important;
}

/* Hide empty or redundant rows/bars */
.mat-row:empty,
tr:empty,
.mat-row[style*="display: none"],
.mat-row:not(:has(.mat-cell)) {
    display: none !important;
}

/* More compact vertical spacing */
.mat-table,
.table {
    border-spacing: 0 6px !important;
    /* Reduced from 12px */
}

/* Content inside bars and headers - DEFAULT ALIGNMENT */
.mat-header-cell,
th,
.mat-cell,
td {
    border: none !important;
    padding: 8px 10px !important;
    color: #ffffff !important;
}

/* =========================================
   1. DATA TABLES (Helpdesk, Monitor, Processes) 
   ========================================= */
app-pregled-helpdeska .mat-header-cell,
app-pregled-helpdeska th,
app-pregled-helpdeska .mat-cell,
app-pregled-helpdeska td,
app-monitor .mat-header-cell,
app-monitor th,
app-monitor .mat-cell,
app-monitor td,
app-proccesses .mat-header-cell,
app-proccesses th,
app-processes .mat-header-cell,
app-processes th,
app-proccesses .mat-cell,
app-proccesses td,
app-processes .mat-cell,
app-processes td {
    flex: 1 1 0% !important;
    /* EXACT SYNC for columns */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0 !important;
}

/* HEADERS (ZGORNJE BESEDE) - Wrap text in data tables */
app-pregled-helpdeska .mat-header-cell,
app-pregled-helpdeska th,
app-monitor .mat-header-cell,
app-monitor th,
app-proccesses .mat-header-cell,
app-proccesses th,
app-processes .mat-header-cell,
app-processes th {
    white-space: normal !important;
    overflow: visible !important;
    line-height: 1.2 !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    color: #f97316 !important;
    padding-bottom: 10px !important;
}

/* ROWS (PODATKI) - Truncate in data tables */
app-pregled-helpdeska .mat-cell,
app-pregled-helpdeska td,
app-monitor .mat-cell,
app-monitor td,
app-proccesses .mat-cell,
app-proccesses td,
app-processes .mat-cell,
app-processes td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.85rem !important;
}

/* Ensure data table rows don't overflow */
app-pregled-helpdeska .mat-header-row,
app-pregled-helpdeska tr.mat-header-row,
app-pregled-helpdeska .mat-row,
app-pregled-helpdeska tr.mat-row,
app-monitor .mat-header-row,
app-monitor tr.mat-header-row,
app-monitor .mat-row,
app-monitor tr.mat-row,
app-proccesses .mat-header-row,
app-proccesses tr.mat-header-row,
app-proccesses .mat-row,
app-proccesses tr.mat-row,
app-processes .mat-header-row,
app-processes tr.mat-header-row,
app-processes .mat-row,
app-processes tr.mat-row {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
}

/* =========================================
   HELPDESK MAIN TABLE COLUMN WIDTHS
   ========================================= */
/* Expand the TEKST column safely */
app-pregled-helpdeska #mainTable .mat-column-text {
    flex: 4 1 0% !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 15px !important;
}

/* Squeeze ALL right-side icons safely */
app-pregled-helpdeska #mainTable .mat-column-completed,
app-pregled-helpdeska #mainTable .mat-column-toProcessButton,
app-pregled-helpdeska #mainTable .mat-column-uredi,
app-pregled-helpdeska #mainTable .mat-column-addDaysButton,
app-pregled-helpdeska #mainTable .mat-column-toHelpdeskTabButton {
    flex: 0 0 50px !important;
    min-width: 50px !important;
    padding: 0 5px !important;
}

/* Center the entire table container - RESPONSIVE */
#tableContainer,
.main-content-container,
.container-fluid,
.content-wrapper,
.dragDropContainer,
.body-content {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    width: 98% !important;
    display: block !important;
}

/* Center the entire table container and its parent wrappers */
#tableContainer,
.main-content-container,
.container-fluid,
.content-wrapper,
.dragDropContainer,
.body-content {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1350px !important;
    width: 95% !important;
    display: block !important;
    clear: both !important;
}

/* 9. MONITOR PAGE SPECIFIC ALIGNMENT & CENTERING */
app-monitor .mat-table,
app-monitor .table,
app-monitor #tableContainer,
app-monitor .monitor-icons-wrapper,
app-monitor .table-header-icons-line {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1350px !important;
    width: 95% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Force icons to be centered on Monitor */
app-monitor .monitor-icons-wrapper,
app-monitor .table-header-icons-line {
    flex-direction: row !important;
    justify-content: center !important;
    margin-bottom: 25px !important;
}

/* Ensure column alignment is PERFECT on Monitor */
app-monitor .mat-header-cell,
app-monitor th,
app-monitor .mat-cell,
app-monitor td {
    flex: 1 1 0% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 80px !important;
}

/* Balanced column weights for Monitor */
app-monitor .mat-header-cell:nth-child(4),
app-monitor .mat-cell:nth-child(4) {
    flex: 2 1 0% !important;
    /* Method column */
}

app-monitor .mat-header-row,
app-monitor .mat-row {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* Removed redundant first-column constraints that caused overlaps */

/* Specific fix for the top icons/numbers to center them without breaking general layout */
.table-header-icons-line,
.monitor-icons-wrapper,
.padTop .row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding-left: 0 !important;
}

/* Force the main content area to not be glued to the left, but be careful not to break the drawer */
.mat-drawer-content>div:not(.mat-toolbar),
main>div,
.content-wrapper>div {
    padding-left: 50px !important;
}

.mat-cell:last-child i,
td:last-child i,
.mat-cell:last-child mat-icon,
td:last-child mat-icon {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
}

.mat-cell:last-child i:hover,
td:last-child i:hover {
    opacity: 1 !important;
    transform: scale(1.2) !important;
    color: #f97316 !important;
}

/* Hover effect for the whole bar */
.mat-row:hover,
tr.mat-row:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
        inset 0 0 10px rgba(249, 115, 22, 0.1) !important;
    border-color: rgba(249, 115, 22, 0.4) !important;
    background: linear-gradient(to right, #0f1a2e, #25334d, #0f1a2e) !important;
}

/* Search Bar with Plus Icon */
.search-container {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 25px !important;
}

.search-container input {
    width: 100% !important;
    padding-right: 45px !important;
}

.search-container .plus-icon {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #f97316 !important;
    cursor: pointer !important;
    font-size: 1.5rem !important;
}

/* Header Status Info (Yellow Dot) */
.header-info-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding: 0 10px !important;
}

.status-dot-yellow {
    width: 15px !important;
    height: 15px !important;
    background: #ffeb3b !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin-right: 10px !important;
    box-shadow: 0 0 10px rgba(255, 235, 59, 0.6) !important;
}

.header-code {
    color: #ffd8a8 !important;
    font-family: monospace !important;
    font-size: 1.1rem !important;
}

.header-user-name {
    color: #ffd8a8 !important;
    font-weight: 500 !important;
}

/* 10. ANALYSIS PAGE (Analiza) FIXES - ULTRA AGGRESSIVE */
app-analiza,
app-analiza * {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Sidebar specifically */
app-analiza .col-md-2,
app-analiza .col-md-3,
.analiza-sidebar {
    background-color: #0f172a !important;
    min-height: 100vh !important;
    display: block !important;
    overflow-y: auto !important;
}

/* The jarring white sidebar container fix */
app-analiza>div,
app-analiza>.row,
[style*="background-color: white"],
[style*="background-color: #ffffff"] {
    background-color: #0a1425 !important;
}

/* Styling the cards (Filter groups) */
app-analiza .mat-card {
    background: rgba(30, 41, 59, 0.9) !important;
    border: 1px solid rgba(249, 115, 22, 0.4) !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* 11. TASK EDIT & PROCESSES (Določi proces) FIXES */
/* Navigation Sidebar in Task Edit */
.task-edit-sidebar,
.mat-nav-list,
.mat-list-base {
    background: rgba(15, 23, 42, 0.5) !important;
    border-radius: 15px !important;
    padding: 10px !important;
}

/* Sidebar buttons styling */
.task-edit-sidebar button,
.task-edit-sidebar a,
.mat-list-item {
    color: #ffffff !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

.task-edit-sidebar button:hover,
.task-edit-sidebar .active-link,
.mat-list-item.active {
    background: rgba(249, 115, 22, 0.15) !important;
    color: #f97316 !important;
    border-left: 3px solid #f97316 !important;
}

/* Task Details Layout - TWO SEGMENTS (2 Columns) */
app-task-edit .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
}

/* =========================================
   TASK DETAILS LAYOUT (Podrobnosti) - 2 Columns
   ========================================= */
app-task-edit .row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    /* Back to side-by-side */
    justify-content: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
}

/* Podrobnosti columns side-by-side */
app-task-edit .col-md-6 {
    flex: 1 1 45% !important;
    max-width: 48% !important;
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
}

/* Row content - CLEAR GAP BETWEEN LABEL AND VALUE */
app-task-edit .mat-row,
app-task-edit tr {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    min-height: 35px !important;
}

/* Label Cell (Left Side) - ONLY FOR TASK EDIT */
app-task-edit .mat-cell:first-child {
    flex: 0 0 180px !important;
    /* Fixed width for label */
    padding-left: 15px !important;
    padding-right: 20px !important;
    color: #f97316 !important;
    font-weight: 700 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* =========================================
   12. DOLOČI PROCES — CLEAN COMPACT REDESIGN
   Covers: app-proccesses, app-processes, app-doloci-proces
   ========================================= */

/* --- LAYOUT: Stack sections vertically, full width --- */
app-proccesses [style*="flex-direction: row"],
app-processes [style*="flex-direction: row"],
app-doloci-proces [style*="flex-direction: row"] {
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
}

app-proccesses [style*="flex-direction: row"]>div,
app-processes [style*="flex-direction: row"]>div,
app-doloci-proces [style*="flex-direction: row"]>div {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- NUKE old beige/white inline backgrounds --- */
app-proccesses [style*="background-color: rgb(255, 232, 191)"],
app-proccesses [style*="background-color: #FFE8BF"],
app-proccesses [style*="background-color: #FFF5E3"],
app-proccesses [style*="background-color: white"],
app-proccesses [style*="background: white"],
app-processes [style*="background-color: rgb(255, 232, 191)"],
app-processes [style*="background-color: #FFE8BF"],
app-processes [style*="background-color: #FFF5E3"],
app-processes [style*="background-color: white"],
app-processes [style*="background: white"],
app-doloci-proces [style*="background-color: rgb(255, 232, 191)"],
app-doloci-proces [style*="background-color: #FFE8BF"],
app-doloci-proces [style*="background-color: #FFF5E3"],
app-doloci-proces [style*="background-color: white"],
app-doloci-proces [style*="background: white"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* --- TABLE: Clean flat look, no bloated cards --- */
app-proccesses .mat-table,
app-processes .mat-table,
app-doloci-proces .mat-table {
    background: transparent !important;
    box-shadow: none !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

/* --- HEADER CELLS: Tiny uppercase labels --- */
app-proccesses th.mat-header-cell,
app-proccesses .mat-header-cell,
app-processes th.mat-header-cell,
app-processes .mat-header-cell,
app-doloci-proces th.mat-header-cell,
app-doloci-proces .mat-header-cell,
app-doloci-proces th {
    color: rgba(249, 115, 22, 0.7) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
    padding: 4px 6px !important;
    border-bottom: 1px solid rgba(249, 115, 22, 0.15) !important;
    border-top: none !important;
    background: transparent !important;
    white-space: nowrap !important;
    flex: 1 1 0% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* --- DATA CELLS: Small, clean, readable --- */
app-proccesses td.mat-cell,
app-proccesses .mat-cell,
app-processes td.mat-cell,
app-processes .mat-cell,
app-doloci-proces td.mat-cell,
app-doloci-proces .mat-cell,
app-doloci-proces td {
    color: #cbd5e1 !important;
    font-size: 0.75rem !important;
    padding: 3px 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-top: none !important;
    background: transparent !important;
    line-height: 1.3 !important;
    flex: 1 1 0% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* First column: slightly wider + accent color for codes/IDs */
app-proccesses .mat-cell:first-child,
app-proccesses .mat-header-cell:first-child,
app-processes .mat-cell:first-child,
app-processes .mat-header-cell:first-child,
app-doloci-proces .mat-cell:first-child,
app-doloci-proces .mat-header-cell:first-child {
    flex: 1.3 1 0% !important;
    font-weight: 600 !important;
    color: #fbbf24 !important;
}

/* --- HEADER ROW: invisible bg, just the bottom line --- */
app-proccesses .mat-header-row,
app-proccesses tr.mat-header-row,
app-processes .mat-header-row,
app-processes tr.mat-header-row,
app-doloci-proces .mat-header-row,
app-doloci-proces tr.mat-header-row {
    background: transparent !important;
    border: none !important;
    min-height: 24px !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* --- DATA ROWS: Tight, flat, subtle stripe --- */
app-proccesses .mat-row,
app-proccesses tr.mat-row,
app-processes .mat-row,
app-processes tr.mat-row,
app-doloci-proces .mat-row,
app-doloci-proces tr.mat-row {
    min-height: 30px !important;
    max-height: 36px !important;
    margin-bottom: 0 !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
    cursor: pointer !important;
    transform: none !important;
}

/* Alternating row tint */
app-proccesses tr.mat-row:nth-child(even),
app-processes tr.mat-row:nth-child(even),
app-doloci-proces tr.mat-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Hover: subtle warm highlight */
app-proccesses tr.mat-row:hover,
app-processes tr.mat-row:hover,
app-doloci-proces tr.mat-row:hover {
    background-color: rgba(249, 115, 22, 0.06) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* --- TABLE WRAPPER CARDS: Slim, clean, no heavy borders --- */
app-proccesses .example-container,
app-proccesses .mat-elevation-z1,
app-processes .example-container,
app-processes .mat-elevation-z1,
app-doloci-proces .example-container,
app-doloci-proces .mat-elevation-z1 {
    background: rgba(10, 18, 35, 0.5) !important;
    border: none !important;
    border-left: 2px solid rgba(249, 115, 22, 0.3) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
    padding: 6px 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
}

/* --- ICONS: Smaller, muted --- */
app-proccesses mat-icon,
app-processes mat-icon,
app-doloci-proces mat-icon {
    color: rgba(249, 115, 22, 0.65) !important;
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    transition: color 0.15s ease !important;
}

app-proccesses mat-icon:hover,
app-processes mat-icon:hover,
app-doloci-proces mat-icon:hover {
    color: #f97316 !important;
}

/* --- FORM FIELDS: Compact inputs --- */
app-proccesses .mat-form-field,
app-processes .mat-form-field,
app-doloci-proces .mat-form-field {
    width: 100% !important;
    margin-bottom: -8px !important;
}

app-proccesses input,
app-processes input,
app-doloci-proces input {
    background: rgba(15, 23, 42, 0.4) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: white !important;
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
}

app-proccesses input:focus,
app-processes input:focus,
app-doloci-proces input:focus {
    border-color: rgba(249, 115, 22, 0.4) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.08) !important;
}

app-proccesses label,
app-processes label,
app-doloci-proces label {
    color: rgba(249, 115, 22, 0.7) !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* --- TEXTAREA (Zapiski): Clean, compact --- */
app-proccesses textarea,
app-processes textarea,
app-doloci-proces textarea {
    background: rgba(10, 18, 35, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    color: #e2e8f0 !important;
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    resize: vertical !important;
}

app-proccesses textarea:focus,
app-processes textarea:focus,
app-doloci-proces textarea:focus {
    border-color: rgba(249, 115, 22, 0.35) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.06) !important;
}

/* --- BUTTONS: Smaller, pill-shaped, refined --- */
app-proccesses button,
app-processes button,
app-doloci-proces button {
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    padding: 4px 12px !important;
    min-height: 30px !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

/* "Zaključi" / Primary action buttons */
app-proccesses button[color="primary"],
app-processes button[color="primary"],
app-doloci-proces button[color="primary"],
app-proccesses .buttonBilumina,
app-processes .buttonBilumina,
app-doloci-proces .buttonBilumina {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.2) !important;
    padding: 6px 20px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

app-proccesses button[color="primary"]:hover,
app-processes button[color="primary"]:hover,
app-doloci-proces button[color="primary"]:hover {
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Value Cell (Right Side) - ONLY FOR TASK EDIT */
app-task-edit .mat-cell:last-child {
    flex: 1 1 auto !important;
    padding-left: 20px !important;
    /* GAP after the separator */
    text-align: left !important;
    justify-content: flex-start !important;
    color: #ffffff !important;
}

/* Mobile fix - stack columns if screen is too narrow */
@media (max-width: 1000px) {
    app-task-edit .col-md-6 {
        max-width: 95% !important;
        flex: 1 1 100% !important;
    }
}

/* =========================================
   DOLOČI PROCES TAB — Section layout overrides
   ========================================= */

/* Section cards: full width, slim, clean */
app-task-edit app-proccesses .col-md-6,
app-task-edit app-proccesses .col-md-5,
app-task-edit app-proccesses .col-md-7,
app-proccesses .col-md-6,
app-doloci-proces .col-md-6,
app-doloci-proces .col-md-5,
app-doloci-proces .col-md-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    background: rgba(15, 23, 42, 0.3) !important;
    border: none !important;
    border-left: 2px solid rgba(249, 115, 22, 0.2) !important;
    border-radius: 4px !important;
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
}

/* Row container: stack vertically */
app-task-edit app-proccesses .row,
app-proccesses .row,
app-doloci-proces .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Specific fix for the top header info bar in task edit */
.task-header-bar {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
    border-radius: 50px !important;
    padding: 10px 30px !important;
    margin-bottom: 30px !important;
}

/* Styling ALL filter labels */
app-analiza label,
app-analiza .mat-form-field-label,
app-analiza h4,
app-analiza h5,
app-analiza p,
app-analiza span {
    color: #f97316 !important;
    font-weight: 700 !important;
}

/* Styling ALL filter inputs and controls */
app-analiza input,
app-analiza select,
app-analiza .mat-form-field,
app-analiza .mat-checkbox-frame,
app-analiza .mat-radio-outer-circle,
app-analiza .mat-select-trigger {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
    color: white !important;
}

/* Color circles container fix */
app-analiza [style*="display: inline-block"] {
    background-color: transparent !important;
}

/* Force visible scrollbars */
::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

::-webkit-scrollbar-thumb {
    background: #f97316 !important;
    border-radius: 5px !important;
}

/* =========================================
   10. E-MAIL & MESSAGE VIEW MODERNIZATION
   ========================================= */

/* Main message container inside tabs */
app-task-edit .mat-tab-body-content,
app-task-edit .mail-content,
app-task-edit .message-body,
app-uredi-task .mat-tab-body-content,
app-uredi-task .mail-content,
app-uredi-task .message-body,
app-mail-content {
    padding: 25px !important;
}

/* Override any inline orange/dark text colors from rich text editors and emails */
app-task-edit .mat-tab-body-content p,
app-task-edit .mat-tab-body-content span,
app-task-edit .mat-tab-body-content div,
app-task-edit .mat-tab-body-content font,
app-uredi-task .mat-tab-body-content p,
app-uredi-task .mat-tab-body-content span,
app-uredi-task .mat-tab-body-content div,
app-uredi-task .mat-tab-body-content font,
app-uredi-task .overflow-auto,
app-uredi-task .overflow-auto *,
app-mail-content,
app-mail-content * {
    color: #e2e8f0 !important;
    /* Soft white instead of orange/dark */
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
}

/* Make sure the form labels in the other tabs stay orange */
app-task-edit .mat-cell:first-child,
app-task-edit .mat-cell:first-child span,
app-task-edit .mat-cell:first-child div,
app-uredi-task .mat-cell:first-child,
app-uredi-task .mat-cell:first-child span,
app-uredi-task .mat-cell:first-child div {
    color: #f97316 !important;
}

/* Premium links inside emails */
app-task-edit .mat-tab-body-content a,
app-uredi-task .mat-tab-body-content a,
app-uredi-task .overflow-auto a,
app-uredi-task .overflow-auto a *,
app-mail-content a,
app-mail-content a * {
    color: #38bdf8 !important;
    /* Cyber cyan for modern contrast */
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border-bottom: 1px solid transparent !important;
}

app-task-edit .mat-tab-body-content a:hover,
app-uredi-task .mat-tab-body-content a:hover,
app-uredi-task .overflow-auto a:hover,
app-uredi-task .overflow-auto a *:hover,
app-mail-content a:hover,
app-mail-content a *:hover {
    color: #7dd3fc !important;
    border-bottom: 1px solid #7dd3fc !important;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
}

/* Signature dividers */
app-task-edit .mat-tab-body-content hr,
app-uredi-task .mat-tab-body-content hr,
app-uredi-task .overflow-auto hr,
app-mail-content hr {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 20px 0 !important;
}

/* Styling for images/broken images inside emails */
app-task-edit .mat-tab-body-content img,
app-uredi-task .mat-tab-body-content img,
app-uredi-task .overflow-auto img,
app-mail-content img {
    max-width: 100% !important;
    border-radius: 8px !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    background: rgba(15, 23, 42, 0.5) !important;
    padding: 5px !important;
    margin-top: 15px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Wrap the actual mail text in a subtle glass card (if it has a parent wrapper) */
app-task-edit .mat-tab-body-content>div:not(.mat-table):not(.row),
app-uredi-task .mat-tab-body-content>div:not(.mat-table):not(.row),
app-uredi-task .overflow-auto,
app-mail-content>div:not(.mat-table):not(.row) {
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

/* =========================================
   📱 MOBILE RESPONSIVE (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {

    /* --- SIDEBAR (Navigation) --- */
    .mat-sidenav,
    mat-sidenav,
    .sidenav {
        width: 220px !important;
        min-width: 0 !important;
    }

    /* Hide sidebar text labels when drawer is closed */
    .mat-sidenav-container .mat-list-item-content span {
        font-size: 0.85rem !important;
    }

    /* --- HEADER BAR --- */
    mat-toolbar,
    .mat-toolbar {
        padding: 0 8px !important;
        font-size: 0.9rem !important;
    }

    mat-toolbar .mat-icon-button {
        width: 36px !important;
        height: 36px !important;
    }

    /* --- GLOBAL CONTENT AREA --- */
    .mat-sidenav-content,
    mat-sidenav-content {
        padding: 8px !important;
    }

    /* --- TASK EDIT - Podrobnosti (details tab) --- */
    /* Stack the two column layout to single column on mobile */
    app-task-edit .row {
        flex-direction: column !important;
    }

    app-task-edit .col-md-6 {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* --- HELPDESK TABLE --- */
    /* Hide some non-essential columns on very small screens */
    app-pregled-helpdeska #mainTable .mat-column-naslednji_kontakt,
    app-pregled-helpdeska #mainTable .mat-column-trajanje {
        display: none !important;
    }

    app-pregled-helpdeska #mainTable .mat-column-text {
        flex: 3 1 0% !important;
        font-size: 0.8rem !important;
    }

    app-pregled-helpdeska #mainTable .mat-column-completed,
    app-pregled-helpdeska #mainTable .mat-column-toProcessButton,
    app-pregled-helpdeska #mainTable .mat-column-uredi,
    app-pregled-helpdeska #mainTable .mat-column-addDaysButton,
    app-pregled-helpdeska #mainTable .mat-column-toHelpdeskTabButton {
        flex: 0 0 38px !important;
        min-width: 38px !important;
        padding: 0 2px !important;
    }

    app-pregled-helpdeska #mainTable .mat-column-completed mat-icon,
    app-pregled-helpdeska #mainTable mat-icon {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
    }

    /* --- DOLOČI PROCES --- */
    app-doloci-proces td.mat-cell,
    app-doloci-proces th.mat-header-cell {
        padding: 3px 6px !important;
        font-size: 0.78rem !important;
    }

    app-doloci-proces .example-container,
    app-doloci-proces .mat-elevation-z1 {
        margin-bottom: 8px !important;
        border-radius: 6px !important;
    }

    /* Hide the OPIS description column on mobile - saves huge space */
    app-doloci-proces .mat-column-opis {
        display: none !important;
    }

    /* --- GENERAL TABLES --- */
    td.mat-cell,
    th.mat-header-cell {
        padding: 6px 8px !important;
        font-size: 0.82rem !important;
    }

    /* --- TABS --- */
    .mat-tab-label {
        min-width: 80px !important;
        padding: 0 10px !important;
        font-size: 0.75rem !important;
    }

    /* --- BUTTONS --- */
    .mat-raised-button,
    .mat-flat-button,
    .mat-stroked-button {
        font-size: 0.8rem !important;
        padding: 0 10px !important;
        min-width: 0 !important;
    }

    /* --- NAZAJ (Back) BUTTON --- */
    .back-button,
    [routerlink*="nazaj"],
    button[color="primary"] {
        font-size: 0.8rem !important;
        padding: 4px 10px !important;
    }
}

/* =========================================
   GLOBAL OVERLAYS (Dropdowns, Selects, Menus)
   ========================================= */

/* The main overlay container */
.cdk-overlay-pane .mat-select-panel,
.cdk-overlay-pane .mat-autocomplete-panel,
.cdk-overlay-pane .mat-menu-panel,
.mat-select-panel,
.mat-autocomplete-panel,
.mat-menu-panel {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 15px rgba(249, 115, 22, 0.05) !important;
}

/* The options inside the dropdown */
.mat-option,
.mat-menu-item {
    color: #e2e8f0 !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important;
}

/* Hover state for options */
.mat-option:hover:not(.mat-option-disabled),
.mat-option.mat-active,
.mat-menu-item:hover:not([disabled]) {
    background: rgba(249, 115, 22, 0.15) !important;
    color: #f97316 !important;
}

/* Selected state */
.mat-option.mat-selected:not(.mat-option-multiple) {
    background: rgba(249, 115, 22, 0.25) !important;
    color: #f97316 !important;
    font-weight: 700 !important;
}

/* The search input inside the panel (ngx-mat-select-search) */
.mat-select-search-inner,
.mat-select-panel .mat-form-field {
    background: rgba(10, 18, 35, 0.8) !important;
    border-bottom: 1px solid rgba(249, 115, 22, 0.2) !important;
}

.mat-select-search-inner input,
.mat-select-panel input {
    color: #ffffff !important;
    font-size: 0.85rem !important;
}

.mat-select-search-inner .mat-icon,
.mat-select-panel .mat-icon {
    color: #f97316 !important;
}

/* Fix text colors inside options */
.mat-option-text {
    color: inherit !important;
}

/* Center partner name and position search icon inside the input on the right */
app-task-edit .mat-column-name .mat-form-field-infix,
app-uredi-task .mat-column-name .mat-form-field-infix {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

app-task-edit .mat-column-name input,
app-uredi-task .mat-column-name input {
    text-align: center !important;
    padding-right: 40px !important;
    width: 100% !important;
}

app-task-edit .mat-column-name i.fa-search,
app-uredi-task .mat-column-name i.fa-search {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    color: #f97316 !important;
    font-size: 1.1rem !important;
    pointer-events: none !important;
    display: inline-block !important;
}