:root { --crm-ink: #17213a; --crm-muted: #5c6a82; --crm-line: #e5e9f2; --crm-panel: #ffffff; --crm-surface: #f5f7fc; --crm-primary: #3657d6; --crm-primary-dark: #223aa7; --crm-ring: rgba(54, 87, 214, .2); } html, body { background: var(--crm-surface) !important; } body { color: var(--crm-ink) !important; } button, input, textarea, select { font: inherit; } button { -webkit-tap-highlight-color: transparent; } button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--crm-ring) !important; outline-offset: 2px; } .login-bg { background: radial-gradient(circle at 12% 10%, rgba(88, 121, 255, .32), transparent 31rem), radial-gradient(circle at 85% 86%, rgba(139, 92, 246, .30), transparent 28rem), linear-gradient(135deg, #101a4a 0%, #182c78 52%, #111a42 100%) !important; } .login-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, black, transparent 72%); } #loginSection > div { width: min(100%, 27rem); } #loginSection .text-center { position: relative; } #loginSection .text-center > div, #loginSection .bg-white\/10 { background: rgba(11, 21, 57, .58) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: 0 28px 65px rgba(1, 7, 27, .42) !important; } #loginSection .bg-white\/10 { border-radius: 1.5rem !important; } #loginSection .input-clean { background: rgba(3, 10, 33, .45) !important; border-color: rgba(255,255,255,.13) !important; } #loginSection .input-clean:focus { border-color: #8ba0ff !important; box-shadow: 0 0 0 4px rgba(139,160,255,.18) !important; } #appSection { background: var(--crm-surface) !important; } #appSection { display: flex !important; } /* Mora nadjačati opće pravilo display:flex dok se provjerava sesija. */ #appSection.hidden { display: none !important; } #appSection > div.flex-1 { display: flex !important; flex: 1 1 auto; flex-direction: column; min-width: 0; height: 100%; position: relative; } #glavniScrollKontejner { flex: 1 1 auto; min-height: 0; overflow-y: auto; } #appSection > aside { width: 17.25rem !important; color: #e6ebff; border-color: rgba(255,255,255,.08) !important; background: linear-gradient(180deg, #15214e 0%, #111a3d 100%) !important; box-shadow: 18px 0 45px rgba(15, 23, 62, .08) !important; } #appSection > aside > div:first-child, #appSection > aside > div:last-child { border-color: rgba(255,255,255,.09) !important; } #appSection > aside h1, #appSection > aside .text-slate-800, #appSection > aside .text-slate-600 { color: #f7f8ff !important; } #appSection > aside .text-slate-400 { color: #aeb9df !important; } #appSection > aside .bg-slate-100 { background: rgba(255,255,255,.10) !important; color: #f7f8ff !important; } #appSection > aside nav button { color: #c9d2ef !important; border: 1px solid transparent; } #appSection > aside nav button:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; } #appSection > aside nav .tab-active { color: #fff !important; border-color: rgba(167, 180, 255, .26) !important; background: linear-gradient(135deg, rgba(76, 103, 241, .9), rgba(60, 76, 202, .9)) !important; box-shadow: 0 8px 19px rgba(0,0,0,.16); } #appSection > aside nav .text-red-600 { color: #ffb8bd !important; } #appSection > aside nav .text-red-400 { color: #f9a8b0 !important; } #glavniScrollKontejner { background: radial-gradient(circle at 82% 3%, #e4eaff 0, transparent 28rem), var(--crm-surface) !important; } #glavniScrollKontejner .max-w-7xl { padding-top: 2.25rem !important; } #glavniScrollKontejner h2 { color: var(--crm-ink) !important; letter-spacing: -.04em; } #glavniScrollKontejner .text-slate-400 { color: var(--crm-muted) !important; } #glavniScrollKontejner .bg-white { border-color: var(--crm-line) !important; box-shadow: 0 8px 24px rgba(23, 33, 58, .045) !important; } #glavniScrollKontejner .card-shadow { box-shadow: 0 12px 32px rgba(23, 33, 58, .055) !important; } .input-clean, select.input-clean, textarea.input-clean { border-color: #dfe5f0 !important; border-radius: .8rem !important; box-shadow: 0 1px 1px rgba(15,23,42,.02); } .input-clean:focus { border-color: var(--crm-primary) !important; box-shadow: 0 0 0 4px var(--crm-ring) !important; } .bg-blue-600 { background-color: var(--crm-primary) !important; } .hover\:bg-blue-700:hover, .hover\:bg-blue-500:hover { background-color: var(--crm-primary-dark) !important; } .text-blue-600, .text-blue-500 { color: var(--crm-primary) !important; } .bg-blue-50 { background-color: #eef1ff !important; } #listaNaslovnica > div, #listaCrnaLista > div, #listaSablone > div { border-radius: 1rem !important; } .timeline-container::before { background: linear-gradient(to bottom, #9cabff, #e1e6ff) !important; width: 3px !important; } .glass-nav { background: rgba(255, 255, 255, .84) !important; border-color: rgba(220, 226, 239, .9) !important; box-shadow: 0 10px 30px rgba(26, 39, 84, .08); } @media (max-width: 1023px) { #appSection > aside { display: none !important; } #appSection > div > header { display: flex !important; } #appSection > div > nav { display: flex !important; } #glavniScrollKontejner .max-w-7xl { padding-top: 1.4rem !important; } #appSection > div > header { box-shadow: 0 2px 18px rgba(26,39,84,.05); } #appSection > div > header h1 { letter-spacing: -.03em; } #appSection > div > nav { left: .8rem !important; right: .8rem !important; bottom: max(.8rem, env(safe-area-inset-bottom)) !important; border-radius: 1.1rem !important; } #appSection > div > nav button { min-width: 2.85rem; } } @media (min-width: 1024px) { /* `.hidden` in the legacy markup uses !important; this makes the desktop menu reliable. */ #appSection > aside { display: flex !important; visibility: visible !important; } #appSection > div > header, #appSection > div > nav { display: none !important; } } @media (max-width: 640px) { #loginSection { padding: 1.25rem !important; } #loginSection .bg-white\/10 { padding: 1.45rem !important; } #glavniScrollKontejner .max-w-7xl { padding: 1.1rem 1rem 6.8rem !important; } #glavniScrollKontejner h2 { font-size: 1.65rem !important; } #glavniScrollKontejner .rounded-2xl { border-radius: 1rem !important; } #appSection > div > nav button svg { width: 1.25rem !important; height: 1.25rem !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* ----- CRM 2.0 dashboard ------------------------------------------------ */ #tab_naslovnica { padding-bottom: 2rem; } .crm-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 17rem; margin-bottom: 1.25rem; padding: clamp(1.55rem, 3vw, 2.85rem); border: 1px solid rgba(255,255,255,.18); border-radius: 1.55rem; color: #fff; background: linear-gradient(120deg, #16245e 0%, #293fb3 57%, #6c4ee7 100%); box-shadow: 0 20px 45px rgba(44, 59, 168, .2); } .crm-hero::before, .crm-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 999px; filter: blur(1px); } .crm-hero::before { width: 27rem; height: 27rem; right: -10rem; top: -18rem; background: rgba(158, 190, 255, .3); } .crm-hero::after { width: 18rem; height: 18rem; left: 36%; bottom: -16rem; background: rgba(255, 255, 255, .13); } .crm-hero-copy { position: relative; z-index: 1; max-width: 41rem; animation: crm-slide-up .55s cubic-bezier(.2,.8,.2,1) both; } .crm-live { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.35rem; padding: .37rem .62rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(9, 17, 57, .2); font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.86); } .crm-live span { width: .45rem; height: .45rem; border-radius: 50%; background: #87f3bd; box-shadow: 0 0 0 5px rgba(135,243,189,.13); animation: crm-pulse 1.8s ease-out infinite; } .crm-kicker { margin: 0 0 .45rem; color: #bfc9ff; font-size: .69rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .crm-hero h2 { max-width: 35rem; margin: 0; color: #fff !important; font-size: clamp(2rem, 3.6vw, 3.45rem) !important; font-weight: 900; letter-spacing: -.065em !important; line-height: 1.01; } .crm-hero h2 em { color: #b8eaff; font-style: normal; } .crm-hero-description { max-width: 35rem; margin: 1rem 0 0; color: rgba(238,242,255,.84); font-size: .91rem; line-height: 1.65; } .crm-hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.55rem; } .crm-primary-action, .crm-secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: .52rem; min-height: 2.8rem; padding: 0 .9rem; border-radius: .78rem; font-size: .76rem; font-weight: 800; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .crm-primary-action { border: 1px solid #fff; background: #fff; color: #243fae; box-shadow: 0 8px 20px rgba(4, 13, 55, .2); } .crm-secondary-action { border: 1px solid rgba(255,255,255,.22); background: rgba(9, 17, 57, .2); color: #fff; } .crm-primary-action:hover, .crm-secondary-action:hover { transform: translateY(-2px); } .crm-primary-action:hover { background: #eef4ff; }.crm-secondary-action:hover { background: rgba(255,255,255,.16); } .crm-primary-action svg, .crm-secondary-action svg { width: 1.08rem; height: 1.08rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .crm-hero-orb { position: absolute; right: clamp(1.3rem, 7vw, 7rem); top: 50%; width: 8rem; height: 8rem; transform: translateY(-50%); } .crm-orb-core { position: absolute; inset: 2.2rem; display: grid; place-items: center; z-index: 2; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; background: linear-gradient(140deg, #99e6ff, #b69aff); box-shadow: 0 12px 34px rgba(7,19,81,.35); animation: crm-float 5s ease-in-out infinite; } .crm-orb-core svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: #202d83; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .crm-orb-ring { position: absolute; inset: .4rem; border: 1px solid rgba(255,255,255,.27); border-radius: 50%; } .crm-orb-ring-one { border-right-color: transparent; transform: rotate(28deg); animation: crm-spin 12s linear infinite; } .crm-orb-ring-two { inset: 1.1rem; border-left-color: transparent; transform: rotate(-34deg); animation: crm-spin-reverse 8s linear infinite; } .crm-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin: 0 0 2rem; } .crm-metric-card { display: flex; align-items: center; gap: .85rem; min-width: 0; padding: 1rem; border: 1px solid var(--crm-line); border-radius: 1rem; background: rgba(255,255,255,.9); box-shadow: 0 8px 22px rgba(23,33,58,.045); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; animation: crm-slide-up .5s calc(var(--metric-index, 0) * 70ms) both; } .crm-metric-card:nth-child(2) { --metric-index: 1; }.crm-metric-card:nth-child(3) { --metric-index: 2; }.crm-metric-card:nth-child(4) { --metric-index: 3; } .crm-metric-card:hover { transform: translateY(-4px); border-color: #cbd4ff; box-shadow: 0 14px 30px rgba(35,55,142,.1); } .crm-metric-icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.65rem; height: 2.65rem; border-radius: .82rem; } .crm-metric-icon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .crm-icon-indigo { color: #4055d7; background: #e9edff; }.crm-icon-violet { color: #7644d9; background: #f0eaff; }.crm-icon-amber { color: #c57612; background: #fff3da; }.crm-icon-teal { color: #108a83; background: #daf5f0; } .crm-metric-card div { display: grid; min-width: 0; }.crm-metric-card span:not(.crm-metric-icon), .crm-metric-card small { color: #78859c; font-size: .62rem; font-weight: 700; letter-spacing: .035em; }.crm-metric-card strong { color: #1d2946; font-size: 1.28rem; font-weight: 900; line-height: 1.18; letter-spacing: -.04em; }.crm-metric-card small { font-weight: 600; letter-spacing: 0; }.crm-date-card strong { font-size: 1.02rem; text-transform: capitalize; } .crm-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }.crm-section-heading h3 { margin: .18rem 0 0; color: var(--crm-ink); font-size: 1.18rem; font-weight: 850; letter-spacing: -.035em; }.crm-section-heading > span { margin-bottom: .1rem; color: var(--crm-muted); font-size: .72rem; font-weight: 650; } /* Consistent, polished line icons across all navigation and controls. */ #appSection svg { stroke-linecap: round; stroke-linejoin: round; } #appSection > aside nav button svg { box-sizing: content-box; flex: 0 0 auto; width: 1rem; height: 1rem; padding: .38rem; border-radius: .6rem; background: rgba(255,255,255,.075); transition: background .2s ease, transform .2s ease; } #appSection > aside nav button:hover svg, #appSection > aside nav .tab-active svg { background: rgba(255,255,255,.16); transform: scale(1.05); } #appSection > aside .app-global-logo-img { padding: .22rem; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); } #listaNaslovnica > div > div:last-child { position: relative; overflow: hidden; }.news-item, #listaNaslovnica > div > div:last-child { animation: crm-slide-up .45s cubic-bezier(.2,.8,.2,1) both; } #listaNaslovnica > div > div:last-child::after { content: ""; position: absolute; top: 0; right: 0; width: 5.5rem; height: 4.5rem; background: radial-gradient(circle at top right, rgba(93,112,255,.13), transparent 68%); pointer-events: none; } @keyframes crm-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes crm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes crm-spin { to { transform: rotate(388deg); } } @keyframes crm-spin-reverse { to { transform: rotate(-394deg); } } @keyframes crm-pulse { 70% { box-shadow: 0 0 0 8px rgba(135,243,189,0); } 100% { box-shadow: 0 0 0 5px rgba(135,243,189,0); } } @media (max-width: 1100px) { .crm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.crm-hero-orb { opacity: .8; right: 2.5rem; } } @media (max-width: 640px) { .crm-hero { min-height: auto; padding: 1.45rem; border-radius: 1.25rem; }.crm-hero-description { font-size: .83rem; }.crm-hero-orb { width: 5.6rem; height: 5.6rem; right: 1rem; top: 2rem; transform: none; opacity: .7; }.crm-orb-core { inset: 1.5rem; }.crm-metrics { grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: 1.5rem; }.crm-metric-card { gap: .6rem; padding: .75rem; border-radius: .85rem; }.crm-metric-icon { width: 2.2rem; height: 2.2rem; border-radius: .65rem; }.crm-metric-icon svg { width: 1.08rem; height: 1.08rem; }.crm-metric-card strong { font-size: 1.1rem; }.crm-metric-card small { display: none; }.crm-section-heading > span { display: none; }.crm-hero-actions { margin-top: 1.25rem; }.crm-primary-action, .crm-secondary-action { flex: 1 1 auto; padding: 0 .62rem; font-size: .69rem; } } /* The remaining operational screens share the same visual language. */ #tab_zapisnik > div:first-child, #tab_pregledRegistri > div:first-child, #tab_dosje > div:first-child, #tab_crnalista > div:first-child, #tab_sablone > div:first-child, #tab_superadmin > div:first-child { margin-bottom: 1.5rem !important; } #tab_zapisnik h2, #tab_pregledRegistri h2, #tab_dosje h2, #tab_crnalista h2, #tab_sablone h2, #tab_superadmin h2 { font-size: clamp(1.65rem, 2.8vw, 2.35rem) !important; font-weight: 900 !important; letter-spacing: -.05em !important; } #tab_zapisnik .bg-white, #tab_pregledRegistri .bg-white, #tab_dosje .bg-white, #tab_crnalista .bg-white, #tab_sablone .bg-white, #tab_superadmin .bg-white { border-radius: 1.1rem !important; } #tab_pregledRegistri button, #tab_superadmin button { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } #tab_pregledRegistri button:hover, #tab_superadmin button:hover { transform: translateY(-1px); } [id$="Modal"] > div:not([id$="Sadrzaj"]), #prisilnaLozinkaModal > div { border-radius: 1.25rem !important; box-shadow: 0 25px 70px rgba(16,24,55,.25) !important; } #appSection > div > nav { padding: .33rem !important; background: rgba(255,255,255,.9) !important; box-shadow: 0 14px 35px rgba(25,39,90,.16) !important; } #appSection > div > nav button { border-radius: .75rem; } #appSection > div > nav button.text-blue-600 { background: #edf0ff; } /* ----- Welcome screen --------------------------------------------------- */ #loginSection { padding: 1.4rem !important; overflow-y: auto; } #loginSection > .crm-login-shell { display: grid !important; grid-template-columns: minmax(0, 1.12fr) minmax(25rem, .88fr); width: min(68rem, 100%) !important; max-width: none !important; min-height: min(41rem, calc(100dvh - 2.8rem)); margin: auto; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 1.65rem; background: rgba(255,255,255,.07); box-shadow: 0 30px 80px rgba(0,8,37,.42); backdrop-filter: blur(24px); } .crm-login-brand { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: clamp(1.7rem, 4vw, 3.1rem); overflow: hidden; color: #fff; background: linear-gradient(145deg, rgba(45,68,185,.96), rgba(20,35,101,.98)); } .crm-login-brand::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(135deg, black, transparent 75%); } .crm-login-brand-top, .crm-login-logo { display: flex; align-items: center; }.crm-login-brand-top { position: relative; z-index: 1; justify-content: space-between; gap: 1rem; }.crm-login-logo { gap: .65rem; font-size: 1rem; font-weight: 850; letter-spacing: -.025em; }.crm-login-logo img { width: 2.4rem; height: 2.4rem; padding: .22rem; border: 1px solid rgba(255,255,255,.22); border-radius: .72rem; background: rgba(255,255,255,.12); object-fit: contain; }.crm-login-version { padding: .3rem .48rem; border: 1px solid rgba(255,255,255,.18); border-radius: .45rem; color: #dce4ff; font-size: .57rem; font-weight: 850; letter-spacing: .1em; } .crm-login-brand-copy { position: relative; z-index: 1; max-width: 29rem; margin: auto 0; animation: crm-slide-up .6s .1s cubic-bezier(.2,.8,.2,1) both; }.crm-login-eyebrow { display: inline-block; margin-bottom: .75rem; color: #aee8ff; font-size: .65rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }.crm-login-brand-copy h1 { margin: 0; color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.45rem); font-weight: 900; letter-spacing: -.07em; line-height: 1.02; }.crm-login-brand-copy h1 em { color: #bcecff; font-style: normal; }.crm-login-brand-copy p { max-width: 25rem; margin: 1.05rem 0 0; color: rgba(230,237,255,.8); font-size: .88rem; line-height: 1.65; } .crm-login-highlights { position: relative; z-index: 1; display: grid; gap: .75rem; }.crm-login-highlights > div { display: flex; align-items: center; gap: .7rem; padding: .78rem; border: 1px solid rgba(255,255,255,.13); border-radius: .78rem; background: rgba(6,14,57,.18); }.crm-login-check { display: grid; flex: 0 0 auto; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .6rem; background: rgba(160,225,255,.18); color: #aee8ff; }.crm-login-check svg, .crm-login-security svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.crm-login-highlights b, .crm-login-highlights small { display: block; }.crm-login-highlights b { color: #f3f6ff; font-size: .69rem; }.crm-login-highlights small { margin-top: .08rem; color: #bac7ef; font-size: .61rem; } .crm-login-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }.crm-login-glow-one { width: 17rem; height: 17rem; right: -7rem; bottom: -7rem; background: rgba(102,205,255,.18); }.crm-login-glow-two { width: 11rem; height: 11rem; top: 14%; right: 14%; border: 1px solid rgba(181,220,255,.16); } .crm-login-form-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.7rem, 4vw, 3.1rem); background: rgba(252,253,255,.98); }.crm-login-form-heading { display: flex; align-items: center; gap: .75rem; }.crm-login-form-heading p { margin: 0 0 .12rem; color: var(--crm-muted); font-size: .67rem; font-weight: 700; }.crm-login-form-heading h2 { margin: 0; color: #1c2845; font-size: 1.55rem; font-weight: 900; letter-spacing: -.055em; }.crm-login-form-icon { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border-radius: .78rem; background: #edf0ff; color: #4058d7; }.crm-login-form-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.crm-login-form-description { margin: 1.05rem 0 1.5rem; color: #75829a; font-size: .77rem; line-height: 1.55; } .crm-login-fields { display: grid; gap: .52rem; }.crm-login-fields label { color: #33415d; font-size: .68rem; font-weight: 800; }.crm-login-fields label span { float: right; color: #97a2b7; font-weight: 600; }.crm-login-input { display: flex; align-items: center; gap: .6rem; min-height: 3rem; margin-bottom: .6rem; padding: 0 .8rem; border: 1px solid #dfe5f1; border-radius: .78rem; background: #fff; transition: border .2s ease, box-shadow .2s ease; }.crm-login-input:focus-within { border-color: #526be1; box-shadow: 0 0 0 4px rgba(82,107,225,.13); }.crm-login-input svg { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; fill: none; stroke: #8290aa; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }.crm-login-input input { width: 100%; border: 0 !important; outline: 0 !important; background: transparent !important; color: #1e2a45 !important; font-size: .82rem; font-weight: 650; box-shadow: none !important; }.crm-login-input input::placeholder { color: #a9b2c2; font-weight: 600; } .crm-login-submit { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.1rem; margin-top: .4rem; border: 1px solid #3b53cf; border-radius: .8rem; background: linear-gradient(135deg, #465fe0, #2c43be); color: #fff; box-shadow: 0 12px 22px rgba(50,72,190,.22); font-size: .76rem; font-weight: 850; transition: transform .2s ease, box-shadow .2s ease; }.crm-login-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(50,72,190,.3); }.crm-login-submit svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.crm-login-security { display: flex; align-items: center; justify-content: center; gap: .36rem; margin: 1.1rem 0 0; color: #8995aa; font-size: .61rem; font-weight: 650; }.crm-login-security svg { width: .82rem; height: .82rem; color: #6477d6; }.crm-login-register { margin: .85rem 0 0; text-align: center; color: #7b879c; font-size: .66rem; font-weight: 650; }.crm-login-register a { color: #4157d4; font-weight: 850; text-decoration: none; }.crm-login-register a:hover { text-decoration: underline; } @media (max-width: 760px) { #loginSection > .crm-login-shell { grid-template-columns: 1fr; min-height: 0; border-radius: 1.25rem; }.crm-login-brand { min-height: 16.5rem; padding: 1.5rem; }.crm-login-brand-copy { margin: 2.7rem 0 0; }.crm-login-brand-copy h1 { font-size: 2rem; }.crm-login-brand-copy p { margin-top: .7rem; font-size: .77rem; }.crm-login-highlights { display: none; }.crm-login-form-panel { padding: 1.6rem; }.crm-login-glow-one { width: 12rem; height: 12rem; }.crm-login-form-description { margin: .8rem 0 1.15rem; } } /* ----- Operational screens -------------------------------------------- */ #tab_zapisnik, #tab_pregledRegistri, #tab_dosje, #tab_crnalista, #tab_sablone, #tab_superadmin { animation: crm-slide-up .38s cubic-bezier(.2,.8,.2,1) both; } #tab_zapisnik > .bg-white { position: relative; overflow: hidden; border-color: #dce4fb !important; background: linear-gradient(115deg, #fff 0%, #f7f9ff 100%) !important; } #tab_zapisnik > .bg-white::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .24rem; background: linear-gradient(#5570e8, #a04fd7); } #tab_zapisnik #zapisnikKontejner > div:first-child { border: 1px solid rgba(107,129,255,.28); border-radius: 1.25rem !important; background: linear-gradient(120deg, #1a2b69, #364fc4 60%, #764fd8) !important; box-shadow: 0 17px 32px rgba(40,59,170,.18) !important; } #tab_zapisnik #zapisnikKontejner > .grid > div { position: relative; overflow: hidden; border-width: 1px !important; border-radius: 1.1rem !important; transition: transform .22s ease, box-shadow .22s ease; } #tab_zapisnik #zapisnikKontejner > .grid > div:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(27,43,100,.1) !important; } #tab_zapisnik #zapisnikKontejner > .grid > div::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: .2rem; background: #5670e9; } #tab_zapisnik #zapisnikKontejner > .grid > div:nth-child(2)::before { background: #e15263; } #tab_zapisnik #zapisnikKontejner > .grid > div:nth-child(3)::before { background: #ef9332; } #tab_zapisnik #zapisnikKontejner > .grid > div:nth-child(4)::before { background: #20aa7b; } #tab_zapisnik #zapisnikKontejner > .grid > div:nth-child(6)::before { background: #db9e29; } #tab_zapisnik #zapisnikKontejner > .grid > div:nth-child(7)::before { background: #df5d9d; } #tab_pregledRegistri > .flex.gap-2, #tab_superadmin > .flex.gap-2, #tab_sablone #filterSabloneKategorije { gap: .5rem !important; padding: .35rem; border: 1px solid #e1e6f1; border-radius: .92rem; background: rgba(236,239,248,.72); } #tab_pregledRegistri > .flex.gap-2 button, #tab_superadmin > .flex.gap-2 button, #filterSabloneKategorije button { border-radius: .68rem !important; box-shadow: none !important; } #tab_pregledRegistri > .bg-white, #tab_crnalista > .bg-white, #tab_sablone > .bg-white, #tab_superadmin > .bg-white { border-radius: 1.2rem !important; box-shadow: 0 15px 33px rgba(23,33,58,.055) !important; } #tab_pregledRegistri > .bg-white::before, #tab_crnalista > .bg-white::before, #tab_sablone > .bg-white::before, #tab_superadmin > .bg-white::before { content: ""; display: block; width: 3rem; height: .22rem; margin: -1.5rem 0 1.1rem; border-radius: 99px; background: linear-gradient(90deg, #4f67df, #9b58df); } #tab_pregledRegistri #prikaz_regNapomene > .flex, #tab_crnalista .bg-white > .input-clean { padding: .34rem; border: 1px solid #e2e7f1; border-radius: .85rem; background: #f8f9fc; } #tab_pregledRegistri #prikaz_regNapomene > .flex .input-clean, #tab_pregledRegistri #prikaz_regNapomene > .flex select { border-color: transparent !important; background: transparent !important; } #tab_dosje > .bg-white { position: relative; overflow: hidden; border-radius: 1.2rem !important; background: linear-gradient(145deg, #fff, #fbfcff) !important; } #tab_dosje > .bg-white::before { content: ""; position: absolute; width: 18rem; height: 18rem; right: -10rem; top: -12rem; border-radius: 50%; background: #edf0ff; } #tab_dosje #dosjeKontejnerTrazi, #tab_dosje #dosjePuniPrikaz { position: relative; z-index: 1; } #tab_dosje #dosjePuniPrikaz > div:first-of-type { padding: 1rem; border: 1px solid #e6eaf4; border-radius: 1rem; background: #f9faff; } #tab_dosje #dosjeSlika { color: #fff !important; background: linear-gradient(135deg, #4663dc, #a059da) !important; box-shadow: 0 8px 18px rgba(72,96,215,.2); } #tab_crnalista > .bg-white { border-color: #f2d9df !important; } #tab_crnalista > .bg-white::before { background: linear-gradient(90deg, #df5468, #f1a65a); } #tab_crnalista .input-clean { background: #fffafa !important; border-color: #f0dfe3 !important; } #tab_sablone > .mb-4.bg-slate-50 { border-color: #dce2f2 !important; border-radius: 1.05rem !important; background: linear-gradient(115deg, #eff3ff, #faf8ff) !important; box-shadow: none !important; } #tab_sablone #listaSablona > div { transition: transform .22s ease, box-shadow .22s ease; } #tab_sablone #listaSablona > div:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(37,55,139,.11); } #tab_superadmin > .bg-white { border-color: #f0dce1 !important; } #tab_superadmin > .bg-white::before { background: linear-gradient(90deg, #db566b, #a253d3); } #tab_superadmin #subSa_clanovi, #tab_superadmin [id^="subSa_"].border-red-500 { color: #c13e55 !important; } /* Forms, filters and cards feel consistent everywhere. */ #glavniScrollKontejner input:not([type="hidden"]), #glavniScrollKontejner select, #glavniScrollKontejner textarea { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } #glavniScrollKontejner input:not([type="hidden"]):hover, #glavniScrollKontejner select:hover, #glavniScrollKontejner textarea:hover { border-color: #b8c4ee !important; } #glavniScrollKontejner button[class*="bg-"] { transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; } #glavniScrollKontejner button[class*="bg-"]:hover { filter: saturate(1.06) brightness(.99); } @media (max-width: 640px) { #tab_zapisnik #zapisnikKontejner > .grid > div { border-radius: .95rem !important; } } /* Mobile navigation is a compact app dock, not a scaled-down desktop menu. */ @media (max-width: 1023px) { #appSection > div > header { min-height: 4.7rem; padding-inline: .15rem; background: rgba(255,255,255,.9) !important; } #appSection > div > header .px-5 { width: 100%; padding-inline: 1rem !important; } #appSection > div > header .app-global-logo-img { width: 2rem !important; height: 2rem !important; padding: .15rem; border: 1px solid #dfe5f4; border-radius: .62rem; background: #eef1ff; } #appSection > div > header button { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; padding: 0 !important; border: 1px solid #e0e6f1; border-radius: .7rem !important; background: #fff !important; box-shadow: 0 3px 10px rgba(32,47,92,.06); } #appSection > div > header button:last-child { color: #c84c60 !important; background: #fff6f7 !important; border-color: #f1d8dd; } #appSection > div > nav { gap: .16rem; height: 4.55rem !important; padding: .3rem !important; border: 1px solid rgba(216,224,241,.95) !important; border-radius: 1.25rem !important; background: rgba(255,255,255,.94) !important; backdrop-filter: blur(18px); } #appSection > div > nav button { position: relative; gap: .22rem !important; min-height: 3.6rem; padding: .3rem .2rem !important; color: #7b88a2 !important; } #appSection > div > nav button svg { box-sizing: content-box; width: 1.18rem !important; height: 1.18rem !important; padding: .33rem; border-radius: .62rem; background: #f0f3f9; } #appSection > div > nav button span { font-size: .52rem !important; font-weight: 800 !important; letter-spacing: .01em; } #appSection > div > nav button.text-blue-600 { color: #3d57d3 !important; background: #edf0ff !important; } #appSection > div > nav button.text-blue-600 svg { background: linear-gradient(135deg, #566fe7, #7754db); color: #fff; box-shadow: 0 5px 12px rgba(75,95,218,.24); } } /* ----- CRM workspace: member search, forms and reports ---------------- */ /* Result panels are deliberately part of the document flow. This prevents a member list from being cut off by a decorative parent card. */ #tab_zapisnik > .crm-member-picker, #tab_dosje > .crm-member-picker { overflow: visible !important; } .crm-member-picker { position: relative; isolation: isolate; padding: clamp(1rem, 2.2vw, 1.55rem) !important; border-color: #d8e1fa !important; background: linear-gradient(125deg, #ffffff 0%, #f7f9ff 100%) !important; box-shadow: 0 18px 40px rgba(32,51,118,.07) !important; } .crm-member-picker::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: .3rem; border-radius: 1.1rem 0 0 1.1rem; background: linear-gradient(180deg, #4664e5, #9a54dc); } .crm-picker-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; } .crm-picker-heading label { display: block; color: #1e2b48; font-size: 1rem; font-weight: 850; letter-spacing: -.035em; } .crm-field-kicker { display: block; margin-bottom: .2rem; color: #5a6fd5; font-size: .6rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .crm-picker-note { max-width: 16rem; color: #8390a7; font-size: .68rem; font-weight: 650; text-align: right; } .crm-search-control, .crm-filter-input { display: flex; align-items: center; gap: .72rem; min-width: 0; min-height: 3.45rem; padding: .28rem .75rem; border: 1px solid #d9e2f2; border-radius: .95rem; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px rgba(27,43,89,.035); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .crm-search-control:focus-within, .crm-filter-input:focus-within { border-color: #6178e7; box-shadow: 0 0 0 4px rgba(84,108,225,.12), 0 7px 18px rgba(34,58,139,.075); } .crm-search-control > svg, .crm-filter-input > svg { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; fill: none; stroke: #60708f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } .crm-search-control input, .crm-filter-input input { min-width: 0; height: 2.5rem; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: #1e2942 !important; background: transparent !important; box-shadow: none !important; font-size: .84rem !important; font-weight: 700 !important; outline: 0; } .crm-search-control input::placeholder, .crm-filter-input input::placeholder { color: #9aa6ba; font-weight: 600; } .crm-search-control kbd { display: inline-flex; align-items: center; height: 1.45rem; padding: 0 .38rem; border: 1px solid #dce3ef; border-bottom-width: 2px; border-radius: .38rem; color: #8793a8; background: #f7f9fc; font-family: inherit; font-size: .57rem; font-weight: 800; white-space: nowrap; } .crm-quick-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; } .crm-quick-filters > span { margin-right: .15rem; color: #8995aa; font-size: .63rem; font-weight: 750; } .crm-quick-filters button, .crm-filter-reset { min-height: 1.75rem; padding: 0 .63rem; border: 1px solid #dce4f5; border-radius: .55rem; color: #5267c9; background: #f4f6ff; font-size: .62rem; font-weight: 800; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; } .crm-quick-filters button:hover, .crm-filter-reset:hover { border-color: #5268d8; color: #fff; background: #5268d8; transform: translateY(-1px); } .crm-member-results { display: grid; gap: .6rem; max-height: min(28rem, 58vh); margin-top: .9rem; padding: .66rem; overflow-y: auto; border: 1px solid #dce4f4; border-radius: 1rem; background: rgba(242,245,252,.76); box-shadow: inset 0 1px 0 rgba(255,255,255,.95); } .crm-member-results-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .1rem .2rem .35rem; color: #5a6fd1; font-size: .66rem; font-weight: 850; } .crm-member-results-header small { color: var(--crm-muted); font-size: .6rem; font-weight: 650; } .crm-member-results-list { display: grid; gap: .42rem; } .crm-member-result { display: grid; grid-template-columns: 2.28rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; width: 100%; min-height: 4rem; padding: .55rem .62rem; border: 1px solid transparent; border-radius: .8rem; color: inherit; background: #fff; text-align: left; box-shadow: 0 2px 6px rgba(23,35,81,.035); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .crm-member-result:hover { z-index: 1; border-color: #aebcf6; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(56,76,166,.1); } .crm-member-avatar { display: grid; place-items: center; width: 2.28rem; height: 2.28rem; border-radius: .7rem; color: #fff; background: linear-gradient(135deg, #4e68dd, #8553dc); box-shadow: 0 5px 10px rgba(75,91,204,.18); font-size: .76rem; font-weight: 900; } .crm-member-details, .crm-member-name, .crm-member-meta { min-width: 0; } .crm-member-details { display: grid; gap: .08rem; }.crm-member-name { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; } .crm-member-name strong { overflow: hidden; color: #22304a; font-size: .78rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }.crm-member-details small { overflow: hidden; color: #6074cf; font-size: .65rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .crm-member-role, .crm-member-blocked, .crm-member-score, .crm-member-alert { padding: .17rem .34rem; border-radius: .35rem; font-size: .52rem; font-style: normal; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; } .crm-member-role { color: #6850c7; background: #f0ebff; }.crm-member-blocked, .crm-member-alert { color: #c73d51; background: #fff0f2; }.crm-member-score { color: #278166; background: #e8faf4; } .crm-member-meta { display: grid; justify-items: end; gap: .32rem; }.crm-member-open { color: #4b61cf; font-size: .61rem; font-weight: 850; }.crm-member-result:hover .crm-member-open { text-decoration: underline; } .crm-member-results-empty { padding: 1.3rem .8rem; color: #8591a6; font-size: .73rem; font-weight: 700; text-align: center; } .crm-filter-bar { display: flex; align-items: stretch; gap: .55rem; margin-bottom: 1.1rem; padding: .4rem; border: 1px solid #e0e6f2; border-radius: 1.05rem; background: #f8faff; } .crm-filter-bar .crm-filter-input { flex: 1 1 16rem; min-height: 2.8rem; padding-block: .15rem; border-color: transparent; background: #fff; }.crm-filter-bar select { flex: 0 1 12rem; min-width: 9.2rem; padding: 0 .7rem !important; border-color: #dfe6f2 !important; border-radius: .72rem !important; color: #40506c !important; background: #fff !important; font-size: .7rem !important; font-weight: 750 !important; } .crm-filter-reset { flex: 0 0 auto; align-self: center; min-height: 2.4rem; color: #65728b; background: transparent; }.crm-filter-reset:hover { color: #fff; background: #5268d8; }.crm-filter-hint { margin: -.45rem 0 1.15rem .2rem; color: var(--crm-muted); font-size: .65rem; font-weight: 650; } .crm-filter-danger { border-color: #f0dce1; background: #fff8f9; }.crm-filter-danger .crm-filter-input { border-color: transparent !important; background: #fff !important; }.crm-filter-danger .crm-filter-reset { color: #b84b5b; background: #fff2f4; border-color: #f1d5db; }.crm-filter-danger .crm-filter-reset:hover { color: #fff; background: #c8495b; } .crm-admin-filter { background: linear-gradient(105deg, #f7f8ff, #fcf9ff); } /* Inputs and decision forms use predictable grouping, spacing and visual hierarchy. */ #tab_zapisnik #zapisnikKontejner > .grid > div { border-color: #e0e6f2 !important; background: linear-gradient(145deg, #fff, #fbfcff) !important; } #tab_zapisnik #zapisnikKontejner > .grid > div h4 { padding-bottom: .7rem; border-bottom: 1px solid #edf0f6; font-size: .7rem !important; letter-spacing: .075em !important; } #tab_zapisnik #zapisnikKontejner .input-clean, #tab_superadmin .input-clean, #tab_sablone .input-clean { min-height: 2.7rem; border-color: #dce4f0 !important; background: #fbfcff !important; box-shadow: none !important; } #tab_zapisnik #zapisnikKontejner textarea.input-clean { min-height: 5.7rem; line-height: 1.55; resize: vertical; } #tab_zapisnik #zapisnikKontejner label.border-2 { border-color: #cfd8f0 !important; background: #f9faff; }.crm-member-picker + #zapisnikKontejner { margin-top: 1.8rem; } #tab_zapisnik #zapisnikKontejner button[class*="bg-"] { min-height: 2.85rem; border-radius: .82rem !important; box-shadow: 0 8px 16px rgba(28,44,107,.11); } #tab_zapisnik #zapisnikKontejner .bg-slate-50 { border-color: #e4e9f3 !important; background: #f6f8fc !important; } /* Reports and record lists become legible CRM rows rather than loose blocks. */ #tab_pregledRegistri #listaRegNapomene > div, #tab_pregledRegistri #listaRegPauze > div, #tab_pregledRegistri #listaRegVip > div, #tab_pregledRegistri #listaRegKazne > div { border-radius: .9rem !important; box-shadow: 0 5px 13px rgba(34,48,99,.045) !important; } #tab_pregledRegistri #listaRegNapomene > div { border-left-width: .28rem !important; } #tab_pregledRegistri #listaRegKazne > div { border-top-width: .22rem !important; } #tab_pregledRegistri #listaRegNapomene > div:hover, #tab_pregledRegistri #listaRegKazne > div:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(34,48,99,.09) !important; } #tab_superadmin #saListaClanovaEdit { display: grid; gap: .55rem; }.crm-admin-filter + .crm-filter-hint + #saListaClanovaEdit > div { margin: 0 !important; border-color: #e1e6f2 !important; background: linear-gradient(105deg, #fbfcff, #f6f8ff) !important; box-shadow: 0 4px 12px rgba(38,51,101,.035); } #tab_crnalista #listaCrnaLista > div { border-left-width: .28rem !important; box-shadow: 0 6px 15px rgba(154,52,70,.06) !important; } @media (max-width: 640px) { .crm-member-picker { padding: 1rem !important; }.crm-picker-heading { align-items: flex-start; }.crm-picker-note { display: none; }.crm-search-control { min-height: 3.25rem; }.crm-search-control kbd { display: none; }.crm-member-results { max-height: 22rem; padding: .48rem; }.crm-member-result { grid-template-columns: 2.1rem minmax(0, 1fr); gap: .55rem; min-height: 3.75rem; }.crm-member-avatar { width: 2.1rem; height: 2.1rem; }.crm-member-meta { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: .4rem; }.crm-member-name strong { max-width: 12rem; }.crm-filter-bar { flex-wrap: wrap; gap: .42rem; padding: .34rem; }.crm-filter-bar .crm-filter-input { flex-basis: 100%; }.crm-filter-bar select { flex: 1 1 11rem; min-height: 2.55rem; }.crm-filter-reset { min-height: 2.35rem; }.crm-filter-hint { margin-bottom: .9rem; } } /* ----- Final visual polish -------------------------------------------- */ /* The hero sits on a dark surface, so this selector intentionally outranks the generic page heading rule. */ #glavniScrollKontejner .crm-hero h2 { color: #fff !important; text-shadow: 0 2px 18px rgba(5,12,57,.25); } #glavniScrollKontejner .crm-hero h2 em { color: #bcecff !important; } /* Keep the danger section recognisable in the dark desktop navigation. */ #appSection > aside nav #btnTabCrnalista.text-red-600 { color: #ffb8c0 !important; border-color: rgba(251,117,132,.22) !important; background: rgba(217,73,94,.14) !important; box-shadow: none !important; } #appSection > aside nav #btnTabCrnalista.text-red-600 svg { color: #ffc0c7; background: rgba(229,87,106,.17) !important; } /* Decorative pseudo-elements previously occupied space in a few cards. A top border gives the same hierarchy without shifting content sideways. */ #tab_pregledRegistri > .bg-white::before, #tab_crnalista > .bg-white::before, #tab_sablone > .bg-white::before, #tab_superadmin > .bg-white::before { content: none !important; } #tab_pregledRegistri > .bg-white, #tab_sablone > .bg-white, #tab_superadmin > .bg-white, #tab_crnalista > .bg-white { padding: clamp(1rem, 1.8vw, 1.35rem) !important; } #tab_pregledRegistri > .bg-white { border-top: 3px solid #7187ea !important; } #tab_sablone > .bg-white { border-top: 3px solid #8d6ce5 !important; } #tab_superadmin > .bg-white { border-top: 3px solid #cf6678 !important; } #tab_crnalista > .bg-white { border-top: 3px solid #e46577 !important; } /* Shortcuts turn the long record form into a guided workspace. */ .crm-record-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: -.3rem 0 1.15rem; padding: .5rem; border: 1px solid #dfe6f4; border-radius: .9rem; background: rgba(250,251,255,.88); } .crm-record-tools > span { padding: 0 .28rem; color: #7b88a1; font-size: .61rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .crm-record-tools button { min-height: 1.9rem; padding: 0 .55rem; border: 1px solid #e0e6f2; border-radius: .52rem; color: #56647d; background: #fff; font-size: .62rem; font-weight: 800; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; } .crm-record-tools button:hover { border-color: #8092ea; color: #415ad3; background: #f0f3ff; transform: translateY(-1px); }.crm-record-tools i { display: inline-grid; place-items: center; width: .86rem; height: .86rem; margin-right: .16rem; border-radius: 50%; color: #fff; background: #d85163; font-size: .8rem; font-style: normal; line-height: 1; } .crm-focus-card { animation: crm-focus-card 1.25s ease both !important; } @keyframes crm-focus-card { 0%, 100% { box-shadow: 0 10px 22px rgba(31,48,109,.08); } 30% { border-color: #8295f1 !important; box-shadow: 0 0 0 5px rgba(91,111,226,.17), 0 16px 30px rgba(31,48,109,.14); } } /* Automatic reports use the same compact action language as the rest of CRM. */ #tab_sablone > .mb-4.bg-slate-50 { padding: 1rem !important; } .crm-report-action { display: inline-flex; align-items: center; gap: .42rem; min-height: 2.2rem; padding: 0 .7rem; border: 1px solid #dde4f0; border-radius: .65rem; color: #506079; background: #fff; box-shadow: 0 3px 8px rgba(30,45,95,.035); font-size: .65rem; font-weight: 800; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; } .crm-report-action:hover { border-color: #aab9ed; color: #435aca; background: #f6f8ff; transform: translateY(-1px); box-shadow: 0 7px 15px rgba(40,57,142,.09); }.crm-report-action-danger { color: #bd4659; border-color: #f0d4da; background: #fff8f9; }.crm-report-action-danger:hover { border-color: #e18190; color: #b13246; background: #fff0f2; }.crm-minus-symbol { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; color: #fff; background: #dd5263; font-size: .92rem; font-weight: 900; line-height: 1; } /* Every dialog shares the same clear hierarchy and remains comfortable on a phone. */ [id$="Modal"] { background-color: rgba(9,16,42,.56) !important; } [id$="Modal"] > div { width: min(100%, 34rem) !important; max-width: none !important; max-height: min(82dvh, 44rem) !important; padding: clamp(1.2rem, 3vw, 1.7rem) !important; overflow: auto; border: 1px solid rgba(222,229,243,.9); border-radius: 1.35rem !important; background: linear-gradient(145deg, #fff, #fbfcff) !important; box-shadow: 0 28px 80px rgba(5,12,38,.33) !important; animation: crm-dialog-enter .24s cubic-bezier(.2,.8,.2,1) both; } [id$="Modal"] > div > h3 { padding-right: 2.25rem; color: #202c48 !important; font-size: clamp(1.1rem, 2.2vw, 1.42rem) !important; letter-spacing: -.045em; } [id$="Modal"] > div > button:first-child { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid #e2e7f0; border-radius: .62rem; color: #7d8aa2 !important; background: #f8faff; font-size: 1.25rem; line-height: 1; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; } [id$="Modal"] > div > button:first-child:hover { border-color: #ecb9c1; color: #c64458 !important; background: #fff2f4; transform: rotate(4deg); } [id$="Modal"] > div input:not([type="hidden"]), [id$="Modal"] > div select, [id$="Modal"] > div textarea { border-color: #dce4f0 !important; background: #fafcff !important; box-shadow: none !important; } [id$="Modal"] > div textarea { min-height: 7rem; line-height: 1.55; } @keyframes crm-dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Notifications open in the visual centre above the current page, and the surrounding shade is clickable to close them. */ #notifikacijeModal { align-items: flex-start !important; justify-content: center !important; padding-top: clamp(5.25rem, 13vh, 8.5rem) !important; } #notifikacijeModal > .crm-notification-panel { width: min(100%, 39rem) !important; max-height: min(67dvh, 35rem) !important; margin: 0 !important; border-top: 3px solid #6179e8; } #notifikacijeModal > .crm-notification-panel::before { content: "Nove aktivnosti"; display: inline-flex; width: fit-content; margin: 0 0 .55rem; padding: .25rem .48rem; border-radius: .4rem; color: #5068d5; background: #eef1ff; font-size: .56rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } #notifikacijeSadrzaj > div { padding: .75rem .1rem !important; border-color: #edf0f6 !important; } #notifikacijeSadrzaj > div:first-child { border-top: 1px solid #edf0f6; } #kopirajPorukuModal > div { width: min(100%, 41rem) !important; border-top: 3px solid #2aaa7d; } #kopirajPorukuModal textarea { min-height: 12rem !important; padding: 1rem !important; border-radius: .9rem !important; color: #33425b !important; background: #f7f9fc !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem !important; line-height: 1.65; } #kopirajPorukuModal #btnKopirajPoruku { min-height: 3.1rem; border-radius: .85rem !important; background: linear-gradient(135deg, #273654, #18243a) !important; box-shadow: 0 10px 21px rgba(25,37,62,.18); } @media (max-width: 640px) { .crm-record-tools { margin-bottom: 1rem; overflow-x: auto; flex-wrap: nowrap; }.crm-record-tools > span, .crm-record-tools button { flex: 0 0 auto; }[id$="Modal"] > div { max-height: 86dvh !important; border-radius: 1.1rem !important; }#notifikacijeModal { padding-top: max(4.7rem, env(safe-area-inset-top)) !important; }#notifikacijeModal > .crm-notification-panel { max-height: 72dvh !important; }.crm-report-action { flex: 1 1 calc(50% - .4rem); justify-content: center; } } /* Dashboard cards that lead to an operational list, rather than a decorative number. */ .crm-metric-action { width: 100%; cursor: pointer; font: inherit; text-align: left; }.crm-metric-action:focus-visible { outline: 3px solid rgba(73,98,220,.35); outline-offset: 3px; }.crm-metric-action .crm-metric-arrow { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; margin-left: auto; border-radius: 50%; color: #536bd7; background: #f0f3ff; font-size: .95rem; font-weight: 900; line-height: 1; transition: transform .2s ease, color .2s ease, background .2s ease; }.crm-metric-action:hover .crm-metric-arrow { color: #fff; background: #5269d9; transform: translateX(3px); }.crm-metric-action small { color: #6678c9; } /* Lists opened from the dashboard stay quick to scan and link directly to each dossier. */ #widgetPregledModal > .crm-widget-modal { width: min(100%, 46rem) !important; max-height: min(80dvh, 42rem) !important; overflow: hidden; border-top: 3px solid #6179e8; }.crm-widget-modal-heading { display: flex; align-items: flex-start; gap: .85rem; padding: .1rem 2.2rem 1.05rem 0; border-bottom: 1px solid #e8edf6; }.crm-widget-modal-icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .85rem; color: #fff; background: linear-gradient(135deg, #536add, #8759dd); box-shadow: 0 8px 18px rgba(77,94,209,.19); font-size: 1.05rem; font-weight: 900; }.crm-widget-modal-heading > div { min-width: 0; }.crm-widget-modal-heading p:first-child { margin: 0 0 .14rem; color: #7785a0; font-size: .57rem; font-weight: 900; letter-spacing: .105em; text-transform: uppercase; }.crm-widget-modal-heading h3 { margin: 0; color: #202c48; font-size: clamp(1.15rem, 3vw, 1.45rem); font-weight: 900; letter-spacing: -.045em; }.crm-widget-modal-heading p:last-child { margin: .27rem 0 0; color: var(--crm-muted); font-size: .71rem; font-weight: 650; line-height: 1.55; }.crm-widget-list { display: grid; gap: .5rem; max-height: min(48dvh, 27rem); margin-top: 1rem; padding-right: .2rem; overflow: auto; }.crm-widget-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; width: 100%; min-height: 4rem; padding: .58rem .72rem; border: 1px solid #e3e9f3; border-radius: .9rem; color: inherit; background: linear-gradient(105deg, #fff, #fafcff); text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.crm-widget-row:hover { border-color: #aebcf4; transform: translateY(-1px); box-shadow: 0 9px 18px rgba(39,55,127,.08); }.crm-widget-row:focus-visible { outline: 3px solid rgba(83,105,217,.28); outline-offset: 2px; }.crm-widget-avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; color: #fff; background: linear-gradient(135deg, #536bdd, #8759dc); font-size: .78rem; font-weight: 900; }.crm-widget-member { display: grid; min-width: 0; gap: .08rem; }.crm-widget-member strong, .crm-widget-member small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.crm-widget-member strong { color: #283650; font-size: .76rem; font-weight: 850; }.crm-widget-member small { color: #6175cc; font-size: .65rem; font-weight: 750; }.crm-widget-status { padding: .3rem .45rem; border-radius: .45rem; font-size: .6rem; font-weight: 850; white-space: nowrap; }.crm-widget-status.is-open { color: #5066d3; background: #f0f3ff; }.crm-widget-status.is-admin { color: #714bc1; background: #f3eeff; }.crm-widget-status.is-alert { color: #be4659; background: #fff0f2; }.crm-widget-empty { padding: 2.8rem 1rem; border: 1px dashed #dbe3ef; border-radius: .9rem; color: #8290a8; font-size: .76rem; font-weight: 750; text-align: center; } /* Record creation is organised as a guided decision board instead of seven equal cards. */ .crm-record-flow-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .3rem 0 .7rem; padding: 1rem 1.1rem; border: 1px solid #dde5f4; border-radius: 1rem; background: linear-gradient(105deg, #f8faff, #f5f3ff); }.crm-record-flow-header h3 { margin: .22rem 0 .18rem; color: #25334e; font-size: clamp(1rem, 2.2vw, 1.25rem); font-weight: 900; letter-spacing: -.035em; }.crm-record-flow-header p { max-width: 42rem; margin: 0; color: #74829b; font-size: .7rem; font-weight: 600; line-height: 1.55; }.crm-record-flow-note { display: grid; flex: 0 0 auto; gap: .15rem; padding: .62rem .75rem; border: 1px solid #dce6ff; border-radius: .75rem; background: rgba(255,255,255,.76); }.crm-record-flow-note span { color: #6477d4; font-size: .53rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.crm-record-flow-note strong { color: #495979; font-size: .62rem; font-weight: 800; } .crm-record-board { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: .95rem !important; align-items: stretch; }.crm-record-board > .crm-record-card { min-width: 0; padding: 1.18rem !important; }.crm-record-board > .crm-record-card-note { grid-column: span 12; }.crm-record-board > .crm-record-card-correction, .crm-record-board > .crm-record-card-warning { grid-column: span 6; }.crm-record-board > .crm-record-card-reward { grid-column: span 5; }.crm-record-board > .crm-record-card-pause { grid-column: span 7; }.crm-record-board > .crm-record-card-vip { grid-column: span 7; }.crm-record-board > .crm-record-card-birthday { grid-column: span 5; }.crm-record-board > .crm-record-card::after { display: inline-flex; align-items: center; width: fit-content; min-height: 1.28rem; margin: .78rem 0 -.15rem; padding: 0 .38rem; border-radius: .36rem; color: #8090a9; background: #f1f4f9; font-size: .5rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.crm-record-board > .crm-record-card-note::after { content: 'Dnevna evidencija'; color: #4e68d6; background: #eef2ff; }.crm-record-board > .crm-record-card-correction::after { content: 'Disciplinska evidencija'; color: #c2485b; background: #fff0f2; }.crm-record-board > .crm-record-card-warning::after { content: 'Disciplinska evidencija'; color: #b56b1e; background: #fff6e8; }.crm-record-board > .crm-record-card-reward::after { content: 'Pozitivna akcija'; color: #258065; background: #eaf9f3; }.crm-record-board > .crm-record-card-pause::after { content: 'Status člana'; color: #60708b; background: #eff2f7; }.crm-record-board > .crm-record-card-vip::after { content: 'Status članstva'; color: #a46a17; background: #fff4df; }.crm-record-board > .crm-record-card-birthday::after { content: 'Automatska pogodnost'; color: #c14b86; background: #fff0f8; } .crm-record-board > .crm-record-card h4 { margin-bottom: .85rem !important; }.crm-record-board > .crm-record-card-note { display: grid !important; grid-template-columns: minmax(10rem, .55fr) minmax(0, 1.6fr) minmax(9rem, .45fr); column-gap: 1rem; align-items: start; }.crm-record-board > .crm-record-card-note h4 { min-height: 100%; padding: .3rem .9rem .3rem 0 !important; border: 0 !important; border-right: 1px solid #e5ebf5 !important; }.crm-record-board > .crm-record-card-note > button { align-self: stretch; margin: 0 !important; min-height: 100% !important; }.crm-record-board > .crm-record-card-note::after { grid-column: 1; margin-top: -.12rem; } .crm-template-field { position: relative; display: grid; gap: .35rem; padding: .62rem; border: 1px solid #e0e7f3; border-radius: .78rem; background: #f8faff; transition: border-color .18s ease, background .18s ease; }.crm-template-field.has-template { border-color: #b8c8fa; background: #f4f6ff; }.crm-template-label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }.crm-template-label label { color: #74829a; font-size: .53rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.crm-template-label button { min-height: 1.35rem !important; padding: 0 .38rem !important; border: 0 !important; border-radius: .36rem !important; color: #5268d4; background: #e9edff !important; box-shadow: none !important; font-size: .53rem; font-weight: 850; }.crm-template-label button:hover { color: #fff; background: #5369d8 !important; }.crm-template-field select { min-height: 2.35rem !important; background: #fff !important; }.crm-template-field small { color: var(--crm-muted); font-size: .54rem; font-weight: 650; }.crm-template-field.has-template small { color: #566cd4; } @media (max-width: 860px) { .crm-record-board > .crm-record-card-note { grid-template-columns: 1fr; }.crm-record-board > .crm-record-card-note h4 { min-height: auto; padding: 0 0 .7rem !important; border-right: 0 !important; border-bottom: 1px solid #e5ebf5 !important; }.crm-record-board > .crm-record-card-note > button { min-height: 2.85rem !important; margin-top: 1rem !important; }.crm-record-board > .crm-record-card-note::after { grid-column: auto; }.crm-record-board > .crm-record-card-reward, .crm-record-board > .crm-record-card-pause, .crm-record-board > .crm-record-card-vip, .crm-record-board > .crm-record-card-birthday { grid-column: span 6; } } @media (max-width: 640px) { .crm-metric-action .crm-metric-arrow { display: none; }.crm-metric-action small { display: none; }.crm-widget-row { grid-template-columns: 2.3rem minmax(0, 1fr); }.crm-widget-avatar { width: 2.3rem; height: 2.3rem; }.crm-widget-status { grid-column: 2; justify-self: start; }.crm-record-flow-header { align-items: flex-start; flex-direction: column; padding: .9rem; }.crm-record-flow-note { width: 100%; }.crm-record-board { grid-template-columns: 1fr !important; gap: .75rem !important; }.crm-record-board > .crm-record-card, .crm-record-board > .crm-record-card-reward, .crm-record-board > .crm-record-card-pause, .crm-record-board > .crm-record-card-vip, .crm-record-board > .crm-record-card-birthday, .crm-record-board > .crm-record-card-correction, .crm-record-board > .crm-record-card-warning { grid-column: auto; padding: 1rem !important; } } /* Section labels sit beside the card heading, keeping the action button as the natural end of each form rather than adding visual weight below it. */ .crm-record-board > .crm-record-card::after { display: none !important; content: none !important; }.crm-record-board > .crm-record-card h4::after { display: inline-flex; align-items: center; width: fit-content; min-height: 1.22rem; margin-left: auto; padding: 0 .38rem; border-radius: .36rem; color: #8090a9; background: #f1f4f9; font-size: .48rem; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; white-space: nowrap; }.crm-record-board > .crm-record-card-note h4::after { content: 'Dnevna evidencija'; color: #4e68d6; background: #eef2ff; }.crm-record-board > .crm-record-card-correction h4::after { content: 'Disciplinska'; color: #c2485b; background: #fff0f2; }.crm-record-board > .crm-record-card-warning h4::after { content: 'Disciplinska'; color: #b56b1e; background: #fff6e8; }.crm-record-board > .crm-record-card-reward h4::after { content: 'Pozitivna akcija'; color: #258065; background: #eaf9f3; }.crm-record-board > .crm-record-card-pause h4::after { content: 'Status člana'; color: #60708b; background: #eff2f7; }.crm-record-board > .crm-record-card-vip h4::after { content: 'Članstvo'; color: #a46a17; background: #fff4df; }.crm-record-board > .crm-record-card-birthday h4::after { content: 'Automatski'; color: #c14b86; background: #fff0f8; }#tab_zapisnik #zapisnikKontejner .crm-record-board > .crm-record-card-note > button { min-height: 100% !important; } /* Stable record form: compact, predictable cards with no viewport-height expansion. The primary note is full width; every other action uses the same balanced two-column rhythm. */ #tab_zapisnik #zapisnikKontejner > .crm-record-board { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start !important; gap: 1rem !important; } #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card { display: flex !important; grid-column: auto !important; min-height: 0 !important; height: auto !important; padding: 1.2rem !important; } #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card-note { grid-column: 1 / -1 !important; display: flex !important; } #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card-note h4 { min-height: 0 !important; padding: 0 0 .78rem !important; border: 0 !important; border-bottom: 1px solid #e5ebf5 !important; } #tab_zapisnik #zapisnikKontejner .crm-record-board > .crm-record-card-note > button { align-self: auto !important; min-height: 2.85rem !important; margin-top: 1rem !important; } #tab_zapisnik #zapisnikKontejner .crm-record-card .input-clean { box-sizing: border-box; min-height: 2.8rem; border-radius: .72rem !important; color: #34425a !important; background: #fbfcff !important; font-size: .72rem !important; font-weight: 650 !important; } #tab_zapisnik #zapisnikKontejner .crm-record-card textarea.input-clean { min-height: 7rem !important; max-height: 12rem; padding: .85rem .95rem !important; resize: vertical; } #tab_zapisnik #zapisnikKontejner .crm-record-card select.input-clean { padding: 0 .85rem !important; }.crm-record-card .space-y-3 { gap: .7rem !important; }.crm-record-card label.border-2 { display: flex !important; align-items: center; justify-content: center; min-height: 3.6rem; padding: .75rem 1rem !important; border-radius: .72rem !important; }.crm-record-card label.border-2 span { color: #697b99 !important; font-size: .68rem !important; } #tab_zapisnik #zapisnikKontejner .crm-record-card > button[class*="bg-"] { width: 100%; min-height: 2.85rem !important; margin-top: 1rem !important; border-radius: .72rem !important; font-size: .7rem !important; letter-spacing: .01em; }.crm-record-board > .crm-record-card h4::after { margin-left: auto; } @media (max-width: 720px) { #tab_zapisnik #zapisnikKontejner > .crm-record-board { grid-template-columns: minmax(0, 1fr) !important; gap: .78rem !important; }#tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card, #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card-note { grid-column: auto !important; padding: 1rem !important; }.crm-record-board > .crm-record-card h4::after { font-size: .45rem; }.crm-record-tools i { display: none; } } /* A compact operational form: all actions share one visual system and stay within a readable working width on every desktop screen. */ #tab_zapisnik #zapisnikKontejner { width: 100%; max-width: 76rem; margin-inline: auto; } #tab_zapisnik #zapisnikKontejner .crm-record-flow-header { align-items: center; margin: .25rem 0 .6rem; padding: .9rem 1rem; border-color: #dde5f1; background: #f8faff; }.crm-record-flow-header h3 { font-size: 1.05rem; }.crm-record-flow-header p { max-width: 37rem; font-size: .67rem; }.crm-record-flow-note { padding: .55rem .68rem; border-color: #dbe3f1; }.crm-record-tools { margin: 0 0 .85rem; padding: .45rem; border-radius: .78rem; background: #fff; }.crm-record-tools button { min-width: 5.45rem; min-height: 2.25rem; padding-inline: .62rem; border-radius: .55rem; color: #53617a; background: #f8faff; font-size: .64rem; }.crm-record-tools button:hover { color: #fff; background: #445fda; } #tab_zapisnik #zapisnikKontejner > .crm-record-board { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start !important; gap: 1rem !important; } #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card, #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card-note { grid-column: auto !important; display: flex !important; min-height: 0 !important; padding: 1.18rem !important; border-color: #dce4f0 !important; border-radius: 1rem !important; background: #fff !important; box-shadow: 0 9px 24px rgba(31,49,105,.055) !important; } #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card::before { height: .18rem; background: #5f76de !important; }#tab_zapisnik #zapisnikKontejner .crm-record-card h4 { min-height: 1.65rem; margin-bottom: .92rem !important; padding: 0 0 .76rem !important; border: 0 !important; border-bottom: 1px solid #e7ecf4 !important; color: #26344c !important; font-size: .73rem !important; letter-spacing: .06em !important; }.crm-record-board > .crm-record-card h4 svg { color: #5d72dc !important; }.crm-record-board > .crm-record-card h4::after { color: #5369d5 !important; background: #eef2ff !important; } #tab_zapisnik #zapisnikKontejner .crm-record-card .space-y-3 { display: grid; grid-template-columns: 1fr; gap: .5rem !important; flex: 0 0 auto; }.crm-control-label, #tab_zapisnik #zapisnikKontejner .crm-record-card label:not(.border-2) { margin: .12rem 0 -.12rem .05rem; color: var(--crm-muted) !important; font-size: .55rem !important; font-weight: 900 !important; letter-spacing: .075em; text-transform: uppercase; } #tab_zapisnik #zapisnikKontejner .crm-record-card .input-clean { width: 100%; min-height: 2.65rem !important; border: 1px solid #d8e1ef !important; border-radius: .62rem !important; color: #34425a !important; background: #f9fbfe !important; font-size: .7rem !important; font-weight: 700 !important; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }.crm-record-card .input-clean:focus { border-color: #7185e7 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(91,112,223,.12) !important; }.crm-record-card textarea.input-clean { min-height: 6.1rem !important; max-height: 9rem; padding: .72rem .82rem !important; line-height: 1.48; }.crm-record-card .input-clean::placeholder { color: #98a4b6; font-weight: 650; } #tab_zapisnik #zapisnikKontejner .crm-record-card label.border-2 { min-height: 3.1rem; margin-top: .08rem; border-color: #d5dff5 !important; border-radius: .62rem !important; background: #f8faff !important; }.crm-record-card label.border-2 span { color: #667796 !important; font-size: .64rem !important; }.crm-template-field { gap: .32rem; padding: .58rem !important; border-color: #e1e7f0 !important; border-radius: .7rem !important; background: #f8faff !important; }.crm-template-field.has-template { border-color: #b9c6ef !important; background: #f5f7ff !important; }.crm-template-field select { min-height: 2.35rem !important; }.crm-template-label button { min-height: 1.5rem !important; } #tab_zapisnik #zapisnikKontejner .crm-record-card > button[class*="bg-"] { min-height: 2.8rem !important; margin-top: 1rem !important; border-radius: .66rem !important; background: linear-gradient(135deg, #344fc9, #4f6fe5) !important; box-shadow: 0 8px 16px rgba(57,81,194,.16) !important; font-size: .7rem !important; }.crm-record-card .flex.items-center.gap-2.mb-2 { width: 100% !important; min-height: 3.25rem; padding: .45rem !important; border-color: #e0e6f0 !important; border-radius: .72rem !important; background: #f8faff !important; }.crm-record-card .flex.items-center.gap-2.mb-2 button { width: 2.35rem; height: 2.35rem; padding: 0 !important; border-radius: .56rem !important; }.crm-record-card .flex.items-center.gap-2.mb-2 span { color: #40506b !important; font-size: .61rem !important; } @media (max-width: 980px) { #tab_zapisnik #zapisnikKontejner { max-width: 100%; }#tab_zapisnik #zapisnikKontejner > .crm-record-board { grid-template-columns: 1fr !important; }#tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card, #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card-note { grid-column: auto !important; }.crm-record-flow-header { align-items: flex-start !important; flex-direction: column; }.crm-record-flow-note { width: 100%; } } @media (max-width: 640px) { #tab_zapisnik #zapisnikKontejner .crm-record-flow-header { padding: .82rem; }.crm-record-flow-header h3 { font-size: .98rem; }.crm-record-flow-header p { font-size: .63rem; }.crm-record-tools { overflow-x: auto; flex-wrap: nowrap; }.crm-record-tools > span, .crm-record-tools > button { flex: 0 0 auto; }.crm-record-tools button { min-width: auto; }.crm-record-board > .crm-record-card h4::after { display: none; }#tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card { padding: 1rem !important; } } /* Record workspace — one deliberate action at a time. This replaces the previous wall of cards with a focused, predictable administrative flow. */ #tab_zapisnik #zapisnikKontejner { max-width: 68rem; margin-inline: auto; }.crm-record-profile { min-height: 5.6rem; margin-bottom: 1rem !important; padding: 1.05rem 1.2rem !important; border: 1px solid rgba(135,153,255,.35); border-radius: 1.05rem !important; background: linear-gradient(112deg, #202e62, #344cae) !important; box-shadow: 0 14px 30px rgba(31,50,130,.15) !important; }.crm-record-profile > div:first-child > div:first-child { color: #b7c5ff !important; }.crm-record-profile h3 { font-size: 1.05rem !important; }.crm-record-profile button { min-height: 2.35rem !important; padding-inline: .8rem !important; border-radius: .65rem !important; } .crm-record-console { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1.25rem; margin-bottom: .9rem; padding: 1.05rem; border: 1px solid #dce4f1; border-radius: 1.05rem; background: linear-gradient(135deg, #fff, #f8faff); box-shadow: 0 8px 22px rgba(34,51,106,.04); }.crm-record-console-copy > span, .crm-record-console-status > span { display: block; color: #6177dc; font-size: .56rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.crm-record-console-copy h3 { margin: .18rem 0; color: #273550; font-size: 1.16rem; font-weight: 900; letter-spacing: -.04em; }.crm-record-console-copy p { max-width: 39rem; margin: 0; color: #75829a; font-size: .69rem; font-weight: 650; line-height: 1.55; }.crm-record-console-status { align-self: start; min-width: 11.5rem; padding: .65rem .75rem; border: 1px solid #dce5f7; border-radius: .75rem; background: #f6f8ff; }.crm-record-console-status strong { display: block; overflow: hidden; margin-top: .18rem; color: #405274; font-size: .68rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .crm-action-menu { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .42rem; padding-top: .18rem; }.crm-action-menu button { display: grid; min-height: 4.25rem; padding: .52rem .35rem; border: 1px solid #e1e7f1; border-radius: .72rem; color: #607089; background: #fff; text-align: left; transition: color .17s ease, border-color .17s ease, background .17s ease, box-shadow .17s ease, transform .17s ease; }.crm-action-menu button:hover { border-color: #aebcf1; color: #455fce; background: #f7f9ff; transform: translateY(-1px); }.crm-action-menu button.is-active { border-color: #546dde; color: #fff; background: linear-gradient(135deg, #3d58cf, #5775e4); box-shadow: 0 8px 17px rgba(54,77,188,.18); }.crm-action-menu button span { font-size: .52rem; font-weight: 900; letter-spacing: .08em; opacity: .72; }.crm-action-menu button strong { margin-top: .18rem; font-size: .69rem; font-weight: 900; }.crm-action-menu button small { overflow: hidden; margin-top: .12rem; font-size: .53rem; font-weight: 650; opacity: .8; text-overflow: ellipsis; white-space: nowrap; } #tab_zapisnik #zapisnikKontejner > .crm-record-board { display: block !important; max-width: 48rem; margin: 0 auto; }.crm-record-board > .crm-record-card, #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card { display: none !important; width: 100%; min-height: 0 !important; margin: 0 !important; padding: 1.2rem !important; border: 1px solid #dce4ef !important; border-radius: 1.05rem !important; background: #fff !important; box-shadow: 0 13px 30px rgba(31,49,101,.075) !important; }.crm-record-board > .crm-record-card.is-active, #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card.is-active { display: flex !important; flex-direction: column; animation: crm-panel-in .22s ease both; }@keyframes crm-panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } #tab_zapisnik #zapisnikKontejner .crm-record-card::before { height: .2rem; background: linear-gradient(90deg, #526be0, #7890ec) !important; }.crm-record-board > .crm-record-card h4, #tab_zapisnik #zapisnikKontejner .crm-record-card h4 { min-height: auto; margin: 0 0 1rem !important; padding: 0 0 .82rem !important; border: 0 !important; border-bottom: 1px solid #e5eaf3 !important; color: #293650 !important; font-size: .78rem !important; letter-spacing: .055em !important; }.crm-record-board > .crm-record-card h4::after { display: none !important; }.crm-record-board > .crm-record-card h4 svg { color: #5d73dc !important; } #tab_zapisnik #zapisnikKontejner .crm-record-card .space-y-3 { display: grid; grid-template-columns: 1fr; gap: .55rem !important; flex: 0 0 auto; }.crm-record-card .crm-control-label, #tab_zapisnik #zapisnikKontejner .crm-record-card label:not(.border-2) { margin: .16rem 0 -.15rem .05rem; color: var(--crm-muted) !important; font-size: .56rem !important; font-weight: 900 !important; letter-spacing: .09em; text-transform: uppercase; }.crm-record-card .input-clean, #tab_zapisnik #zapisnikKontejner .crm-record-card .input-clean { min-height: 2.75rem !important; border: 1px solid #d8e1ef !important; border-radius: .66rem !important; color: #36445d !important; background: #fafcff !important; font-size: .72rem !important; font-weight: 700 !important; }.crm-record-card textarea.input-clean { min-height: 7rem !important; max-height: 11rem; padding: .8rem .9rem !important; line-height: 1.5; }.crm-record-card label.border-2 { min-height: 3.25rem !important; border-color: #d2dcf4 !important; border-radius: .66rem !important; background: #f8faff !important; }.crm-record-card .input-clean:focus { border-color: #7488e6 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(90,110,220,.12) !important; } .crm-record-card .flex.items-center.gap-2.mb-2 { min-height: 3.5rem; padding: .5rem !important; border-color: #dfe6f1 !important; border-radius: .74rem !important; background: #f7f9fd !important; }.crm-record-card .flex.items-center.gap-2.mb-2 button { width: 2.45rem !important; height: 2.45rem !important; }.crm-template-field { margin-top: .4rem !important; padding: .65rem !important; border-color: #e1e7f0 !important; border-radius: .72rem !important; background: #f8faff !important; }.crm-template-field select { min-height: 2.38rem !important; }.crm-template-label button { min-height: 1.55rem !important; }.crm-record-card > button[class*="bg-"], #tab_zapisnik #zapisnikKontejner .crm-record-card > button[class*="bg-"] { min-height: 2.9rem !important; margin-top: 1rem !important; border-radius: .68rem !important; background: linear-gradient(135deg, #354fca, #5372e3) !important; box-shadow: 0 9px 18px rgba(53,77,192,.17) !important; font-size: .72rem !important; } @media (max-width: 940px) { .crm-action-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }.crm-record-console { grid-template-columns: 1fr; }.crm-record-console-status { width: 100%; }.crm-record-console-copy p { max-width: none; } } @media (max-width: 620px) { #tab_zapisnik #zapisnikKontejner { max-width: 100%; }.crm-record-profile { padding: .95rem !important; }.crm-record-console { padding: .85rem; border-radius: .9rem; }.crm-record-console-copy h3 { font-size: 1rem; }.crm-action-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .36rem; }.crm-action-menu button { min-height: 3.8rem; }.crm-action-menu button strong { font-size: .65rem; }.crm-record-board > .crm-record-card, #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card { padding: 1rem !important; border-radius: .9rem !important; }.crm-record-card textarea.input-clean { min-height: 6.1rem !important; }.crm-record-card .grid.grid-cols-2 { grid-template-columns: 1fr !important; } } /* Expanded form canvas: the selected workflow now uses the complete working area while preserving generous, consistent input spacing. */ @media (min-width: 621px) { #tab_zapisnik #zapisnikKontejner { max-width: 80rem; }#tab_zapisnik #zapisnikKontejner > .crm-record-board { max-width: none; }#tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card.is-active { padding: clamp(1.35rem, 2vw, 1.8rem) !important; }.crm-record-card.is-active .space-y-3 { max-width: none; }.crm-record-card.is-active textarea.input-clean { min-height: 8.25rem !important; }.crm-record-card.is-active label.border-2 { min-height: 3.7rem !important; }.crm-record-card.is-active > button[class*="bg-"] { min-height: 3.15rem !important; } } /* Record studio — a separate, rebuilt workflow for all seven record actions. */ #tab_zapisnik { --record-ink: #15233f; --record-muted: #6b7a95; --record-line: #dbe3ef; --record-surface: #ffffff; --record-soft: #f4f7fb; --record-teal: #0d9d91; --record-violet: #6d54db; } #tab_zapisnik .record-page-intro { margin: .2rem 0 1.1rem; }.record-page-intro p { margin: 0 0 .28rem; color: var(--record-teal); font-size: .64rem; font-weight: 900; letter-spacing: .16em; }.record-page-intro h2 { margin: 0; color: var(--record-ink); font-size: clamp(1.65rem, 2.35vw, 2.25rem); font-weight: 900; letter-spacing: -.055em; }.record-page-intro > span { display: block; margin-top: .35rem; color: var(--record-muted); font-size: .8rem; font-weight: 650; } #tab_zapisnik .record-member-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; margin-bottom: 1.15rem; padding: 1.15rem; border: 1px solid var(--record-line); border-radius: 1.15rem; background: var(--record-surface); box-shadow: 0 12px 30px rgba(26,46,86,.055); }.record-stage-label { display: flex; align-items: center; gap: .65rem; min-width: 12rem; padding: .3rem 0; }.record-stage-label b { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .8rem; color: #fff; background: linear-gradient(135deg, var(--record-teal), #49bbaa); font-size: .75rem; letter-spacing: .05em; }.record-stage-label span, .record-stage-hint { color: var(--crm-muted); font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.record-stage-label h3 { margin: .12rem 0 0; color: var(--record-ink); font-size: .9rem; font-weight: 850; }.record-member-search { position: relative; min-width: 0; }.record-member-search > label { display: block; margin: 0 0 .4rem; color: #5e6f89; font-size: .61rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.record-search-input { display: flex; align-items: center; height: 3.15rem; overflow: hidden; border: 1px solid #cad7e8; border-radius: .82rem; background: #fbfcff; transition: border-color .16s ease, box-shadow .16s ease; }.record-search-input:focus-within { border-color: var(--record-teal); background: #fff; box-shadow: 0 0 0 3px rgba(13,157,145,.11); }.record-search-input > span { width: 2.85rem; color: #5b7091; font-size: 1.55rem; font-weight: 400; text-align: center; }.record-search-input input { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; color: var(--record-ink); background: transparent; font-size: .83rem; font-weight: 700; }.record-search-input input::placeholder { color: #93a0b3; }.record-search-input kbd { margin-right: .55rem; padding: .25rem .42rem; border: 1px solid #d9e1ec; border-radius: .38rem; color: var(--crm-muted); background: #fff; font: 800 .56rem/1 inherit; white-space: nowrap; }.record-member-shortcuts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }.record-member-shortcuts button { min-height: 1.95rem; padding: 0 .62rem; border: 1px solid #d7e1ed; border-radius: .5rem; color: #52657e; background: #fff; font-size: .63rem; font-weight: 800; transition: color .16s ease, border-color .16s ease, background .16s ease; }.record-member-shortcuts button:hover { border-color: #87cfc7; color: #087d73; background: #effbf9; }.record-member-search #zapisnikRezultati { position: absolute; z-index: 25; right: 0; left: 0; max-height: 18rem; margin-top: .55rem; border-color: #cbd8e8; border-radius: .85rem; background: #fff; box-shadow: 0 16px 32px rgba(21,35,63,.16); }.record-stage-hint { align-self: center; margin: .25rem 0 0; line-height: 1.45; text-align: right; }.record-stage-hint strong { color: #485b79; } #tab_zapisnik #zapisnikKontejner { width: 100%; max-width: 88rem; margin-inline: auto; }.record-subject-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 1.15rem 1.25rem; border: 1px solid #22325a; border-radius: 1.1rem; color: #fff; background: linear-gradient(110deg, #15264e, #274b84 56%, #7057d6); box-shadow: 0 16px 32px rgba(34,56,123,.2); }.record-subject-primary > span { color: #a9c5ff; font-size: .58rem; font-weight: 900; letter-spacing: .12em; }.record-subject-primary h3 { margin: .22rem 0 .15rem; color: #fff; font-size: 1.25rem; font-weight: 900; letter-spacing: -.035em; }.record-subject-primary #zapInsta { color: #71dcce; font-size: .82rem; font-weight: 800; }.record-subject-data { display: grid; gap: .36rem; color: #e1eaff; font-size: .66rem; font-weight: 650; }.record-subject-banner > button { min-height: 2.55rem; padding: 0 .9rem; border: 1px solid rgba(255,255,255,.3); border-radius: .65rem; color: #fff; background: rgba(255,255,255,.11); font-size: .68rem; font-weight: 850; transition: background .16s ease, transform .16s ease; }.record-subject-banner > button:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); } .record-workspace { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }.record-action-rail { overflow: hidden; border: 1px solid #d8e1ec; border-radius: 1.1rem; background: #fff; box-shadow: 0 10px 25px rgba(22,41,80,.055); }.record-rail-heading { padding: 1rem; border-bottom: 1px solid #e5ebf2; background: #f7f9fc; }.record-rail-heading > span, .record-workbench-head > div > span { display: block; color: var(--record-teal); font-size: .57rem; font-weight: 900; letter-spacing: .12em; }.record-rail-heading h3 { margin: .25rem 0; color: var(--record-ink); font-size: .88rem; font-weight: 900; }.record-rail-heading p { margin: 0; color: var(--record-muted); font-size: .62rem; font-weight: 600; line-height: 1.45; }.record-action-list { display: grid; gap: .1rem; padding: .45rem; }.record-action-list button { display: flex; gap: .6rem; align-items: center; width: 100%; min-height: 3.35rem; padding: .45rem .5rem; border: 1px solid transparent; border-radius: .72rem; color: #66758d; background: transparent; text-align: left; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }.record-action-list button:hover { color: #315c8e; background: #f4f8fc; }.record-action-list button.is-active { border-color: #bcded9; color: #145b66; background: linear-gradient(135deg, #ecfaf8, #f0f5ff); }.record-action-list button i { display: grid; flex: 0 0 1.8rem; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .55rem; color: var(--crm-muted); background: #edf1f6; font-size: .56rem; font-style: normal; font-weight: 900; }.record-action-list button.is-active i { color: #fff; background: linear-gradient(135deg, var(--record-teal), #3e78c5); }.record-action-list button span { min-width: 0; }.record-action-list button strong, .record-action-list button small { display: block; }.record-action-list button strong { color: currentColor; font-size: .68rem; font-weight: 850; }.record-action-list button small { overflow: hidden; margin-top: .08rem; color: #8a97aa; font-size: .55rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.record-workbench { min-width: 0; overflow: hidden; border: 1px solid #d8e1ec; border-radius: 1.1rem; background: #fff; box-shadow: 0 12px 30px rgba(22,41,80,.07); }.record-workbench-head { display: flex; gap: 1rem; align-items: start; justify-content: space-between; padding: 1.15rem 1.25rem; border-bottom: 1px solid #e4eaf2; background: linear-gradient(135deg, #fff, #f6f8fd); }.record-workbench-head h3 { margin: .2rem 0; color: var(--record-ink); font-size: 1.12rem; font-weight: 900; letter-spacing: -.035em; }.record-workbench-head p { max-width: 42rem; margin: 0; color: var(--record-muted); font-size: .68rem; font-weight: 650; line-height: 1.5; }.record-workbench-head > strong { flex: 0 1 15rem; overflow: hidden; padding: .55rem .65rem; border: 1px solid #dce6ef; border-radius: .64rem; color: #455c77; background: #fff; font-size: .65rem; font-weight: 850; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .record-forms { padding: 1.25rem; background: #f6f8fc; }.record-form-panel { display: none; padding: 1.3rem; border: 1px solid #dbe4ef; border-radius: .92rem; background: #fff; animation: record-panel-enter .2s ease both; }.record-form-panel.is-active { display: block; }@keyframes record-panel-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }.record-form-title { display: flex; gap: .72rem; align-items: center; margin-bottom: 1.15rem; padding-bottom: .95rem; border-bottom: 1px solid #e6ebf2; }.record-form-title > span { display: grid; flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .66rem; color: #fff; background: linear-gradient(135deg, #1a9e91, #517ad0); font-size: .62rem; font-weight: 900; }.record-form-title h4 { margin: 0; color: #1e2e4a; font-size: .88rem; font-weight: 900; letter-spacing: -.015em; }.record-form-title p { margin: .15rem 0 0; color: #7d8ba0; font-size: .62rem; font-weight: 650; }.record-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }.record-fields-note .record-field:first-child { max-width: 22rem; }.record-field { min-width: 0; }.record-field-wide, .record-message-field, .record-operation, .record-date-range, .record-extension { grid-column: 1 / -1; }.record-field > label, .record-message-field label, .record-operation > span, .record-upload > span { display: block; margin: 0 0 .38rem; color: var(--crm-muted); font-size: .58rem; font-weight: 900; letter-spacing: .085em; text-transform: uppercase; }.record-field input, .record-field select, .record-field textarea, .record-message-field select { box-sizing: border-box; width: 100%; min-height: 3.1rem; padding: 0 .85rem; border: 1px solid #ccd8e8; border-radius: .66rem; outline: 0; color: #263853; background: #fbfcfe; font-family: inherit; font-size: .74rem; font-weight: 700; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }.record-field textarea { min-height: 9rem; padding: .8rem .85rem; line-height: 1.55; resize: vertical; }.record-field input::placeholder, .record-field textarea::placeholder { color: #9aa7b9; }.record-field input:focus, .record-field select:focus, .record-field textarea:focus, .record-message-field select:focus { border-color: var(--record-teal); background: #fff; box-shadow: 0 0 0 3px rgba(13,157,145,.1); }.record-upload { display: grid; grid-template-columns: auto 1fr; gap: .1rem .65rem; align-items: center; min-height: 4.5rem; padding: .8rem .9rem; border: 1px dashed #aebed4; border-radius: .75rem; color: #526782; background: #f8fafc; cursor: pointer; transition: border-color .16s ease, background .16s ease; }.record-upload:hover { border-color: var(--record-teal); background: #f0fbf9; }.record-upload > span { grid-row: 1 / span 2; margin: 0; padding: .48rem .58rem; border-radius: .45rem; color: #147f76; background: #ddf6f1; }.record-upload strong { overflow: hidden; color: #405674; font-size: .7rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }.record-upload small { color: #8795a9; font-size: .59rem; font-weight: 650; }.record-upload input { display: none; }.record-operation { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem .7rem; align-items: center; padding: .8rem; border: 1px solid #dde6f0; border-radius: .75rem; background: #f7f9fc; }.record-operation > span { grid-column: 1 / -1; }.record-toggle-group { display: flex; gap: .4rem; }.record-toggle-choice { min-height: 2.5rem; padding: 0 .72rem; border: 1px solid #cfdbe9; border-radius: .56rem; color: #5a6c85; background: #fff; font-size: .66rem; font-weight: 850; transition: color .16s ease, background .16s ease, border-color .16s ease; }.record-toggle-choice:hover { border-color: #a8bad3; }.record-toggle-choice.is-active { border-color: #315f99; color: #fff; background: #315f99; }.record-operation > strong { color: #45607e; font-size: .67rem; font-weight: 850; }.record-message-field { padding: .85rem; border: 1px solid #dde5ee; border-radius: .75rem; background: #f8fafc; }.record-message-field.has-template { border-color: #8fcac3; background: #f1fbf9; }.record-message-field > div { display: flex; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .45rem; }.record-message-field label { margin: 0; }.record-message-field button { min-height: 1.75rem; padding: 0 .48rem; border: 0; border-radius: .42rem; color: #24736d; background: #e0f5f2; font-size: .58rem; font-weight: 850; }.record-message-field small { display: block; margin-top: .38rem; color: #8390a4; font-size: .56rem; font-weight: 650; }.record-date-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.record-extension { padding: .8rem; border: 1px solid #b9d9d5; border-radius: .75rem; color: #296a69; background: #effaf8; }.record-extension p { margin: 0 0 .65rem; font-size: .68rem; font-weight: 750; }.record-extension .record-field { max-width: 24rem; }.record-automation-note { padding: .9rem; border: 1px solid #d5dcef; border-radius: .75rem; background: #f4f6ff; }.record-automation-note span { display: block; color: #5c69c4; font-size: .56rem; font-weight: 900; letter-spacing: .09em; }.record-automation-note strong { display: block; margin-top: .32rem; color: #344378; font-size: .72rem; font-weight: 900; }.record-automation-note p { margin: .25rem 0 0; color: #7380a0; font-size: .62rem; font-weight: 650; line-height: 1.45; }.record-submit { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 3.25rem; margin-top: 1.15rem; border: 0; border-radius: .72rem; color: #fff; background: linear-gradient(100deg, #0a8e85, #4777d1); box-shadow: 0 10px 20px rgba(30,91,159,.18); font-size: .75rem; font-weight: 900; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }.record-submit:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 13px 24px rgba(30,91,159,.24); }.record-submit:disabled { cursor: wait; filter: grayscale(.35); opacity: .65; transform: none; }.record-submit b { font-size: 1rem; font-weight: 500; } @media (max-width: 1020px) { #tab_zapisnik .record-member-stage { grid-template-columns: auto minmax(0, 1fr); }.record-stage-hint { grid-column: 2; text-align: left; }.record-workspace { grid-template-columns: 1fr; }.record-action-rail { overflow: visible; }.record-action-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }.record-action-list button { min-height: 4.2rem; align-items: flex-start; flex-direction: column; gap: .35rem; }.record-action-list button i { flex-basis: 1.55rem; width: 1.55rem; height: 1.55rem; }.record-action-list button small { white-space: normal; }.record-workbench-head > strong { flex-basis: 12rem; } } @media (max-width: 640px) { .record-page-intro h2 { font-size: 1.55rem; }.record-page-intro > span { font-size: .72rem; }.record-member-stage { grid-template-columns: 1fr !important; gap: .7rem !important; padding: .9rem !important; }.record-stage-label { min-width: 0; }.record-stage-hint { grid-column: auto; margin: 0; text-align: left; }.record-search-input { height: 3rem; }.record-search-input kbd { display: none; }.record-subject-banner { grid-template-columns: 1fr; gap: .7rem; padding: 1rem; }.record-subject-data { grid-template-columns: 1fr; }.record-subject-banner > button { width: 100%; }.record-action-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .35rem; }.record-action-list button { min-height: 3.85rem; padding: .45rem; }.record-action-list button small { display: none; }.record-workbench-head { flex-direction: column; padding: 1rem; }.record-workbench-head > strong { width: 100%; max-width: none; text-align: left; }.record-forms { padding: .75rem; }.record-form-panel { padding: .95rem; }.record-fields, .record-date-range { grid-template-columns: 1fr; gap: .75rem; }.record-fields-note .record-field:first-child { max-width: none; }.record-toggle-group { display: grid; grid-template-columns: 1fr 1fr; }.record-operation { grid-template-columns: 1fr; }.record-operation > strong { justify-self: start; }.record-field input, .record-field select, .record-field textarea, .record-message-field select { min-height: 3rem; font-size: .75rem; }.record-field textarea { min-height: 8rem; }.record-message-field > div { align-items: flex-start; flex-direction: column; gap: .4rem; }.record-message-field button { width: 100%; }.record-extension .record-field { max-width: none; } } /* Final alignment pass for the record studio controls. */ #tab_zapisnik .record-field input:not([type="file"]), #tab_zapisnik .record-field select, #tab_zapisnik .record-message-field select { height: 3.45rem !important; min-height: 3.45rem !important; padding-block: 0 !important; } #tab_zapisnik .record-field textarea { height: auto !important; min-height: 9rem !important; padding-block: .85rem !important; } @media (max-width: 640px) { #tab_zapisnik .record-field input:not([type="file"]), #tab_zapisnik .record-field select, #tab_zapisnik .record-message-field select { height: 3.25rem !important; min-height: 3.25rem !important; } } /* Pauze, provjera dvostrukog upisa i nadzor administratorskih uređaja. */ .record-field label small { margin-left: .24rem; color: #8a98ab; font-size: .52rem; font-weight: 750; letter-spacing: 0; text-transform: none; } .record-pause-indefinite { display: flex; grid-column: 1 / -1; gap: .62rem; align-items: center; min-height: 3.35rem; padding: .68rem .78rem; border: 1px solid #d6e4eb; border-radius: .7rem; color: #426078; background: #f5fbfb; cursor: pointer; } .record-pause-indefinite input { width: 1rem; height: 1rem; accent-color: #149b8d; } .record-pause-indefinite b, .record-pause-indefinite small { display: block; } .record-pause-indefinite b { color: #24646a; font-size: .67rem; font-weight: 900; } .record-pause-indefinite small { margin-top: .1rem; color: #7d92a3; font-size: .56rem; font-weight: 650; } .record-pause-indefinite:has(input:checked) { border-color: #7bcac1; background: #edf9f6; } .record-field input:disabled { cursor: not-allowed; color: #9ba8b8; background: #edf1f5; } .duplicate-check-modal, .admin-security-modal { position: relative; width: min(100%, 30rem); padding: 1.45rem; border: 1px solid rgba(255,255,255,.72); border-radius: 1.2rem; color: #32435f; background: linear-gradient(145deg, #fff, #f7fbff); box-shadow: 0 24px 70px rgba(13,29,59,.27); } .duplicate-check-modal > p, .admin-security-modal > p { margin: 0 0 .32rem; color: #0f857e; font-size: .58rem; font-weight: 900; letter-spacing: .13em; } .duplicate-check-modal h3, .admin-security-modal h3 { margin: 0; color: #223452; font-size: 1.2rem; font-weight: 950; letter-spacing: -.035em; } .duplicate-check-modal > span:not(.duplicate-check-icon) { display: block; margin-top: .72rem; color: #718198; font-size: .67rem; font-weight: 650; line-height: 1.5; } .duplicate-check-close, .admin-security-close { position: absolute; top: .7rem; right: .8rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; color: #8290a4; background: #edf2f7; font-size: 1.2rem; line-height: 1; } .duplicate-check-icon { display: grid; width: 2.3rem; height: 2.3rem; margin-bottom: .75rem; place-items: center; border-radius: .72rem; color: #b37119; background: #fff4dc; font-size: 1.08rem; font-weight: 950; } .duplicate-check-details { margin-top: .95rem; padding: .75rem .82rem; border: 1px solid #e0e8f1; border-radius: .72rem; color: #526986; background: #fff; font-size: .66rem; font-weight: 750; line-height: 1.55; } .duplicate-check-details b { color: #2d4363; } .duplicate-check-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: .55rem; margin-top: 1.05rem; } .duplicate-check-actions button { min-height: 2.9rem; border: 1px solid #d6e0ea; border-radius: .68rem; color: #5e718b; background: #fff; font-size: .65rem; font-weight: 850; } .duplicate-check-actions button:last-child { border-color: #1b897f; color: #fff; background: linear-gradient(120deg,#087e77,#3d69c8); box-shadow: 0 8px 17px rgba(30,104,154,.18); } .admin-security-modal { width: min(100%, 38rem); } .admin-security-summary { margin: .8rem 0; padding: .72rem .84rem; border: 1px solid #cde4df; border-radius: .72rem; color: #276d68; background: #effaf7; font-size: .67rem; font-weight: 800; } .admin-security-summary.is-alert { border-color: #edcf9f; color: #9b6219; background: #fff8ec; } .admin-security-session-list { display: grid; gap: .55rem; max-height: 20rem; overflow-y: auto; } .admin-security-session { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .72rem .78rem; border: 1px solid #dce6ee; border-radius: .74rem; background: #fff; } .admin-security-session.is-current { border-color: #9fd7ce; background: #f2fbf9; } .admin-security-session strong, .admin-security-session span, .admin-security-session small { display: block; } .admin-security-session strong { overflow: hidden; color: #31465f; font-size: .67rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .admin-security-session span { margin-top: .14rem; color: #6380a1; font-size: .59rem; font-weight: 750; } .admin-security-session small { margin-top: .15rem; color: #8794a5; font-size: .52rem; font-weight: 650; } .admin-security-session button { min-height: 2.25rem; padding: 0 .58rem; border: 1px solid #ecc8cf; border-radius: .56rem; color: #ad4b5b; background: #fff8f9; font-size: .57rem; font-weight: 900; } .superadmin-security-chip { display: inline-flex; align-items: center; gap: .28rem; min-height: 1.95rem; padding: 0 .47rem; border: 1px solid #cfe2dc; border-radius: .45rem; color: #16766c; background: #effaf7; font-size: .5rem; font-weight: 900; white-space: nowrap; } .superadmin-security-chip.is-alert { border-color: #efd0a4; color: #a46a1f; background: #fff8ed; } .superadmin-security-chip::before { width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; content: ''; } @media (max-width: 640px) { .record-pause-indefinite { min-height: 3.05rem; } .duplicate-check-actions { grid-template-columns: 1fr; } .admin-security-session { grid-template-columns: 1fr; } .admin-security-session button { width: 100%; } } /* Registri are a separate workspace: focused navigation on the left and expandable, filterable results on the right. */ #tab_pregledRegistri { gap: 1rem; min-height: 0; } #tab_pregledRegistri .registers-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.3rem; border: 1px solid #dbe4f2; border-radius: 1.15rem; background: linear-gradient(118deg, #fff 0%, #f5f8ff 72%, #edf5ff 100%); box-shadow: 0 12px 28px rgba(35,54,104,.055); } #tab_pregledRegistri .registers-eyebrow, #tab_pregledRegistri .registers-workspace-head p { margin: 0; color: #168f8a; font-size: .59rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } #tab_pregledRegistri .registers-hero h2 { margin: .2rem 0 .28rem; color: #1e2d4b; font-size: clamp(1.65rem, 3vw, 2.35rem) !important; } #tab_pregledRegistri .registers-intro { max-width: 42rem; margin: 0; color: var(--crm-muted); font-size: .72rem; font-weight: 650; line-height: 1.55; } #tab_pregledRegistri .registers-refresh { flex: 0 0 auto; min-height: 2.65rem; padding: 0 .95rem; border: 1px solid #b8cfeb; border-radius: .7rem; color: #315a8b; background: #fff; font-size: .68rem; font-weight: 850; } #tab_pregledRegistri .registers-refresh:hover { border-color: #396bd5; color: #fff; background: #396bd5; box-shadow: 0 8px 18px rgba(51,100,201,.19); } .registers-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .register-summary-card { display: grid; gap: .16rem; min-height: 6.35rem; padding: .88rem .95rem; border: 1px solid #dfe7f3; border-radius: .95rem; background: #fff; text-align: left; box-shadow: 0 9px 20px rgba(32,52,98,.045); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .register-summary-card:hover { border-color: #b5c7e8; transform: translateY(-2px); box-shadow: 0 13px 24px rgba(32,52,98,.08); } .register-summary-label { color: var(--crm-muted); font-size: .56rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .register-summary-card strong { color: #23334f; font-size: 1.55rem; font-weight: 900; letter-spacing: -.055em; line-height: 1; } .register-summary-card small { color: var(--crm-muted); font-size: .6rem; font-weight: 700; } .register-summary-notes { border-top: 3px solid #4e72df; }.register-summary-pause { border-top: 3px solid #4f8e9d; }.register-summary-vip { border-top: 3px solid #b17a3c; }.register-summary-cases { border-top: 3px solid #cf5969; } .registers-studio { display: grid; grid-template-columns: 13rem minmax(0, 1fr); flex: 1 1 auto; min-height: 0; gap: 1rem; } .registers-nav { display: grid; align-content: start; gap: .5rem; padding: .55rem; border: 1px solid #dbe4f1; border-radius: 1rem; background: #fff; box-shadow: 0 10px 25px rgba(32,52,98,.05); } .register-nav-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .55rem; align-items: center; width: 100%; min-height: 4.35rem; padding: .6rem; border: 1px solid transparent; border-radius: .72rem; color: #5e6e88; background: transparent; text-align: left; } .register-nav-item > span { display: grid; grid-row: span 2; width: 2rem; height: 2rem; place-items: center; border-radius: .56rem; color: var(--crm-muted); background: #eef2f7; font-size: .6rem; font-weight: 900; } .register-nav-item b { overflow: hidden; color: currentColor; font-size: .7rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }.register-nav-item small { overflow: hidden; margin-top: .05rem; color: var(--crm-muted); font-size: .55rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .register-nav-item:hover { color: #315d93; background: #f5f8fd; }.register-nav-item.is-active { border-color: #b7d8d4; color: #116c70; background: linear-gradient(120deg, #edf9f7, #edf2ff); }.register-nav-item.is-active > span { color: #fff; background: linear-gradient(135deg, #119b91, #4779d1); box-shadow: 0 6px 13px rgba(41,118,177,.2); } .registers-workspace { min-width: 0; min-height: 0; overflow: auto; border: 1px solid #d9e3f1; border-radius: 1rem; background: #fff; box-shadow: 0 12px 28px rgba(32,52,98,.06); } .registers-workspace-head { padding: 1.15rem 1.25rem 1rem; border-bottom: 1px solid #e5ebf3; background: linear-gradient(135deg, #fff, #f7f9fd); }.registers-workspace-head h3 { margin: .22rem 0 .2rem; color: #21314d; font-size: 1.12rem; font-weight: 900; letter-spacing: -.035em; }.registers-workspace-head span { color: #78869d; font-size: .67rem; font-weight: 650; line-height: 1.45; } .register-panel { padding: 1.15rem 1.25rem 1.3rem; animation: registry-panel-in .2s ease both; }@keyframes registry-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .register-toolbar { display: grid; align-items: end; gap: .65rem; padding: .8rem; border: 1px solid #e1e8f1; border-radius: .85rem; background: #f8fafc; }.register-toolbar-notes { grid-template-columns: minmax(12rem, 1.65fr) minmax(8.4rem, .83fr) minmax(8.4rem, .83fr) auto auto; }.register-toolbar-cases { grid-template-columns: minmax(12rem, 1fr) minmax(9rem, .52fr) auto; max-width: 48rem; } .register-field { display: grid; min-width: 0; gap: .32rem; }.register-field > span { color: var(--crm-muted); font-size: .55rem; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; }.register-field input, .register-field select { box-sizing: border-box; width: 100%; height: 2.72rem; min-height: 2.72rem; padding: 0 .75rem; border: 1px solid #cfdae9; border-radius: .62rem; outline: 0; color: #34445f; background: #fff; font-family: inherit; font-size: .69rem; font-weight: 750; transition: border-color .16s ease, box-shadow .16s ease; }.register-field input:focus, .register-field select:focus { border-color: #5181dc; box-shadow: 0 0 0 3px rgba(81,129,220,.12); }.register-field input::placeholder { color: #99a6b8; } .register-search-field input { padding-left: 2.2rem; background-image: radial-gradient(circle at 1rem 50%, #5d7394 0 .2rem, transparent .22rem), linear-gradient(45deg, transparent 46%, #5d7394 47% 54%, transparent 55%); background-repeat: no-repeat; background-size: auto, .48rem .48rem; background-position: 0 0, .77rem 1.55rem; } .register-toggle { display: inline-flex; gap: .45rem; align-items: center; min-height: 2.72rem; padding: 0 .1rem; color: #5f6e86; font-size: .62rem; font-weight: 800; white-space: nowrap; cursor: pointer; }.register-toggle input { position: absolute; opacity: 0; }.register-toggle span { position: relative; width: 2.15rem; height: 1.2rem; border-radius: 99px; background: #cbd5e3; transition: background .16s ease; }.register-toggle span::after { content: ''; position: absolute; top: .16rem; left: .16rem; width: .88rem; height: .88rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,39,75,.18); transition: transform .16s ease; }.register-toggle input:checked + span { background: #1ba397; }.register-toggle input:checked + span::after { transform: translateX(.95rem); }.register-toggle input:focus-visible + span { outline: 3px solid rgba(36,137,164,.2); outline-offset: 2px; } .register-clear { min-height: 2.72rem; padding: 0 .72rem; border: 1px solid #d3ddea; border-radius: .62rem; color: #5e708d; background: #fff; font-size: .63rem; font-weight: 850; white-space: nowrap; }.register-clear:hover { border-color: #9eafc7; color: #314c73; background: #f4f7fb; } .register-list-head { display: flex; justify-content: space-between; gap: .8rem; margin: .85rem 0 .55rem; color: var(--crm-muted); font-size: .58rem; font-weight: 750; }.register-list-head span:first-child { color: #4770c6; font-weight: 900; } .register-note-list, .register-status-list { display: grid; gap: .52rem; }.register-note-row { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) auto; gap: .7rem; align-items: start; padding: .75rem; border: 1px solid #e0e7f1; border-radius: .82rem; background: #fff; transition: border-color .16s ease, box-shadow .16s ease; }.register-note-row:hover { border-color: #b9c9e4; box-shadow: 0 8px 18px rgba(32,52,98,.055); } .register-note-marker { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .67rem; color: #fff; background: linear-gradient(135deg, #4c76d6, #2db0a4); font-size: .73rem; font-weight: 900; }.register-note-content { min-width: 0; }.register-note-title { display: flex; justify-content: space-between; gap: .8rem; align-items: start; }.register-note-title > div { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-width: 0; }.register-note-title strong { color: #315f9c; font-size: .7rem; font-weight: 900; }.register-note-title time { flex: 0 0 auto; color: var(--crm-muted); font-size: .54rem; font-weight: 700; }.register-note-type { padding: .22rem .4rem; border-radius: .33rem; color: #526277; background: #eef2f6; font-size: .49rem; font-weight: 900; letter-spacing: .065em; text-transform: uppercase; }.register-note-type.type-primjedba { color: #935d1f; background: #fff4e6; }.register-note-type.type-prijedlog { color: #347569; background: #e8f8f3; }.register-note-content > p { margin: .38rem 0 .22rem; color: #4f5f77; font-size: .66rem; font-weight: 650; line-height: 1.5; }.register-note-content > small { color: var(--crm-muted); font-size: .53rem; font-weight: 700; }.register-proof { display: inline-flex; gap: .45rem; align-items: center; margin: .45rem 0; padding: .3rem .45rem .3rem .3rem; border: 1px solid #d8e2ef; border-radius: .52rem; color: #486286; background: #f8faff; font-size: .55rem; font-weight: 800; }.register-proof img { width: 2rem; height: 2rem; border-radius: .32rem; object-fit: cover; }.register-delete { min-height: 2rem; padding: 0 .55rem; border: 1px solid #f0cbd2; border-radius: .5rem; color: #c14b5b; background: #fff8f9; font-size: .56rem; font-weight: 850; }.register-delete:hover { color: #fff; background: #c44e60; } .register-status-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }.register-status-section { min-width: 0; padding: .85rem; border: 1px solid #e0e7f0; border-radius: .9rem; background: #fbfcfe; }.register-section-heading { display: flex; justify-content: space-between; gap: .6rem; align-items: center; margin-bottom: .7rem; padding-bottom: .65rem; border-bottom: 1px solid #e4eaf2; }.register-section-heading p { margin: 0 0 .08rem; color: #7e8ca4; font-size: .52rem; font-weight: 900; letter-spacing: .08em; }.register-section-heading h4 { margin: 0; color: #293953; font-size: .78rem; font-weight: 900; }.register-section-heading > span { padding: .27rem .43rem; border-radius: .38rem; color: #466eae; background: #edf3ff; font-size: .53rem; font-weight: 850; white-space: nowrap; } .register-status-card { padding: .68rem .7rem; border: 1px solid #dfe7f1; border-radius: .7rem; background: #fff; }.register-status-card.is-pause { border-left: 3px solid #5199a4; }.register-status-card.is-vip { border-left: 3px solid #c28d48; }.register-status-card-top { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }.register-status-card-top span { color: #8c99ab; font-size: .49rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }.register-status-card-top strong { overflow: hidden; color: #315f9c; font-size: .68rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }.register-status-card p { margin: .4rem 0 .22rem; color: #596b86; font-size: .59rem; font-weight: 650; line-height: 1.4; }.register-status-card time { color: #8a97aa; font-size: .52rem; font-weight: 750; }.register-status-card button { display: block; width: 100%; min-height: 2rem; margin-top: .55rem; border: 1px solid #e2cbd0; border-radius: .48rem; color: #bb5160; background: #fffafa; font-size: .56rem; font-weight: 850; }.register-status-card button:hover { color: #fff; background: #c65364; } .register-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }.register-case-card { display: grid; gap: .72rem; min-width: 0; padding: .82rem; border: 1px solid #dfe6f1; border-radius: .8rem; color: inherit; background: linear-gradient(145deg, #fff, #fbfcff); text-align: left; }.register-case-card:hover { border-color: #d5a8b2; box-shadow: 0 10px 18px rgba(102,46,62,.08); }.register-case-name { display: block; overflow: hidden; color: #2c3d59; font-size: .72rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }.register-case-card strong { display: block; overflow: hidden; margin-top: .14rem; color: #4670b4; font-size: .6rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.register-case-stats { display: flex; flex-wrap: wrap; gap: .35rem; }.register-case-stats span { padding: .3rem .4rem; border-radius: .38rem; font-size: .54rem; font-weight: 850; }.register-case-minus { color: #b74055; background: #fff0f2; }.register-case-warning { color: #a66a1f; background: #fff6e8; }.register-case-card small { display: flex; justify-content: space-between; gap: .3rem; color: #75839a; font-size: .56rem; font-weight: 800; }.register-case-card small b { color: #5276ca; font-size: .76rem; } .register-empty-state { grid-column: 1 / -1; padding: 2.4rem 1rem; border: 1px dashed #d9e2ee; border-radius: .75rem; color: #8492a7; background: #fbfcfe; font-size: .67rem; font-weight: 750; text-align: center; } @media (max-width: 1050px) { .registers-studio { grid-template-columns: 1fr; }.registers-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }.register-nav-item { min-height: 3.8rem; }.registers-workspace { overflow: visible; }.register-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { #tab_pregledRegistri .registers-hero { align-items: flex-start; flex-direction: column; padding: 1rem; }.registers-refresh { width: 100%; }.registers-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }.register-summary-card { min-height: 5.5rem; padding: .75rem; }.registers-nav { overflow-x: auto; grid-template-columns: repeat(3, minmax(9.5rem, 1fr)); padding: .42rem; }.register-toolbar-notes, .register-toolbar-cases { grid-template-columns: 1fr 1fr; }.register-search-field { grid-column: 1 / -1; }.register-toggle { min-height: 2.35rem; }.register-clear { min-height: 2.45rem; }.register-status-layout { grid-template-columns: 1fr; }.register-case-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { #tab_pregledRegistri .registers-hero h2 { font-size: 1.55rem !important; }.registers-summary { grid-template-columns: 1fr 1fr; }.register-summary-card strong { font-size: 1.35rem; }.register-panel { padding: .85rem; }.registers-workspace-head { padding: .95rem; }.register-toolbar-notes, .register-toolbar-cases { grid-template-columns: 1fr; padding: .65rem; }.register-search-field { grid-column: auto; }.register-list-head { align-items: flex-start; flex-direction: column; gap: .18rem; }.register-note-row { grid-template-columns: 2rem minmax(0, 1fr); padding: .65rem; }.register-note-marker { width: 2rem; height: 2rem; }.register-note-title { align-items: start; flex-direction: column; gap: .28rem; }.register-delete { grid-column: 2; width: 100%; }.register-proof { max-width: 100%; }.register-status-section { padding: .7rem; } } /* Member dossiers use a new review flow: find a member, read the current state, then scan a calm chronological activity feed. */ #tab_dosje { gap: 1rem; min-height: 0; } #tab_dosje .dossier-page-intro { padding: .25rem .1rem; }.dossier-page-intro > p { margin: 0; color: #17968b; font-size: .59rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.dossier-page-intro h2 { margin: .2rem 0 .28rem; color: #1d2d4a; font-size: clamp(1.65rem, 3vw, 2.35rem) !important; }.dossier-page-intro > span { color: #73819b; font-size: .73rem; font-weight: 650; line-height: 1.5; } .dossier-discovery { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr) 14rem; gap: 1rem; align-items: center; padding: 1rem 1.15rem; border: 1px solid #d9e3f0; border-radius: 1.1rem; background: #fff; box-shadow: 0 12px 28px rgba(27,47,94,.055); }.dossier-discovery-step { display: flex; gap: .7rem; align-items: center; }.dossier-discovery-step > span { display: grid; flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: .8rem; color: #fff; background: linear-gradient(135deg, #179c91, #4b78d2); font-size: .75rem; font-weight: 900; }.dossier-discovery-step p { margin: 0 0 .1rem; color: var(--crm-muted); font-size: .54rem; font-weight: 900; letter-spacing: .1em; }.dossier-discovery-step h3 { margin: 0; color: #21314e; font-size: .91rem; font-weight: 900; letter-spacing: -.02em; }.dossier-discovery-step small { display: block; margin-top: .16rem; color: var(--crm-muted); font-size: .58rem; font-weight: 650; line-height: 1.35; } .dossier-search-zone { position: relative; min-width: 0; }.dossier-search-zone > label { display: block; margin: 0 0 .34rem; color: #60718d; font-size: .57rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.dossier-search-input { display: flex; align-items: center; min-height: 3rem; overflow: hidden; border: 1px solid #c9d7e9; border-radius: .76rem; background: #fbfcff; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }.dossier-search-input:focus-within { border-color: #19968d; background: #fff; box-shadow: 0 0 0 3px rgba(25,150,141,.11); }.dossier-search-input > span { width: 2.65rem; color: #587093; font-size: 1.45rem; font-weight: 400; text-align: center; }.dossier-search-input input { width: 100%; min-width: 0; height: 3rem; padding: 0; border: 0; outline: 0; color: #2e405d; background: transparent; font: 750 .76rem inherit; }.dossier-search-input input::placeholder { color: #9aa7b9; }.dossier-search-input kbd { margin-right: .5rem; padding: .29rem .4rem; border: 1px solid #dae2ed; border-radius: .36rem; color: #8190a5; background: #fff; font: 800 .56rem/1 inherit; white-space: nowrap; }.dossier-search-actions { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: .5rem; }.dossier-search-actions button { min-height: 1.95rem; padding: 0 .62rem; border: 1px solid #d7e1ee; border-radius: .48rem; color: #596d88; background: #fff; font-size: .59rem; font-weight: 800; }.dossier-search-actions button:hover { border-color: #80c8c1; color: #0d7870; background: #effbf9; } .dossier-discovery-note { display: grid; gap: .25rem; padding: .75rem; border: 1px solid #dce5f4; border-radius: .78rem; background: linear-gradient(145deg, #f6f8ff, #fbfcff); }.dossier-discovery-note span { color: #5270cf; font-size: .52rem; font-weight: 900; letter-spacing: .1em; }.dossier-discovery-note strong { color: #334663; font-size: .68rem; font-weight: 850; }.dossier-discovery-note p { margin: 0; color: #7c8a9f; font-size: .57rem; font-weight: 650; line-height: 1.45; } #tab_dosje .dossier-member-results { position: absolute; z-index: 30; top: 100%; right: 0; left: 0; max-height: 20rem; margin-top: .55rem; border: 1px solid #cbd8e8; border-radius: .82rem; background: #fff; box-shadow: 0 16px 32px rgba(23,43,84,.16); }.dossier-member-results .crm-member-results-header { padding: .62rem .72rem; border-bottom: 1px solid #e6ebf2; background: #f8faff; }.dossier-member-results .crm-member-results-list { gap: .2rem; padding: .35rem; }.dossier-member-results .crm-member-result { min-height: 3.7rem; border-radius: .62rem; }.dossier-member-results .crm-member-result:hover { border-color: #add0d0; background: #f0faf9; } .dossier-detail { display: grid; min-width: 0; gap: .9rem; padding-bottom: .2rem; animation: dossier-open .22s ease both; }@keyframes dossier-open { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } .dossier-member-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(12rem, .8fr) auto; gap: .85rem 1.15rem; align-items: center; padding: 1.15rem 1.25rem; border: 1px solid #233a70; border-radius: 1.1rem; color: #fff; background: linear-gradient(112deg, #14284f 0%, #244d88 58%, #7055d1 100%); box-shadow: 0 15px 30px rgba(30,58,131,.19); }.dossier-hero-navigation { display: flex; grid-column: 1 / -1; justify-content: space-between; gap: .75rem; align-items: center; }.dossier-hero-navigation > button { min-height: 2rem; padding: 0 .58rem; border: 1px solid rgba(255,255,255,.25); border-radius: .5rem; color: #f1f5ff; background: rgba(255,255,255,.08); font-size: .58rem; font-weight: 850; }.dossier-hero-navigation > button:hover { background: rgba(255,255,255,.18); }.dossier-status { padding: .3rem .48rem; border-radius: .4rem; color: #dcfff9; background: rgba(49,211,185,.18); font-size: .55rem; font-weight: 900; letter-spacing: .04em; }.dossier-status.is-blocked { color: #ffd9df; background: rgba(219,75,96,.24); } .dossier-member-identity { display: flex; gap: .8rem; align-items: center; min-width: 0; }.dossier-member-identity > div:first-child { display: grid; flex: 0 0 3.35rem; width: 3.35rem; height: 3.35rem; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; color: #fff; background: linear-gradient(145deg, rgba(100,210,196,.82), rgba(107,126,226,.88)); font-size: 1.05rem; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }.dossier-member-identity > div:last-child { min-width: 0; }.dossier-member-identity p { margin: 0; color: #a9c8ff; font-size: .54rem; font-weight: 900; letter-spacing: .11em; }.dossier-member-identity h3 { overflow: hidden; margin: .15rem 0 .12rem; color: #fff; font-size: 1.15rem; font-weight: 900; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }.dossier-member-identity strong { color: #6de3d2; font-size: .72rem; font-weight: 800; } .dossier-member-details { display: grid; gap: .34rem; min-width: 0; padding: .62rem .7rem; border: 1px solid rgba(255,255,255,.14); border-radius: .7rem; background: rgba(10,24,60,.16); }.dossier-member-details span { overflow: hidden; color: #e4edff; font-size: .6rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.dossier-member-details span:first-child { color: #fff; font-size: .62rem; font-weight: 900; }.dossier-blacklist-action { min-height: 2.5rem; padding: 0 .75rem; border: 1px solid rgba(255,203,211,.5); border-radius: .62rem; color: #fff; background: rgba(179,47,75,.56); font-size: .62rem; font-weight: 850; white-space: nowrap; }.dossier-blacklist-action:hover { background: #bf4055; } .dossier-detail-grid { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: .9rem; align-items: start; }.dossier-overview, .dossier-activity-panel { min-width: 0; overflow: hidden; border: 1px solid #dbe4f1; border-radius: 1rem; background: #fff; box-shadow: 0 10px 26px rgba(27,47,94,.055); }.dossier-overview { padding: 1rem; }.dossier-overview-heading { padding-bottom: .85rem; border-bottom: 1px solid #e5ebf2; }.dossier-overview-heading p, .dossier-activity-heading p { margin: 0; color: #17968b; font-size: .54rem; font-weight: 900; letter-spacing: .11em; }.dossier-overview-heading h3, .dossier-activity-heading h3 { margin: .18rem 0; color: #253650; font-size: .9rem; font-weight: 900; letter-spacing: -.025em; }.dossier-overview-heading span { color: #7c8ba1; font-size: .59rem; font-weight: 650; line-height: 1.45; } .dossier-metric-grid { display: grid; gap: .5rem; margin-top: .85rem; }.dossier-metric-grid article { display: grid; grid-template-columns: auto 1fr; column-gap: .48rem; align-items: baseline; padding: .62rem; border: 1px solid #e0e7f0; border-radius: .65rem; background: #fbfcfe; }.dossier-metric-grid strong { color: #386bc3; font-size: 1.05rem; font-weight: 900; letter-spacing: -.04em; }.dossier-metric-grid span { color: #4a5f7d; font-size: .62rem; font-weight: 850; }.dossier-metric-grid small { grid-column: 1 / -1; margin-top: .15rem; color: #8a97aa; font-size: .52rem; font-weight: 700; }.dossier-metric-grid .metric-minus strong { color: #c14a5b; }.dossier-metric-grid .metric-warning strong { color: #b37724; }.dossier-metric-grid .metric-status strong { color: #1c9584; } .dossier-health { display: grid; gap: .18rem; margin-top: .8rem; padding: .75rem; border: 1px solid #dce4ee; border-radius: .68rem; background: #f8fafc; }.dossier-health span { color: #75839a; font-size: .5rem; font-weight: 900; letter-spacing: .08em; }.dossier-health strong { color: #30435f; font-size: .68rem; font-weight: 900; }.dossier-health p { margin: 0; color: #74839a; font-size: .58rem; font-weight: 650; line-height: 1.45; }.dossier-health.is-good { border-color: #c9e8df; background: #f0fbf8; }.dossier-health.is-good strong { color: #158171; }.dossier-health.is-warning { border-color: #f1ddb6; background: #fff9ed; }.dossier-health.is-warning strong { color: #a76b1c; }.dossier-health.is-risk, .dossier-health.is-blocked { border-color: #efc9d0; background: #fff5f6; }.dossier-health.is-risk strong, .dossier-health.is-blocked strong { color: #bd4a5d; } .dossier-activity-panel { display: grid; min-height: 34rem; grid-template-rows: auto auto minmax(0, 1fr); }.dossier-activity-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.1rem .8rem; border-bottom: 1px solid #e5ebf2; }.dossier-activity-heading > span { padding: .32rem .46rem; border-radius: .4rem; color: #496fc0; background: #edf3ff; font-size: .54rem; font-weight: 850; white-space: nowrap; }.dossier-filter-row { display: flex; gap: .42rem; overflow-x: auto; padding: .6rem .75rem; border-bottom: 1px solid #e8edf4; background: #f9fbfd; }.dossier-filter-row button { flex: 0 0 auto; min-height: 2rem; padding: 0 .58rem; border: 1px solid #d6e0ed; border-radius: .48rem; color: #62738d; background: #fff; font-size: .57rem; font-weight: 800; }.dossier-filter-row button:hover { border-color: #abc8e9; color: #3566a6; }.dossier-filter-row button.is-active { border-color: #416ac3; color: #fff; background: #416ac3; box-shadow: 0 5px 11px rgba(57,92,177,.15); } .dossier-timeline { display: grid; align-content: start; gap: .55rem; max-height: 42rem; padding: .85rem 1rem 1.1rem; overflow: auto; background: linear-gradient(90deg, rgba(236,242,250,.6), #fff 7rem); }.dossier-event { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .65rem; align-items: start; }.dossier-event-token { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid #d8e2f0; border-radius: .65rem; color: #4772c5; background: #eff4ff; font-size: .68rem; font-weight: 900; }.dossier-event.is-discipline .dossier-event-token { border-color: #f0ccd2; color: #c24c5d; background: #fff1f3; }.dossier-event.is-reward .dossier-event-token { border-color: #c8e9df; color: #168276; background: #effbf7; }.dossier-event.is-status .dossier-event-token { border-color: #d6d3ef; color: #6a57bd; background: #f4f1ff; }.dossier-event-body { min-width: 0; padding: .7rem .75rem; border: 1px solid #e1e8f1; border-radius: .72rem; background: #fff; }.dossier-event-head { display: flex; justify-content: space-between; gap: .65rem; align-items: start; }.dossier-event-head > div { min-width: 0; }.dossier-event-head span { display: block; color: #7c8ba2; font-size: .49rem; font-weight: 900; letter-spacing: .08em; }.dossier-event-head h4 { overflow: hidden; margin: .12rem 0 0; color: #30415e; font-size: .68rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }.dossier-event-head time { flex: 0 0 auto; color: #98a4b6; font-size: .51rem; font-weight: 700; }.dossier-event-body > p { margin: .38rem 0 .22rem; color: #5e6f87; font-size: .61rem; font-weight: 650; line-height: 1.48; }.dossier-event-body > small { color: #8e9aae; font-size: .51rem; font-weight: 700; }.dossier-event-proof { display: inline-flex; gap: .42rem; align-items: center; max-width: 100%; margin: .4rem 0; padding: .28rem .42rem .28rem .28rem; border: 1px solid #d7e2ef; border-radius: .48rem; color: #496587; background: #f8faff; font-size: .53rem; font-weight: 800; }.dossier-event-proof img { width: 2rem; height: 2rem; border-radius: .3rem; object-fit: cover; }.dossier-empty-state { padding: 3rem 1rem; border: 1px dashed #d9e2ee; border-radius: .75rem; color: #8492a7; background: #fbfcfe; font-size: .67rem; font-weight: 750; text-align: center; } @media (max-width: 1100px) { .dossier-discovery { grid-template-columns: 12rem minmax(0, 1fr); }.dossier-discovery-note { display: none; }.dossier-detail-grid { grid-template-columns: 14rem minmax(0, 1fr); }.dossier-member-hero { grid-template-columns: minmax(0, 1fr) minmax(11rem, .75fr); }.dossier-blacklist-action { grid-column: 2; } } @media (max-width: 780px) { .dossier-discovery { grid-template-columns: 1fr; gap: .8rem; padding: .9rem; }.dossier-member-hero { grid-template-columns: 1fr; padding: 1rem; }.dossier-member-details, .dossier-blacklist-action { grid-column: auto; }.dossier-blacklist-action { width: 100%; }.dossier-detail-grid { grid-template-columns: 1fr; }.dossier-overview { padding: .9rem; }.dossier-metric-grid { grid-template-columns: 1fr 1fr; }.dossier-activity-panel { min-height: 29rem; }.dossier-timeline { max-height: 35rem; } } @media (max-width: 480px) { .dossier-page-intro h2 { font-size: 1.55rem !important; }.dossier-search-input kbd { display: none; }.dossier-search-input > span { width: 2.35rem; }.dossier-member-identity h3 { font-size: 1rem; }.dossier-hero-navigation { align-items: flex-start; flex-direction: column-reverse; }.dossier-member-details span { max-width: 100%; }.dossier-metric-grid { grid-template-columns: 1fr; }.dossier-activity-heading { align-items: start; flex-direction: column; gap: .45rem; }.dossier-event { grid-template-columns: 1.95rem minmax(0, 1fr); gap: .48rem; }.dossier-event-token { width: 1.95rem; height: 1.95rem; font-size: .58rem; }.dossier-event-head { flex-direction: column; gap: .22rem; }.dossier-event-head time { align-self: start; }.dossier-timeline { padding: .7rem; } } /* Message templates are a separate communication studio: import, library and report tools use the same predictable dimensions on desktop and mobile. */ #tab_sablone.template-studio { gap: 1rem; min-height: 0; padding-bottom: 1rem; overflow: auto; } .template-studio-hero { display: flex; justify-content: space-between; gap: 1.5rem; align-items: end; padding: 1.35rem 1.45rem; border: 1px solid #183c72; border-radius: 1.15rem; color: #fff; background: radial-gradient(circle at 86% 5%, rgba(100,213,196,.22), transparent 27%), linear-gradient(118deg, #132c58 0%, #24538e 55%, #6152c9 100%); box-shadow: 0 16px 34px rgba(31,60,119,.16); }.template-studio-hero p { margin: 0 0 .32rem; color: #87e4d6; font-size: .56rem; font-weight: 900; letter-spacing: .14em; }.template-studio-hero h2 { max-width: 40rem; margin: 0; color: #fff; font-size: clamp(1.4rem, 2.6vw, 2.1rem) !important; font-weight: 900; letter-spacing: -.045em; }.template-studio-hero span { display: block; max-width: 37rem; margin-top: .5rem; color: #d5e4ff; font-size: .69rem; font-weight: 650; line-height: 1.55; }.template-create-button { display: inline-flex; flex: 0 0 auto; gap: .5rem; align-items: center; justify-content: center; min-height: 2.7rem; padding: 0 .9rem; border: 1px solid rgba(255,255,255,.32); border-radius: .7rem; color: #183560; background: #fff; box-shadow: 0 10px 19px rgba(9,26,70,.18); font-size: .66rem; font-weight: 900; transition: transform .16s ease, box-shadow .16s ease; }.template-create-button:hover { transform: translateY(-1px); box-shadow: 0 13px 24px rgba(9,26,70,.26); }.template-create-button b { font-size: 1.12rem; font-weight: 450; } .template-command-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(20rem, 1.08fr); gap: 1rem; }.template-ocr-dropzone { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; min-height: 8.5rem; padding: 1.05rem; border: 1px dashed #8acfc6; border-radius: 1rem; background: linear-gradient(135deg, #effbf9, #f8fbff); cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; }.template-ocr-dropzone:hover { border-color: #269e91; background: #f4fffd; transform: translateY(-1px); }.template-ocr-dropzone input, .template-editor-import input { display: none; }.template-ocr-symbol { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border-radius: .88rem; color: #fff; background: linear-gradient(135deg, #169d91, #4c73cf); box-shadow: 0 9px 17px rgba(37,139,144,.18); font-size: .86rem; font-weight: 900; }.template-ocr-dropzone > span:nth-of-type(2) { display: grid; min-width: 0; gap: .24rem; }.template-ocr-dropzone strong { color: #233853; font-size: .83rem; font-weight: 900; }.template-ocr-dropzone small { color: #688097; font-size: .61rem; font-weight: 650; line-height: 1.45; }.template-ocr-dropzone i { padding: .43rem .58rem; border-radius: .48rem; color: #147d74; background: #dcf6f1; font-size: .57rem; font-style: normal; font-weight: 900; white-space: nowrap; } .template-report-dock { min-width: 0; padding: .85rem; border: 1px solid #dbe4f1; border-radius: 1rem; background: #fff; box-shadow: 0 11px 26px rgba(29,51,96,.055); }.template-dock-heading { display: flex; justify-content: space-between; gap: .7rem; align-items: center; padding: 0 .15rem .65rem; border-bottom: 1px solid #e8edf4; }.template-dock-heading span { color: #334663; font-size: .69rem; font-weight: 900; }.template-dock-heading small { color: #7c8ba0; font-size: .52rem; font-weight: 800; }.template-report-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .48rem; margin-top: .65rem; }.template-report-list button { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) auto; gap: .45rem; align-items: center; min-width: 0; min-height: 3.45rem; padding: .45rem; border: 1px solid #e1e8f1; border-radius: .68rem; color: #40536e; background: #fbfcfe; text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }.template-report-list button:hover { border-color: #9fc5be; background: #f3fbfa; transform: translateY(-1px); }.template-report-list b { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: .52rem; color: #3371c1; background: #eaf1ff; font-size: .78rem; font-weight: 900; }.template-report-list .template-minus-icon { color: #c24557; background: #fff0f2; font-size: 1.05rem; }.template-report-list span { display: grid; min-width: 0; gap: .1rem; color: #344764; font-size: .6rem; font-weight: 900; }.template-report-list span small { overflow: hidden; color: #8592a6; font-size: .49rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.template-report-list i { color: #4b68c7; font-size: .49rem; font-style: normal; font-weight: 900; } .template-library { min-width: 0; padding: 1rem; border: 1px solid #dbe4f1; border-radius: 1rem; background: #fff; box-shadow: 0 11px 27px rgba(26,47,90,.06); }.template-library-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }.template-library-head p { margin: 0 0 .13rem; color: #179a8e; font-size: .53rem; font-weight: 900; letter-spacing: .12em; }.template-library-head h3 { margin: 0; color: #263750; font-size: 1rem; font-weight: 900; letter-spacing: -.028em; }.template-library-search { display: flex; flex: 0 1 19rem; align-items: center; min-height: 2.6rem; padding: 0 .62rem; border: 1px solid #d2deec; border-radius: .65rem; color: #6880a1; background: #fafcff; transition: border-color .16s ease, box-shadow .16s ease; }.template-library-search:focus-within { border-color: #23978c; box-shadow: 0 0 0 3px rgba(35,151,140,.11); }.template-library-search span { width: 1.55rem; font-size: 1.25rem; line-height: 1; }.template-library-search input { width: 100%; min-width: 0; height: 2.5rem; border: 0; outline: 0; color: #3a4c68; background: transparent; font-size: .66rem; font-weight: 750; }.template-library-search input::placeholder { color: #9ba9bb; }.template-library-categories { display: flex; gap: .42rem; margin-top: .8rem; padding-bottom: .18rem; overflow-x: auto; }.template-library-categories .btn-sablona-kat { flex: 0 0 auto; min-height: 2rem; padding: 0 .58rem; border: 1px solid #d6e0ec; border-radius: .5rem; color: #60718b; background: #fff; font-size: .57rem; font-weight: 850; transition: color .16s ease, background .16s ease, border-color .16s ease; }.template-library-categories .btn-sablona-kat:hover { border-color: #96c8c0; color: #167d73; background: #f2fbf9; }.template-library-categories .btn-sablona-kat.is-active { border-color: #245caa; color: #fff; background: #245caa; box-shadow: 0 6px 13px rgba(36,92,170,.16); }.template-library-meta { margin: .75rem 0 .55rem; color: #8391a6; font-size: .56rem; font-weight: 800; }.template-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }.template-message-card { display: grid; grid-template-rows: auto auto minmax(4.6rem, 1fr) auto; min-width: 0; min-height: 12.2rem; padding: .85rem; border: 1px solid #dfe7f1; border-radius: .82rem; background: linear-gradient(150deg, #fff, #fbfcff); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }.template-message-card:hover { border-color: #b5c8e7; box-shadow: 0 12px 23px rgba(35,60,105,.075); transform: translateY(-1px); }.template-message-card header { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }.template-message-card header span { overflow: hidden; max-width: 72%; padding: .27rem .42rem; border-radius: .36rem; color: #3970bc; background: #edf3ff; font-size: .48rem; font-weight: 900; letter-spacing: .045em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }.template-message-card header button { padding: 0; border: 0; color: #637fa9; background: transparent; font-size: .55rem; font-weight: 850; }.template-message-card header button:hover { color: #23649b; }.template-message-card h3 { overflow: hidden; margin: .62rem 0 .38rem; color: #263954; font-size: .74rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }.template-message-card > p { display: -webkit-box; overflow: hidden; margin: 0; color: #718099; font-size: .58rem; font-weight: 650; line-height: 1.48; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }.template-message-card footer { display: flex; gap: .38rem; align-items: center; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid #e8edf4; }.template-message-card footer button { min-height: 1.9rem; border-radius: .45rem; font-size: .54rem; font-weight: 900; }.template-message-copy { display: inline-flex; flex: 1 1 auto; gap: .33rem; align-items: center; justify-content: center; padding: 0 .42rem; border: 1px solid #c5dedb; color: #177b72; background: #eefaf8; }.template-message-copy:hover { color: #fff; background: #198d82; }.template-message-copy b { font-size: .8rem; }.template-message-delete { flex: 0 0 auto; padding: 0 .48rem; border: 1px solid #eed9de; color: #b55464; background: #fffafa; }.template-message-delete:hover { color: #fff; background: #c05363; }.template-empty-state { display: grid; grid-column: 1 / -1; justify-items: center; gap: .35rem; padding: 3.2rem 1rem; border: 1px dashed #d6e2ec; border-radius: .8rem; color: #7e8da3; background: #fbfcfe; text-align: center; }.template-empty-state b { color: #526681; font-size: .74rem; }.template-empty-state span { font-size: .59rem; font-weight: 650; }.template-empty-state button { min-height: 2.05rem; margin-top: .25rem; padding: 0 .62rem; border: 1px solid #b7c9e9; border-radius: .48rem; color: #3d66ad; background: #edf3ff; font-size: .56rem; font-weight: 850; } .template-modal-layer { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 130; padding: 1rem; background: rgba(13,27,54,.66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }.template-editor-modal, .template-copy-modal { width: min(100%, 61rem); max-height: min(88dvh, 48rem); overflow: auto; border: 1px solid rgba(255,255,255,.68); border-radius: 1.15rem; background: #fff; box-shadow: 0 28px 70px rgba(3,17,43,.29); animation: template-modal-open .2s ease both; }@keyframes template-modal-open { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }.template-editor-header { display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.2rem .95rem; border-bottom: 1px solid #e7ecf3; background: linear-gradient(115deg, #f6faff, #fbfcff); }.template-editor-header > div { min-width: 0; }.template-editor-header p, .template-copy-modal header p { margin: 0 0 .18rem; color: #15958a; font-size: .52rem; font-weight: 900; letter-spacing: .13em; }.template-editor-header h3, .template-copy-modal header h3 { margin: 0; color: #263852; font-size: 1.18rem; font-weight: 900; letter-spacing: -.035em; }.template-editor-header span { display: block; margin-top: .3rem; color: #75859d; font-size: .6rem; font-weight: 650; line-height: 1.45; }.template-modal-close { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; padding: 0; border: 1px solid #dbe4ef; border-radius: .58rem; color: #8290a4; background: #fff; font-size: 1.15rem; font-weight: 450; line-height: 1; }.template-modal-close:hover { border-color: #ddb7c0; color: #b64357; background: #fff7f8; }.template-editor-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(12rem, .55fr); gap: .9rem; padding: 1rem 1.2rem; }.template-editor-main { display: grid; gap: .72rem; min-width: 0; }.template-editor-field { display: grid; gap: .32rem; }.template-editor-field > span { color: #657791; font-size: .54rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.template-editor-field input, .template-editor-field select, .template-editor-field textarea { width: 100%; min-height: 2.85rem; padding: .65rem .72rem; border: 1px solid #cbd9eb; border-radius: .65rem; outline: 0; color: #354966; background: #fbfcff; font: 750 .7rem/1.4 inherit; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }.template-editor-field textarea { min-height: 12.8rem; resize: vertical; font-weight: 650; white-space: pre-wrap; }.template-editor-field input:focus, .template-editor-field select:focus, .template-editor-field textarea:focus { border-color: #278f87; background: #fff; box-shadow: 0 0 0 3px rgba(39,143,135,.1); }.template-editor-field input::placeholder, .template-editor-field textarea::placeholder { color: #9aa8b9; }.template-editor-content small { color: #8492a6; font-size: .53rem; font-weight: 650; line-height: 1.4; }.template-editor-tools { display: grid; align-content: start; gap: .7rem; }.template-variable-card, .template-ocr-status { padding: .75rem; border: 1px solid #dfe7f0; border-radius: .72rem; background: #f8faff; }.template-variable-card p { margin: 0 0 .3rem; color: #5872c8; font-size: .5rem; font-weight: 900; letter-spacing: .1em; }.template-variable-card > span { color: #6f8098; font-size: .58rem; font-weight: 650; line-height: 1.42; }.template-variable-card > div { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .62rem; }.template-variable-card button { min-height: 1.8rem; padding: 0 .45rem; border: 1px solid #ccd9f4; border-radius: .43rem; color: #4565bb; background: #fff; font-size: .54rem; font-weight: 850; }.template-variable-card button:hover { color: #fff; background: #496dcc; }.template-editor-import { display: grid; gap: .18rem; padding: .78rem; border: 1px dashed #95cbc5; border-radius: .72rem; color: #147d73; background: #f1fbf9; cursor: pointer; }.template-editor-import:hover { border-color: #1a9a8d; background: #eafbF7; }.template-editor-import b { font-size: .62rem; font-weight: 900; }.template-editor-import small { color: #688096; font-size: .53rem; font-weight: 650; line-height: 1.4; }.template-ocr-status { display: grid; gap: .2rem; }.template-ocr-status b { color: #4d6385; font-size: .59rem; font-weight: 900; }.template-ocr-status span { color: #7d8da4; font-size: .54rem; font-weight: 650; line-height: 1.43; }.template-ocr-status.is-working { border-color: #b8c7ee; background: #f4f6ff; }.template-ocr-status.is-working b { color: #4c65c6; }.template-ocr-status.is-success { border-color: #b7e2d8; background: #effbf8; }.template-ocr-status.is-success b { color: #168172; }.template-ocr-status.is-error { border-color: #ebcbd1; background: #fff7f8; }.template-ocr-status.is-error b { color: #bb4b5b; }.template-editor-footer { display: flex; justify-content: flex-end; gap: .55rem; padding: .85rem 1.2rem 1.1rem; border-top: 1px solid #e8edf3; }.template-editor-footer button { min-height: 2.55rem; padding: 0 .8rem; border-radius: .62rem; font-size: .62rem; font-weight: 900; }.template-editor-footer button:first-child { border: 1px solid #d6e0eb; color: #64758d; background: #fff; }.template-editor-footer button:last-child { display: inline-flex; gap: .5rem; align-items: center; border: 1px solid #1d9a8d; color: #fff; background: linear-gradient(105deg, #16978b, #3d70c8); box-shadow: 0 9px 17px rgba(33,121,160,.18); }.template-editor-footer button:last-child b { font-size: .9rem; font-weight: 500; } .template-copy-modal { width: min(100%, 34rem); padding: 1.15rem; }.template-copy-modal header { display: grid; grid-template-columns: 2.65rem minmax(0, 1fr) 2rem; gap: .7rem; align-items: start; }.template-copy-mark { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: .78rem; color: #fff; background: linear-gradient(135deg, #16998d, #4b70cd); font-size: 1.2rem; font-weight: 700; box-shadow: 0 8px 16px rgba(33,126,149,.18); }.template-copy-modal > p { margin: .85rem 0 .6rem; color: #6f8098; font-size: .64rem; font-weight: 650; line-height: 1.48; }.template-copy-content { padding: .12rem; border: 1px solid #dfe7f1; border-radius: .75rem; background: #f8fafc; }.template-copy-content textarea { display: block; width: 100%; min-height: 12rem; padding: .72rem; border: 0; outline: 0; color: #3b4d69; background: transparent; font: 650 .65rem/1.55 inherit; resize: vertical; }.template-copy-modal footer { display: flex; justify-content: space-between; gap: .8rem; align-items: center; margin-top: .9rem; }.template-copy-modal footer > span { display: grid; gap: .1rem; }.template-copy-modal footer span b { color: #415673; font-size: .58rem; font-weight: 900; }.template-copy-modal footer span small { color: #8694a7; font-size: .5rem; font-weight: 650; }.template-copy-modal footer > button { display: inline-flex; gap: .42rem; align-items: center; justify-content: center; min-height: 2.55rem; padding: 0 .78rem; border: 1px solid #1b9387; border-radius: .62rem; color: #fff; background: #178f84; box-shadow: 0 8px 17px rgba(22,124,117,.17); font-size: .61rem; font-weight: 900; }.template-copy-modal footer > button:hover { background: #137a70; }.template-copy-modal footer > button b { font-size: .9rem; } @media (max-width: 1080px) { .template-command-grid { grid-template-columns: 1fr; }.template-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { #tab_sablone.template-studio { gap: .75rem; padding-bottom: 5.5rem; }.template-studio-hero { align-items: flex-start; flex-direction: column; padding: 1.05rem; }.template-create-button { width: 100%; }.template-ocr-dropzone { grid-template-columns: 2.8rem minmax(0, 1fr); min-height: 7rem; padding: .85rem; }.template-ocr-symbol { width: 2.8rem; height: 2.8rem; }.template-ocr-dropzone i { grid-column: 2; justify-self: start; }.template-report-list { grid-template-columns: 1fr; }.template-library { padding: .85rem; }.template-library-head { align-items: stretch; flex-direction: column; }.template-library-search { flex-basis: auto; }.template-card-grid { grid-template-columns: 1fr; }.template-editor-grid { grid-template-columns: 1fr; padding: .85rem; }.template-editor-field textarea { min-height: 10rem; }.template-editor-footer { padding: .75rem .85rem .9rem; }.template-copy-modal { padding: .9rem; }.template-copy-modal footer { align-items: stretch; flex-direction: column; }.template-copy-modal footer > button { width: 100%; }.template-copy-content textarea { min-height: 10rem; } } @media (max-width: 420px) { .template-studio-hero h2 { font-size: 1.35rem !important; }.template-ocr-dropzone { grid-template-columns: 1fr; }.template-ocr-dropzone i { grid-column: auto; }.template-editor-header { padding: .9rem; }.template-editor-footer { flex-direction: column-reverse; }.template-editor-footer button { width: 100%; }.template-copy-modal header { grid-template-columns: 2.3rem minmax(0, 1fr) 1.85rem; gap: .5rem; }.template-copy-mark { width: 2.3rem; height: 2.3rem; }.template-copy-modal header h3 { font-size: 1rem; } } /* Ambient CRM layer: a quiet moving watermark gives every workspace depth while preserving contrast and respecting the user's motion preference. */ #glavniScrollKontejner { isolation: isolate; background: linear-gradient(135deg, #f7f9fe 0%, #f2f6ff 48%, #f8fbff 100%); } #glavniScrollKontejner::before, #glavniScrollKontejner::after { position: absolute; z-index: 0; content: ''; pointer-events: none; } #glavniScrollKontejner::before { inset: 0; opacity: .48; background-image: radial-gradient(circle at 12% 18%, rgba(44,176,162,.12) 0, transparent 17rem), radial-gradient(circle at 86% 12%, rgba(94,103,225,.12) 0, transparent 20rem), radial-gradient(circle at 60% 80%, rgba(116,87,215,.075) 0, transparent 22rem); animation: crm-ambient-shift 22s ease-in-out infinite alternate; } #glavniScrollKontejner::after { right: -10rem; bottom: 3rem; width: 26rem; height: 26rem; opacity: .025; background: url('ikona.png') center / contain no-repeat; transform: rotate(-12deg); animation: crm-watermark-drift 28s ease-in-out infinite alternate; } #glavniScrollKontejner > div:not(#globalniLoader) { position: relative; z-index: 1; } @keyframes crm-ambient-shift { from { transform: translate3d(-1.5%, -1%, 0) scale(1); filter: hue-rotate(0deg); } to { transform: translate3d(1.5%, 1.2%, 0) scale(1.035); filter: hue-rotate(8deg); } } @keyframes crm-watermark-drift { from { transform: translate3d(0, 0, 0) rotate(-12deg); } to { transform: translate3d(-4rem, -2rem, 0) rotate(4deg); } } @keyframes crm-panel-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } } #tab_naslovnica > *, #tab_zapisnik > *, #tab_pregledRegistri > *, #tab_dosje > *, #tab_sablone > *, #tab_crnalista > *, #tab_superadmin > * { animation: crm-panel-in .35s ease both; } #tab_sablone .template-studio-hero h2 { color: #fff !important; text-shadow: 0 1px 0 rgba(7,22,64,.15); } /* Blacklist command space. */ #tab_crnalista.blacklist-studio { gap: 1rem; min-height: 0; overflow: auto; padding-bottom: 1rem; } .blacklist-hero { display: flex; justify-content: space-between; gap: 1.2rem; align-items: end; padding: 1.3rem 1.4rem; overflow: hidden; border: 1px solid #662d48; border-radius: 1.2rem; color: #fff; background: radial-gradient(circle at 88% 16%, rgba(252,193,116,.3), transparent 22%), linear-gradient(118deg, #44162c 0%, #7e2d4b 57%, #ad4b5b 100%); box-shadow: 0 16px 32px rgba(105,39,70,.15); } .blacklist-hero p { margin: 0 0 .3rem; color: #ffc2ca; font-size: .57rem; font-weight: 900; letter-spacing: .14em; }.blacklist-hero h2 { max-width: 41rem; margin: 0; color: #fff !important; font-size: clamp(1.45rem, 2.8vw, 2.18rem) !important; font-weight: 900; letter-spacing: -.05em; }.blacklist-hero span { display: block; max-width: 41rem; margin-top: .5rem; color: #ffe6e9; font-size: .67rem; font-weight: 650; line-height: 1.55; } .blacklist-add-button { display: inline-flex; flex: 0 0 auto; gap: .45rem; align-items: center; justify-content: center; min-height: 2.72rem; padding: 0 .9rem; border: 1px solid rgba(255,255,255,.45); border-radius: .7rem; color: #67213b; background: #fff; box-shadow: 0 9px 18px rgba(59,9,29,.22); font-size: .65rem; font-weight: 900; }.blacklist-add-button:hover { transform: translateY(-1px); box-shadow: 0 12px 21px rgba(59,9,29,.28); }.blacklist-add-button b { font-size: 1.12rem; font-weight: 500; } .blacklist-overview { display: grid; grid-template-columns: repeat(2, minmax(0, .72fr)) minmax(0, 1.55fr); gap: .75rem; }.blacklist-stat-card, .blacklist-guideline { min-height: 6.8rem; padding: .9rem; border: 1px solid #e8dce3; border-radius: .95rem; background: rgba(255,255,255,.94); box-shadow: 0 10px 22px rgba(51,30,53,.045); }.blacklist-stat-card { display: grid; align-content: space-between; }.blacklist-stat-card > span, .blacklist-guideline b { color: #a34d64; font-size: .53rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }.blacklist-stat-card strong { color: #3c2943; font-size: 1.55rem; font-weight: 900; letter-spacing: -.055em; }.blacklist-stat-card small, .blacklist-guideline span { color: #7c7180; font-size: .58rem; font-weight: 650; line-height: 1.45; }.blacklist-stat-card-muted { border-top: 3px solid #c59c67; }.blacklist-guideline { display: grid; align-content: center; gap: .35rem; border-top: 3px solid #a24a61; } .blacklist-workspace { min-height: 0; border: 1px solid #eadfe6; border-radius: 1rem; background: rgba(255,255,255,.96); box-shadow: 0 12px 29px rgba(55,32,58,.06); }.blacklist-workspace-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid #eee6eb; background: linear-gradient(135deg, #fff, #fff8fa); }.blacklist-workspace-head p { margin: 0 0 .14rem; color: #a24860; font-size: .53rem; font-weight: 900; letter-spacing: .12em; }.blacklist-workspace-head h3 { margin: 0; color: #34263b; font-size: 1.08rem; font-weight: 900; letter-spacing: -.035em; }.blacklist-workspace-head span { display: block; margin-top: .22rem; color: #867889; font-size: .58rem; font-weight: 650; }.blacklist-workspace-head > button, .blacklist-show-all { min-height: 2.42rem; padding: 0 .72rem; border: 1px solid #e1cad3; border-radius: .58rem; color: #8a4056; background: #fff; font-size: .58rem; font-weight: 900; }.blacklist-workspace-head > button:hover, .blacklist-show-all:hover { color: #fff; background: #974158; border-color: #974158; } .blacklist-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; padding: .85rem 1.15rem .35rem; }.blacklist-search { display: flex; gap: .45rem; align-items: center; min-height: 2.68rem; padding: 0 .7rem; border: 1px solid #decfd7; border-radius: .65rem; color: #a34f66; background: #fff; transition: border-color .16s ease, box-shadow .16s ease; }.blacklist-search:focus-within { border-color: #a34861; box-shadow: 0 0 0 3px rgba(163,72,97,.11); }.blacklist-search span { width: 1.25rem; font-size: 1.15rem; }.blacklist-search input { width: 100%; min-width: 0; height: 2.55rem; border: 0; outline: 0; color: #463448; background: transparent; font: 750 .67rem inherit; }.blacklist-search input::placeholder { color: #a497a5; }.blacklist-toolbar-note { margin: 0; padding: .05rem 1.2rem .9rem; color: #736775; font-size: .54rem; font-weight: 650; }.blacklist-case-grid { display: grid; gap: .62rem; padding: 0 1.15rem 1.15rem; }.blacklist-case-card { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .78rem; border: 1px solid #e8dce3; border-radius: .85rem; background: linear-gradient(120deg, #fff, #fffafb); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }.blacklist-case-card:hover { border-color: #dba6b6; box-shadow: 0 9px 19px rgba(88,37,58,.07); transform: translateY(-1px); }.blacklist-case-token { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .68rem; color: #fff; background: linear-gradient(135deg, #b8445c, #88324a); font-size: 1.35rem; font-weight: 500; box-shadow: 0 6px 13px rgba(155,48,75,.18); }.blacklist-case-copy { min-width: 0; }.blacklist-case-copy > div { display: flex; flex-wrap: wrap; gap: .36rem; align-items: baseline; }.blacklist-case-copy strong { color: #3b2941; font-size: .73rem; font-weight: 900; }.blacklist-case-copy > div span { color: #96516c; font-size: .59rem; font-weight: 850; }.blacklist-case-copy p { margin: .3rem 0; color: #645466; font-size: .61rem; font-weight: 650; line-height: 1.45; }.blacklist-case-copy small { color: #9a8e9d; font-size: .51rem; font-weight: 750; }.blacklist-case-card > button, .blacklist-case-card .blacklist-case-actions > button { min-height: 2.25rem; padding: 0 .62rem; border: 1px solid #efcbd4; border-radius: .55rem; color: #af455d; background: #fff8f9; font-size: .55rem; font-weight: 900; white-space: nowrap; }.blacklist-case-card > button, .blacklist-case-card .blacklist-case-actions > button:hover { color: #fff; background: #b6465e; border-color: #b6465e; }.blacklist-empty-state { display: grid; justify-items: center; gap: .25rem; padding: 3.1rem 1rem; border: 1px dashed #dfcfd8; border-radius: .82rem; color: #8b7f8d; background: #fffbfc; text-align: center; font-size: .62rem; font-weight: 650; }.blacklist-empty-state b { color: #6c5262; font-size: .68rem; } .blacklist-modal-layer { background: rgba(33,17,35,.68); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }.blacklist-editor-modal { width: min(100%, 34rem); overflow: hidden; border: 1px solid rgba(255,255,255,.62); border-radius: 1.1rem; background: #fff; box-shadow: 0 28px 68px rgba(29,9,26,.3); animation: crm-panel-in .22s ease both; }.blacklist-editor-modal header { display: flex; justify-content: space-between; gap: .8rem; padding: 1.1rem 1.15rem .9rem; border-bottom: 1px solid #eee6eb; background: linear-gradient(120deg, #fff8fa, #fff); }.blacklist-editor-modal header p { margin: 0 0 .18rem; color: #a74760; font-size: .51rem; font-weight: 900; letter-spacing: .12em; }.blacklist-editor-modal header h3 { margin: 0; color: #382640; font-size: 1.13rem; font-weight: 900; letter-spacing: -.035em; }.blacklist-editor-modal header span { display: block; margin-top: .3rem; color: #837487; font-size: .6rem; font-weight: 650; line-height: 1.45; }.blacklist-editor-modal header > button { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; border: 1px solid #ead7de; border-radius: .58rem; color: #a66f80; background: #fff; font-size: 1.1rem; }.blacklist-editor-fields { display: grid; gap: .72rem; padding: 1rem 1.15rem; }.blacklist-editor-fields label { display: grid; gap: .32rem; }.blacklist-editor-fields label > span { color: #6f6275; font-size: .54rem; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; }.blacklist-editor-fields label i { color: #9d8d9c; font-style: normal; font-weight: 700; }.blacklist-editor-fields input, .blacklist-editor-fields textarea { width: 100%; min-height: 2.78rem; padding: .65rem .7rem; border: 1px solid #d8cbd4; border-radius: .64rem; outline: 0; color: #463849; background: #fcfbfc; font: 750 .68rem/1.45 inherit; }.blacklist-editor-fields textarea { min-height: 8.4rem; resize: vertical; font-weight: 650; }.blacklist-editor-fields input:focus, .blacklist-editor-fields textarea:focus { border-color: #a64a62; box-shadow: 0 0 0 3px rgba(166,74,98,.1); background: #fff; }.blacklist-editor-modal footer { display: flex; justify-content: flex-end; gap: .55rem; padding: .8rem 1.15rem 1.05rem; border-top: 1px solid #eee6eb; }.blacklist-editor-modal footer button { min-height: 2.5rem; padding: 0 .78rem; border-radius: .6rem; font-size: .61rem; font-weight: 900; }.blacklist-editor-modal footer button:first-child { border: 1px solid #e1d7de; color: #786b7c; background: #fff; }.blacklist-editor-modal footer button:last-child { display: inline-flex; gap: .4rem; align-items: center; border: 1px solid #a43f57; color: #fff; background: #a44058; box-shadow: 0 8px 17px rgba(147,49,73,.19); }.blacklist-editor-modal footer button:last-child b { font-size: 1.1rem; font-weight: 500; } /* SuperAdmin command centre. */ #tab_superadmin.superadmin-studio { gap: 1rem; min-height: 0; overflow: auto; padding-bottom: 1rem; }.superadmin-hero { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.2rem 1.35rem; overflow: hidden; border: 1px solid #1a385c; border-radius: 1.15rem; color: #fff; background: radial-gradient(circle at 84% 10%, rgba(91,215,190,.21), transparent 22%), linear-gradient(115deg, #11284b, #1b4a70 57%, #2d7f82); box-shadow: 0 16px 32px rgba(18,57,87,.14); }.superadmin-identity { display: flex; gap: .85rem; align-items: center; min-width: 0; }.superadmin-identity > b { display: grid; flex: 0 0 3.2rem; width: 3.2rem; height: 3.2rem; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: .9rem; color: #fff; background: rgba(255,255,255,.12); font-size: .85rem; font-weight: 900; letter-spacing: .05em; }.superadmin-identity p { margin: 0 0 .18rem; color: #83dfd1; font-size: .52rem; font-weight: 900; letter-spacing: .13em; }.superadmin-identity h2 { margin: 0; color: #fff !important; font-size: clamp(1.35rem, 2.6vw, 2.05rem) !important; font-weight: 900; letter-spacing: -.045em; }.superadmin-identity span { display: block; max-width: 40rem; margin-top: .34rem; color: #d9f2ee; font-size: .63rem; font-weight: 650; line-height: 1.45; }.superadmin-hero aside { display: grid; flex: 0 1 14.5rem; gap: .18rem; padding: .65rem .75rem; border: 1px solid rgba(255,255,255,.22); border-radius: .68rem; background: rgba(6,28,53,.18); }.superadmin-hero aside strong { color: #fff; font-size: .62rem; font-weight: 900; }.superadmin-hero aside span { color: #c9e2e5; font-size: .52rem; font-weight: 650; line-height: 1.4; } .superadmin-tab-rail { display: grid; grid-template-columns: repeat(7, minmax(8.2rem, 1fr)); gap: .52rem; overflow-x: auto; padding: .55rem; border: 1px solid #dae6ee; border-radius: .95rem; background: rgba(255,255,255,.82); box-shadow: 0 9px 22px rgba(31,68,92,.045); }.superadmin-tab-rail button { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .48rem; align-items: center; min-height: 3.55rem; padding: .5rem; border: 1px solid transparent; border-radius: .65rem; color: #697991; background: transparent; text-align: left; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; }.superadmin-tab-rail button:hover { color: #236975; background: #f0f9f8; }.superadmin-tab-rail button.is-active { border-color: #a6d8d0; color: #175f69; background: linear-gradient(135deg, #eaf9f6, #eef3ff); box-shadow: 0 6px 14px rgba(38,111,120,.09); }.superadmin-tab-rail button b { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: .5rem; color: #64758d; background: #edf2f7; font-size: .53rem; font-weight: 900; }.superadmin-tab-rail button.is-active b { color: #fff; background: linear-gradient(135deg, #159f92, #4474d0); }.superadmin-tab-rail button span { display: grid; min-width: 0; color: currentColor; font-size: .61rem; font-weight: 900; }.superadmin-tab-rail button small { overflow: hidden; margin-top: .08rem; color: #8794a5; font-size: .47rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .superadmin-workspace { min-height: 0; border: 1px solid #dbe5ee; border-radius: 1rem; background: rgba(255,255,255,.97); box-shadow: 0 13px 30px rgba(31,59,89,.065); }.superadmin-workspace-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding: 1.1rem 1.2rem .95rem; border-bottom: 1px solid #e5ecf1; background: linear-gradient(125deg, #fff, #f7fbfc); }.superadmin-workspace-head p { margin: 0 0 .15rem; color: #168e86; font-size: .53rem; font-weight: 900; letter-spacing: .12em; }.superadmin-workspace-head h3 { margin: 0; color: #24354e; font-size: 1.1rem; font-weight: 900; letter-spacing: -.035em; }.superadmin-workspace-head span { display: block; max-width: 43rem; margin-top: .25rem; color: #76869b; font-size: .61rem; font-weight: 650; line-height: 1.45; }.superadmin-workspace-head > button { min-height: 2.38rem; padding: 0 .72rem; border: 1px solid #b7d9d4; border-radius: .58rem; color: #146f6c; background: #f0fbf9; font-size: .57rem; font-weight: 900; }.superadmin-workspace-head > button:hover { color: #fff; background: #168e86; border-color: #168e86; }.superadmin-panel { padding: 1rem 1.2rem 1.25rem; animation: crm-panel-in .22s ease both; }.superadmin-panel-actions, .superadmin-panel-note { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .78rem; padding-bottom: .72rem; border-bottom: 1px solid #e7edf3; }.superadmin-panel-actions > div, .superadmin-panel-note { display: grid; gap: .16rem; }.superadmin-panel-actions b, .superadmin-panel-note b { color: #344762; font-size: .7rem; font-weight: 900; }.superadmin-panel-actions span, .superadmin-panel-note span { color: var(--crm-muted); font-size: .56rem; font-weight: 650; line-height: 1.42; }.superadmin-panel-actions > button, .superadmin-create-row > button, .superadmin-save-button { min-height: 2.45rem; padding: 0 .74rem; border: 1px solid #218e88; border-radius: .58rem; color: #fff; background: #1b8079; font-size: .58rem; font-weight: 900; white-space: nowrap; box-shadow: 0 7px 14px rgba(28,125,120,.14); }.superadmin-panel-actions > button:hover, .superadmin-create-row > button:hover, .superadmin-save-button:hover { background: #16776f; } .superadmin-search-row, .superadmin-create-row { display: grid; grid-template-columns: minmax(12rem, 1fr) auto auto; gap: .48rem; align-items: center; padding: .62rem; border: 1px solid #e0e8ef; border-radius: .78rem; background: #f8fafc; }.superadmin-search-row label { display: flex; align-items: center; gap: .4rem; min-height: 2.56rem; padding: 0 .68rem; border: 1px solid #d2deea; border-radius: .58rem; color: #627b99; background: #fff; }.superadmin-search-row label span { font-size: 1.05rem; }.superadmin-search-row input, .superadmin-create-row input, .superadmin-settings-grid input[type="text"] { width: 100%; min-width: 0; min-height: 2.56rem; border: 0; outline: 0; color: #354963; background: transparent; font: 750 .66rem inherit; }.superadmin-search-row label:focus-within { border-color: #298d87; box-shadow: 0 0 0 3px rgba(41,141,135,.1); }.superadmin-search-row > button { min-height: 2.56rem; padding: 0 .65rem; border: 1px solid #d2deea; border-radius: .58rem; color: #536783; background: #fff; font-size: .55rem; font-weight: 850; white-space: nowrap; }.superadmin-search-row > button:hover { border-color: #a7cfc9; color: #176f6a; background: #effaf8; }.superadmin-search-help { margin: .55rem 0 .75rem; color: #667588; font-size: .53rem; font-weight: 650; }.superadmin-member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }.superadmin-member-card { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) auto; gap: .62rem; align-items: center; padding: .7rem; border: 1px solid #e0e8ef; border-radius: .75rem; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }.superadmin-member-card:hover { border-color: #b8d2d0; box-shadow: 0 8px 18px rgba(28,74,89,.06); transform: translateY(-1px); }.superadmin-member-avatar { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border-radius: .65rem; color: #fff; background: linear-gradient(135deg, #218f87, #4772ca); font-size: .72rem; font-weight: 900; }.superadmin-member-copy { min-width: 0; }.superadmin-member-copy strong, .superadmin-member-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.superadmin-member-copy strong { color: #2e405c; font-size: .68rem; font-weight: 900; }.superadmin-member-copy > span { margin-top: .08rem; color: #3f6aa4; font-size: .55rem; font-weight: 850; }.superadmin-member-copy > div { display: flex; flex-wrap: wrap; gap: .26rem; margin-top: .33rem; }.superadmin-member-copy i, .superadmin-protected-label { padding: .18rem .32rem; border-radius: .3rem; color: var(--crm-muted); background: #edf1f5; font-size: .43rem; font-style: normal; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }.superadmin-member-copy .role-admin { color: #276c90; background: #e8f5fb; }.superadmin-member-copy .status-blocked { color: #a43d54; background: #fff0f2; }.superadmin-member-actions, .superadmin-stack-item > div, .superadmin-table-actions { display: flex; flex-wrap: wrap; gap: .32rem; justify-content: flex-end; }.superadmin-member-actions button, .superadmin-stack-item button, .superadmin-table-actions button { min-height: 1.95rem; padding: 0 .47rem; border: 1px solid #cddbec; border-radius: .45rem; color: #496a97; background: #f9fbff; font-size: .5rem; font-weight: 900; }.superadmin-member-actions button:hover, .superadmin-stack-item button:hover, .superadmin-table-actions button:hover { color: #fff; background: #3d71c6; border-color: #3d71c6; }.superadmin-member-actions .is-danger, .superadmin-stack-item .is-danger, .superadmin-table-actions .is-danger { color: #b74a5a; border-color: #f0cbd2; background: #fff8f9; }.superadmin-member-actions .is-danger:hover, .superadmin-stack-item .is-danger:hover, .superadmin-table-actions .is-danger:hover { color: #fff; background: #bd4e60; border-color: #bd4e60; }.superadmin-empty-state { display: grid; justify-items: center; gap: .25rem; padding: 2.8rem 1rem; border: 1px dashed #d8e3ed; border-radius: .75rem; color: #8291a5; background: #fbfcfe; font-size: .62rem; font-weight: 650; text-align: center; }.superadmin-empty-state.is-positive b { color: #1c887b; } .superadmin-table-wrap { overflow-x: auto; border: 1px solid #e0e8ef; border-radius: .78rem; }.superadmin-table { width: 100%; min-width: 39rem; border-collapse: collapse; text-align: left; }.superadmin-table th { padding: .65rem .75rem; color: var(--crm-muted); background: #f7f9fc; font-size: .49rem; font-weight: 900; letter-spacing: .085em; text-transform: uppercase; }.superadmin-table td { padding: .72rem .75rem; border-top: 1px solid #e9eef4; color: #53647c; font-size: .58rem; font-weight: 650; }.superadmin-table td:first-child strong, .superadmin-table td:first-child span { display: block; }.superadmin-table td:first-child strong { color: #32455f; font-size: .63rem; font-weight: 900; }.superadmin-table td:first-child span { margin-top: .12rem; color: #4780c0; font-size: .52rem; font-weight: 850; }.superadmin-table td:first-child i { margin-left: .28rem; padding: .15rem .26rem; border-radius: .28rem; color: #9b4156; background: #fff0f2; font-size: .4rem; font-style: normal; font-weight: 900; }.superadmin-table time { color: #77889f; font-size: .53rem; font-weight: 700; }.superadmin-table-chip { min-height: 1.95rem; padding: 0 .47rem; border: 1px solid #d4dfea; border-radius: .45rem; color: var(--crm-muted); background: #f7f9fb; font-size: .5rem; font-weight: 900; }.superadmin-table-chip.is-on { border-color: #b9ded4; color: #147e70; background: #ebfaf6; }.superadmin-table-empty { padding: 2rem !important; color: var(--crm-muted) !important; text-align: center; } .superadmin-risk-note { border-color: #f0d7dc; }.superadmin-risk-note b { color: #a94256; }.superadmin-risk-list { display: grid; gap: .55rem; }.superadmin-risk-card { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .72rem; border: 1px solid #f0d9de; border-radius: .75rem; background: linear-gradient(120deg, #fffafa, #fff); }.superadmin-risk-count { display: grid; height: 3rem; place-items: center; border-radius: .7rem; color: #fff; background: linear-gradient(135deg, #bd4c5d, #92384c); font-size: .9rem; font-weight: 900; line-height: 1; }.superadmin-risk-count small { margin-top: -.5rem; color: #ffd9df; font-size: .41rem; font-weight: 850; }.superadmin-risk-card > div:nth-child(2) strong, .superadmin-risk-card > div:nth-child(2) span { display: block; }.superadmin-risk-card > div:nth-child(2) strong { color: #413044; font-size: .66rem; font-weight: 900; }.superadmin-risk-card > div:nth-child(2) span { margin-top: .14rem; color: #987685; font-size: .54rem; font-weight: 650; }.superadmin-risk-card footer { display: flex; gap: .35rem; }.superadmin-risk-card button { min-height: 2.18rem; padding: 0 .55rem; border: 1px solid #e4c4cc; border-radius: .48rem; color: #9f4457; background: #fff; font-size: .51rem; font-weight: 900; }.superadmin-risk-card button:last-child { color: #fff; border-color: #b44759; background: #b44759; } .superadmin-create-row { grid-template-columns: minmax(12rem, 1fr) auto; margin-bottom: .72rem; }.superadmin-create-row input { min-height: 2.58rem; padding: 0 .66rem; border: 1px solid #d1dde9; border-radius: .58rem; background: #fff; }.superadmin-create-row input:focus { border-color: #278d86; box-shadow: 0 0 0 3px rgba(39,141,134,.1); }.superadmin-stack { display: grid; gap: .45rem; }.superadmin-stack-item { display: flex; justify-content: space-between; gap: .7rem; align-items: center; padding: .6rem .68rem; border: 1px solid #e0e8ef; border-radius: .65rem; background: #fff; }.superadmin-stack-item > span { min-width: 0; overflow: hidden; color: #485a75; font-size: .62rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.superadmin-category-name { display: inline-flex; gap: .4rem; align-items: center; }.superadmin-category-name i { display: grid; width: 1.3rem; height: 1.3rem; place-items: center; border-radius: .34rem; color: var(--crm-muted); background: #eef3f8; font-size: .62rem; font-style: normal; }.superadmin-stack-item.is-draggable { cursor: grab; }.superadmin-stack-item.is-draggable:active { cursor: grabbing; } .superadmin-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .62rem; }.superadmin-health-card { display: grid; gap: .25rem; min-height: 6.1rem; padding: .78rem; border: 1px solid #dce6ee; border-radius: .75rem; background: #f9fbfd; }.superadmin-health-card > span { color: var(--crm-muted); font-size: .49rem; font-weight: 900; letter-spacing: .085em; }.superadmin-health-card strong { display: flex; gap: .38rem; align-items: center; overflow: hidden; color: #334760; font-size: .67rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }.superadmin-health-card strong i { width: .48rem; height: .48rem; border-radius: 50%; background: #29aa80; box-shadow: 0 0 0 3px rgba(41,170,128,.12); animation: crm-status-pulse 1.8s ease-in-out infinite; }.superadmin-health-card small { color: var(--crm-muted); font-size: .5rem; font-weight: 650; line-height: 1.4; }.superadmin-health-card.is-ok { border-color: #bfe3d7; background: #f2fbf8; }.superadmin-health-card.is-ok > span { color: #157d6d; }@keyframes crm-status-pulse { 50% { opacity: .45; transform: scale(.82); } }.superadmin-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .62rem; margin-top: .85rem; }.superadmin-settings-grid label { display: grid; gap: .34rem; padding: .68rem; border: 1px solid #e0e8ef; border-radius: .7rem; background: #fbfcfe; }.superadmin-settings-grid label > span { color: var(--crm-muted); font-size: .51rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }.superadmin-settings-grid input[type="text"] { padding: 0 .62rem; border: 1px solid #d2deea; border-radius: .52rem; background: #fff; }.superadmin-settings-grid input[type="file"] { max-width: 100%; color: #77879b; font-size: .52rem; font-weight: 650; }.superadmin-settings-grid input[type="file"]::file-selector-button { margin-right: .45rem; padding: .42rem .52rem; border: 0; border-radius: .4rem; color: #236f91; background: #eaf4fb; font: 850 .5rem inherit; }.superadmin-save-button { width: 100%; margin-top: .75rem; }.superadmin-data-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }.superadmin-data-card { display: grid; align-content: start; gap: .42rem; min-height: 14rem; padding: .9rem; border: 1px solid #d8e5ef; border-top: 3px solid #4382ca; border-radius: .82rem; background: linear-gradient(145deg, #fff, #f8fbff); }.superadmin-data-card > span { color: #4d78b7; font-size: .49rem; font-weight: 900; letter-spacing: .09em; }.superadmin-data-card h4 { margin: 0; color: #344862; font-size: .78rem; font-weight: 900; }.superadmin-data-card p { margin: 0; color: #74869d; font-size: .56rem; font-weight: 650; line-height: 1.5; }.superadmin-data-card > div { display: grid; gap: .4rem; margin-top: auto; }.superadmin-data-card button { min-height: 2.18rem; padding: 0 .5rem; border: 1px solid #c9d9ec; border-radius: .5rem; color: #426da5; background: #fff; font-size: .52rem; font-weight: 900; }.superadmin-data-card button:first-child { color: #fff; border-color: #3c75bf; background: #3f76bf; }.superadmin-data-demo { border-top-color: #1c9b82; }.superadmin-data-demo > span { color: #138471; }.superadmin-data-demo button:first-child { border-color: #168a74; background: #18826d; }.superadmin-data-danger { border-top-color: #bc4a5b; }.superadmin-data-danger > span { color: #ad4055; }.superadmin-data-danger button:first-child { border-color: #b9495a; background: #bd4c5e; }.superadmin-data-danger button:last-child { color: #ae3f53; border-color: #edc8cf; background: #fff9fa; } @media (max-width: 1040px) { .superadmin-tab-rail { grid-template-columns: repeat(7, 9.1rem); }.superadmin-member-grid { grid-template-columns: 1fr; }.superadmin-data-grid { grid-template-columns: 1fr; }.superadmin-data-card { min-height: auto; }.superadmin-settings-grid { grid-template-columns: 1fr; }.blacklist-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }.blacklist-guideline { grid-column: 1 / -1; } } @media (max-width: 720px) { #tab_crnalista.blacklist-studio, #tab_superadmin.superadmin-studio { gap: .75rem; padding-bottom: 5.5rem; }.blacklist-hero, .superadmin-hero { align-items: flex-start; flex-direction: column; padding: 1.02rem; }.blacklist-add-button { width: 100%; }.blacklist-overview { grid-template-columns: 1fr; }.blacklist-guideline { grid-column: auto; }.blacklist-workspace-head, .superadmin-workspace-head { align-items: flex-start; flex-direction: column; padding: .9rem; }.blacklist-workspace-head > button, .superadmin-workspace-head > button { width: 100%; }.blacklist-toolbar { grid-template-columns: 1fr; padding: .72rem .85rem .3rem; }.blacklist-show-all { width: 100%; }.blacklist-toolbar-note, .blacklist-case-grid { padding-inline: .85rem; }.blacklist-case-card { grid-template-columns: 2.25rem minmax(0, 1fr); }.blacklist-case-card > button, .blacklist-case-card .blacklist-case-actions > button { grid-column: 1 / -1; width: 100%; }.blacklist-case-token { width: 2.25rem; height: 2.25rem; }.superadmin-identity { align-items: flex-start; }.superadmin-hero aside { width: 100%; flex-basis: auto; }.superadmin-tab-rail { grid-template-columns: repeat(7, 8.2rem); }.superadmin-panel { padding: .85rem; }.superadmin-panel-actions { align-items: stretch; flex-direction: column; }.superadmin-panel-actions > button { width: 100%; }.superadmin-search-row, .superadmin-create-row { grid-template-columns: 1fr; }.superadmin-search-row > button, .superadmin-create-row > button { width: 100%; }.superadmin-risk-card { grid-template-columns: 2.8rem minmax(0, 1fr); }.superadmin-risk-card footer { grid-column: 1 / -1; }.superadmin-risk-card footer button { flex: 1; }.superadmin-health-grid { grid-template-columns: 1fr; }.blacklist-editor-modal footer { flex-direction: column-reverse; }.blacklist-editor-modal footer button { width: 100%; } } @media (prefers-reduced-motion: reduce) { #glavniScrollKontejner::before, #glavniScrollKontejner::after, #tab_naslovnica > *, #tab_zapisnik > *, #tab_pregledRegistri > *, #tab_dosje > *, #tab_sablone > *, #tab_crnalista > *, #tab_superadmin > *, .superadmin-health-card strong i { animation: none !important; } } /* ----- Atmosfera, hijerarhija i sigurni ulaz -------------------------- */ /* Namjerno je vidljiv izvan kartica, ali dovoljno blag da sadržaj ostane čitljiv i poslovan. */ #appSection { background: linear-gradient(135deg, #edf3ff 0%, #f8fbff 49%, #eef7f8 100%) !important; } .crm-ambient-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .crm-ambient-layer::before { content: ""; position: absolute; inset: 0; opacity: .78; background-image: linear-gradient(rgba(78,112,186,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(78,112,186,.045) 1px, transparent 1px); background-size: 4.5rem 4.5rem; mask-image: linear-gradient(120deg, rgba(0,0,0,.86), transparent 72%); } .crm-ambient-layer span, .crm-ambient-layer i, .crm-ambient-layer b { position: absolute; display: block; border-radius: 999px; filter: blur(2px); opacity: .72; } .crm-ambient-layer span { top: 9%; right: 13%; width: 25rem; height: 25rem; background: radial-gradient(circle, rgba(80,101,238,.17) 0, rgba(80,101,238,.035) 46%, transparent 70%); animation: crm-ambient-orbit 19s ease-in-out infinite alternate; } .crm-ambient-layer i { bottom: -8rem; left: 22%; width: 30rem; height: 20rem; background: radial-gradient(ellipse, rgba(18,173,153,.15) 0, rgba(18,173,153,.025) 48%, transparent 72%); animation: crm-ambient-drift 24s ease-in-out infinite alternate; } .crm-ambient-layer b { top: 38%; left: -8rem; width: 19rem; height: 19rem; background: radial-gradient(circle, rgba(137,86,225,.12) 0, transparent 69%); animation: crm-ambient-orbit 17s -4s ease-in-out infinite alternate-reverse; } #appSection > aside, #appSection > .flex-1 { position: relative; z-index: 1; } #glavniScrollKontejner { background: linear-gradient(135deg, rgba(247,250,255,.77), rgba(244,248,255,.64), rgba(248,252,252,.76)) !important; } #glavniScrollKontejner::before { opacity: .7 !important; } /* All workspaces use a clear blue title system. White titles are reserved for coloured hero surfaces below. */ #appSection #glavniScrollKontejner h2, #appSection #glavniScrollKontejner h3 { color: #29477d !important; text-shadow: 0 1px 0 rgba(255,255,255,.75); } #appSection #glavniScrollKontejner .crm-hero h2, #appSection #glavniScrollKontejner .blacklist-hero h2, #appSection #glavniScrollKontejner .superadmin-identity h2, #appSection #glavniScrollKontejner .record-subject-primary h3 { color: #fff !important; text-shadow: 0 2px 16px rgba(5,18,58,.25); } #appSection #glavniScrollKontejner .crm-hero h2 em { color: #bcecff !important; } #appSection #glavniScrollKontejner .blacklist-hero h2 { -webkit-text-fill-color: #fff; } #appSection #glavniScrollKontejner .blacklist-hero, #appSection #glavniScrollKontejner .superadmin-hero, #appSection #glavniScrollKontejner .crm-hero { position: relative; isolation: isolate; } #appSection #glavniScrollKontejner .blacklist-hero::after, #appSection #glavniScrollKontejner .superadmin-hero::after, #appSection #glavniScrollKontejner .crm-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.08) 50%, transparent 80%); transform: translateX(-120%); animation: crm-hero-sheen 8s ease-in-out infinite; } /* Micro-interactions make controls easier to read as controls without changing any existing behaviour. */ #appSection #glavniScrollKontejner :is(input, select, textarea) { border-color: #c9d6ea !important; background-color: rgba(255,255,255,.94) !important; } #appSection #glavniScrollKontejner :is(input, select, textarea):focus { border-color: #4e6de0 !important; box-shadow: 0 0 0 4px rgba(78,109,224,.14) !important; } #appSection #glavniScrollKontejner button:focus-visible, #appSection > aside button:focus-visible, #appSection > div > header button:focus-visible { outline: 3px solid rgba(45,180,163,.46); outline-offset: 3px; } #appSection #glavniScrollKontejner .bg-white { backdrop-filter: blur(12px); } #appSection #glavniScrollKontejner .bg-white:hover { border-color: #c9d8f2 !important; } .crm-copyright { position: fixed; right: 1.25rem; bottom: .9rem; z-index: 56; display: inline-flex; align-items: center; gap: .23rem; padding: .38rem .6rem; border: 1px solid rgba(203,216,239,.9); border-radius: 999px; color: #71829d; background: rgba(250,252,255,.8); box-shadow: 0 7px 17px rgba(35,57,105,.08); backdrop-filter: blur(12px); font-size: .57rem; font-weight: 700; letter-spacing: .025em; pointer-events: none; } .crm-copyright strong { color: #4470bc; font-weight: 900; } @keyframes crm-ambient-orbit { from { transform: translate3d(-1.8rem,-1.15rem,0) scale(.95); } to { transform: translate3d(1.8rem,1.5rem,0) scale(1.08); } } @keyframes crm-ambient-drift { from { transform: translate3d(-2.5rem,1rem,0) scale(1); } to { transform: translate3d(2.25rem,-1.3rem,0) scale(1.07); } } @keyframes crm-hero-sheen { 0%, 64% { transform: translateX(-130%); } 86%, 100% { transform: translateX(130%); } } @media (max-width: 720px) { .crm-ambient-layer::before { background-size: 3.2rem 3.2rem; }.crm-ambient-layer span { top: 5%; right: -10rem; }.crm-ambient-layer i { left: -10rem; bottom: 4rem; }.crm-ambient-layer b { display: none; }.crm-copyright { right: 50%; bottom: 5.45rem; transform: translateX(50%); font-size: .53rem; } } @media (prefers-reduced-motion: reduce) { .crm-ambient-layer span, .crm-ambient-layer i, .crm-ambient-layer b, #appSection #glavniScrollKontejner .blacklist-hero::after, #appSection #glavniScrollKontejner .superadmin-hero::after, #appSection #glavniScrollKontejner .crm-hero::after { animation: none !important; } } /* ----- Stabilan prikaz bez vodoravnog pomicanja ----------------------- */ html, body { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } #appSection { width: 100%; min-width: 0; max-width: 100%; overflow: hidden !important; } #appSection > .crm-ambient-layer { position: absolute !important; display: block !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: auto !important; max-width: none !important; } #appSection > div.flex-1 { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } #glavniScrollKontejner { width: auto !important; min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-x: none; } #glavniScrollKontejner .max-w-7xl { width: 100% !important; min-width: 0 !important; } #appSection, #appSection * { box-sizing: border-box; } /* Svijetli plavi naslovi ostaju čitljivi na svim svijetlim površinama. */ #appSection #glavniScrollKontejner :is(h2, h3, h4) { color: #3c67c5 !important; text-shadow: 0 1px 0 rgba(255,255,255,.88); } #appSection #glavniScrollKontejner :is(.crm-hero, .blacklist-hero, .superadmin-hero) :is(h2, h3), #appSection #glavniScrollKontejner .record-subject-primary h3 { color: #fff !important; text-shadow: 0 2px 16px rgba(5,18,58,.28); } /* Jedinstveni naslovni sustav za sve CRM radne prostore. */ #appSection #glavniScrollKontejner .crm-workspace-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 1rem !important; padding: clamp(1.15rem, 2.3vw, 1.7rem) clamp(1.2rem, 2.7vw, 1.9rem) !important; border: 1px solid rgba(42, 105, 157, .58) !important; border-radius: 1.2rem !important; color: #fff; background: radial-gradient(circle at 88% 12%, rgba(122, 229, 212, .28), transparent 25%), radial-gradient(circle at 18% 125%, rgba(110, 146, 255, .2), transparent 42%), linear-gradient(118deg, #132b58 0%, #1f5483 55%, #238f8a 100%) !important; box-shadow: 0 18px 38px rgba(24, 62, 107, .16) !important; } #appSection #glavniScrollKontejner .crm-workspace-hero > * { position: relative; z-index: 1; } #appSection #glavniScrollKontejner .crm-workspace-hero::before { content: none !important; } #appSection #glavniScrollKontejner .crm-workspace-hero::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none; border-radius: inherit; background: linear-gradient(112deg, transparent 24%, rgba(255,255,255,.11) 49%, transparent 73%) !important; transform: translateX(-128%); animation: crm-hero-sheen 9s ease-in-out infinite; } #appSection #glavniScrollKontejner .crm-workspace-hero :is(h2, h3, h4) { color: #fff !important; -webkit-text-fill-color: #fff; text-shadow: 0 2px 16px rgba(5, 25, 57, .28) !important; } #appSection #glavniScrollKontejner .crm-workspace-hero :is(p, span, small) { color: #dcedff !important; } #appSection #glavniScrollKontejner .crm-workspace-hero .crm-kicker, #appSection #glavniScrollKontejner .crm-workspace-hero .registers-eyebrow, #appSection #glavniScrollKontejner .crm-workspace-hero .superadmin-identity p, #appSection #glavniScrollKontejner .crm-workspace-hero > p { color: #a7f1e6 !important; } #appSection #glavniScrollKontejner .crm-workspace-hero .crm-live span { background: #67f2cb !important; box-shadow: 0 0 0 4px rgba(103,242,203,.18); } #appSection #glavniScrollKontejner .crm-workspace-hero :is(.registers-refresh, .template-create-button, .blacklist-add-button) { border-color: rgba(255,255,255,.34) !important; color: #17486d !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 10px 22px rgba(7, 32, 67, .18) !important; } #appSection #glavniScrollKontejner .crm-workspace-hero :is(.registers-refresh, .template-create-button, .blacklist-add-button):hover { color: #0d716e !important; background: #fff !important; } #tab_zapisnik .record-page-intro, #tab_dosje .dossier-page-intro { min-height: 9.3rem; display: grid; align-content: center; } #tab_pregledRegistri .registers-hero, #tab_sablone .template-studio-hero, #tab_crnalista .blacklist-hero { min-height: 10.2rem; } #tab_superadmin .superadmin-hero { min-height: 9.5rem; } /* Prazno stanje ne smije naslijediti naglašeni lijevi rub kartica. */ #tab_crnalista #listaCrnaLista > .blacklist-empty-state, #tab_pregledRegistri :is(#listaRegNapomene, #listaRegPauze, #listaRegVip, #listaRegKazne) > .register-empty-state { margin-left: 0 !important; border-left-width: 1px !important; box-shadow: none !important; } @media (max-width: 720px) { #appSection #glavniScrollKontejner .crm-workspace-hero { min-height: 0 !important; padding: 1.05rem !important; } #tab_pregledRegistri .registers-hero, #tab_sablone .template-studio-hero, #tab_crnalista .blacklist-hero, #tab_superadmin .superadmin-hero { align-items: flex-start; flex-direction: column; } #appSection #glavniScrollKontejner .crm-workspace-hero :is(.registers-refresh, .template-create-button, .blacklist-add-button) { width: 100%; } } /* ======================================================================== MOBILNI UI — zasebno sučelje. Pravila su namjerno ograničena na telefon kako bi desktop radni prostori ostali potpuno neizmijenjeni. ======================================================================== */ @media (max-width: 767px) { :root { --mobile-gutter: 1rem; --mobile-card-radius: 1.15rem; --mobile-ink: #172744; --mobile-muted: #6f819d; --mobile-line: #dbe5f2; --mobile-surface: #ffffff; --mobile-accent: #3858d6; } html, body { width: 100vw !important; max-width: 100vw !important; overflow: hidden !important; background: #f2f6fc !important; } body.crm-mobile-menu-open { overflow: hidden !important; } #appSection { width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; left: 0 !important; right: auto !important; transform: none !important; overflow: hidden !important; } #appSection > .flex-1 { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } #appSection .crm-ambient-layer { opacity: .45; } #appSection .crm-ambient-layer > * { animation-duration: 20s; } #appSection > .flex-1 > header { position: relative; z-index: 40; min-height: 4.35rem; border-bottom: 1px solid rgba(207, 220, 239, .95); background: rgba(255,255,255,.92); box-shadow: 0 5px 18px rgba(34, 61, 106, .06); } #appSection > .flex-1 > header > div { min-height: 4.35rem; padding: calc(.65rem + env(safe-area-inset-top)) var(--mobile-gutter) .65rem !important; } #appSection > .flex-1 > header h1 { color: var(--mobile-ink) !important; font-size: .9rem !important; } #appSection > .flex-1 > header img { width: 2rem !important; height: 2rem !important; max-width: 2rem !important; max-height: 2rem !important; } #mobileWorkspaceMenuButton, #appSection > .flex-1 > header button { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; padding: 0 !important; border-radius: .76rem !important; } #glavniScrollKontejner { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: clip !important; overscroll-behavior-x: none; } #glavniScrollKontejner > .max-w-7xl { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 1.15rem var(--mobile-gutter) calc(7.8rem + env(safe-area-inset-bottom)) !important; overflow: clip !important; } #glavniScrollKontejner [class*="max-w-"] { max-width: 100% !important; } #glavniScrollKontejner :where(section, article, header, aside, div, form) { min-width: 0; } #glavniScrollKontejner :where(input, select, textarea, button) { max-width: 100%; } #glavniScrollKontejner input, #glavniScrollKontejner select, #glavniScrollKontejner textarea { min-height: 2.9rem !important; border-color: var(--mobile-line) !important; border-radius: .8rem !important; color: var(--mobile-ink) !important; font-size: .92rem !important; } #glavniScrollKontejner textarea { min-height: 7.4rem !important; line-height: 1.5; } #glavniScrollKontejner input:focus, #glavniScrollKontejner select:focus, #glavniScrollKontejner textarea:focus { outline: 0 !important; border-color: #5475e4 !important; box-shadow: 0 0 0 3px rgba(69, 98, 219, .13) !important; } #glavniScrollKontejner input[type="file"] { min-height: auto !important; } #glavniScrollKontejner .grid.grid-cols-2, #glavniScrollKontejner .grid.grid-cols-3, #glavniScrollKontejner .grid.grid-cols-4 { grid-template-columns: minmax(0, 1fr) !important; } #glavniScrollKontejner .flex-row { min-width: 0; } /* Donja navigacija: četiri glavne radnje, ostalo je u hamburger izborniku. */ .crm-mobile-dock { position: fixed !important; right: .8rem !important; bottom: calc(.7rem + env(safe-area-inset-bottom)) !important; left: .8rem !important; z-index: 70 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); height: 4.2rem !important; padding: .3rem !important; border: 1px solid rgba(203,216,237,.9) !important; border-radius: 1.2rem !important; background: rgba(255,255,255,.94) !important; box-shadow: 0 13px 34px rgba(27,52,98,.18) !important; backdrop-filter: blur(18px); } .crm-mobile-dock button { position: relative; display: grid !important; min-width: 0; min-height: 3.25rem; align-content: center; justify-items: center; gap: .24rem; border-radius: .9rem; color: #798aa5 !important; text-align: center; } .crm-mobile-dock button.text-blue-600 { color: #fff !important; background: linear-gradient(135deg, #3455d8, #6074ed); box-shadow: 0 6px 14px rgba(52,85,216,.27); } .crm-mobile-dock button svg { width: 1.13rem; height: 1.13rem; } .crm-mobile-dock button span { display: block; width: 100%; font-size: .58rem !important; line-height: 1.05; letter-spacing: .01em; } /* Izbornik za manje česte radne prostore. */ .crm-mobile-sheet { position: fixed; z-index: 120; inset: 0; display: block; } .crm-mobile-sheet-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(12, 25, 54, .5); backdrop-filter: blur(4px); } .crm-mobile-sheet-panel { position: absolute; right: 0; bottom: 0; left: 0; display: grid; max-height: min(85dvh, 46rem); gap: .95rem; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); overflow: auto; border: 1px solid rgba(255,255,255,.8); border-radius: 1.55rem 1.55rem 0 0; background: #f7faff; box-shadow: 0 -14px 42px rgba(10,31,73,.25); animation: crmMobileSheetIn .24s cubic-bezier(.2,.82,.26,1) both; } .crm-mobile-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .crm-mobile-sheet-header p { margin: 0 0 .16rem; color: #278c88; font-size: .62rem; font-weight: 900; letter-spacing: .12em; } .crm-mobile-sheet-header h2 { margin: 0; color: var(--mobile-ink); font-size: 1.25rem; font-weight: 900; letter-spacing: -.035em; } .crm-mobile-sheet-header > button { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; padding: 0; border: 1px solid #d9e3f1; border-radius: .8rem; color: #526681; background: #fff; font-size: 1.55rem; line-height: 1; } .crm-mobile-menu-profile { display: flex; align-items: center; gap: .7rem; padding: .8rem; border: 1px solid #d9e5f2; border-radius: 1rem; background: linear-gradient(120deg, #eef7f8, #f2f4ff); } .crm-mobile-menu-profile > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; flex: 0 0 auto; border-radius: .8rem; color: #fff; background: linear-gradient(135deg, #1da89e, #4869dc); font-size: .9rem; font-weight: 900; } .crm-mobile-menu-profile b, .crm-mobile-menu-profile small { display: block; } .crm-mobile-menu-profile b { overflow: hidden; color: #243958; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; } .crm-mobile-menu-profile small { margin-top: .15rem; color: #7688a3; font-size: .65rem; font-weight: 700; } .crm-mobile-menu-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .58rem; } .crm-mobile-menu-links button { display: flex; min-width: 0; min-height: 3.25rem; align-items: center; gap: .58rem; padding: .6rem .65rem; border: 1px solid #dde7f3; border-radius: .95rem; color: #425979; background: #fff; text-align: left; font-size: .72rem; font-weight: 850; } .crm-mobile-menu-links button svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; color: #4a69d8; } .crm-mobile-menu-links button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-mobile-menu-links button.is-current { border-color: #6682ec; color: #2946b6; background: #eef2ff; box-shadow: inset 0 0 0 1px rgba(78,105,220,.08); } .crm-mobile-menu-links .crm-mobile-menu-superadmin { border-color: #f1ced7; color: #a23b58; background: #fff8fa; } .crm-mobile-menu-links .crm-mobile-menu-superadmin svg { color: #c24b67; } .crm-mobile-logout { display: flex; min-height: 3rem; align-items: center; justify-content: center; gap: .5rem; padding: .7rem; border: 1px solid #efd7dd; border-radius: .9rem; color: #a64760; background: #fffafb; font-size: .76rem; font-weight: 900; } .crm-mobile-logout svg { width: 1rem; height: 1rem; } .crm-mobile-menu-copyright { margin: -.2rem 0 0; color: #8291aa; font-size: .62rem; font-weight: 700; letter-spacing: .02em; text-align: center; } .crm-mobile-menu-copyright strong { color: #4c69b7; font-weight: 900; } @keyframes crmMobileSheetIn { from { transform: translateY(1.3rem); opacity: .3; } to { transform: translateY(0); opacity: 1; } } /* Jedinstveni mobilni uvodi radnih prostora. */ .crm-workspace-hero, .record-page-intro, .registers-hero, .dossier-page-intro, .template-studio-hero, .blacklist-hero, .superadmin-hero, .video-room-hero { width: 100% !important; min-width: 0 !important; padding: 1.1rem !important; border-radius: var(--mobile-card-radius) !important; } .record-page-intro h2, .registers-hero h2, .dossier-page-intro h2, .template-studio-hero h2, .blacklist-hero h2, .superadmin-hero h2, .video-room-hero h2 { font-size: clamp(1.65rem, 8vw, 2.2rem) !important; line-height: 1.05 !important; overflow-wrap: anywhere; } .record-page-intro p, .registers-intro, .dossier-page-intro > p, .template-studio-hero > p, .blacklist-hero > p, .superadmin-hero > p, .video-room-hero > div > span { font-size: .84rem !important; line-height: 1.5 !important; } .crm-hero { min-height: auto !important; padding: 1.4rem !important; border-radius: 1.35rem !important; } .crm-hero h2 { max-width: 11ch; font-size: clamp(2.15rem, 12vw, 3.15rem) !important; line-height: .97 !important; } .crm-hero-description { max-width: 32rem; font-size: .9rem !important; } .crm-hero-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: .55rem; } .crm-primary-action, .crm-secondary-action { min-height: 3rem; justify-content: center; padding: .65rem !important; font-size: .7rem !important; } .crm-hero-orb { display: none !important; } .crm-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .65rem !important; margin-top: .8rem !important; } .crm-metric-card { min-height: 6.3rem; padding: .85rem !important; border-radius: 1rem !important; } .crm-metric-card > div > span, .crm-metric-card > div > small { font-size: .59rem !important; } .crm-metric-card > div > strong { font-size: 1.4rem !important; } .crm-metric-icon { width: 2.15rem !important; height: 2.15rem !important; } .crm-metric-arrow { display: none !important; } .crm-section-heading { align-items: flex-end; margin-top: 1.55rem !important; } .crm-section-heading h3 { color: #3564c9 !important; font-size: 1.45rem !important; } .crm-section-heading > span { display: none; } /* Zapisnik: korak-po-korak bez uskih bočnih obrazaca. */ .record-member-stage, .dossier-discovery { grid-template-columns: 1fr !important; gap: .9rem !important; padding: 1rem !important; border-radius: var(--mobile-card-radius) !important; } .record-stage-label, .dossier-discovery-step { align-items: center !important; } .record-stage-label b, .dossier-discovery-step > span { width: 2.65rem !important; height: 2.65rem !important; font-size: .9rem !important; } .record-member-search, .dossier-search-zone { gap: .55rem !important; } .record-search-input, .dossier-search-input { min-height: 3.05rem !important; padding: 0 .78rem !important; border-radius: .9rem !important; } .record-search-input input, .dossier-search-input input { min-width: 0 !important; min-height: 2.75rem !important; padding: 0 !important; font-size: .9rem !important; } .record-search-input kbd, .dossier-search-input kbd, .dossier-discovery-note { display: none !important; } .record-member-shortcuts, .dossier-search-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: .55rem; } .record-member-shortcuts button, .dossier-search-actions button { min-height: 2.8rem; padding: .5rem !important; border-radius: .78rem !important; font-size: .7rem !important; } .crm-member-results { position: static !important; width: 100% !important; max-height: 17rem !important; } .record-subject-banner, .dossier-member-hero { grid-template-columns: 1fr !important; gap: .85rem !important; padding: 1rem !important; border-radius: 1.15rem !important; } .record-subject-data, .dossier-member-details { min-width: 0; gap: .38rem !important; } .record-subject-data span, .dossier-member-details span { overflow-wrap: anywhere; } .record-workspace { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: .85rem !important; } .record-action-rail { position: static !important; padding: .95rem !important; border-radius: var(--mobile-card-radius) !important; } .record-rail-heading p { display: none; } .record-action-list { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem !important; margin-top: .8rem !important; } .record-action-list button { min-width: 0; min-height: 3.25rem; padding: .55rem !important; border-radius: .8rem !important; } .record-action-list button span:first-child { font-size: .62rem !important; } .record-action-list button span:last-child { overflow: hidden; font-size: .7rem !important; text-overflow: ellipsis; white-space: nowrap; } .record-workbench, .record-form-panel { width: 100% !important; padding: 1rem !important; border-radius: var(--mobile-card-radius) !important; } .record-workbench-head { padding-bottom: .9rem !important; } .record-workbench-head h3 { font-size: 1.35rem !important; } .record-fields, .record-fields.record-two-columns, .record-date-range { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: .75rem !important; } .record-field, .record-field-wide, .record-message-field, .record-operation, .record-upload, .record-automation-note, .record-extension { width: 100% !important; min-width: 0 !important; } .record-message-field { padding: .8rem !important; border-radius: .9rem !important; } .record-message-field > div { align-items: flex-start !important; gap: .45rem !important; } .record-message-field button { min-height: 2rem; padding: .35rem .55rem !important; } .record-toggle-group { display: grid !important; grid-template-columns: 1fr 1fr; width: 100% !important; } .record-toggle-choice { min-height: 2.9rem; padding: .4rem !important; font-size: .73rem !important; } .record-submit { width: 100% !important; min-height: 3.4rem !important; border-radius: .9rem !important; } /* Registri: kartice i alati stanu bez horizontalnog širenja. */ .registers-hero, .template-studio-hero, .blacklist-hero, .superadmin-hero { align-items: stretch !important; gap: .85rem !important; } .registers-refresh, .template-create-button, .blacklist-add-button { width: 100%; min-height: 3.2rem; justify-content: center; } .registers-summary, .blacklist-overview { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .6rem !important; } .register-summary-card, .blacklist-stat-card { min-height: 6rem; padding: .85rem !important; } .registers-studio { grid-template-columns: minmax(0,1fr) !important; gap: .85rem !important; } .registers-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .45rem !important; padding: .7rem !important; } .register-nav-item { min-width: 0; min-height: 4.1rem; padding: .55rem !important; border-radius: .8rem !important; } .register-nav-item small { display: none !important; } .register-nav-item b { display: block; overflow: hidden; font-size: .68rem !important; text-overflow: ellipsis; white-space: nowrap; } .registers-workspace { padding: 1rem !important; border-radius: var(--mobile-card-radius) !important; } .register-toolbar { display: grid !important; grid-template-columns: 1fr !important; gap: .65rem !important; padding: .8rem !important; } .register-toolbar > * { width: 100% !important; } .register-toggle { justify-content: space-between; min-height: 2.75rem; } .register-clear { min-height: 2.85rem; } /* Dosje člana: informacije u čitljivim blokovima. */ .dossier-member-identity { align-items: flex-start !important; } .dossier-member-identity h3 { color: #fff !important; font-size: 1.75rem !important; text-shadow: none !important; overflow-wrap: anywhere; } .dossier-member-identity strong { color: #73ead6 !important; } .dossier-member-details { padding: .75rem !important; border-radius: .85rem !important; } .dossier-blacklist-action { width: 100%; min-height: 3.1rem; } .dossier-detail-grid { grid-template-columns: minmax(0,1fr) !important; gap: .85rem !important; } .dossier-overview, .dossier-activity-panel { padding: 1rem !important; border-radius: var(--mobile-card-radius) !important; } .dossier-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .dossier-filter-row { display: grid !important; grid-template-columns: 1fr !important; gap: .6rem !important; } .dossier-filter-row > * { width: 100% !important; } /* Šablone, crna lista, SuperAdmin i video soba. */ .template-command-grid, .blacklist-workspace, .superadmin-layout, .video-room-panel { grid-template-columns: minmax(0,1fr) !important; gap: .85rem !important; } .template-ocr-dropzone, .template-report-dock, .template-library, .blacklist-workspace, .superadmin-panel, .video-room-panel { padding: 1rem !important; border-radius: var(--mobile-card-radius) !important; } .template-report-list { grid-template-columns: 1fr !important; } .template-library-head, .blacklist-workspace-head { align-items: stretch !important; gap: .7rem !important; } .template-library-search, .blacklist-search { width: 100% !important; } .template-library-categories { display: flex !important; overflow-x: auto; gap: .45rem; padding-bottom: .2rem; } .template-card-grid, .blacklist-case-grid, .superadmin-data-grid, .superadmin-health-grid { grid-template-columns: minmax(0,1fr) !important; } .blacklist-toolbar { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: .6rem !important; } .blacklist-show-all { min-height: 3rem; } .blacklist-empty-state, .template-empty-state { min-height: 10rem !important; } .superadmin-tab-rail { display: flex !important; overflow-x: auto; gap: .5rem !important; padding-bottom: .2rem; } .superadmin-tab-rail button { flex: 0 0 auto; } .superadmin-settings-grid, .superadmin-create-row { grid-template-columns: minmax(0,1fr) !important; } .video-room-hero { flex-direction: column !important; align-items: stretch !important; } .video-room-hero aside { align-self: flex-start; } .video-room-call, .whereby-meet-container, .whereby-meet-container > whereby-embed { min-height: 16rem !important; } /* Modalni prozori i administratorski chat. */ #appSection ~ [id$="Modal"] > div, body > [id$="Modal"] > div { max-width: calc(100vw - 2rem) !important; max-height: min(82dvh, 44rem) !important; overflow: auto; border-radius: 1.2rem !important; } .admin-chat-fab { right: 1rem !important; bottom: calc(5.7rem + env(safe-area-inset-bottom)) !important; width: 3.35rem !important; height: 3.35rem !important; } .admin-chat-window { right: .75rem !important; bottom: calc(5.65rem + env(safe-area-inset-bottom)) !important; left: .75rem !important; width: auto !important; max-width: none !important; max-height: min(70dvh, 34rem) !important; } .crm-copyright { display: none !important; } /* Diskretno vraćanje dinamike pri otvaranju mobilnog radnog prostora. */ #appSection #glavniScrollKontejner .crm-workspace-hero, #appSection #glavniScrollKontejner .record-page-intro, #appSection #glavniScrollKontejner .registers-hero, #appSection #glavniScrollKontejner .dossier-page-intro, #appSection #glavniScrollKontejner .template-studio-hero, #appSection #glavniScrollKontejner .blacklist-hero, #appSection #glavniScrollKontejner .superadmin-hero, #appSection #glavniScrollKontejner .video-room-hero, #appSection #glavniScrollKontejner .record-member-stage, #appSection #glavniScrollKontejner .registers-summary, #appSection #glavniScrollKontejner .crm-metrics { animation: crmMobileReveal .46s cubic-bezier(.22,.76,.25,1) both; } #appSection #glavniScrollKontejner .crm-hero::after, #appSection #glavniScrollKontejner .blacklist-hero::after, #appSection #glavniScrollKontejner .superadmin-hero::after { animation: crm-hero-sheen 7s ease-in-out infinite !important; } .crm-hero-orb { display: block !important; right: .75rem !important; top: 1rem !important; width: 4.8rem !important; height: 4.8rem !important; transform: none !important; opacity: .55 !important; pointer-events: none; } .crm-orb-core { inset: 1.22rem !important; } @keyframes crmMobileReveal { from { opacity: 0; transform: translateY(.65rem); } to { opacity: 1; transform: translateY(0); } } } @media (max-width: 360px) { .crm-hero-orb { display: none !important; } } @media (max-width: 767px) and (prefers-reduced-motion: reduce) { #appSection #glavniScrollKontejner .crm-workspace-hero, #appSection #glavniScrollKontejner .record-page-intro, #appSection #glavniScrollKontejner .registers-hero, #appSection #glavniScrollKontejner .dossier-page-intro, #appSection #glavniScrollKontejner .template-studio-hero, #appSection #glavniScrollKontejner .blacklist-hero, #appSection #glavniScrollKontejner .superadmin-hero, #appSection #glavniScrollKontejner .video-room-hero, #appSection #glavniScrollKontejner .record-member-stage, #appSection #glavniScrollKontejner .registers-summary, #appSection #glavniScrollKontejner .crm-metrics, #appSection #glavniScrollKontejner .crm-hero::after, #appSection #glavniScrollKontejner .blacklist-hero::after, #appSection #glavniScrollKontejner .superadmin-hero::after { animation: none !important; transform: none !important; } } @media (prefers-reduced-motion: reduce) { #appSection #glavniScrollKontejner .crm-workspace-hero::after { animation: none !important; } } /* ----- Administratorski chat ----------------------------------------- */ #appSection .admin-chat-fab { position: fixed; right: 1.35rem; bottom: 3.85rem; z-index: 70; display: grid; width: 3.35rem; height: 3.35rem; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.56); border-radius: 1.08rem; color: #fff; background: linear-gradient(135deg, #1d4e86, #287d91 58%, #23a398); box-shadow: 0 15px 28px rgba(26,76,119,.28), inset 0 1px 0 rgba(255,255,255,.24); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } #appSection .admin-chat-fab:hover { filter: saturate(1.08) brightness(1.04); transform: translateY(-3px); box-shadow: 0 20px 32px rgba(26,76,119,.34), inset 0 1px 0 rgba(255,255,255,.28); } #appSection .admin-chat-fab:active { transform: translateY(0) scale(.95); } #appSection .admin-chat-fab svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } #appSection .admin-chat-fab.hidden, #appSection .admin-chat-window.hidden { display: none !important; } .admin-chat-badge { position: absolute; top: -.38rem; right: -.38rem; display: grid; min-width: 1.25rem; height: 1.25rem; place-items: center; padding: 0 .22rem; border: 2px solid #f5f9ff; border-radius: 999px; color: #fff; background: #d45062; box-shadow: 0 5px 12px rgba(142,37,56,.28); font-size: .53rem; font-weight: 900; line-height: 1; } #appSection .admin-chat-window { position: fixed; right: 1.35rem; bottom: 7.75rem; z-index: 70; display: flex; width: min(23.5rem, calc(100vw - 2rem)); max-height: min(35rem, calc(100dvh - 9.5rem)); flex-direction: column; overflow: hidden; border: 1px solid rgba(185,207,229,.9); border-radius: 1.25rem; background: rgba(252,254,255,.98); box-shadow: 0 24px 55px rgba(28,63,108,.24), 0 3px 10px rgba(28,63,108,.08); backdrop-filter: blur(18px); animation: admin-chat-window-in .22s ease both; } .admin-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.6rem; padding: .9rem 1rem; color: #fff; background: linear-gradient(120deg, #143c71, #1c6688 62%, #228d86); } .admin-chat-title { display: flex; min-width: 0; align-items: center; gap: .62rem; } .admin-chat-title > div { min-width: 0; } .admin-chat-title p { margin: 0 0 .12rem; color: #bde9e6; font-size: .51rem; font-weight: 900; letter-spacing: .105em; } .admin-chat-title h2 { margin: 0; color: #fff !important; font-size: 1rem; font-weight: 900; letter-spacing: -.02em; } .admin-chat-presence { display: block; width: .64rem; height: .64rem; flex: 0 0 auto; border-radius: 50%; background: #77f6ce; box-shadow: 0 0 0 5px rgba(119,246,206,.16); animation: admin-chat-presence-pulse 2.2s ease-in-out infinite; } .admin-chat-minimize { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: .65rem; color: #e9f8ff; background: rgba(255,255,255,.1); font-size: 1.2rem; font-weight: 900; line-height: 1; transition: background .18s ease, transform .18s ease; } .admin-chat-minimize:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); } .admin-chat-header-actions { display: flex; align-items: center; gap: .38rem; } .admin-chat-clear { min-height: 2rem; padding: 0 .56rem; border: 1px solid rgba(255,255,255,.27); border-radius: .65rem; color: #e9f8ff; background: rgba(255,255,255,.1); font-size: .53rem; font-weight: 900; line-height: 1; transition: background .18s ease, transform .18s ease; } .admin-chat-clear:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); } .admin-chat-clear.hidden { display: none !important; } .admin-chat-expiry { margin: 0; padding: .58rem 1rem; border-bottom: 1px solid #e5edf6; color: #73849c; background: #f7fafc; font-size: .61rem; font-weight: 700; line-height: 1.45; } .admin-chat-messages { display: flex; min-height: 13rem; flex: 1 1 auto; flex-direction: column; gap: .55rem; overflow-y: auto; padding: .85rem; background: linear-gradient(180deg, #fbfdff, #f5f9fe); scrollbar-color: #b7cce0 transparent; } .admin-chat-message { align-self: flex-start; max-width: 88%; padding: .58rem .68rem .62rem; border: 1px solid #dde8f2; border-radius: .82rem .82rem .82rem .24rem; color: #39516f; background: #fff; box-shadow: 0 5px 12px rgba(46,85,128,.06); } .admin-chat-message.is-own { align-self: flex-end; border-color: #c8ddd5; border-radius: .82rem .82rem .24rem .82rem; color: #104e5b; background: linear-gradient(135deg, #edfcf7, #e4f7f2); } .admin-chat-message header { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; margin-bottom: .28rem; } .admin-chat-message header span { min-width: 0; color: #1f4f7d; font-size: .63rem; font-weight: 900; line-height: 1.2; } .admin-chat-message.is-own header span { color: #0f766f; } .admin-chat-message header small { display: block; overflow: hidden; margin-top: .08rem; color: #8293a9; font-size: .51rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .admin-chat-message time { flex: 0 0 auto; color: #8b9bb0; font-size: .48rem; font-weight: 800; white-space: nowrap; } .admin-chat-message p { margin: 0; overflow-wrap: anywhere; font-size: .67rem; font-weight: 650; line-height: 1.45; } .admin-chat-message-tools { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .34rem; } .admin-chat-delete { min-height: 1.35rem; padding: 0 .32rem; border: 1px solid #edcbd2; border-radius: .36rem; color: #ad4357; background: #fff7f8; font-size: .42rem; font-weight: 900; line-height: 1; } .admin-chat-delete:hover { color: #fff; border-color: #be4e61; background: #be4e61; filter: none; transform: none; } .admin-chat-empty { display: grid; min-height: 100%; place-content: center; gap: .28rem; padding: 1.4rem; color: #8192a9; text-align: center; } .admin-chat-empty b { color: #40618a; font-size: .76rem; font-weight: 900; } .admin-chat-empty span { max-width: 15rem; font-size: .6rem; font-weight: 650; line-height: 1.5; } .admin-chat-composer { display: grid; gap: .45rem; padding: .75rem; border-top: 1px solid #e0e9f3; background: #fff; } .admin-chat-composer textarea { width: 100%; min-height: 3.45rem; max-height: 7rem; resize: vertical; padding: .64rem .7rem; border: 1px solid #c8d8e9; border-radius: .72rem; color: #2d4668; background: #fbfdff; font: 700 .68rem/1.4 inherit; outline: none; } .admin-chat-composer textarea::placeholder { color: #94a5ba; } .admin-chat-composer textarea:focus { border-color: #32938b; box-shadow: 0 0 0 3px rgba(50,147,139,.12); } .admin-chat-composer > div { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .admin-chat-composer > div > span { color: #8494a8; font-size: .49rem; font-weight: 750; line-height: 1.3; } .admin-chat-composer button { display: inline-flex; min-height: 2.15rem; align-items: center; justify-content: center; gap: .32rem; padding: 0 .75rem; border: 0; border-radius: .62rem; color: #fff; background: linear-gradient(135deg, #1d7d85, #139c82); box-shadow: 0 7px 13px rgba(18,127,124,.2); font-size: .61rem; font-weight: 900; transition: transform .18s ease, filter .18s ease; } .admin-chat-composer button:hover { filter: brightness(1.06); transform: translateY(-1px); } .admin-chat-composer button:disabled { cursor: wait; opacity: .65; transform: none; } .admin-chat-composer button b { font-size: .88rem; line-height: 1; } @keyframes admin-chat-window-in { from { opacity: 0; transform: translateY(.75rem) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes admin-chat-presence-pulse { 50% { box-shadow: 0 0 0 8px rgba(119,246,206,0); } } @media (max-width: 720px) { #appSection .admin-chat-fab { right: 1rem; bottom: 5.3rem; width: 3.15rem; height: 3.15rem; border-radius: 1rem; } #appSection .admin-chat-window { right: 1rem; bottom: 9.05rem; width: calc(100vw - 2rem); max-height: min(33rem, calc(100dvh - 11.3rem)); } .admin-chat-messages { min-height: 11.5rem; } .admin-chat-composer > div > span { max-width: 11rem; } } @media (prefers-reduced-motion: reduce) { .admin-chat-fab, .admin-chat-window, .admin-chat-presence { animation: none !important; transition: none !important; } } /* Završno usklađivanje složenih tražilica: fokus pripada vanjskom okviru, nikad samom polju unutar njega. */ #appSection #glavniScrollKontejner :is(.record-search-input, .dossier-search-input, .blacklist-search, .template-library-search, .superadmin-search-row label) input:focus, #appSection #glavniScrollKontejner :is(.record-search-input, .dossier-search-input, .blacklist-search, .template-library-search, .superadmin-search-row label) input:focus-visible { outline: 0 !important; border-color: transparent !important; box-shadow: none !important; } /* Ime člana ostaje čitljivo na svakom tonu gradijenta otvorenog dosjea. */ #appSection #glavniScrollKontejner .record-subject-primary #zapIme { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 2px 16px rgba(4, 17, 53, .64) !important; } #appSection #glavniScrollKontejner .dossier-member-identity #dosjePuniIme { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 2px 16px rgba(4, 17, 53, .64) !important; } /* Status uz ime autora u administratorskom chatu. */ .admin-chat-author { display: flex; min-width: 0; align-items: flex-start; gap: .38rem; } .admin-chat-presence-dot { display: block; width: .5rem; height: .5rem; flex: 0 0 auto; margin-top: .14rem; border-radius: 50%; background: #b7c1cf; box-shadow: 0 0 0 3px rgba(183,193,207,.16); } .admin-chat-presence-dot.is-online { background: #25bb83; box-shadow: 0 0 0 3px rgba(37,187,131,.16); } .admin-chat-composer > .admin-chat-emoji-picker { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .32rem; padding: .42rem; border: 1px solid #dbe7ee; border-radius: .72rem; background: #f8fbfd; } .admin-chat-composer > .admin-chat-emoji-picker.hidden { display: none !important; } .admin-chat-composer > .admin-chat-emoji-picker button { min-width: 0; min-height: 2rem; padding: 0; border: 1px solid #dce6ed; border-radius: .52rem; color: inherit; background: #fff; box-shadow: none; font-size: .95rem; } .admin-chat-composer > .admin-chat-emoji-picker button:hover { border-color: #8bcfc2; background: #effaf7; filter: none; transform: translateY(-1px); } .admin-chat-composer > .admin-chat-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .admin-chat-composer > .admin-chat-composer-actions > span { flex: 1 1 auto; color: #8494a8; font-size: .49rem; font-weight: 750; line-height: 1.3; } .admin-chat-composer > .admin-chat-composer-actions .admin-chat-emoji-trigger { width: 2.15rem; min-width: 2.15rem; padding: 0; border: 1px solid #c8dedb; color: #137b72; background: #eefaf8; box-shadow: none; font-size: .9rem; } .admin-chat-composer > .admin-chat-composer-actions .admin-chat-emoji-trigger:hover { border-color: #1b9d8c; background: #dcf5ef; filter: none; } /* SuperAdmin upravlja samo dostupnošću sobe; video veza dolazi iz odabrane infrastrukture. */ .superadmin-video-control { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; padding: .9rem; border: 1px solid #d6e5f1; border-radius: .8rem; background: linear-gradient(120deg, #f7fbff, #f5fbfa); } .superadmin-video-control > div { min-width: 0; } .superadmin-video-control p { margin: 0 0 .16rem; color: #188f83; font-size: .5rem; font-weight: 900; letter-spacing: .11em; } .superadmin-video-control h4 { margin: 0 0 .26rem; color: #2c4771; font-size: .78rem; font-weight: 900; } .superadmin-video-control span { display: block; max-width: 42rem; color: #72839b; font-size: .59rem; font-weight: 650; line-height: 1.45; } .superadmin-switch { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .42rem; cursor: pointer; } .superadmin-switch input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .superadmin-switch i { position: relative; width: 2.25rem; height: 1.28rem; border-radius: 999px; background: #c4d1df; transition: background .18s ease; } .superadmin-switch i::after { content: ''; position: absolute; top: .18rem; left: .18rem; width: .92rem; height: .92rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(33,53,83,.22); transition: transform .18s ease; } .superadmin-switch input:checked + i { background: #1f9b89; } .superadmin-switch input:checked + i::after { transform: translateX(.97rem); } .superadmin-switch input:focus-visible + i { outline: 3px solid rgba(56,127,204,.28); outline-offset: 3px; } .superadmin-switch b { color: #4d637e; font-size: .58rem; font-weight: 900; } /* Video soba se prikazuje kao pripremljeni, nenametljivi radni prostor. */ #tab_videoSoba.video-room-studio { gap: 1rem; padding-bottom: 5rem; } .video-room-hero { display: flex; align-items: end; justify-content: space-between; gap: 1rem; } .video-room-hero p { margin: 0 0 .38rem; color: #a4f0dc; font-size: .56rem; font-weight: 900; letter-spacing: .12em; } .video-room-hero p i { display: inline-block; width: .42rem; height: .42rem; margin-right: .34rem; border-radius: 50%; background: #75f5c8; box-shadow: 0 0 0 4px rgba(117,245,200,.12); } .video-room-hero h2 { margin: 0; color: #fff !important; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -.05em; } .video-room-hero > div > span { display: block; max-width: 45rem; margin-top: .55rem; color: #d5eff7; font-size: .71rem; font-weight: 650; line-height: 1.5; } .video-room-hero aside { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .38rem; padding: .55rem .7rem; border: 1px solid rgba(255,255,255,.26); border-radius: .6rem; color: #effffb; background: rgba(5,52,76,.2); font-size: .61rem; font-weight: 850; } .video-room-hero aside b { color: #76f7c7; font-size: .66rem; } .video-room-panel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr); gap: 1rem; padding: 1rem; border: 1px solid #d7e4f2; border-radius: 1.05rem; background: rgba(255,255,255,.88); box-shadow: 0 14px 30px rgba(31,73,120,.08); } .video-room-preview { position: relative; display: grid; min-height: 18rem; place-items: center; overflow: hidden; padding: 1rem; border: 1px solid #274675; border-radius: .85rem; color: #d9ecff; background: radial-gradient(circle at 76% 18%, rgba(73,161,181,.38), transparent 28%), linear-gradient(135deg, #132b55, #1b4d78 60%, #216d78); } .video-room-preview::after { content: ''; position: absolute; inset: 10%; border: 1px solid rgba(168,234,239,.2); border-radius: 1rem; transform: rotate(-6deg); } .video-room-preview-main { position: relative; z-index: 1; padding: .58rem .82rem; border: 1px solid rgba(255,255,255,.24); border-radius: .58rem; background: rgba(8,31,65,.36); font-size: .7rem; font-weight: 800; } .video-room-preview > i { position: absolute; top: .8rem; left: .8rem; z-index: 1; padding: .32rem .5rem; border-radius: .42rem; color: #b8f8e3; background: rgba(8,42,70,.44); font-size: .52rem; font-style: normal; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } .video-room-preview > div { position: absolute; right: .8rem; bottom: .8rem; left: .8rem; z-index: 1; display: grid; gap: .18rem; padding: .7rem; border: 1px solid rgba(255,255,255,.16); border-radius: .62rem; background: rgba(7,31,63,.45); } .video-room-preview > div b { color: #fff; font-size: .64rem; font-weight: 900; }.video-room-preview > div span { color: #c6dbee; font-size: .54rem; font-weight: 650; line-height: 1.4; } .video-room-setup { display: grid; align-content: center; gap: .52rem; padding: .55rem; }.video-room-setup p { margin: 0; color: #168e83; font-size: .52rem; font-weight: 900; letter-spacing: .1em; }.video-room-setup h3 { margin: 0; color: #2b4774 !important; font-size: 1.1rem; font-weight: 900; letter-spacing: -.035em; }.video-room-setup > span { color: #72839a; font-size: .64rem; font-weight: 650; line-height: 1.55; }.video-room-setup button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.7rem; margin-top: .35rem; border: 1px solid #238e85; border-radius: .68rem; color: #fff; background: linear-gradient(135deg, #1b8f87, #356aca); box-shadow: 0 9px 18px rgba(34,107,162,.17); font-size: .63rem; font-weight: 900; }.video-room-setup button:hover { filter: brightness(1.06); transform: translateY(-1px); }.video-room-setup button b { font-size: .9rem; } /* Whereby Embedded: CRM provjerava pristup, Whereby sigurno vodi medijski poziv. */ .video-room-panel { grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .55fr); min-height: 24rem; } .video-room-call { min-width: 0; min-height: 22rem; } .whereby-meet-container { display: grid; width: 100%; height: 100%; min-height: 22rem; overflow: hidden; border: 1px solid #254b72; border-radius: .86rem; background: radial-gradient(circle at 78% 16%, rgba(76,183,178,.32), transparent 27%), linear-gradient(135deg, #11284f, #1c4f79 63%, #247374); box-shadow: inset 0 1px rgba(255,255,255,.08); } .whereby-meet-container > whereby-embed { display: block; width: 100%; height: 100%; min-height: 22rem; border: 0; background: #102443; } .whereby-call-empty { display: grid; width: min(20rem, 88%); place-items: center; align-content: center; justify-self: center; align-self: center; gap: .42rem; padding: 1.2rem; border: 1px solid rgba(185,241,235,.24); border-radius: .88rem; color: #d7f7f4; background: rgba(7,28,58,.34); text-align: center; } .whereby-call-empty-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: .75rem; color: #85f4d0; background: rgba(100,244,203,.14); } .whereby-call-empty-icon svg { width: 1.35rem; height: 1.35rem; } .whereby-call-empty strong { color: #fff; font-size: .82rem; font-weight: 900; } .whereby-call-empty p { margin: 0; color: #cbe5ee; font-size: .59rem; font-weight: 650; line-height: 1.45; } .video-room-setup { align-content: center; } .video-room-setup button svg { width: .92rem; height: .92rem; } .video-room-setup button:disabled { cursor: wait; opacity: .74; transform: none; } .video-room-setup .video-room-leave { border-color: #d3deeb; color: #4c6380; background: #f5f8fc; box-shadow: none; } .video-room-setup .video-room-leave:hover { border-color: #96aec7; background: #edf3fa; filter: none; } .video-room-setup small { display: block; color: #8090a7; font-size: .52rem; font-weight: 650; line-height: 1.45; } #videoSobaStatus { transition: border-color .2s ease, background .2s ease, color .2s ease; } #videoSobaStatus.is-live { border-color: rgba(101,245,195,.5); background: rgba(27,121,96,.24); } #videoSobaStatus.is-live b { color: #6effc5; } #videoSobaStatus.is-connecting { border-color: rgba(119,188,255,.54); background: rgba(33,104,174,.27); } #videoSobaStatus.is-connecting b { color: #88c9ff; animation: crmWherebyPulse 1.25s ease-in-out infinite; } #videoSobaStatus.is-error { border-color: rgba(255,174,146,.48); background: rgba(143,70,61,.25); } #videoSobaStatus.is-error b { color: #ffb089; } @keyframes crmWherebyPulse { 50% { opacity: .45; transform: scale(.75); } } @media (max-width: 720px) { .admin-chat-composer > .admin-chat-composer-actions > span { max-width: 10.25rem; } .superadmin-video-control { align-items: flex-start; flex-direction: column; } .video-room-hero, .video-room-panel { align-items: stretch; grid-template-columns: 1fr; } .video-room-hero { flex-direction: column; } .video-room-preview { min-height: 14rem; } .video-room-panel, .video-room-call, .whereby-meet-container, .whereby-meet-container > whereby-embed { min-height: 19rem; } } /* Video poziv ostaje u aplikaciji: puni zaslon prikazuje samo medijsku sobu. */ .video-room-setup .video-room-fullscreen { border-color: #9fc4dd; color: #27638a; background: #f2f8fc; box-shadow: none; } .video-room-setup .video-room-fullscreen:hover { border-color: #5397c5; color: #174f79; background: #e7f3fa; filter: none; } .video-room-call:fullscreen { display: grid; width: 100vw; height: 100vh; min-height: 100vh; padding: 0; background: #061a33; } .video-room-call:fullscreen .whereby-meet-container, .video-room-call:fullscreen .whereby-meet-container > whereby-embed { width: 100%; height: 100%; min-height: 100vh !important; border: 0; border-radius: 0; } .video-room-call:fullscreen .whereby-meet-container { box-shadow: none; } body.crm-whereby-call-active #appSection .sidebar-nav button:not(#btnTabVideoSoba), body.crm-whereby-call-active #appSection .crm-mobile-dock button:not([data-video-room-control]) { opacity: .72; } /* Službeni SuperAdmin izvještaj. */ .superadmin-tab-rail { grid-template-columns: repeat(8, minmax(0, 1fr)); } .admin-report-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid #cddfed; border-radius: .8rem; color: #eaf6ff; background: radial-gradient(circle at 90% 15%, rgba(81,190,181,.28), transparent 26%), linear-gradient(125deg, #163b71, #275a94 62%, #1e887f); } .admin-report-intro p { margin: 0 0 .24rem; color: #9de7d9; font-size: .5rem; font-weight: 900; letter-spacing: .12em; } .admin-report-intro h4 { margin: 0; color: #fff; font-size: 1rem; font-weight: 900; letter-spacing: -.03em; } .admin-report-intro span { display: block; max-width: 42rem; margin-top: .28rem; color: #d8e9fa; font-size: .58rem; font-weight: 650; line-height: 1.45; } .admin-report-seal { display: grid !important; width: 3.85rem; height: 3.85rem; flex: 0 0 auto; place-items: center; margin: 0 !important; border: 1px solid rgba(226,255,249,.54); border-radius: 50%; color: #eafff9 !important; background: rgba(4,29,60,.2); font-size: .48rem !important; font-weight: 900 !important; letter-spacing: .1em; line-height: 1.45; text-align: center; } .admin-report-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .58rem; align-items: end; margin-top: .8rem; padding: .72rem; border: 1px solid #e0e8ef; border-radius: .78rem; background: #f8fbfd; } .admin-report-controls label { display: grid; gap: .3rem; min-width: 0; } .admin-report-controls label span { color: #60758f; font-size: .49rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } .admin-report-controls label i { color: #8c9aae; font-size: .45rem; font-style: normal; font-weight: 700; letter-spacing: 0; text-transform: none; } .admin-report-controls input { width: 100%; min-height: 2.48rem; padding: 0 .65rem; border: 1px solid #cfddeb; border-radius: .55rem; outline: none; color: #314964; background: #fff; font: 800 .6rem inherit; } .admin-report-controls input:focus { border-color: #268f85; box-shadow: 0 0 0 3px rgba(38,143,133,.1); } .admin-report-controls button, .admin-report-actions button { min-height: 2.48rem; padding: 0 .72rem; border: 1px solid #247f78; border-radius: .55rem; color: #fff; background: linear-gradient(135deg, #158e84, #396ec5); box-shadow: 0 8px 15px rgba(34,110,143,.13); font-size: .56rem; font-weight: 900; white-space: nowrap; } .admin-report-controls button:hover, .admin-report-actions button:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-1px); } .admin-report-controls button:disabled, .admin-report-actions button:disabled { cursor: wait; opacity: .64; transform: none; } .admin-report-hint { margin: .55rem 0 .72rem; color: #8090a4; font-size: .54rem; font-weight: 650; line-height: 1.46; } .admin-report-preview { overflow: hidden; border: 1px solid #d8e3ec; border-radius: .8rem; background: #fff; } .admin-report-preview-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: .85rem; border-bottom: 1px solid #e3ebf1; background: linear-gradient(115deg, #f8fbff, #f6fcfb); } .admin-report-preview-head p { margin: 0 0 .14rem; color: #1b9289; font-size: .48rem; font-weight: 900; letter-spacing: .1em; } .admin-report-preview-head h4 { margin: 0; color: #29466d; font-size: .82rem; font-weight: 900; } .admin-report-preview-head span { display: block; margin-top: .18rem; color: #7b8ca1; font-size: .51rem; font-weight: 650; } .admin-report-preview-head > b { padding: .32rem .48rem; border: 1px solid #b7d9d1; border-radius: .42rem; color: #176e68; background: #effaf7; font-size: .44rem; font-weight: 900; letter-spacing: .08em; } .admin-report-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; padding: .72rem; border-bottom: 1px solid #e7edf3; } .admin-report-metrics article { display: grid; gap: .17rem; min-height: 5.2rem; padding: .65rem; border: 1px solid #dce7ef; border-top: 3px solid #4779cf; border-radius: .62rem; background: #fbfdff; } .admin-report-metrics article:nth-child(2) { border-top-color: #299584; }.admin-report-metrics article:nth-child(3) { border-top-color: #b57930; }.admin-report-metrics article.is-alert { border-top-color: #c15364; background: #fffafb; }.admin-report-metrics article.is-safe { border-top-color: #2aa17e; background: #f7fcfa; } .admin-report-metrics span { color: #71849e; font-size: .43rem; font-weight: 900; letter-spacing: .075em; }.admin-report-metrics strong { color: #2c3f5d; font-size: 1rem; font-weight: 900; line-height: 1; }.admin-report-metrics small { color: #8493a7; font-size: .49rem; font-weight: 650; } .admin-report-table-wrap { overflow-x: auto; padding: .72rem; }.admin-report-table { width: 100%; min-width: 52rem; border-collapse: collapse; text-align: left; }.admin-report-table th { padding: .54rem; color: #71839e; background: #f6f9fc; font-size: .45rem; font-weight: 900; letter-spacing: .065em; text-transform: uppercase; }.admin-report-table td { padding: .6rem .54rem; border-top: 1px solid #e8eef4; color: #52657f; font-size: .53rem; font-weight: 700; }.admin-report-table td strong, .admin-report-table td span, .admin-report-table td small { display: block; }.admin-report-table td strong { color: #2e4667; font-size: .57rem; font-weight: 900; }.admin-report-table td span { margin-top: .1rem; color: #497ebc; font-size: .47rem; }.admin-report-table td small { margin-top: .12rem; color: #8998aa; font-size: .46rem; }.admin-report-footnote { margin: 0; padding: 0 .8rem .75rem; color: #8796a9; font-size: .47rem; font-weight: 650; line-height: 1.45; }.admin-report-alerts { margin: 0 .72rem .78rem; padding: .7rem; border: 1px solid #eed4d9; border-radius: .62rem; background: #fffafa; }.admin-report-alerts > b { display: block; margin-bottom: .35rem; color: #a34254; font-size: .56rem; font-weight: 900; }.admin-report-alerts p { display: flex; gap: .35rem; flex-wrap: wrap; margin: .25rem 0; color: #755563; font-size: .52rem; font-weight: 650; }.admin-report-alerts p span { color: #9b8b95; }.admin-report-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }.admin-report-actions button:first-child { border-color: #b8d3e4; color: #31658d; background: #f5faff; box-shadow: none; }.admin-report-actions button:last-child { border-color: #bfdfd8; color: #167467; background: #effaf7; box-shadow: none; } @media (max-width: 1040px) { .superadmin-tab-rail { grid-template-columns: repeat(8, 9.1rem); }.admin-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) {.admin-report-intro { align-items: flex-start; flex-direction: column; }.admin-report-seal { align-self: flex-end; margin-top: -3.85rem !important; }.admin-report-controls { grid-template-columns: 1fr; }.admin-report-controls button, .admin-report-actions button { width: 100%; }.admin-report-actions { flex-direction: column; }.admin-report-metrics { grid-template-columns: 1fr 1fr; }.superadmin-tab-rail { grid-template-columns: repeat(8, 8.2rem); } } /* Završno usklađivanje: fokus ostaje čitljiv bez vanjskog titrajućeg okvira. */ button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 0 !important; outline-offset: 0; box-shadow: 0 0 0 3px rgba(54, 87, 214, .16); } .crm-focus-card { animation: none !important; } .record-form-panel { animation: none !important; } /* Promjena odabranog člana i vrste zapisa mora biti trenutačna: bez drugog učitavanja, pulsiranja ili naglašavanja cijelog radnog prostora. */ #tab_zapisnik .record-workspace, #tab_zapisnik .record-workbench, #tab_zapisnik .record-form-panel, #tab_zapisnik .record-subject-banner, #tab_zapisnik .record-action-rail { animation: none !important; transition: none !important; } /* Preglednije, grupirane obavijesti. */ #notifikacijeModal { align-items: center !important; padding: 1rem !important; } #notifikacijeModal > .crm-notification-panel { display: flex; width: min(100%, 25rem) !important; max-height: min(35rem, calc(100dvh - 2rem)) !important; min-height: min(19rem, calc(100dvh - 2rem)); flex-direction: column; overflow: hidden; padding: 0 !important; border: 1px solid rgba(185,207,229,.9) !important; border-top: 0 !important; border-radius: 1.25rem !important; background: rgba(252,254,255,.99) !important; box-shadow: 0 24px 55px rgba(28,63,108,.24), 0 3px 10px rgba(28,63,108,.08) !important; } #notifikacijeModal > .crm-notification-panel::before { content: none !important; } .crm-notification-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.6rem; padding: .9rem 1rem; color: #fff; background: linear-gradient(120deg, #143c71, #1c6688 62%, #228d86); } .crm-notification-header p { margin: 0 0 .12rem; color: #bde9e6; font-size: .51rem; font-weight: 900; letter-spacing: .105em; } .crm-notification-header h3 { margin: 0; color: #fff !important; font-size: 1rem; font-weight: 900; letter-spacing: -.02em; } .crm-notification-header button { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.24); border-radius: .65rem; color: #e9f8ff; background: rgba(255,255,255,.1); font-size: 1.2rem; font-weight: 900; line-height: 1; } .crm-notification-summary { margin: 0; padding: .58rem 1rem; border-bottom: 1px solid #e5edf6; color: #73849c; background: #f7fafc; font-size: .61rem; font-weight: 700; line-height: 1.45; } .crm-notification-list { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: .55rem; overflow-y: auto; padding: .85rem; background: linear-gradient(180deg, #fbfdff, #f5f9fe); scrollbar-color: #b7cce0 transparent; } #notifikacijeSadrzaj > div { padding: 0 !important; border: 0 !important; } #notifikacijeSadrzaj > div:first-child { border: 0 !important; } .crm-notification-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .64rem; align-items: start; padding: .68rem; border: 1px solid #dde8f2; border-radius: .82rem; color: #39516f; background: #fff; box-shadow: 0 5px 12px rgba(46,85,128,.06); } .crm-notification-item.is-pause { border-color: #c8ddd5; }.crm-notification-item.is-reward { border-color: #d6d7ef; }.crm-notification-item.is-alert { border-color: #efd6d9; }.crm-notification-item.is-access { border-color: #e5d5dd; } .crm-notification-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .65rem; color: #4f70bc; background: #edf3ff; font-size: 1rem; font-weight: 900; line-height: 1; } .is-pause .crm-notification-icon { color: #147b70; background: #e8f8f3; }.is-reward .crm-notification-icon { color: #7b55bc; background: #f0ebff; }.is-alert .crm-notification-icon { color: #bd4d5c; background: #fff0f2; }.is-access .crm-notification-icon { color: #914864; background: #faeef4; } .crm-notification-item small { display: block; margin-bottom: .17rem; color: #7890aa; font-size: .45rem; font-weight: 900; letter-spacing: .08em; } .crm-notification-item p { margin: 0; overflow-wrap: anywhere; color: #3b506c; font-size: .63rem; font-weight: 750; line-height: 1.45; } .crm-notification-item time { display: block; margin-top: .27rem; color: #91a0b3; font-size: .48rem; font-weight: 800; } .crm-notification-empty { display: grid; min-height: 100%; place-content: center; gap: .28rem; padding: 1.4rem; color: #8192a9; text-align: center; } .crm-notification-empty b { color: #40618a; font-size: .76rem; font-weight: 900; }.crm-notification-empty span { max-width: 15rem; font-size: .6rem; font-weight: 650; line-height: 1.5; } /* Naslov službenog izvještaja uvijek ostaje čitljiv na gradijentu. */ .superadmin-panel .admin-report-intro h4 { color: #fff !important; -webkit-text-fill-color: #fff; -webkit-text-stroke: 0 !important; text-shadow: none !important; } .superadmin-panel .admin-report-intro > div > span { color: #e6f2ff !important; -webkit-text-fill-color: #e6f2ff; text-shadow: none !important; } .admin-report-actions-top { justify-content: flex-start; margin: 0 0 .72rem; } @media (max-width: 720px) { #notifikacijeModal { padding: max(1rem, env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom)) !important; } #notifikacijeModal > .crm-notification-panel { max-height: min(40rem, calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important; } } /* Kontrolirani ekran rekonstrukcije, bez otkrivanja pristupnih postupaka. */ .crm-maintenance-screen { position: fixed; z-index: 250; inset: 0; display: grid; place-items: center; padding: 1.25rem; overflow: auto; color: #fff; background: radial-gradient(circle at 15% 12%, rgba(42,179,166,.28), transparent 27rem), radial-gradient(circle at 88% 85%, rgba(95,92,230,.33), transparent 30rem), linear-gradient(135deg, #101b46, #172d70 54%, #123c58); } .crm-maintenance-screen.hidden { display: none !important; } .crm-maintenance-card { position: relative; display: grid; width: min(100%, 39rem); gap: 1rem; padding: clamp(2rem, 7vw, 4rem); overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 2rem; background: rgba(10,25,67,.52); box-shadow: 0 28px 70px rgba(3,12,41,.38); backdrop-filter: blur(18px); animation: crmMaintenanceIn .4s cubic-bezier(.2,.8,.2,1) both; } .crm-maintenance-card::after { content: ''; position: absolute; width: 18rem; height: 18rem; right: -8rem; bottom: -11rem; border-radius: 50%; background: radial-gradient(circle, rgba(82,244,208,.26), transparent 67%); pointer-events: none; } .crm-maintenance-card > * { position: relative; z-index: 1; } .crm-maintenance-mark { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border: 1px solid rgba(203,255,242,.45); border-radius: 1.1rem; color: #ddfff7; background: linear-gradient(135deg, rgba(24,160,151,.8), rgba(59,102,210,.85)); font-size: .8rem; font-weight: 950; letter-spacing: .12em; } .crm-maintenance-card p { margin: .3rem 0 0; color: #8bf3df; font-size: .7rem; font-weight: 950; letter-spacing: .15em; } .crm-maintenance-card h1 { max-width: 12ch; margin: 0; color: #fff; font-size: clamp(2.25rem, 8vw, 4.4rem); font-weight: 950; letter-spacing: -.065em; line-height: .96; } .crm-maintenance-card > span:not(.crm-maintenance-mark) { max-width: 34rem; color: #d8e7f6; font-size: 1rem; font-weight: 650; line-height: 1.65; } .crm-maintenance-progress { width: min(100%, 19rem); height: .45rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.13); } .crm-maintenance-progress i { display: block; width: 46%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #66ead7, #7b8dff); animation: crmMaintenanceProgress 2.4s ease-in-out infinite; } @keyframes crmMaintenanceIn { from { opacity: 0; transform: translateY(1rem) scale(.98); } to { opacity: 1; transform: none; } } @keyframes crmMaintenanceProgress { 50% { transform: translateX(118%); } 51% { transform: translateX(-118%); } 100% { transform: translateX(0); } } /* Izvještaj može biti za cijeli tim ili odabranog administratora. */ .admin-report-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(12rem, 1.35fr) auto; } .admin-report-controls select { width: 100%; min-height: 2.48rem; padding: 0 .65rem; border: 1px solid #cfddeb; border-radius: .55rem; outline: none; color: #314964; background: #fff; font: 800 .6rem inherit; } .admin-report-controls select:focus { border-color: #268f85; box-shadow: 0 0 0 3px rgba(38,143,133,.1); } .admin-report-device-list { display: grid; gap: .34rem; min-width: 12rem; } .admin-report-device-list > span { display: grid; gap: .12rem; padding: .4rem .46rem; border: 1px solid #e0e9f2; border-radius: .52rem; background: #fbfdff; } .admin-report-device-list > span b { color: #314d70; font-size: .52rem; font-weight: 900; } .admin-report-device-list > span small { margin: 0; color: #8090a4; font-size: .45rem; font-weight: 700; } /* Izvještaji i dokumenti dijele jednu čistu, odvojenu kontrolnu površinu. */ .admin-report-mode-tabs { display: inline-flex; gap: .28rem; margin: 0 0 .82rem; padding: .26rem; border: 1px solid #d5e2ef; border-radius: .7rem; background: #f6f9fd; } .admin-report-mode-tabs button { min-height: 2.15rem; padding: 0 .78rem; border: 1px solid transparent; border-radius: .5rem; color: #627591; background: transparent; font-size: .58rem; font-weight: 900; transition: .18s ease; } .admin-report-mode-tabs button:hover { color: #236b7a; background: #ebf8f6; } .admin-report-mode-tabs button.is-active { border-color: #b8dfd8; color: #146b66; background: #fff; box-shadow: 0 3px 9px rgba(29,89,116,.1); } .admin-documents-list { display: grid; gap: .62rem; } .admin-document-card { padding: .9rem; border: 1px solid #d7e4ef; border-radius: .82rem; background: linear-gradient(135deg, #fff, #f8fbff); box-shadow: 0 7px 16px rgba(45,85,125,.05); } .admin-document-card header { display: flex; gap: .8rem; align-items: start; justify-content: space-between; } .admin-document-card header span { display: block; color: #168276; font-size: .48rem; font-weight: 950; letter-spacing: .1em; } .admin-document-card h5 { margin: .22rem 0 .1rem; color: #23456f; font-size: .78rem; font-weight: 900; } .admin-document-card header p { margin: 0; color: #74859b; font-size: .56rem; font-weight: 700; } .admin-document-card header > b { flex: 0 0 auto; padding: .34rem .45rem; border-radius: .42rem; color: #14746a; background: #e7f8f4; font-size: .46rem; font-weight: 950; letter-spacing: .08em; } .admin-document-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin: .68rem 0 .55rem; } .admin-document-meta span { padding: .32rem .46rem; border: 1px solid #dbe6f1; border-radius: .44rem; color: #5e738d; background: #fff; font-size: .52rem; font-weight: 750; } .admin-document-card details { border-top: 1px solid #e4edf5; padding-top: .5rem; } .admin-document-card summary { cursor: pointer; color: #277b74; font-size: .55rem; font-weight: 900; } .admin-document-card details p { max-width: 62rem; margin: .45rem 0 0; white-space: pre-line; color: #5d6d83; font-size: .57rem; font-weight: 650; line-height: 1.5; } @media (max-width: 720px) { .crm-maintenance-screen { padding: 1rem; } .crm-maintenance-card { padding: 2rem 1.4rem; border-radius: 1.5rem; } .crm-maintenance-card h1 { font-size: clamp(2.2rem, 13vw, 3.2rem); } .crm-maintenance-card > span:not(.crm-maintenance-mark) { font-size: .92rem; } .admin-report-controls { grid-template-columns: 1fr; } .admin-report-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .admin-document-card header { align-items: flex-start; flex-direction: column; } .admin-document-card header > b { align-self: flex-start; } } /* Privremeni pristup kreira se samo za administratore koji još nisu aktivirali račun. */ .superadmin-temp-access { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .8rem; padding: .8rem .9rem; border: 1px solid #c8e3de; border-radius: .78rem; background: linear-gradient(120deg, #effaf8, #f5f8ff); } .superadmin-temp-access > div { display: grid; gap: .14rem; min-width: 0; } .superadmin-temp-access p { margin: 0; color: #168479; font-size: .46rem; font-weight: 950; letter-spacing: .11em; } .superadmin-temp-access h4 { margin: 0; color: #294964; font-size: .76rem; font-weight: 900; } .superadmin-temp-access span { max-width: 40rem; color: #74869c; font-size: .54rem; font-weight: 650; line-height: 1.46; } .superadmin-temp-access button { min-height: 2.45rem; flex: 0 0 auto; padding: 0 .74rem; border: 1px solid #218e88; border-radius: .58rem; color: #fff; background: linear-gradient(135deg, #1e9489, #416fca); box-shadow: 0 7px 14px rgba(28,125,120,.14); font-size: .56rem; font-weight: 900; white-space: nowrap; } .superadmin-temp-access button:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); } .superadmin-temp-access button:disabled { cursor: wait; opacity: .65; } @media (max-width: 720px) { .superadmin-temp-access { align-items: stretch; flex-direction: column; } .superadmin-temp-access button { width: 100%; } } /* ============================================================================ REDIZAJN 3.0 — "Svježina" Sloj koji nadograđuje postojeći izgled bez mijenjanja palete. Boje ostaju: #3657d6 / #223aa7 / #17213a / #0d9d91 / #6d54db. Sve animacije poštuju prefers-reduced-motion na kraju datoteke. ========================================================================== */ :root { --rd-brzo: .18s; --rd-srednje: .32s; --rd-sporo: .55s; --rd-krivulja: cubic-bezier(.22, .61, .36, 1); --rd-odskok: cubic-bezier(.34, 1.56, .64, 1); --rd-sjena-1: 0 1px 2px rgba(23, 33, 58, .05), 0 4px 12px rgba(23, 33, 58, .05); --rd-sjena-2: 0 2px 6px rgba(23, 33, 58, .06), 0 12px 28px rgba(23, 33, 58, .09); --rd-sjena-3: 0 6px 14px rgba(23, 33, 58, .08), 0 22px 48px rgba(23, 33, 58, .13); --rd-plava-sjaj: rgba(54, 87, 214, .16); --rd-tirkiz: #0d9d91; --rd-ljubicasta: #6d54db; } /* --- 1. Koreografija ulaska ------------------------------------------------ */ @keyframes rd-ulaz { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes rd-ulaz-bocno { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } } @keyframes rd-sjaj-prelaz { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(240%) skewX(-18deg); } } @keyframes rd-treperenje { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes rd-plutanje { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } } @keyframes rd-aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes rd-skeleton { from { background-position: -420px 0; } to { background-position: 420px 0; } } @keyframes rd-puls-prsten { 0% { box-shadow: 0 0 0 0 var(--rd-plava-sjaj); } 70% { box-shadow: 0 0 0 12px rgba(54, 87, 214, 0); } 100% { box-shadow: 0 0 0 0 rgba(54, 87, 214, 0); } } /* Stupnjevani ulazak stavki u listama — indeks postavlja skripta. */ .rd-stupnjevano > * { animation: rd-ulaz var(--rd-srednje) var(--rd-krivulja) backwards; animation-delay: calc(var(--rd-i, 0) * 45ms); } /* --- 2. Naslovni blok (hero) ---------------------------------------------- */ .crm-hero { position: relative; overflow: hidden; background-size: 220% 220%; animation: rd-aurora 18s ease-in-out infinite; box-shadow: var(--rd-sjena-3); } .crm-hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 32%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .17), transparent); animation: rd-sjaj-prelaz 7s var(--rd-krivulja) infinite; } .crm-hero-copy > * { animation: rd-ulaz var(--rd-sporo) var(--rd-krivulja) backwards; } .crm-hero-copy > *:nth-child(1) { animation-delay: .05s; } .crm-hero-copy > *:nth-child(2) { animation-delay: .12s; } .crm-hero-copy > *:nth-child(3) { animation-delay: .19s; } .crm-hero-copy > *:nth-child(4) { animation-delay: .26s; } .crm-hero-copy > *:nth-child(5) { animation-delay: .33s; } .crm-hero-orb { animation: rd-plutanje 7.5s ease-in-out infinite; } .crm-live span { animation: rd-treperenje 2.2s ease-in-out infinite; } .crm-workspace-hero { position: relative; overflow: hidden; animation: rd-ulaz var(--rd-srednje) var(--rd-krivulja) backwards; } .crm-workspace-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .16), transparent 55%); } /* --- 3. Metričke kartice --------------------------------------------------- */ .crm-metric-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 1rem; box-shadow: var(--rd-sjena-1); transition: transform var(--rd-brzo) var(--rd-krivulja), box-shadow var(--rd-brzo) var(--rd-krivulja), border-color var(--rd-brzo) var(--rd-krivulja); animation: rd-ulaz var(--rd-srednje) var(--rd-krivulja) backwards; animation-delay: calc(var(--metric-index, 0) * 70ms); } .crm-metric-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: linear-gradient(135deg, rgba(54, 87, 214, .07), rgba(109, 84, 219, .07)); transition: opacity var(--rd-srednje) var(--rd-krivulja); } .crm-metric-card:hover { transform: translateY(-4px); box-shadow: var(--rd-sjena-2); border-color: rgba(54, 87, 214, .28); } .crm-metric-card:hover::before { opacity: 1; } .crm-metric-card:active { transform: translateY(-1px) scale(.995); } .crm-metric-card strong { font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .crm-metric-icon { transition: transform var(--rd-srednje) var(--rd-odskok); } .crm-metric-card:hover .crm-metric-icon { transform: scale(1.1) rotate(-5deg); } .crm-metric-arrow { transition: transform var(--rd-srednje) var(--rd-krivulja), opacity var(--rd-brzo) linear; opacity: .45; } .crm-metric-card:hover .crm-metric-arrow { transform: translateX(5px); opacity: 1; } /* --- 4. Navigacija --------------------------------------------------------- */ #appSection aside nav button { position: relative; overflow: hidden; transition: background-color var(--rd-brzo) var(--rd-krivulja), color var(--rd-brzo) var(--rd-krivulja), transform var(--rd-brzo) var(--rd-krivulja); } #appSection aside nav button::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--crm-primary), var(--rd-ljubicasta)); transform: translateY(-50%); transition: height var(--rd-srednje) var(--rd-odskok); } #appSection aside nav button.tab-active::before { height: 62%; } #appSection aside nav button:hover { transform: translateX(3px); } #appSection aside nav button svg { transition: transform var(--rd-srednje) var(--rd-odskok); } #appSection aside nav button:hover svg { transform: scale(1.13); } .crm-mobile-dock button { transition: transform var(--rd-brzo) var(--rd-krivulja), color var(--rd-brzo) linear; } .crm-mobile-dock button svg { transition: transform var(--rd-srednje) var(--rd-odskok); } .crm-mobile-dock button:active svg { transform: scale(1.2) translateY(-2px); } /* --- 5. Dugmad ------------------------------------------------------------- */ .crm-primary-action, .record-submit, .superadmin-save-button, .template-create-button, .blacklist-add-button { position: relative; overflow: hidden; transition: transform var(--rd-brzo) var(--rd-krivulja), box-shadow var(--rd-brzo) var(--rd-krivulja), filter var(--rd-brzo) linear; } .crm-primary-action::after, .record-submit::after, .superadmin-save-button::after, .template-create-button::after, .blacklist-add-button::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent); transform: translateX(-140%) skewX(-18deg); } .crm-primary-action:hover::after, .record-submit:hover::after, .superadmin-save-button:hover::after, .template-create-button:hover::after, .blacklist-add-button:hover::after { opacity: 1; animation: rd-sjaj-prelaz .85s var(--rd-krivulja); } .crm-primary-action:active, .record-submit:active, .superadmin-save-button:active, .template-create-button:active, .blacklist-add-button:active { transform: scale(.975); } .record-submit b { transition: transform var(--rd-srednje) var(--rd-odskok); } .record-submit:hover b { transform: translateX(5px); } /* Val na dodir — element ubacuje skripta. */ .rd-val { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); background: rgba(255, 255, 255, .45); animation: rd-val-sirenje .55s var(--rd-krivulja) forwards; } @keyframes rd-val-sirenje { to { transform: scale(2.6); opacity: 0; } } /* --- 6. Polja za unos ------------------------------------------------------ */ .input-clean, .record-field input, .record-field select, .record-field textarea, .superadmin-search-row input, .register-field input, .register-field select { transition: border-color var(--rd-brzo) var(--rd-krivulja), box-shadow var(--rd-srednje) var(--rd-krivulja), background-color var(--rd-brzo) linear; } .input-clean:focus, .record-field input:focus, .record-field select:focus, .record-field textarea:focus, .superadmin-search-row input:focus, .register-field input:focus, .register-field select:focus { border-color: var(--crm-primary); box-shadow: 0 0 0 4px var(--rd-plava-sjaj); outline: none; } /* --- 7. Kartice i liste ---------------------------------------------------- */ .superadmin-member-grid > *, .register-note-list > *, .register-case-grid > *, .blacklist-case-grid > *, .template-card-grid > *, .register-status-list > * { transition: transform var(--rd-brzo) var(--rd-krivulja), box-shadow var(--rd-brzo) var(--rd-krivulja), border-color var(--rd-brzo) var(--rd-krivulja); } .superadmin-member-grid > *:hover, .register-note-list > *:hover, .register-case-grid > *:hover, .blacklist-case-grid > *:hover, .template-card-grid > *:hover, .register-status-list > *:hover { transform: translateY(-3px); box-shadow: var(--rd-sjena-2); border-color: rgba(54, 87, 214, .26); } .timeline-container > * { animation: rd-ulaz var(--rd-srednje) var(--rd-krivulja) backwards; animation-delay: calc(var(--rd-i, 0) * 60ms); } /* --- 8. Učitavanje: pulsirajući okvir umjesto golog teksta ------------------ */ .register-empty-state, .superadmin-empty-state, .blacklist-empty-state, .template-empty-state { position: relative; overflow: hidden; border-radius: .9rem; } .rd-skeleton { background: linear-gradient(90deg, #eef1f8 25%, #f8fafd 50%, #eef1f8 75%); background-size: 420px 100%; animation: rd-skeleton 1.4s linear infinite; border-radius: .75rem; } /* --- 9. Bočni tabovi SuperAdmina i registara ------------------------------- */ .superadmin-tab-rail button, .registers-nav button, .record-action-list button { position: relative; transition: transform var(--rd-brzo) var(--rd-krivulja), background-color var(--rd-brzo) linear, border-color var(--rd-brzo) linear, box-shadow var(--rd-brzo) var(--rd-krivulja); } .superadmin-tab-rail button:hover, .registers-nav button:hover, .record-action-list button:hover { transform: translateY(-2px); box-shadow: var(--rd-sjena-1); } .superadmin-tab-rail button.is-active, .registers-nav button.is-active, .record-action-list button.is-active { animation: rd-puls-prsten 1.6s var(--rd-krivulja) 1; } .superadmin-panel:not(.hidden), .register-panel:not(.hidden) { animation: rd-ulaz var(--rd-srednje) var(--rd-krivulja); } /* --- 10. Modali i obavijesti ---------------------------------------------- */ .fade-enter { animation: rd-ulaz var(--rd-srednje) var(--rd-krivulja); } #toastContainer > div { animation: rd-ulaz-bocno var(--rd-srednje) var(--rd-odskok); box-shadow: var(--rd-sjena-2); border-left: 3px solid var(--crm-primary); } /* --- 11. Traka za skrolanje ----------------------------------------------- */ .custom-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #cbd5e1, #a7b4c8); border-radius: 6px; transition: background var(--rd-brzo) linear; } .custom-scroll::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--crm-primary), var(--crm-primary-dark)); }.admin-chat-fab { transition: transform var(--rd-srednje) var(--rd-odskok), box-shadow var(--rd-srednje) var(--rd-krivulja); }.admin-chat-fab:hover { transform: translateY(-4px) scale(1.06); box-shadow: var(--rd-sjena-3); } .admin-chat-badge { animation: rd-puls-prsten 2s var(--rd-krivulja) infinite; } /* --- 13. Poštivanje postavke smanjenog gibanja ----------------------------- */ @media (prefers-reduced-motion: reduce) { .crm-hero, .crm-hero::after, .crm-hero-orb, .crm-live span, .admin-chat-badge, .rd-skeleton, .superadmin-tab-rail button.is-active, .registers-nav button.is-active, .record-action-list button.is-active { animation: none !important; } .rd-stupnjevano > *, .crm-hero-copy > *, .crm-metric-card, .timeline-container > *, .crm-workspace-hero, .superadmin-panel:not(.hidden), .register-panel:not(.hidden), .fade-enter, #toastContainer > div { animation: none !important; opacity: 1 !important; transform: none !important; }.crm-metric-card:hover, .superadmin-member-grid > *:hover, .register-note-list > *:hover, .register-case-grid > *:hover, .blacklist-case-grid > *:hover, .template-card-grid > *:hover, .register-status-list > *:hover, .admin-chat-fab:hover, #appSection aside nav button:hover { transform: none !important; } } /* --- 14. Tipografija: opuštanje prezbijenog razmaka slova ------------------- Naslovi su imali letter-spacing do -.065em, što na 3.4rem stapa riječi ("Vaš tim." se čitalo kao "Vaštim."). Ostaje moderno zbijeno, ali čitljivo. */ .crm-hero h2, #tab_zapisnik h2, #tab_pregledRegistri h2, #tab_dosje h2, #tab_crnalista h2, #tab_sablone h2, #tab_superadmin h2, .crm-login-brand-copy h1, .crm-login-form-heading h2, .record-page-intro h2, .blacklist-hero h2, .video-room-hero h2, .crm-maintenance-card h1, .dossier-page-intro h2, .registers-hero h2, .template-studio-hero h2, .superadmin-identity h2 { letter-spacing: -.028em !important; word-spacing: .04em; } .register-summary-card strong, .blacklist-stat-card strong, .crm-metric-card strong { letter-spacing: -.03em !important; font-variant-numeric: tabular-nums; } /* Naslovi dobivaju blagi gradijentni potpis umjesto plošne bijele boje. */ .crm-hero h2 em, .record-page-intro h2 em, .blacklist-hero h2 em { position: relative; } .crm-hero h2 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(184, 234, 255, .85), rgba(184, 234, 255, 0)); transform-origin: left; animation: rd-crta-ulaz .9s var(--rd-krivulja) .35s backwards; } @keyframes rd-crta-ulaz { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .crm-hero h2 em::after { animation: none !important; } } /* --- 15. SuperAdmin → Rođendani -------------------------------------------- */ .rodendan-dijeljenje { margin: 1.1rem 0; padding: 1.15rem 1.2rem; border: 1px solid var(--crm-line); border-radius: 1.05rem; background: linear-gradient(125deg, rgba(54, 87, 214, .05), rgba(13, 157, 145, .05)); animation: rd-ulaz var(--rd-srednje) var(--rd-krivulja); } .rodendan-dijeljenje-glava p { margin: 0 0 .2rem; font-size: .62rem; font-weight: 900; letter-spacing: .12em; color: var(--crm-primary); } .rodendan-dijeljenje-glava h4 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 900; color: var(--crm-ink); } .rodendan-dijeljenje-glava span { display: block; margin-bottom: .9rem; font-size: .76rem; font-weight: 500; line-height: 1.55; color: var(--crm-muted); } .rodendan-dijeljenje-red { display: flex; gap: .55rem; flex-wrap: wrap; } .rodendan-dijeljenje-red input { flex: 1 1 15rem; min-width: 0; padding: .78rem .9rem; font-family: inherit; font-size: .8rem; font-weight: 700; color: var(--crm-ink); background: #fff; border: 1.5px solid var(--crm-line); border-radius: .75rem; outline: none; } .rodendan-dijeljenje-red input:focus { border-color: var(--crm-primary); box-shadow: 0 0 0 4px var(--rd-plava-sjaj); } .rodendan-dijeljenje-red button { flex: 0 0 auto; padding: .78rem 1.3rem; font-family: inherit; font-size: .75rem; font-weight: 900; color: #fff; background: linear-gradient(100deg, var(--crm-primary), var(--rd-ljubicasta)); border: 0; border-radius: .75rem; cursor: pointer; transition: transform var(--rd-brzo) var(--rd-krivulja), box-shadow var(--rd-brzo) var(--rd-krivulja); } .rodendan-dijeljenje-red button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(54, 87, 214, .25); } .rodendan-dijeljenje-red button:active { transform: scale(.97); } .rodendan-otvori { display: inline-block; margin-top: .75rem; font-size: .73rem; font-weight: 800; color: var(--crm-primary); text-decoration: none; transition: color var(--rd-brzo) linear, transform var(--rd-brzo) var(--rd-krivulja); } .rodendan-otvori:hover { color: var(--crm-primary-dark); transform: translateX(3px); } .rodendan-stupci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.1rem; } .rodendan-stupac { padding: 1.05rem 1.1rem; border: 1px solid var(--crm-line); border-radius: 1.05rem; background: var(--crm-panel); box-shadow: var(--rd-sjena-1); } .rodendan-stupac-glava { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .85rem; } .rodendan-stupac-glava p { margin: 0 0 .18rem; font-size: .6rem; font-weight: 900; letter-spacing: .12em; color: var(--crm-muted); } .rodendan-stupac-glava h4 { margin: 0; font-size: .92rem; font-weight: 900; color: var(--crm-ink); } .rodendan-stupac-glava > span { flex-shrink: 0; padding: .28rem .6rem; font-size: .72rem; font-weight: 900; color: var(--crm-primary); background: rgba(54, 87, 214, .1); border-radius: .5rem; } .rodendan-lista { display: flex; flex-direction: column; gap: .5rem; max-height: 24rem; overflow-y: auto; } .rodendan-stavka { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border: 1px solid var(--crm-line); border-radius: .8rem; background: #fbfcfe; transition: transform var(--rd-brzo) var(--rd-krivulja), border-color var(--rd-brzo) linear, box-shadow var(--rd-brzo) var(--rd-krivulja); } .rodendan-stavka:hover { transform: translateY(-2px); border-color: rgba(54, 87, 214, .26); box-shadow: var(--rd-sjena-1); } .rodendan-inicijal { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; font-size: .78rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--crm-primary), var(--rd-ljubicasta)); border-radius: 50%; } .rodendan-stavka > div { min-width: 0; } .rodendan-stavka b { display: block; font-size: .8rem; font-weight: 800; color: var(--crm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rodendan-stavka small { font-size: .68rem; font-weight: 600; color: var(--crm-muted); } .rodendan-datum { margin-left: auto; flex-shrink: 0; padding: .26rem .55rem; font-size: .7rem; font-weight: 900; color: var(--rd-tirkiz); background: rgba(13, 157, 145, .1); border-radius: .45rem; white-space: nowrap; } .rodendan-stavka-nedostaje .rodendan-inicijal { background: linear-gradient(135deg, #98a6bd, #7b8aa3); } .rodendan-datum-prazan { color: var(--crm-muted); background: #eef1f6; } @media (max-width: 900px) { .rodendan-stupci { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .rodendan-dijeljenje { animation: none !important; } .rodendan-stavka:hover, .rodendan-dijeljenje-red button:hover, .rodendan-otvori:hover { transform: none !important; } } /* Traka SuperAdmin tabova bila je fiksirana na 8 stupaca, pa je deveta stavka padala u novi red. Sada stavke uvijek ostaju u jednom redu, a traka se vodoravno pomiče — dodavanje novih tabova više ne lomi raspored. */ .superadmin-tab-rail { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(7.7rem, 1fr); scrollbar-width: thin; } /* --- 16. Sigurnosna mreža za duge riječi ----------------------------------- Opušteniji razmak slova (odjeljak 14.) čini naslove širima, pa duga hrvatska riječ ("poboljšanjima.") može prijeći rub kartice na uskom zaslonu. Naslovi se sada smiju prelomiti, a najveći se dodatno smanjuju. */ .crm-hero h2, .crm-maintenance-card h1, .crm-login-brand-copy h1, .crm-login-form-heading h2, .record-page-intro h2, .blacklist-hero h2, .video-room-hero h2, .dossier-page-intro h2, .registers-hero h2, .template-studio-hero h2, .superadmin-identity h2, #tab_zapisnik h2, #tab_pregledRegistri h2, #tab_dosje h2, #tab_crnalista h2, #tab_sablone h2, #tab_superadmin h2 { overflow-wrap: break-word; word-break: normal; hyphens: auto; } @media (max-width: 460px) { .crm-maintenance-card h1 { font-size: clamp(1.7rem, 9vw, 2.45rem) !important; } .crm-hero h2 { font-size: clamp(1.85rem, 10vw, 2.75rem) !important; } } /* ============================================================================ REKONSTRUKCIJA 4.0 — samostalni rad Aplikaciju vodi jedan administrator, pa je težište premješteno s pregleda podataka na pripremu obavijesti za tim. Nova navigacija, novi brifing, drukčije posložene forme. Paleta ostaje ista. ========================================================================== */ /* --- 1. Navigacija: grupe umjesto ravnog popisa ---------------------------- */ .crm-nav { display: flex; flex-direction: column; gap: .18rem; } .crm-nav-grupa { margin: 1.15rem 0 .4rem; padding: 0 .85rem; font-size: .58rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; color: #7b88b8 !important; } .crm-nav-grupa:first-child { margin-top: .2rem; } .crm-nav-grupa-master { color: #f0a8b2 !important; } #appSection > aside nav button.crm-nav-item { position: relative; display: grid; grid-template-columns: 1.55rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; width: 100%; padding: .68rem .85rem; border-radius: .72rem; font-size: .8rem; font-weight: 700; text-align: left; transition: background-color var(--rd-brzo) var(--rd-krivulja), color var(--rd-brzo) var(--rd-krivulja), transform var(--rd-brzo) var(--rd-krivulja); } #appSection > aside nav button.crm-nav-item svg { width: 1.15rem; height: 1.15rem; padding: 0; background: none !important; justify-self: center; transition: transform var(--rd-srednje) var(--rd-odskok); } #appSection > aside nav button.crm-nav-item:hover { transform: translateX(3px); } #appSection > aside nav button.crm-nav-item:hover svg { transform: scale(1.14); } #appSection > aside nav button.crm-nav-item.tab-active svg { transform: none; background: none !important; } #appSection > aside nav button.crm-nav-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #appSection > aside nav button.crm-nav-item-opasno.tab-inactive { color: #f2a9b0 !important; } #appSection > aside nav button.crm-nav-item-opasno:hover { background: rgba(255, 120, 133, .13) !important; color: #ffd4d8 !important; } #appSection > aside nav button.crm-nav-item-master.tab-inactive { color: #ffc7cd !important; } #appSection > aside nav button.crm-nav-item-master.tab-active { background: linear-gradient(135deg, rgba(214, 74, 96, .92), rgba(163, 45, 70, .92)) !important; border-color: rgba(255, 176, 188, .3) !important; } .crm-nav-bedz { display: grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; font-size: .62rem; font-style: normal; font-weight: 900; color: #fff; background: linear-gradient(135deg, #f0596d, #d1354f); border-radius: 999px; } .crm-nav-bedz.hidden { display: none; } /* --- 2. Dnevni brifing: zaglavlje ------------------------------------------ */ .brief-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.6rem; overflow: hidden; margin-bottom: 1.9rem; padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: 1.4rem; color: #fff; background: linear-gradient(128deg, #22347f 0%, #3657d6 48%, #5b48c9 100%); background-size: 190% 190%; animation: rd-aurora 20s ease-in-out infinite; box-shadow: var(--rd-sjena-3); } .brief-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 88% 6%, rgba(255, 255, 255, .2), transparent 52%); } .brief-hero-copy { position: relative; z-index: 1; } .brief-hero-copy > * { animation: rd-ulaz var(--rd-sporo) var(--rd-krivulja) backwards; } .brief-hero-copy > *:nth-child(2) { animation-delay: .07s; } .brief-hero-copy > *:nth-child(3) { animation-delay: .13s; } .brief-hero-copy > *:nth-child(4) { animation-delay: .19s; } .brief-hero-copy > *:nth-child(5) { animation-delay: .25s; } .brief-live { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: .34rem .8rem .34rem .6rem; font-size: .64rem; font-weight: 800; letter-spacing: .06em; color: #d8e3ff; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; } .brief-live span { width: .48rem; height: .48rem; border-radius: 50%; background: #6ee7c8; box-shadow: 0 0 0 3px rgba(110, 231, 200, .22); animation: rd-treperenje 2.2s ease-in-out infinite; } .brief-eyebrow { margin: 0 0 .35rem; font-size: .64rem; font-weight: 900; letter-spacing: .19em; color: #b9c8ff; } .brief-hero h2 { margin: 0 0 .55rem; font-size: clamp(1.6rem, 3.1vw, 2.5rem); font-weight: 900; letter-spacing: -.028em; line-height: 1.06; } .brief-hero h2::first-letter { text-transform: uppercase; } .brief-hero-opis { max-width: 30rem; margin: 0 0 1.35rem; font-size: .85rem; font-weight: 500; line-height: 1.6; color: rgba(233, 238, 255, .84); } .brief-hero-akcije { display: flex; flex-wrap: wrap; gap: .6rem; } .brief-primary, .brief-secondary { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .55rem; padding: .82rem 1.25rem; font-family: inherit; font-size: .78rem; font-weight: 900; border-radius: .8rem; cursor: pointer; transition: transform var(--rd-brzo) var(--rd-krivulja), box-shadow var(--rd-brzo) var(--rd-krivulja), background-color var(--rd-brzo) linear; } .brief-primary { color: #223aa7; background: #fff; border: 0; box-shadow: 0 12px 24px rgba(6, 16, 60, .26); } .brief-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(6, 16, 60, .34); } .brief-secondary { color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); } .brief-secondary:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); } .brief-primary:active, .brief-secondary:active { transform: scale(.97); } .brief-primary svg, .brief-secondary svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .brief-hero-sazetak { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; align-content: center; } .brief-brojka { padding: .85rem .9rem; border-radius: .9rem; background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .16); animation: rd-ulaz var(--rd-srednje) var(--rd-krivulja) backwards; } .brief-brojka:nth-child(2) { animation-delay: .06s; } .brief-brojka:nth-child(3) { animation-delay: .12s; } .brief-brojka:nth-child(4) { animation-delay: .18s; } .brief-brojka:nth-child(5) { animation-delay: .24s; } .brief-brojka:nth-child(6) { animation-delay: .3s; } .brief-brojka.je-aktivna { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .34); } .brief-brojka span { display: block; font-size: .55rem; font-weight: 900; letter-spacing: .13em; color: rgba(214, 225, 255, .8); } .brief-brojka strong { display: block; margin: .15rem 0; font-size: 1.65rem; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .brief-brojka small { font-size: .6rem; font-weight: 600; color: rgba(214, 225, 255, .72); } /* --- 3. Kartice generiranih poruka ----------------------------------------- */ .brief-section-heading { margin-bottom: 1rem; } .brief-generatori { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: .9rem; margin-bottom: 2.2rem; } .brief-ucitavanje { grid-column: 1 / -1; padding: 2.2rem; text-align: center; font-size: .8rem; font-weight: 700; color: var(--crm-muted); background: var(--crm-panel); border: 1px dashed var(--crm-line); border-radius: 1rem; } .brief-kartica { display: flex; flex-direction: column; padding: 1.05rem 1.1rem 1rem; background: var(--crm-panel); border: 1px solid var(--crm-line); border-radius: 1.05rem; box-shadow: var(--rd-sjena-1); animation: rd-ulaz var(--rd-srednje) var(--rd-krivulja) backwards; transition: transform var(--rd-brzo) var(--rd-krivulja), box-shadow var(--rd-brzo) var(--rd-krivulja), border-color var(--rd-brzo) var(--rd-krivulja); } .brief-kartica:hover { transform: translateY(-3px); box-shadow: var(--rd-sjena-2); border-color: rgba(54, 87, 214, .26); } .brief-kartica.je-prazna { background: #fbfcfe; box-shadow: none; } .brief-kartica.je-istaknuta { border-color: rgba(54, 87, 214, .38); box-shadow: 0 0 0 3px rgba(54, 87, 214, .08), var(--rd-sjena-1); } .brief-kartica header { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; } .brief-ikona { display: grid; place-items: center; flex-shrink: 0; width: 2.35rem; height: 2.35rem; font-size: 1.15rem; background: linear-gradient(135deg, rgba(54, 87, 214, .1), rgba(109, 84, 219, .12)); border-radius: .68rem; } .brief-kartica.je-prazna .brief-ikona { filter: grayscale(.75); opacity: .6; } .brief-kartica-naslov { min-width: 0; flex: 1; } .brief-kartica-naslov p { margin: 0; font-size: .55rem; font-weight: 900; letter-spacing: .14em; color: var(--crm-primary); } .brief-kartica.je-prazna .brief-kartica-naslov p { color: var(--crm-muted); } .brief-kartica-naslov h4 { margin: .1rem 0 0; font-size: .92rem; font-weight: 900; letter-spacing: -.015em; color: var(--crm-ink); } .brief-broj { display: grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .5rem; font-size: .85rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--crm-primary); background: rgba(54, 87, 214, .1); border-radius: .55rem; } .brief-kartica.je-prazna .brief-broj { color: var(--crm-muted); background: #eef1f6; } .brief-kartica-opis { margin: 0 0 .7rem; font-size: .72rem; font-weight: 500; line-height: 1.5; color: var(--crm-muted); } .brief-popis { flex: 1; margin: 0 0 .85rem; padding: .6rem .75rem; list-style: none; background: #f7f9fd; border-radius: .7rem; } .brief-popis li { padding: .22rem 0; font-size: .74rem; font-weight: 700; color: #2c3a55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brief-popis li + li { border-top: 1px solid #eaeff8; } .brief-popis .brief-jos { font-weight: 600; color: var(--crm-muted); } .brief-prazno { flex: 1; margin: 0 0 .85rem; padding: .7rem .75rem; font-size: .73rem; font-weight: 600; color: var(--crm-muted); background: #f7f9fd; border-radius: .7rem; } .brief-kartica footer { margin-top: auto; } .brief-kopiraj { width: 100%; padding: .68rem 1rem; font-family: inherit; font-size: .74rem; font-weight: 900; color: #fff; background: linear-gradient(100deg, var(--crm-primary), var(--rd-ljubicasta)); border: 0; border-radius: .7rem; cursor: pointer; transition: transform var(--rd-brzo) var(--rd-krivulja), box-shadow var(--rd-brzo) var(--rd-krivulja), filter var(--rd-brzo) linear; } .brief-kopiraj:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(54, 87, 214, .26); } .brief-kopiraj:active { transform: scale(.97); } .brief-kartica.je-prazna .brief-kopiraj { background: #e9edf5; color: var(--crm-muted); } .brief-kartica.je-prazna .brief-kopiraj:hover { transform: none; box-shadow: none; filter: brightness(.98); } .brief-ploca-akcija { display: flex; justify-content: flex-end; margin-bottom: 1rem; } /* --- 4. Uži zasloni --------------------------------------------------------- */ @media (max-width: 1080px) { .brief-hero { grid-template-columns: minmax(0, 1fr); } .brief-hero-sazetak { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .brief-hero { padding: 1.35rem 1.2rem; border-radius: 1.15rem; } .brief-hero-sazetak { grid-template-columns: repeat(3, minmax(0, 1fr)); } .brief-hero-akcije { flex-direction: column; } .brief-primary, .brief-secondary { justify-content: center; width: 100%; } .brief-generatori { grid-template-columns: minmax(0, 1fr); gap: .75rem; } .brief-ploca-akcija .crm-primary-action { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .brief-hero, .brief-live span { animation: none !important; } .brief-hero-copy > *, .brief-brojka, .brief-kartica { animation: none !important; } .brief-kartica:hover, .brief-kopiraj:hover, .brief-primary:hover, .brief-secondary:hover, #appSection > aside nav button.crm-nav-item:hover { transform: none !important; } } /* --- 5. Odabir vrste odsutnosti u zapisniku -------------------------------- */ .record-vrsta-blok { grid-column: 1 / -1; margin-bottom: .3rem; } .record-vrsta-oznaka { display: block; margin: 0 0 .5rem .1rem; font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; color: #8b98ad; } .record-vrsta-izbor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; } .record-vrsta { display: flex; align-items: center; gap: .65rem; padding: .78rem .85rem; font-family: inherit; text-align: left; background: #f7f9fd; border: 1.5px solid var(--record-line, #dbe3ef); border-radius: .8rem; cursor: pointer; transition: border-color var(--rd-brzo) var(--rd-krivulja), background-color var(--rd-brzo) var(--rd-krivulja), transform var(--rd-brzo) var(--rd-krivulja), box-shadow var(--rd-brzo) var(--rd-krivulja); } .record-vrsta:hover { transform: translateY(-2px); border-color: rgba(54, 87, 214, .3); box-shadow: var(--rd-sjena-1); } .record-vrsta:active { transform: scale(.985); } .record-vrsta.is-active { background: linear-gradient(125deg, rgba(54, 87, 214, .1), rgba(109, 84, 219, .09)); border-color: var(--crm-primary); box-shadow: 0 0 0 3px rgba(54, 87, 214, .12); } .record-vrsta b { display: grid; place-items: center; flex-shrink: 0; width: 2.1rem; height: 2.1rem; font-size: 1.05rem; background: #fff; border-radius: .58rem; box-shadow: 0 2px 6px rgba(23, 33, 58, .07); } .record-vrsta span { display: grid; min-width: 0; } .record-vrsta strong { font-size: .78rem; font-weight: 900; color: var(--record-ink, #15233f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .record-vrsta small { font-size: .64rem; font-weight: 600; color: var(--record-muted, #6b7a95); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .record-vrsta.is-active strong { color: var(--crm-primary-dark); } @media (max-width: 860px) { .record-vrsta-izbor { grid-template-columns: minmax(0, 1fr); } .record-vrsta small { white-space: normal; } } @media (prefers-reduced-motion: reduce) { .record-vrsta:hover { transform: none !important; } } /* --- 7. Ispravak naslijeđenih boja naslova --------------------------------- Globalno pravilo `#appSection #glavniScrollKontejner :is(h2,h3,h4)` boji sve naslove u plavo i dodaje bijelu sjenu. Na tamnom brifingu to je izgledalo kao precrtan tekst, a naslovi kartica nisu dobivali svoju boju. */ #appSection #glavniScrollKontejner .brief-hero :is(h2, h3, h4) { color: #fff !important; -webkit-text-fill-color: #fff; text-shadow: 0 2px 16px rgba(5, 20, 57, .3) !important; } #appSection #glavniScrollKontejner .brief-hero :is(p, span, small, strong, b) { text-shadow: none !important; } #appSection #glavniScrollKontejner .brief-kartica h4 { color: var(--crm-ink) !important; -webkit-text-fill-color: var(--crm-ink); text-shadow: none !important; } #appSection #glavniScrollKontejner .brief-kartica.je-prazna h4 { color: var(--crm-muted) !important; -webkit-text-fill-color: #7b889e; } #appSection #glavniScrollKontejner .rodendan-stupac h4, #appSection #glavniScrollKontejner .rodendan-dijeljenje-glava h4 { color: var(--crm-ink) !important; -webkit-text-fill-color: var(--crm-ink); text-shadow: none !important; } /* Na mobitelu kartice s porukama moraju biti nadohvat, pa je zaglavlje zbijeno. */ @media (max-width: 720px) { .brief-hero { gap: 1rem; margin-bottom: 1.25rem; padding: 1.15rem 1.05rem; } .brief-live { margin-bottom: .7rem; padding: .28rem .7rem .28rem .55rem; font-size: .6rem; } .brief-hero h2 { font-size: clamp(1.35rem, 6.4vw, 1.75rem); } .brief-hero-opis { margin-bottom: 1rem; font-size: .8rem; } .brief-hero-akcije { flex-direction: row; gap: .5rem; } .brief-primary, .brief-secondary { flex: 1 1 0; min-width: 0; padding: .72rem .8rem; font-size: .72rem; } .brief-secondary span, .brief-primary span { min-width: 0; } .brief-hero-sazetak { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; } .brief-brojka { padding: .55rem .45rem; border-radius: .7rem; text-align: center; } .brief-brojka span { font-size: .48rem; letter-spacing: .08em; } .brief-brojka strong { margin: .1rem 0 0; font-size: 1.2rem; } .brief-brojka small { display: none; } } @media (max-width: 400px) { .brief-primary, .brief-secondary { font-size: .68rem; padding: .7rem .55rem; } .brief-primary svg, .brief-secondary svg { display: none; } } /* ============================================================================ TAMNI MOD SA ZLATNIM NAGLASCIMA Uključuje se klasom `tema-tamna` na ; izbor se pamti u pregledniku. Prvi dio su ručno pisani temelji, drugi je sloj izveden iz svijetle teme. ========================================================================== */ body.tema-tamna { --t-bg: #0d1016; --t-panel: #161b23; --t-panel-2: #1b212b; --t-panel-3: #232a36; --t-line: #2b3341; --t-line-2: #3a4454; --t-text: #e9ecf3; --t-text-2: #c3cad6; --t-muted: #8f9aad; --t-zlato: #d4af37; --t-zlato-svijetlo: #f0d98c; --t-zlato-tamno: #a9822a; --t-zlato-mekano: rgba(212, 175, 55, .12); --crm-ink: var(--t-text); --crm-muted: var(--t-muted); --crm-line: var(--t-line); --crm-panel: var(--t-panel); --crm-surface: var(--t-bg); --crm-primary: var(--t-zlato); --crm-primary-dark: var(--t-zlato-tamno); --crm-ring: rgba(212, 175, 55, .22); --rd-plava-sjaj: rgba(212, 175, 55, .18); --rd-tirkiz: var(--t-zlato-svijetlo); --rd-ljubicasta: var(--t-zlato-tamno); --record-ink: var(--t-text); --record-muted: var(--t-muted); --record-line: var(--t-line); --record-surface: var(--t-panel); --record-soft: var(--t-panel-2); --record-teal: var(--t-zlato-svijetlo); --record-violet: var(--t-zlato); --mobile-ink: var(--t-text); --mobile-muted: var(--t-muted); --mobile-line: var(--t-line); --mobile-surface: var(--t-panel); --mobile-accent: var(--t-zlato); color: var(--t-text); background: var(--t-bg); } /* --- Temelji ---------------------------------------------------------------- */ body.tema-tamna #appSection { background: var(--t-bg) !important; } body.tema-tamna #glavniScrollKontejner { background: radial-gradient(circle at 82% 3%, rgba(212, 175, 55, .07) 0, transparent 26rem), var(--t-bg) !important; } body.tema-tamna #appSection > aside { background: linear-gradient(180deg, #12161d, #0d1016) !important; border-right: 1px solid var(--t-line) !important; } body.tema-tamna #appSection > aside nav button.crm-nav-item.tab-active { color: #1a1408 !important; background: linear-gradient(135deg, var(--t-zlato-svijetlo), var(--t-zlato)) !important; border-color: rgba(240, 217, 140, .5) !important; box-shadow: 0 8px 20px rgba(212, 175, 55, .22); } body.tema-tamna #appSection > aside nav button.crm-nav-item.tab-active svg { color: #1a1408 !important; } body.tema-tamna .crm-nav-grupa { color: #6f7b93 !important; } body.tema-tamna .crm-nav-grupa-master { color: var(--t-zlato-svijetlo) !important; } body.tema-tamna #appSection > aside nav button.crm-nav-item-master.tab-active { background: linear-gradient(135deg, #7c2436, #521624) !important; color: #ffd9df !important; border-color: rgba(255, 176, 188, .32) !important; } /* Tailwind pomoćne klase iz HTML-a */ body.tema-tamna .bg-white { background-color: var(--t-panel) !important; } body.tema-tamna .bg-slate-50 { background-color: var(--t-panel-2) !important; } body.tema-tamna .bg-slate-100 { background-color: var(--t-panel-3) !important; } body.tema-tamna .text-slate-800, body.tema-tamna .text-slate-700 { color: var(--t-text) !important; } body.tema-tamna .text-slate-600, body.tema-tamna .text-slate-500 { color: var(--t-text-2) !important; } body.tema-tamna .text-slate-400, body.tema-tamna .text-slate-300 { color: var(--t-muted) !important; } body.tema-tamna .border-slate-200, body.tema-tamna .border-slate-100 { border-color: var(--t-line) !important; } body.tema-tamna .text-blue-600, body.tema-tamna .text-blue-700 { color: var(--t-zlato) !important; } body.tema-tamna .bg-blue-600 { background-color: var(--t-zlato) !important; color: #1a1408 !important; } body.tema-tamna .bg-blue-50, body.tema-tamna .bg-blue-100 { background-color: var(--t-zlato-mekano) !important; } body.tema-tamna .glass-nav { background: rgba(18, 22, 29, .88) !important; border-bottom: 1px solid var(--t-line) !important; } body.tema-tamna .crm-mobile-dock { background: rgba(18, 22, 29, .93) !important; border-color: var(--t-line) !important; } body.tema-tamna .input-clean { background: var(--t-panel-2) !important; border-color: var(--t-line) !important; color: var(--t-text) !important; } body.tema-tamna input, body.tema-tamna select, body.tema-tamna textarea { color: var(--t-text); } body.tema-tamna input::placeholder, body.tema-tamna textarea::placeholder { color: #6f7b93; } body.tema-tamna select option { background: var(--t-panel-2); color: var(--t-text); } /* Modali na tamnoj podlozi */ body.tema-tamna [id$="Modal"] > div, body.tema-tamna [id$="Modal"] > section { border: 1px solid var(--t-line); } /* Zlatni sjaj: diskretan efekt na istaknutim plohama */ body.tema-tamna .brief-hero { background: linear-gradient(128deg, #1a1508 0%, #3b2f10 45%, #171b23 100%) !important; border: 1px solid rgba(212, 175, 55, .28); box-shadow: 0 22px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(240, 217, 140, .14); } body.tema-tamna .brief-hero::after { background: radial-gradient(circle at 88% 6%, rgba(240, 217, 140, .16), transparent 55%) !important; } body.tema-tamna .brief-live { background: rgba(212, 175, 55, .14) !important; border-color: rgba(212, 175, 55, .3) !important; color: var(--t-zlato-svijetlo) !important; } body.tema-tamna .brief-live span { background: var(--t-zlato-svijetlo) !important; box-shadow: 0 0 0 3px rgba(240, 217, 140, .2) !important; } body.tema-tamna .brief-eyebrow { color: var(--t-zlato-svijetlo) !important; } body.tema-tamna .brief-brojka { background: rgba(255, 255, 255, .05) !important; border-color: rgba(212, 175, 55, .18) !important; } body.tema-tamna .brief-brojka.je-aktivna { background: rgba(212, 175, 55, .16) !important; border-color: rgba(212, 175, 55, .4) !important; } body.tema-tamna .brief-primary { background: linear-gradient(135deg, var(--t-zlato-svijetlo), var(--t-zlato)) !important; color: #1a1408 !important; }body.tema-tamna .brief-kopiraj, body.tema-tamna .rodendan-dijeljenje-red button, body.tema-tamna .record-submit { background: linear-gradient(100deg, var(--t-zlato), var(--t-zlato-tamno)) !important; color: #1a1408 !important; } body.tema-tamna .brief-kartica.je-istaknuta { border-color: rgba(212, 175, 55, .45) !important; box-shadow: 0 0 0 3px rgba(212, 175, 55, .1), 0 10px 26px rgba(0, 0, 0, .45) !important; } body.tema-tamna .brief-ikona { background: linear-gradient(135deg, rgba(212, 175, 55, .16), rgba(240, 217, 140, .1)) !important; } body.tema-tamna .brief-broj { color: var(--t-zlato-svijetlo) !important; background: rgba(212, 175, 55, .14) !important; } body.tema-tamna .rodendan-inicijal, body.tema-tamna .crm-metric-icon { background: linear-gradient(135deg, var(--t-zlato), var(--t-zlato-tamno)) !important; color: #1a1408 !important; } /* Sjene su na tamnom dublje, a rubovi tanji */ body.tema-tamna { --rd-sjena-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3); --rd-sjena-2: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .4); --rd-sjena-3: 0 6px 14px rgba(0, 0, 0, .5), 0 22px 48px rgba(0, 0, 0, .5); } /* Prekidač teme */ .tema-prekidac { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; color: #aeb9df; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: .65rem; cursor: pointer; transition: transform var(--rd-brzo) var(--rd-krivulja), background-color var(--rd-brzo) linear, color var(--rd-brzo) linear; } .tema-prekidac:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .14); color: #fff; } .tema-prekidac:active { transform: scale(.94); } .tema-prekidac svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } body.tema-tamna .tema-prekidac { color: var(--t-zlato-svijetlo); background: rgba(212, 175, 55, .14); border-color: rgba(212, 175, 55, .3); } body.tema-tamna .tema-prekidac:hover { background: rgba(212, 175, 55, .22); color: #fff; } .tema-prekidac .ikona-mjesec { display: block; } .tema-prekidac .ikona-sunce { display: none; } body.tema-tamna .tema-prekidac .ikona-mjesec { display: none; } body.tema-tamna .tema-prekidac .ikona-sunce { display: block; } /* Mobilni prekidač stoji uz zvono, pa prati svijetlu traku */ .crm-mobile-tema { color: #64748b; background: #fff; border: 1px solid #e2e8f0; } body.tema-tamna .crm-mobile-tema { color: var(--t-zlato-svijetlo); background: var(--t-panel-2); border-color: var(--t-line); } @media (prefers-reduced-motion: reduce) { .tema-prekidac:hover { transform: none !important; } } /* --- Izvedeni sloj (generiran iz svijetle teme) ----------------------------- */ body.tema-tamna #appSection > aside h1, body.tema-tamna #appSection > aside .text-slate-800, body.tema-tamna #appSection > aside .text-slate-600 { color: #f7f8ff !important; } body.tema-tamna #appSection > aside .bg-slate-100 { color: #f7f8ff !important; } body.tema-tamna #appSection > aside nav button:hover { color: #fff !important; } body.tema-tamna #appSection > aside nav .tab-active { color: #fff !important; } body.tema-tamna .crm-hero { color: #fff !important; } body.tema-tamna .crm-hero h2 { color: #fff !important; } body.tema-tamna .crm-hero h2 em { color: var(--t-zlato-svijetlo) !important; } body.tema-tamna .crm-primary-action { border: 1px solid var(--t-line) !important; background: var(--t-panel) !important; } body.tema-tamna .crm-secondary-action { color: #fff !important; } body.tema-tamna .crm-login-brand { color: #fff !important; } body.tema-tamna .crm-login-brand-copy h1 { color: #fff !important; } body.tema-tamna .crm-login-brand-copy h1 em { color: var(--t-zlato-svijetlo) !important; } body.tema-tamna .crm-login-form-heading p { color: var(--t-muted) !important; } body.tema-tamna .crm-login-input { background: var(--t-panel) !important; } body.tema-tamna .crm-login-submit { color: #fff !important; } body.tema-tamna #tab_zapisnik > .bg-white { background: linear-gradient(115deg, var(--t-panel) 0%, #f7f9ff 100%) !important; } body.tema-tamna #tab_dosje > .bg-white { background: linear-gradient(145deg, var(--t-panel), #fbfcff) !important; } body.tema-tamna #tab_dosje #dosjeSlika { color: #fff !important; } body.tema-tamna #appSection > div > header button { background: var(--t-panel) !important; } body.tema-tamna #appSection > div > nav button.text-blue-600 svg { color: #fff !important; } body.tema-tamna .crm-member-picker { background: linear-gradient(125deg, var(--t-panel) 0%, #f7f9ff 100%) !important; } body.tema-tamna .crm-search-control, body.tema-tamna .crm-filter-input { background: var(--t-panel) !important; } body.tema-tamna .crm-quick-filters button:hover, body.tema-tamna .crm-filter-reset:hover { color: #fff !important; } body.tema-tamna .crm-member-result { background: var(--t-panel) !important; } body.tema-tamna .crm-member-avatar { color: #fff !important; } body.tema-tamna .crm-filter-bar .crm-filter-input { background: var(--t-panel) !important; } body.tema-tamna .crm-filter-bar select { background: var(--t-panel) !important; } body.tema-tamna .crm-filter-reset:hover { color: #fff !important; } body.tema-tamna .crm-filter-danger .crm-filter-input { background: var(--t-panel) !important; } body.tema-tamna .crm-filter-danger .crm-filter-reset:hover { color: #fff !important; } body.tema-tamna .crm-admin-filter { background: linear-gradient(105deg, var(--t-panel-2), #fcf9ff) !important; } body.tema-tamna /* Inputs and decision forms use predictable grouping, body.tema-tamna spacing and visual hierarchy. */ #tab_zapisnik #zapisnikKontejner > .grid > div { background: linear-gradient(145deg, var(--t-panel), #fbfcff) !important; } body.tema-tamna /* ----- Final visual polish -------------------------------------------- */ /* The hero sits on a dark surface, body.tema-tamna so this selector intentionally outranks the generic page heading rule. */ #glavniScrollKontejner .crm-hero h2 { color: #fff !important; } body.tema-tamna #glavniScrollKontejner .crm-hero h2 em { color: var(--t-zlato-svijetlo) !important; } body.tema-tamna .crm-record-tools button { background: var(--t-panel) !important; } body.tema-tamna .crm-record-tools i { color: #fff !important; } body.tema-tamna .crm-report-action { background: var(--t-panel) !important; } body.tema-tamna .crm-minus-symbol { color: #fff !important; } body.tema-tamna [id$="Modal"] > div { background: linear-gradient(145deg, var(--t-panel), #fbfcff) !important; } body.tema-tamna .crm-metric-action:hover .crm-metric-arrow { color: #fff !important; } body.tema-tamna .crm-widget-modal-icon { color: #fff !important; } body.tema-tamna .crm-widget-modal-heading p:last-child { color: var(--t-muted) !important; } body.tema-tamna .crm-widget-row { background: linear-gradient(105deg, var(--t-panel), #fafcff) !important; } body.tema-tamna .crm-widget-avatar { color: #fff !important; } body.tema-tamna .crm-widget-empty { border: 1px dashed var(--t-line) !important; } body.tema-tamna .crm-template-label button:hover { color: #fff !important; } body.tema-tamna .crm-template-field select { background: var(--t-panel) !important; } body.tema-tamna .crm-record-tools { background: var(--t-panel) !important; } body.tema-tamna .crm-record-tools button:hover { color: #fff !important; } body.tema-tamna #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card, body.tema-tamna #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card-note { background: var(--t-panel) !important; } body.tema-tamna .crm-control-label, body.tema-tamna #tab_zapisnik #zapisnikKontejner .crm-record-card label:not(.border-2) { color: var(--t-muted) !important; } body.tema-tamna .crm-record-card .input-clean:focus { background: var(--t-panel) !important; } body.tema-tamna .crm-record-console { background: linear-gradient(135deg, var(--t-panel), #f8faff) !important; } body.tema-tamna .crm-action-menu button { background: var(--t-panel) !important; } body.tema-tamna .crm-action-menu button.is-active { color: #fff !important; } body.tema-tamna .crm-record-board > .crm-record-card, body.tema-tamna #tab_zapisnik #zapisnikKontejner > .crm-record-board > .crm-record-card { background: var(--t-panel) !important; } body.tema-tamna .crm-record-card .crm-control-label, body.tema-tamna #tab_zapisnik #zapisnikKontejner .crm-record-card label:not(.border-2) { color: var(--t-muted) !important; } body.tema-tamna .crm-record-card .input-clean:focus { background: var(--t-panel) !important; } body.tema-tamna .crm-record-card .flex.items-center.gap-2.mb-2 { background: var(--t-panel-2) !important; } body.tema-tamna .record-stage-label b { color: #fff !important; } body.tema-tamna .record-search-input:focus-within { background: var(--t-panel) !important; box-shadow: 0 0 0 3px rgba(226, 197, 106, .11) !important; } body.tema-tamna .record-search-input kbd { background: var(--t-panel) !important; } body.tema-tamna .record-member-shortcuts button { background: var(--t-panel) !important; } body.tema-tamna .record-member-search #zapisnikRezultati { background: var(--t-panel) !important; } body.tema-tamna .record-subject-banner { color: #fff !important; } body.tema-tamna .record-subject-primary h3 { color: #fff !important; } body.tema-tamna .record-subject-banner > button { color: #fff !important; } body.tema-tamna .record-action-rail { background: var(--t-panel) !important; } body.tema-tamna .record-action-list button i { color: var(--t-muted) !important; } body.tema-tamna .record-action-list button.is-active i { color: #fff !important; } body.tema-tamna .record-workbench { background: var(--t-panel) !important; } body.tema-tamna .record-workbench-head { background: linear-gradient(135deg, var(--t-panel), #f6f8fd) !important; } body.tema-tamna .record-workbench-head > strong { background: var(--t-panel) !important; } body.tema-tamna .record-form-panel { background: var(--t-panel) !important; } body.tema-tamna .record-form-title > span { color: #fff !important; } body.tema-tamna .record-field input, body.tema-tamna .record-field select, body.tema-tamna .record-field textarea, body.tema-tamna .record-message-field select { background: var(--t-panel-2) !important; } body.tema-tamna .record-field input:focus, body.tema-tamna .record-field select:focus, body.tema-tamna .record-field textarea:focus, body.tema-tamna .record-message-field select:focus { background: var(--t-panel) !important; box-shadow: 0 0 0 3px rgba(226, 197, 106, .1) !important; } body.tema-tamna .record-upload { background: var(--t-panel-2) !important; } body.tema-tamna .record-toggle-choice { background: var(--t-panel) !important; } body.tema-tamna .record-toggle-choice.is-active { color: #fff !important; } body.tema-tamna .record-message-field { background: var(--t-panel-2) !important; } body.tema-tamna .record-submit { color: #fff !important; background: linear-gradient(100deg, var(--t-zlato-tamno), var(--t-zlato)) !important; } body.tema-tamna .duplicate-check-modal, body.tema-tamna .admin-security-modal { background: linear-gradient(145deg, var(--t-panel), #f7fbff) !important; } body.tema-tamna .duplicate-check-close, body.tema-tamna .admin-security-close { background: var(--t-panel-3) !important; } body.tema-tamna .duplicate-check-details { background: var(--t-panel) !important; } body.tema-tamna .duplicate-check-actions button { background: var(--t-panel) !important; } body.tema-tamna .duplicate-check-actions button:last-child { color: #fff !important; } body.tema-tamna .admin-security-session { background: var(--t-panel) !important; } body.tema-tamna .admin-security-session small { color: var(--t-muted) !important; } body.tema-tamna #tab_pregledRegistri .registers-hero { background: linear-gradient(118deg, var(--t-panel) 0%, #f5f8ff 72%, #edf5ff 100%) !important; } body.tema-tamna #tab_pregledRegistri .registers-intro { color: var(--t-muted) !important; } body.tema-tamna #tab_pregledRegistri .registers-refresh { background: var(--t-panel) !important; } body.tema-tamna #tab_pregledRegistri .registers-refresh:hover { color: #fff !important; } body.tema-tamna .register-summary-card { background: var(--t-panel) !important; } body.tema-tamna .registers-nav { background: var(--t-panel) !important; } body.tema-tamna .register-nav-item.is-active > span { color: #fff !important; } body.tema-tamna .registers-workspace { background: var(--t-panel) !important; } body.tema-tamna .registers-workspace-head { background: linear-gradient(135deg, var(--t-panel), var(--t-panel-2)) !important; } body.tema-tamna .register-toolbar { background: var(--t-panel-2) !important; } body.tema-tamna .register-field > span { color: var(--t-muted) !important; } body.tema-tamna .register-field input, body.tema-tamna .register-field select { background: var(--t-panel) !important; } body.tema-tamna .register-toggle span::after { background: var(--t-panel) !important; } body.tema-tamna .register-clear { background: var(--t-panel) !important; } body.tema-tamna .register-clear:hover { background: var(--t-panel-2) !important; } body.tema-tamna .register-note-row { background: var(--t-panel) !important; } body.tema-tamna .register-note-marker { color: #fff !important; } body.tema-tamna .register-delete:hover { color: #fff !important; } body.tema-tamna .register-status-section { background: var(--t-panel-2) !important; } body.tema-tamna .register-status-card { background: var(--t-panel) !important; } body.tema-tamna .register-status-card button:hover { color: #fff !important; } body.tema-tamna .register-case-card { background: linear-gradient(145deg, var(--t-panel), #fbfcff) !important; } body.tema-tamna .register-empty-state { background: var(--t-panel-2) !important; } body.tema-tamna .dossier-discovery { background: var(--t-panel) !important; } body.tema-tamna .dossier-discovery-step > span { color: #fff !important; } body.tema-tamna .dossier-search-input:focus-within { background: var(--t-panel) !important; } body.tema-tamna .dossier-search-input kbd { background: var(--t-panel) !important; } body.tema-tamna .dossier-search-actions button { background: var(--t-panel) !important; } body.tema-tamna #tab_dosje .dossier-member-results { background: var(--t-panel) !important; } body.tema-tamna .dossier-member-hero { color: #fff !important; } body.tema-tamna .dossier-member-identity > div:first-child { color: #fff !important; } body.tema-tamna .dossier-member-identity h3 { color: #fff !important; } body.tema-tamna .dossier-member-details span:first-child { color: #fff !important; } body.tema-tamna .dossier-blacklist-action { color: #fff !important; } body.tema-tamna .dossier-overview, body.tema-tamna .dossier-activity-panel { background: var(--t-panel) !important; } body.tema-tamna .dossier-metric-grid article { background: var(--t-panel-2) !important; } body.tema-tamna .dossier-health { background: var(--t-panel-2) !important; } body.tema-tamna .dossier-filter-row button { background: var(--t-panel) !important; } body.tema-tamna .dossier-filter-row button.is-active { color: #fff !important; } body.tema-tamna .dossier-timeline { background: linear-gradient(90deg, rgba(236,242,250,.6), var(--t-panel) 7rem) !important; } body.tema-tamna .dossier-event-body { background: var(--t-panel) !important; } body.tema-tamna .dossier-empty-state { background: var(--t-panel-2) !important; } body.tema-tamna .template-studio-hero { color: #fff !important; } body.tema-tamna .template-studio-hero h2 { color: #fff !important; } body.tema-tamna .template-create-button { background: var(--t-panel) !important; } body.tema-tamna .template-ocr-symbol { color: #fff !important; } body.tema-tamna .template-report-dock { background: var(--t-panel) !important; } body.tema-tamna .template-report-list button { background: var(--t-panel-2) !important; } body.tema-tamna .template-library { background: var(--t-panel) !important; } body.tema-tamna .template-library-categories .btn-sablona-kat { background: var(--t-panel) !important; } body.tema-tamna .template-library-categories .btn-sablona-kat.is-active { color: #fff !important; } body.tema-tamna .template-message-card { background: linear-gradient(150deg, var(--t-panel), #fbfcff) !important; } body.tema-tamna .template-message-copy:hover { color: #fff !important; } body.tema-tamna .template-message-delete:hover { color: #fff !important; } body.tema-tamna .template-empty-state { background: var(--t-panel-2) !important; } body.tema-tamna .template-editor-modal, body.tema-tamna .template-copy-modal { background: var(--t-panel) !important; } body.tema-tamna .template-modal-close { background: var(--t-panel) !important; } body.tema-tamna .template-editor-field input:focus, body.tema-tamna .template-editor-field select:focus, body.tema-tamna .template-editor-field textarea:focus { background: var(--t-panel) !important; } body.tema-tamna .template-variable-card button { background: var(--t-panel) !important; } body.tema-tamna .template-variable-card button:hover { color: #fff !important; } body.tema-tamna .template-editor-footer button:first-child { color: var(--t-muted) !important; background: var(--t-panel) !important; } body.tema-tamna .template-editor-footer button:last-child { color: #fff !important; } body.tema-tamna .template-copy-mark { color: #fff !important; } body.tema-tamna .template-copy-content { background: var(--t-panel-2) !important; } body.tema-tamna .template-copy-modal footer > button { color: #fff !important; } body.tema-tamna #tab_sablone .template-studio-hero h2 { color: #fff !important; } body.tema-tamna .blacklist-hero { color: #fff !important; } body.tema-tamna .blacklist-hero h2 { color: #fff !important; } body.tema-tamna .blacklist-add-button { background: var(--t-panel) !important; } body.tema-tamna .blacklist-workspace-head { background: linear-gradient(135deg, var(--t-panel), #fff8fa) !important; } body.tema-tamna .blacklist-workspace-head > button, body.tema-tamna .blacklist-show-all { background: var(--t-panel) !important; } body.tema-tamna .blacklist-workspace-head > button:hover, body.tema-tamna .blacklist-show-all:hover { color: #fff !important; } body.tema-tamna .blacklist-search { background: var(--t-panel) !important; } body.tema-tamna .blacklist-case-card { background: linear-gradient(120deg, var(--t-panel), #fffafb) !important; } body.tema-tamna .blacklist-case-token { color: #fff !important; } body.tema-tamna .blacklist-case-card > button, .blacklist-case-card .blacklist-case-actions > button:hover { color: #fff !important; } body.tema-tamna .blacklist-editor-modal { background: var(--t-panel) !important; } body.tema-tamna .blacklist-editor-modal header { background: linear-gradient(120deg, #fff8fa, var(--t-panel)) !important; } body.tema-tamna .blacklist-editor-modal header > button { background: var(--t-panel) !important; } body.tema-tamna .blacklist-editor-fields input:focus, body.tema-tamna .blacklist-editor-fields textarea:focus { background: var(--t-panel) !important; } body.tema-tamna .blacklist-editor-modal footer button:first-child { background: var(--t-panel) !important; } body.tema-tamna .blacklist-editor-modal footer button:last-child { color: #fff !important; } body.tema-tamna .superadmin-hero { color: #fff !important; } body.tema-tamna .superadmin-identity > b { color: #fff !important; } body.tema-tamna .superadmin-identity h2 { color: #fff !important; } body.tema-tamna .superadmin-hero aside strong { color: #fff !important; } body.tema-tamna .superadmin-tab-rail { border: 1px solid var(--t-line) !important; } body.tema-tamna .superadmin-tab-rail button { color: var(--t-muted) !important; } body.tema-tamna .superadmin-tab-rail button:hover { color: var(--t-zlato-svijetlo) !important; background: var(--t-panel-3) !important; } body.tema-tamna .superadmin-tab-rail button.is-active { border-color: var(--t-zlato) !important; color: var(--t-zlato-svijetlo) !important; background: linear-gradient(135deg, var(--t-panel-3), var(--t-panel-3)) !important; } body.tema-tamna .superadmin-tab-rail button b { color: var(--t-muted) !important; background: var(--t-panel-3) !important; } body.tema-tamna .superadmin-tab-rail button.is-active b { color: #fff !important; background: linear-gradient(135deg, var(--t-zlato-tamno), var(--t-zlato)) !important; } body.tema-tamna .superadmin-tab-rail button small { color: var(--t-muted) !important; } body.tema-tamna .superadmin-workspace-head { background: linear-gradient(125deg, var(--t-panel), #f7fbfc) !important; } body.tema-tamna .superadmin-workspace-head > button:hover { color: #fff !important; } body.tema-tamna .superadmin-panel-actions > button, body.tema-tamna .superadmin-create-row > button, body.tema-tamna .superadmin-save-button { color: #fff !important; } body.tema-tamna .superadmin-search-row, body.tema-tamna .superadmin-create-row { background: var(--t-panel-2) !important; } body.tema-tamna .superadmin-search-row label { background: var(--t-panel) !important; } body.tema-tamna .superadmin-search-row > button { background: var(--t-panel) !important; } body.tema-tamna .superadmin-member-card { background: var(--t-panel) !important; } body.tema-tamna .superadmin-member-avatar { color: #fff !important; } body.tema-tamna .superadmin-member-actions button:hover, body.tema-tamna .superadmin-stack-item button:hover, body.tema-tamna .superadmin-table-actions button:hover { color: #fff !important; } body.tema-tamna .superadmin-member-actions .is-danger:hover, body.tema-tamna .superadmin-stack-item .is-danger:hover, body.tema-tamna .superadmin-table-actions .is-danger:hover { color: #fff !important; } body.tema-tamna .superadmin-empty-state { background: var(--t-panel-2) !important; } body.tema-tamna .superadmin-risk-card { background: linear-gradient(120deg, #fffafa, var(--t-panel)) !important; } body.tema-tamna .superadmin-risk-count { color: #fff !important; } body.tema-tamna .superadmin-risk-card button { background: var(--t-panel) !important; } body.tema-tamna .superadmin-risk-card button:last-child { color: #fff !important; } body.tema-tamna .superadmin-create-row input { background: var(--t-panel) !important; } body.tema-tamna .superadmin-stack-item { background: var(--t-panel) !important; } body.tema-tamna .superadmin-settings-grid label { background: var(--t-panel-2) !important; } body.tema-tamna .superadmin-settings-grid input[type="text"] { background: var(--t-panel) !important; } body.tema-tamna .superadmin-data-card { background: linear-gradient(145deg, var(--t-panel), #f8fbff) !important; } body.tema-tamna .superadmin-data-card button { background: var(--t-panel) !important; } body.tema-tamna .superadmin-data-card button:first-child { color: #fff !important; } body.tema-tamna #appSection #glavniScrollKontejner .crm-hero h2, body.tema-tamna #appSection #glavniScrollKontejner .blacklist-hero h2, body.tema-tamna #appSection #glavniScrollKontejner .superadmin-identity h2, body.tema-tamna #appSection #glavniScrollKontejner .record-subject-primary h3 { color: #fff !important; } body.tema-tamna #appSection #glavniScrollKontejner .crm-hero h2 em { color: var(--t-zlato-svijetlo) !important; } body.tema-tamna #appSection #glavniScrollKontejner .blacklist-hero h2 { -webkit-text-fill-color: #fff !important; } body.tema-tamna /* Svijetli plavi naslovi ostaju čitljivi na svim svijetlim površinama. */ #appSection #glavniScrollKontejner :is(h2, body.tema-tamna h3, body.tema-tamna h4) { color: var(--t-zlato) !important; } body.tema-tamna #appSection #glavniScrollKontejner :is(.crm-hero, body.tema-tamna .blacklist-hero, body.tema-tamna .superadmin-hero) :is(h2, body.tema-tamna h3), body.tema-tamna #appSection #glavniScrollKontejner .record-subject-primary h3 { color: #fff !important; } body.tema-tamna /* Jedinstveni naslovni sustav za sve CRM radne prostore. */ #appSection #glavniScrollKontejner .crm-workspace-hero { color: #fff !important; } body.tema-tamna #appSection #glavniScrollKontejner .crm-workspace-hero :is(h2, body.tema-tamna h3, body.tema-tamna h4) { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.tema-tamna #appSection #glavniScrollKontejner .crm-workspace-hero :is(.registers-refresh, body.tema-tamna .template-create-button, body.tema-tamna .blacklist-add-button):hover { background: var(--t-panel) !important; } body.tema-tamna .crm-mobile-dock button.text-blue-600 { color: #fff !important; } body.tema-tamna .crm-mobile-sheet-header > button { background: var(--t-panel) !important; } body.tema-tamna .crm-mobile-menu-profile > span { color: #fff !important; } body.tema-tamna .crm-mobile-menu-links button { background: var(--t-panel) !important; } body.tema-tamna .dossier-member-identity h3 { color: #fff !important; } body.tema-tamna /* ----- Administratorski chat ----------------------------------------- */ #appSection .admin-chat-fab { color: #fff !important; } body.tema-tamna .admin-chat-badge { color: #fff !important; } body.tema-tamna .admin-chat-header { color: #fff !important; } body.tema-tamna .admin-chat-title h2 { color: #fff !important; } body.tema-tamna .admin-chat-message { background: var(--t-panel) !important; } body.tema-tamna .admin-chat-delete:hover { color: #fff !important; } body.tema-tamna .admin-chat-composer { background: var(--t-panel) !important; } body.tema-tamna .admin-chat-composer button { color: #fff !important; } body.tema-tamna /* Ime člana ostaje čitljivo na svakom tonu gradijenta otvorenog dosjea. */ #appSection #glavniScrollKontejner .record-subject-primary #zapIme { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.tema-tamna #appSection #glavniScrollKontejner .dossier-member-identity #dosjePuniIme { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.tema-tamna .admin-chat-composer > .admin-chat-emoji-picker button { background: var(--t-panel) !important; } body.tema-tamna .superadmin-switch i::after { background: var(--t-panel) !important; } body.tema-tamna .video-room-hero h2 { color: #fff !important; } body.tema-tamna .video-room-preview > div b { color: #fff !important; } body.tema-tamna .video-room-setup button { color: #fff !important; } body.tema-tamna .whereby-call-empty strong { color: #fff !important; } body.tema-tamna .admin-report-intro h4 { color: #fff !important; } body.tema-tamna .admin-report-controls input { background: var(--t-panel) !important; } body.tema-tamna .admin-report-controls button, body.tema-tamna .admin-report-actions button { color: #fff !important; } body.tema-tamna .admin-report-preview { background: var(--t-panel) !important; } body.tema-tamna /* Završno usklađivanje: fokus ostaje čitljiv bez vanjskog titrajućeg okvira. */ button:focus-visible, body.tema-tamna input:focus-visible, body.tema-tamna textarea:focus-visible, body.tema-tamna select:focus-visible, body.tema-tamna a:focus-visible { box-shadow: 0 0 0 3px rgba(212, 175, 55, .16) !important; } body.tema-tamna .crm-notification-header { color: #fff !important; } body.tema-tamna .crm-notification-header h3 { color: #fff !important; } body.tema-tamna .crm-notification-item { background: var(--t-panel) !important; } body.tema-tamna /* Naslov službenog izvještaja uvijek ostaje čitljiv na gradijentu. */ .superadmin-panel .admin-report-intro h4 { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.tema-tamna /* Kontrolirani ekran rekonstrukcije, body.tema-tamna bez otkrivanja pristupnih postupaka. */ .crm-maintenance-screen { color: #fff !important; } body.tema-tamna .crm-maintenance-card h1 { color: #fff !important; } body.tema-tamna .admin-report-controls select { background: var(--t-panel) !important; } body.tema-tamna .admin-report-mode-tabs button.is-active { background: var(--t-panel) !important; } body.tema-tamna .admin-document-card { background: linear-gradient(135deg, var(--t-panel), #f8fbff) !important; } body.tema-tamna .admin-document-meta span { background: var(--t-panel) !important; } body.tema-tamna .superadmin-temp-access button { color: #fff !important; } body.tema-tamna .crm-metric-card::before { background: linear-gradient(135deg, rgba(212, 175, 55, .07), rgba(176, 138, 40, .07)) !important; } body.tema-tamna .crm-metric-card:hover { border-color: rgba(212, 175, 55, .28) !important; } body.tema-tamna .superadmin-member-grid > *:hover, body.tema-tamna .register-note-list > *:hover, body.tema-tamna .register-case-grid > *:hover, body.tema-tamna .blacklist-case-grid > *:hover, body.tema-tamna .template-card-grid > *:hover, body.tema-tamna .register-status-list > *:hover { border-color: rgba(212, 175, 55, .26) !important; } body.tema-tamna .rd-skeleton { background: linear-gradient(90deg, var(--t-panel-3) 25%, #f8fafd 50%, var(--t-panel-3) 75%) !important; } body.tema-tamna /* --- 11. Traka za skrolanje ----------------------------------------------- */ .custom-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--t-line-2), var(--t-line-2)) !important; } body.tema-tamna /* --- 15. SuperAdmin → Rođendani -------------------------------------------- */ .rodendan-dijeljenje { background: linear-gradient(125deg, rgba(212, 175, 55, .05), rgba(226, 197, 106, .05)) !important; } body.tema-tamna .rodendan-dijeljenje-red input { background: var(--t-panel) !important; } body.tema-tamna .rodendan-dijeljenje-red button { color: #fff !important; } body.tema-tamna .rodendan-dijeljenje-red button:hover { box-shadow: 0 10px 20px rgba(212, 175, 55, .25) !important; } body.tema-tamna .rodendan-stupac-glava > span { background: rgba(212, 175, 55, .1) !important; } body.tema-tamna .rodendan-stavka { background: var(--t-panel-2) !important; } body.tema-tamna .rodendan-stavka:hover { border-color: rgba(212, 175, 55, .26) !important; } body.tema-tamna .rodendan-inicijal { color: #fff !important; } body.tema-tamna .rodendan-datum { background: rgba(226, 197, 106, .1) !important; } body.tema-tamna .rodendan-stavka-nedostaje .rodendan-inicijal { background: linear-gradient(135deg, #98a6bd, #7b8aa3) !important; } body.tema-tamna .rodendan-datum-prazan { background: var(--t-panel-3) !important; } body.tema-tamna .crm-nav-bedz { color: #fff !important; } body.tema-tamna /* --- 2. Dnevni brifing: zaglavlje ------------------------------------------ */ .brief-hero { color: #fff !important; background: linear-gradient(128deg, #22347f 0%, var(--t-zlato) 48%, #5b48c9 100%) !important; } body.tema-tamna .brief-primary { color: var(--t-zlato-tamno) !important; background: var(--t-panel) !important; } body.tema-tamna .brief-secondary { color: #fff !important; } body.tema-tamna .brief-kartica:hover { border-color: rgba(212, 175, 55, .26) !important; } body.tema-tamna .brief-kartica.je-prazna { background: var(--t-panel-2) !important; } body.tema-tamna .brief-kartica.je-istaknuta { border-color: rgba(212, 175, 55, .38) !important; box-shadow: 0 0 0 3px rgba(212, 175, 55, .08), var(--rd-sjena-1) !important; } body.tema-tamna .brief-ikona { background: linear-gradient(135deg, rgba(212, 175, 55, .1), rgba(176, 138, 40, .12)) !important; } body.tema-tamna .brief-kartica.je-prazna .brief-kartica-naslov p { color: var(--t-muted) !important; } body.tema-tamna .brief-broj { background: rgba(212, 175, 55, .1) !important; } body.tema-tamna .brief-kartica.je-prazna .brief-broj { color: var(--t-muted) !important; background: var(--t-panel-3) !important; } body.tema-tamna .brief-popis { background: var(--t-panel-2) !important; } body.tema-tamna .brief-popis li { color: var(--t-text) !important; } body.tema-tamna .brief-prazno { color: var(--t-muted) !important; background: var(--t-panel-2) !important; } body.tema-tamna .brief-kopiraj { color: #fff !important; } body.tema-tamna .brief-kopiraj:hover { box-shadow: 0 10px 20px rgba(212, 175, 55, .26) !important; } body.tema-tamna .brief-kartica.je-prazna .brief-kopiraj { background: var(--t-panel-3) !important; color: var(--t-muted) !important; } body.tema-tamna .record-vrsta-oznaka { color: var(--t-muted) !important; } body.tema-tamna .record-vrsta { background: var(--t-panel-2) !important; border: 1.5px solid var(--record-line, var(--t-line)) !important; } body.tema-tamna .record-vrsta:hover { border-color: rgba(212, 175, 55, .3) !important; } body.tema-tamna .record-vrsta.is-active { background: linear-gradient(125deg, rgba(212, 175, 55, .1), rgba(176, 138, 40, .09)) !important; box-shadow: 0 0 0 3px rgba(212, 175, 55, .12) !important; } body.tema-tamna .record-vrsta b { background: var(--t-panel) !important; } body.tema-tamna .record-vrsta strong { color: var(--record-ink, var(--t-text)) !important; } body.tema-tamna .record-vrsta small { color: var(--record-muted, var(--t-muted)) !important; } body.tema-tamna /* --- 7. Ispravak naslijeđenih boja naslova --------------------------------- Globalno pravilo `#appSection #glavniScrollKontejner :is(h2, body.tema-tamna h3, body.tema-tamna h4)` boji sve naslove u plavo i dodaje bijelu sjenu. Na tamnom brifingu to je izgledalo kao precrtan tekst, body.tema-tamna a naslovi kartica nisu dobivali svoju boju. */ #appSection #glavniScrollKontejner .brief-hero :is(h2, body.tema-tamna h3, body.tema-tamna h4) { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.tema-tamna #appSection #glavniScrollKontejner .brief-kartica.je-prazna h4 { color: var(--t-muted) !important; -webkit-text-fill-color: var(--t-muted) !important; } /* Sprječava bljesak svijetle teme prije nego skripta postavi klasu na . */ html.tema-tamna-rano, html.tema-tamna-rano body { background: #0d1016 !important; } /* Zaglavlje bočne trake sada nosi tri gumba, pa naziv dobiva prostor. */ #appSection > aside > div:first-child { gap: .5rem !important; padding: 1.1rem 1rem !important; } #appSection > aside > div:first-child > div:first-child { min-width: 0; } #appSection > aside > div:first-child h1 { font-size: .78rem !important; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #appSection > aside > div:first-child > div:last-child { flex-shrink: 0; gap: .3rem !important; } #appSection > aside > div:first-child img { width: 26px !important; height: 26px !important; } /* Zaglavlja radnih prostora i banneri: u tamnom modu prelaze na zlatni ton. */ body.tema-tamna .record-subject-banner, body.tema-tamna .dossier-member-hero, body.tema-tamna #appSection #glavniScrollKontejner .crm-workspace-hero, body.tema-tamna .record-page-intro, body.tema-tamna .registers-hero, body.tema-tamna .dossier-page-intro, body.tema-tamna .blacklist-hero, body.tema-tamna .template-studio-hero, body.tema-tamna .superadmin-hero, body.tema-tamna .crm-hero { background: linear-gradient(120deg, #1a1508 0%, #3a2e10 46%, #171b23 100%) !important; border: 1px solid rgba(212, 175, 55, .26) !important; box-shadow: 0 18px 42px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(240, 217, 140, .12) !important; } body.tema-tamna .record-subject-banner::after, body.tema-tamna .dossier-member-hero::after, body.tema-tamna #appSection #glavniScrollKontejner .crm-workspace-hero::after { background: radial-gradient(circle at 88% 8%, rgba(240, 217, 140, .16), transparent 55%) !important; } body.tema-tamna #appSection #glavniScrollKontejner .crm-workspace-hero :is(p, span, small) { color: #d9d0b0 !important; } body.tema-tamna .record-subject-primary span, body.tema-tamna .record-subject-data span, body.tema-tamna .dossier-member-details span { color: #d9d0b0 !important; } /* Sekundarna dugmad u zaglavljima ostaje čitljiva na zlatnoj podlozi. */ body.tema-tamna .record-subject-banner button, body.tema-tamna .dossier-hero-navigation button, body.tema-tamna .registers-refresh, body.tema-tamna .blacklist-add-button, body.tema-tamna .template-create-button { color: #1a1408 !important; background: linear-gradient(135deg, var(--t-zlato-svijetlo), var(--t-zlato)) !important; border-color: rgba(240, 217, 140, .45) !important; } /* Naglasak identiteta u SuperAdmin zaglavlju */ body.tema-tamna .superadmin-identity b { color: #1a1408 !important; background: linear-gradient(135deg, var(--t-zlato-svijetlo), var(--t-zlato)) !important; } body.tema-tamna .superadmin-hero aside { background: rgba(212, 175, 55, .12) !important; border-color: rgba(212, 175, 55, .28) !important; } /* --- Osobni podsjetnici ----------------------------------------------------- */ .podsjetnik-unos { margin-bottom: 1rem; padding: 1rem 1.1rem; background: var(--crm-panel); border: 1px solid var(--crm-line); border-radius: 1rem; box-shadow: var(--rd-sjena-1); } .podsjetnik-unos form { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem auto; gap: .55rem; } .podsjetnik-unos input { min-width: 0; padding: .78rem .9rem; font-family: inherit; font-size: .84rem; font-weight: 600; color: var(--crm-ink); background: var(--crm-surface); border: 1.5px solid var(--crm-line); border-radius: .72rem; outline: none; transition: border-color var(--rd-brzo) linear, box-shadow var(--rd-srednje) var(--rd-krivulja); } .podsjetnik-unos input:focus { border-color: var(--crm-primary); box-shadow: 0 0 0 4px var(--rd-plava-sjaj); } .podsjetnik-unos button { padding: .78rem 1.4rem; font-family: inherit; font-size: .78rem; font-weight: 900; color: #fff; background: linear-gradient(100deg, var(--crm-primary), var(--rd-ljubicasta)); border: 0; border-radius: .72rem; cursor: pointer; transition: transform var(--rd-brzo) var(--rd-krivulja), box-shadow var(--rd-brzo) var(--rd-krivulja); } .podsjetnik-unos button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(54, 87, 214, .24); } .podsjetnik-unos button:disabled { opacity: .6; cursor: wait; transform: none; } .podsjetnik-savjet { margin: .6rem 0 0 .15rem; font-size: .68rem; font-weight: 600; color: var(--crm-muted); } .podsjetnik-lista { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; } .podsjetnik { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .7rem .85rem; background: var(--crm-panel); border: 1px solid var(--crm-line); border-left: 3px solid var(--crm-line); border-radius: .8rem; transition: transform var(--rd-brzo) var(--rd-krivulja), border-color var(--rd-brzo) linear, box-shadow var(--rd-brzo) var(--rd-krivulja); } .podsjetnik:hover { transform: translateY(-2px); box-shadow: var(--rd-sjena-1); } .podsjetnik.je-kasni { border-left-color: #e0596c; } .podsjetnik.je-danas { border-left-color: #e8a33d; } .podsjetnik.je-sutra { border-left-color: var(--crm-primary); } .podsjetnik.je-zavrsen { opacity: .55; } .podsjetnik.je-zavrsen .podsjetnik-sadrzaj b { text-decoration: line-through; } .podsjetnik-kvacica { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; font-size: .78rem; font-weight: 900; color: transparent; background: transparent; border: 1.5px solid var(--crm-line); border-radius: 50%; cursor: pointer; transition: all var(--rd-brzo) linear; } .podsjetnik-kvacica:hover { border-color: var(--crm-primary); color: var(--crm-primary); } .podsjetnik.je-zavrsen .podsjetnik-kvacica { color: #fff; background: var(--crm-primary); border-color: var(--crm-primary); } .podsjetnik-sadrzaj { min-width: 0; } .podsjetnik-sadrzaj b { display: block; font-size: .82rem; font-weight: 800; color: var(--crm-ink); } .podsjetnik-sadrzaj span { font-size: .72rem; font-weight: 500; color: var(--crm-muted); } .podsjetnik-rok { padding: .25rem .55rem; font-size: .66rem; font-weight: 900; white-space: nowrap; color: var(--crm-muted); background: var(--crm-surface); border-radius: .45rem; } .podsjetnik.je-kasni .podsjetnik-rok { color: #b3283b; background: rgba(224, 89, 108, .12); } .podsjetnik.je-danas .podsjetnik-rok { color: #96631a; background: rgba(232, 163, 61, .14); } .podsjetnik.je-sutra .podsjetnik-rok { color: var(--crm-primary-dark); background: var(--rd-plava-sjaj); } .podsjetnik-brisi { width: 1.5rem; height: 1.5rem; font-size: 1rem; line-height: 1; color: var(--crm-muted); background: transparent; border: 0; border-radius: .4rem; cursor: pointer; transition: color var(--rd-brzo) linear, background-color var(--rd-brzo) linear; } .podsjetnik-brisi:hover { color: #d64a5c; background: rgba(214, 74, 92, .12); } .podsjetnik-prazno { padding: 1.6rem; text-align: center; background: var(--crm-panel); border: 1px dashed var(--crm-line); border-radius: 1rem; } .podsjetnik-prazno b { display: block; font-size: .84rem; font-weight: 800; color: var(--crm-ink); } .podsjetnik-prazno span { font-size: .74rem; font-weight: 500; color: var(--crm-muted); } @media (max-width: 720px) { .podsjetnik-unos form { grid-template-columns: minmax(0, 1fr); } .podsjetnik-unos button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .podsjetnik:hover, .podsjetnik-unos button:hover { transform: none !important; } } /* ============================================================================ PRIJAVA I OBAVIJEST O REKONSTRUKCIJI Jedna kartica, ista u svijetloj i tamnoj temi. ========================================================================== */ .prijava-zaslon { position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1.15rem; overflow: hidden; background: linear-gradient(150deg, #0b1533, #16225c 55%, #0b1533); } body.tema-tamna .prijava-zaslon { background: linear-gradient(150deg, #0b0d12, #191308 52%, #0b0d12); } .prijava-zaslon.hidden { display: none !important; } .prijava-pozadina { position: absolute; inset: 0; pointer-events: none; } .prijava-pozadina span { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(54, 87, 214, .45), transparent 68%); animation: rd-plutanje 15s ease-in-out infinite; } body.tema-tamna .prijava-pozadina span { background: radial-gradient(circle, rgba(212, 175, 55, .34), transparent 68%); } .prijava-pozadina span:nth-child(1) { width: 26rem; height: 26rem; left: -8rem; top: -6rem; } .prijava-pozadina span:nth-child(2) { width: 20rem; height: 20rem; right: -6rem; bottom: -5rem; animation-delay: 4s; } .prijava-pozadina span:nth-child(3) { width: 14rem; height: 14rem; right: 18%; top: 12%; animation-delay: 8s; } .prijava-kartica { position: relative; z-index: 1; width: 100%; max-width: 25rem; padding: 2rem 1.75rem 1.5rem; background: var(--crm-panel); border: 1px solid var(--crm-line); border-radius: 1.5rem; box-shadow: 0 26px 64px rgba(3, 10, 34, .5); animation: rd-ulaz .5s var(--rd-krivulja); } .prijava-zaglavlje { text-align: center; margin-bottom: 1.5rem; } .prijava-znak { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto .85rem; border-radius: 1.05rem; background: linear-gradient(135deg, var(--crm-primary), var(--rd-ljubicasta)); box-shadow: 0 10px 22px rgba(54, 87, 214, .3); } body.tema-tamna .prijava-znak { box-shadow: 0 10px 22px rgba(212, 175, 55, .26); } .prijava-znak img { width: 1.9rem; height: 1.9rem; object-fit: contain; } .prijava-znak-obavijest { color: #fff; } .prijava-znak-obavijest svg { width: 1.9rem; height: 1.9rem; } .prijava-zaglavlje h1 { margin: 0 0 .3rem; font-size: 1.32rem; font-weight: 900; letter-spacing: -.02em; color: var(--crm-ink); } .prijava-zaglavlje p { margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--crm-muted); } .prijava-forma label { display: block; margin: 0 0 .38rem .12rem; font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--crm-muted); } .prijava-polje { position: relative; margin-bottom: 1rem; } .prijava-polje svg { position: absolute; left: .85rem; top: 50%; width: 1.05rem; height: 1.05rem; transform: translateY(-50%); fill: none; stroke: var(--crm-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .prijava-polje input { width: 100%; padding: .88rem 1rem .88rem 2.5rem; font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--crm-ink); background: var(--crm-surface); border: 1.5px solid var(--crm-line); border-radius: .82rem; outline: none; transition: border-color var(--rd-brzo) linear, box-shadow var(--rd-srednje) var(--rd-krivulja); } .prijava-polje input:focus { border-color: var(--crm-primary); box-shadow: 0 0 0 4px var(--rd-plava-sjaj); } .prijava-polje input:focus + svg, .prijava-polje input:focus ~ svg { stroke: var(--crm-primary); } .prijava-gumb { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; margin-top: .35rem; padding: .95rem 1rem; font-family: inherit; font-size: .82rem; font-weight: 900; color: #fff; background: linear-gradient(100deg, var(--crm-primary), var(--rd-ljubicasta)); border: 0; border-radius: .82rem; box-shadow: 0 12px 26px rgba(54, 87, 214, .28); cursor: pointer; transition: transform var(--rd-brzo) var(--rd-krivulja), box-shadow var(--rd-brzo) var(--rd-krivulja); } .prijava-gumb:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(54, 87, 214, .36); } .prijava-gumb:active { transform: scale(.98); } .prijava-gumb:disabled { opacity: .65; cursor: wait; transform: none; } .prijava-gumb svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } body.tema-tamna .prijava-gumb { color: #1a1408; box-shadow: 0 12px 26px rgba(212, 175, 55, .26); } .prijava-sigurnost { display: flex; align-items: center; gap: .45rem; margin: 1.15rem 0 0; font-size: .68rem; font-weight: 600; line-height: 1.4; color: var(--crm-muted); } .prijava-sigurnost svg { flex-shrink: 0; width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.8; } .prijava-samostalna { margin: .9rem 0 0; padding: .75rem .85rem; font-size: .7rem; font-weight: 600; line-height: 1.5; color: var(--crm-muted); background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: .72rem; } .prijava-samostalna b { display: block; margin-bottom: .15rem; color: var(--crm-ink); } .prijava-samostalna.hidden { display: none; } .prijava-podnozje { margin: 1.2rem 0 0; text-align: center; font-size: .64rem; font-weight: 600; color: var(--crm-muted); } .prijava-kartica-obavijest { text-align: center; max-width: 27rem; } .prijava-znak-obavijest { background: linear-gradient(135deg, #e8a33d, #d1682c); } .prijava-obavijest-tekst { margin: 0 0 1.35rem; font-size: .84rem; font-weight: 500; line-height: 1.6; color: var(--crm-muted); } .prijava-traka { height: .38rem; overflow: hidden; background: var(--crm-surface); border-radius: 999px; } .prijava-traka i { display: block; width: 38%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--crm-primary), var(--rd-ljubicasta)); animation: crmMaintenanceProgress 2.1s ease-in-out infinite; } @media (max-width: 420px) { .prijava-kartica { padding: 1.6rem 1.25rem 1.25rem; border-radius: 1.25rem; } } @media (prefers-reduced-motion: reduce) { .prijava-pozadina span, .prijava-kartica, .prijava-traka i { animation: none !important; } .prijava-gumb:hover { transform: none !important; } } /* ============================================================================ UPRAVLJANJE SUSTAVOM — raspored s bočnim izbornikom sekcija ========================================================================== */ .superadmin-studio { gap: 0 !important; } .sa-zaglavlje { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; padding: 1rem 1.15rem; background: var(--crm-panel); border: 1px solid var(--crm-line); border-radius: 1rem; box-shadow: var(--rd-sjena-1); } .sa-znak { display: grid; place-items: center; flex-shrink: 0; width: 2.6rem; height: 2.6rem; color: #fff; background: linear-gradient(135deg, #b0374f, #7d1f36); border-radius: .78rem; } .sa-znak svg { width: 1.25rem; height: 1.25rem; } .sa-zaglavlje-tekst { flex: 1; min-width: 0; } .sa-zaglavlje-tekst p { margin: 0 0 .12rem; font-size: .58rem; font-weight: 900; letter-spacing: .15em; color: #b0374f; } .sa-zaglavlje-tekst h2 { margin: 0; font-size: 1.05rem; font-weight: 900; letter-spacing: -.02em; color: var(--crm-ink); } .sa-sinkroniziraj { display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0; padding: .6rem 1rem; font-family: inherit; font-size: .72rem; font-weight: 800; color: var(--crm-primary-dark); background: var(--crm-surface); border: 1.5px solid var(--crm-line); border-radius: .68rem; cursor: pointer; transition: border-color var(--rd-brzo) linear, transform var(--rd-brzo) var(--rd-krivulja); } .sa-sinkroniziraj:hover { border-color: var(--crm-primary); transform: translateY(-1px); } .sa-sinkroniziraj svg { width: .95rem; height: .95rem; } .sa-raspored { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1rem; flex: 1; min-height: 0; } .sa-izbornik { display: flex; flex-direction: column; gap: .16rem; padding: .85rem .7rem; overflow-y: auto; background: var(--crm-panel); border: 1px solid var(--crm-line); border-radius: 1rem; box-shadow: var(--rd-sjena-1); } .sa-izbornik-grupa { margin: .85rem 0 .35rem .6rem; font-size: .56rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--crm-muted); } .sa-izbornik-grupa:first-child { margin-top: .1rem; } .sa-izbornik button { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); align-items: center; gap: .65rem; width: 100%; padding: .62rem .7rem; font-family: inherit; text-align: left; color: var(--crm-muted); background: transparent; border: 1px solid transparent; border-radius: .68rem; cursor: pointer; transition: background-color var(--rd-brzo) linear, color var(--rd-brzo) linear, border-color var(--rd-brzo) linear, transform var(--rd-brzo) var(--rd-krivulja); } .sa-izbornik button svg { width: 1.05rem; height: 1.05rem; justify-self: center; } .sa-izbornik button span { display: grid; min-width: 0; } .sa-izbornik button b { font-size: .78rem; font-weight: 800; color: var(--crm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa-izbornik button small { font-size: .63rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa-izbornik button:hover { background: var(--crm-surface); transform: translateX(2px); } .sa-izbornik button.is-active { color: var(--crm-primary-dark); background: var(--rd-plava-sjaj); border-color: rgba(54, 87, 214, .28); } .sa-izbornik button.is-active b { color: var(--crm-primary-dark); } .sa-izbornik-oprez b { color: #b0374f !important; } .sa-izbornik-oprez.is-active { color: #8d2137 !important; background: rgba(176, 55, 79, .12) !important; border-color: rgba(176, 55, 79, .3) !important; } .sa-sadrzaj { padding: 1.15rem 1.25rem 1.5rem; overflow-y: auto; background: var(--crm-panel); border: 1px solid var(--crm-line); border-radius: 1rem; box-shadow: var(--rd-sjena-1); } .sa-sadrzaj-glava { margin-bottom: 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--crm-line); } .sa-sadrzaj-glava p { margin: 0 0 .2rem; font-size: .58rem; font-weight: 900; letter-spacing: .15em; color: var(--crm-primary); } .sa-sadrzaj-glava h3 { margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 900; letter-spacing: -.02em; color: var(--crm-ink); } .sa-sadrzaj-glava span { font-size: .76rem; font-weight: 500; line-height: 1.5; color: var(--crm-muted); } @media (max-width: 1080px) { .sa-raspored { grid-template-columns: minmax(0, 1fr); } .sa-izbornik { flex-direction: row; gap: .45rem; overflow-x: auto; overflow-y: hidden; padding: .6rem; } .sa-izbornik-grupa { display: none; } .sa-izbornik button { flex: 0 0 auto; width: auto; grid-template-columns: 1.1rem auto; padding: .55rem .8rem; } .sa-izbornik button small { display: none; } } @media (max-width: 620px) { .sa-zaglavlje { flex-wrap: wrap; } .sa-sinkroniziraj { width: 100%; justify-content: center; } .sa-sadrzaj { padding: 1rem .9rem 1.25rem; } } @media (prefers-reduced-motion: reduce) { .sa-izbornik button:hover, .sa-sinkroniziraj:hover { transform: none !important; } } /* ============================================================================ TAMNI MOD — DOPUNA Prvi generirani sloj čitao je samo ovu datoteku, pa su ostala svijetla pravila iz