/* ============================================================ Dark Mode · StajSis Toggled by adding/removing 'dark-mode' class on . This file must load AFTER all other CSS files. ============================================================ */ /* ── Smooth colour transition ──────────────────────────────── Applied only for the ~300 ms while toggling so that normal page interactions don't incur extra transition overhead. ─────────────────────────────────────────────────────────── */ html.dm-transitioning *, html.dm-transitioning *::before, html.dm-transitioning *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.20s ease !important; } /* ── Navbar icon button (dark mode toggle only) ────────────── Only the dark mode toggle uses .navbar-icon-btn. Refresh and logout keep their original inline styles. ─────────────────────────────────────────────────────────── */ .navbar-icon-btn { border: none; background: none; cursor: pointer; padding: 6px 10px; border-radius: 8px; transition: background-color 0.2s, color 0.2s; display: inline-flex; align-items: center; color: #697a8d; } .navbar-icon-btn:hover { background-color: #e8e8e8; } .navbar-icon-btn i { font-size: 1.4rem; } /* ── CSS custom property overrides ────────────────────────── Override Bootstrap / Sneat variables so that any component that consumes a variable automatically adapts. ─────────────────────────────────────────────────────────── */ html.dark-mode { --bs-body-bg: #0f0f0f; --bs-body-bg-rgb: 15, 15, 15; --bs-body-color: #b2b2b2; --bs-body-color-rgb: 178, 178, 178; --bs-border-color: #2a2a2a; --bs-secondary-bg: #161616; --bs-tertiary-bg: #0a0a0a; --bs-card-bg: #1e1e1e; --bs-card-cap-bg: #161616; --bs-modal-bg: #1e1e1e; --bs-dropdown-bg: #1e1e1e; --bs-heading-color: #e0e0e0; --bs-table-bg: #1e1e1e; --bs-table-striped-bg: rgba(255, 255, 255, 0.025); --bs-table-hover-bg: rgba(255, 255, 255, 0.04); --bs-table-border-color: #2a2a2a; --bs-table-color: #b2b2b2; } /* ── Body & global text ──────────────────────────────────── */ html.dark-mode body { background-color: #0f0f0f !important; color: #b2b2b2 !important; } html.dark-mode h1, html.dark-mode .h1, html.dark-mode h2, html.dark-mode .h2, html.dark-mode h3, html.dark-mode .h3, html.dark-mode h4, html.dark-mode .h4, html.dark-mode h5, html.dark-mode .h5, html.dark-mode h6, html.dark-mode .h6 { color: #e0e0e0 !important; } html.dark-mode .text-muted { color: #666666 !important; } html.dark-mode .text-dark { color: #e0e0e0 !important; } html.dark-mode .text-body { color: #b2b2b2 !important; } html.dark-mode .text-secondary { color: #8a8a8a !important; } html.dark-mode hr { border-color: #2a2a2a; opacity: 1; } /* Only colour non-component tags to avoid overriding menus */ html.dark-mode a:not(.btn):not(.nav-link):not(.menu-link):not(.dropdown-item):not(.app-brand-link):not(.navbar-icon-btn):not(.footer-link) { color: #7b91e0; } html.dark-mode a:not(.btn):not(.nav-link):not(.menu-link):not(.dropdown-item):not(.app-brand-link):not(.navbar-icon-btn):not(.footer-link):hover { color: #a0b2ea; } /* ── Layout wrappers ─────────────────────────────────────── */ html.dark-mode .content-wrapper { background-color: #0f0f0f; } html.dark-mode #layout-menu { border-right: 1px solid #2a2a2a; } /* ── Sidebar (.bg-menu-theme) ────────────────────────────── */ html.dark-mode .bg-menu-theme { background-color: #161616 !important; color: #9e9e9e; } html.dark-mode .bg-menu-theme .app-brand-text, html.dark-mode .app-brand-text.menu-text { color: #e0e0e0 !important; } html.dark-mode .bg-menu-theme .menu-link, html.dark-mode .bg-menu-theme .menu-horizontal-prev, html.dark-mode .bg-menu-theme .menu-horizontal-next { color: #9e9e9e !important; } html.dark-mode .bg-menu-theme .menu-link:hover, html.dark-mode .bg-menu-theme .menu-link:focus { color: #e0e0e0 !important; background-color: rgba(255, 255, 255, 0.06) !important; } html.dark-mode .bg-menu-theme .menu-icon { color: #777777 !important; } html.dark-mode .bg-menu-theme .menu-link:hover .menu-icon, html.dark-mode .bg-menu-theme .menu-link:focus .menu-icon { color: #aaaaaa !important; } /* Active item in sidebar */ html.dark-mode .bg-menu-theme .menu-inner > .menu-item.active > .menu-link, html.dark-mode .bg-menu-theme .menu-inner > .menu-item[class*="active"] > .menu-link, html.dark-mode .bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link, html.dark-mode .bg-menu-theme .menu-inner .menu-sub > .menu-item[class*="active"] > .menu-link { background-color: rgba(46, 125, 50, 0.2) !important; color: #6dc97e !important; } html.dark-mode .bg-menu-theme .menu-inner > .menu-item.active > .menu-link .menu-icon, html.dark-mode .bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link .menu-icon { color: inherit !important; } html.dark-mode .menu-inner-shadow { background: linear-gradient(#161616 41%, rgba(22, 22, 22, 0.11) 95%, rgba(22, 22, 22, 0)) !important; } html.dark-mode .sidebar-toggle-btn { color: #9e9e9e; } html.dark-mode .sidebar-toggle-btn:hover { background-color: rgba(255, 255, 255, 0.06) !important; color: #e0e0e0; } /* ── Top Navbar (.bg-navbar-theme / .layout-navbar) ─────── */ html.dark-mode .bg-navbar-theme { background-color: #161616 !important; color: #9e9e9e !important; } html.dark-mode .layout-navbar { background-color: rgba(22, 22, 22, 0.97) !important; border-bottom: 1px solid #2a2a2a !important; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25) !important; } html.dark-mode .bg-navbar-theme .navbar-nav > .nav-link, html.dark-mode .bg-navbar-theme .navbar-nav > .nav-item > .nav-link, html.dark-mode .bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link { color: #9e9e9e !important; } /* Navbar icon button (dark mode toggle) – dark mode overrides */ html.dark-mode .navbar-icon-btn { color: #9e9e9e; } html.dark-mode .navbar-icon-btn:hover { background-color: rgba(255, 255, 255, 0.08) !important; } /* ── Cards ───────────────────────────────────────────────── */ html.dark-mode .card { background-color: #1e1e1e !important; border-color: #2a2a2a !important; color: #b2b2b2; } html.dark-mode .card-header { background-color: #161616 !important; border-bottom-color: #2a2a2a !important; color: #e0e0e0; } html.dark-mode .card-footer { background-color: #161616 !important; border-top-color: #2a2a2a !important; } html.dark-mode .card-title, html.dark-mode .card-subtitle { color: #e0e0e0 !important; } /* ── Tables ──────────────────────────────────────────────── */ html.dark-mode .table { color: #b2b2b2; border-color: #2a2a2a; } html.dark-mode .table th { background-color: #161616 !important; color: #e0e0e0 !important; border-color: #2a2a2a !important; } html.dark-mode .table td, html.dark-mode .table tr { border-color: #2a2a2a !important; color: #b2b2b2; } html.dark-mode .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.04) !important; color: #e0e0e0; } html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.025) !important; color: #b2b2b2; } html.dark-mode .table-bordered, html.dark-mode .table-bordered td, html.dark-mode .table-bordered th { border-color: #2a2a2a !important; } /* ── Forms & Inputs ──────────────────────────────────────── */ html.dark-mode .form-control, html.dark-mode .form-select { background-color: #141414 !important; border-color: #2a2a2a !important; color: #e0e0e0 !important; } html.dark-mode .form-control:focus, html.dark-mode .form-select:focus { background-color: #141414 !important; border-color: #3d3d3d !important; color: #e0e0e0 !important; box-shadow: 0 0 0 0.15rem rgba(100, 100, 100, 0.35) !important; } html.dark-mode .form-control::placeholder { color: #555555 !important; } html.dark-mode .form-control:disabled, html.dark-mode .form-select:disabled { background-color: #0a0a0a !important; color: #666666 !important; border-color: #222222 !important; } html.dark-mode .input-group-text { background-color: #0f0f0f !important; border-color: #2a2a2a !important; color: #9e9e9e !important; } html.dark-mode .form-label, html.dark-mode label:not(.form-check-label):not(.btn) { color: #b2b2b2; } html.dark-mode .form-check-label { color: #b2b2b2; } html.dark-mode .form-check-input { background-color: #141414; border-color: #333333; } html.dark-mode .form-check-input:checked { background-color: #3a7d44; border-color: #3a7d44; } html.dark-mode .form-text { color: #666666; } /* ── Modals ──────────────────────────────────────────────── */ html.dark-mode .modal-content { background-color: #1e1e1e !important; border-color: #2a2a2a !important; color: #b2b2b2; } html.dark-mode .modal-header { background-color: #161616 !important; border-bottom-color: #2a2a2a !important; color: #e0e0e0; } html.dark-mode .modal-title { color: #e0e0e0 !important; } html.dark-mode .modal-footer { background-color: #161616 !important; border-top-color: #2a2a2a !important; } html.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ── Dropdowns ───────────────────────────────────────────── */ html.dark-mode .dropdown-menu { background-color: #1e1e1e !important; border-color: #2a2a2a !important; color: #b2b2b2; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } html.dark-mode .dropdown-item { color: #b2b2b2 !important; } html.dark-mode .dropdown-item:hover, html.dark-mode .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06) !important; color: #e0e0e0 !important; } html.dark-mode .dropdown-divider { border-top-color: #2a2a2a !important; } html.dark-mode .dropdown-header { color: #666666 !important; } /* ── Badges ──────────────────────────────────────────────── */ html.dark-mode .badge.bg-label-primary { background-color: rgba(105, 108, 255, 0.15) !important; color: #898bff !important; } html.dark-mode .badge.bg-label-success { background-color: rgba(113, 221, 55, 0.15) !important; color: #71dd37 !important; } html.dark-mode .badge.bg-label-warning { background-color: rgba(255, 171, 0, 0.15) !important; color: #ffab00 !important; } html.dark-mode .badge.bg-label-danger { background-color: rgba(255, 62, 29, 0.15) !important; color: #ff6347 !important; } html.dark-mode .badge.bg-label-info { background-color: rgba( 3, 195, 236, 0.15) !important; color: #03c3ec !important; } html.dark-mode .badge.bg-label-secondary { background-color: rgba(133, 146, 163, 0.15) !important; color: #b2b2b2 !important; } /* ── Alerts ──────────────────────────────────────────────── */ html.dark-mode .alert-primary { background-color: rgba(105, 108, 255, 0.10) !important; border-color: rgba(105, 108, 255, 0.25) !important; color: #9899ff !important; } html.dark-mode .alert-success { background-color: rgba(113, 221, 55, 0.10) !important; border-color: rgba(113, 221, 55, 0.25) !important; color: #71dd37 !important; } html.dark-mode .alert-warning { background-color: rgba(255, 171, 0, 0.10) !important; border-color: rgba(255, 171, 0, 0.25) !important; color: #ffb400 !important; } html.dark-mode .alert-danger { background-color: rgba(255, 62, 29, 0.10) !important; border-color: rgba(255, 62, 29, 0.25) !important; color: #ff6347 !important; } html.dark-mode .alert-info { background-color: rgba( 3, 195, 236, 0.10) !important; border-color: rgba( 3, 195, 236, 0.25) !important; color: #03c3ec !important; } /* ── List Groups ─────────────────────────────────────────── */ html.dark-mode .list-group-item { background-color: #1e1e1e !important; border-color: #2a2a2a !important; color: #b2b2b2; } html.dark-mode .list-group-item.active { background-color: #2e6635 !important; border-color: #2e6635 !important; color: #e8f5e9; } /* ── Nav Tabs ────────────────────────────────────────────── */ html.dark-mode .nav-tabs { border-bottom-color: #2a2a2a; } html.dark-mode .nav-tabs .nav-link { color: #9e9e9e; border-color: transparent; } html.dark-mode .nav-tabs .nav-link:hover { border-color: #2a2a2a; color: #e0e0e0; } html.dark-mode .nav-tabs .nav-link.active { background-color: #1e1e1e; border-color: #2a2a2a #2a2a2a #1e1e1e; color: #6dc97e; } /* ── Pagination ──────────────────────────────────────────── */ html.dark-mode .page-link { background-color: #1e1e1e !important; border-color: #2a2a2a !important; color: #9e9e9e !important; } html.dark-mode .page-link:hover { background-color: #252525 !important; color: #e0e0e0 !important; } html.dark-mode .page-item.active .page-link { background-color: #2e6635 !important; border-color: #2e6635 !important; color: #fff !important; } html.dark-mode .page-item.disabled .page-link { background-color: #0f0f0f !important; color: #3a3a3a !important; border-color: #2a2a2a !important; } /* ── Breadcrumbs ─────────────────────────────────────────── */ html.dark-mode .breadcrumb-item { color: #9e9e9e; } html.dark-mode .breadcrumb-item.active { color: #666666; } html.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: #3a3a3a; } html.dark-mode .breadcrumb-item a { color: #7b91e0; } /* ── Progress ────────────────────────────────────────────── */ html.dark-mode .progress { background-color: #2a2a2a !important; } /* ── Footer ──────────────────────────────────────────────── */ html.dark-mode footer.content-footer { background-color: #161616 !important; border-top-color: #2a2a2a !important; } html.dark-mode .footer-link { color: #9e9e9e !important; } html.dark-mode .footer-link:hover { color: #e0e0e0 !important; } /* ── Scrollbar ───────────────────────────────────────────── */ html.dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark-mode ::-webkit-scrollbar-track { background: #0f0f0f; } html.dark-mode ::-webkit-scrollbar-thumb { background: #303030; border-radius: 8px; } html.dark-mode ::-webkit-scrollbar-thumb:hover { background: #3d3d3d; } /* ── Utility overrides ───────────────────────────────────── */ html.dark-mode .bg-white { background-color: #1e1e1e !important; } html.dark-mode .bg-light { background-color: #161616 !important; } html.dark-mode .border { border-color: #2a2a2a !important; } html.dark-mode .border-top, html.dark-mode .border-bottom, html.dark-mode .border-start, html.dark-mode .border-end { border-color: #2a2a2a !important; } html.dark-mode .shadow { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important; } html.dark-mode .shadow-sm { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3) !important; } /* ── btn-unified (dark mode) ─────────────────────────────── */ html.dark-mode .btn-unified { background: #1f3b22; color: #6dc97e; border-color: #2a5030; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } html.dark-mode .btn-unified:hover, html.dark-mode .btn-unified:focus { background: #264928; border-color: #3a7d44; color: #87de96; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); outline: none; } html.dark-mode .btn-unified:active { background: #1a3020; border-color: #2e6635; color: #6dc97e; } html.dark-mode .btn-unified:disabled, html.dark-mode .btn-unified.disabled { background: #1f3b22; color: #4a8055; border-color: #2a5030; opacity: 0.5; } html.dark-mode .btn-unified .spinner-border { color: #6dc97e; } /* ── btn-unified-danger (dark mode) ───────────────────────── */ html.dark-mode .btn-unified-danger { background: #3a1f22; color: #ff9aa6; border-color: #5a2d33; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } html.dark-mode .btn-unified-danger:hover, html.dark-mode .btn-unified-danger:focus { background: #4a2529; border-color: #7a3a43; color: #ffb3bc; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); outline: none; } html.dark-mode .btn-unified-danger:active { background: #341a1e; border-color: #5f2f36; color: #ff9aa6; } html.dark-mode .btn-unified-danger:disabled, html.dark-mode .btn-unified-danger.disabled { background: #3a1f22; color: #b56d76; border-color: #5a2d33; opacity: 0.5; } html.dark-mode .btn-unified-danger .spinner-border { color: #ff9aa6; } /* ── Blazor error UI ─────────────────────────────────────── */ html.dark-mode #blazor-error-ui { background: #1e1e1e; color: #e0e0e0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4); } /* ══════════════════════════════════════════════════════════ PAGE-SPECIFIC DARK MODE OVERRIDES ══════════════════════════════════════════════════════════ */ /* ── 1. StajDetay (StajDetay.razor) ────────────────────── */ html.dark-mode .acc-outer { border-color: #2a2a2a !important; background: #1e1e1e; box-shadow: 0 1px 6px rgba(0,0,0,0.35); } html.dark-mode .acc-outer-header { color: #e0e0e0; } /* Student info header bar – inline-styled child spans */ html.dark-mode .acc-outer-header[style*="f5f7fa"] { background: linear-gradient(135deg, #252525, #161616) !important; color: #e0e0e0 !important; } html.dark-mode .acc-outer-header[style*="f5f7fa"] span { color: #e0e0e0 !important; } html.dark-mode .acc-outer-header[style*="f5f7fa"] span + span, html.dark-mode .acc-outer-header[style*="f5f7fa"] span:nth-child(2) { color: #9e9e9e !important; } /* Per-type header gradients */ html.dark-mode .acc-outer-header.header-stajI { background: linear-gradient(135deg, #1a2d4a, #1a3a5c) !important; color: #7bb5e8 !important; } html.dark-mode .acc-outer-header.header-stajII { background: linear-gradient(135deg, #1a3020, #1e3d26) !important; color: #6dc97e !important; } html.dark-mode .acc-outer-header.header-ime { background: linear-gradient(135deg, #3a2510, #4a2e0a) !important; color: #f0a060 !important; } html.dark-mode .acc-inner { border-color: #2a2a2a !important; background: #161616; } html.dark-mode .acc-inner-header { background: #222222 !important; color: #b2b2b2 !important; border-bottom: 1px solid #2a2a2a; } html.dark-mode .acc-inner-header:hover { background: #252525 !important; } html.dark-mode .acc-inner-body { background: #1e1e1e; } html.dark-mode .detail-label { color: #777777 !important; } html.dark-mode .detail-value { color: #e0e0e0 !important; } html.dark-mode .bool-icon-true { color: #6dc97e !important; } html.dark-mode .bool-icon-false { color: #ff6347 !important; } /* Status badges */ html.dark-mode .status-g { background: #1e3d26 !important; color: #6dc97e !important; } html.dark-mode .status-d { background: #1a2d4a !important; color: #7bb5e8 !important; } html.dark-mode .status-a, html.dark-mode .status-c, html.dark-mode .status-f { background: #3a2d10 !important; color: #f0c060 !important; } html.dark-mode .status-b, html.dark-mode .status-z { background: #3a1a1a !important; color: #f08080 !important; } html.dark-mode .status-j { background: #3a2510 !important; color: #f0a060 !important; } html.dark-mode .status-e { background: #1a2d35 !important; color: #7bd0e0 !important; } /* ── 2. Profilim (Profilim.razor) ──────────────────────── */ /* The Açıklama box uses an inline-style #e8f5e8 background and a .text-dark child. We target the .p-3.rounded inside .form-control-plaintext which is unique to that section. */ html.dark-mode .form-control-plaintext .p-3.rounded { background-color: #1f3b22 !important; border-left-color: #3a7d44 !important; } html.dark-mode .form-control-plaintext .p-3.rounded small, html.dark-mode .form-control-plaintext .p-3.rounded .text-dark { color: #a8d5b0 !important; } /* ── 3. Dashboard – Duyuru widget (AnnouncementSummary.razor) */ html.dark-mode .ann-card { background: #1e1e1e !important; border-color: #2a2a2a !important; } html.dark-mode .ann-card:hover { border-color: #3d3d3d !important; box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important; } html.dark-mode .ann-title-row h5 { color: #e0e0e0 !important; } html.dark-mode .ann-date-badge { background: #222222 !important; color: #9e9e9e !important; } html.dark-mode .ann-desc { color: #b2b2b2 !important; } html.dark-mode .ann-read-more { color: #8a8dff !important; } html.dark-mode .ann-read-more:hover { color: #aaaeff !important; } html.dark-mode .ann-all-link { color: #666666 !important; } html.dark-mode .ann-all-link:hover { color: #8a8dff !important; } html.dark-mode .ann-empty { color: #666666 !important; } html.dark-mode .ann-empty i { color: #333333 !important; } html.dark-mode .ann-more-info { background: #1f3b22 !important; border-color: #2a5030 !important; color: #6dc97e !important; } html.dark-mode .ann-more-info a { color: #87de96 !important; } /* Duyuru modal (shared by dashboard widget) */ html.dark-mode .ann-modal-box { background: #1e1e1e !important; box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important; } html.dark-mode .ann-modal-header { border-bottom-color: #2a2a2a !important; } html.dark-mode .ann-modal-header h4 { color: #e0e0e0 !important; } html.dark-mode .ann-modal-meta span { color: #777777 !important; } html.dark-mode .ann-modal-body p { color: #b2b2b2 !important; } html.dark-mode .ann-modal-footer { border-top-color: #2a2a2a !important; } html.dark-mode .ann-modal-close { background: #222222 !important; color: #9e9e9e !important; } html.dark-mode .ann-modal-close:hover { background: #252525 !important; color: #e0e0e0 !important; } html.dark-mode .ann-modal-x { color: #666666 !important; } html.dark-mode .ann-modal-x:hover { color: #e0e0e0 !important; } /* ── 4. Announcements page (Announcements.razor) ─────────── */ html.dark-mode .anp-tabs { border-bottom-color: #2a2a2a !important; } html.dark-mode .anp-tab { color: #666666 !important; } html.dark-mode .anp-tab:hover { color: #9e9e9e !important; } html.dark-mode .anp-tab.active { color: #e0e0e0 !important; } html.dark-mode .anp-tab.active::after { background: #8a8dff !important; } html.dark-mode .anp-section-title { color: #9e9e9e !important; } /* View cards */ html.dark-mode .anp-card { background: #1e1e1e !important; border-color: #2a2a2a !important; } html.dark-mode .anp-card:hover { border-color: #3d3d3d !important; box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important; } html.dark-mode .anp-card-title { color: #e0e0e0 !important; } html.dark-mode .anp-card-desc { color: #b2b2b2 !important; } html.dark-mode .anp-meta { color: #666666 !important; } html.dark-mode .anp-read-link { color: #8a8dff !important; } html.dark-mode .anp-read-link:hover { color: #aaaeff !important; } /* Manage cards */ html.dark-mode .anp-manage-card { background: #1e1e1e !important; border-color: #2a2a2a !important; } html.dark-mode .anp-manage-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important; } html.dark-mode .anp-manage-title { color: #e0e0e0 !important; } html.dark-mode .anp-manage-desc { color: #9e9e9e !important; } html.dark-mode .anp-btn-icon { background: #222222 !important; border-color: #2a2a2a !important; color: #9e9e9e !important; } html.dark-mode .anp-btn-icon:hover { background: #252525 !important; color: #e0e0e0 !important; } html.dark-mode .anp-btn-icon.danger:hover { background: rgba(220,53,69,0.15) !important; color: #ff6347 !important; border-color: rgba(220,53,69,0.3) !important; } html.dark-mode .anp-add-btn { background: #1f3b22 !important; color: #6dc97e !important; border-color: #2a5030 !important; } html.dark-mode .anp-add-btn:hover { background: #264928 !important; color: #87de96 !important; } html.dark-mode .anp-empty { color: #3a3a3a !important; } html.dark-mode .anp-empty i { color: #2a2a2a !important; } /* Detail / Form modals */ html.dark-mode .anp-modal-box { background: #1e1e1e !important; box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important; } html.dark-mode .anp-modal-header { border-bottom-color: #2a2a2a !important; } html.dark-mode .anp-modal-header h4 { color: #e0e0e0 !important; } html.dark-mode .anp-modal-meta span { color: #777777 !important; } html.dark-mode .anp-modal-body p { color: #b2b2b2 !important; } html.dark-mode .anp-modal-footer { border-top-color: #2a2a2a !important; } html.dark-mode .anp-modal-close { background: #222222 !important; color: #9e9e9e !important; } html.dark-mode .anp-modal-close:hover { background: #252525 !important; color: #e0e0e0 !important; } html.dark-mode .anp-modal-x { color: #666666 !important; } html.dark-mode .anp-modal-x:hover { color: #e0e0e0 !important; } html.dark-mode .anp-form-label { color: #9e9e9e !important; } html.dark-mode .anp-form-input, html.dark-mode .anp-form-textarea { background: #141414 !important; border-color: #2a2a2a !important; color: #e0e0e0 !important; } html.dark-mode .anp-form-input:focus, html.dark-mode .anp-form-textarea:focus { border-color: #3d3d3d !important; box-shadow: 0 0 0 0.15rem rgba(100,100,100,0.35) !important; } /* ── 5. Files – "Test" button in Belge modal ─────────────── */ html.dark-mode .btn-outline-primary { color: #8a8dff !important; border-color: #5557cc !important; background: transparent !important; } html.dark-mode .btn-outline-primary:hover { background: rgba(105,108,255,0.15) !important; border-color: #8a8dff !important; color: #aaaeff !important; } /* ── 6. SelectAcd – table-primary thead ──────────────────── */ html.dark-mode .table-primary, html.dark-mode .table-primary > th, html.dark-mode .table-primary > td, html.dark-mode thead.table-primary tr, html.dark-mode thead.table-primary th { background-color: #1a2d4a !important; color: #7bb5e8 !important; border-color: #1e3658 !important; } html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.025) !important; } html.dark-mode .table.table-hover tbody tr:hover > * { background-color: rgba(255,255,255,0.05) !important; } html.dark-mode .text-primary, html.dark-mode .fas.fa-user-tie.text-primary { color: #7bb5e8 !important; } /* ── 7. Dashboard – "Tüm Duyurular" link-button ─────────── */ html.dark-mode .btn-all-ann { background: #222222 !important; color: #9e9e9e !important; } html.dark-mode .btn-all-ann:hover { background: #252525 !important; color: #e0e0e0 !important; } /* ── 8. Apply – date workday info & doc feedback ─────────── */ html.dark-mode .date-info-warning { background-color: rgba(255,171,0,0.12) !important; border-left-color: rgba(255,171,0,0.50) !important; color: #ffd166 !important; } html.dark-mode .date-info-success { background-color: rgba(109,201,126,0.10) !important; border-left-color: rgba(109,201,126,0.50) !important; color: #6dc97e !important; } html.dark-mode .date-info-ok { background-color: rgba(123,181,232,0.10) !important; border-left-color: rgba(123,181,232,0.45) !important; color: #7bb5e8 !important; } html.dark-mode .apply-doc-info { background-color: #1a2540 !important; border-left-color: #2a3d6e !important; color: #7bb5e8 !important; } html.dark-mode .apply-doc-success { background-color: #1a2d20 !important; border-left-color: #2a4d35 !important; color: #6dc97e !important; } html.dark-mode .apply-doc-error { background-color: #2d1a1f !important; border-left-color: #5a2830 !important; color: #f08080 !important; } /* ── 9. Apply – persistent Uyarı note ───────────────────── */ html.dark-mode .apply-static-note { background-color: rgba(180,35,24,0.12) !important; border-left-color: rgba(180,35,24,0.45) !important; color: #f08080 !important; } /* ── 10. Login / Forget – auth page buttons ─────────────── */ /* The card bg is already dark via global .card override. btn-primary on these pages is bright blue — mute it. */ html.dark-mode .authentication-inner .btn-primary { background-color: #3d3f8f !important; border-color: #4d50a0 !important; color: #e0e2ff !important; } html.dark-mode .authentication-inner .btn-primary:hover { background-color: #4a4da0 !important; border-color: #5558b0 !important; color: #f0f1ff !important; } /* App brand text "StajSis" has inline color:black */ html.dark-mode .authentication-inner .app-brand-text { color: #e0e0e0 !important; } /* ── 11. AcdPopup – accordion cards inside Detay modal ─────── */ html.dark-mode .acc-popup-inner { border-color: #2a2a2a !important; background: #1e1e1e; } html.dark-mode .acc-popup-header { background: #222222 !important; color: #b2b2b2 !important; border-bottom: 1px solid #2a2a2a; } html.dark-mode .acc-popup-header:hover { background: #252525 !important; } html.dark-mode .acc-popup-body { background: #1e1e1e !important; color: #b2b2b2 !important; } /* Workday info box inside popup – override yellow bg */ html.dark-mode .acc-popup-workday { background: rgba(255,171,0,0.10) !important; border-left-color: rgba(255,171,0,0.45) !important; color: #ffd166 !important; } html.dark-mode .popup-modal-footer { border-top-color: #2a2a2a !important; } /* ── 12. Process_Info page ───────────────────────────────── */ html.dark-mode .timeline-body h5 { color: #9e9e9e !important; } html.dark-mode .timeline-body p { color: #888888 !important; } html.dark-mode .timeline-connector { background: linear-gradient(180deg, #3d3d3d, #2a2a2a) !important; } /* Management-only amber box */ html.dark-mode .mgmt-box { background: #2a2010 !important; border-left-color: #c87820 !important; } html.dark-mode .mgmt-badge { color: #f0a060 !important; } html.dark-mode .mgmt-box p { color: #d0a870 !important; } /* Status inline badges */ html.dark-mode .status-tag { background: rgba(105,108,255,0.15) !important; color: #9899ff !important; } html.dark-mode .status-tag-success { background: rgba(113,221,55,0.12) !important; color: #71dd37 !important; }