/* ========================================================================== eDoktor klinički portal - TEMA 2026 (pregled, 24.09.2026.) Po uzoru na digitalnicjenik.hr: font Inter Tight, tipografska hijerarhija, zaobljenja, sjene, kartice, tablice, polja, gumbi (pill), bočni izbornik. Boje: paleta "3. Menta" uz iPhone neutralne sive; nigdje tamne podloge. Učitava se SAMO kad je kolačić ed_tema=2026 (vidi _tema-2026.php). SVA pravila su pod .tema-2026 (klasa na ), stara tema je netaknuta. Specifičnost: većina pravila koristi :where(.tema-2026) pa ima ISTU specifičnost kao clinic-dashboard.css (pobjeđuje redoslijedom), a slabija je od pravila pojedinih stranica s dvije klase (njihovi mobilni prijelomi ostaju). Svojstva koja clinic-dashboard.css mijenja u @media su ponovljena dolje u istim prijelomima (768 / 480 px). ========================================================================== */ /* ---------- Font (Inter Tight, OFL, lokalno, podskup latinica + č ć đ š ž) ---------- */ @font-face { font-family: 'EDInterTight'; src: url('fonts/InterTight-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'EDInterTight'; src: url('fonts/InterTight-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'EDInterTight'; src: url('fonts/InterTight-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'EDInterTight'; src: url('fonts/InterTight-Bold.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; } /* ---------- Boje i mjere: JEDNO mjesto za zamjenu ---------- */ html.tema-2026 { /* naglasak: paleta "3. Menta" (Petra, 24.09.2026.) */ --t-akcent: #00a39a; /* brojevi, ikone, prekidači, fokus */ --t-akcent-hover: #008a82; /* hover / pritisak */ --t-akcent-tamni: #00807a; /* tekst naglaska na svijetloj podlozi */ --t-akcent-svijetla: #e9f8f6; --t-akcent-rub: #bdebe6; --t-akcent-prsten: rgba(0, 163, 154, 0.2); --t-akcent-sjena: rgba(0, 163, 154, 0.4); --t-gumb: #00968e; /* podloga primarnog gumba (bijeli tekst 3,65:1) */ --t-gumb-hover: #008a82; --t-izbornik: #fbfbfd; /* bočni izbornik */ --t-izbornik-aktivna: #e5f6f4; --t-kockica-naslov: #00756f; /* ime pacijenta u zauzetoj kockici */ /* iPhone neutralne */ --t-stranica: #f2f2f7; /* podloga stranice */ --t-naslov: #1c1c1e; --t-tekst: #1c1c1e; --t-tekst-2: #3a3a3c; --t-blijedo: #6e6e73; --t-blijedo-2: #8e8e93; --t-bijela: #ffffff; --t-podloga: #f7f7f9; /* tihe plohe unutar kartica */ --t-podloga-2: #e9e9ee; /* segmentirana kontrola */ --t-rub: #e5e5ea; --t-rub-jaci: #d1d1d6; --t-rub-tihi: #efeff4; --t-rub-kartica: rgba(0, 0, 0, 0.06); /* opasnost */ --t-opasnost: #dc2626; --t-opasnost-hover: #b91c1c; --t-opasnost-svijetla: #fef2f2; --t-opasnost-rub: #fecaca; /* zaobljenja */ --t-r-malo: 8px; --t-r-polje: 12px; --t-r-kockica: 12px; --t-r-kartica: 20px; --t-r-modal: 24px; --t-r-pill: 999px; --t-r-segment: 10px; /* sjene (meke, iPhone) */ --t-sjena-tiha: 0 1px 2px rgba(0, 0, 0, 0.04); --t-sjena-kartica: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -20px rgba(0, 0, 0, 0.18); --t-sjena-istaknuta: 0 20px 50px -24px rgba(0, 0, 0, 0.25); --t-sjena-modal: 0 30px 80px -30px rgba(0, 0, 0, 0.35); --t-sjena-zaglavlje: 0 1px 0 #e5e5ea; --t-sjena-segment: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04); --t-zavjesa: rgba(0, 0, 0, 0.25); /* svijetla zavjesa iza modala */ --t-fokus: 0 0 0 3px var(--t-akcent-prsten); /* font */ --t-font: 'EDInterTight', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------- Osnova ---------- */ :where(html.tema-2026) body { font-family: var(--t-font); background: var(--t-stranica); color: var(--t-tekst-2); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :where(html.tema-2026) :is(button, input, select, textarea) { font-family: inherit; } :where(html.tema-2026) a:where(:not([class])) { color: var(--t-akcent-hover); } :where(html.tema-2026) :is(h1, h2, h3, h4) { color: var(--t-naslov); font-weight: 500; letter-spacing: -0.01em; } :where(html.tema-2026) strong, :where(html.tema-2026) b { font-weight: 600; } :where(html.tema-2026) .text-muted { color: var(--t-blijedo); } /* ---------- Bočni izbornik ---------- */ :where(html.tema-2026) .sidebar { background: var(--t-izbornik); box-shadow: none; border-right: 1px solid var(--t-rub); } :where(html.tema-2026) .sidebar-header { padding: 26px 20px 20px; border-bottom: 1px solid var(--t-rub-tihi); } :where(html.tema-2026) .sidebar-header .logo img { height: 30px; } :where(html.tema-2026) .sidebar-header .logo span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-akcent-hover); background: var(--t-akcent-svijetla); border: 1px solid var(--t-akcent-rub); border-radius: var(--t-r-pill); padding: 3px 9px; } :where(html.tema-2026) .sidebar-clinic-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--t-naslov); margin-top: 16px; padding: 0; } html.tema-2026 .sidebar-osoba { color: var(--t-tekst-2); font-size: 13px; margin-top: 4px; } html.tema-2026 .sidebar-osoba span { color: var(--t-blijedo); font-size: 11px; letter-spacing: 0.08em; margin-top: 2px; } :where(html.tema-2026) .sidebar-nav { padding: 14px 12px; } :where(html.tema-2026) .sidebar-nav a { gap: 12px; padding: 10px 14px; margin: 1px 0; font-size: 14.5px; font-weight: 500; color: var(--t-tekst-2); border-left: 0; border-radius: var(--t-r-polje); transition: background 0.15s ease, color 0.15s ease; } :where(html.tema-2026) .sidebar-nav a svg { width: 19px; height: 19px; color: var(--t-blijedo); transition: color 0.15s ease; } :where(html.tema-2026) .sidebar-nav a:hover { background: var(--t-podloga); color: var(--t-tekst); } :where(html.tema-2026) .sidebar-nav a:hover svg { color: var(--t-tekst-2); } :where(html.tema-2026) .sidebar-nav a.active { background: var(--t-izbornik-aktivna); color: var(--t-akcent-tamni); font-weight: 600; box-shadow: none; } :where(html.tema-2026) .sidebar-nav a.active svg { color: var(--t-akcent); } :where(html.tema-2026) .sidebar-nav .nav-badge { background: var(--t-opasnost); font-weight: 600; border-radius: var(--t-r-pill); height: 20px; min-width: 20px; } :where(html.tema-2026) .sidebar-footer { padding: 14px 20px 18px; border-top: 1px solid var(--t-rub-tihi); } :where(html.tema-2026) .sidebar-footer a { font-size: 14px; font-weight: 500; color: var(--t-blijedo); padding: 8px 14px; margin: 0 -8px; border-radius: var(--t-r-polje); } :where(html.tema-2026) .sidebar-footer a:hover { color: var(--t-opasnost); background: var(--t-opasnost-svijetla); } /* ---------- Mobilna gornja traka ---------- */ :where(html.tema-2026) .mobile-topbar { background: rgba(251, 251, 253, 0.92); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); } :where(html.tema-2026) .mobile-menu-toggle { color: var(--t-naslov); border-radius: var(--t-r-pill); border: 1px solid var(--t-rub); background: var(--t-bijela); } /* ---------- Glavni sadržaj i zaglavlje stranice ---------- */ @media (min-width: 769px) { :where(html.tema-2026) .main-content { padding: 32px 40px 48px; } } :where(html.tema-2026) .header-bar { margin-bottom: 28px; gap: 16px 20px; } :where(html.tema-2026) .header-bar h1 { font-size: 30px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--t-naslov); } /* Navigacija datuma i prekidači (segmentirani pill) */ :where(html.tema-2026) .date-navigator { background: var(--t-bijela); border: 1px solid var(--t-rub); border-radius: var(--t-r-pill); box-shadow: var(--t-sjena-tiha); padding: 4px 6px; } :where(html.tema-2026) .date-navigator button { border-radius: var(--t-r-pill); width: 34px; height: 34px; color: var(--t-blijedo); } :where(html.tema-2026) .date-navigator button:hover { background: var(--t-podloga-2); color: var(--t-naslov); } :where(html.tema-2026) .date-navigator .current-date { font-weight: 600; color: var(--t-naslov); font-size: 14px; } :where(html.tema-2026) :is(.view-toggle, .raspored-nacin-toggle) { background: var(--t-podloga-2); border: 0; border-radius: var(--t-r-segment); padding: 2px; } :where(html.tema-2026) :is(.view-toggle, .raspored-nacin-toggle) :is(button, a) { border-radius: 8px; font-weight: 500; color: var(--t-blijedo); } :where(html.tema-2026) :is(.view-toggle, .raspored-nacin-toggle) :is(button, a):hover { color: var(--t-naslov); text-decoration: none; } :where(html.tema-2026) :is(.view-toggle, .raspored-nacin-toggle) :is(button, a).active { background: var(--t-bijela); color: var(--t-naslov); font-weight: 600; box-shadow: var(--t-sjena-segment); } /* Pretraga pacijenata */ :where(html.tema-2026) .patient-search { border: 1px solid var(--t-rub); border-radius: var(--t-r-pill); height: 42px; padding: 0 14px; box-shadow: var(--t-sjena-tiha); transition: border-color 0.15s ease, box-shadow 0.15s ease; } :where(html.tema-2026) .patient-search:focus-within { border-color: var(--t-akcent); box-shadow: var(--t-fokus); } :where(html.tema-2026) .patient-search input[type="search"] { font-size: 14px; color: var(--t-tekst); } /* ---------- Kockice statistike ---------- */ :where(html.tema-2026) .stats-grid { gap: 16px; margin-bottom: 28px; } :where(html.tema-2026) .stat-card { background: var(--t-bijela); border: 1px solid var(--t-rub-kartica); border-radius: var(--t-r-kartica); padding: 22px 24px; box-shadow: var(--t-sjena-kartica); } :where(html.tema-2026) .stat-card .stat-number { font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--t-akcent); } :where(html.tema-2026) .stat-card.stat-edoktor .stat-number { color: var(--t-akcent); } :where(html.tema-2026) .stat-card .stat-label { font-size: 13.5px; font-weight: 500; color: var(--t-blijedo); margin-top: 6px; } :where(html.tema-2026) .stat-card.stat-available .stat-number { color: var(--t-akcent); } :where(html.tema-2026) .stat-card .stat-number.stat-number-danger { color: var(--t-opasnost); } :where(html.tema-2026) .stat-card .stat-sub { color: var(--t-blijedo-2); font-size: 12px; } /* ---------- Kartice ---------- */ :where(html.tema-2026) .card { background: var(--t-bijela); border: 1px solid var(--t-rub-kartica); border-radius: var(--t-r-kartica); box-shadow: var(--t-sjena-kartica); padding: 28px; margin-bottom: 20px; } :where(html.tema-2026) .card-header { margin-bottom: 18px; gap: 12px; flex-wrap: wrap; } :where(html.tema-2026) .card-header h2, :where(html.tema-2026) .card > h2, :where(html.tema-2026) .card > h3 { font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: var(--t-naslov); } /* ---------- Raspored (boje statusa i kružići doktora ostaju) ---------- */ :where(html.tema-2026) .schedule-wrapper { background: var(--t-bijela); border: 1px solid var(--t-rub-kartica); border-radius: var(--t-r-kartica); box-shadow: var(--t-sjena-kartica); } :where(html.tema-2026) .schedule-header-cell { font-weight: 600; color: var(--t-tekst-2); background: var(--t-podloga); border-bottom: 1px solid var(--t-rub); } :where(html.tema-2026) .schedule-header-cell.is-today { background: var(--t-akcent-svijetla); color: var(--t-akcent-tamni); } :where(html.tema-2026) .schedule-time-label { color: var(--t-blijedo); font-weight: 500; } :where(html.tema-2026) .schedule-slot { border-radius: var(--t-r-malo); } :where(html.tema-2026) .slot-empty:hover { border-color: var(--t-akcent); background: var(--t-akcent-svijetla); color: var(--t-akcent); } :where(html.tema-2026) .daily-doctors { padding: 12px 20px 20px; } :where(html.tema-2026) .daily-doctor + .daily-doctor { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--t-rub-tihi); } :where(html.tema-2026) .daily-doctor-head { font-size: 15px; color: var(--t-naslov); padding: 10px 0 14px; } :where(html.tema-2026) .daily-doctor-head strong { font-weight: 600; } :where(html.tema-2026) .daily-tiles { gap: 10px; } :where(html.tema-2026) .daily-tile { border-radius: var(--t-r-kockica); padding: 10px 12px; } :where(html.tema-2026) .daily-tile-time { font-weight: 600; letter-spacing: 0.01em; } :where(html.tema-2026) .daily-tile .slot-patient { font-weight: 600; font-size: 13px; } html.tema-2026 .daily-tile.schedule-slot .slot-patient { color: var(--t-kockica-naslov); } :where(html.tema-2026) .daily-tile .edoktor-badge { border-radius: var(--t-r-pill); font-weight: 600; } :where(html.tema-2026) .daily-tile.slot-empty:hover { border-color: var(--t-akcent); color: var(--t-akcent); } :where(html.tema-2026) .daily-web-all { color: var(--t-blijedo); } :where(html.tema-2026) .slot-eye { border-radius: var(--t-r-pill); } :where(html.tema-2026) .weekly-days { gap: 10px; padding: 12px 20px 20px; } :where(html.tema-2026) .weekly-day-head { border-radius: var(--t-r-kockica); color: var(--t-naslov); font-weight: 500; } :where(html.tema-2026) .weekly-day-head:hover { background: var(--t-podloga-2); text-decoration: none; } :where(html.tema-2026) .weekly-day.is-today .weekly-day-head { background: var(--t-akcent-svijetla); color: var(--t-akcent-tamni); box-shadow: inset 0 0 0 1px var(--t-akcent-rub); } :where(html.tema-2026) .weekly-tile { border-radius: 10px; } :where(html.tema-2026) .weekly-day-napomena { border-radius: var(--t-r-malo); } :where(html.tema-2026) .zajedno-vrijeme { color: var(--t-blijedo); font-weight: 600; } :where(html.tema-2026) .daily-zajedno { padding: 12px 20px 20px; } /* napomena za dan */ :where(html.tema-2026) .dan-napomena-blok { margin: 14px 20px 0; } :where(html.tema-2026) .dan-napomena-prikaz { background: var(--t-akcent-svijetla); border: 1px solid var(--t-akcent-rub); border-radius: var(--t-r-polje); color: var(--t-akcent-tamni); padding: 12px 16px; } :where(html.tema-2026) .dan-napomena-uredi-btn { color: var(--t-akcent-hover); } :where(html.tema-2026) .dan-napomena-dodaj:hover { color: var(--t-akcent-hover); border-color: var(--t-akcent); text-decoration: none; } :where(html.tema-2026) .dan-napomena-forma { border-radius: var(--t-r-polje); background: var(--t-podloga); border-color: var(--t-rub); } :where(html.tema-2026) .dan-napomena-forma textarea { border-color: var(--t-rub); border-radius: var(--t-r-malo); } :where(html.tema-2026) .modal-upozorenje-zatvoreno { border-radius: var(--t-r-polje); } /* atribut hidden na napomeni dana: stara tema ga gazi s display:flex (prazan blok se vidi) */ html.tema-2026 :is(.dan-napomena-prikaz, .dan-napomena-forma, .dan-napomena-dodaj, .modal-upozorenje-zatvoreno)[hidden] { display: none; } html.tema-2026 .modal-upozorenje-zatvoreno { flex-wrap: wrap; } html.tema-2026 .modal-upozorenje-zatvoreno span { flex: 1 1 0; min-width: 0; } /* ---------- Tablice ---------- */ :where(html.tema-2026) thead th { font-size: 12.5px; font-weight: 600; color: var(--t-blijedo); text-transform: none; letter-spacing: 0; padding: 12px 16px; background: var(--t-podloga); border-bottom: 1px solid var(--t-rub); white-space: nowrap; } :where(html.tema-2026) thead th:first-child { border-top-left-radius: var(--t-r-malo); } :where(html.tema-2026) thead th:last-child { border-top-right-radius: var(--t-r-malo); } :where(html.tema-2026) tbody td { padding: 14px 16px; font-size: 14px; color: var(--t-tekst-2); border-bottom: 1px solid var(--t-rub-tihi); vertical-align: middle; } :where(html.tema-2026) tbody tr:last-child td { border-bottom: 0; } :where(html.tema-2026) tbody tr:hover { background: var(--t-podloga); } :where(html.tema-2026) tbody td a:where(:not([class])) { color: var(--t-naslov); font-weight: 600; } :where(html.tema-2026) tbody td a:where(:not([class])):hover { color: var(--t-akcent-hover); } /* ---------- Oznake (boje statusa ostaju, oblik pill) ---------- */ :where(html.tema-2026) .badge { border-radius: var(--t-r-pill); font-size: 12px; font-weight: 500; padding: 4px 11px; letter-spacing: 0.01em; } :where(html.tema-2026) .edoktor-badge { border-radius: var(--t-r-pill); font-weight: 600; } /* ---------- Gumbi (pill; primarni plavi, sekundarni obrub, opasnost crvena) ---------- */ :where(html.tema-2026) .btn { gap: 8px; padding: 11px 22px; border-radius: var(--t-r-pill); font-size: 14.5px; font-weight: 500; line-height: 1.35; border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } :where(html.tema-2026) .btn:focus-visible { outline: none; box-shadow: var(--t-fokus); } :where(html.tema-2026) .btn-primary { background: var(--t-gumb); border-color: var(--t-gumb); color: #fff; font-weight: 600; } :where(html.tema-2026) .btn-primary:hover { background: var(--t-gumb-hover); border-color: var(--t-gumb-hover); box-shadow: 0 10px 24px -12px var(--t-akcent-sjena); } :where(html.tema-2026) .btn-success { background: var(--t-gumb); border-color: var(--t-gumb); color: #fff; font-weight: 600; } :where(html.tema-2026) .btn-success:hover { background: var(--t-gumb-hover); border-color: var(--t-gumb-hover); box-shadow: 0 10px 24px -12px var(--t-akcent-sjena); } :where(html.tema-2026) .btn-outline { background: var(--t-bijela); color: var(--t-naslov); border: 1px solid var(--t-rub-jaci); } :where(html.tema-2026) .btn-outline:hover { background: var(--t-podloga); border-color: var(--t-blijedo-2); color: var(--t-tekst); } :where(html.tema-2026) .btn-danger { background: var(--t-opasnost); border-color: var(--t-opasnost); color: #fff; } :where(html.tema-2026) .btn-danger:hover { background: var(--t-opasnost-hover); border-color: var(--t-opasnost-hover); box-shadow: 0 10px 24px -12px rgba(220, 38, 38, 0.5); } :where(html.tema-2026) .btn:where(:not([class*="btn-"])), :where(html.tema-2026) .btn-secondary { background: var(--t-bijela); color: var(--t-naslov); border: 1px solid var(--t-rub-jaci); border-radius: var(--t-r-pill); font-weight: 500; } :where(html.tema-2026) .btn:where(:not([class*="btn-"])):hover, :where(html.tema-2026) .btn-secondary:hover { background: var(--t-podloga); border-color: var(--t-blijedo-2); } :where(html.tema-2026) .btn-sm { padding: 7px 14px; font-size: 13px; } /* bijeli tekst na menti: najmanje 14px i 600 */ :where(html.tema-2026) :is(.btn-primary, .btn-success, .btn-danger).btn-sm { font-size: 14px; font-weight: 600; } /* gumbi ne lome tekst u dva retka (npr. "Napiši nalaz" u tablici kartona na mobitelu) */ :where(html.tema-2026) .btn-sm, :where(html.tema-2026) td .btn { white-space: nowrap; } html.tema-2026 td .btn-sm { padding: 6px 12px; font-size: 12.5px; gap: 6px; } :where(html.tema-2026) .btn[disabled], :where(html.tema-2026) .btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; } /* ---------- Modali ---------- */ :where(html.tema-2026) .modal-overlay { background: var(--t-zavjesa); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } :where(html.tema-2026) .modal { border-radius: var(--t-r-modal); box-shadow: var(--t-sjena-modal); border: 1px solid var(--t-rub); } :where(html.tema-2026) .modal-header { padding: 22px 28px; border-bottom: 1px solid var(--t-rub-tihi); } :where(html.tema-2026) .modal-header h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--t-naslov); } :where(html.tema-2026) .modal-close { width: 38px; height: 38px; border-radius: var(--t-r-pill); border: 1px solid var(--t-rub); background: var(--t-bijela); color: var(--t-tekst); } :where(html.tema-2026) .modal-close:hover { background: var(--t-podloga-2); color: var(--t-tekst); } :where(html.tema-2026) .modal-body { padding: 24px 28px; } :where(html.tema-2026) .modal-footer { padding: 18px 28px 22px; border-top: 1px solid var(--t-rub-tihi); } /* ---------- Obrasci i polja ---------- */ :where(html.tema-2026) .form-group { margin-bottom: 18px; } :where(html.tema-2026) .form-group label { font-size: 14px; font-weight: 500; color: var(--t-tekst); text-transform: none; letter-spacing: 0; margin-bottom: 7px; } :where(html.tema-2026) .form-group input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"])), :where(html.tema-2026) .form-group select, :where(html.tema-2026) .form-group textarea { padding: 12px 14px; border: 1px solid var(--t-rub-jaci); border-radius: var(--t-r-polje); font-size: 15px; color: var(--t-tekst); background-color: var(--t-bijela); transition: border-color 0.15s ease, box-shadow 0.15s ease; } :where(html.tema-2026) .form-group input:focus, :where(html.tema-2026) .form-group select:focus, :where(html.tema-2026) .form-group textarea:focus { border-color: var(--t-akcent); box-shadow: var(--t-fokus); outline: none; } :where(html.tema-2026) .form-group :is(input, textarea)::placeholder { color: var(--t-blijedo-2); } :where(html.tema-2026) .form-row { gap: 16px; } /* opća polja izvan .form-group: samo boja ruba, zaobljenje i fokus (bez mijenjanja razmaka) */ :where(html.tema-2026) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], input[type="url"], input[type="search"], select, textarea):focus { border-color: var(--t-akcent); box-shadow: var(--t-fokus); outline: none; } :where(html.tema-2026) :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--t-akcent); } /* ---------- Obavijesti (toast) ---------- */ :where(html.tema-2026) .toast { border-radius: var(--t-r-polje); font-weight: 500; box-shadow: var(--t-sjena-istaknuta); } :where(html.tema-2026) .toast-success { background: var(--t-bijela); color: var(--t-akcent-tamni); border: 1px solid var(--t-akcent-rub); } :where(html.tema-2026) .toast-error { background: var(--t-bijela); color: var(--t-opasnost-hover); border: 1px solid var(--t-opasnost-rub); } :where(html.tema-2026) .coupon-result { border-radius: var(--t-r-malo); } /* ========================================================================== Stranice s vlastitim klasama: samo boje, rubovi, zaobljenja i tipografija (razmaci i prijelomi stranica ostaju njihovi) ========================================================================== */ /* Cjenik (svc-*) */ html.tema-2026 .svc-header h1 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; color: var(--t-naslov); line-height: 1.2; } html.tema-2026 .svc-btn { border-radius: var(--t-r-pill); font-weight: 500; } html.tema-2026 .svc-btn-primary { background: var(--t-gumb); border-color: var(--t-gumb); color: #fff; font-weight: 600; font-size: 14px; } html.tema-2026 .svc-btn-primary:hover { background: var(--t-gumb-hover); border-color: var(--t-gumb-hover); opacity: 1; } html.tema-2026 .svc-btn-outline { color: var(--t-naslov); border-color: var(--t-rub-jaci); } html.tema-2026 .svc-btn-danger { color: var(--t-opasnost); border-color: var(--t-opasnost-rub); } html.tema-2026 .svc-category { border: 1px solid var(--t-rub-kartica); border-radius: var(--t-r-kartica); box-shadow: var(--t-sjena-kartica); } html.tema-2026 .svc-cat-header { background: var(--t-bijela); } html.tema-2026 .svc-cat-header.expanded { border-bottom-color: var(--t-rub-tihi); } html.tema-2026 .svc-cat-name { font-weight: 600; color: var(--t-naslov); font-size: 16px; letter-spacing: -0.01em; } html.tema-2026 .svc-cat-count { background: var(--t-podloga-2); color: var(--t-blijedo); border-radius: var(--t-r-pill); font-weight: 500; } html.tema-2026 .svc-card { border-color: var(--t-rub-tihi); border-radius: var(--t-r-kockica); } html.tema-2026 .svc-card:hover { border-color: var(--t-rub); } html.tema-2026 .svc-name { font-weight: 600; color: var(--t-naslov); } html.tema-2026 .svc-price-regular { font-weight: 600; color: var(--t-naslov); } html.tema-2026 .svc-filter-tab { border-color: var(--t-rub); color: var(--t-tekst-2); font-weight: 500; } html.tema-2026 .svc-filter-tab.active { background: var(--t-akcent-svijetla); border-color: var(--t-akcent-rub); color: var(--t-akcent-tamni); font-weight: 600; } html.tema-2026 .svc-badge { border-radius: var(--t-r-pill); font-weight: 600; } html.tema-2026 .svc-badge-klinika { background: var(--t-akcent-svijetla); color: var(--t-akcent-hover); } html.tema-2026 .svc-booking-toggle input:checked + .svc-booking-slider { background: var(--t-akcent); } html.tema-2026 .svc-sort-btn { border-radius: var(--t-r-malo); border-color: var(--t-rub); } html.tema-2026 .svc-sort-btn:hover { color: var(--t-akcent); border-color: var(--t-akcent-rub); background: var(--t-akcent-svijetla); } html.tema-2026 .svc-modal-overlay { background: var(--t-zavjesa); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } html.tema-2026 .svc-modal { border-radius: var(--t-r-modal); box-shadow: var(--t-sjena-modal); } html.tema-2026 .svc-modal h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--t-naslov); } html.tema-2026 .svc-form-group label { font-size: 14px; font-weight: 500; color: var(--t-tekst); } html.tema-2026 .svc-input { border: 1px solid var(--t-rub-jaci); border-radius: var(--t-r-polje); color: var(--t-tekst); } html.tema-2026 .svc-input:focus { border-color: var(--t-akcent); box-shadow: var(--t-fokus); } html.tema-2026 .svc-radio-group input[type="radio"], html.tema-2026 .svc-checkbox-group input[type="checkbox"] { accent-color: var(--t-akcent); } html.tema-2026 .svc-toast { border-radius: var(--t-r-polje); } html.tema-2026 .svc-toast-success { background: var(--t-akcent-svijetla); color: var(--t-akcent-tamni); border-color: var(--t-akcent-rub); } /* Poruke (msg-*) */ html.tema-2026 .msg-layout { border: 1px solid var(--t-rub-kartica); border-radius: var(--t-r-kartica); box-shadow: var(--t-sjena-kartica); } html.tema-2026 .msg-list-item:hover, html.tema-2026 .msg-list-item.active { background: var(--t-akcent-svijetla); } html.tema-2026 .msg-list-item .msg-name { color: var(--t-naslov); } html.tema-2026 .msg-list-item .msg-unread { background: var(--t-akcent); border-radius: var(--t-r-pill); } html.tema-2026 .msg-thread-header { font-weight: 600; color: var(--t-naslov); font-size: 16px; } html.tema-2026 .msg-bubble { border-radius: 16px; } html.tema-2026 .msg-bubble.clinic { background: var(--t-akcent-svijetla); color: var(--t-tekst); border: 1px solid var(--t-akcent-rub); border-bottom-right-radius: 4px; } html.tema-2026 .msg-bubble.clinic .msg-bubble-time { color: var(--t-akcent-tamni); opacity: 1; } html.tema-2026 .msg-bubble.patient { border-bottom-left-radius: 4px; } html.tema-2026 .msg-reply input { border-radius: var(--t-r-pill); } html.tema-2026 .msg-reply input:focus { border-color: var(--t-akcent); box-shadow: var(--t-fokus); outline: none; } /* Karton pacijenta: razgovor i bilješke */ html.tema-2026 .poruke-razgovor .poruka-oblacic.od-klinike { background: var(--t-akcent-svijetla); color: var(--t-akcent-tamni); } html.tema-2026 .poruke-razgovor .poruka-inicijali { background: var(--t-akcent); } html.tema-2026 .biljeska-stavka { border-color: var(--t-rub); border-radius: var(--t-r-polje); } html.tema-2026 .pac-natrag-link { color: var(--t-blijedo); } html.tema-2026 .pac-natrag-link:hover { color: var(--t-akcent-hover); } /* Nalazi (nz-*) */ html.tema-2026 .nz-kartica { border: 1px solid var(--t-rub-kartica); border-radius: var(--t-r-kartica); box-shadow: var(--t-sjena-kartica); } html.tema-2026 .nz-kartica h2 { color: var(--t-naslov); font-weight: 500; letter-spacing: -0.01em; } html.tema-2026 .nz-vrsta label { border-color: var(--t-rub); border-radius: var(--t-r-polje); font-weight: 500; } html.tema-2026 .nz-vrsta input:checked + span { color: var(--t-akcent-tamni); } html.tema-2026 .nz-vrsta label:has(input:checked) { border-color: var(--t-akcent); background: var(--t-akcent-svijetla); } html.tema-2026 .nz-red input, html.tema-2026 .nz-red select { border-color: var(--t-rub-jaci); border-radius: var(--t-r-polje); } html.tema-2026 .nz-trazi input { border-color: var(--t-rub-jaci); border-radius: var(--t-r-pill); padding-left: 16px; } html.tema-2026 .nz-tablica a { color: var(--t-naslov); } html.tema-2026 .nz-tablica a:hover { color: var(--t-akcent-hover); } html.tema-2026 .nz-pac { border-color: var(--t-rub); border-radius: var(--t-r-polje); } html.tema-2026 .nz-stanje { border-radius: var(--t-r-pill); } html.tema-2026 .nz-greska { border-radius: var(--t-r-polje); } html.tema-2026 .nz-q-rezultati { border-color: var(--t-rub); border-radius: var(--t-r-polje); box-shadow: var(--t-sjena-istaknuta); } html.tema-2026 .nz-q-stavka:hover, html.tema-2026 .nz-q-stavka.active { background: var(--t-akcent-svijetla); } /* Lista čekanja (lc-*) */ html.tema-2026 .lc-kartica { border: 1px solid var(--t-rub-kartica); border-radius: var(--t-r-kartica); box-shadow: var(--t-sjena-kartica); } html.tema-2026 .lc-badge.notified { background: var(--t-akcent-svijetla); color: var(--t-akcent-tamni); } html.tema-2026 .lc-modal { border-radius: var(--t-r-modal); box-shadow: var(--t-sjena-modal); } html.tema-2026 .lc-modal select { border-color: var(--t-rub-jaci); border-radius: var(--t-r-polje); } /* Osoblje (doktori.php) */ html.tema-2026 .osoblje-kartica { border: 1px solid var(--t-rub-kartica); border-radius: var(--t-r-kartica); box-shadow: var(--t-sjena-kartica); } html.tema-2026 .osoblje-kartica-info strong { color: var(--t-naslov); font-weight: 600; } html.tema-2026 .vise-meni { border-radius: var(--t-r-polje); box-shadow: var(--t-sjena-istaknuta); border-color: var(--t-rub); } html.tema-2026 .vise-meni button:hover { background: var(--t-podloga-2); } html.tema-2026 .hours-day { border-color: var(--t-rub); border-radius: var(--t-r-polje); } html.tema-2026 .hours-row input[type=time], html.tema-2026 .hours-row input[type=text] { border-color: var(--t-rub-jaci); border-radius: var(--t-r-malo); } html.tema-2026 .ovl-grid label { border-radius: var(--t-r-malo); } html.tema-2026 .boja-popover { border-radius: var(--t-r-polje); box-shadow: var(--t-sjena-istaknuta); } /* Postavke */ html.tema-2026 .notify-radio-group input[type="radio"], html.tema-2026 .overage-row input[type="checkbox"] { accent-color: var(--t-akcent); } /* Nalaz (uredi / pregled): gumbi i bilješke uz nalaz; papir nalaza se NE dira */ html.tema-2026 .nalaz-s-biljeskama .biljeske-panel { border-radius: var(--t-r-kartica); } /* Samo nalazi način i demo traka: zaobljenje obavijesti */ html.tema-2026 .sn-toast { border-radius: var(--t-r-polje); background: var(--t-bijela); color: var(--t-tekst); border: 1px solid var(--t-rub); box-shadow: var(--t-sjena-istaknuta); } html.tema-2026 .sn-toast a { color: var(--t-akcent-tamni); } html.tema-2026 .demo-traka { background: rgba(251, 251, 253, 0.94); color: var(--t-tekst); border-top: 1px solid var(--t-rub); box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); } html.tema-2026 .demo-traka strong { color: var(--t-akcent-tamni); } html.tema-2026 .demo-traka a { color: var(--t-tekst); border-color: var(--t-rub-jaci); background: var(--t-bijela); } html.tema-2026 .demo-traka a.demo-cta { background: var(--t-gumb); border-color: var(--t-gumb); color: #fff; } html.tema-2026 pre.nz-pre { background: var(--t-podloga); color: var(--t-tekst); border: 1px solid var(--t-rub); } html.tema-2026 .ob-preview .ob-preview-sms { background: #e9e9eb; color: var(--t-tekst); border-radius: 18px; } html.tema-2026 .nz-potpis { background: var(--t-akcent-svijetla); color: var(--t-tekst); border: 1px solid var(--t-akcent-rub); } html.tema-2026 [style*="background:#0f172a"], html.tema-2026 [style*="background: #0f172a"] { background: var(--t-podloga) !important; color: var(--t-tekst) !important; border: 1px solid var(--t-rub); } /* Automatsko dopunjavanje u modalu termina */ html.tema-2026 #patient-autocomplete, html.tema-2026 #service-autocomplete { border-radius: var(--t-r-polje); } html.tema-2026 #patient-autocomplete .ac-item:hover, html.tema-2026 #service-autocomplete .ac-item.ac-active { background: var(--t-akcent-svijetla); } /* ---------- Prijava (login.php) ---------- */ html.tema-2026 .login-card { border: 1px solid var(--t-rub-kartica); border-radius: var(--t-r-modal); box-shadow: var(--t-sjena-istaknuta); } html.tema-2026 .login-card h1 { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--t-naslov); } html.tema-2026 .login-card .subtitle { color: var(--t-blijedo); } html.tema-2026 .login-card .form-group label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--t-tekst); } html.tema-2026 .login-card .form-group input { border: 1px solid var(--t-rub-jaci); border-radius: var(--t-r-polje); } html.tema-2026 .login-card .form-group input:focus { border-color: var(--t-akcent); box-shadow: var(--t-fokus); } html.tema-2026 .btn-login { background: var(--t-gumb); font-weight: 600; border-radius: var(--t-r-pill); font-weight: 500; } html.tema-2026 .btn-login:hover { background: var(--t-gumb-hover); transform: none; box-shadow: 0 10px 24px -12px var(--t-akcent-sjena); } html.tema-2026 .clinic-icon { background: var(--t-akcent-svijetla); border: 1px solid var(--t-akcent-rub); border-radius: var(--t-r-pill); } html.tema-2026 .clinic-icon svg { color: var(--t-akcent); } html.tema-2026 .forgot-link:hover, html.tema-2026 .back-link:hover { color: var(--t-akcent-hover); } html.tema-2026 .login-card .error { border-radius: var(--t-r-polje); } /* ========================================================================== Mobilni prijelomi (ponavljaju ono što clinic-dashboard.css mijenja u @media, jer gornja pravila imaju istu specifičnost i dolaze kasnije) ========================================================================== */ @media (max-width: 768px) { :where(html.tema-2026) .sidebar { border-right: 0; border-bottom: 1px solid var(--t-rub); box-shadow: var(--t-sjena-zaglavlje); } :where(html.tema-2026) .mobile-topbar { height: 60px; box-shadow: var(--t-sjena-zaglavlje); } :where(html.tema-2026) .main-content { padding: 16px; padding-top: 76px; } :where(html.tema-2026) .header-bar { margin-bottom: 18px; gap: 12px; } :where(html.tema-2026) .header-bar h1 { font-size: 24px; } :where(html.tema-2026) .date-navigator { border-radius: var(--t-r-pill); } :where(html.tema-2026) .stats-grid { gap: 8px; margin-bottom: 16px; } :where(html.tema-2026) .stat-card { padding: 10px 6px; border-radius: 14px; } :where(html.tema-2026) .stat-card .stat-number { font-size: 20px; } :where(html.tema-2026) .stat-card .stat-label { font-size: 11px; margin-top: 2px; line-height: 1.2; } :where(html.tema-2026) .card { padding: 18px 16px; border-radius: 16px; } :where(html.tema-2026) .modal { max-width: 100%; border-radius: 18px; } :where(html.tema-2026) .modal-header { padding: 18px 18px; } :where(html.tema-2026) .modal-body { padding: 18px; } :where(html.tema-2026) .modal-footer { padding: 14px 18px 18px; flex-wrap: wrap; } :where(html.tema-2026) .schedule-wrapper { border-radius: 16px; } :where(html.tema-2026) .daily-doctors, :where(html.tema-2026) .daily-zajedno { padding: 8px 12px 14px; } :where(html.tema-2026) .weekly-days { padding: 8px 12px 14px; } :where(html.tema-2026) .dan-napomena-blok { margin: 10px 12px 0; } :where(html.tema-2026) thead th { padding: 10px 12px; } :where(html.tema-2026) tbody td { padding: 12px; } html.tema-2026 .svc-header h1 { font-size: 24px; } /* široke tablice (npr. pacijenti) klize unutar kartice umjesto da šire cijelu stranicu */ :where(html.tema-2026) .card:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; } :where(html.tema-2026) thead th { white-space: normal; } } @media (max-width: 480px) { :where(html.tema-2026) .stats-grid { gap: 6px; } :where(html.tema-2026) .stat-card { padding: 8px 4px; } :where(html.tema-2026) .stat-card .stat-number { font-size: 18px; } :where(html.tema-2026) .stat-card .stat-label { font-size: 10px; } :where(html.tema-2026) :is(.view-toggle, .raspored-nacin-toggle) button { padding: 8px 12px; font-size: 12px; } :where(html.tema-2026) .btn { padding: 10px 16px; } :where(html.tema-2026) .btn-sm { padding: 7px 12px; } }