/* ════════════════════════════════════════════════════════════════
MERGED CONTENT FROM panel-modern.css (Sprint 5 final konsolidasyonu)
panel-modern.css cascade'in BAŞINDA yer alıyordu — burada da öyle.
Bu noktadan sonra: visual + luxury + themes + v2 + office sırasıyla.
════════════════════════════════════════════════════════════════ */
.employee-list-table .action-cluster {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-width: 100px;
}
.employee-list-table .action-cluster form {
margin: 0;
display: inline-flex;
align-items: center;
}
.employee-list-table .icon-btn {
vertical-align: middle;
margin: 0 2px;
}
.employee-list-table td[data-label="Organizasyon"],
.employee-list-table td[data-label="Organization"] {
max-width: 220px;
white-space: normal;
word-break: break-word;
}
.employee-list-table td[data-label="İşlemler"],
.employee-list-table td[data-label="Actions"] {
min-width: 120px;
max-width: 160px;
text-align: center;
white-space: nowrap;
}
@media (max-width: 900px) {
.employee-list-table td[data-label="Organizasyon"],
.employee-list-table td[data-label="Organization"] {
max-width: 120px;
font-size: 0.85em;
}
.employee-list-table td[data-label="İşlemler"],
.employee-list-table td[data-label="Actions"] {
min-width: 80px;
max-width: 100px;
font-size: 0.85em;
}
}
/* AI Status Indicator - Minimal footer style */
.sidebar-footer-ai-status {
border-top: 1px solid var(--ui-border);
margin-top: 12px;
padding-bottom: 8px;
}
.sidebar-ai-status-row {
opacity: 0.65;
filter: grayscale(0.2);
font-size: 13px;
font-weight: 600;
color: var(--ui-muted);
letter-spacing: 0.2px;
transition: opacity 0.2s;
}
html[data-theme="dark"] .sidebar-footer-ai-status {
border-top: 1px solid var(--ui-border-strong);
}
html[data-theme="dark"] .sidebar-ai-status-row {
color: var(--ui-muted-soft);
}
:root {
--ui-bg: #f4f1ea;
--ui-surface: #fbf9f5;
--ui-surface-2: #ffffff;
--ui-surface-3: #f6f3ee;
--ui-border: #dfd7cc;
--ui-border-strong: #c9beb0;
--ui-text: #1b2430;
--ui-muted: #5e6a79;
--ui-muted-soft: #768396;
--ui-primary: #0f6cbd;
--ui-primary-rgb: 15, 108, 189;
--ui-primary-2: #128a7a;
--ui-danger: #b4233c;
--ui-warning: #b76a00;
--ui-success: #1a7f4f;
--ui-radius-lg: 16px;
--ui-radius-md: 12px;
--ui-radius-sm: 10px;
--ui-shadow: 0 8px 24px rgba(19, 33, 53, 0.08);
--ui-shadow-soft: 0 4px 14px rgba(19, 33, 53, 0.06);
--ui-shadow-card: 0 2px 8px rgba(19, 33, 53, 0.07), 0 1px 3px rgba(19, 33, 53, 0.04);
--ui-shadow-card-hover: 0 6px 18px rgba(19, 33, 53, 0.11), 0 2px 4px rgba(19, 33, 53, 0.05);
--ui-shadow-sm: 0 1px 4px rgba(19, 33, 53, 0.06);
/* Shadow Tier System — tutarlı gölge hiyerarşisi */
--shadow-t1: 0 2px 8px rgba(19,33,53,.07), 0 1px 3px rgba(19,33,53,.04); /* KPI, birincil kartlar */
--shadow-t2: 0 1px 3px rgba(19,33,53,.05); /* Grafikler, ikincil kartlar */
--shadow-t0: none; /* Yalnızca kenarlık */
--ui-fs-kicker: 0.6875rem; /* 11px — tüm overline/kicker etiketleri */
--ui-fs-summary: 0.98rem;
--ui-fs-label: 0.81rem;
--ui-fs-table-cell: 0.89rem;
--ui-fs-table-head: 0.74rem;
/* Typography Scale — net adımlar, "neredeyse aynı" yok */
--font-size-h1: 1.75rem; /* 28px — sayfa başlığı */
--font-size-h2: 1.375rem; /* 22px — büyük bölüm */
--font-size-h3: 1.25rem; /* 20px — kart başlığı */
--font-size-h4: 1rem; /* 16px — alt bölüm */
--font-size-h5: 0.875rem; /* 14px — küçük başlık */
--font-size-h6: 0.875rem; /* 14px — mini başlık */
--font-size-body: 0.875rem; /* 14px — gövde metni */
--font-size-small: 0.75rem; /* 12px — yardımcı metin */
--font-size-xs: 0.6875rem; /* 11px — en küçük / label */
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* Spacing Scale — 8px grid (8/16/24/32/48px) */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.5rem; /* 24px */
--spacing-xl: 2rem; /* 32px */
--spacing-2xl: 3rem; /* 48px */
/* Gap Scale — 8px grid */
--gap-xs: 0.25rem; /* 4px */
--gap-sm: 0.5rem; /* 8px */
--gap-md: 1rem; /* 16px */
--gap-lg: 1.5rem; /* 24px */
--gap-xl: 2rem; /* 32px */
/* Card Padding — 8px grid tokens */
--card-pad: 1.5rem; /* 24px — birincil kart iç boşluğu */
--card-pad-md: 1rem; /* 16px — ikincil / kompakt kart */
--card-pad-sm: 0.75rem; /* 12px — yoğun / sidebar elemanları */
/* Card Gap — kartlar arası boşluk */
--card-gap: 1rem; /* 16px — satır içi kart arası */
--card-gap-lg: 1.5rem; /* 24px — bölüm arası */
/* Fixed layout variables */
--top-band-max: 1296px;
--top-band-gutter: 12px;
--top-band-edge: max(var(--top-band-gutter), calc((100vw - var(--top-band-max)) / 2));
--menu-top: 0px;
--menu-h: 64px;
--menu-gap: 0px;
/* CSS fallback — JS syncStackTotal() bunu gerçek ölçümle override eder */
--stack-total: calc(var(--menu-top) + var(--menu-h) + var(--menu-gap));
--sidebar-w: 220px;
--sidebar-w-collapsed: 84px;
--sidebar-bg: #eef4fc;
--sidebar-border: rgba(15,108,189,.08);
}
html[data-theme="dark"] {
--sidebar-bg: #0d1117;
--sidebar-border: rgba(255,255,255,.06);
}
html[data-theme="dark"] {
--ui-bg: #0f1725;
--ui-surface: #141f31;
--ui-surface-2: #18253a;
--ui-surface-3: #1d2a40;
--ui-border: #2b3a55;
--ui-border-strong: #46597a;
--ui-text: #eef4ff;
--ui-muted: #b5c4dc;
--ui-muted-soft: #93a7c4;
--ui-primary: #7cb8ff;
--ui-primary-2: #5ce5cf;
--ui-danger: #ff8ea3;
--ui-warning: #ffd07f;
--ui-success: #4ade80;
--ui-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
--ui-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.10);
--ui-shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.26), 0 2px 6px rgba(0, 0, 0, 0.14);
--ui-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.16);
/* Shadow Tier System — dark mod */
--shadow-t1: 0 2px 10px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.10);
--shadow-t2: 0 1px 4px rgba(0,0,0,.12);
--shadow-t0: none;
}
body {
font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
line-height: 1.5;
background: var(--ui-bg);
color: var(--ui-text);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Ambient blob layer — glassmorphism arka planı ── */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse 72% 55% at 8% 12%, rgba(var(--ui-primary-rgb), 0.13) 0%, transparent 70%),
radial-gradient(ellipse 55% 65% at 92% 15%, rgba(18, 138, 122, 0.10) 0%, transparent 68%),
radial-gradient(ellipse 60% 50% at 55% 92%, rgba(var(--ui-primary-rgb), 0.08) 0%, transparent 65%),
radial-gradient(ellipse 45% 40% at 20% 75%, rgba(139, 92, 246, 0.07) 0%, transparent 60%);
will-change: auto;
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.016em;
line-height: var(--line-height-tight);
}
/* Net ağırlık skalası — her seviye görsel olarak farklı */
h1 { font-size: var(--font-size-h1); font-weight: 800; }
h2 { font-size: var(--font-size-h2); font-weight: 750; }
h3 { font-size: var(--font-size-h3); font-weight: 700; }
h4 { font-size: var(--font-size-h4); font-weight: 650; letter-spacing: -0.01em; }
h5 { font-size: var(--font-size-h5); font-weight: 600; letter-spacing: 0; }
h6 { font-size: var(--font-size-h6); font-weight: 600; letter-spacing: 0; }
.form-label, label {
font-weight: 650;
}
html[data-theme="light"] .text-muted,
html[data-theme="light"] .small.text-muted,
html[data-theme="light"] .form-text {
color: var(--ui-muted, #5a6678) !important;
}
html[data-theme="light"] h1, html[data-theme="light"] h2,
html[data-theme="light"] h3, html[data-theme="light"] h4,
html[data-theme="light"] h5, html[data-theme="light"] h6,
html[data-theme="light"] .card-title,
html[data-theme="light"] .card-title-soft,
html[data-theme="light"] .corp-list-title,
html[data-theme="light"] .emp-list-title,
html[data-theme="light"] .service-subtitle {
color: var(--ui-text, #1f2b3a) !important;
}
html[data-theme="light"] .form-label,
html[data-theme="light"] label,
html[data-theme="light"] .fw-semibold,
html[data-theme="light"] .fw-bold,
html[data-theme="light"] .fw-600 {
color: var(--ui-text, #243041);
}
html[data-theme="light"] .panel-hero .opacity-75,
html[data-theme="light"] .selector-sub,
html[data-theme="light"] .selector-wifi-box,
html[data-theme="light"] .selector-wifi-value.text-muted {
color: var(--ui-muted, #566274) !important;
opacity: 1 !important;
}
html[data-theme="light"] .panel-surface,
html[data-theme="light"] .glass-card {
color: var(--ui-text);
}
html[data-theme="light"] .card,
html[data-theme="light"] .card-body,
html[data-theme="light"] .card-header,
html[data-theme="light"] .list-group-item,
html[data-theme="light"] .nav-link,
html[data-theme="light"] .tab-pane,
html[data-theme="light"] .accordion-button,
html[data-theme="light"] .accordion-body {
color: var(--ui-text, #243041);
}
html[data-theme="light"] .table-modern tbody td,
html[data-theme="light"] .table-modern thead th,
html[data-theme="light"] .corp-list-title,
html[data-theme="light"] .emp-list-title {
color: var(--ui-text, #243041);
}
html[data-theme="light"] .table tbody td,
html[data-theme="light"] .table tbody th,
html[data-theme="light"] .detail-table td,
html[data-theme="light"] .detail-table th,
html[data-theme="light"] .empty-row td {
color: #243041;
}
html[data-theme="light"] .metric-pill {
background: rgba(255, 255, 255, 0.9);
}
html[data-theme="light"] .badge.bg-light,
html[data-theme="light"] .badge.text-bg-light,
html[data-theme="light"] .badge.text-bg-secondary,
html[data-theme="light"] .badge.text-bg-dark {
color: #243041 !important;
}
html[data-theme="light"] .btn-outline-primary,
html[data-theme="light"] .btn-outline-success,
html[data-theme="light"] .btn-outline-danger {
font-weight: 600;
}
.panel-surface {
background: linear-gradient(145deg, var(--ui-surface), var(--ui-surface-2));
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-soft);
}
.panel-soft-card {
border-radius: var(--ui-radius-lg);
border: 1px solid rgba(var(--ui-primary-rgb), 0.1);
background: var(--ui-surface-2);
box-shadow: var(--ui-shadow-card);
}
.panel-soft-card.is-active {
border-color: rgba(var(--ui-primary-rgb), 0.24);
box-shadow: var(--shadow-t1);
background: linear-gradient(155deg, rgba(var(--ui-primary-rgb), 0.08), rgba(var(--ui-primary-rgb), 0.02));
}
.panel-summary-grid {
display: grid;
gap: var(--card-gap); /* 16px */
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.panel-focus-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.panel-focus-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-height: 164px;
padding: var(--card-pad-md); /* 16px */
color: inherit;
text-decoration: none;
}
.panel-focus-card:hover,
.panel-focus-card:focus-visible {
color: inherit;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.09);
}
.panel-focus-icon {
width: 44px;
height: 44px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(var(--ui-primary-rgb), 0.11);
color: var(--ui-primary);
font-size: 1.1rem;
}
.panel-focus-title {
font-size: 1rem;
font-weight: 700;
color: var(--ui-text);
}
.panel-focus-meta {
font-size: 0.84rem;
line-height: 1.6;
color: var(--ui-muted);
}
.panel-focus-stat {
margin-top: auto;
font-size: 0.84rem;
font-weight: 700;
color: var(--ui-primary);
}
.panel-summary-pill {
padding: var(--card-pad-md); /* 16px */
}
.panel-summary-label {
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ui-muted);
}
.panel-summary-value {
margin-top: 0.15rem;
font-size: 1.02rem;
font-weight: 700;
color: var(--ui-text);
}
.panel-stack-tight > * + * {
margin-top: 0.85rem;
}
.app-icon, .bi {
line-height: 1;
}
.icon-label {
display: inline-flex;
align-items: center;
gap: 0.46rem;
}
.icon-label .bi, .app-icon {
font-size: 0.92em;
}
.section-title, .card-title, .corp-list-title,
.emp-list-title, .filter-title {
letter-spacing: -0.015em;
}
.form-shell { border: 0; }
.form-shell .card-body { padding: var(--card-pad); } /* 24px */
.form-shell h6 { color: var(--ui-text, #243041); font-weight: 700; letter-spacing: 0.01em; }
.form-shell hr { border-color: rgba(95, 112, 138, 0.18); }
.form-shell .field-floating {
position: relative;
justify-content: flex-start;
}
.form-page .form-control,
.form-page .form-select,
.form-page textarea { min-height: 42px; }
.form-page .btn-outline-secondary { font-weight: 600; }
.btn-soft-add {
color: var(--ui-primary);
background: rgba(var(--ui-primary-rgb), 0.08);
border: 1px solid rgba(var(--ui-primary-rgb), 0.22);
box-shadow: none;
}
.btn-soft-add:hover,
.btn-soft-add:focus-visible {
color: #fff;
background: var(--ui-primary);
border-color: var(--ui-primary);
}
.btn-soft-add i {
opacity: 0.88;
}
.empty-state-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-left: 0.25rem;
padding: 0.32rem 0.72rem;
border-radius: 999px;
color: var(--ui-primary);
background: rgba(var(--ui-primary-rgb), 0.08);
border: 1px solid rgba(var(--ui-primary-rgb), 0.18);
text-decoration: none;
font-weight: 700;
line-height: 1.2;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.empty-state-link:hover,
.empty-state-link:focus-visible {
color: #fff;
background: var(--ui-primary);
border-color: var(--ui-primary);
text-decoration: none;
}
.btn-filter-reset {
font-weight: 700;
border-color: rgba(var(--ui-primary-rgb), 0.16);
color: var(--ui-muted);
background: transparent;
}
.btn-filter-reset:hover,
.btn-filter-reset:focus-visible {
color: var(--ui-text-inverse, #fff);
background: var(--ui-muted);
border-color: var(--ui-muted);
}
.btn-filter-apply {
font-weight: 700;
color: var(--ui-primary);
background: rgba(var(--ui-primary-rgb), 0.1);
border: 1px solid rgba(var(--ui-primary-rgb), 0.2);
box-shadow: none;
}
.btn-filter-apply:hover,
.btn-filter-apply:focus-visible {
color: #fff;
background: var(--ui-primary);
border-color: var(--ui-primary);
}
/* ── Premium kaydet / güncelle butonu ─────────────────────────────────── */
.btn-save {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 0.36rem;
width: fit-content;
padding: 0.44rem 1.15rem;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.025em;
border-radius: 9px;
color: #fff;
background: var(--ui-primary);
border: 1px solid var(--ui-primary);
box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 2px 8px rgba(var(--ui-primary-rgb),.22);
transition: background .16s ease, box-shadow .16s ease, transform .13s ease, border-color .16s ease;
line-height: 1.4;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
.btn-save i {
font-size: 0.88em;
opacity: 0.9;
}
.btn-save:hover,
.btn-save:focus-visible {
color: #fff;
background: rgba(var(--ui-primary-rgb), .84);
border-color: rgba(var(--ui-primary-rgb), .84);
box-shadow: 0 3px 12px rgba(var(--ui-primary-rgb), .3);
transform: translateY(-1px);
text-decoration: none;
}
.btn-save:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(var(--ui-primary-rgb), .18);
}
html[data-theme="dark"] .btn-save {
box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 2px 10px rgba(var(--ui-primary-rgb),.18);
}
html[data-theme="dark"] .btn-save:hover,
html[data-theme="dark"] .btn-save:focus-visible {
box-shadow: 0 3px 14px rgba(var(--ui-primary-rgb), .26);
}
.btn-export-soft {
font-weight: 700;
color: var(--ui-text);
background: rgba(var(--ui-primary-rgb), 0.05);
border: 1px solid rgba(var(--ui-primary-rgb), 0.14);
box-shadow: none;
}
.btn-export-soft:hover,
.btn-export-soft:focus-visible {
color: var(--ui-primary);
background: rgba(var(--ui-primary-rgb), 0.12);
border-color: rgba(var(--ui-primary-rgb), 0.24);
}
.btn-export-soft i {
opacity: 0.82;
}
.btn-nav-soft {
font-weight: 700;
color: var(--ui-text);
background: rgba(var(--ui-primary-rgb), 0.04);
border: 1px solid rgba(var(--ui-primary-rgb), 0.12);
box-shadow: none;
}
.btn-nav-soft:hover,
.btn-nav-soft:focus-visible {
color: var(--ui-text);
background: rgba(var(--ui-primary-rgb), 0.1);
border-color: rgba(var(--ui-primary-rgb), 0.22);
}
.hero-copy { display: flex; flex-direction: column; gap: 0.22rem; }
.page-kicker {
font-size: var(--ui-fs-kicker); /* 11px */
font-weight: 800;
letter-spacing: 0.28em; /* ≈ 3px at 11px */
text-transform: uppercase;
color: var(--ui-muted-soft);
}
.page-summary {
margin: 0;
color: var(--ui-muted);
font-size: var(--ui-fs-summary);
line-height: 1.58;
max-width: 64ch;
}
.page-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.dashboard-hero-compact {
padding: .85rem 1rem;
}
.hero-copy-main {
flex: 1 1 520px;
}
.hero-mini-stats {
display: grid;
grid-template-columns: repeat(3, minmax(110px, 1fr));
gap: .65rem;
min-width: min(100%, 360px);
}
.hero-mini-stat {
display: flex;
flex-direction: column;
gap: .15rem;
padding: .65rem .8rem;
border-radius: 14px;
background: rgba(255,255,255,.48);
border: 1px solid rgba(var(--ui-primary-rgb), .12);
box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.hero-mini-label {
font-size: .69rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ui-muted-soft);
}
.hero-mini-value {
font-size: 1rem;
font-weight: 800;
color: var(--ui-text);
line-height: 1.15;
}
.dashboard-quickbar {
display: flex;
flex-wrap: wrap;
gap: .65rem;
}
.dashboard-quicklink {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .7rem .9rem;
border-radius: 14px;
border: 1px solid rgba(var(--ui-primary-rgb), .14);
background: rgba(255,255,255,.72);
color: var(--ui-text);
text-decoration: none;
font-size: .84rem;
font-weight: 700;
box-shadow: 0 8px 18px rgba(17,35,58,.06);
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.dashboard-quicklink:hover,
.dashboard-quicklink:focus-visible {
transform: translateY(-1px);
border-color: rgba(var(--ui-primary-rgb), .24);
box-shadow: 0 12px 24px rgba(17,35,58,.1);
color: var(--ui-primary);
}
.dashboard-quicklink .bi {
font-size: .95rem;
color: var(--ui-primary);
}
/* ── Dashboard section collapse toggle ────────────────────────── */
.dash-section-toggle {
font-size: 0.78rem;
font-weight: 600;
padding: 0.25rem 0.65rem;
white-space: nowrap;
}
.dash-section-toggle .dash-chevron {
transition: transform 0.22s ease;
display: inline-block;
}
.dash-section-toggle[aria-expanded="true"] .dash-chevron {
transform: rotate(-180deg);
}
/* Hero "Düzenle" button */
.dash-settings-btn {
font-size: 0.78rem;
font-weight: 600;
padding: 0.25rem 0.65rem;
white-space: nowrap;
}
.panel-tour-bridge {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--card-gap); /* 16px */
padding: var(--card-pad-md); /* 16px */
border-radius: 16px;
border: 1px solid rgba(var(--ui-primary-rgb), .14);
background: linear-gradient(140deg, rgba(var(--ui-primary-rgb), .08), rgba(var(--ui-primary-rgb), .02) 58%, rgba(255,255,255,.94));
box-shadow: 0 10px 24px rgba(17,35,58,.06);
}
.panel-tour-bridge-copy {
display: grid;
gap: 0.25rem;
}
.panel-tour-bridge-kicker {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ui-primary);
}
.panel-tour-bridge-title {
font-size: 1rem;
font-weight: 800;
color: var(--ui-text);
}
.panel-tour-bridge-meta {
font-size: 0.84rem;
line-height: 1.55;
color: var(--ui-muted);
}
.panel-tour-bridge-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.55rem;
}
.panel-tour-bridge-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.46rem 0.72rem;
border-radius: 999px;
border: 1px solid rgba(var(--ui-primary-rgb), .14);
background: rgba(255,255,255,.74);
color: var(--ui-text);
text-decoration: none;
font-size: 0.78rem;
font-weight: 700;
}
.panel-tour-bridge-pill:hover {
color: var(--ui-primary);
border-color: rgba(var(--ui-primary-rgb), .22);
}
.filter-shell { border: 0; }
.filter-shell .card-body { padding: var(--card-pad-md); } /* 16px */
.corp-filter-card {
border: 1px solid rgba(var(--ui-primary-rgb), 0.12);
border-radius: 16px;
background:
radial-gradient(circle at 8% 12%, rgba(var(--ui-primary-rgb), 0.08), transparent 34%),
radial-gradient(circle at 92% 85%, rgba(20, 184, 166, 0.06), transparent 36%),
linear-gradient(135deg, #f8fbff 0%, #eef4ff 45%, #f9fbff 100%);
box-shadow: 0 8px 24px rgba(20, 39, 80, 0.04);
}
html[data-theme="dark"] .corp-filter-card {
border-color: rgba(110, 168, 254, 0.18);
background:
radial-gradient(circle at 8% 12%, rgba(110, 168, 254, 0.12), transparent 34%),
radial-gradient(circle at 92% 85%, rgba(45, 212, 191, 0.1), transparent 36%),
linear-gradient(135deg, #121d2f 0%, #101a2a 45%, #132139 100%);
}
.corp-list-section {
border-radius: 16px;
background: var(--ui-surface-2);
border: 1px solid rgba(var(--ui-primary-rgb), 0.1);
padding: var(--card-pad); /* 24px */
box-shadow: 0 8px 24px rgba(20, 39, 80, 0.06);
}
.corp-list-section > :first-child {
margin-top: 0;
}
html[data-theme="dark"] .corp-list-section {
border-color: rgba(110, 168, 254, 0.16);
box-shadow: none;
}
.corp-list-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.9rem;
margin-bottom: 0.8rem;
}
.corp-list-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.corp-list-actions .btn {
min-width: 9rem;
font-weight: 700;
}
.filter-button-row {
display: flex;
gap: 0.5rem;
flex-wrap: nowrap;
}
.filter-button-row .btn {
min-width: 7rem;
}
.corp-list-section .action-cluster .btn:not(.icon-btn) {
padding: 0.15rem 0.3rem;
font-size: 0.65rem;
line-height: 1;
}
.filter-shell .form-label.fw-600 {
font-size: 0.81rem;
letter-spacing: 0.01em;
}
.filter-shell .form-select,
.filter-shell .form-control {
font-size: 0.82rem;
}
.filter-shell select[name="customer_id"],
.filter-shell select[name="customer_id"] option {
font-size: 0.8rem;
}
.filter-shell form .btn:not(.btn-sm) {
font-size: 0.78rem;
padding: 0.48rem 0.72rem;
line-height: 1.2;
}
.emp-filter-toggle {
background: none;
border: none;
width: 100%;
text-align: left;
padding: var(--card-pad-md) var(--card-pad); /* 16px 24px */
cursor: pointer;
border-radius: 14px;
transition: background 0.15s;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.emp-filter-toggle:hover {
background: rgba(var(--ui-primary-rgb), 0.04);
}
html[data-theme="dark"] .emp-filter-toggle:hover {
background: rgba(110, 168, 254, 0.07);
}
.emp-filter-toggle-left {
display: flex;
align-items: center;
gap: 0.55rem;
}
.emp-filter-ico {
font-size: 1rem;
color: var(--ui-primary);
flex-shrink: 0;
}
.emp-filter-chevron {
font-size: 0.82rem;
color: #63758a;
flex-shrink: 0;
transition: transform 0.22s ease;
}
html[data-theme="dark"] .emp-filter-chevron {
color: #98a8bf;
}
.emp-filter-toggle[aria-expanded="true"] .emp-filter-chevron {
transform: rotate(180deg);
}
.emp-filter-active-badge {
display: inline-block;
background: rgba(var(--ui-primary-rgb), 0.12);
color: var(--ui-primary);
font-size: 0.69rem;
font-weight: 700;
padding: 0.07rem 0.42rem;
border-radius: 999px;
vertical-align: middle;
margin-left: 0.3rem;
}
.emp-filter-body {
padding: 0 1.1rem 1rem;
}
.panel-list-toolbar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.panel-nav-tabs .nav-link {
font-weight: 600;
color: var(--ui-text);
}
.panel-nav-tabs .nav-link.active {
color: var(--ui-primary);
}
.filter-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.95rem;
}
.filter-title { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--ui-text); }
.filter-summary { margin: 0.2rem 0 0; color: var(--ui-muted); font-size: 0.875rem; line-height: 1.45; }
.filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filter-shell .form-label { font-size: var(--ui-fs-label); letter-spacing: 0.01em; }
.filter-shell .btn { font-weight: 600; }
.row.g-2 > [class*="col-"] { display: flex; flex-direction: column; justify-content: flex-end; }
.row.g-2 .form-label { margin-bottom: 0.3rem; }
.detail-general-layout {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
gap: 1rem;
align-items: start;
}
.detail-side-stack { display: grid; gap: 1rem; }
.detail-card-stack { display: grid; gap: 1rem; }
.detail-section-kicker {
display: inline-block;
margin-bottom: 0.35rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ui-primary);
}
.section-meta { margin-bottom: var(--card-pad-md); } /* 16px */
.section-meta .mini-note { display: block; margin-top: 0.18rem; }
.detail-side-stack > .row { margin: 0; }
.panel-hero {
position: relative;
overflow: hidden;
padding: var(--card-pad-md) var(--card-pad); /* 16px 24px */
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border);
background:
radial-gradient(circle at 0% 0%, rgba(var(--ui-primary-rgb), 0.14), transparent 30%),
linear-gradient(120deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2));
}
html[data-theme="dark"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(124, 184, 255, 0.2), transparent 34%),
linear-gradient(120deg, rgba(24, 37, 58, 0.85), rgba(20, 31, 49, 0.85));
}
html[data-theme="dark"] .hero-mini-stat {
background: rgba(15, 27, 45, 0.72);
border-color: rgba(var(--ui-primary-rgb), .18);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .hero-mini-value {
color: #eef4ff;
}
html[data-theme="dark"] .dashboard-quicklink {
background: rgba(15,27,45,.82);
border-color: rgba(var(--ui-primary-rgb), .18);
box-shadow: 0 10px 22px rgba(0,0,0,.2);
color: #eef4ff;
}
html[data-theme="dark"] .dashboard-quicklink:hover,
html[data-theme="dark"] .dashboard-quicklink:focus-visible {
border-color: rgba(var(--ui-primary-rgb), .3);
box-shadow: 0 4px 14px rgba(0,0,0,.22);
color: #9ecbff;
}
html[data-theme="dark"] .form-shell h6 { color: #dce7f7; }
html[data-theme="dark"] .form-shell hr { border-color: rgba(148, 163, 184, 0.22); }
html[data-theme="light"] .page-summary { color: #5b697d; }
.metric-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.7rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
border: 1px solid var(--ui-border);
background: rgba(255, 255, 255, 0.68);
color: var(--ui-text);
}
html[data-theme="dark"] .metric-pill { background: rgba(24, 37, 58, 0.82); }
.metric-pill .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ui-primary); }
.metric-pill.ok .dot { background: var(--ui-primary-2); }
.metric-pill.warn .dot { background: var(--ui-warning); }
.metric-pill.danger .dot { background: var(--ui-danger); }
.table-modern { border-collapse: separate; border-spacing: 0; }
.table-modern thead th {
position: sticky;
top: 0;
z-index: 10;
padding: 0.35rem 0.5rem;
background: var(--ui-bg);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
color: var(--ui-muted-soft);
border-bottom: 2px solid var(--ui-border-strong);
font-size: var(--ui-fs-table-head);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
vertical-align: middle;
line-height: 1.5;
}
.table-modern tbody td { padding: 0.35rem 0.5rem; vertical-align: middle; font-size: var(--ui-fs-table-cell); background: var(--ui-surface-3); color: var(--ui-muted); line-height: 1.5; }
.table-modern tbody tr { transition: background-color 0.18s ease, box-shadow 0.18s ease; }
.table-modern tbody tr:hover { background: rgba(var(--ui-primary-rgb), 0.09); box-shadow: inset 3px 0 0 var(--ui-primary); }
html[data-theme="dark"] .table-modern tbody tr:hover { background: rgba(var(--ui-primary-rgb), 0.14); }
.table-modern thead th:last-child { text-align: center; }
.table-modern tbody td:last-child { text-align: center; }
/* ── Öncelik satır renklendirmesi (tbl-critical + tbl-payments) ──
Sol kenarlık göz taramasıyla önceliği anında iletir.
td'lere border-left eklemek yerine tr'ye box-shadow kullanıyoruz
— border-collapse:separate ile table-modern uyumlu ve tema değişkenlerine bağlı. */
.tbl-critical tbody tr.row-urgent,
.tbl-payments tbody tr.row-urgent {
box-shadow: inset 3px 0 0 var(--ui-danger);
}
.tbl-critical tbody tr.row-warn,
.tbl-payments tbody tr.row-warn {
box-shadow: inset 3px 0 0 var(--ui-warning);
}
.tbl-critical tbody tr.row-info,
.tbl-payments tbody tr.row-info {
box-shadow: inset 3px 0 0 rgba(var(--ui-primary-rgb), 0.35);
}
/* Arka plan tonu: acil satırlarda çok hafif kırmızı tint */
.tbl-critical tbody tr.row-urgent td,
.tbl-payments tbody tr.row-urgent td {
background: rgba(var(--ui-danger-rgb), 0.04) !important;
}
.tbl-critical tbody tr.row-warn td,
.tbl-payments tbody tr.row-warn td {
background: rgba(var(--ui-warning-rgb), 0.03) !important;
}
.soft-enter { animation: softEnter 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes softEnter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.action-cluster { display: inline-flex; align-items: center; gap: 0.35rem; }
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0 !important;
border-radius: 0.5rem;
border: 1px solid var(--ui-border);
background: var(--ui-surface-2);
color: var(--ui-text);
line-height: 1 !important;
cursor: pointer;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.icon-btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, .14);
background: var(--ui-surface);
}
.icon-btn:active { transform: translateY(0); }
.icon-btn .bi { font-size: .88rem; line-height: 1; }
.icon-btn.btn-sm { width: 2rem; height: 2rem; }
/* Ikon tipine gore anlamli ve tema uyumlu renkler */
.icon-btn .bi-pencil,
.icon-btn .bi-download,
.icon-btn .bi-box-arrow-up-right,
.icon-btn .bi-check2 {
color: var(--ui-primary);
}
.icon-btn .bi-trash3 {
color: var(--ui-danger, #dc3545);
}
.icon-btn .bi-eye {
color: var(--ui-warning, #f59e0b);
}
html[data-theme="dark"] .icon-btn {
background: var(--ui-surface);
border-color: rgba(255, 255, 255, .18);
}
.btn-soft-secondary {
background: rgba(255, 255, 255, 0.72);
border-color: var(--ui-border);
color: var(--ui-text);
}
html[data-theme="dark"] .btn-soft-secondary {
background: rgba(29, 42, 64, 0.9);
border-color: var(--ui-border-strong);
color: var(--ui-text);
}
.sortable-th { cursor: pointer; -webkit-user-select: none; user-select: none; transition: background-color 0.15s ease; white-space: nowrap; }
.sortable-th:hover { background: rgba(var(--ui-primary-rgb), 0.15) !important; }
.sortable-th.sort-asc::after { content: ' \25B2'; font-size: 0.7em; opacity: 0.75; margin-left: 0.2em; }
.sortable-th.sort-desc::after { content: ' \25BC'; font-size: 0.7em; opacity: 0.75; margin-left: 0.2em; }
.trend-period-btn-group .btn { font-size: 0.73rem; padding: 0.2rem 0.55rem; border-radius: 999px; }
.trend-period-btn-group .btn.active { background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); }
html[data-theme="light"] .trend-period-btn-group .btn:not(.active),
html[data-theme="light"] .btn-outline-secondary { color: #2f3c4f; border-color: #b9c3d0; }
html[data-theme="light"] .trend-period-btn-group .btn:not(.active):hover,
html[data-theme="light"] .btn-outline-secondary:hover { color: #1f2a37; border-color: #97a7bb; }
html[data-theme="light"] .nav-tabs .nav-link { color: #465366; }
html[data-theme="light"] .nav-tabs .nav-link.active,
html[data-theme="light"] .nav-pills .nav-link.active { color: #1f2b3a; font-weight: 700; }
html[data-theme="light"] .opacity-75 { opacity: 1 !important; }
@media (max-width: 992px) {
.detail-general-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.panel-hero { padding: 0.8rem; }
.page-kicker { font-size: 0.625rem; letter-spacing: 0.22em; } /* mobilde biraz küçül */
.page-summary { font-size: 0.92rem; line-height: 1.52; }
.table-modern thead th { font-size: 0.68rem; padding: 0.66rem 0.58rem; }
.table-modern tbody td { font-size: 0.82rem; padding: 0.62rem 0.58rem; }
.metric-pill { margin-bottom: 0.4rem; }
/* Touch target optimization for mobile accessibility */
.form-control,
.form-select,
.btn,
.icon-btn {
min-height: 48px;
min-width: 48px;
}
.icon-btn {
width: 48px;
height: 48px;
}
}
/* ============================================================
FIXED LAYOUT POSITIONING
============================================================ */
.top-menu-spacer { height: 0; display: none; }
.left-sidebar-wrap {
/* Sticky ve overflow artık col-md-3 üstünde yönetiliyor */
display: block;
position: relative;
}
/* Row layout: mobile full-width, desktop sidebar+content */
.row {
display: flex;
flex-wrap: wrap;
}
.row > .col-md-3.pt-3 { flex: 0 0 100%; max-width: 100%; }
.row > .col-md-9.pt-3 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
.container.soft-enter { padding-top: 0 !important; }
.container.soft-enter { min-height: 100vh; }
/* Wrap: col-md-3 scroll alanını dolduracak şekilde uzansın */
.left-sidebar-wrap {
min-height: 100%;
}
.row > .col-md-3.pt-3 { flex: 0 0 280px !important; max-width: 280px !important; }
.row > .col-md-9.pt-3 { flex: 1 1 calc(100% - 280px) !important; max-width: calc(100% - 280px) !important; }
}
@media (max-width: 1399.98px) { :root { --top-band-max: 1116px; } }
@media (max-width: 1199.98px) { :root { --top-band-max: 936px; } }
@media (max-width: 991.98px) { :root { --top-band-max: 696px; } }
@media (max-width: 767.98px) {
:root {
--top-band-max: 516px;
--top-band-gutter: 8px;
--menu-h: 68px;
}
.container.soft-enter { padding-top: 0 !important; }
.left-sidebar-wrap { position: static; top: auto; }
/* Hide desktop sidebar on mobile — use off-canvas instead */
.col-md-3.pt-3 { display: none !important; }
}
/* ============================================================
TOP MENU CARD
============================================================ */
.top-menu-card {
position: fixed !important;
top: var(--menu-top);
left: var(--top-band-edge);
right: var(--top-band-edge);
transform: none;
width: auto;
z-index: 1080;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-radius: var(--ui-radius-lg);
overflow: visible;
border: 1px solid rgba(var(--ui-primary-rgb), 0.18);
background:
radial-gradient(circle at 0% 50%, rgba(var(--ui-primary-rgb), 0.13), transparent 42%),
linear-gradient(120deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.44) 100%),
var(--ui-surface);
box-shadow: 0 8px 28px rgba(20, 39, 80, 0.1), 0 0 1px rgba(var(--ui-primary-rgb), 0.12);
}
html[data-theme="dark"] .top-menu-card {
border-color: rgba(110, 168, 254, 0.2);
background:
radial-gradient(circle at 0% 50%, rgba(124, 184, 255, 0.22), transparent 42%),
linear-gradient(120deg, rgba(24, 37, 58, 0.92) 0%, rgba(18, 28, 46, 0.92) 100%);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.36), 0 0 1px rgba(110, 168, 254, 0.15);
}
html[data-theme="light"] .top-menu-card {
background:
radial-gradient(circle at 0% 50%, rgba(var(--ui-primary-rgb), 0.13), transparent 42%),
linear-gradient(120deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.44) 100%),
var(--ui-surface) !important;
border-color: rgba(var(--ui-primary-rgb), 0.18) !important;
}
.top-menu-card .card-body {
display: flex;
flex-wrap: nowrap;
gap: 0.4rem;
align-items: center;
padding: 0.6rem 1rem;
border-radius: var(--ui-radius-lg);
overflow: hidden;
}
/* ── Top bar greeting block ──────────────────────────────────── */
.top-menu-greeting {
display: flex;
align-items: center;
gap: 0.7rem;
flex: 1;
min-width: 0;
overflow: hidden;
}
.top-menu-greeting .av-circle {
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(var(--ui-primary-rgb), 0.22);
}
.top-menu-greeting-text {
display: flex;
flex-direction: column;
gap: 0.12rem;
min-width: 0;
overflow: hidden;
}
/* page-kicker style */
.top-menu-greeting-title {
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--ui-primary);
line-height: 1.2;
white-space: nowrap;
opacity: 0.85;
}
.top-menu-greeting-user {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: nowrap;
overflow: hidden;
}
/* hero h2 style — compact */
.top-menu-greeting-name {
font-size: 1.0rem;
font-weight: 750;
color: var(--ui-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em;
}
/* panel-token-pill style */
.top-menu-greeting-role {
display: inline-flex;
align-items: center;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.15em 0.5em;
border-radius: 20px;
border: 1px solid rgba(var(--ui-primary-rgb), 0.22);
background: rgba(var(--ui-primary-rgb), 0.1);
color: var(--ui-primary);
flex-shrink: 0;
}
html[data-theme="dark"] .top-menu-greeting-role {
border-color: rgba(110, 168, 254, 0.25);
background: rgba(110, 168, 254, 0.12);
color: #93c5fd;
}
/* panel-token-pill date style */
.top-menu-greeting-date {
display: inline-flex;
align-items: center;
font-size: 0.61rem;
font-weight: 600;
color: var(--ui-muted);
white-space: nowrap;
flex-shrink: 0;
padding: 0.15em 0.5em;
border-radius: 20px;
border: 1px solid rgba(var(--ui-primary-rgb), 0.12);
background: rgba(var(--ui-primary-rgb), 0.05);
}
@media (max-width: 900px) {
.top-menu-greeting-date { display: none; }
}
@media (max-width: 640px) {
.top-menu-greeting-role { display: none; }
.top-menu-greeting-title { display: none; }
}
/* ── Hero greeting card (panel-hero üstüne JS ile taşınır) ────── */
.menu-hero-greeting {
position: relative;
overflow: visible;
border-radius: var(--ui-radius-lg);
border: 1px solid rgba(var(--ui-primary-rgb), 0.18);
background:
radial-gradient(circle at 0% 0%, rgba(var(--ui-primary-rgb), 0.14), transparent 40%),
linear-gradient(120deg, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0.3) 100%),
var(--ui-surface);
padding: var(--card-pad-md) var(--card-pad); /* 16px 24px */
margin-bottom: var(--card-pad-md); /* 16px */
display: flex;
align-items: center;
gap: var(--card-gap);
flex-wrap: nowrap;
}
.menu-hero-greeting-actions {
display: flex;
align-items: center;
gap: 0.26rem;
flex-shrink: 0;
margin-left: auto;
flex-wrap: wrap;
justify-content: flex-end;
}
html[data-theme="dark"] .menu-hero-greeting {
background:
radial-gradient(circle at 0% 0%, rgba(124, 184, 255, 0.22), transparent 38%),
linear-gradient(120deg, rgba(24, 37, 58, 0.88) 0%, rgba(18, 28, 46, 0.88) 100%);
border-color: rgba(110, 168, 254, 0.2);
}
.menu-hero-greeting .av-circle-hero {
flex-shrink: 0;
width: 3rem;
height: 3rem;
border-radius: 50%;
font-size: 1.2rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 12px rgba(var(--ui-primary-rgb), 0.28);
overflow: hidden;
}
.menu-hero-greeting .av-circle-hero img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.menu-hero-greeting-body {
display: flex;
flex-direction: column;
gap: 0.22rem;
min-width: 0;
flex: 1;
}
.menu-hero-greeting-kicker {
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ui-primary);
line-height: 1;
opacity: 0.9;
}
.menu-hero-greeting-name {
font-size: 1.05rem;
font-weight: 750;
color: var(--ui-text);
letter-spacing: -0.01em;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-hero-greeting-pills {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
margin-top: 0.1rem;
}
.menu-hero-greeting-role {
display: inline-flex;
align-items: center;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.18em 0.55em;
border-radius: 20px;
border: 1px solid rgba(var(--ui-primary-rgb), 0.22);
background: rgba(var(--ui-primary-rgb), 0.1);
color: var(--ui-primary);
}
html[data-theme="dark"] .menu-hero-greeting-role {
border-color: rgba(110, 168, 254, 0.25);
background: rgba(110, 168, 254, 0.12);
color: #93c5fd;
}
.menu-hero-greeting-date {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.61rem;
font-weight: 600;
color: var(--ui-muted);
padding: 0.18em 0.55em;
border-radius: 20px;
border: 1px solid rgba(var(--ui-primary-rgb), 0.12);
background: rgba(var(--ui-primary-rgb), 0.05);
}
/* ── Sidebar news ticker (menu.php altı) ──────────────────────── */
.menu-news-ticker {
position: relative;
overflow: hidden;
border-radius: 10px;
border: 1px solid rgba(var(--ui-primary-rgb), .12);
background: rgba(var(--ui-primary-rgb), .04);
margin-bottom: .75rem;
padding: .36rem 0;
height: 2rem;
display: flex;
align-items: center;
}
.menu-news-ticker::before,
.menu-news-ticker::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 28px;
z-index: 2;
pointer-events: none;
}
.menu-news-ticker::before {
left: 0;
background: linear-gradient(to right, var(--ui-surface), transparent);
}
.menu-news-ticker::after {
right: 0;
background: linear-gradient(to left, var(--ui-surface), transparent);
}
.menu-ticker-track {
display: flex;
align-items: center;
gap: 0;
white-space: nowrap;
animation: menuTickerScroll var(--news-ticker-speed, 80s) linear infinite;
will-change: transform;
}
.menu-news-ticker:hover .menu-ticker-track {
animation-play-state: paused;
}
@keyframes menuTickerScroll {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
.menu-ticker-item {
display: inline-flex;
align-items: center;
gap: .32rem;
padding: 0 1.1rem;
font-size: .72rem;
font-weight: 600;
color: var(--ui-muted);
text-decoration: none;
white-space: nowrap;
transition: color .15s;
border-right: 1px solid rgba(var(--ui-primary-rgb), .10);
}
.menu-ticker-item:last-child { border-right: 0; }
.menu-ticker-item:hover { color: var(--ui-primary); text-decoration: none; }
.menu-ticker-item .bi { font-size: .68rem; opacity: .6; flex-shrink: 0; }
html[data-theme="dark"] .menu-news-ticker {
background: rgba(var(--ui-primary-rgb), .07);
border-color: rgba(var(--ui-primary-rgb), .18);
}
html[data-theme="dark"] .menu-ticker-item { color: var(--ui-muted); }
html[data-theme="dark"] .menu-ticker-item:hover { color: var(--ui-primary); }
html[data-theme="dark"] .menu-news-ticker::before {
background: linear-gradient(to right, var(--ui-surface), transparent);
}
html[data-theme="dark"] .menu-news-ticker::after {
background: linear-gradient(to left, var(--ui-surface), transparent);
}
/* ── Dashboard chips bar (index.php özet satırı) ─────────────── */
.dash-chips-bar {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
}
/* Standalone chips bar (hero dışında) */
.dash-chips-bar.mb-3 {
padding: 0.1rem 0;
}
.top-menu-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 0.42rem;
text-decoration: none;
flex: 0 0 auto;
padding: 0.4rem 0.8rem;
border-radius: 8px;
transition: all 0.2s ease;
cursor: pointer;
}
.top-menu-brand:hover {
background: rgba(var(--ui-primary-rgb, 15, 108, 189), 0.1);
transform: translateY(-1px);
}
html[data-theme="dark"] .top-menu-brand:hover {
background: rgba(110, 168, 254, 0.15);
}
.top-menu-brand-main {
font-family: 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #0f6cbd;
white-space: nowrap;
}
html[data-theme="light"] .top-menu-brand-main {
color: var(--ui-primary, #0f6cbd);
}
html[data-theme="dark"] .top-menu-brand-main {
color: #93c5fd;
}
.top-menu-brand-version {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
color: #0f6cbd;
text-transform: uppercase;
white-space: nowrap;
}
html[data-theme="dark"] .top-menu-brand-version {
color: #93c5fd;
}
.top-menu-brand img { display: none; }
.top-menu-user {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-left: 0.35rem;
padding: 0.28rem 0.55rem 0.28rem 0.28rem;
border-radius: 12px;
border: 1px solid rgba(var(--ui-primary-rgb), 0.16);
background: rgba(var(--ui-primary-rgb), 0.05);
min-width: 0;
}
.top-menu-user-copy {
display: flex;
flex-direction: column;
min-width: 0;
}
.top-menu-user-name {
font-size: 0.78rem;
font-weight: 700;
color: var(--ui-text);
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 11rem;
}
.top-menu-user-role {
font-size: 0.64rem;
font-weight: 800;
color: var(--ui-primary);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.15;
}
html[data-theme="dark"] .top-menu-user {
background: rgba(86,156,255,.08);
border-color: rgba(86,156,255,.22);
}
html[data-theme="dark"] .top-menu-user-name {
color: #e9f2ff;
}
html[data-theme="dark"] .top-menu-user-role {
color: #93c5fd;
}
.guest-badge {
border: 1px solid rgba(25, 135, 84, 0.35);
background: rgba(25, 135, 84, 0.12);
color: #198754;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.02em;
padding: 0.22rem 0.4rem;
border-radius: 999px;
white-space: nowrap;
}
html[data-theme="dark"] .guest-badge {
border-color: rgba(104, 211, 145, 0.45);
background: rgba(45, 115, 76, 0.35);
color: #8ef0b6;
}
.top-menu-links {
display: flex;
flex-wrap: nowrap;
gap: 0.24rem;
overflow-x: auto;
white-space: nowrap;
flex: 1;
}
.top-menu-links .btn,
.top-menu-actions .btn {
transition: all 0.2s ease;
font-size: 0.71rem;
padding: 0.14rem 0.30rem;
line-height: 1.2;
flex: 0 0 auto;
}
.top-menu-links .btn .icon-label,
.top-menu-actions .btn .icon-label { gap: 0.64rem; }
/* Sidebar gap token — tek noktadan yönetilir */
:root { --sidebar-item-gap: 0.75rem; } /* 12px */
.sidebar-link .icon-label { gap: var(--sidebar-item-gap); }
.top-menu-links .btn .bi,
.top-menu-actions .btn .bi { font-size: 1.125rem; } /* 18px — header aksiyonları */
.sidebar-link .bi { font-size: 1.125rem; } /* 18px — sidebar ikonları */
.sidebar-link .bi { min-width: 1.25rem; text-align: center; }
.top-menu-links .btn.btn-outline-secondary,
.top-menu-actions .btn.btn-outline-secondary {
background: #ffffff;
border-color: #8ca7c9;
color: #18324f !important;
font-weight: 700;
}
.top-menu-links .btn.btn-outline-secondary:hover,
.top-menu-actions .btn.btn-outline-secondary:hover {
background: #eaf3ff;
border-color: #5f86bb;
color: #10263d !important;
}
html[data-theme="dark"] .top-menu-links .btn.btn-outline-secondary,
html[data-theme="dark"] .top-menu-actions .btn.btn-outline-secondary {
background: #253349 !important;
border-color: #4f6788 !important;
color: #ecf3ff !important;
}
html[data-theme="dark"] .top-menu-links .btn.btn-outline-secondary:hover,
html[data-theme="dark"] .top-menu-actions .btn.btn-outline-secondary:hover {
background: #314562 !important;
border-color: #7592bc !important;
color: #ffffff !important;
}
html[data-theme="dark"] .panel-soft-card {
border-color: rgba(110, 168, 254, 0.16);
background: var(--ui-surface, #141f31);
box-shadow: none;
}
html[data-theme="dark"] .panel-soft-card.is-active {
background: linear-gradient(155deg, rgba(110, 168, 254, 0.12), rgba(110, 168, 254, 0.04));
}
.top-menu-actions {
display: flex;
gap: 0.24rem;
flex: 0 0 auto;
margin-left: auto;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.top-menu-actions-tools {
gap: 0.28rem;
}
.top-menu-tool-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.3rem 0.55rem;
font-size: 0.875rem;
line-height: 1;
}
.top-menu-auth-btn {
display: inline-flex;
align-items: center;
gap: 0.38rem;
}
.top-menu-auth-name {
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.top-menu-card.login-top-menu .card-body {
justify-content: center;
padding: 0.46rem 0.72rem;
}
.top-menu-card.login-top-menu .top-menu-brand,
.top-menu-card.login-top-menu .top-menu-user,
.top-menu-card.login-top-menu .top-menu-links,
.top-menu-card.login-top-menu .mobile-nav-hamburger,
.top-menu-card.login-top-menu .guest-badge {
display: none !important;
}
@media (max-width: 991.98px) {
.top-menu-user-copy {
display: none;
}
.top-menu-user {
padding-right: 0.28rem;
}
.top-menu-auth-name {
display: none;
}
}
.top-menu-card.login-top-menu .top-menu-actions {
margin: 0 auto;
justify-content: center;
}
.menu-search-under { margin-top: -6px; border: 1px solid rgba(0, 0, 0, 0.08); }
html[data-theme="dark"] .menu-search-under { border-color: #2f3440; }
html[data-theme="light"] .menu-search-under { background: #f5f3ef !important; border-color: #ddd7ce !important; }
.network-tools-btn {
position: relative;
border-color: var(--ui-primary) !important;
box-shadow: 0 0 0 0.12rem rgba(var(--ui-primary-rgb), 0.2);
}
.top-menu-links .btn.active-glow,
.top-menu-actions .btn.active-glow {
animation: menuPulse 1.35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
box-shadow: 0 0 0 0.2rem rgba(var(--ui-primary-rgb), 0.34), 0 10px 22px rgba(var(--ui-primary-rgb), 0.34);
transform: translateY(-1px);
}
.network-tools-btn.active-glow {
background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
color: #fff !important;
border-color: var(--ui-primary) !important;
}
@keyframes menuPulse {
0% { box-shadow: 0 0 0 0.16rem rgba(var(--ui-primary-rgb), 0.32), 0 0 0 0 rgba(var(--ui-primary-rgb), 0.36); }
65% { box-shadow: 0 0 0 0.24rem rgba(var(--ui-primary-rgb), 0.38), 0 0 0 14px rgba(var(--ui-primary-rgb), 0); }
100% { box-shadow: 0 0 0 0.16rem rgba(var(--ui-primary-rgb), 0.32), 0 0 0 0 rgba(var(--ui-primary-rgb), 0); }
}
html[data-theme="dark"] .top-menu-links .btn.active-glow,
html[data-theme="dark"] .top-menu-actions .btn.active-glow {
box-shadow: 0 0 0 0.22rem rgba(86, 156, 255, 0.45), 0 12px 24px rgba(20, 80, 180, 0.52);
}
/* ============================================================
DARK MODE BASE OVERRIDES
============================================================ */
html[data-theme="dark"] body { background: var(--ui-bg); color: var(--ui-text); }
html[data-theme="dark"] body::before {
background:
radial-gradient(ellipse 68% 52% at 5% 10%, rgba(60, 120, 220, 0.18) 0%, transparent 68%),
radial-gradient(ellipse 52% 62% at 94% 14%, rgba(20, 160, 140, 0.14) 0%, transparent 65%),
radial-gradient(ellipse 58% 48% at 50% 95%, rgba(100, 60, 200, 0.13) 0%, transparent 62%),
radial-gradient(ellipse 42% 38% at 18% 78%, rgba(139, 92, 246, 0.10) 0%, transparent 58%),
radial-gradient(ellipse 35% 30% at 80% 60%, rgba(30, 180, 140, 0.08) 0%, transparent 55%);
}
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .table,
html[data-theme="dark"] .modal-content {
background: #1d1f23 !important;
color: #f1f1f1 !important;
border-color: #2c2c2c !important;
}
html[data-theme="dark"] .table { color: #f1f1f1 !important; border-color: #444 !important; }
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td { border-color: #363636 !important; }
html[data-theme="dark"] .table thead th { background: #282c34 !important; color: #f8f9fa !important; }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: #2a2f37; }
html[data-theme="dark"] .table-hover tbody tr:hover { background: #374049; }
html[data-theme="dark"] .table .btn-outline-primary,
html[data-theme="dark"] .table .btn-outline-danger,
html[data-theme="dark"] .table .btn-outline-secondary {
color: #fff !important; border-color: #4d5570 !important; background: #2f3240 !important;
}
html[data-theme="dark"] .table .btn-outline-primary:hover,
html[data-theme="dark"] .table .btn-outline-danger:hover,
html[data-theme="dark"] .table .btn-outline-secondary:hover {
background: #3d4155 !important; color: #fff !important;
}
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { color: #f1f1f1 !important; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background: #2b2b2b !important; border-color: #444 !important; }
html[data-theme="dark"] .form-control::placeholder { color: #f1f1f1 !important; }
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select {
color: #212529 !important; background: #fff !important; border-color: #ced4da !important;
}
html[data-theme="dark"] .text-muted { color: #b8c7df !important; }
html[data-theme="dark"] .small.text-muted { color: #b8c7df !important; }
html[data-theme="dark"] .form-text { color: #b8c7df !important; }
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .badge.bg-light { background: #2a3446 !important; color: #e6efff !important; border-color: #425476 !important; }
html[data-theme="dark"] .text-dark { color: #e6efff !important; }
html[data-theme="dark"] .alert { border-width: 1px; }
html[data-theme="dark"] .alert-info { background: #1f3248 !important; color: #d6ebff !important; border-color: #33567c !important; }
html[data-theme="dark"] .alert-warning { background: #3b341f !important; color: #ffe8a6 !important; border-color: #6a5a2a !important; }
html[data-theme="dark"] .alert-success { background: #1e3a2c !important; color: #c8f5dc !important; border-color: #2f6a4b !important; }
html[data-theme="dark"] .alert-danger { background: #3b2226 !important; color: #ffd5dd !important; border-color: #70404a !important; }
html[data-theme="dark"] .btn-outline-secondary { color: #dce7fb !important; border-color: #52617f !important; background: #2b3445 !important; }
html[data-theme="dark"] .btn-outline-secondary:hover { background: #384861 !important; color: #ffffff !important; border-color: #6b7fa6 !important; }
html[data-theme="dark"] .btn-outline-primary { color: #b9d4ff !important; border-color: #4e79bc !important; }
html[data-theme="dark"] .btn-outline-success { color: #b8f0d0 !important; border-color: #3f7f61 !important; }
html[data-theme="dark"] .btn-outline-danger { color: #ffb4c3 !important; border-color: #8e4c58 !important; }
html[data-theme="dark"] .nav-tabs { border-bottom-color: #3b4963 !important; }
html[data-theme="dark"] .nav-tabs .nav-link { background: #232a36 !important; color: #d6e2f7 !important; border-color: #37404f !important; }
html[data-theme="dark"] .nav-tabs .nav-link.active { background: #2e3b50 !important; color: #ffffff !important; border-color: #4a607f #4a607f #2e3b50 !important; }
html[data-theme="dark"] .list-group-item { background: #1d2430 !important; color: #e6efff !important; border-color: #2f3c54 !important; }
html[data-theme="dark"] #globalFooterText,
html[data-theme="dark"] footer { color: #f8f9fa !important; opacity: 1 !important; }
/* ============================================================
LIGHT MODE BASE OVERRIDES
============================================================ */
html[data-theme="light"] body { background: #f2f0ec !important; color: #1f2937 !important; }
html[data-theme="light"] .card { background: #faf9f6 !important; border-color: #e5dfd7 !important; color: #243041 !important; }
html[data-theme="light"] .card-header,
html[data-theme="light"] .card-body,
html[data-theme="light"] .modal-title,
html[data-theme="light"] .offcanvas-title { color: #243041 !important; }
html[data-theme="light"] .table thead th { background: #edeae4 !important; color: #374151 !important; }
html[data-theme="light"] .table td,
html[data-theme="light"] .table th { color: #243041 !important; }
html[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > * { background: #f7f5f1 !important; }
html[data-theme="light"] .table-hover > tbody > tr:hover > * { background: #ece8e2 !important; }
html[data-theme="light"] .list-group-item { background: #faf9f6 !important; border-color: #e5dfd7 !important; color: #243041 !important; }
html[data-theme="light"] .form-label,
html[data-theme="light"] label { color: #243041 !important; }
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] textarea { background: #fdfcfa !important; border-color: #d6cfc5 !important; color: #2e2e2e !important; }
html[data-theme="light"] .form-control::placeholder,
html[data-theme="light"] textarea::placeholder { color: #6b7280 !important; opacity: 1 !important; }
html[data-theme="light"] .input-group-text { background: #ede9e3 !important; border-color: #d6cfc5 !important; color: #4a4a4a !important; }
html[data-theme="light"] .modal-content { background: #faf9f6 !important; border-color: #e5dfd7 !important; color: #243041 !important; }
/* Reusable modal skin for page-level standardization */
.modal-content.panel-modal {
border-radius: 16px !important;
border-width: 1px !important;
box-shadow: 0 4px 20px rgba(18, 32, 54, 0.14), 0 1px 4px rgba(18, 32, 54, 0.07) !important;
}
.modal-content.panel-modal .modal-header,
.modal-content.panel-modal .modal-footer {
border-color: rgba(var(--ui-primary-rgb), 0.2) !important;
}
.modal-content.panel-modal .modal-title {
font-weight: 700;
letter-spacing: -0.01em;
}
html[data-theme="light"] .modal-content.panel-modal {
background: linear-gradient(160deg, #fbfaf7, #f3efe8) !important;
border-color: #d9d1c6 !important;
color: #243041 !important;
}
html[data-theme="dark"] .modal-content.panel-modal {
background: linear-gradient(160deg, #1a2435, #151f2f) !important;
border-color: #344867 !important;
color: #e8f0ff !important;
}
html[data-theme="light"] .btn-outline-secondary { background: #efece7 !important; border-color: #bcc6d2 !important; color: #2f3c4f !important; }
html[data-theme="light"] .btn-outline-secondary:hover { background: #e6e1da !important; border-color: #9faebe !important; color: #1f2a37 !important; }
html[data-theme="light"] .nav-tabs .nav-link { color: #465366 !important; }
html[data-theme="light"] .nav-tabs .nav-link.active,
html[data-theme="light"] .nav-pills .nav-link.active { color: #1f2b3a !important; }
html[data-theme="light"] .alert-info { background: #edf4ff !important; border-color: #b8d4f0 !important; color: #214766 !important; }
html[data-theme="light"] .alert-warning { background: #fdf7ec !important; border-color: #f0d88a !important; color: #6b4e16 !important; }
html[data-theme="light"] .alert-success { background: #edfaf3 !important; border-color: #9ddbb9 !important; color: #1f5d40 !important; }
html[data-theme="light"] .alert-danger { background: #fdf0f2 !important; border-color: #f0b8c3 !important; color: #7a2536 !important; }
html[data-theme="light"] .badge.text-bg-warning { color: #4c3700 !important; }
html[data-theme="light"] .badge.text-bg-info { color: #16384f !important; }
html[data-theme="light"] .badge.text-bg-secondary,
html[data-theme="light"] .badge.text-bg-dark { color: #243041 !important; }
html[data-theme="light"] code,
html[data-theme="light"] pre,
html[data-theme="light"] .bg-light { background: #ede9e3 !important; }
/* ============================================================
LIGHT MODE — SPECIFIC ELEMENT CORRECTIONS
(These come after the broad .card / .btn rules above so they
properly override the generic !important declarations)
============================================================ */
/* Top menu card: panel-hero gradient style */
html[data-theme="light"] .top-menu-card {
background:
radial-gradient(circle at 0% 50%, rgba(var(--ui-primary-rgb), 0.13), transparent 42%),
linear-gradient(120deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.44) 100%),
var(--ui-surface) !important;
border-color: rgba(var(--ui-primary-rgb), 0.18) !important;
}
/* tech-news-card is now inline — these overrides are no longer needed */
/* Left sidebar card: match greeting-strip frame style */
html[data-theme="light"] .left-sidebar-card {
background: linear-gradient(150deg,
color-mix(in srgb, var(--ui-primary, #4f7cff) 8%, var(--ui-surface, #fff)) 0%,
var(--ui-surface, #fff) 100%
) !important;
border-color: rgba(var(--ui-primary-rgb), 0.18) !important;
}
/* Sidebar head inside the sidebar card */
html[data-theme="light"] .sidebar-head {
background: color-mix(in srgb, var(--ui-primary, #4f7cff) 8%, var(--ui-surface, #fff)) !important;
border-bottom-color: rgba(var(--ui-primary-rgb), 0.14) !important;
}
/* Top menu nav buttons: restore white background (not the beige #efece7) */
html[data-theme="light"] .top-menu-links .btn.btn-outline-secondary,
html[data-theme="light"] .top-menu-actions .btn.btn-outline-secondary {
background: #ffffff !important;
border-color: #8ca7c9 !important;
color: #18324f !important;
}
html[data-theme="light"] .top-menu-links .btn.btn-outline-secondary:hover,
html[data-theme="light"] .top-menu-actions .btn.btn-outline-secondary:hover {
background: #eaf3ff !important;
border-color: #5f86bb !important;
color: #10263d !important;
}
/* Sidebar toggle mini button — light mode */
html[data-theme="light"] .sidebar-toggle-mini {
background: rgba(var(--ui-primary-rgb), 0.06) !important;
border-color: rgba(var(--ui-primary-rgb), 0.22) !important;
color: #1f446f !important;
}
/* Sidebar submenu links — light mode */
html[data-theme="light"] .sidebar-submenu a {
background: rgba(var(--ui-primary-rgb), 0.05) !important;
border-color: rgba(var(--ui-primary-rgb), 0.18) !important;
color: #214063 !important;
}
html[data-theme="light"] .sidebar-submenu a:hover {
background: rgba(var(--ui-primary-rgb), 0.12) !important;
border-color: rgba(var(--ui-primary-rgb), 0.32) !important;
color: var(--ui-primary) !important;
}
/* "Daha fazla" dropdown — light mode */
html[data-theme="light"] .top-menu-more-dropdown .dropdown-menu {
background: #ffffff !important;
border-color: rgba(var(--ui-primary-rgb), 0.18) !important;
}
html[data-theme="light"] .top-menu-more-dropdown .dropdown-item {
color: #1f2f45 !important;
}
html[data-theme="light"] .top-menu-more-dropdown .dropdown-item:hover {
background: rgba(var(--ui-primary-rgb), 0.08) !important;
color: var(--ui-primary) !important;
}
html[data-theme="light"] .sidebar-user-role { color: #3d6da4 !important; }
/* ============================================================
LEFT SIDEBAR
============================================================ */
.left-sidebar-card {
border: 1px solid rgba(var(--ui-primary-rgb), 0.18);
border-radius: 14px;
background: linear-gradient(150deg,
color-mix(in srgb, var(--ui-primary, #4f7cff) 8%, var(--ui-surface, #fff)) 0%,
var(--ui-surface, #fff) 100%
);
box-shadow: 0 14px 30px rgba(12,34,68,.10), inset 0 1px 0 rgba(255,255,255,.7);
overflow: hidden;
}
.sidebar-head {
padding: 0.55rem 0.75rem;
border-bottom: 1px solid rgba(var(--ui-primary-rgb), 0.14);
background: color-mix(in srgb, var(--ui-primary, #4f7cff) 8%, var(--ui-surface, #fff));
display: flex;
align-items: center;
gap: 0.55rem;
}
.sidebar-logo-head {
padding: 0;
background: transparent;
border-bottom: 1px solid rgba(var(--ui-primary-rgb), 0.14);
}
.sidebar-logo-img {
display: block;
width: 100%;
height: auto;
min-height: 72px;
padding: 14px 18px 10px;
border-radius: 13px 13px 0 0;
object-fit: contain;
object-position: center;
box-sizing: border-box;
}
/* Tema bazlı logo göster/gizle */
.sidebar-logo-dark { display: none; }
.sidebar-logo-light { display: block; }
html[data-theme="dark"] .sidebar-logo-light { display: none; }
html[data-theme="dark"] .sidebar-logo-dark { display: block; }
.sidebar-logo-fallback { display: none; }
.sidebar-head-icon {
font-size: 1.1rem;
color: var(--ui-primary);
opacity: 0.85;
flex-shrink: 0;
}
.sidebar-kicker { display: none; }
.sidebar-title { font-size: 0.88rem; font-weight: 800; color: var(--ui-text, #173a63); line-height: 1.2; }
.sidebar-group-title {
font-size: 0.625rem; font-weight: 800; letter-spacing: 0.28em;
color: var(--ui-muted, #6b7280);
margin: 0.7rem 0.15rem 0.3rem; text-transform: uppercase;
}
.sidebar-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sidebar-item-gap);
padding: 0.52rem 0.62rem;
border-radius: 0.62rem;
text-decoration: none;
color: #1f2f45;
font-size: 0.84rem;
font-weight: 600;
border: 1px solid transparent;
transition: all 0.18s ease;
}
.sidebar-link:hover {
background: rgba(var(--ui-primary-rgb), 0.08);
color: var(--ui-primary);
border-color: rgba(var(--ui-primary-rgb), 0.22);
box-shadow: inset 2px 0 0 rgba(var(--ui-primary-rgb), 0.5), 0 1px 6px rgba(var(--ui-primary-rgb), 0.08);
transform: translateX(3px);
}
.sidebar-link.active {
background: rgba(var(--ui-primary-rgb), 0.10);
color: var(--ui-primary);
font-weight: 700;
border-color: rgba(var(--ui-primary-rgb), 0.18);
box-shadow: inset 3px 0 0 var(--ui-primary), inset 6px 0 12px rgba(var(--ui-primary-rgb), 0.06);
}
.sidebar-link .meta { opacity: 0.85; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em; }
html[data-theme="dark"] .left-sidebar-card {
background: linear-gradient(150deg,
color-mix(in srgb, var(--ui-primary, #4f7cff) 10%, #23262e) 0%,
#23262e 100%
);
border-color: rgba(110, 168, 254, 0.22);
box-shadow: 0 4px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(120,156,216,.08);
}
html[data-theme="dark"] .sidebar-head {
background: color-mix(in srgb, var(--ui-primary, #4f7cff) 10%, #23262e);
border-bottom-color: rgba(110, 168, 254, 0.22);
}
html[data-theme="dark"] .sidebar-head-icon { color: #93c5fd; opacity: 1; }
html[data-theme="dark"] .sidebar-title { color: #e6f0ff; }
html[data-theme="dark"] .sidebar-group-title { color: rgba(148,176,210,.75); }
html[data-theme="dark"] .sidebar-link { color: #e8f0ff; }
html[data-theme="dark"] .sidebar-link:hover {
background: rgba(86,156,255,.12);
color: #93c5fd;
border-color: rgba(86,156,255,.25);
box-shadow: inset 2px 0 0 rgba(147,197,253,.6), 0 1px 8px rgba(86,156,255,.12);
transform: translateX(3px);
}
html[data-theme="dark"] .sidebar-link.active {
background: rgba(86,156,255,.13);
color: #93c5fd;
border-color: rgba(86,156,255,.22);
box-shadow: inset 3px 0 0 #93c5fd, inset 6px 0 14px rgba(86,156,255,.07);
}
/* Sidebar submenu */
.sidebar-entry { margin-bottom: 0.25rem; }
.sidebar-main { display: flex; align-items: center; gap: 0.35rem; }
.sidebar-main-link { flex: 1; }
.sidebar-toggle-mini {
border: 1px solid rgba(var(--ui-primary-rgb), 0.2);
background: rgba(var(--ui-primary-rgb), 0.05);
color: #1f446f;
min-width: 30px;
height: 30px;
border-radius: 0.5rem;
cursor: pointer;
}
.sidebar-toggle-mini .chev { font-size: 0.78rem; opacity: 0.8; transition: transform 0.2s ease; }
.sidebar-entry.open .sidebar-toggle-mini .chev { transform: rotate(180deg); }
/* ── Section separator ─────────────────────────────────────── */
.sidebar-section-sep {
display: none;
}
/* ── Sidebar footer (alt aksiyonlar + build notu) ──────────── */
.sidebar-footer {
border-top: 1px solid rgba(var(--ui-primary-rgb), 0.12);
margin-top: 0.4rem;
padding-top: 0.25rem;
}
html[data-theme="dark"] .sidebar-footer {
border-top-color: rgba(110, 168, 254, 0.15);
}
.sidebar-build-note {
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ui-muted, #9ca3af);
text-align: center;
padding: 0.3rem 0.62rem 0.4rem;
opacity: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 0.3s ease;
cursor: default;
-webkit-user-select: none;
user-select: none;
}
.sidebar-footer:hover .sidebar-build-note { opacity: 0.55; }
/* ── Submenu ───────────────────────────────────────────────── */
.sidebar-submenu { display: none; padding: 0.1rem 0.15rem 0.35rem 1.8rem; }
.sidebar-entry.open .sidebar-submenu { display: block; }
.sidebar-submenu a {
display: block;
text-decoration: none;
border: 1px solid rgba(var(--ui-primary-rgb), 0.2);
background: rgba(var(--ui-primary-rgb), 0.05);
color: #214063;
padding: 0.36rem 0.52rem;
border-radius: 0.48rem;
font-size: 0.76rem;
font-weight: 700;
margin-top: 0.28rem;
transition: all 0.18s ease;
}
.sidebar-submenu a:hover {
background: rgba(var(--ui-primary-rgb), 0.13);
color: var(--ui-primary);
border-color: rgba(var(--ui-primary-rgb), 0.34);
}
html[data-theme="dark"] .sidebar-toggle-mini { background: rgba(86,156,255,.12); border-color: rgba(86,156,255,.3); color: #d9e7ff; }
html[data-theme="dark"] .sidebar-submenu a { background: rgba(86,156,255,.12); border-color: rgba(86,156,255,.3); color: #d9e7ff; }
html[data-theme="dark"] .sidebar-submenu a:hover { background: rgba(86,156,255,.2); color: #ffffff; border-color: rgba(139,185,255,.5); }
/* ============================================================
"DAHA FAZLA" DROPDOWN (ÜST MENÜ)
============================================================ */
.top-menu-more-dropdown .dropdown-menu {
min-width: 200px;
border-radius: var(--ui-radius-md);
border: 1px solid rgba(var(--ui-primary-rgb), 0.18);
box-shadow: 0 10px 24px rgba(15, 40, 80, 0.15);
padding: 0.35rem;
}
.top-menu-more-dropdown .dropdown-item {
font-size: 0.82rem;
font-weight: 600;
border-radius: 0.4rem;
padding: 0.42rem 0.7rem;
display: flex;
align-items: center;
gap: 0.55rem;
color: #1f2f45;
}
.top-menu-more-dropdown .dropdown-item .bi {
font-size: 1rem;
flex-shrink: 0;
width: 1.1rem;
text-align: center;
}
.top-menu-more-dropdown .dropdown-item.text-danger { color: var(--ui-danger) !important; }
.top-menu-more-dropdown .dropdown-item.text-danger:hover { background: rgba(var(--ui-danger-rgb, 180,35,60), 0.08); }
.top-menu-more-dropdown hr.dropdown-divider { border-color: var(--ui-border); margin: 0.28rem 0; }
.top-menu-more-dropdown .dropdown-item:hover {
background: rgba(var(--ui-primary-rgb), 0.1);
color: var(--ui-primary);
}
.top-menu-more-dropdown .dropdown-item.active-page {
background: var(--ui-primary);
color: #fff;
}
html[data-theme="dark"] .top-menu-more-dropdown .dropdown-menu {
background: #1d2738;
border-color: rgba(86, 156, 255, 0.22);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.18);
}
html[data-theme="dark"] .top-menu-more-dropdown .dropdown-item { color: #d6e4ff; }
html[data-theme="dark"] .top-menu-more-dropdown .dropdown-item:hover { background: rgba(86, 156, 255, 0.15); color: #8bb9ff; }
html[data-theme="dark"] .top-menu-more-dropdown .dropdown-item.text-danger { color: #ff8ea3 !important; }
html[data-theme="dark"] .top-menu-more-dropdown hr.dropdown-divider { border-color: rgba(86,156,255,.14); }
/* ============================================================
MOBİL HAMBURGER + OFF-CANVAS NAV
============================================================ */
.mobile-nav-hamburger { display: none; }
@media (max-width: 767.98px) {
.mobile-nav-hamburger { display: inline-flex; }
/* Mobilde ticker inline gösterilmez — offcanvas menüde yer yoktur */
/* Mobilde haber bandını gizle — ekran dar */
.dash-news-bar { display: none !important; }
/* Mobilde logo küçült */
.top-menu-brand-text { font-size: 0.85rem !important; }
/* Mobilde link aksiyon butonları gizle — bunlar offcanvas'ta */
.top-menu-actions a.btn { display: none !important; }
/* top-menu-links gizle (zaten offcanvas'ta var) */
.top-menu-links { display: none !important; }
}
#mobileNavOffcanvas .offcanvas-header {
background:
radial-gradient(circle at 10% 15%, rgba(var(--ui-primary-rgb), 0.18), transparent 40%),
linear-gradient(135deg, #eef6ff, #f4f9ff);
border-bottom: 1px solid rgba(var(--ui-primary-rgb), 0.15);
padding: var(--card-pad-md); /* 16px */
}
html[data-theme="dark"] #mobileNavOffcanvas .offcanvas-header {
background:
radial-gradient(circle at 10% 15%, rgba(86, 156, 255, 0.2), transparent 38%),
linear-gradient(135deg, #131e30, #1a2a40);
border-bottom-color: rgba(86, 156, 255, 0.25);
}
html[data-theme="dark"] #mobileNavOffcanvas { background: #111827; }
#mobileNavOffcanvas .offcanvas-body { padding: 0.75rem; }
/* ============================================================
INDEX PAGE — GLASS CARD, HERO, METRİK KARTLAR
============================================================ */
.glass-card {
background: rgba(var(--ui-surface-rgb, 251,249,245), 0.78);
border: 1px solid var(--ui-border);
border-radius: 18px;
-webkit-backdrop-filter: blur(18px) saturate(1.4);
backdrop-filter: blur(18px) saturate(1.4);
box-shadow: var(--ui-shadow-card);
color: var(--ui-text);
transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.glass-card:hover {
box-shadow: var(--ui-shadow-card-hover);
transform: translateY(-2px);
}
html[data-theme="dark"] .glass-card {
background: rgba(20, 31, 49, 0.72);
border-color: rgba(255,255,255,0.08);
}
html[data-theme="light"] .glass-card,
html[data-theme="light"] .ai-support-card { color: var(--ui-text, #243041); }
html[data-theme="light"] .glass-card .text-muted,
html[data-theme="light"] .glass-card .small.text-muted { color: var(--ui-muted, #5b697d) !important; }
.hero {
position: relative;
overflow: hidden;
padding: var(--card-pad); /* 24px */
border-radius: 18px;
background: linear-gradient(125deg, var(--ui-primary), var(--ui-primary-2));
color: #fff;
}
.hero::after {
content: '';
position: absolute;
inset: auto -40px -45px auto;
width: 210px;
height: 210px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.17);
}
/* Accent token — her kart tipi kendi rengini tanımlar */
.metric-workplace { --metric-accent: var(--ui-primary); --metric-accent-rgb: var(--ui-primary-rgb); }
.metric-employee { --metric-accent: #16a34a; --metric-accent-rgb: 22, 163, 74; }
.metric-hardware { --metric-accent: #d97706; --metric-accent-rgb: 217, 119, 6; }
.metric-server { --metric-accent: #6d28d9; --metric-accent-rgb: 109, 40, 217; }
.metric-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 16px;
color: var(--ui-text);
padding: var(--card-pad-md) var(--card-pad); /* 16px 24px */
background: var(--ui-surface);
border: 1px solid var(--ui-border);
border-left: 4px solid var(--metric-accent, var(--ui-primary));
box-shadow: var(--ui-shadow-card);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.metric-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(var(--metric-accent-rgb, var(--ui-primary-rgb)), 0.18),
0 3px 8px rgba(0,0,0,.08);
}
/* Köşe vurgusu */
.metric-card::after {
content: '';
position: absolute;
right: -18px;
top: -18px;
width: 76px;
height: 76px;
border-radius: 50%;
background: rgba(var(--metric-accent-rgb, var(--ui-primary-rgb)), 0.07);
pointer-events: none;
}
.metric-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: var(--card-pad-md); } /* 16px */
.metric-label { display: flex; flex-direction: column; gap: 0.2rem; }
.metric-overline {
font-size: 0.6875rem; /* 11px */
text-transform: uppercase;
letter-spacing: 0.28em;
font-weight: 800;
color: var(--metric-accent, var(--ui-primary));
opacity: 0.85;
}
.metric-card .metric-title { font-size: 0.98rem; font-weight: 700; line-height: 1.2; color: var(--ui-text); }
.metric-icon-badge {
width: 2.9rem; height: 2.9rem; border-radius: 0.95rem;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(var(--metric-accent-rgb, var(--ui-primary-rgb)), 0.11);
border: 1px solid rgba(var(--metric-accent-rgb, var(--ui-primary-rgb)), 0.20);
}
.metric-icon-badge i { color: var(--metric-accent, var(--ui-primary)) !important; }
.metric-card i { font-size: 1.5rem; } /* 24px — KPI ikonları */
.metric-card .metric-value {
font-size: 2.2rem; font-weight: 800; line-height: 1;
letter-spacing: -0.03em; position: relative; z-index: 1; color: var(--ui-text);
}
.metric-card .metric-sub { font-size: 0.86rem; color: var(--ui-muted); position: relative; z-index: 1; }
.metric-foot {
display: flex; justify-content: space-between; align-items: center;
gap: 0.75rem; margin-top: 0.75rem;
font-size: 0.84rem; font-weight: 600; position: relative; z-index: 1;
color: var(--ui-muted);
}
.metric-foot > span:last-child { font-weight: 800; color: var(--metric-accent, var(--ui-primary)); }
.metric-card .progress {
height: 0.42rem;
background: rgba(var(--metric-accent-rgb, var(--ui-primary-rgb)), 0.12);
border-radius: 999px; position: relative; z-index: 1;
}
/* ============================================================
CHART WRAPPER — Oransal yükseklik (aspect-ratio)
============================================================ */
.chart-wrap {
aspect-ratio: 16 / 5;
min-height: 200px;
max-height: 380px;
width: 100%;
position: relative;
}
/* Skeleton shimmer — visible until canvas is rendered */
@keyframes shimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
.chart-wrap::before {
content: '';
position: absolute;
inset: 0;
border-radius: 0.5rem;
background: linear-gradient(
90deg,
rgba(var(--ui-primary-rgb), 0.04) 25%,
rgba(var(--ui-primary-rgb), 0.10) 50%,
rgba(var(--ui-primary-rgb), 0.04) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease infinite;
pointer-events: none;
z-index: 0;
transition: opacity 0.3s ease;
}
/* Hide shimmer once canvas has content */
.chart-wrap.chart-ready::before { opacity: 0; pointer-events: none; }
.chart-wrap canvas { width: 100% !important; height: 100% !important; position: relative; z-index: 1; }
@media (max-width: 991px) {
.chart-wrap { aspect-ratio: 16 / 6; min-height: 180px; }
}
@media (max-width: 767px) {
.top-menu-actions {
justify-content: center;
}
.panel-summary-grid {
grid-template-columns: 1fr;
gap: 0.7rem;
}
.dashboard-hero-compact {
padding: .8rem .85rem;
}
.dashboard-quickbar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .5rem;
}
.dashboard-quicklink {
width: 100%;
justify-content: flex-start;
padding: .62rem .68rem;
border-radius: 12px;
font-size: .77rem;
min-height: 48px;
}
.hero-mini-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
min-width: 100%;
}
.hero-mini-stat {
padding: .55rem .6rem;
border-radius: 12px;
}
.hero-mini-value {
font-size: .92rem;
}
.panel-tour-bridge {
flex-direction: column;
align-items: stretch;
padding: .85rem .9rem;
}
.panel-tour-bridge-actions {
justify-content: stretch;
}
.panel-tour-bridge-pill {
flex: 1 1 calc(50% - .55rem);
justify-content: center;
}
.support-quick-grid {
grid-template-columns: 1fr;
gap: 0.7rem;
}
.support-guides-head {
gap: 0.7rem;
}
.support-guides-meta,
.support-triage-meta,
.support-solution-meta,
.panel-guide-meta,
.panel-guide-lead {
font-size: 0.82rem;
line-height: 1.55;
}
.support-triage-step,
.support-solution-card,
.support-quick-card,
.panel-guide-hero,
.panel-guide-summary,
.panel-guide-box {
padding: var(--card-pad-md); /* 16px */
}
.panel-guide-box-head,
.panel-signal-header,
.corp-list-header,
.news-page-shell .panel-card-head {
gap: 0.55rem;
}
.news-page-shell {
gap: var(--card-gap); /* 16px */
}
.news-page-shell .panel-card-head,
.panel-related-card {
padding: var(--card-pad-md); /* 16px */
}
.news-list .list-group-item {
padding: 0.75rem var(--card-pad-md); /* 12px 16px */
}
.news-reader-title {
font-size: 1.16rem;
}
.news-reader-body {
padding: var(--card-pad-md); /* 16px */
gap: var(--card-pad-md); /* 16px */
}
.news-content {
padding: var(--card-pad-md); /* 16px */
font-size: 0.92rem;
line-height: 1.75;
}
.news-layout > .news-reader-card {
order: 1;
}
.news-layout > .news-list-card {
order: 2;
}
.news-layout > .panel-related-card {
order: 3;
}
.service-search-shell {
width: 100%;
}
.service-search-input {
min-height: 42px;
}
.service-search-meta {
width: 100%;
text-align: left;
font-size: 0.78rem;
}
.service-list-shell .table-responsive {
overflow: visible;
}
.service-list-shell {
padding: var(--card-pad-md); /* 16px */
}
.service-list-shell .table-card-mobile tr {
margin-bottom: 0.7rem;
}
.service-list-shell .table-card-mobile td {
align-items: flex-start;
padding: 0.55rem 0.7rem;
}
.service-list-shell .table-card-mobile td::before {
flex-basis: 34%;
}
.service-list-shell .action-cluster {
width: 100%;
justify-content: flex-end;
}
.service-list-shell .corp-list-actions {
width: 100%;
}
.service-list-shell .corp-list-actions .btn {
width: 100%;
min-width: 0;
}
.service-list-shell .corp-list-header {
gap: 0.7rem;
}
.tbl-critical thead,
.tbl-payments thead,
.tbl-payments tfoot {
display: none;
}
.tbl-critical,
.tbl-payments,
.tbl-critical tbody,
.tbl-payments tbody {
display: block;
}
.tbl-critical tbody tr,
.tbl-payments tbody tr {
display: block;
margin: 0 0 .85rem;
padding: .4rem;
border-radius: 14px;
background: var(--ui-surface);
box-shadow: 0 8px 18px rgba(17,35,58,.08);
}
.tbl-critical tbody td,
.tbl-payments tbody td {
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
width: 100%;
text-align: right !important;
border: 0 !important;
border-bottom: 1px solid rgba(17,35,58,.08) !important;
padding: .58rem .45rem !important;
background: transparent;
}
.tbl-critical tbody td::before,
.tbl-payments tbody td::before {
content: attr(data-label);
flex: 0 0 42%;
text-align: left;
color: var(--ui-muted-soft);
font-size: .68rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.tbl-critical tbody td:last-child,
.tbl-payments tbody td:last-child {
border-bottom: 0 !important;
}
.tbl-critical tbody td > .d-flex {
justify-content: flex-end;
width: 100%;
}
.tbl-critical .btn-icon,
.tbl-payments .btn-icon {
margin-left: auto;
}
html[data-theme="dark"] .tbl-critical tbody tr,
html[data-theme="dark"] .tbl-payments tbody tr {
background: rgba(15,27,45,.92);
box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
html[data-theme="dark"] .tbl-critical tbody td,
html[data-theme="dark"] .tbl-payments tbody td {
border-bottom-color: rgba(122,162,204,.14) !important;
}
.dashboard-mobile-compact {
padding: .9rem .85rem !important;
}
.dashboard-mobile-compact .row.g-2.mb-3 {
--bs-gutter-x: .45rem;
--bs-gutter-y: .45rem;
}
.dashboard-mobile-compact .mail-kpi {
min-height: 0;
padding: .55rem .65rem;
}
.dashboard-mobile-compact .mail-kpi-label {
font-size: .65rem;
margin-bottom: .15rem;
}
.dashboard-mobile-compact .mail-kpi-value {
font-size: 1.05rem;
}
.dashboard-mobile-compact .mail-row {
padding: .5rem .58rem;
border-radius: 10px;
margin-bottom: .4rem;
}
.dashboard-mobile-compact .mail-row .subject {
font-size: .82rem;
}
.dashboard-mobile-compact .mail-row .meta,
.dashboard-mobile-compact .small.text-muted {
font-size: .72rem;
}
.dashboard-mobile-compact .btn,
.dashboard-chart-row .btn {
min-height: 40px;
}
.dashboard-mobile-compact .d-flex.gap-2.flex-wrap .btn,
.dashboard-mobile-compact .d-flex.flex-wrap.gap-2 .btn {
flex: 1 1 calc(50% - .35rem);
}
.dashboard-chart-row > [class*="col-"] .glass-card {
padding: .9rem .85rem !important;
border-radius: 14px;
}
.dashboard-chart-row .card-title-soft {
margin-bottom: .35rem;
font-size: .72rem;
}
.dashboard-chart-row .chart-wrap {
min-height: 160px;
aspect-ratio: 16 / 8;
}
.dashboard-chart-row .badge {
font-size: .66rem;
}
.dashboard-chart-row .trend-period-btn-group {
width: 100%;
justify-content: space-between;
}
.dashboard-chart-row .trend-period-btn-group .btn {
flex: 1 1 0;
padding-left: .35rem;
padding-right: .35rem;
}
}
/* ============================================================
MAIL CARD
============================================================ */
.mail-card {
border: 1px solid rgba(17,35,58,.12);
border-radius: 16px;
background: linear-gradient(140deg, rgba(255,255,255,.92), rgba(236,246,255,.9));
box-shadow: 0 10px 24px rgba(17,35,58,.08);
}
.mail-kpi { border: 1px solid rgba(17,35,58,.12); border-radius: 12px; padding: .65rem .75rem; background: #fff; min-height: 76px; }
.mail-kpi-label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #64748b; font-weight: 700; margin-bottom: .2rem; }
.mail-kpi-value { font-size: 1.25rem; line-height: 1; font-weight: 800; color: #0f172a; }
.mail-row { border: 1px solid rgba(17,35,58,.08); border-radius: 12px; background: #fff; padding: .55rem .7rem; margin-bottom: .5rem; }
.mail-row .subject { font-weight: 700; color: #13263f; font-size: .9rem; line-height: 1.35; }
.mail-row .meta { font-size: .78rem; color: #64748b; margin-top: .2rem; }
html[data-theme="dark"] .mail-card { background: linear-gradient(140deg, rgba(16,29,48,.96), rgba(16,34,56,.92)); border-color: rgba(122,162,204,.25); box-shadow: 0 12px 28px rgba(0,0,0,.32); }
html[data-theme="dark"] .mail-kpi { background: rgba(15,27,45,.95); border-color: rgba(122,162,204,.2); }
html[data-theme="dark"] .mail-kpi-label,
html[data-theme="dark"] .mail-row .meta { color: #9cb4cf; }
html[data-theme="dark"] .mail-kpi-value,
html[data-theme="dark"] .mail-row .subject { color: #e4eefb; }
html[data-theme="dark"] .mail-row { background: rgba(15,27,45,.95); border-color: rgba(122,162,204,.2); }
/* ============================================================
SELECTOR / WİFİ KARTLARI
============================================================ */
.card-title-soft { color: #5f748d; text-transform: uppercase; letter-spacing: .06em; font-size: .76rem; font-weight: 700; margin-bottom: .5rem; }
html[data-theme="light"] .card-title-soft { color: #526176; }
.selector-card {
background: linear-gradient(130deg, #f4f6f9 0%, #eef1f6 45%, #edf7f2 100%);
border: 1px solid #d0d9e5;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.selector-title { color: #1a2535; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .75rem; margin-bottom: .2rem; }
.selector-sub { color: #4b5768; font-size: .85rem; }
html[data-theme="light"] .wifi-stack-note,
html[data-theme="light"] .ai-support-card .text-muted { color: #5b697d !important; }
html[data-theme="light"] .btn-outline-dark { color: #243041; border-color: #aeb8c5; }
html[data-theme="light"] .btn-outline-dark:hover { color: #111827; border-color: #8f9cac; background: #e9edf2; }
html[data-theme="light"] .btn-group .btn-outline-secondary.active,
html[data-theme="light"] #customerTimelineFilters .btn-outline-secondary.active { color: #ffffff; background: #355c8a; border-color: #355c8a; }
.selector-wifi-box { border: 1px solid #b7d5ee; background: rgba(255,255,255,.9); border-radius: 12px; padding: .55rem .65rem; }
.selector-wifi-label { color: #2f5d86; font-size: .73rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.selector-wifi-value { color: #09355f; font-weight: 700; font-size: .92rem; word-break: break-word; }
/* WiFi grid — responsive auto-fit */
.wifi-stack-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--card-gap); /* 16px */
}
.wifi-stack-card {
border: 1px solid #b7d5ee;
background: rgba(255,255,255,.92);
border-radius: 14px;
padding: .75rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.wifi-stack-card.is-empty { border-style: dashed; background: rgba(255,255,255,.65); justify-content: center; }
.wifi-stack-ssid { width: 100%; border: 1px solid var(--ui-border); background: var(--ui-surface-2, var(--ui-surface)); border-radius: 10px; padding: .45rem .55rem; margin-bottom: .65rem; }
.wifi-stack-qr { width: 180px; max-width: 100%; border-radius: 12px; border: 1px solid var(--ui-border); padding: .35rem; background: var(--ui-surface); }
.wifi-stack-note { margin-top: .5rem; font-size: .78rem; color: var(--ui-muted); line-height: 1.35; }
.selector-card .form-select { border-color: rgba(var(--ui-primary-rgb), .4); background-color: var(--ui-surface); color: var(--ui-text); font-weight: 600; }
.selector-card .btn-outline-primary { border-color: var(--ui-primary); color: var(--ui-primary); background: var(--ui-surface-2, var(--ui-surface)); font-weight: 700; }
.selector-card .btn-outline-primary:hover { background: var(--ui-primary); color: var(--ui-surface); border-color: var(--ui-primary); }
html[data-theme="dark"] .selector-card { background: linear-gradient(135deg, #1e2330 0%, #232838 55%, #1e2b2e 100%); border-color: #3a4255; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
html[data-theme="dark"] .selector-title { color: #dde3ec; }
html[data-theme="dark"] .selector-sub { color: #8e97a6; }
html[data-theme="dark"] .selector-wifi-box { border-color: #3c77aa; background: rgba(7,21,38,.7); }
html[data-theme="dark"] .selector-wifi-label { color: #94c6ef; }
html[data-theme="dark"] .selector-wifi-value { color: #edf6ff; }
html[data-theme="dark"] .wifi-stack-card { border-color: #3c77aa; background: rgba(7,21,38,.74); }
html[data-theme="dark"] .wifi-stack-card.is-empty { background: rgba(8,19,34,.48); }
html[data-theme="dark"] .wifi-stack-ssid { border-color: #355f86; background: #10283f; }
html[data-theme="dark"] .wifi-stack-qr { border-color: #355f86; background: #0d2135; }
html[data-theme="dark"] .wifi-stack-note { color: #afcce8; }
html[data-theme="dark"] .selector-card .form-select { border-color: #4b86bb; background: #0f2742; color: #ecf6ff; }
html[data-theme="dark"] .selector-card .btn-outline-primary { border-color: #77b4ff; color: #a9d0ff; background: rgba(17,44,74,.55); }
html[data-theme="dark"] .selector-card .btn-outline-primary:hover { border-color: #77b4ff; background: #2f7fdb; color: #fff; }
/* ============================================================
SIDEBAR CUSTOMER FILTER WIDGET
============================================================ */
/* Greeting bar filter dropdown */
.greeting-filter-dropdown {
min-width: 220px;
font-size: 0.83rem;
}
.greeting-filter-label {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ui-muted);
margin-bottom: 0.4rem;
}
.greeting-filter-active {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--ui-text);
border-top: 1px solid var(--ui-border);
padding-top: 0.4rem;
}
html[data-theme="dark"] .greeting-filter-dropdown {
background: #1d2738;
border-color: rgba(86,156,255,.22);
}
/* ============================================================
COMPACT CUSTOMER CONTEXT BAR (replaces selector card)
============================================================ */
.customer-ctx-bar {
padding: .6rem .85rem;
border-radius: 12px;
border: 1px solid rgba(var(--ui-primary-rgb), .15);
background: rgba(var(--ui-primary-rgb), .04);
}
.ctx-bar-meta {
font-size: .78rem;
color: var(--ui-muted);
font-weight: 400;
margin-left: .1rem;
}
html[data-theme="dark"] .customer-ctx-bar {
background: rgba(var(--ui-primary-rgb), .08);
border-color: rgba(var(--ui-primary-rgb), .25);
}
.table thead th { background: #e7f0f7; color: #284562; border-bottom: 0; font-weight: 600; }
/* ============================================================
AI DESTEK KARTI
============================================================ */
.ai-support-card {
border-radius: 18px;
background: linear-gradient(135deg, rgba(var(--ui-primary-rgb),.11), rgba(31,157,97,.11));
border: 1px solid rgba(17,35,58,.12);
box-shadow: 0 10px 24px rgba(17,35,58,.08);
}
.ai-support-chip {
display: inline-flex; align-items: center; gap: .35rem;
border: 1px solid rgba(var(--ui-primary-rgb),.25); border-radius: 999px;
padding: .3rem .62rem; background: #fff; text-decoration: none;
color: #1f2a44; font-size: .82rem; margin: .2rem .25rem .2rem 0; cursor: pointer;
}
.ai-support-chip:hover { border-color: var(--ui-primary); color: var(--ui-primary); }
html[data-theme="dark"] .ai-support-card { background: linear-gradient(135deg, rgba(43,58,83,.72), rgba(31,54,50,.72)); border-color: #314158; }
html[data-theme="dark"] .ai-support-chip { background: #1d1f23; color: #e5eefc; border-color: #3a4866; }
html[data-theme="dark"] .ai-support-chip:hover { color: #8bb9ff; border-color: #6a9eff; }
.dashboard-priority-card {
border-width: 1px;
border-color: rgba(var(--ui-primary-rgb), 0.18);
box-shadow: 0 14px 32px rgba(17,35,58,.1), 0 0 0 1px rgba(var(--ui-primary-rgb), 0.06);
position: relative;
overflow: hidden;
}
.dashboard-priority-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--ui-primary), var(--ui-primary-2));
}
.dashboard-secondary-card {
border-color: rgba(17,35,58,.09);
box-shadow: 0 10px 20px rgba(17,35,58,.06);
}
.customer-list-hero,
.employee-list-hero,
.hardware-list-hero,
.license-list-hero,
.service-list-hero,
.payment-list-hero {
margin-bottom: 1rem;
}
.list-stat-card,
.customer-stat-card,
.payment-stat-card,
.service-stat-card,
.license-stat-card,
.hardware-stat-card,
.employee-stat-card {
padding: 1rem 1.05rem;
border: 1px solid rgba(var(--ui-primary-rgb), 0.12);
}
.list-stat-label,
.customer-stat-label,
.payment-stat-label,
.service-stat-label,
.license-stat-label,
.hardware-stat-label,
.employee-stat-label {
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ui-muted);
margin-bottom: 0.45rem;
}
.list-stat-value,
.customer-stat-value,
.payment-stat-value,
.service-stat-value,
.license-stat-value,
.hardware-stat-value,
.employee-stat-value {
font-size: 1.7rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--ui-text);
line-height: 1;
}
.list-stat-meta,
.customer-stat-meta,
.payment-stat-meta,
.service-stat-meta,
.license-stat-meta,
.hardware-stat-meta,
.employee-stat-meta {
margin-top: 0.45rem;
font-size: 0.8rem;
color: var(--ui-muted);
line-height: 1.45;
}
.customer-stat-card-warning {
border-color: rgba(229, 138, 0, 0.22);
background: linear-gradient(160deg, rgba(229, 138, 0, 0.08), rgba(255,255,255,0.75));
}
.customer-list-shell,
.payment-list-shell,
.payment-suggestion-shell,
.service-list-shell,
.license-list-shell,
.hardware-list-shell,
.employee-list-shell {
overflow: hidden;
}
.customer-list-head {
margin-bottom: 0 !important;
}
.customer-list-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
}
.customer-search-shell {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: min(100%, 320px);
padding: 0.75rem var(--card-pad-md); /* 12px 16px */
border-radius: 14px;
border: 1px solid rgba(var(--ui-primary-rgb), 0.12);
background: rgba(var(--ui-primary-rgb), 0.05);
}
.customer-search-shell .bi {
color: var(--ui-primary);
font-size: 0.95rem;
}
.customer-search-input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--ui-text);
font-size: 0.84rem;
font-weight: 600;
}
.customer-search-input::placeholder {
color: var(--ui-muted);
font-weight: 500;
}
.customer-search-meta {
font-size: 0.8rem;
color: var(--ui-muted);
}
.list-search-shell,
.customer-search-shell,
.payment-search-shell,
.service-search-shell,
.license-search-shell,
.hardware-search-shell,
.employee-search-shell {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: min(100%, 320px);
padding: 0.72rem 0.9rem;
border-radius: 14px;
border: 1px solid rgba(var(--ui-primary-rgb), 0.12);
background: rgba(var(--ui-primary-rgb), 0.05);
}
.list-search-shell .bi,
.customer-search-shell .bi,
.payment-search-shell .bi,
.service-search-shell .bi,
.license-search-shell .bi,
.hardware-search-shell .bi,
.employee-search-shell .bi {
color: var(--ui-primary);
font-size: 0.95rem;
}
.customer-search-input,
.payment-search-input,
.service-search-input,
.license-search-input,
.hardware-search-input,
.employee-search-input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--ui-text);
font-size: 0.84rem;
font-weight: 600;
}
.customer-search-input::placeholder,
.payment-search-input::placeholder,
.service-search-input::placeholder,
.license-search-input::placeholder,
.hardware-search-input::placeholder,
.employee-search-input::placeholder {
color: var(--ui-muted);
font-weight: 500;
}
.customer-search-meta,
.payment-search-meta,
.service-search-meta,
.license-search-meta,
.hardware-search-meta,
.employee-search-meta {
font-size: 0.8rem;
color: var(--ui-muted);
}
.customer-list-table tbody td,
.payment-list-table tbody td,
.payment-suggestion-table tbody td,
.service-list-table tbody td,
.license-list-table tbody td,
.hardware-list-table tbody td,
.employee-list-table tbody td {
vertical-align: top;
}
.list-id-pill,
.customer-id-pill,
.payment-id-pill,
.service-id-pill,
.license-id-pill,
.hardware-id-pill,
.employee-id-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.8rem;
padding: 0.28rem 0.55rem;
border-radius: 999px;
background: rgba(var(--ui-primary-rgb), 0.08);
color: var(--ui-primary);
font-size: 0.73rem;
font-weight: 800;
}
.customer-name-cell,
.customer-contact-stack,
.customer-tax-stack,
.payment-name-cell,
.payment-stack,
.service-name-cell,
.service-stack,
.service-access-cell,
.license-name-cell,
.license-stack,
.hardware-name-cell,
.hardware-stack,
.employee-name-cell,
.employee-stack {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.customer-name-main,
.customer-primary-line,
.payment-name-main,
.payment-primary-line,
.service-name-main,
.service-primary-line,
.license-name-main,
.license-primary-line,
.hardware-name-main,
.hardware-primary-line,
.employee-name-main,
.employee-primary-line {
color: var(--ui-text);
font-size: 0.84rem;
font-weight: 700;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
}
.customer-name-sub,
.customer-muted-line,
.payment-name-sub,
.payment-muted-line,
.service-name-sub,
.service-muted-line,
.license-name-sub,
.license-muted-line,
.hardware-name-sub,
.hardware-muted-line,
.employee-name-sub,
.employee-muted-line,
.payment-amount-line {
color: var(--ui-muted);
font-size: 0.74rem;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
}
.payment-amount-line {
color: var(--ui-text);
font-weight: 700;
}
.payment-source-pill,
.payment-amount-pill {
display: inline-flex;
align-items: center;
padding: 0.28rem 0.55rem;
border-radius: 999px;
font-size: 0.73rem;
font-weight: 700;
}
.payment-source-pill.is-license {
background: rgba(var(--ui-primary-rgb), 0.12);
color: var(--ui-primary);
}
.payment-source-pill.is-service {
background: rgba(14, 165, 233, 0.12);
color: #0c6a8b;
}
.payment-amount-pill {
background: rgba(var(--ui-primary-rgb), 0.12);
color: var(--ui-primary);
}
.payment-amount-pill.is-empty {
background: rgba(148, 163, 184, 0.14);
color: var(--ui-muted);
}
.license-fee-pill {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.55rem;
border-radius: 999px;
background: rgba(148, 163, 184, 0.14);
color: var(--ui-muted);
font-size: 0.74rem;
font-weight: 700;
}
.license-fee-pill.is-paid {
background: rgba(var(--ui-primary-rgb), 0.12);
color: var(--ui-primary);
}
.employee-security-stack {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
html[data-theme="dark"] .customer-search-shell,
html[data-theme="dark"] .employee-search-shell {
background: rgba(255,255,255,0.04);
border-color: rgba(122,162,204,.16);
}
html[data-theme="dark"] .hardware-search-shell,
html[data-theme="dark"] .license-search-shell,
html[data-theme="dark"] .service-search-shell,
html[data-theme="dark"] .payment-search-shell {
background: rgba(255,255,255,0.04);
border-color: rgba(122,162,204,.16);
}
html[data-theme="dark"] .payment-source-pill.is-service {
color: #8bdcff;
background: rgba(14, 165, 233, 0.18);
}
@media (max-width: 767px) {
.panel-focus-grid {
grid-template-columns: 1fr;
}
.filter-shell form .btn:not(.btn-sm) {
font-size: 0.72rem;
padding: 0.42rem 0.62rem;
}
.filter-shell .form-select,
.filter-shell .form-control {
font-size: 0.76rem;
min-height: 2.1rem;
padding: 0.38rem 0.62rem;
}
.corp-list-header {
flex-direction: column;
align-items: stretch;
}
.corp-list-actions .btn,
.panel-list-toolbar > * {
width: 100%;
min-width: 0;
}
.payment-search-shell,
.payment-list-actions .btn,
.service-search-shell,
.service-list-actions .btn,
.license-search-shell,
.license-list-actions .btn,
.hardware-search-shell,
.hw-list-actions .btn,
.employee-search-shell,
.emp-list-actions .btn {
width: 100%;
}
}
.customer-list-table tbody td {
vertical-align: top;
}
.customer-id-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.8rem;
padding: 0.28rem 0.55rem;
border-radius: 999px;
background: rgba(var(--ui-primary-rgb), 0.08);
color: var(--ui-primary);
font-size: 0.73rem;
font-weight: 800;
}
.customer-name-cell,
.customer-contact-stack,
.customer-tax-stack {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.customer-name-main,
.customer-primary-line {
color: var(--ui-text);
font-size: 0.84rem;
font-weight: 700;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
}
.customer-name-sub,
.customer-muted-line {
color: var(--ui-muted);
font-size: 0.74rem;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
}
.customer-list-table tbody td {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.customer-list-table .customer-name-cell,
.customer-list-table .customer-contact-stack,
.customer-list-table .customer-tax-stack {
gap: 0.12rem;
}
.customer-list-table .customer-name-main,
.customer-list-table .customer-primary-line {
font-size: 0.82rem;
line-height: 1.3;
}
.customer-list-table .customer-name-sub,
.customer-list-table .customer-muted-line {
font-size: 0.72rem;
line-height: 1.32;
}
html[data-theme="dark"] .customer-stat-card-warning {
background: linear-gradient(160deg, rgba(229, 138, 0, 0.12), rgba(16,23,35,0.88));
border-color: rgba(229, 138, 0, 0.26);
}
html[data-theme="dark"] .customer-search-shell {
background: rgba(255,255,255,0.04);
border-color: rgba(122,162,204,.16);
}
@media (max-width: 767px) {
.customer-list-actions {
width: 100%;
}
.customer-search-shell,
.customer-list-actions .btn {
width: 100%;
}
.customer-stat-value {
font-size: 1.45rem;
}
}
@media (max-width: 639.98px) {
.customer-list-table.table-card-mode tr {
margin-bottom: 0.5rem;
padding: 0.5rem 0.65rem;
}
.customer-list-table.table-card-mode td {
display: grid;
grid-template-columns: 40% 1fr;
align-items: start;
gap: 0.45rem;
padding: 0.22rem 0;
font-size: 0.8rem;
}
.customer-list-table.table-card-mode td::before {
margin-right: 0;
font-size: 0.68rem;
}
.customer-list-table.table-card-mode td > * {
min-width: 0;
}
.customer-list-table.table-card-mode .customer-name-main,
.customer-list-table.table-card-mode .customer-primary-line {
font-size: 0.79rem;
}
.customer-list-table.table-card-mode .customer-name-sub,
.customer-list-table.table-card-mode .customer-muted-line {
font-size: 0.7rem;
}
.customer-list-table.table-card-mode td.td-actions {
display: flex;
justify-content: flex-end;
padding-top: 0.35rem;
}
}
.section-card-head {
border-bottom: 1px solid rgba(var(--ui-primary-rgb), 0.08);
padding-bottom: 0.72rem;
margin-bottom: 0.9rem;
}
.section-card-head.section-card-head-tight {
padding-bottom: 0.55rem;
margin-bottom: 0.72rem;
}
.section-card-kicker {
font-size: 0.6875rem; /* 11px */
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ui-primary);
margin-bottom: 0.24rem;
}
.section-card-title {
font-size: 1rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ui-text);
line-height: 1.2;
}
.section-card-title.section-card-title-sm {
font-size: 0.95rem;
}
.section-card-meta {
font-size: 0.79rem;
color: var(--ui-muted);
line-height: 1.5;
max-width: 36rem;
}
.section-card-meta.section-card-meta-tight {
margin-bottom: 0.4rem;
}
.panel-mini-summary {
padding: var(--card-pad-md); /* 16px */
}
.panel-mini-summary-label {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ui-muted);
margin-bottom: 0.3rem;
}
.panel-mini-summary-value {
font-size: 1rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ui-text);
}
.panel-mini-summary-meta {
margin-top: 0.24rem;
font-size: 0.78rem;
color: var(--ui-muted);
line-height: 1.45;
}
.portal-summary-card {
background: linear-gradient(145deg, rgba(var(--ui-primary-rgb), .08), rgba(18,138,122,.08)), var(--ui-surface);
border-color: rgba(var(--ui-primary-rgb), .18);
}
.portal-contact-mini {
display: grid;
gap: .45rem;
font-size: .82rem;
color: var(--ui-muted);
min-width: min(100%, 240px);
}
.portal-stat-row {
display: flex;
flex-wrap: wrap;
gap: .55rem;
}
.portal-stat-chip {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .42rem .75rem;
border-radius: 999px;
background: rgba(var(--ui-primary-rgb), .09);
border: 1px solid rgba(var(--ui-primary-rgb), .15);
color: var(--ui-text);
font-size: .82rem;
font-weight: 600;
}
.portal-action-grid {
display: flex;
flex-wrap: wrap;
gap: .55rem;
}
.portal-next-card {
background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,250,252,.96));
}
.portal-next-item {
padding: .75rem .85rem;
border-radius: 14px;
border: 1px solid rgba(17,35,58,.08);
background: rgba(255,255,255,.72);
margin-bottom: .75rem;
}
.portal-next-item.is-alert {
border-color: rgba(220,53,69,.22);
background: rgba(220,53,69,.06);
}
.portal-next-item.is-info {
border-color: rgba(var(--ui-primary-rgb), .2);
background: rgba(var(--ui-primary-rgb), .06);
}
.portal-next-label {
font-size: .73rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ui-muted);
margin-bottom: .2rem;
}
.portal-next-value {
font-size: .92rem;
font-weight: 700;
color: var(--ui-text);
line-height: 1.35;
}
.portal-compact-note {
font-size: .8rem;
color: var(--ui-muted);
line-height: 1.5;
}
.portal-mini-tile {
background: var(--ui-surface-2);
}
html[data-theme="dark"] .dashboard-priority-card {
border-color: rgba(var(--ui-primary-rgb), 0.24);
box-shadow: var(--shadow-t1), 0 0 0 1px rgba(var(--ui-primary-rgb), 0.12);
}
html[data-theme="dark"] .dashboard-secondary-card {
border-color: rgba(122,162,204,.18);
box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
html[data-theme="dark"] .section-card-head {
border-bottom-color: rgba(122,162,204,.14);
}
html[data-theme="dark"] .section-card-kicker {
color: #8bb9ff;
}
html[data-theme="dark"] .portal-summary-card {
background: linear-gradient(145deg, rgba(22,39,66,.92), rgba(21,55,52,.86));
border-color: rgba(var(--ui-primary-rgb), .24);
}
html[data-theme="dark"] .portal-next-card,
html[data-theme="dark"] .portal-next-item,
html[data-theme="dark"] .portal-mini-tile {
background: rgba(15,27,45,.9);
border-color: rgba(122,162,204,.18);
}
html[data-theme="dark"] .portal-stat-chip {
background: rgba(var(--ui-primary-rgb), .16);
border-color: rgba(var(--ui-primary-rgb), .24);
color: #eef4ff;
}
@media (max-width: 767px) {
.portal-action-grid .btn {
width: 100%;
}
.portal-contact-mini {
min-width: 100%;
}
}
/* ============================================================
TABLO COMPACT
============================================================ */
.tbl-compact { font-size: .78rem; }
/* ============================================================
DARK FIXED LEFT SIDEBAR LAYOUT (min-width: 768px)
============================================================ */
/* ── Brand header içinde sidebar ── */
.sidebar-brand-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
padding: var(--card-pad) var(--card-pad-md) var(--card-pad-md); /* 24px 16px 16px */
border-bottom: 1px solid var(--sidebar-border);
position: sticky;
top: 0;
z-index: 2;
background: var(--sidebar-bg);
transition: all 0.2s ease;
}
html[data-theme="dark"] .sidebar-brand-wrap {
background: linear-gradient(180deg, rgba(31, 41, 55, 0.4) 0%, rgba(17, 24, 39, 0.2) 100%), var(--sidebar-bg);
}
html[data-theme="light"] .sidebar-brand-wrap {
background: var(--sidebar-bg);
}
.sidebar-brand-copy {
display: flex;
align-items: baseline;
gap: 0.4rem;
min-width: 0;
}
.sidebar-brand-wrap img {
width: 100%;
height: auto;
object-fit: contain;
border-radius: 6px;
flex-shrink: 0;
}
/* Clean Text-Based Brand */
.sidebar-brand-text-main-large {
font-family: 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #0f172a;
line-height: 1;
}
html[data-theme="dark"] .sidebar-brand-text-main-large {
color: #f0f4f9;
}
html[data-theme="light"] .sidebar-brand-text-main-large {
color: #0f172a;
}
.sidebar-brand-version {
font-family: 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
color: #0f6cbd;
text-transform: uppercase;
line-height: 1;
}
html[data-theme="dark"] .sidebar-brand-version {
color: #93c5fd;
}
html[data-theme="light"] .sidebar-brand-version {
color: #0f6cbd;
}
.sidebar-brand-info { display: none; }
.sidebar-brand-name {
font-size: 0.8rem;
font-weight: 700;
color: #e6edf3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em;
}
html[data-theme="light"] .sidebar-brand-name {
color: #0f172a;
}
.sidebar-brand-sub {
font-size: 0.65rem;
color: rgba(255,255,255, 0.5);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-top: 2px;
}
html[data-theme="light"] .sidebar-brand-sub {
color: var(--ui-primary, #0f6cbd);
}
.sidebar-visibility-toggle {
width: 100%;
min-height: 0;
background: transparent;
box-shadow: none;
text-align: left;
}
.sidebar-visibility-toggle .bi {
opacity: 0.85;
}
.sidebar-visibility-label {
white-space: nowrap;
}
.sidebar-toggle-row {
margin: 1px 0 0;
}
.sidebar-toggle-row .sidebar-visibility-toggle {
min-height: 44px;
}
.sidebar-visibility-toggle:hover,
.sidebar-visibility-toggle:focus-visible {
text-decoration: none;
}
html[data-theme="dark"] .sidebar-visibility-toggle {
color: inherit;
}
html[data-theme="dark"] .sidebar-visibility-toggle:hover,
html[data-theme="dark"] .sidebar-visibility-toggle:focus-visible {
color: inherit;
}
@media (min-width: 768px) {
/* Container: tam genişlik, padding'siz */
.container.soft-enter {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
}
.container.soft-enter > .row {
--bs-gutter-x: 0;
margin-left: 0 !important;
margin-right: 0 !important;
align-items: stretch !important;
}
/* col-md-3 → align-self:flex-start ile kendi yüksekliğinde kalır,
col-md-9'un yüksekliğini etkilemez. Arka plan sidebar genişliğinde
sabit tutulmak için ::before pseudo ile çözülür. */
.container.soft-enter > .row > .col-md-3 {
width: var(--sidebar-w) !important;
max-width: var(--sidebar-w) !important;
flex: 0 0 var(--sidebar-w) !important;
padding: 0 !important;
z-index: 901;
position: sticky !important;
top: 0 !important;
align-self: flex-start !important;
background: var(--sidebar-bg) !important;
border-right: 1px solid var(--sidebar-border) !important;
}
.container.soft-enter > .row > .col-md-3 > .left-sidebar-wrap {
position: static !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding: 0 !important;
}
/* col-md-9 → fixed sidebar dışına kaydır */
.container.soft-enter > .row > .col-md-9 {
max-width: calc(100% - var(--sidebar-w)) !important;
flex: 0 0 calc(100% - var(--sidebar-w)) !important;
padding-left: 1.1rem !important;
padding-right: 1.1rem !important;
padding-top: 0.75rem !important;
}
/* Desktop: top-menu-card gizli — menuHeroGreeting zaten tüm araçları taşıyor */
.top-menu-card:not(.login-top-menu) {
display: none !important;
}
html[data-sidebar-state="collapsed"] {
--sidebar-w: var(--sidebar-w-collapsed);
}
html[data-sidebar-state="collapsed"] .sidebar-brand-wrap {
justify-content: center;
padding-left: 0.55rem;
padding-right: 0.55rem;
}
html[data-sidebar-state="collapsed"] .sidebar-brand-copy,
html[data-sidebar-state="collapsed"] .sidebar-group-title,
html[data-sidebar-state="collapsed"] .sidebar-toggle-hint,
html[data-sidebar-state="collapsed"] .sidebar-visibility-label,
html[data-sidebar-state="collapsed"] .sidebar-head-text,
html[data-sidebar-state="collapsed"] .sidebar-section-sep,
html[data-sidebar-state="collapsed"] .sidebar-build-note,
html[data-sidebar-state="collapsed"] .sidebar-logo-light,
html[data-sidebar-state="collapsed"] .sidebar-logo-dark,
html[data-sidebar-state="collapsed"] .sidebar-link .icon-label > span:last-child,
html[data-sidebar-state="collapsed"] .sidebar-collapse-btn .icon-label-text {
display: none !important;
}
html[data-sidebar-state="collapsed"] .sidebar-logo-fallback {
display: none !important;
}
html[data-sidebar-state="collapsed"] .sidebar-link,
html[data-sidebar-state="collapsed"] .sidebar-main {
justify-content: center;
}
html[data-sidebar-state="collapsed"] .sidebar-link {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
html[data-sidebar-state="collapsed"] .sidebar-visibility-toggle {
width: 100%;
padding-left: 0;
padding-right: 0;
}
html[data-sidebar-state="collapsed"] .sidebar-toggle-row {
margin-left: 0;
margin-right: 0;
}
html[data-sidebar-state="collapsed"] .sidebar-collapse-btn {
width: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem;
justify-content: center;
}
html[data-sidebar-state="collapsed"] .sidebar-link .icon-label {
gap: 0;
}
html[data-sidebar-state="collapsed"] .sidebar-toggle-mini,
html[data-sidebar-state="collapsed"] .sidebar-submenu {
display: none !important;
}
/* Ticker is now inline in top-menu-card — no separate card positioning needed */
/* Top-menu brand logosu sidebar olduğu için gizle */
.top-menu-brand { display: none !important; }
/* Hamburger masaüstünde gizle */
.mobile-nav-hamburger { display: none !important; }
}
/* ── Sidebar kart: saydam, kenarsız ── */
.left-sidebar-wrap {
background: transparent;
}
.left-sidebar-card {
border: none !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
.left-sidebar-card .card-body {
padding: 0.4rem 0.6rem !important;
}
/* ============================================================
AÇIK TEMA — MASAÜSTÜ SIDEBAR
(Desktop layout bloğundan sonra geldiği için !important
çakışmalarında bu kurallar galip gelir)
============================================================ */
/* Sidebar sütun arka planı: açık mavimsi */
html[data-theme="light"] {
--sidebar-bg: #eef4fc;
--sidebar-border: rgba(var(--ui-primary-rgb), 0.14);
}
/* Marka alanı: açık tema için açık arka plan */
html[data-theme="light"] .sidebar-brand-wrap {
background: #eef4fc !important;
border-bottom-color: rgba(var(--ui-primary-rgb), 0.14) !important;
}
/* Sağ kenar çizgisi (col-md-3) */
@media (min-width: 768px) {
html[data-theme="light"] .container.soft-enter > .row > .col-md-3 {
border-right-color: rgba(var(--ui-primary-rgb), 0.13) !important;
}
/* Top bar alt çizgisi */
html[data-theme="light"] .top-menu-card {
border-bottom-color: rgba(var(--ui-primary-rgb), 0.10) !important;
}
}
/* Sidebar brand text renkler - açık mod */
html[data-theme="light"] .sidebar-brand-text-main-large {
color: #0f172a !important;
}
html[data-theme="light"] .sidebar-brand-version {
color: var(--ui-primary, #0f6cbd) !important;
}
html[data-theme="light"] .sidebar-brand-name {
color: #0f172a !important;
}
html[data-theme="light"] .sidebar-brand-sub {
color: var(--ui-primary, #0f6cbd) !important;
}
/* Grup başlık yazıları */
html[data-theme="light"] .sidebar-group-title {
color: rgba(15, 80, 160, 0.48) !important;
}
/* Nav bağlantılar */
html[data-theme="light"] .sidebar-link {
color: #253b55 !important;
}
html[data-theme="light"] .sidebar-link:hover {
background: rgba(var(--ui-primary-rgb), 0.1) !important;
color: var(--ui-primary) !important;
}
html[data-theme="light"] .sidebar-link.active {
background: rgba(var(--ui-primary-rgb), 0.10) !important;
color: var(--ui-primary) !important;
font-weight: 700 !important;
box-shadow: inset 3px 0 0 var(--ui-primary), inset 6px 0 12px rgba(var(--ui-primary-rgb), 0.06) !important;
border-radius: 0 0.5rem 0.5rem 0 !important;
}
/* Toggle mini buton */
html[data-theme="light"] .sidebar-toggle-mini {
background: none !important;
border: none !important;
color: rgba(15, 80, 160, 0.38) !important;
}
html[data-theme="light"] .sidebar-toggle-mini:hover {
color: rgba(15, 80, 160, 0.72) !important;
}
/* Alt menü bağlantılar */
html[data-theme="light"] .sidebar-submenu a {
color: #3d6090 !important;
background: none !important;
border: none !important;
}
html[data-theme="light"] .sidebar-submenu a:hover {
color: var(--ui-primary) !important;
background: rgba(var(--ui-primary-rgb), 0.07) !important;
}
html[data-theme="light"] .sidebar-avatar-edit-btn {
color: #3d6090 !important;
}
/* Off-canvas mobil menü */
html[data-theme="light"] #mobileNavOffcanvas {
background: #eef4fc !important;
border-right-color: rgba(var(--ui-primary-rgb), 0.14) !important;
}
html[data-theme="light"] #mobileNavOffcanvas .offcanvas-header {
border-bottom-color: rgba(var(--ui-primary-rgb), 0.14) !important;
}
html[data-theme="light"] #mobileNavOffcanvas .sidebar-kicker {
color: rgba(15, 80, 160, 0.48) !important;
}
html[data-theme="light"] #mobileNavOffcanvas .sidebar-title {
color: #1a3050 !important;
}
html[data-theme="light"] #mobileNavOffcanvas .btn-close {
filter: none !important;
}
/* ── Sidebar grup başlıkları: açık koyu ── */
.sidebar-group-title {
font-size: 0.62rem !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
color: rgba(255,255,255,.22) !important;
margin: 0.85rem 0.35rem 0.25rem !important;
text-transform: uppercase !important;
}
.sidebar-panel-build {
font-size: 0.58rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
color: rgba(255,255,255,.42) !important;
text-transform: none !important;
white-space: normal;
line-height: 1.4;
margin-bottom: 0.45rem !important;
}
/* ── Sidebar bağlantılar: koyu tema ── */
.sidebar-link {
display: flex !important;
align-items: center !important;
gap: var(--sidebar-item-gap) !important;
min-height: 44px;
padding: 0.48rem 0.65rem !important;
border-radius: 7px !important;
color: #8b949e !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
line-height: 1.2 !important;
border: none !important;
box-shadow: none !important;
text-decoration: none;
transition: background 0.14s ease, color 0.14s ease !important;
margin-bottom: 1px;
}
.sidebar-link:hover {
background: rgba(255,255,255,.07) !important;
color: #c9d1d9 !important;
transform: none !important;
border: none !important;
}
.sidebar-link.active {
background: rgba(var(--ui-primary-rgb), 0.10) !important;
color: var(--ui-primary) !important;
font-weight: 700 !important;
border: none !important;
box-shadow: inset 3px 0 0 var(--ui-primary), inset 6px 0 12px rgba(var(--ui-primary-rgb), 0.06) !important;
border-radius: 0 0.5rem 0.5rem 0 !important;
}
.sidebar-link .icon-label {
display: flex !important;
align-items: center !important;
gap: var(--sidebar-item-gap) !important;
}
.sidebar-link .icon-label i { font-size: 1rem; flex-shrink: 0; opacity: 0.85; }
/* ── Sidebar alt menü ── */
.sidebar-entry { margin-bottom: 1px; }
.sidebar-main { display: flex; align-items: stretch; gap: 0.25rem; }
.sidebar-main-link { flex: 1; }
.sidebar-toggle-mini {
background: none !important;
border: none !important;
color: rgba(255,255,255,.25) !important;
min-width: 32px;
min-height: 44px;
padding: 0.3rem 0.4rem !important;
cursor: pointer;
border-radius: 5px;
transition: color 0.15s;
}
.sidebar-toggle-mini:hover { color: rgba(255,255,255,.55) !important; }
.sidebar-submenu {
padding: 0.1rem 0.15rem 0.2rem 2rem !important;
}
.sidebar-submenu a {
display: block;
color: rgba(255,255,255,.4) !important;
font-size: 0.78rem;
text-decoration: none;
padding: 0.28rem 0.45rem;
border-radius: 5px;
transition: color 0.14s;
}
.sidebar-submenu a:hover { color: rgba(255,255,255,.75) !important; }
/* ── Off-canvas: koyu ── */
#mobileNavOffcanvas {
background: var(--sidebar-bg) !important;
border-right: 1px solid var(--sidebar-border) !important;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
#mobileNavOffcanvas .offcanvas-header {
border-bottom: 1px solid var(--sidebar-border) !important;
padding: 1rem 1rem 0.9rem !important;
background: linear-gradient(180deg, rgba(var(--ui-primary-rgb), 0.12), transparent 90%);
}
#mobileNavOffcanvas .sidebar-kicker { color: rgba(255,255,255,.35) !important; }
#mobileNavOffcanvas .sidebar-title { color: #e6edf3 !important; }
#mobileNavOffcanvas .btn-close { filter: invert(1) !important; }
#mobileNavOffcanvas .offcanvas-body {
padding: var(--card-pad-md); /* 16px */
display: flex;
flex-direction: column;
gap: 0.2rem;
}
#mobileNavOffcanvas .sidebar-group-title {
margin-top: 0.8rem;
margin-bottom: 0.35rem;
padding-left: 0.2rem;
font-size: 0.66rem;
letter-spacing: 0.12em;
}
#mobileNavOffcanvas .sidebar-group-title:first-child {
margin-top: 0;
}
#mobileNavOffcanvas .sidebar-link {
min-height: 48px;
margin-bottom: 0.38rem;
border-radius: 14px;
border: 1px solid rgba(var(--ui-primary-rgb), 0.08);
background: rgba(255,255,255,0.04);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#mobileNavOffcanvas .sidebar-link .icon-label {
gap: var(--card-gap); /* 16px */
}
#mobileNavOffcanvas .sidebar-link .bi {
font-size: 1rem;
}
#mobileNavOffcanvas .sidebar-link.active {
box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 0 0 1px rgba(var(--ui-primary-rgb), 0.18);
}
#mobileNavOffcanvas .mobile-sidebar-note {
margin-top: 0.55rem;
padding: 0.75rem 0.9rem;
border-radius: 14px;
border: 1px dashed rgba(var(--ui-primary-rgb), 0.2);
background: rgba(var(--ui-primary-rgb), 0.06);
color: var(--ui-muted);
font-size: 0.77rem;
line-height: 1.45;
}
html[data-theme="dark"] #mobileNavOffcanvas .sidebar-link {
background: rgba(255,255,255,0.02);
border-color: rgba(122,162,204,.12);
}
html[data-theme="dark"] #mobileNavOffcanvas .mobile-sidebar-note {
color: #a8bdd8;
}
html[data-theme="light"] #mobileNavOffcanvas .offcanvas-header {
background: linear-gradient(180deg, rgba(var(--ui-primary-rgb), 0.08), transparent 90%);
}
.tbl-compact th, .tbl-compact td { padding: .45rem .5rem; }
/* ============================================================
#1 — GARANTİ TARİHİ BADGE (warranty_badge())
============================================================ */
.wb {
font-size: 0.74rem;
font-weight: 700;
border-radius: 999px;
padding: 0.22rem 0.55rem;
letter-spacing: 0.01em;
}
.wb-ok { background: #d1fadf; color: #135e33; border: 1px solid #a3e6c0; }
.wb-warn { background: #fff3cd; color: #7a4d00; border: 1px solid #ffd97a; }
.wb-expired { background: #fde8eb; color: #8b1a29; border: 1px solid #f0b8c3; }
html[data-theme="dark"] .wb-ok { background: #1a3d2b; color: #5de89f; border-color: #2c6644; }
html[data-theme="dark"] .wb-warn { background: #3b2f0d; color: #ffd07f; border-color: #6b5420; }
html[data-theme="dark"] .wb-expired { background: #3b1a22; color: #ff8ea3; border-color: #6e3046; }
/* ============================================================
#2 — TABLO BİLGİ HİYERARŞİSİ
============================================================ */
.tbl-primary { font-weight: 600; color: var(--ui-text); }
.tbl-muted { color: var(--ui-muted); font-size: 0.82rem; }
html[data-theme="dark"] .tbl-muted { color: var(--ui-muted-soft); }
/* ============================================================
#3 — FORM BÖLÜM AYIRAÇLARI
============================================================ */
.form-section-label {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 1rem 0 0.5rem;
font-size: 0.6875rem; /* 11px */
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ui-primary);
}
.form-section-label::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, rgba(var(--ui-primary-rgb),0.3), transparent);
}
html[data-theme="dark"] .form-section-label { color: #7cb8ff; }
html[data-theme="dark"] .form-section-label::after { background: linear-gradient(to right, rgba(124,184,255,0.3), transparent); }
/* ============================================================
#4 — DELTA BADGE (Dashboard)
============================================================ */
.delta-badge {
display: inline-flex;
align-items: center;
gap: 0.22rem;
font-size: 0.72rem;
font-weight: 700;
padding: 0.16rem 0.46rem;
border-radius: 999px;
background: rgba(var(--metric-accent-rgb, var(--ui-primary-rgb)), 0.12);
border: 1px solid rgba(var(--metric-accent-rgb, var(--ui-primary-rgb)), 0.22);
color: var(--metric-accent, var(--ui-primary));
white-space: nowrap;
}
.delta-badge.delta-zero {
background: rgba(var(--ui-muted-soft, 118, 131, 150), 0.10);
border-color: rgba(var(--ui-muted-soft, 118, 131, 150), 0.16);
color: var(--ui-muted);
}
/* ============================================================
#5 — BOŞ DURUM BİLEŞENİ (empty-state)
============================================================ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 2.5rem 1rem;
text-align: center;
}
.empty-state-inline {
min-height: 0;
padding-left: 0;
padding-right: 0;
}
.es-icon { font-size: 2.2rem; color: var(--ui-muted-soft); opacity: 0.65; }
.es-title { font-size: 0.96rem; font-weight: 700; color: var(--ui-text); }
.es-sub { font-size: 0.82rem; color: var(--ui-muted); }
.es-row td { border: none !important; background: transparent !important; }
html[data-theme="dark"] .es-row td { background: transparent !important; }
@media (max-width: 767px) {
.section-card-head {
padding-bottom: 0.85rem !important;
}
.section-card-meta {
max-width: 100%;
}
}
/* ============================================================
#6 — TOAST BİLDİRİMLERİ
============================================================ */
.td-toast-wrap {
position: fixed;
bottom: 1.4rem;
right: 1.4rem;
z-index: 9999;
animation: tdToastIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.td-toast-wrap.td-toast-out { animation: tdToastOut 0.38s ease forwards; }
.td-toast {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.75rem 1rem 0.75rem 0.9rem;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.1);
min-width: 260px;
max-width: 360px;
font-size: 0.875rem;
font-weight: 600;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.td-toast-success { background: #edfaf3; border: 1px solid #9ddbb9; color: #1f5d40; }
.td-toast-danger { background: #fdf0f2; border: 1px solid #f0b8c3; color: #7a2536; }
.td-toast-warning { background: #fdf7ec; border: 1px solid #f0d88a; color: #6b4e16; }
.td-toast-info { background: #edf4ff; border: 1px solid #b8d4f0; color: #214766; }
html[data-theme="dark"] .td-toast-success { background: #1a3a2a; border-color: #2e6644; color: #9de8c0; }
html[data-theme="dark"] .td-toast-danger { background: #3b1e24; border-color: #6e3046; color: #ffaaba; }
html[data-theme="dark"] .td-toast-warning { background: #3a2e10; border-color: #6b5420; color: #ffd07f; }
html[data-theme="dark"] .td-toast-info { background: #1a2f48; border-color: #335678; color: #9fd4ff; }
.td-toast-icon { font-size: 1.1rem; flex-shrink: 0; }
.td-toast-msg { flex: 1; line-height: 1.4; }
.td-toast-close {
background: none; border: none; cursor: pointer; padding: 0;
font-size: 1.1rem; line-height: 1; opacity: 0.55;
color: inherit; flex-shrink: 0;
transition: opacity 0.15s;
}
.td-toast-close:hover { opacity: 1; }
@keyframes tdToastIn {
from { opacity: 0; transform: translateY(16px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tdToastOut {
to { opacity: 0; transform: translateY(12px) scale(0.95); }
}
/* ============================================================
#8 — MOBİL TABLO KART GÖRÜNÜMÜ
============================================================ */
@media (max-width: 767.98px) {
.table-card-mobile thead { display: none; }
.table-card-mobile tbody, .table-card-mobile tr, .table-card-mobile td {
display: block; width: 100%;
}
.table-card-mobile tr {
margin-bottom: 0.75rem;
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md);
overflow: hidden;
background: var(--ui-surface);
box-shadow: 0 2px 8px rgba(15,33,58,0.06);
}
.table-card-mobile td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.84rem;
border-bottom: 1px solid var(--ui-border);
text-align: right;
}
.table-card-mobile td:last-child { border-bottom: none; }
.table-card-mobile td::before {
content: attr(data-label);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ui-muted);
white-space: nowrap;
flex-shrink: 0;
text-align: left;
}
/* Aksiyon sütunu tam genişlik, ortala */
.table-card-mobile td[data-label="İşlemler"],
.table-card-mobile td[data-label="Islemler"] {
justify-content: center;
}
.table-card-mobile td[data-label="İşlemler"]::before,
.table-card-mobile td[data-label="Islemler"]::before { display: none; }
/* panel-mobile-cols.js: gizlenen sütunlar (eski) */
.table-card-mobile td[data-mobile-hide] { display: none !important; }
.table-card-mobile thead th[data-mobile-hide] { display: none !important; }
}
/* panel-mobile-cols.js: breakpoint/ölçüm bazlı gizleme (tüm ekranlar) */
[data-col-hidden] { display: none !important; }
/* ============================================================
#9 — PANEL TOUR SHELL
============================================================ */
body.tour-page {
font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
background: var(--ui-bg);
color: var(--ui-text);
height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
}
body.tour-page::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 12% 10%, rgba(var(--ui-primary-rgb), 0.08), transparent 32%),
radial-gradient(circle at 88% 82%, rgba(var(--ui-primary-rgb), 0.05), transparent 30%);
}
.tour-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 1.2rem;
background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.72));
border-bottom: 1px solid rgba(var(--ui-primary-rgb), 0.12);
flex-shrink: 0;
gap: 1rem;
position: relative;
z-index: 3;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
box-shadow: 0 10px 24px rgba(17, 35, 58, 0.05);
}
.tour-topbar.compact-aux {
padding: 0.58rem 1rem;
gap: 0.75rem;
}
.tour-brand {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--ui-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.tour-brand img {
height: 22px;
opacity: 0.85;
}
.tour-brand span {
color: var(--ui-primary);
}
.tour-topbar-actions {
display: flex;
align-items: center;
gap: 0.65rem;
}
.tour-topbar-meta {
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.tour-tool-cluster {
display: flex;
align-items: center;
gap: 0.42rem;
}
.tour-topbar-badge,
.tour-slide-index,
.tour-mockup-tag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.24rem 0.58rem;
border-radius: 999px;
background: rgba(var(--ui-primary-rgb), 0.08);
border: 1px solid rgba(var(--ui-primary-rgb), 0.16);
color: var(--ui-primary);
font-size: 0.68rem;
font-weight: 800;
white-space: nowrap;
}
.tour-counter {
font-size: 0.7rem;
font-weight: 700;
color: var(--ui-muted);
white-space: nowrap;
}
.tour-btn,
.tour-tool-btn,
.tour-cta-secondary {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.46rem 0.92rem;
border-radius: 10px;
border: 1px solid rgba(var(--ui-primary-rgb), 0.12);
background: rgba(255,255,255,0.72);
color: var(--ui-text);
text-decoration: none;
font-size: 0.78rem;
font-weight: 700;
transition: all 0.15s ease;
}
.tour-tool-btn {
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border-radius: 12px;
flex-shrink: 0;
border-color: rgba(var(--ui-primary-rgb), 0.12);
background: rgba(255,255,255,0.72);
color: var(--ui-text);
}
.tour-tool-btn i {
font-size: 0.98rem;
}
.tour-tool-btn.tone-enter {
background: var(--slide-color, var(--ui-primary));
border-color: transparent;
}
.tour-btn:hover,
.tour-tool-btn:hover,
.tour-cta-secondary:hover {
background: rgba(var(--ui-primary-rgb), 0.08);
border-color: rgba(var(--ui-primary-rgb), 0.18);
color: var(--ui-primary);
transform: translateY(-1px);
}
.tour-btn.primary,
.tour-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.48rem 1rem;
background: var(--slide-color, var(--ui-primary));
color: #fff;
border-radius: 10px;
border: 1px solid transparent;
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
width: fit-content;
transition: opacity 0.15s ease, transform 0.15s ease;
box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.tour-btn.primary:hover,
.tour-cta:hover {
opacity: 0.86;
color: #fff;
transform: translateY(-1px);
}
.tour-dots {
display: flex;
align-items: center;
gap: 0.3rem;
flex: 1;
justify-content: center;
}
.tour-dot {
height: 4px;
min-width: 20px;
border: none;
border-radius: 2px;
background: var(--ui-border);
cursor: pointer;
transition: all 0.3s;
}
.tour-dot.active {
background: var(--slide-color, var(--ui-primary));
min-width: 32px;
}
.tour-dot:hover:not(.active) {
background: var(--ui-muted);
}
.tour-progress-rail {
height: 3px;
background: var(--ui-border);
flex-shrink: 0;
overflow: hidden;
}
.tour-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--slide-color, var(--ui-primary)), var(--slide-color2, var(--ui-primary-2)));
transition: width 0.1s linear, background 0.6s ease;
}
.tour-stage {
flex: 1;
position: relative;
overflow: hidden;
display: flex;
padding: 0.6rem 0;
}
.tour-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem 2rem;
opacity: 0;
transform: translateX(50px) scale(0.98);
transition: opacity 0.4s cubic-bezier(.4,0,.2,1), transform 0.4s cubic-bezier(.4,0,.2,1);
pointer-events: none;
will-change: transform, opacity;
}
.tour-slide.active {
opacity: 1;
transform: none;
pointer-events: auto;
}
.tour-slide.exit {
opacity: 0;
transform: translateX(-50px) scale(0.98);
}
.tour-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 2.5rem;
max-width: 1040px;
width: 100%;
align-items: start;
}
.tour-info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tour-copy-card,
.tour-mockup {
border-radius: 22px;
border: 1px solid rgba(var(--ui-primary-rgb), 0.1);
background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(251,249,245,0.86));
box-shadow: 0 18px 36px rgba(17,35,58,0.06);
}
.tour-copy-card {
display: flex;
flex-direction: column;
gap: var(--card-gap); /* 16px */
padding: var(--card-pad-md); /* 16px */
}
.tour-copy-card.compact-aux {
gap: 0.75rem;
padding: 0.75rem;
}
.tour-icon-row {
display: flex;
align-items: center;
gap: var(--card-gap); /* 16px */
}
.tour-icon-wrap {
width: 60px;
height: 60px;
border-radius: 16px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.7rem;
background: var(--slide-icon-bg);
color: var(--slide-color);
box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.tour-kicker {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slide-color);
opacity: 0.9;
}
.tour-title {
font-size: clamp(1.4rem, 2.8vw, 1.9rem);
font-weight: 800;
line-height: 1.2;
color: var(--ui-text);
letter-spacing: -0.03em;
}
.tour-desc {
font-size: 0.9rem;
color: var(--ui-muted);
line-height: 1.7;
border-left: 3px solid var(--slide-color);
padding-left: 0.8rem;
opacity: 0.9;
}
.tour-copy-card.compact-aux .tour-desc {
font-size: 0.84rem;
line-height: 1.58;
padding-left: 0.7rem;
}
.tour-chip-row,
.tour-mini-pills,
.tour-shortcuts,
.tour-cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.tour-chip-row {
gap: 0.6rem;
}
.tour-mini-pills,
.tour-shortcuts {
gap: 0.45rem;
}
.tour-mini-pills.compact-aux,
.tour-shortcuts.compact-aux {
gap: 0.32rem;
}
.tour-cta-row {
gap: 0.65rem;
}
.tour-stat-chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
width: fit-content;
padding: 0.28rem 0.75rem;
border-radius: 999px;
background: var(--slide-icon-bg);
border: 1px solid rgba(var(--ui-primary-rgb), 0.18);
font-size: 0.75rem;
font-weight: 700;
color: var(--slide-color);
}
.tour-stat-chip .num {
font-size: 1rem;
font-weight: 800;
}
.tour-mini-pill,
.tour-shortcut kbd {
display: inline-flex;
align-items: center;
gap: 0.32rem;
padding: 0.3rem 0.62rem;
border-radius: 999px;
background: var(--ui-surface);
border: 1px solid var(--ui-border);
color: var(--ui-muted);
font-size: 0.72rem;
font-weight: 700;
}
.tour-mini-pills.compact-aux .tour-mini-pill,
.tour-shortcuts.compact-aux .tour-shortcut kbd {
padding: 0.24rem 0.52rem;
font-size: 0.68rem;
}
.tour-tip {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.55rem 0.8rem;
border-radius: 10px;
background: rgba(var(--ui-primary-rgb), 0.045);
border: 1px solid rgba(var(--ui-primary-rgb), 0.1);
font-size: 0.78rem;
color: var(--ui-muted);
line-height: 1.55;
}
.tour-copy-card.compact-aux .tour-tip {
padding: 0.48rem 0.68rem;
font-size: 0.74rem;
}
.tour-tip i {
color: var(--slide-color);
margin-top: 1px;
flex-shrink: 0;
}
.tour-steps {
display: flex;
align-items: center;
gap: 0;
flex-wrap: wrap;
}
.tour-step {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.72rem;
font-weight: 700;
color: var(--ui-muted);
}
.tour-step-num {
width: 20px;
height: 20px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--slide-icon-bg);
border: 1.5px solid var(--slide-color);
color: var(--slide-color);
font-size: 0.62rem;
font-weight: 800;
}
.tour-step-sep {
margin: 0 0.3rem;
font-size: 0.65rem;
color: var(--ui-border);
}
.tour-shortcut {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.71rem;
color: var(--ui-muted);
font-weight: 700;
}
.tour-shortcut kbd {
font: inherit;
font-size: 0.68rem;
font-weight: 800;
color: var(--ui-text);
padding: 0.14rem 0.38rem;
border-radius: 6px;
box-shadow: inset 0 -1px 0 rgba(17,35,58,0.06);
}
.tour-mockup {
overflow: hidden;
position: relative;
box-shadow: 0 20px 40px rgba(17,35,58,0.08);
}
.tour-mockup.compact-aux {
box-shadow: 0 14px 28px rgba(17,35,58,0.06);
}
.tour-mockup::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(var(--ui-primary-rgb), 0.04), transparent 42%, rgba(var(--ui-primary-rgb),0.03));
}
.mockup-titlebar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.8rem;
background: var(--ui-surface-2);
border-bottom: 1px solid var(--ui-border);
font-size: 0.72rem;
font-weight: 700;
color: var(--ui-muted);
}
.mockup-titlebar i {
color: var(--slide-color);
}
.mockup-dots {
display: flex;
gap: 4px;
margin-right: 4px;
}
.mockup-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.mockup-body {
padding: var(--card-pad-md); /* 16px */
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.tour-mockup.compact-aux .mockup-body {
padding: 0.75rem;
gap: 0.5rem;
}
.tour-mockup-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
padding: 0.75rem var(--card-pad-md); /* 12px 16px */
border-top: 1px solid rgba(var(--ui-primary-rgb), 0.08);
color: var(--ui-muted);
font-size: 0.72rem;
font-weight: 700;
position: relative;
z-index: 1;
}
.tour-mockup.compact-aux .tour-mockup-footer {
padding: 0.5rem 0.75rem;
font-size: 0.68rem;
}
.tour-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--ui-surface);
border: 1px solid var(--ui-border);
color: var(--ui-text);
cursor: pointer;
font-size: 1rem;
z-index: 10;
transition: all 0.2s;
box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.tour-arrow:hover {
background: var(--ui-surface-3);
transform: translateY(-50%) scale(1.1);
}
.tour-arrow.prev {
left: 0.5rem;
}
.tour-arrow.next {
right: 0.5rem;
}
.tour-bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.08;
pointer-events: none;
transition: background 1s ease;
}
.tour-bg-orb.orb1 {
width: 550px;
height: 550px;
top: -220px;
left: -180px;
animation: orbFloat 9s ease-in-out infinite;
}
.tour-bg-orb.orb2 {
width: 380px;
height: 380px;
bottom: -120px;
right: -100px;
animation: orbFloat 11s ease-in-out infinite reverse;
}
.tour-pause-badge {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
padding: 0.32rem 0.8rem;
border-radius: 999px;
background: rgba(0,0,0,.75);
color: #fff;
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.05em;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
z-index: 100;
}
.tour-pause-badge.visible {
opacity: 1;
}
.tour-info > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.tour-slide.active .tour-info > * {
opacity: 1;
transform: none;
}
.tour-slide.active .tour-info > *:nth-child(1) { transition-delay: .05s; }
.tour-slide.active .tour-info > *:nth-child(2) { transition-delay: .12s; }
.tour-slide.active .tour-info > *:nth-child(3) { transition-delay: .19s; }
.tour-slide.active .tour-info > *:nth-child(4) { transition-delay: .26s; }
.tour-slide.active .tour-info > *:nth-child(5) { transition-delay: .33s; }
.tour-slide.active .tour-info > *:nth-child(6) { transition-delay: .40s; }
.tour-slide.active .tour-info > *:nth-child(7) { transition-delay: .47s; }
@keyframes orbFloat {
0%,100% { transform: translate(0,0); }
50% { transform: translate(18px,-18px); }
}
html[data-theme="dark"] .tour-bg-orb {
opacity: 0.18;
}
html[data-theme="dark"] .tour-topbar {
background: linear-gradient(180deg, rgba(16, 23, 35, 0.9), rgba(16, 23, 35, 0.8));
border-bottom-color: rgba(122,162,204,0.16);
box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
html[data-theme="dark"] .tour-copy-card,
html[data-theme="dark"] .tour-mockup {
background: linear-gradient(180deg, rgba(20,31,49,0.92), rgba(15,24,40,0.88));
border-color: rgba(122,162,204,0.16);
}
html[data-theme="dark"] .tour-mini-pill,
html[data-theme="dark"] .tour-btn,
html[data-theme="dark"] .tour-tool-btn,
html[data-theme="dark"] .tour-cta-secondary,
html[data-theme="dark"] .tour-shortcut kbd {
background: rgba(255,255,255,0.04);
border-color: rgba(122,162,204,0.16);
}
html[data-theme="dark"] .tour-mockup-footer {
border-top-color: rgba(122,162,204,0.14);
}
@media (max-width: 980px) {
.tour-topbar {
flex-wrap: wrap;
justify-content: center;
}
.tour-topbar-actions {
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}
.tour-topbar-meta {
justify-content: flex-start;
}
.tour-dots {
order: 3;
width: 100%;
}
}
@media (max-width: 740px) {
.tour-topbar {
padding: 0.7rem 0.85rem;
gap: 0.7rem;
}
.tour-topbar-actions {
gap: 0.5rem;
justify-content: center;
}
.tour-topbar-meta,
.tour-tool-cluster {
width: 100%;
justify-content: center;
}
.tour-topbar-badge,
.tour-counter {
text-align: center;
}
.tour-btn,
.tour-cta-secondary {
flex: 1 1 calc(50% - 0.4rem);
justify-content: center;
}
.tour-btn.primary {
flex-basis: 100%;
}
.tour-tool-btn,
.tour-tool-btn.tone-enter {
width: 42px;
height: 42px;
}
.tour-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.tour-slide {
padding: var(--card-pad-md); /* 16px */
}
.tour-copy-card {
padding: var(--card-pad-md); /* 16px */
}
.tour-shortcuts {
gap: 0.35rem;
}
.tour-mockup {
display: block;
max-height: 260px;
}
.mockup-body {
max-height: 205px;
overflow: auto;
}
}
html[data-theme="dark"] .panel-tour-bridge {
background: linear-gradient(140deg, rgba(110,168,254,.12), rgba(20,31,49,.96) 60%);
border-color: rgba(110,168,254,.18);
box-shadow: none;
}
html[data-theme="dark"] .panel-tour-bridge-pill {
background: rgba(255,255,255,.05);
border-color: rgba(110,168,254,.16);
color: #e5edf9;
}
.m-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.6rem;
background: var(--ui-surface-2);
border-radius: 8px;
border: 1px solid var(--ui-border);
font-size: 0.74rem;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.tour-slide.active .m-row {
opacity: 1;
transform: none;
}
.m-row:nth-child(1) { transition-delay: .15s; }
.m-row:nth-child(2) { transition-delay: .25s; }
.m-row:nth-child(3) { transition-delay: .35s; }
.m-row:nth-child(4) { transition-delay: .45s; }
.m-label {
flex: 1;
font-weight: 600;
color: var(--ui-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m-val {
font-weight: 800;
font-size: 0.8rem;
color: var(--slide-color);
white-space: nowrap;
}
.m-badge {
padding: 0.1rem 0.45rem;
border-radius: 999px;
font-size: 0.65rem;
font-weight: 700;
white-space: nowrap;
}
.m-badge.ok { background: rgba(5,150,105,.14); color: #059669; }
.m-badge.warn { background: rgba(234,88,12,.14); color: #ea580c; }
.m-badge.danger { background: rgba(180,35,60,.14); color: #b4233c; }
.m-badge.neutral { background: var(--ui-surface-3); color: var(--ui-muted); }
.m-row-center { justify-content: center; gap: .6rem; }
.m-row-stack { flex-wrap: wrap; gap: .35rem; }
.m-row-spaced { margin-top: .2rem; }
.m-row-highlight {
background: var(--slide-icon-bg);
border-color: rgba(var(--ui-primary-rgb), 0.18);
}
.m-row-highlight .m-label {
font-weight: 700;
color: var(--slide-color);
}
.m-label-muted { opacity: .5; }
.m-label-faint {
opacity: .4;
font-size: .7rem;
}
.m-bar-wrap {
flex: 1;
height: 6px;
background: var(--ui-border);
border-radius: 3px;
overflow: hidden;
}
.m-bar {
height: 100%;
border-radius: 3px;
transition: width 0.8s ease;
}
.m-metric-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.45rem;
}
.m-metric {
padding: 0.55rem 0.65rem;
background: var(--ui-surface-2);
border: 1px solid var(--ui-border);
border-radius: 8px;
opacity: 0;
transform: scale(0.95);
transition: opacity 0.3s, transform 0.3s;
}
.tour-slide.active .m-metric,
.tour-slide.active .m-feat-item,
.tour-slide.active .m-bubble {
opacity: 1;
transform: none;
}
.m-metric:nth-child(1),
.m-feat-item:nth-child(1) { transition-delay: .1s; }
.m-metric:nth-child(2),
.m-feat-item:nth-child(2) { transition-delay: .2s; }
.m-metric:nth-child(3),
.m-feat-item:nth-child(3),
.m-bubble:nth-child(1) { transition-delay: .3s; }
.m-metric:nth-child(4),
.m-feat-item:nth-child(4),
.m-bubble:nth-child(2) { transition-delay: .4s; }
.m-feat-item:nth-child(5),
.m-bubble:nth-child(3) { transition-delay: .5s; }
.m-feat-item:nth-child(6) { transition-delay: .6s; }
.m-metric-num {
font-size: 1.4rem;
font-weight: 800;
}
.m-metric-lbl {
font-size: 0.64rem;
font-weight: 600;
color: var(--ui-muted);
}
.m-chat {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.m-bubble {
max-width: 88%;
padding: 0.4rem 0.65rem;
border-radius: 10px;
font-size: 0.72rem;
line-height: 1.5;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.35s, transform 0.35s;
}
.m-bubble.user {
background: var(--slide-icon-bg);
color: var(--ui-text);
align-self: flex-end;
}
.m-bubble.ai {
background: var(--ui-surface-2);
border: 1px solid var(--ui-border);
color: var(--ui-text);
}
.m-bubble.ai::before {
content: '🤖 ';
}
.m-terminal {
display: flex;
flex-direction: column;
gap: 0;
padding: 0.65rem 0.75rem;
border-radius: 8px;
background: #0d1117;
color: #7ee787;
font-family: 'Consolas', monospace;
font-size: 0.68rem;
line-height: 1.7;
}
.m-terminal .t-line {
opacity: 0;
transition: opacity 0.3s;
}
.tour-slide.active .m-terminal .t-line {
opacity: 1;
}
.m-terminal .t-line:nth-child(1) { transition-delay: .1s; }
.m-terminal .t-line:nth-child(2) { transition-delay: .3s; }
.m-terminal .t-line:nth-child(3) { transition-delay: .5s; }
.m-terminal .t-line:nth-child(4) { transition-delay: .7s; }
.m-terminal .t-line:nth-child(5) { transition-delay: .9s; }
.t-cmd { color: #58a6ff; }
.t-ok { color: #3fb950; }
.t-warn { color: #d29922; }
.m-feat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.45rem;
}
.m-feat-item {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.6rem;
background: var(--ui-surface-2);
border: 1px solid var(--ui-border);
border-radius: 8px;
font-size: 0.7rem;
font-weight: 600;
color: var(--ui-text);
opacity: 0;
transform: scale(0.95);
transition: opacity 0.3s, transform 0.3s;
}
.m-feat-item i {
color: var(--slide-color);
font-size: 1rem;
flex-shrink: 0;
}
.panel-token-pill,
.panel-token-pill-strong {
display: inline-flex;
align-items: center;
gap: 0.4rem;
width: fit-content;
padding: 0.38rem 0.72rem;
border-radius: 999px;
border: 1px solid rgba(var(--ui-primary-rgb), .18);
font-size: 0.76rem;
font-weight: 700;
}
.panel-token-pill-strong {
background: rgba(var(--ui-primary-rgb), .08);
color: var(--ui-text);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.panel-token-pill {
background: var(--ui-surface-2);
color: var(--ui-text);
}
.panel-token-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.panel-signal-ribbon,
.panel-bridge-card,
.panel-related-card,
.panel-insight-card {
border-radius: 16px;
border: 1px solid rgba(var(--ui-primary-rgb), .16);
background: linear-gradient(160deg, rgba(var(--ui-primary-rgb), .06), rgba(var(--ui-primary-rgb), .015));
box-shadow: 0 12px 28px rgba(17,35,58,0.06);
}
.panel-bridge-card,
.panel-insight-card,
.panel-guide-hero,
.panel-guide-summary,
.panel-guide-box {
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.panel-bridge-card:hover,
.panel-guide-hero:hover,
.panel-guide-summary:hover,
.panel-guide-box:hover {
transform: translateY(-1px);
border-color: rgba(var(--ui-primary-rgb), .22);
box-shadow: 0 14px 28px rgba(17,35,58,0.08);
}
.panel-insight-card:hover {
border-color: rgba(var(--ui-primary-rgb), .22);
box-shadow: 0 14px 28px rgba(17,35,58,0.08);
}
.panel-signal-ribbon {
padding: var(--card-pad-md); /* 16px */
overflow: hidden;
}
.panel-signal-header,
.panel-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.panel-signal-header {
margin-bottom: 0.7rem;
}
.panel-signal-meta,
.panel-bridge-meta,
.panel-related-meta,
.panel-card-copy .meta,
.panel-insight-meta {
font-size: 0.82rem;
color: var(--ui-muted);
}
.panel-signal-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.panel-signal-track {
display: flex;
align-items: center;
gap: 0.7rem;
width: max-content;
animation: panelSignalMove 30s linear infinite;
}
.panel-signal-marquee:hover .panel-signal-track {
animation-play-state: paused;
}
.panel-signal-item {
display: inline-flex;
align-items: center;
gap: 0.42rem;
padding: 0.48rem 0.74rem;
border-radius: 999px;
border: 1px solid rgba(var(--ui-primary-rgb), .14);
background: var(--ui-surface);
color: var(--ui-text);
text-decoration: none;
white-space: nowrap;
font-size: 0.8rem;
font-weight: 700;
}
.panel-signal-item:hover {
border-color: rgba(var(--ui-primary-rgb), .28);
color: var(--ui-text);
}
.panel-bridge-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--card-gap); /* 16px */
}
.panel-bridge-card,
.panel-related-card {
padding: var(--card-pad-md); /* 16px */
}
.panel-bridge-icon,
.panel-insight-icon {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(var(--ui-primary-rgb), .12);
color: var(--ui-primary);
font-size: 1rem;
flex-shrink: 0;
}
.panel-bridge-title,
.panel-related-title {
font-size: 0.96rem;
font-weight: 800;
color: var(--ui-text);
margin: 0.65rem 0 0.25rem;
}
.panel-bridge-link,
.panel-related-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.85rem;
color: var(--ui-primary);
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
}
.panel-insight-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.panel-insight-card {
position: relative;
overflow: hidden;
padding: var(--card-pad-md); /* 16px */
background: linear-gradient(160deg, rgba(var(--ui-primary-rgb), .08), rgba(var(--ui-primary-rgb), .02));
}
.panel-insight-card::after {
content: '';
position: absolute;
inset: auto -24px -28px auto;
width: 90px;
height: 90px;
border-radius: 50%;
background: rgba(var(--ui-primary-rgb), .08);
}
.panel-insight-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
}
.panel-insight-label {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ui-muted);
}
.panel-insight-value {
font-size: 1.15rem;
font-weight: 800;
line-height: 1.1;
color: var(--ui-text);
margin-top: 0.2rem;
}
.panel-insight-meta {
position: relative;
z-index: 1;
margin-top: 0.42rem;
}
.panel-card-copy {
display: grid;
gap: 0.16rem;
}
.panel-card-copy .title {
font-size: 0.98rem;
font-weight: 700;
color: var(--ui-text);
}
body.news-page {
background: var(--ui-bg);
}
body.support-page,
body.services-page {
background: var(--ui-bg);
}
.news-page-shell {
display: grid;
gap: 1rem;
}
.news-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(320px, .9fr);
gap: 1rem;
align-items: stretch;
}
.news-hero-copy {
display: grid;
gap: .85rem;
}
.news-page-shell .panel-card-head {
align-items: flex-start;
padding: 1rem 1rem .85rem;
border-bottom: 1px solid var(--ui-border);
background: linear-gradient(135deg, rgba(var(--ui-primary-rgb), .08), rgba(var(--ui-primary-rgb), .02));
}
.news-layout {
display: grid;
grid-template-columns: minmax(260px, .84fr) minmax(0, 1.4fr) minmax(220px, .76fr);
gap: 1rem;
align-items: start;
}
.news-list-card,
.news-reader-card {
overflow: hidden;
}
.news-list .list-group-item {
border-left: 0;
border-right: 0;
padding: .85rem 1rem;
background: var(--ui-surface);
}
.news-list .list-group-item:first-child {
border-top: 0;
}
.news-list .list-group-item.active {
background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2));
border-color: var(--ui-primary);
}
.news-list-item {
display: grid;
gap: .18rem;
}
.news-list-item-title {
font-weight: 700;
color: inherit;
line-height: 1.4;
}
.news-list-item-meta {
font-size: .78rem;
color: var(--ui-muted);
}
.news-list .list-group-item.active .news-list-item-meta {
color: rgba(255, 255, 255, .82);
}
.news-reader-body {
padding: 1rem 1rem 1.15rem;
display: grid;
gap: .95rem;
}
.news-reader-title {
font-size: clamp(1.3rem, 2.2vw, 1.8rem);
font-weight: 800;
line-height: 1.2;
color: var(--ui-text);
}
.news-reader-meta {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.news-content {
white-space: pre-wrap;
line-height: 1.85;
font-size: .98rem;
color: var(--ui-text);
border: 1px solid rgba(var(--ui-primary-rgb), .1);
border-radius: 16px;
background: rgba(var(--ui-primary-rgb), .03);
padding: 1rem 1.05rem;
}
.news-empty {
border: 1px dashed rgba(var(--ui-primary-rgb), .22);
border-radius: 16px;
background: rgba(var(--ui-primary-rgb), .04);
padding: var(--card-pad) var(--card-pad-md); /* 24px 16px */
color: var(--ui-muted);
}
.news-empty-title {
font-weight: 700;
color: var(--ui-text);
margin-bottom: .25rem;
}
.news-related-item {
padding: .7rem .78rem;
border-radius: 14px;
border: 1px solid rgba(var(--ui-primary-rgb), .12);
background: var(--ui-surface);
}
.news-related-item-title {
font-weight: 700;
color: var(--ui-text);
line-height: 1.45;
}
.support-hero {
margin-bottom: 1.1rem;
}
.support-stat-card,
.support-quick-card,
.support-triage-step,
.support-solution-card,
.corp-list-section {
border-radius: var(--ui-radius-lg, 16px);
background: var(--cf, #fff);
box-shadow: var(--ui-shadow-soft, 0 8px 24px rgba(20,39,80,.06));
}
.support-stat-card,
.support-quick-card,
.corp-list-section {
border: 1px solid rgba(var(--ui-primary-rgb), .10);
padding: .95rem 1rem;
}
.support-triage-step,
.support-solution-card {
border: 1px solid rgba(var(--ui-primary-rgb), .12);
padding: .95rem 1rem;
}
.support-stat-label {
display: inline-flex;
align-items: center;
padding: .2rem .6rem;
border-radius: 999px;
border: 1px solid rgba(var(--ui-primary-rgb), .18);
background: rgba(var(--ui-primary-rgb), .08);
color: var(--ui-primary);
font-size: .76rem;
font-weight: 700;
}
.support-stat-value {
font-size: 1.7rem;
font-weight: 800;
letter-spacing: -.03em;
color: var(--ui-text);
line-height: 1;
margin-top: .65rem;
}
.support-stat-meta,
.support-guides-meta,
.support-solution-meta,
.support-triage-meta {
color: var(--ui-muted, #64748b);
}
.support-quick-grid,
.support-triage-grid,
.support-solution-grid {
display: grid;
gap: .85rem;
}
.support-quick-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.support-triage-grid,
.support-solution-grid {
margin-bottom: .9rem;
}
.support-triage-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.support-solution-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.support-triage-step.is-active,
.support-solution-card.is-active,
.support-quick-card.is-active,
.corp-list-section.is-active {
border-color: rgba(var(--ui-primary-rgb), .26);
box-shadow: 0 14px 32px rgba(20,39,80,.10);
background: linear-gradient(155deg, rgba(var(--ui-primary-rgb), .09), rgba(var(--ui-primary-rgb), .02));
}
.support-step-index,
.support-solution-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
background: rgba(var(--ui-primary-rgb), .1);
color: var(--ui-primary);
font-weight: 800;
}
.support-triage-title,
.support-solution-title {
font-size: 1rem;
font-weight: 800;
color: var(--ui-text);
margin: .7rem 0 .35rem;
}
.support-solution-meta,
.support-triage-meta {
font-size: .88rem;
line-height: 1.65;
}
.support-solution-link {
display: inline-flex;
align-items: center;
gap: .42rem;
margin-top: .9rem;
color: var(--ui-primary);
font-size: .84rem;
font-weight: 700;
text-decoration: none;
}
.support-guides-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: .8rem;
flex-wrap: wrap;
}
.support-guides-head-copy {
display: grid;
gap: .2rem;
}
.support-guides-meta {
font-size: .88rem;
}
.guide-accordion .accordion-item {
border: 1px solid rgba(15,23,42,.08);
border-radius: .9rem;
overflow: hidden;
background: transparent;
}
.guide-accordion .accordion-button {
font-weight: 700;
padding: 1rem 1.1rem;
}
.guide-accordion .accordion-button:not(.collapsed) {
background: rgba(var(--ui-primary-rgb), .08);
}
.service-list-table thead th {
background: rgba(var(--ui-primary-rgb), .08);
color: var(--ui-text);
font-weight: 600;
border-color: rgba(var(--ui-primary-rgb), .15);
}
.service-list-table tbody tr:hover {
background: rgba(var(--ui-primary-rgb), .03) !important;
}
.tbl-compact {
font-size: .78rem;
}
.tbl-compact th,
.tbl-compact td {
padding: .45rem .5rem;
}
body.services-page .filter-shell .form-label.fw-600 {
font-size: .81rem;
letter-spacing: .01em;
}
body.services-page .filter-shell .form-select,
body.services-page .filter-shell .form-control {
font-size: .82rem;
}
body.services-page .filter-shell select[name="customer_id"],
body.services-page .filter-shell select[name="customer_id"] option {
font-size: .8rem;
}
body.services-page .filter-shell form .btn:not(.btn-sm) {
font-size: .78rem;
padding: .48rem .72rem;
line-height: 1.2;
}
@media (max-width: 1199.98px) {
.news-hero-grid,
.news-layout,
.panel-bridge-grid {
grid-template-columns: 1fr;
}
}
.panel-guide-showcase {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
gap: var(--card-gap); /* 16px */
margin-top: var(--card-gap); /* 16px */
}
.panel-guide-hero,
.panel-guide-summary,
.panel-guide-box {
border-radius: var(--ui-radius-lg, 16px);
border: 1px solid rgba(var(--ui-primary-rgb), 0.12);
padding: var(--card-pad-md); /* 16px */
}
.panel-guide-hero,
.panel-guide-summary {
background: linear-gradient(160deg, rgba(var(--ui-primary-rgb), 0.08), rgba(var(--ui-primary-rgb), 0.02) 58%, rgba(255,255,255,.94));
}
.panel-guide-hero {
position: relative;
overflow: hidden;
}
.panel-guide-hero::after {
content: '';
position: absolute;
top: -62px;
right: -62px;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--ui-primary-rgb), .16), rgba(var(--ui-primary-rgb), 0));
}
.panel-guide-hero > *,
.panel-guide-summary > * {
position: relative;
z-index: 1;
}
.panel-guide-lead,
.panel-guide-list li,
.panel-guide-meta,
.panel-guide-summary-meta,
.panel-guide-example-label {
color: var(--ui-muted);
}
.panel-guide-lead {
margin-bottom: 0;
font-size: 0.9rem;
line-height: 1.65;
}
.panel-guide-pill-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.panel-guide-chip,
.panel-guide-pill,
.panel-guide-summary-item {
display: inline-flex;
align-items: center;
gap: 0.42rem;
padding: 0.46rem 0.72rem;
border-radius: 999px;
border: 1px solid rgba(var(--ui-primary-rgb), 0.16);
background: rgba(var(--ui-primary-rgb), 0.07);
color: var(--ui-text);
font-size: 0.78rem;
font-weight: 700;
}
.panel-guide-chip {
padding: 0.2rem 0.6rem;
background: rgba(var(--ui-primary-rgb), 0.08);
color: var(--ui-primary);
font-size: 0.76rem;
}
.panel-guide-summary-stack,
.panel-guide-example-list {
display: grid;
gap: 0.55rem;
}
.panel-guide-summary-item {
justify-content: space-between;
border-radius: 14px;
font-size: 0.82rem;
}
.panel-guide-summary-meta {
font-size: 0.8rem;
}
.panel-guide-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 1rem;
margin-bottom: 1rem;
}
.panel-guide-box {
background: linear-gradient(180deg, rgba(var(--ui-primary-rgb), 0.04), rgba(255,255,255,.98));
}
.panel-guide-box.soft-accent {
background: linear-gradient(180deg, rgba(var(--ui-primary-rgb), 0.07), rgba(var(--ui-primary-rgb), 0.015));
}
.panel-guide-box-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.7rem;
flex-wrap: wrap;
margin-bottom: 0.85rem;
}
.panel-guide-box-title {
font-size: 0.96rem;
font-weight: 800;
color: var(--ui-text);
}
.panel-guide-meta {
font-size: 0.8rem;
}
.panel-guide-list {
padding-left: 1rem;
margin-bottom: 0;
}
.panel-guide-list li {
margin-bottom: 0.55rem;
}
.panel-guide-example-item {
padding: 0.7rem 0.8rem;
border-radius: 14px;
border: 1px solid rgba(var(--ui-primary-rgb), 0.1);
background: rgba(var(--ui-primary-rgb), 0.04);
}
.panel-guide-example-label {
margin-bottom: 0.3rem;
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.panel-guide-example-value {
font-size: 0.84rem;
color: var(--ui-text);
line-height: 1.55;
word-break: break-word;
}
html[data-theme="dark"] .panel-guide-hero,
html[data-theme="dark"] .panel-guide-summary,
html[data-theme="dark"] .panel-guide-box {
background: linear-gradient(160deg, rgba(110,168,254,.10), rgba(20,31,49,.96) 68%);
border-color: rgba(110,168,254,.16);
}
html[data-theme="dark"] .panel-bridge-card:hover,
html[data-theme="dark"] .panel-guide-hero:hover,
html[data-theme="dark"] .panel-guide-summary:hover,
html[data-theme="dark"] .panel-guide-box:hover,
html[data-theme="dark"] .panel-insight-card:hover {
box-shadow: none;
border-color: rgba(110,168,254,.24);
}
html[data-theme="dark"] .panel-guide-chip,
html[data-theme="dark"] .panel-guide-pill,
html[data-theme="dark"] .panel-guide-summary-item,
html[data-theme="dark"] .panel-guide-example-item {
background: rgba(110,168,254,.10);
border-color: rgba(110,168,254,.18);
color: #e5edf9;
}
html[data-theme="dark"] .support-stat-card,
html[data-theme="dark"] .support-quick-card,
html[data-theme="dark"] .corp-list-section,
html[data-theme="dark"] .support-triage-step,
html[data-theme="dark"] .support-solution-card {
border-color: rgba(110,168,254,.16);
box-shadow: none;
background: var(--ui-surface, #141f31);
}
html[data-theme="dark"] .support-stat-label {
background: #203047;
color: #dce8ff;
border-color: #365277;
}
html[data-theme="dark"] .panel-signal-item {
background: rgba(110,168,254,.10);
border-color: rgba(110,168,254,.18);
color: #e5edf9;
}
html[data-theme="dark"] .support-step-index,
html[data-theme="dark"] .support-solution-icon {
background: rgba(110,168,254,.14);
color: #dce8ff;
}
html[data-theme="dark"] .guide-accordion .accordion-item {
border-color: #334155;
background: #1b2330;
}
html[data-theme="dark"] .guide-accordion .accordion-button {
background: #1b2330;
color: #e5edf9;
}
html[data-theme="dark"] .guide-accordion .accordion-button:not(.collapsed) {
background: #203047;
color: #dce8ff;
}
html[data-theme="dark"] .guide-accordion .accordion-button::after {
filter: invert(1);
}
html[data-theme="dark"] .guide-accordion .accordion-body {
background: #162131;
}
html[data-theme="dark"] .service-list-table thead th {
background: rgba(110,168,254,.10);
border-color: rgba(110,168,254,.18);
}
html[data-theme="dark"] .service-list-table tbody tr:hover {
background: rgba(110,168,254,.08) !important;
}
@media (max-width: 767px) {
.support-action-group .btn {
width: 100%;
}
.support-triage-grid,
.support-solution-grid {
grid-template-columns: 1fr;
}
.panel-guide-showcase,
.panel-guide-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
body.services-page .filter-shell form .btn:not(.btn-sm) {
font-size: .72rem;
padding: .42rem .62rem;
}
body.services-page .filter-shell .form-select,
body.services-page .filter-shell .form-control {
font-size: .76rem;
min-height: 2.1rem;
padding: .38rem .62rem;
}
}
@keyframes panelSignalMove {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 1199.98px) {
.panel-insight-grid {
grid-template-columns: 1fr;
}
}
.visual-tier-primary,
.visual-tier-secondary,
.visual-tier-tertiary {
position: relative;
}
.visual-tier-primary {
border-color: rgba(var(--ui-primary-rgb), .22) !important;
box-shadow: 0 16px 32px rgba(17,35,58,.09) !important;
}
.visual-tier-secondary {
border-color: rgba(var(--ui-primary-rgb), .14) !important;
box-shadow: 0 10px 24px rgba(17,35,58,.05) !important;
}
.visual-tier-tertiary {
border-color: rgba(var(--ui-primary-rgb), .10) !important;
box-shadow: 0 6px 16px rgba(17,35,58,.03) !important;
}
.visual-tier-primary .section-card-title,
.visual-tier-primary .panel-card-copy .title,
.visual-tier-primary .panel-bridge-title,
.visual-tier-primary .panel-related-title {
font-size: 1.03rem;
}
.visual-tier-primary .section-card-head {
border-bottom-color: rgba(var(--ui-primary-rgb), 0.14);
}
.visual-tier-tertiary .section-card-head {
border-bottom-color: rgba(var(--ui-primary-rgb), 0.05);
}
.visual-tier-tertiary .section-card-kicker,
.visual-tier-tertiary .panel-insight-label,
.visual-tier-tertiary .panel-tour-bridge-kicker {
color: var(--ui-muted);
}
.visual-tier-tertiary .section-card-meta,
.visual-tier-tertiary .panel-bridge-meta,
.visual-tier-tertiary .panel-related-meta,
.visual-tier-tertiary .panel-signal-meta,
.visual-tier-tertiary .panel-card-copy .meta,
.visual-tier-tertiary .panel-insight-meta {
color: color-mix(in srgb, var(--ui-muted) 88%, var(--ui-text) 12%);
}
.panel-tour-bridge.visual-tier-tertiary {
background: linear-gradient(140deg, rgba(var(--ui-primary-rgb), .04), rgba(var(--ui-primary-rgb), .015) 58%, rgba(255,255,255,.94));
}
.visual-tier-tertiary .panel-tour-bridge-pill {
background: rgba(var(--ui-primary-rgb), .04);
color: color-mix(in srgb, var(--ui-text) 78%, var(--ui-primary) 22%);
}
.panel-signal-ribbon.visual-tier-tertiary,
.panel-bridge-card.visual-tier-tertiary,
.panel-related-card.visual-tier-tertiary,
.panel-insight-card.visual-tier-tertiary {
background: linear-gradient(160deg, rgba(var(--ui-primary-rgb), .035), rgba(var(--ui-primary-rgb), .01));
}
.panel-insight-card.visual-tier-secondary {
background: linear-gradient(160deg, rgba(var(--ui-primary-rgb), .06), rgba(var(--ui-primary-rgb), .015));
}
.news-reader-card.visual-tier-primary .news-reader-body {
padding: 1.15rem 1.15rem 1.3rem;
}
.news-list-card.visual-tier-secondary .list-group-item.active {
box-shadow: inset 4px 0 0 rgba(255,255,255,.32);
}
.panel-related-card.visual-tier-tertiary {
background: linear-gradient(160deg, rgba(var(--ui-primary-rgb), .03), rgba(var(--ui-primary-rgb), .01));
}
.support-triage-step.visual-tier-primary,
.support-solution-card.visual-tier-primary {
background: linear-gradient(160deg, rgba(var(--ui-primary-rgb), .08), rgba(var(--ui-primary-rgb), .02));
}
.support-quick-card.visual-tier-tertiary,
.corp-list-section.visual-tier-tertiary,
.support-stat-card.visual-tier-tertiary {
background: linear-gradient(160deg, rgba(var(--ui-primary-rgb), .03), rgba(var(--ui-primary-rgb), .008));
}
.support-solution-card.visual-tier-primary .support-solution-link {
margin-top: 1rem;
}
.support-hero.visual-tier-secondary .page-summary {
max-width: 58ch;
}
.support-hero.visual-tier-secondary .page-actions .btn {
opacity: .92;
}
.sidebar-group-title.sidebar-group-title-primary {
color: color-mix(in srgb, var(--ui-primary) 68%, var(--ui-text) 32%);
}
.sidebar-group-title.sidebar-group-title-secondary {
opacity: 0.82;
}
/* ── Collapsible secondary nav group ─────────────────────────── */
.sidebar-secondary-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: none;
border: none;
padding: 0.28rem 0.15rem 0.28rem 0.15rem;
margin: 0.55rem 0 0.15rem;
cursor: pointer;
color: var(--ui-muted);
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
transition: color 0.16s ease;
}
.sidebar-secondary-toggle:hover { color: var(--ui-primary); }
.sidebar-secondary-toggle-label {
display: flex;
align-items: center;
gap: 0.4rem;
}
.sidebar-secondary-toggle-label .bi { font-size: 0.75rem; opacity: 0.8; }
.sidebar-secondary-chevron {
font-size: 0.7rem;
transition: transform 0.22s ease;
opacity: 0.7;
flex-shrink: 0;
}
.sidebar-secondary-toggle.is-open .sidebar-secondary-chevron { transform: rotate(-180deg); }
.sidebar-secondary-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.26s ease;
}
.sidebar-secondary-body.is-open { grid-template-rows: 1fr; }
.sidebar-secondary-inner { overflow: hidden; min-height: 0; }
html[data-theme="dark"] .sidebar-secondary-toggle { color: rgba(148,176,210,.75); }
html[data-theme="dark"] .sidebar-secondary-toggle:hover { color: #9ec5fe; }
html[data-theme="dark"] .sidebar-secondary-chevron { opacity: 0.6; }
/* "Destek" toggle — sidebar-group-title ile eşleştirilmiş */
.sidebar-more-toggle {
margin: 0.7rem 0.15rem 0.3rem;
padding: 0;
background: none;
border: none;
border-radius: 0;
color: var(--ui-muted, #6b7280);
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
transition: color 0.16s;
}
.sidebar-more-toggle:hover { color: var(--ui-primary); }
html[data-theme="dark"] .sidebar-more-toggle { color: rgba(148,176,210,.75); }
html[data-theme="dark"] .sidebar-more-toggle:hover { color: #9ec5fe; }
.sidebar-support-label {
flex: 1;
text-align: left;
}
/* Buton olarak kullanılan sidebar linkleri için sıfırlama */
.sidebar-btn-plain {
background: none;
border: none;
padding: 0;
width: 100%;
text-align: left;
cursor: pointer;
}
/* Collapsed state */
html[data-sidebar-state="collapsed"] .sidebar-secondary-toggle-label > span:last-child,
html[data-sidebar-state="collapsed"] .sidebar-secondary-chevron { display: none; }
html[data-sidebar-state="collapsed"] .sidebar-secondary-body { grid-template-rows: 1fr; }
html[data-sidebar-state="collapsed"] .sidebar-support-title { display: none; }
.sidebar-link.sidebar-link-aux {
color: color-mix(in srgb, #1f2f45 82%, var(--ui-muted) 18%);
background: rgba(var(--ui-primary-rgb), 0.025);
}
.sidebar-link.sidebar-link-aux:hover {
background: color-mix(in srgb, var(--ui-primary, #4f7cff) 6%, transparent);
box-shadow: inset 1px 0 0 color-mix(in srgb, var(--ui-primary, #4f7cff) 35%, transparent);
}
.sidebar-link.sidebar-link-utility {
font-size: 0.8rem;
color: color-mix(in srgb, #1f2f45 76%, var(--ui-muted) 24%);
}
html[data-theme="dark"] .panel-tour-bridge.visual-tier-tertiary {
background: linear-gradient(140deg, rgba(110,168,254,.07), rgba(110,168,254,.02) 58%, rgba(11,18,32,.88));
}
html[data-theme="dark"] .visual-tier-primary {
box-shadow: var(--shadow-t1) !important;
}
html[data-theme="dark"] .visual-tier-secondary {
box-shadow: var(--shadow-t2) !important;
}
html[data-theme="dark"] .visual-tier-tertiary {
box-shadow: var(--shadow-t0) !important;
}
html[data-theme="dark"] .sidebar-group-title.sidebar-group-title-primary {
color: #9ec5fe;
}
html[data-theme="dark"] .sidebar-link.sidebar-link-aux {
color: rgba(232,240,255,.86);
background: rgba(86,156,255,.05);
}
html[data-theme="dark"] .sidebar-link.sidebar-link-utility {
color: rgba(232,240,255,.76);
}
/* Menüyü Gizle butonu — button reset, görsel stil sidebar-link-utility'den gelir */
.sidebar-collapse-btn {
background: none;
border: none;
width: 100%;
cursor: pointer;
text-align: left;
padding: 0;
}
.compact-aux {
--compact-gap: 0.55rem;
}
.dashboard-quickbar.compact-aux {
gap: 0.45rem;
}
.dashboard-quickbar.compact-aux .dashboard-quicklink {
padding: 0.42rem 0.62rem;
font-size: 0.77rem;
border-radius: 0.78rem;
}
.panel-tour-bridge.compact-aux {
padding: 0.78rem 0.88rem;
gap: 0.8rem;
}
.panel-tour-bridge.compact-aux .panel-tour-bridge-title {
font-size: 0.94rem;
}
.panel-tour-bridge.compact-aux .panel-tour-bridge-meta {
font-size: 0.78rem;
line-height: 1.45;
}
.panel-tour-bridge.compact-aux .panel-tour-bridge-pill {
padding: 0.38rem 0.62rem;
font-size: 0.74rem;
}
.support-quick-card.compact-aux,
.corp-list-section.compact-aux,
.panel-signal-ribbon.compact-aux,
.panel-bridge-card.compact-aux,
.panel-related-card.compact-aux {
padding: var(--card-pad-sm) var(--card-pad-md); /* 12px 16px */
}
.support-quick-card.compact-aux .section-card-head,
.corp-list-section.compact-aux .section-card-head {
padding-bottom: 0.48rem;
margin-bottom: 0.62rem;
}
.support-quick-card.compact-aux .section-card-meta,
.corp-list-section.compact-aux .section-card-meta,
.panel-signal-ribbon.compact-aux .panel-signal-meta,
.panel-bridge-card.compact-aux .panel-bridge-meta,
.panel-related-card.compact-aux .panel-bridge-meta,
.panel-related-card.compact-aux .panel-related-meta {
font-size: 0.76rem;
line-height: 1.45;
}
.support-quick-card.compact-aux .section-card-title,
.corp-list-section.compact-aux .section-card-title,
.panel-bridge-card.compact-aux .panel-bridge-title,
.panel-related-card.compact-aux .panel-related-title {
font-size: 0.93rem;
}
.panel-bridge-grid.compact-aux {
gap: 0.65rem;
}
.panel-signal-ribbon.compact-aux .panel-signal-item {
padding: 0.4rem 0.62rem;
font-size: 0.76rem;
}
.panel-focus-card.compact-aux,
.panel-summary-pill.compact-aux,
.corp-filter-card.compact-aux,
.customer-stat-card.compact-aux,
.employee-stat-card.compact-aux,
.hardware-stat-card.compact-aux,
.license-stat-card.compact-aux,
.payment-stat-card.compact-aux,
.payment-action-card.compact-aux,
.payment-vendor-card.compact-aux,
.payment-alert-ribbon.compact-aux {
border-radius: 16px;
}
.panel-focus-card.compact-aux,
.payment-action-card.compact-aux,
.payment-vendor-card.compact-aux,
.payment-alert-ribbon.compact-aux {
padding: var(--card-pad-sm) var(--card-pad-md); /* 12px 16px */
}
.panel-summary-pill.compact-aux,
.customer-stat-card.compact-aux,
.employee-stat-card.compact-aux,
.hardware-stat-card.compact-aux,
.license-stat-card.compact-aux,
.payment-stat-card.compact-aux {
padding: var(--card-pad-sm) var(--card-pad-md); /* 12px 16px */
}
.corp-filter-card.compact-aux .filter-summary,
.panel-focus-card.compact-aux .panel-focus-meta,
.payment-action-card.compact-aux .payment-action-meta,
.payment-vendor-card.compact-aux .payment-vendor-meta,
.payment-alert-ribbon.compact-aux .payment-alert-meta,
.payment-stat-card.compact-aux .payment-stat-meta,
.customer-stat-card.compact-aux .customer-stat-meta,
.employee-stat-card.compact-aux .employee-stat-meta,
.hardware-stat-card.compact-aux .hardware-stat-meta,
.license-stat-card.compact-aux .license-stat-meta,
.panel-summary-pill.compact-aux .panel-summary-label {
font-size: 0.76rem;
line-height: 1.45;
}
.panel-focus-card.compact-aux .panel-focus-title,
.payment-action-card.compact-aux .payment-action-title,
.payment-vendor-card.compact-aux .section-card-title {
font-size: 0.95rem;
}
.panel-summary-pill.compact-aux .panel-summary-value,
.customer-stat-card.compact-aux .customer-stat-value,
.employee-stat-card.compact-aux .employee-stat-value,
.hardware-stat-card.compact-aux .hardware-stat-value,
.license-stat-card.compact-aux .license-stat-value,
.payment-stat-card.compact-aux .payment-stat-value {
font-size: 1.5rem;
}
.corp-filter-card.compact-aux .emp-filter-toggle {
padding: 0.75rem var(--card-pad-md); /* 12px 16px */
}
.corp-filter-card.compact-aux .emp-filter-body {
padding: 0.75rem var(--card-pad-md); /* 12px 16px */
}
.payment-action-card.compact-aux .payment-action-link,
.payment-vendor-card.compact-aux .payment-vendor-item {
margin-top: 0.68rem;
}
.payment-vendor-card.compact-aux .payment-vendor-item,
.payment-alert-ribbon.compact-aux {
padding: 0.72rem 0.8rem;
}
.portal-summary-card.compact-aux,
.portal-next-card.compact-aux,
.mail-card.compact-aux,
.ai-support-card.compact-aux,
#customerWifiPanel.compact-aux,
.dashboard-chart-row .compact-aux {
padding: var(--card-pad-sm) var(--card-pad-md) !important; /* 12px 16px */
}
.portal-summary-card.compact-aux .small,
.portal-next-card.compact-aux .portal-compact-note,
#customerWifiPanel.compact-aux .small,
.mail-card.compact-aux .section-card-meta,
.mail-card.compact-aux .small,
.ai-support-card.compact-aux .text-muted,
.dashboard-chart-row .compact-aux .section-card-meta {
font-size: 0.76rem;
line-height: 1.45;
}
.portal-summary-card.compact-aux .portal-stat-chip,
.ai-support-card.compact-aux .ai-support-chip {
padding: 0.36rem 0.64rem;
font-size: 0.77rem;
}
.portal-next-card.compact-aux .portal-next-item,
#customerWifiPanel.compact-aux .portal-mini-tile,
.mail-card.compact-aux .mail-kpi,
.mail-card.compact-aux .mail-row {
border-radius: 12px;
}
.portal-next-card.compact-aux .portal-next-item,
.mail-card.compact-aux .mail-row {
padding: 0.62rem 0.72rem;
}
.mail-card.compact-aux .mail-kpi {
padding: 0.58rem 0.7rem;
min-height: 68px;
}
.mail-card.compact-aux .mail-kpi-label {
font-size: 0.68rem;
}
.mail-card.compact-aux .mail-kpi-value {
font-size: 1.12rem;
}
.dashboard-chart-row .compact-aux .section-card-title,
.mail-card.compact-aux .section-card-title,
.ai-support-card.compact-aux h5 {
font-size: 0.96rem;
}
.dashboard-chart-row .compact-aux .chart-wrap {
min-height: 168px;
aspect-ratio: 16 / 7;
}
/* Tüm chart satırı kartları eşit yükseklikte */
.dashboard-chart-row > [class*="col"] > .glass-card {
min-height: 340px;
}
@media (max-width: 991px) {
.dashboard-chart-row > [class*="col"] > .glass-card {
min-height: 280px;
}
}
.ai-support-card.compact-aux textarea.form-control {
min-height: 72px;
}
.ai-support-card.compact-aux .btn,
.mail-card.compact-aux .btn,
.portal-summary-card.compact-aux .btn,
.portal-next-card.compact-aux .btn {
border-radius: 0.82rem;
}
.news-reader-card.visual-tier-primary .news-content {
line-height: 1.78;
}
.news-list-card.visual-tier-secondary .news-list-item-meta,
.panel-related-card.compact-aux .panel-related-meta {
font-size: 0.74rem;
}
@media (max-width: 767.98px) {
.panel-hero.compact-aux,
.panel-hero.visual-tier-secondary,
.panel-hero.visual-tier-tertiary {
padding: .88rem .92rem;
border-radius: 18px;
}
.panel-hero .page-actions {
width: 100%;
}
.panel-hero .page-actions .btn,
.dashboard-quickbar.compact-aux .dashboard-quicklink,
.panel-tour-bridge.compact-aux .panel-tour-bridge-pill {
min-height: 38px;
}
.hero-mini-stats,
.dash-chips-bar,
.panel-summary-grid,
.panel-focus-grid,
.panel-bridge-grid,
.backup-stat-grid,
.catalog-stat-grid,
.search-stat-grid,
.nt-stat-grid,
.logs-stat-grid {
grid-template-columns: 1fr !important;
}
.dashboard-quickbar.compact-aux,
.panel-tour-bridge.compact-aux,
.support-quick-card.compact-aux,
.corp-list-section.compact-aux,
.panel-signal-ribbon.compact-aux,
.panel-bridge-card.compact-aux,
.panel-related-card.compact-aux,
.panel-focus-card.compact-aux,
.panel-summary-pill.compact-aux,
.corp-filter-card.compact-aux,
.customer-stat-card.compact-aux,
.employee-stat-card.compact-aux,
.hardware-stat-card.compact-aux,
.license-stat-card.compact-aux,
.payment-stat-card.compact-aux,
.payment-action-card.compact-aux,
.payment-vendor-card.compact-aux,
.payment-alert-ribbon.compact-aux,
.portal-summary-card.compact-aux,
.portal-next-card.compact-aux,
.mail-card.compact-aux,
.ai-support-card.compact-aux,
#customerWifiPanel.compact-aux,
.dashboard-chart-row .compact-aux,
.search-result-card.compact-aux,
.catalog-card.compact-aux,
.backup-panel.compact-aux,
.backup-history-item,
.nt-card.compact-aux,
.logs-table-card.compact-aux {
border-radius: 16px;
}
.panel-summary-pill.compact-aux,
.customer-stat-card.compact-aux,
.employee-stat-card.compact-aux,
.hardware-stat-card.compact-aux,
.license-stat-card.compact-aux,
.payment-stat-card.compact-aux,
.search-stat-card.compact-aux,
.catalog-stat-card.compact-aux,
.nt-stat-card.compact-aux,
.logs-stat-card.compact-aux,
.backup-stat-card.compact-aux {
padding: .78rem .82rem;
}
.corp-filter-card.compact-aux .card-body,
.search-result-card.compact-aux .card-header,
.catalog-section.compact-aux,
.backup-panel.compact-aux,
.nt-card.compact-aux .nt-card-body,
.nt-card.compact-aux .nt-card-header {
padding-left: .88rem;
padding-right: .88rem;
}
.table-card-mobile td[data-label]::before {
font-size: .68rem;
letter-spacing: .06em;
}
}
@media (max-width: 575.98px) {
.panel-hero.compact-aux,
.panel-hero.visual-tier-secondary,
.panel-hero.visual-tier-tertiary {
padding: .8rem .84rem;
}
.panel-hero .page-summary,
.compact-aux .page-summary {
font-size: .82rem;
line-height: 1.45;
}
.dashboard-quickbar.compact-aux,
.panel-tour-bridge.compact-aux {
gap: .45rem;
padding: .72rem .76rem;
}
}
@media (max-width: 767.98px) {
.panel-signal-marquee {
-webkit-mask-image: none;
mask-image: none;
overflow-x: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.panel-signal-track {
animation: none;
}
}
/* ============================================================
AVATAR BİLEŞENİ
============================================================ */
/* Genel avatar dairesi */
.av-circle {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: 800;
color: #fff;
flex-shrink: 0;
object-fit: cover;
line-height: 1;
}
img.av-circle {
display: inline-block;
object-fit: cover;
}
.av-circle-sm { width: 30px; height: 30px; font-size: 0.78rem; }
.av-circle-md { width: 36px; height: 36px; font-size: 0.92rem; }
.av-circle-lg { width: 56px; height: 56px; font-size: 1.4rem; }
/* Avatar picker önizleme alanı */
.av-pick-preview {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.75rem;
}
/* Preset ızgara */
.av-preset-grid {
display: flex;
flex-wrap: nowrap;
gap: 6px;
}
/* Preset buton */
.av-preset-btn {
position: relative;
cursor: pointer;
margin: 0;
}
.av-preset-btn .av-radio { display: none; }
.av-swatch {
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
border: 3px solid transparent;
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.av-preset-btn:hover .av-swatch { transform: scale(1.15); }
.av-preset-btn .av-radio:checked + .av-swatch {
border-color: #fff;
box-shadow: 0 0 0 3px var(--ui-primary);
transform: scale(1.1);
}
html[data-theme="dark"] .av-preset-btn .av-radio:checked + .av-swatch {
box-shadow: 0 0 0 3px #7cb8ff;
}
/* Sidebar avatar düzenleme butonu */
.sidebar-avatar-edit-btn {
color: inherit;
opacity: 0.5;
transition: opacity 0.15s;
}
.sidebar-avatar-edit-btn:hover { opacity: 1; color: var(--ui-primary); }
/* Avatar modal - fixed z-index and interactions */
#myAvatarModal {
position: fixed !important;
z-index: 1050 !important;
}
#myAvatarModal .modal-backdrop {
z-index: 1040 !important;
}
#myAvatarModal .modal-dialog {
pointer-events: auto !important;
z-index: 1055 !important;
}
#myAvatarModal .modal-content {
pointer-events: auto !important;
background: #fff;
border: 1px solid rgba(0,0,0,0.15);
}
#myAvatarModal .modal-header {
border-bottom: 1px solid rgba(0,0,0,0.1);
padding: 0.75rem 1rem;
}
#myAvatarModal .modal-body {
pointer-events: auto !important;
padding: 1.5rem;
}
#myAvatarModal .btn-close {
pointer-events: auto !important;
cursor: pointer !important;
}
#myAvatarModal button,
#myAvatarModal input,
#myAvatarModal label {
pointer-events: auto !important;
cursor: pointer !important;
}
#myAvatarModal .av-preset-btn {
cursor: pointer !important;
}
#myAvatarModal .av-preset-btn input {
cursor: pointer !important;
}
/* Avatar modal dark mode */
html[data-theme="dark"] #myAvatarModal .modal-content {
background: #1b2330;
border-color: #33445d;
color: #e8f0ff;
}
html[data-theme="dark"] #myAvatarModal .modal-header {
border-bottom-color: #33445d;
}
html[data-theme="dark"] #myAvatarModal .modal-body {
color: #e8f0ff;
}
/* ============================================================
SÜTUN GÖRÜNÜRLÜKTEKİ TOGGLE (panel-cols.js)
============================================================ */
/* Inject wrapper — fallback when no h5 heading is found */
.td-colvis-inject {
display: flex;
justify-content: flex-end;
margin-bottom: 0.4rem;
}
/* Heading row with button on the right */
.td-colvis-title-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: .8rem;
}
.td-colvis-title-row h5 { margin: 0; }
/* Ana buton */
.td-colvis-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.78rem;
font-weight: 600;
padding: 0.22rem 0.55rem;
position: relative;
}
/* Kaç sütun gizli — badge */
.td-colvis-badge {
display: none;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: var(--ui-primary);
color: #fff;
font-size: 0.66rem;
font-weight: 800;
line-height: 1;
margin-left: 2px;
}
/* ── Popup panel (fixed to viewport — never behind cards) ── */
.td-colvis-panel {
display: none;
position: fixed;
z-index: 9999;
min-width: 240px;
max-width: 320px;
background: #fff;
border: 1px solid #dbe3ef;
border-radius: 13px;
box-shadow: 0 8px 32px rgba(15, 33, 58, 0.18), 0 2px 8px rgba(15, 33, 58, 0.08);
padding: 0.55rem;
animation: colvis-pop .15s ease;
}
.td-colvis-panel.open { display: block; }
@keyframes colvis-pop {
from { opacity: 0; transform: translateY(-6px) scale(.97); }
to { opacity: 1; transform: none; }
}
/* Header row inside panel */
.td-colvis-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.15rem 0.3rem 0.45rem;
border-bottom: 1px solid #e8edf5;
margin-bottom: 0.45rem;
}
.td-colvis-header-title {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #6b7280;
}
.td-colvis-reset-inline {
font-size: 0.72rem;
font-weight: 600;
color: var(--ui-primary);
background: none;
border: none;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.td-colvis-reset-inline:hover { color: #084e93; }
/* Chip grid */
.td-colvis-chip-grid {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
max-height: 260px;
overflow-y: auto;
padding: 0.1rem 0.05rem;
}
/* Each column = a pill chip */
.td-colvis-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 500;
cursor: pointer;
border: 1.5px solid #d1d9e6;
background: #f0f4fa;
color: #6b7a92;
transition: background 0.13s, border-color 0.13s, color 0.13s;
-webkit-user-select: none;
user-select: none;
line-height: 1.4;
white-space: nowrap;
}
.td-colvis-chip::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: #c0cad8;
flex-shrink: 0;
transition: background 0.13s;
}
.td-colvis-chip.active {
background: rgba(var(--ui-primary-rgb), 0.10);
border-color: rgba(var(--ui-primary-rgb), 0.45);
color: #0f5fa0;
font-weight: 600;
}
.td-colvis-chip.active::before { background: var(--ui-primary); }
.td-colvis-chip:hover:not(.fixed) {
border-color: var(--ui-primary);
background: rgba(var(--ui-primary-rgb), 0.06);
color: #0a4f90;
}
.td-colvis-chip.fixed {
opacity: 0.4;
cursor: not-allowed;
}
/* ── Koyu tema ── */
html[data-theme="dark"] .td-colvis-panel {
background: #172032;
border-color: #263650;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.36), 0 1px 4px rgba(0, 0, 0, 0.20);
}
html[data-theme="dark"] .td-colvis-header { border-bottom-color: #263650; }
html[data-theme="dark"] .td-colvis-header-title { color: #7a9bc4; }
html[data-theme="dark"] .td-colvis-reset-inline { color: #7cb8ff; }
html[data-theme="dark"] .td-colvis-reset-inline:hover { color: #aad4ff; }
html[data-theme="dark"] .td-colvis-chip {
background: #1e2e45;
border-color: #2d4260;
color: #7a9bc4;
}
html[data-theme="dark"] .td-colvis-chip::before { background: #3a5272; }
html[data-theme="dark"] .td-colvis-chip.active {
background: rgba(86, 156, 255, 0.15);
border-color: rgba(86, 156, 255, 0.5);
color: #9dc8ff;
}
html[data-theme="dark"] .td-colvis-chip.active::before { background: #5b9aee; }
html[data-theme="dark"] .td-colvis-chip:hover:not(.fixed) {
background: rgba(86, 156, 255, 0.1);
border-color: rgba(86, 156, 255, 0.4);
color: #b8d8ff;
}
/* ── Eski .td-colvis-title / .td-colvis-list / .td-colvis-item / .td-colvis-reset şimdi kullanılmıyor ──
Bırakılıyor; dashboard_settings.php hâlâ .td-colvis-title ve .td-colvis-list kullanıyor */
.td-colvis-title {
font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ui-muted, #6b7280);
padding: 0.2rem 0.4rem 0.4rem;
border-bottom: 1px solid var(--ui-border, #ddd); margin-bottom: 0.3rem;
}
.td-colvis-list { display: flex; flex-direction: column; gap: 1px; max-height: 280px; overflow-y: auto; }
.td-colvis-item {
display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.45rem;
border-radius: 6px; cursor: pointer; font-size: 0.81rem; font-weight: 500;
color: var(--ui-text, #1b2430); -webkit-user-select: none; user-select: none; transition: background 0.12s;
}
.td-colvis-item:hover { background: rgba(var(--ui-primary-rgb), 0.07); }
.td-colvis-item input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; accent-color: var(--ui-primary); }
.td-colvis-reset {
display: block; width: 100%; margin-top: 0.4rem; padding: 0.28rem 0.5rem;
font-size: 0.77rem; font-weight: 600; text-align: center;
background: rgba(var(--ui-primary-rgb), 0.06); border: 1px solid rgba(var(--ui-primary-rgb), 0.2);
border-radius: 6px; color: var(--ui-primary); cursor: pointer; transition: background 0.14s;
}
.td-colvis-reset:hover { background: rgba(var(--ui-primary-rgb), 0.13); }
html[data-theme="dark"] .td-colvis-title { color: #8ba8cc; border-bottom-color: #2d4060; }
html[data-theme="dark"] .td-colvis-item { color: #d8e8ff; }
html[data-theme="dark"] .td-colvis-item:hover { background: rgba(86, 156, 255, 0.1); }
html[data-theme="dark"] .td-colvis-item input[type="checkbox"] { accent-color: #7cb8ff; }
html[data-theme="dark"] .td-colvis-reset { color: #7cb8ff; background: rgba(86, 156, 255, 0.08); border-color: rgba(86, 156, 255, 0.22); }
html[data-theme="dark"] .td-colvis-reset:hover { background: rgba(86, 156, 255, 0.16); }
/* --- Dashboard Widget Toggle Panel --- */
.td-widget-wrap { position: relative; }
.td-widget-panel { display: none; position: absolute; right: 0; top: calc(100% + 5px); z-index: 1090; min-width: 220px; background: var(--ui-surface-2,#fff); border: 1px solid var(--ui-border,#ddd); border-radius: 10px; box-shadow: 0 10px 28px rgba(15,33,58,.14); padding: .45rem; }
.td-widget-panel.open { display: block; }
html[data-theme="dark"] .td-widget-panel { background:#1a2638; border-color:#2d4060; box-shadow:0 12px 32px rgba(0,0,0,.45); }
/* Panel: sidebar sağına sabit konumlanır */
.td-widget-panel-sidebar {
position: fixed !important;
left: calc(var(--sidebar-w) + 8px) !important;
right: auto !important;
top: auto !important;
bottom: 56px !important;
}
@media (max-width: 767.98px) {
.sidebar-dash-edit-wrap { display: none; }
}
/* ============================================================
ROADMAP — Sparkline, Progress Bar, Ripple, Collapsed Tooltip
============================================================ */
/* ── Sparkline SVG ── */
.metric-sparkline {
display: block;
width: 100%;
height: 28px;
margin: 0.45rem 0 0.35rem;
color: var(--metric-accent, var(--ui-primary));
opacity: 0.55;
transition: opacity 0.2s ease;
position: relative;
z-index: 1;
}
.metric-card:hover .metric-sparkline { opacity: 0.85; }
/* ── Metric Progress Bar ── */
.metric-card .metric-progress {
height: 3px;
background: rgba(var(--metric-accent-rgb, var(--ui-primary-rgb)), 0.13);
border-radius: 999px;
overflow: hidden;
margin: 0.5rem 0 0.6rem;
position: relative;
z-index: 1;
}
.metric-card .metric-progress-fill {
height: 100%;
border-radius: 999px;
background: var(--metric-accent, var(--ui-primary));
opacity: 0.82;
width: 0%;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── Button Ripple ── */
.btn { position: relative; overflow: hidden; }
.btn-ripple {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,0.28);
transform: scale(0);
animation: btnRippleOut 0.55s linear forwards;
pointer-events: none;
}
@keyframes btnRippleOut {
to { transform: scale(4); opacity: 0; }
}
/* ── Collapsed Sidebar Tooltip ── */
.sidebar-ico-tip {
position: fixed;
z-index: 9999;
padding: 0.3rem 0.75rem;
border-radius: 8px;
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translateX(-4px) translateY(-50%);
transition: opacity 0.15s ease, transform 0.15s ease;
background: var(--ui-surface);
color: var(--ui-text);
border: 1px solid var(--ui-border);
box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
.sidebar-ico-tip.visible {
opacity: 1;
transform: translateX(0) translateY(-50%);
}
/* ═══════════════════════════════════════════════════════
PREMIUM UI UPGRADE PACK
─────────────────────────────────────────────────────── */
/* ── RGB token extensions ── */
:root {
--ui-danger-rgb: 180, 35, 60;
--ui-warning-rgb: 183, 106, 0;
--ui-success-rgb: 26, 127, 79;
--ui-primary-2-rgb: 18, 138, 122;
}
html[data-theme="dark"] {
--ui-danger-rgb: 255, 142, 163;
--ui-warning-rgb: 255, 208, 127;
--ui-success-rgb: 74, 222, 128;
--ui-primary-2-rgb: 92, 229, 207;
}
/* ── 1. KPI Glance Row ── */
.kpi-glance-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
}
@media (max-width: 900px) { .kpi-glance-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kpi-glance-row { grid-template-columns: 1fr; } }
.kpi-glance-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
border-radius: var(--ui-radius-md);
background: var(--ui-surface);
border: 1px solid var(--ui-border);
border-left: 3px solid transparent;
text-decoration: none;
color: var(--ui-text);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
box-shadow: var(--ui-shadow-card);
}
.kpi-glance-card:hover {
transform: translateY(-2px);
box-shadow: var(--ui-shadow-card-hover);
color: var(--ui-text);
text-decoration: none;
}
.kpi-ico {
width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
}
.kpi-value { font-size: 1.55rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.kpi-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin-top: 0.05rem; }
.kpi-sub { font-size: 0.7rem; opacity: 0.45; margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Color variants */
.kpi-danger { border-left-color: var(--ui-danger); }
.kpi-danger .kpi-ico { background: rgba(var(--ui-danger-rgb), 0.1); color: var(--ui-danger); }
.kpi-warning { border-left-color: var(--ui-warning); }
.kpi-warning .kpi-ico { background: rgba(var(--ui-warning-rgb), 0.1); color: var(--ui-warning); }
.kpi-primary { border-left-color: var(--ui-primary); }
.kpi-primary .kpi-ico { background: rgba(var(--ui-primary-rgb), 0.1); color: var(--ui-primary); }
.kpi-teal { border-left-color: var(--ui-primary-2); }
.kpi-teal .kpi-ico { background: rgba(var(--ui-primary-2-rgb), 0.1); color: var(--ui-primary-2); }
.kpi-success { border-left-color: var(--ui-success); }
.kpi-success .kpi-ico { background: rgba(var(--ui-success-rgb), 0.1); color: var(--ui-success); }
/* ── 2. Renkli İkon Container (ico-wrap) ── */
.ico-wrap {
width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1rem;
}
.ico-wrap-lg { width: 46px; height: 46px; border-radius: 13px; font-size: 1.2rem; }
.ico-wrap-sm { width: 28px; height: 28px; border-radius: 7px; font-size: 0.82rem; }
.ico-wrap-primary { background: rgba(var(--ui-primary-rgb), 0.12); color: var(--ui-primary); }
.ico-wrap-success { background: rgba(var(--ui-success-rgb), 0.12); color: var(--ui-success); }
.ico-wrap-danger { background: rgba(var(--ui-danger-rgb), 0.12); color: var(--ui-danger); }
.ico-wrap-warning { background: rgba(var(--ui-warning-rgb), 0.12); color: var(--ui-warning); }
.ico-wrap-teal { background: rgba(var(--ui-primary-2-rgb), 0.12); color: var(--ui-primary-2); }
.ico-wrap-muted { background: rgba(var(--ui-primary-rgb), 0.06); color: var(--ui-muted); }
/* ── 3. CSS View Transitions ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtFadeOut 0.22s ease forwards; }
::view-transition-new(root) { animation: vtFadeIn 0.22s ease forwards; }
@keyframes vtFadeOut { to { opacity: 0; transform: translateY(4px); } }
@keyframes vtFadeIn { from { opacity: 0; transform: translateY(-4px); } }
/* ── Staggered card entrance on page load ── */
@keyframes cardEnter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.glass-card {
animation: cardEnter 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.glass-card:nth-child(1) { animation-delay: 0.04s; }
.glass-card:nth-child(2) { animation-delay: 0.08s; }
.glass-card:nth-child(3) { animation-delay: 0.12s; }
.glass-card:nth-child(4) { animation-delay: 0.16s; }
.glass-card:nth-child(5) { animation-delay: 0.20s; }
.glass-card:nth-child(6) { animation-delay: 0.24s; }
.glass-card:nth-child(n+7) { animation-delay: 0.26s; }
/* Bootstrap collapse smoother */
.collapse { transition: none; }
.collapsing { transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
/* ── Breadcrumb ── */
.panel-breadcrumb {
font-size: 0.78rem;
}
.panel-breadcrumb .breadcrumb {
background: none;
padding: 0;
gap: 0.1rem;
}
.panel-breadcrumb .breadcrumb-item a {
color: var(--ui-primary);
text-decoration: none;
opacity: 0.8;
transition: opacity 0.15s;
}
.panel-breadcrumb .breadcrumb-item a:hover { opacity: 1; }
.panel-breadcrumb .breadcrumb-item.active { color: var(--ui-muted); }
.panel-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
color: var(--ui-border);
}
/* ── 4. Sidebar Badges ── */
.sidebar-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
border-radius: 10px;
padding: 0 5px;
font-size: 0.65rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.01em;
background: var(--ui-danger);
color: #fff;
flex-shrink: 0;
/* never grows wider than necessary */
max-width: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* subtle depth */
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.sidebar-badge-warn { background: var(--ui-warning); color: #fff; }
.sidebar-badge-info { background: var(--ui-primary); color: #fff; }
/* dark mod — renkleri hafif açık tut, okunabilir kalsın */
html[data-theme="dark"] .sidebar-badge { background: var(--ui-danger); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
html[data-theme="dark"] .sidebar-badge-warn { background: var(--ui-warning); color: #0d1117; }
html[data-theme="dark"] .sidebar-badge-info { background: var(--ui-primary); color: #0d1117; }
/* collapsed sidebar — badge küçük nokta olarak göster */
html[data-sidebar-state="collapsed"] .sidebar-badge {
min-width: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
padding: 0;
font-size: 0; /* sayıyı gizle, sadece nokta kalsın */
max-width: 8px;
box-shadow: 0 0 0 2px var(--ui-surface);
}
.sidebar-main { display: flex; align-items: center; }
.sidebar-main .sidebar-main-link { flex: 1 1 auto; }
/* ── 5. Ctrl+K Spotlight Modal ── */
.spotlight-overlay {
position: fixed; inset: 0; z-index: 10000;
background: rgba(10, 14, 26, 0.6);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: flex; align-items: flex-start; justify-content: center;
padding-top: clamp(3rem, 12vh, 7rem);
opacity: 0; pointer-events: none;
transition: opacity 0.18s ease;
}
.spotlight-overlay.active { opacity: 1; pointer-events: auto; }
.spotlight-modal {
width: min(620px, 92vw);
background: var(--ui-surface);
border: 1px solid var(--ui-border);
border-radius: 18px;
box-shadow: 0 6px 24px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.10);
overflow: hidden;
transform: translateY(-8px);
transition: transform 0.18s ease;
}
.spotlight-overlay.active .spotlight-modal { transform: translateY(0); }
.spotlight-input-wrap {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.875rem 1rem; border-bottom: 1px solid var(--ui-border);
}
.spotlight-ico { font-size: 1.1rem; color: var(--ui-muted); flex-shrink: 0; }
.spotlight-input {
flex: 1; background: none; border: none; outline: none;
font-size: 1rem; font-family: inherit; color: var(--ui-text);
}
.spotlight-input::placeholder { color: var(--ui-muted-soft); }
.spotlight-esc {
font-size: 0.7rem; font-family: inherit; background: var(--ui-surface-3);
border: 1px solid var(--ui-border); border-radius: 5px;
padding: 2px 6px; color: var(--ui-muted); flex-shrink: 0;
}
.spotlight-results { max-height: 360px; overflow-y: auto; }
.spotlight-hint, .spotlight-loading, .spotlight-empty {
display: flex; align-items: center; justify-content: center;
gap: 0.5rem; padding: 2rem; color: var(--ui-muted); font-size: 0.88rem;
}
.spotlight-results-list { display: flex; flex-direction: column; }
.spotlight-result-item {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.65rem 1rem; text-decoration: none; color: var(--ui-text);
transition: background 0.1s ease;
border-bottom: 1px solid var(--ui-border);
}
.spotlight-result-item:last-child { border-bottom: none; }
.spotlight-result-item:hover { background: rgba(var(--ui-primary-rgb), 0.06); }
.spotlight-result-icon {
width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(var(--ui-primary-rgb), 0.1); color: var(--ui-primary); font-size: 0.9rem;
}
.spotlight-result-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.spotlight-result-title { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spotlight-result-meta { font-size: 0.76rem; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spotlight-footer {
display: flex; gap: 1rem; padding: 0.5rem 1rem;
border-top: 1px solid var(--ui-border);
font-size: 0.7rem; color: var(--ui-muted);
}
.spotlight-footer kbd {
font-family: inherit; background: var(--ui-surface-3);
border: 1px solid var(--ui-border); border-radius: 4px; padding: 1px 5px;
}
/* ── 6. Notification Bell ── */
.notif-btn {
position: relative;
}
.notif-badge {
position: absolute; top: -3px; right: -3px;
min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
background: var(--ui-danger); color: #fff;
font-size: 0.62rem; font-weight: 800; line-height: 16px; text-align: center;
border: 2px solid var(--ui-surface);
}
.notif-dropdown {
position: fixed; z-index: 9990;
width: min(340px, 92vw);
background: var(--ui-surface);
border: 1px solid var(--ui-border);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,0.22);
opacity: 0; pointer-events: none; transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease;
overflow: hidden;
}
.notif-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.notif-drop-head {
display: flex; align-items: center; justify-content: space-between;
padding: 0.75rem 1rem; border-bottom: 1px solid var(--ui-border);
}
.notif-drop-title { font-size: 0.82rem; font-weight: 700; }
.notif-drop-body { max-height: 320px; overflow-y: auto; }
.notif-item {
display: flex; align-items: flex-start; gap: 0.65rem;
padding: 0.65rem 1rem; border-bottom: 1px solid var(--ui-border);
text-decoration: none; color: var(--ui-text); transition: background 0.1s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(var(--ui-primary-rgb), 0.05); }
.notif-item-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.notif-item-dot-danger { background: var(--ui-danger); }
.notif-item-dot-warning { background: var(--ui-warning); }
.notif-item-dot-info { background: var(--ui-primary); }
.notif-item-title { font-size: 0.82rem; font-weight: 600; }
.notif-item-meta { font-size: 0.73rem; color: var(--ui-muted); margin-top: 0.1rem; }
.notif-drop-foot {
padding: 0.6rem 1rem; border-top: 1px solid var(--ui-border); text-align: center;
}
.notif-drop-foot a { font-size: 0.78rem; color: var(--ui-primary); font-weight: 600; text-decoration: none; }
/* ── 7. Donut Chart (CSS conic-gradient) ── */
.donut-chart-wrap { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.donut-chart {
width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0;
position: relative; display: flex; align-items: center; justify-content: center;
}
.donut-chart-inner {
position: absolute; inset: 14px; border-radius: 50%;
background: var(--ui-surface); display: flex; align-items: center;
justify-content: center; flex-direction: column;
}
.donut-chart-val { font-size: 0.9rem; font-weight: 800; line-height: 1; }
.donut-chart-sub { font-size: 0.58rem; color: var(--ui-muted); margin-top: 1px; }
.donut-legend { display: flex; flex-direction: column; gap: 0.35rem; }
.donut-legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; }
.donut-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* Misafir rolü — işlem sütunlarını gizle */
body[data-user-role="guest"] .td-actions { display: none !important; }
body[data-user-role="guest"] .th-actions { display: none !important; }
body[data-user-role="guest"] table:has(.td-actions) thead th:last-child { display: none !important; }
body[data-user-role="guest"] .action-cluster { display: none !important; }
body[data-user-role="guest"] .customer-list-actions { display: none !important; }
/* ── 8. Table Row Hover Quick Actions (action-cluster polish) ── */
tr .action-cluster { opacity: 0.25; transition: opacity 0.15s ease; }
tr:hover .action-cluster { opacity: 1; }
@media (max-width: 768px) { tr .action-cluster { opacity: 1; } }
/* ── 9. View transition meta tag (injected via PHP head) ── */
/* ╔══════════════════════════════════════════════════════════════╗
║ MOBİL KAPSAMLI DÜZELTMELERşi — v2 ║
║ Tüm düzeltmeler 767.98px kırılma noktasını esas alır. ║
╚══════════════════════════════════════════════════════════════╝ */
/* ── 1. Hamburger & Araç Butonu Dokunma Hedefi ──────────────── */
@media (max-width: 767.98px) {
.mobile-nav-hamburger {
min-width: 40px !important;
min-height: 40px !important;
width: 40px;
height: 40px;
padding: 0 !important;
border-radius: 10px !important;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
/* Araç butonları: daha küçük, taşmayı önler */
.top-menu-tool-btn {
min-width: 36px !important;
min-height: 36px !important;
width: 36px !important;
height: 36px !important;
padding: 0 !important;
border-radius: 9px !important;
}
.top-menu-tool-btn .bi,
.top-menu-actions .btn .bi { font-size: 1.0rem; }
}
/* ── 2. Hero Greeting Barı — mobil kompakt düzen ─────────────── */
@media (max-width: 767.98px) {
.menu-hero-greeting {
padding: 0.5rem 0.65rem;
gap: 0.4rem;
margin-bottom: 0.6rem;
flex-wrap: nowrap;
min-height: 52px;
overflow: hidden;
}
/* Avatar küçült */
.menu-hero-greeting .av-circle-hero {
width: 1.9rem;
height: 1.9rem;
font-size: 0.8rem;
flex-shrink: 0;
}
/* Kicker ve tarih — dar ekranda yer kaplıyor */
.menu-hero-greeting-kicker,
.menu-hero-greeting-date {
display: none !important;
}
.menu-hero-greeting-name {
font-size: 0.82rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 90px;
}
.menu-hero-greeting-role {
display: none !important;
}
/* Body alanı — min-width sıfırla, flex küçülsün */
.menu-hero-greeting-body {
min-width: 0;
flex: 0 1 auto;
}
/* Profil dropdown içine taşınan butonlar artık header'da yok */
/* Actions satırı — sığdır, sarmaya izin verme */
.menu-hero-greeting-actions {
gap: 0.15rem;
flex-wrap: nowrap;
flex-shrink: 0;
margin-left: auto;
}
}
/* ── 3. Bildirim Dropdown — mobilde ekrana kilitle ───────────── */
@media (max-width: 767.98px) {
.notif-dropdown {
position: fixed !important;
left: 0.5rem !important;
right: 0.5rem !important;
top: 60px !important;
width: auto !important;
max-width: none !important;
border-radius: 16px !important;
}
}
/* ── 4. Spotlight Modal — mobilde üstten açılır tam genişlik ─── */
@media (max-width: 575.98px) {
.spotlight-overlay {
padding-top: 0 !important;
align-items: flex-start;
}
.spotlight-modal {
width: 100vw !important;
border-radius: 0 0 18px 18px !important;
border-top: none !important;
}
.spotlight-footer span { display: none; }
.spotlight-footer::after {
content: "Sonucu seçmek için dokun";
font-size: 0.7rem;
color: var(--ui-muted);
}
}
/* ── 5. Kritikler Tablosu — mobil kart modu ─────────────────── */
@media (max-width: 767.98px) {
.tbl-critical thead { display: none !important; }
.tbl-critical,
.tbl-critical tbody,
.tbl-critical tr,
.tbl-critical td {
display: block !important;
width: 100% !important;
}
.tbl-critical tr {
border: 1px solid rgba(var(--ui-primary-rgb), 0.14) !important;
border-radius: 12px !important;
margin-bottom: 0.65rem !important;
overflow: hidden !important;
background: var(--ui-surface-2) !important;
box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
.tbl-critical tr.row-urgent { border-color: rgba(var(--ui-danger-rgb), 0.3) !important; }
.tbl-critical tr.row-warn { border-color: rgba(var(--ui-warning-rgb), 0.3) !important; }
.tbl-critical td {
border: 0 !important;
border-bottom: 1px dashed rgba(var(--ui-primary-rgb), 0.08) !important;
padding: 0.48rem 0.8rem !important;
font-size: 0.85rem !important;
vertical-align: middle !important;
}
.tbl-critical td:last-child { border-bottom: none !important; }
.tbl-critical td::before {
content: attr(data-label);
display: block;
font-size: 0.66rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--ui-muted);
margin-bottom: 0.12rem;
}
.tbl-critical td[data-label=""]::before { content: none !important; }
}
/* ── 6. Ödemeler Ayrıntılı Tablosu — mobil kart modu ────────── */
@media (max-width: 767.98px) {
.tbl-payments thead { display: none !important; }
.tbl-payments,
.tbl-payments tbody,
.tbl-payments tr,
.tbl-payments td {
display: block !important;
width: 100% !important;
}
.tbl-payments tr {
border: 1px solid rgba(var(--ui-primary-rgb), 0.14) !important;
border-radius: 12px !important;
margin-bottom: 0.65rem !important;
overflow: hidden !important;
background: var(--ui-surface-2) !important;
}
.tbl-payments td {
border: 0 !important;
border-bottom: 1px dashed rgba(var(--ui-primary-rgb), 0.08) !important;
padding: 0.48rem 0.8rem !important;
font-size: 0.85rem !important;
}
.tbl-payments td:last-child { border-bottom: none !important; }
.tbl-payments td::before {
content: attr(data-label);
display: block;
font-size: 0.66rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--ui-muted);
margin-bottom: 0.12rem;
}
}
/* ── 7. Glass Card — mobilde köşe yarıçapı ───────────────────── */
@media (max-width: 575.98px) {
.glass-card,
.dashboard-priority-card {
border-radius: 14px !important;
}
}
/* ── 8. Container kenar boşlukları — çok küçük ekranlar ─────── */
@media (max-width: 399.98px) {
.container.py-3,
.container {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
}
/* ── 9. Modal — mobilde daha iyi boyutlandırma ───────────────── */
@media (max-width: 575.98px) {
.modal-dialog:not(.modal-fullscreen) {
margin: 0.5rem auto !important;
max-width: calc(100vw - 1rem) !important;
}
.modal-content { border-radius: 16px !important; }
.modal-header { padding: 0.75rem 1rem !important; }
.modal-body { padding: var(--card-pad-md) !important; } /* 16px */
.modal-footer { padding: 0.65rem 1rem !important; gap: 0.4rem !important; }
}
/* ── 10. Offcanvas genişlik ──────────────────────────────────── */
#mobileNavOffcanvas {
width: min(300px, 88vw);
}
/* ── 11. KPI Kart Satırı ────────────────────────────────────── */
@media (max-width: 480px) {
.kpi-glance-row { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 360px) {
.kpi-glance-row { grid-template-columns: 1fr !important; }
}
/* ── 12. Section card başlık alanı — mobilde kompakt ─────────── */
@media (max-width: 575.98px) {
.section-card-head {
padding: var(--card-pad-md) var(--card-pad-md) 0.5rem !important; /* 16px 16px 8px */
gap: 0.5rem !important;
}
.section-card-title { font-size: 1rem !important; }
.section-card-meta { font-size: 0.75rem !important; }
}
/* ── 13. Panel-hero mobilde kompakt ─────────────────────────── */
@media (max-width: 575.98px) {
.panel-hero {
padding: 0.8rem 0.9rem !important;
border-radius: 14px !important;
}
.panel-hero h2 { font-size: 1.1rem !important; }
.panel-hero .page-summary { display: none; }
.page-actions .btn {
font-size: 0.78rem !important;
padding: 0.3rem 0.6rem !important;
}
}
/* ── 14. Action butonları — mobilde her zaman görünür ────────── */
@media (max-width: 767.98px) {
tr .action-cluster { opacity: 1 !important; }
.action-cluster .btn {
min-height: 36px !important;
min-width: 36px !important;
}
}
/* ── 15. Dash chips barı — yatay kaydırılabilir ─────────────── */
@media (max-width: 767.98px) {
.dash-chips-bar {
overflow-x: auto !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.25rem;
scrollbar-width: none;
}
.dash-chips-bar::-webkit-scrollbar { display: none; }
}
/* ── 16. Metric kart satırı — 2 sütun ───────────────────────── */
@media (max-width: 575.98px) {
#metricsRow .col-md-3 {
flex: 0 0 50% !important;
max-width: 50% !important;
}
}
@media (max-width: 359.98px) {
#metricsRow .col-md-3 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* ── 17. Table responsive — pürüzsüz yatay kaydırma ─────────── */
@media (max-width: 767.98px) {
.table-responsive {
border-radius: 12px;
-webkit-overflow-scrolling: touch;
}
}
/* ── 18. Offcanvas light mod tema uyumu ─────────────────────── */
html[data-theme="light"] #mobileNavOffcanvas {
background: var(--ui-surface) !important;
color: var(--ui-text) !important;
}
html[data-theme="light"] #mobileNavOffcanvas .sidebar-kicker {
color: var(--ui-muted) !important;
}
html[data-theme="light"] #mobileNavOffcanvas .sidebar-title {
color: var(--ui-text) !important;
}
html[data-theme="light"] #mobileNavOffcanvas .btn-close {
filter: none !important;
}
html[data-theme="light"] #mobileNavOffcanvas .sidebar-link {
background: rgba(var(--ui-primary-rgb), 0.04) !important;
border-color: rgba(var(--ui-primary-rgb), 0.1) !important;
color: var(--ui-text) !important;
}
html[data-theme="light"] #mobileNavOffcanvas .sidebar-group-title {
color: var(--ui-muted) !important;
}
html[data-theme="light"] #mobileNavOffcanvas .sidebar-link.active {
background: rgba(var(--ui-primary-rgb), 0.14) !important;
color: var(--ui-primary) !important;
}
/* ╔══════════════════════════════════════════════════════════════╗
║ MOBİL KAPSAMLI DÜZELTMELERi — v3 ║
║ Sayfa düzeni & genel uyum iyileştirmeleri ║
╚══════════════════════════════════════════════════════════════╝ */
/* ── 19. col-md-9 tam genişlik + sıfır yatay boşluk ─────────── */
@media (max-width: 767.98px) {
.container.soft-enter > .row > .col-md-9.pt-3 {
padding-left: 0.6rem !important;
padding-right: 0.6rem !important;
padding-top: 0.5rem !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-left: 0 !important;
}
.container.soft-enter {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ── 20. hero-copy-main flex-basis düşür ─────────────────────── */
@media (max-width: 767.98px) {
.hero-copy-main { flex-basis: 100% !important; }
.hero-mini-stats {
grid-template-columns: repeat(2, 1fr) !important;
min-width: 0 !important;
width: 100% !important;
}
}
@media (max-width: 399.98px) {
.hero-mini-stats { grid-template-columns: 1fr !important; }
}
/* ── 21. Panel hero butonlar — tam genişlik, sarma ───────────── */
@media (max-width: 575.98px) {
.panel-hero > div,
.panel-hero .d-flex { flex-wrap: wrap !important; }
.page-actions {
width: 100% !important;
flex-wrap: wrap !important;
}
.page-actions .btn {
flex: 1 1 auto !important;
justify-content: center !important;
min-width: 0 !important;
}
}
/* ── 22. section-card-head — buton tam genişlik ──────────────── */
@media (max-width: 575.98px) {
.section-card-head { flex-wrap: wrap !important; }
.customer-list-actions,
.section-card-head > div:last-child {
width: 100% !important;
}
.section-card-head .btn,
.customer-list-actions .btn {
width: 100% !important;
justify-content: center !important;
}
}
/* ── 23. glass-card iç padding düşür ─────────────────────────── */
@media (max-width: 575.98px) {
.glass-card.p-3,
.glass-card > .p-3 { padding: 0.75rem !important; }
.glass-card .section-card-head { padding: 0.75rem 0.75rem 0.5rem !important; }
}
/* ── 24. Tablo başlık satırı — kompakt ───────────────────────── */
@media (max-width: 767.98px) {
.table th { font-size: 0.72rem !important; padding: 0.4rem 0.5rem !important; }
.table td { font-size: 0.82rem !important; padding: 0.38rem 0.5rem !important; }
}
/* ── 25. Buton grupları — dokunma hedefi ─────────────────────── */
@media (max-width: 767.98px) {
.btn-group .btn, .input-group .btn {
min-height: 38px !important;
}
.btn-sm { min-height: 34px !important; }
}
/* ── 26. Form kontrolleri — yeterli boy ──────────────────────── */
@media (max-width: 767.98px) {
.form-control, .form-select {
min-height: 42px !important;
font-size: 1rem !important; /* iOS zoom önleme */
}
textarea.form-control { min-height: 80px !important; }
}
/* ── 27. Pagination — kompakt ────────────────────────────────── */
@media (max-width: 575.98px) {
.pagination { flex-wrap: wrap; justify-content: center; gap: 0.2rem; }
.pagination .page-link { padding: 0.3rem 0.55rem !important; font-size: 0.8rem !important; }
}
/* ── 28. Chip bar — küçük ekranlarda yazı tipi ───────────────── */
@media (max-width: 399.98px) {
.dash-chip { font-size: 0.7rem !important; padding: 0.22em 0.6em !important; }
}
/* ── 29. Chart legend badges ─────────────────────────────────── */
.chart-legend-primary {
background: rgba(var(--ui-primary-rgb), 0.13);
color: var(--ui-primary);
font-size: 0.72rem;
font-weight: 600;
padding: 0.2em 0.55em;
}
.chart-legend-secondary {
background: rgba(var(--ui-primary-2-rgb, 18,138,122), 0.13);
color: var(--ui-primary-2);
font-size: 0.72rem;
font-weight: 600;
padding: 0.2em 0.55em;
}
/* ── 29b. Stat card hover lift ───────────────────────────────── */
.list-stat-card,
.customer-stat-card,
.payment-stat-card,
.service-stat-card,
.license-stat-card,
.hardware-stat-card,
.employee-stat-card {
transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.list-stat-card:hover,
.customer-stat-card:hover,
.payment-stat-card:hover,
.service-stat-card:hover,
.license-stat-card:hover,
.hardware-stat-card:hover,
.employee-stat-card:hover {
box-shadow: var(--ui-shadow-card-hover);
transform: translateY(-2px);
}
/* hero-mini-stat lift */
.hero-mini-stat {
transition: transform 0.22s ease, background 0.22s ease;
}
.hero-mini-stat:hover {
transform: translateY(-2px);
background: rgba(255,255,255,.18);
}
/* ── 30. Urgent badge pulse ──────────────────────────────────── */
@keyframes badge-pulse-ring {
0% { transform: scale(1); opacity: 0.7; }
80% { transform: scale(2.2); opacity: 0; }
100% { transform: scale(2.2); opacity: 0; }
}
.badge-pulse {
position: relative;
isolation: isolate;
}
.badge-pulse::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(var(--ui-danger-rgb), 0.55);
animation: badge-pulse-ring 1.6s ease-out infinite;
pointer-events: none;
z-index: -1;
will-change: transform, opacity;
}
/* ════════════ END panel-modern.css MERGED ════════════ */
/* ════════════════════════════════════════════════════════════════
MERGED CONTENT FROM panel-themes.css (Sprint 3 konsolidasyonu)
Palette layer: html[data-palette="slate|midnight|ocean|ember|luminescent|verdant"] tanımları
Yüksek specificity selectörler — v2 :root tokenları ile çakışmaz.
════════════════════════════════════════════════════════════════ */
/* ============================================================
panel-themes.css — Color Palette Themes
Loads after panel-modern.css; each palette uses higher
specificity (two attribute selectors) to override base rules.
Palettes: slate | midnight | ocean | ember | luminescent | verdant
"classic" = no data-palette / falls through to panel-modern.css
Applied via: html[data-palette="X"]
Toggled by: window.setPalette("X") (set in menu.php)
============================================================ */
/* ============================================================
SLATE — Clean modern gray (new popular default)
Accent #3b82f6 · Light bg #f1f5f9 · Dark bg #0f172a
============================================================ */
html[data-palette="slate"] {
--ui-primary: #3b82f6;
--ui-primary-rgb: 59, 130, 246;
--ui-primary-2: #06b6d4;
--ui-danger: #ef4444;
--ui-warning: #f59e0b;
--ui-bg: #f1f5f9;
--ui-surface: #ffffff;
--ui-surface-2: #f8fafc;
--ui-surface-3: #f1f5f9;
--ui-border: #e2e8f0;
--ui-border-strong: #cbd5e1;
--ui-text: #0f172a;
--ui-muted: #64748b;
--ui-muted-soft: #94a3b8;
--sidebar-bg: #0f172a;
--sidebar-border: rgba(255,255,255,.07);
}
html[data-palette="slate"][data-theme="dark"] {
--ui-bg: #0f172a;
--ui-surface: #1e293b;
--ui-surface-2: #1e293b;
--ui-surface-3: #334155;
--ui-border: #334155;
--ui-border-strong: #475569;
--ui-text: #f1f5f9;
--ui-muted: #bcc7dc;
--ui-muted-soft: #94a3b8;
--ui-primary: #60a5fa;
--ui-primary-rgb: 96, 165, 250;
--ui-primary-2: #22d3ee;
--sidebar-bg: #0a0f1e;
--sidebar-border: rgba(255,255,255,.06);
}
html[data-palette="slate"][data-theme="light"] {
--sidebar-bg: #e8f0fb;
--sidebar-border: rgba(59,130,246,.14);
}
/* Body */
html[data-palette="slate"][data-theme="light"] body { background: #f1f5f9 !important; color: #0f172a !important; }
html[data-palette="slate"][data-theme="dark"] body { background: #0f172a !important; color: #f1f5f9 !important; }
/* Ambient blobs */
html[data-palette="slate"][data-theme="light"] body::before {
background:
radial-gradient(ellipse 70% 52% at 7% 11%, rgba(59,130,246,.14) 0%, transparent 68%),
radial-gradient(ellipse 54% 60% at 93% 14%, rgba(6,182,212,.11) 0%, transparent 65%),
radial-gradient(ellipse 58% 46% at 54% 93%, rgba(59,130,246,.09) 0%, transparent 62%),
radial-gradient(ellipse 40% 36% at 19% 74%, rgba(99,102,241,.08) 0%, transparent 58%);
}
html[data-palette="slate"][data-theme="dark"] body::before {
background:
radial-gradient(ellipse 68% 50% at 5% 10%, rgba(59,130,246,.20) 0%, transparent 66%),
radial-gradient(ellipse 50% 60% at 94% 13%, rgba(6,182,212,.15) 0%, transparent 63%),
radial-gradient(ellipse 56% 46% at 50% 94%, rgba(99,102,241,.14) 0%, transparent 60%),
radial-gradient(ellipse 40% 34% at 17% 77%, rgba(139,92,246,.11) 0%, transparent 56%),
radial-gradient(ellipse 33% 28% at 80% 58%, rgba(6,182,212,.08) 0%, transparent 52%);
}
/* Cards */
html[data-palette="slate"][data-theme="light"] .card,
html[data-palette="slate"][data-theme="light"] .glass-card,
html[data-palette="slate"][data-theme="light"] .ai-support-card {
background: #ffffff !important;
border-color: #e2e8f0 !important;
}
html[data-palette="slate"][data-theme="dark"] .card,
html[data-palette="slate"][data-theme="dark"] .glass-card {
background: #1e293b !important;
border-color: #334155 !important;
}
html[data-palette="slate"][data-theme="light"] .glass-card { background: rgba(255,255,255,.76) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important; }
html[data-palette="slate"][data-theme="dark"] .glass-card { background: rgba(30,41,59,.72) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important; }
/* Top menu */
html[data-palette="slate"][data-theme="light"] .top-menu-card {
background:
radial-gradient(circle at 8% 12%, rgba(59,130,246,.07), transparent 34%),
rgba(248,250,252,.93) !important;
border-color: rgba(59,130,246,.13) !important;
}
html[data-palette="slate"][data-theme="dark"] .top-menu-card {
background:
radial-gradient(circle at 8% 12%, rgba(96,165,250,.12), transparent 34%),
linear-gradient(135deg, #151f35 0%, #111827 100%) !important;
border-color: rgba(96,165,250,.16) !important;
}
/* Tech news card */
html[data-palette="slate"][data-theme="light"] .tech-news-card {
background: #f0f4ff !important;
border-color: rgba(59,130,246,.14) !important;
}
html[data-palette="slate"] .tech-news-label {
color: #3b82f6 !important;
background: rgba(59,130,246,.1) !important;
border-color: rgba(59,130,246,.22) !important;
}
html[data-palette="slate"][data-theme="dark"] .tech-news-label {
color: #93c5fd !important;
background: rgba(96,165,250,.14) !important;
border-color: rgba(96,165,250,.28) !important;
}
/* Dashboard hero banner */
html[data-palette="slate"] .hero {
background: linear-gradient(125deg, #3b82f6, #2563eb 55%, #0284c7);
}
/* Panel page-hero */
html[data-palette="slate"][data-theme="light"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(59,130,246,.12), transparent 30%),
linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,.2));
}
html[data-palette="slate"][data-theme="dark"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(96,165,250,.18), transparent 34%),
linear-gradient(120deg, rgba(30,41,59,.85), rgba(15,23,42,.85));
}
/* Sidebar brand-wrap (dark bg so white logo stays readable) */
html[data-palette="slate"][data-theme="light"] .sidebar-brand-wrap {
background: #1e3a5f !important;
border-bottom-color: rgba(255,255,255,.10) !important;
}
/* Sidebar nav — light mode */
html[data-palette="slate"][data-theme="light"] .sidebar-link { color: #253b55 !important; }
html[data-palette="slate"][data-theme="light"] .sidebar-link:hover {
background: rgba(59,130,246,.09) !important;
color: #2563eb !important;
}
html[data-palette="slate"][data-theme="light"] .sidebar-link.active {
background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(59,130,246,.3) !important;
}
html[data-palette="slate"][data-theme="light"] .sidebar-group-title {
color: rgba(59,130,246,.5) !important;
}
html[data-palette="slate"][data-theme="light"] .sidebar-submenu a { color: #3d5f90 !important; }
html[data-palette="slate"][data-theme="light"] .sidebar-submenu a:hover {
color: #3b82f6 !important;
background: rgba(59,130,246,.07) !important;
}
html[data-palette="slate"][data-theme="light"] .sidebar-user-card {
background: rgba(59,130,246,.07) !important;
border-color: rgba(59,130,246,.16) !important;
}
html[data-palette="slate"][data-theme="light"] .sidebar-user-role { color: #2563eb !important; }
html[data-palette="slate"][data-theme="light"] #mobileNavOffcanvas { background: #e8f0fb !important; }
/* Tables */
html[data-palette="slate"][data-theme="light"] .table-modern thead th,
html[data-palette="slate"][data-theme="light"] .table thead th {
background: rgba(59,130,246,.07) !important;
color: #1e40af !important;
}
/* Metric cards — accent token (workplace ui-primary'den otomatik alır) */
html[data-palette="slate"] .metric-server { --metric-accent: #6366f1; --metric-accent-rgb: 99, 102, 241; }
/* Selector card */
html[data-palette="slate"] .selector-card {
background: linear-gradient(130deg, #eff6ff, #dbeafe 45%, #cffafe 100%);
border-color: #93c5fd;
box-shadow: 0 2px 10px rgba(59,130,246,.10), 0 1px 3px rgba(59,130,246,.06);
}
html[data-palette="slate"] .selector-title { color: #1d4ed8; }
html[data-palette="slate"] .selector-sub { color: #1e40af; }
/* Active-glow button */
html[data-palette="slate"] .top-menu-links .btn.active-glow,
html[data-palette="slate"] .top-menu-actions .btn.active-glow {
box-shadow: 0 0 0 0.2rem rgba(59,130,246,.34), 0 10px 22px rgba(59,130,246,.3);
}
/* AI support */
html[data-palette="slate"] .ai-support-card {
background: linear-gradient(135deg, rgba(59,130,246,.1), rgba(6,182,212,.09));
}
html[data-palette="slate"] .ai-support-chip { border-color: rgba(59,130,246,.22); }
html[data-palette="slate"][data-theme="dark"] .ai-support-chip {
background: #1e293b;
border-color: rgba(96,165,250,.28);
}
/* Trend period buttons */
html[data-palette="slate"] .trend-period-btn-group .btn.active {
background: #3b82f6;
border-color: #3b82f6;
}
/* ============================================================
MIDNIGHT — Deep indigo / violet
Accent #8b5cf6 · Light bg #f5f3ff · Dark bg #0e0c2a
============================================================ */
html[data-palette="midnight"] {
--ui-primary: #8b5cf6;
--ui-primary-rgb: 139, 92, 246;
--ui-primary-2: #a78bfa;
--ui-danger: #f87171;
--ui-warning: #f59e0b;
--ui-bg: #f5f3ff;
--ui-surface: #ffffff;
--ui-surface-2: #faf8ff;
--ui-surface-3: #f0ebff;
--ui-border: #e5dffe;
--ui-border-strong: #c4b5fd;
--ui-text: #1e1b4b;
--ui-muted: #6d59a0;
--ui-muted-soft: #a89bc0;
--sidebar-bg: #0e0c2a;
--sidebar-border: rgba(167,139,250,.1);
}
html[data-palette="midnight"][data-theme="dark"] {
--ui-bg: #0e0c2a;
--ui-surface: #171330;
--ui-surface-2: #1e1842;
--ui-surface-3: #2d2558;
--ui-border: #3b2e6e;
--ui-border-strong: #5a49a0;
--ui-text: #ede9ff;
--ui-muted: #c6b8dc;
--ui-muted-soft: #a89bc0;
--ui-primary: #a78bfa;
--ui-primary-rgb: 167, 139, 250;
--ui-primary-2: #c4b5fd;
--sidebar-bg: #08061e;
--sidebar-border: rgba(167,139,250,.1);
}
html[data-palette="midnight"][data-theme="light"] {
--sidebar-bg: #f0ebff;
--sidebar-border: rgba(139,92,246,.14);
}
/* Body */
html[data-palette="midnight"][data-theme="light"] body { background: #f5f3ff !important; color: #1e1b4b !important; }
html[data-palette="midnight"][data-theme="dark"] body { background: #0e0c2a !important; color: #ede9ff !important; }
/* Ambient blobs */
html[data-palette="midnight"][data-theme="light"] body::before {
background:
radial-gradient(ellipse 72% 56% at 6% 10%, rgba(139,92,246,.16) 0%, transparent 70%),
radial-gradient(ellipse 55% 62% at 93% 13%, rgba(167,139,250,.12) 0%, transparent 66%),
radial-gradient(ellipse 60% 48% at 52% 93%, rgba(109,40,217,.10) 0%, transparent 63%),
radial-gradient(ellipse 42% 37% at 20% 76%, rgba(139,92,246,.09) 0%, transparent 58%);
}
html[data-palette="midnight"][data-theme="dark"] body::before {
background:
radial-gradient(ellipse 70% 54% at 5% 9%, rgba(139,92,246,.22) 0%, transparent 68%),
radial-gradient(ellipse 52% 62% at 94% 12%, rgba(167,139,250,.16) 0%, transparent 64%),
radial-gradient(ellipse 58% 48% at 50% 95%, rgba(109,40,217,.18) 0%, transparent 62%),
radial-gradient(ellipse 42% 35% at 18% 77%, rgba(196,167,253,.10) 0%, transparent 56%),
radial-gradient(ellipse 34% 29% at 82% 56%, rgba(139,92,246,.09) 0%, transparent 52%);
}
/* Cards */
html[data-palette="midnight"][data-theme="light"] .card,
html[data-palette="midnight"][data-theme="light"] .glass-card,
html[data-palette="midnight"][data-theme="light"] .ai-support-card {
background: #ffffff !important;
border-color: #e5dffe !important;
}
html[data-palette="midnight"][data-theme="dark"] .card,
html[data-palette="midnight"][data-theme="dark"] .glass-card {
background: #171330 !important;
border-color: #3b2e6e !important;
}
html[data-palette="midnight"][data-theme="light"] .glass-card { background: rgba(255,255,255,.76) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important; }
html[data-palette="midnight"][data-theme="dark"] .glass-card { background: rgba(23,19,48,.72) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important; }
/* Top menu */
html[data-palette="midnight"][data-theme="light"] .top-menu-card {
background:
radial-gradient(circle at 8% 12%, rgba(139,92,246,.07), transparent 34%),
rgba(250,248,255,.93) !important;
border-color: rgba(139,92,246,.14) !important;
}
html[data-palette="midnight"][data-theme="dark"] .top-menu-card {
background:
radial-gradient(circle at 8% 12%, rgba(167,139,250,.15), transparent 34%),
linear-gradient(135deg, #140f30 0%, #0e0c2a 100%) !important;
border-color: rgba(167,139,250,.18) !important;
}
/* Tech news */
html[data-palette="midnight"][data-theme="light"] .tech-news-card {
background: #f3efff !important;
border-color: rgba(139,92,246,.14) !important;
}
html[data-palette="midnight"] .tech-news-label {
color: #8b5cf6 !important;
background: rgba(139,92,246,.1) !important;
border-color: rgba(139,92,246,.22) !important;
}
html[data-palette="midnight"][data-theme="dark"] .tech-news-label {
color: #c4b5fd !important;
background: rgba(167,139,250,.14) !important;
border-color: rgba(167,139,250,.28) !important;
}
/* Hero banner */
html[data-palette="midnight"] .hero {
background: linear-gradient(125deg, #7c3aed, #8b5cf6 55%, #6d28d9);
}
/* Panel hero */
html[data-palette="midnight"][data-theme="light"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(139,92,246,.12), transparent 30%),
linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,.2));
}
html[data-palette="midnight"][data-theme="dark"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(167,139,250,.2), transparent 34%),
linear-gradient(120deg, rgba(23,19,48,.85), rgba(14,12,42,.85));
}
/* Sidebar brand-wrap */
html[data-palette="midnight"][data-theme="light"] .sidebar-brand-wrap {
background: #1a0f3c !important;
border-bottom-color: rgba(255,255,255,.10) !important;
}
/* Sidebar nav — light mode */
html[data-palette="midnight"][data-theme="light"] .sidebar-link { color: #2d1b69 !important; }
html[data-palette="midnight"][data-theme="light"] .sidebar-link:hover {
background: rgba(139,92,246,.09) !important;
color: #7c3aed !important;
}
html[data-palette="midnight"][data-theme="light"] .sidebar-link.active {
background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(139,92,246,.3) !important;
}
html[data-palette="midnight"][data-theme="light"] .sidebar-group-title {
color: rgba(139,92,246,.5) !important;
}
html[data-palette="midnight"][data-theme="light"] .sidebar-submenu a { color: #4a2d96 !important; }
html[data-palette="midnight"][data-theme="light"] .sidebar-submenu a:hover {
color: #8b5cf6 !important;
background: rgba(139,92,246,.07) !important;
}
html[data-palette="midnight"][data-theme="light"] .sidebar-user-card {
background: rgba(139,92,246,.07) !important;
border-color: rgba(139,92,246,.16) !important;
}
html[data-palette="midnight"][data-theme="light"] .sidebar-user-role { color: #7c3aed !important; }
html[data-palette="midnight"][data-theme="light"] #mobileNavOffcanvas { background: #f0ebff !important; }
/* Tables */
html[data-palette="midnight"][data-theme="light"] .table-modern thead th,
html[data-palette="midnight"][data-theme="light"] .table thead th {
background: rgba(139,92,246,.07) !important;
color: #4c1d95 !important;
}
/* Metric cards — accent token */
html[data-palette="midnight"] .metric-server { --metric-accent: #4338ca; --metric-accent-rgb: 67, 56, 202; }
/* Selector */
html[data-palette="midnight"] .selector-card {
background: linear-gradient(130deg, #f5f3ff, #ede9fe 45%, #ddd6fe 100%);
border-color: #c4b5fd;
box-shadow: 0 2px 10px rgba(139,92,246,.10), 0 1px 3px rgba(139,92,246,.06);
}
html[data-palette="midnight"] .selector-title { color: #4c1d95; }
html[data-palette="midnight"] .selector-sub { color: #5b21b6; }
/* Active-glow */
html[data-palette="midnight"] .top-menu-links .btn.active-glow,
html[data-palette="midnight"] .top-menu-actions .btn.active-glow {
box-shadow: 0 0 0 0.2rem rgba(139,92,246,.34), 0 10px 22px rgba(139,92,246,.3);
}
/* AI support */
html[data-palette="midnight"] .ai-support-card {
background: linear-gradient(135deg, rgba(139,92,246,.1), rgba(167,139,250,.09));
}
html[data-palette="midnight"] .ai-support-chip { border-color: rgba(139,92,246,.22); }
html[data-palette="midnight"][data-theme="dark"] .ai-support-chip {
background: #171330;
border-color: rgba(167,139,250,.28);
}
/* Trend */
html[data-palette="midnight"] .trend-period-btn-group .btn.active {
background: #8b5cf6;
border-color: #8b5cf6;
}
/* Selector – dark */
html[data-palette="midnight"][data-theme="dark"] .selector-card {
background: linear-gradient(130deg, #171330, #1e1842 45%, #2d2558 100%);
border-color: #5a49a0;
box-shadow: 0 2px 10px rgba(139,92,246,.14), 0 1px 3px rgba(139,92,246,.08);
}
html[data-palette="midnight"][data-theme="dark"] .selector-title { color: #c4b5fd; }
html[data-palette="midnight"][data-theme="dark"] .selector-sub { color: #a89bc0; }
/* Tables – dark */
html[data-palette="midnight"][data-theme="dark"] .table-modern thead th,
html[data-palette="midnight"][data-theme="dark"] .table thead th {
background: rgba(167,139,250,.1) !important;
color: #c4b5fd !important;
}
/* Sidebar nav — dark mode */
html[data-palette="midnight"][data-theme="dark"] .sidebar-link { color: #c4b5fd !important; }
html[data-palette="midnight"][data-theme="dark"] .sidebar-link:hover {
background: rgba(167,139,250,.12) !important;
color: #e2d9ff !important;
}
html[data-palette="midnight"][data-theme="dark"] .sidebar-link.active {
background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(139,92,246,.35) !important;
}
html[data-palette="midnight"][data-theme="dark"] .sidebar-group-title {
color: rgba(167,139,250,.45) !important;
}
html[data-palette="midnight"][data-theme="dark"] .sidebar-submenu a { color: #a89bc0 !important; }
html[data-palette="midnight"][data-theme="dark"] .sidebar-submenu a:hover {
color: #c4b5fd !important;
background: rgba(167,139,250,.1) !important;
}
html[data-palette="midnight"][data-theme="dark"] .sidebar-user-card {
background: rgba(167,139,250,.1) !important;
border-color: rgba(167,139,250,.2) !important;
}
html[data-palette="midnight"][data-theme="dark"] .sidebar-user-role { color: #a78bfa !important; }
html[data-palette="midnight"][data-theme="dark"] #mobileNavOffcanvas { background: #0e0c2a !important; }
/* Tech news card – dark */
html[data-palette="midnight"][data-theme="dark"] .tech-news-card {
background: #171330 !important;
border-color: rgba(167,139,250,.18) !important;
}
/* ============================================================
OCEAN — Teal / emerald
Accent #0d9488 · Light bg #f0fdfa · Dark bg #022c2c
============================================================ */
html[data-palette="ocean"] {
--ui-primary: #0d9488;
--ui-primary-rgb: 13, 148, 136;
--ui-primary-2: #0ea5e9;
--ui-danger: #ef4444;
--ui-warning: #f59e0b;
--ui-bg: #f0fdfa;
--ui-surface: #ffffff;
--ui-surface-2: #f8fffd;
--ui-surface-3: #e6faf7;
--ui-border: #ccf1eb;
--ui-border-strong: #5eead4;
--ui-text: #042f2e;
--ui-muted: #2e7d76;
--ui-muted-soft: #5fb5ae;
--sidebar-bg: #022c2c;
--sidebar-border: rgba(94,234,212,.1);
}
html[data-palette="ocean"][data-theme="dark"] {
--ui-bg: #022c2c;
--ui-surface: #0a3636;
--ui-surface-2: #0e3f3f;
--ui-surface-3: #134747;
--ui-border: #1d5555;
--ui-border-strong: #2f7a7a;
--ui-text: #e6fffb;
--ui-muted: #7ae7e0;
--ui-muted-soft: #5bb8b0;
--ui-primary: #2dd4bf;
--ui-primary-rgb: 45, 212, 191;
--ui-primary-2: #38bdf8;
--sidebar-bg: #001a1a;
--sidebar-border: rgba(45,212,191,.1);
}
html[data-palette="ocean"][data-theme="light"] {
--sidebar-bg: #e6faf7;
--sidebar-border: rgba(13,148,136,.14);
}
/* Body */
html[data-palette="ocean"][data-theme="light"] body { background: #f0fdfa !important; color: #042f2e !important; }
html[data-palette="ocean"][data-theme="dark"] body { background: #022c2c !important; color: #e6fffb !important; }
/* Ambient blobs */
html[data-palette="ocean"][data-theme="light"] body::before {
background:
radial-gradient(ellipse 70% 54% at 7% 11%, rgba(13,148,136,.15) 0%, transparent 68%),
radial-gradient(ellipse 54% 62% at 92% 13%, rgba(14,165,233,.12) 0%, transparent 65%),
radial-gradient(ellipse 58% 46% at 53% 92%, rgba(6,182,212,.10) 0%, transparent 62%),
radial-gradient(ellipse 40% 36% at 20% 75%, rgba(5,150,105,.08) 0%, transparent 58%);
}
html[data-palette="ocean"][data-theme="dark"] body::before {
background:
radial-gradient(ellipse 68% 52% at 5% 10%, rgba(13,148,136,.22) 0%, transparent 66%),
radial-gradient(ellipse 52% 60% at 93% 12%, rgba(14,165,233,.18) 0%, transparent 63%),
radial-gradient(ellipse 56% 46% at 51% 94%, rgba(6,182,212,.16) 0%, transparent 61%),
radial-gradient(ellipse 40% 33% at 18% 76%, rgba(5,150,105,.12) 0%, transparent 56%),
radial-gradient(ellipse 33% 27% at 81% 57%, rgba(16,185,129,.08) 0%, transparent 52%);
}
/* Cards */
html[data-palette="ocean"][data-theme="light"] .card,
html[data-palette="ocean"][data-theme="light"] .glass-card,
html[data-palette="ocean"][data-theme="light"] .ai-support-card {
background: #ffffff !important;
border-color: #ccf1eb !important;
}
html[data-palette="ocean"][data-theme="dark"] .card,
html[data-palette="ocean"][data-theme="dark"] .glass-card {
background: #0a3636 !important;
border-color: #1d5555 !important;
}
html[data-palette="ocean"][data-theme="light"] .glass-card { background: rgba(255,255,255,.76) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important; }
html[data-palette="ocean"][data-theme="dark"] .glass-card { background: rgba(10,54,54,.72) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important; }
/* Top menu */
html[data-palette="ocean"][data-theme="light"] .top-menu-card {
background:
radial-gradient(circle at 8% 12%, rgba(13,148,136,.07), transparent 34%),
rgba(240,253,250,.93) !important;
border-color: rgba(13,148,136,.14) !important;
}
html[data-palette="ocean"][data-theme="dark"] .top-menu-card {
background:
radial-gradient(circle at 8% 12%, rgba(45,212,191,.12), transparent 34%),
linear-gradient(135deg, #083030 0%, #022c2c 100%) !important;
border-color: rgba(45,212,191,.16) !important;
}
/* Tech news */
html[data-palette="ocean"][data-theme="light"] .tech-news-card {
background: #e6faf7 !important;
border-color: rgba(13,148,136,.14) !important;
}
html[data-palette="ocean"] .tech-news-label {
color: #0d9488 !important;
background: rgba(13,148,136,.1) !important;
border-color: rgba(13,148,136,.22) !important;
}
html[data-palette="ocean"][data-theme="dark"] .tech-news-label {
color: #2dd4bf !important;
background: rgba(45,212,191,.12) !important;
border-color: rgba(45,212,191,.25) !important;
}
/* Hero banner */
html[data-palette="ocean"] .hero {
background: linear-gradient(125deg, #0d9488, #0f766e 55%, #0284c7);
}
/* Panel hero */
html[data-palette="ocean"][data-theme="light"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(13,148,136,.12), transparent 30%),
linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,.2));
}
html[data-palette="ocean"][data-theme="dark"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(45,212,191,.18), transparent 34%),
linear-gradient(120deg, rgba(10,54,54,.85), rgba(2,44,44,.85));
}
/* Sidebar brand-wrap */
html[data-palette="ocean"][data-theme="light"] .sidebar-brand-wrap {
background: #013d3d !important;
border-bottom-color: rgba(255,255,255,.10) !important;
}
/* Sidebar nav — light mode */
html[data-palette="ocean"][data-theme="light"] .sidebar-link { color: #134e4a !important; }
html[data-palette="ocean"][data-theme="light"] .sidebar-link:hover {
background: rgba(13,148,136,.09) !important;
color: #0f766e !important;
}
html[data-palette="ocean"][data-theme="light"] .sidebar-link.active {
background: linear-gradient(135deg, #0d9488, #0f766e) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(13,148,136,.3) !important;
}
html[data-palette="ocean"][data-theme="light"] .sidebar-group-title {
color: rgba(13,148,136,.5) !important;
}
html[data-palette="ocean"][data-theme="light"] .sidebar-submenu a { color: #1f6e68 !important; }
html[data-palette="ocean"][data-theme="light"] .sidebar-submenu a:hover {
color: #0d9488 !important;
background: rgba(13,148,136,.07) !important;
}
html[data-palette="ocean"][data-theme="light"] .sidebar-user-card {
background: rgba(13,148,136,.07) !important;
border-color: rgba(13,148,136,.16) !important;
}
html[data-palette="ocean"][data-theme="light"] .sidebar-user-role { color: #0f766e !important; }
html[data-palette="ocean"][data-theme="light"] #mobileNavOffcanvas { background: #e6faf7 !important; }
/* Tables */
html[data-palette="ocean"][data-theme="light"] .table-modern thead th,
html[data-palette="ocean"][data-theme="light"] .table thead th {
background: rgba(13,148,136,.07) !important;
color: #134e4a !important;
}
/* Metric cards — accent token */
html[data-palette="ocean"] .metric-server { --metric-accent: #1d4ed8; --metric-accent-rgb: 29, 78, 216; }
/* Selector */
html[data-palette="ocean"] .selector-card {
background: linear-gradient(130deg, #f0fdfa, #ccfbf1 45%, #cffafe 100%);
border-color: #5eead4;
box-shadow: 0 2px 10px rgba(13,148,136,.10), 0 1px 3px rgba(13,148,136,.06);
}
html[data-palette="ocean"] .selector-title { color: #134e4a; }
html[data-palette="ocean"] .selector-sub { color: #0f766e; }
/* Active-glow */
html[data-palette="ocean"] .top-menu-links .btn.active-glow,
html[data-palette="ocean"] .top-menu-actions .btn.active-glow {
box-shadow: 0 0 0 0.2rem rgba(13,148,136,.34), 0 10px 22px rgba(13,148,136,.3);
}
/* AI support */
html[data-palette="ocean"] .ai-support-card {
background: linear-gradient(135deg, rgba(13,148,136,.1), rgba(14,165,233,.09));
}
html[data-palette="ocean"] .ai-support-chip { border-color: rgba(13,148,136,.22); }
html[data-palette="ocean"][data-theme="dark"] .ai-support-chip {
background: #0a3636;
border-color: rgba(45,212,191,.28);
}
/* Trend */
html[data-palette="ocean"] .trend-period-btn-group .btn.active {
background: #0d9488;
border-color: #0d9488;
}
/* Selector – dark */
html[data-palette="ocean"][data-theme="dark"] .selector-card {
background: linear-gradient(130deg, #0a3636, #0e3f3f 45%, #134747 100%);
border-color: #2f7a7a;
box-shadow: 0 2px 10px rgba(13,148,136,.14), 0 1px 3px rgba(13,148,136,.08);
}
html[data-palette="ocean"][data-theme="dark"] .selector-title { color: #5eead4; }
html[data-palette="ocean"][data-theme="dark"] .selector-sub { color: #6ecece; }
/* Tables – dark */
html[data-palette="ocean"][data-theme="dark"] .table-modern thead th,
html[data-palette="ocean"][data-theme="dark"] .table thead th {
background: rgba(45,212,191,.1) !important;
color: #2dd4bf !important;
}
/* Sidebar nav — dark mode */
html[data-palette="ocean"][data-theme="dark"] .sidebar-link { color: #6ecece !important; }
html[data-palette="ocean"][data-theme="dark"] .sidebar-link:hover {
background: rgba(45,212,191,.12) !important;
color: #99f6e4 !important;
}
html[data-palette="ocean"][data-theme="dark"] .sidebar-link.active {
background: linear-gradient(135deg, #0d9488, #0f766e) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(13,148,136,.35) !important;
}
html[data-palette="ocean"][data-theme="dark"] .sidebar-group-title {
color: rgba(45,212,191,.45) !important;
}
html[data-palette="ocean"][data-theme="dark"] .sidebar-submenu a { color: #3a9090 !important; }
html[data-palette="ocean"][data-theme="dark"] .sidebar-submenu a:hover {
color: #2dd4bf !important;
background: rgba(45,212,191,.1) !important;
}
html[data-palette="ocean"][data-theme="dark"] .sidebar-user-card {
background: rgba(45,212,191,.1) !important;
border-color: rgba(45,212,191,.2) !important;
}
html[data-palette="ocean"][data-theme="dark"] .sidebar-user-role { color: #2dd4bf !important; }
html[data-palette="ocean"][data-theme="dark"] #mobileNavOffcanvas { background: #022c2c !important; }
/* Tech news card – dark */
html[data-palette="ocean"][data-theme="dark"] .tech-news-card {
background: #0a3636 !important;
border-color: rgba(45,212,191,.18) !important;
}
/* ============================================================
EMBER — Warm orange / amber
Accent #f97316 · Light bg #fff7ed · Dark bg #1c0a00
============================================================ */
html[data-palette="ember"] {
--ui-primary: #f97316;
--ui-primary-rgb: 249, 115, 22;
--ui-primary-2: #eab308;
--ui-danger: #e11d48;
--ui-warning: #f97316;
--ui-bg: #fff7ed;
--ui-surface: #ffffff;
--ui-surface-2: #fffbf5;
--ui-surface-3: #fff3e0;
--ui-border: #ffe0b2;
--ui-border-strong: #fb923c;
--ui-text: #431407;
--ui-muted: #9a3412;
--ui-muted-soft: #c2793a;
--sidebar-bg: #1c0a00;
--sidebar-border: rgba(251,146,60,.1);
}
html[data-palette="ember"][data-theme="dark"] {
--ui-bg: #1c0a00;
--ui-surface: #2d1500;
--ui-surface-2: #381c00;
--ui-surface-3: #462400;
--ui-border: #5a3000;
--ui-border-strong: #8a4800;
--ui-text: #fff1e0;
--ui-muted: #e0956a;
--ui-muted-soft: #a06040;
--ui-primary: #fb923c;
--ui-primary-rgb: 251, 146, 60;
--ui-primary-2: #fbbf24;
--sidebar-bg: #100500;
--sidebar-border: rgba(251,146,60,.1);
}
html[data-palette="ember"][data-theme="light"] {
--sidebar-bg: #fff3e0;
--sidebar-border: rgba(249,115,22,.14);
}
/* Body */
html[data-palette="ember"][data-theme="light"] body { background: #fff7ed !important; color: #431407 !important; }
html[data-palette="ember"][data-theme="dark"] body { background: #1c0a00 !important; color: #fff1e0 !important; }
/* Ambient blobs */
html[data-palette="ember"][data-theme="light"] body::before {
background:
radial-gradient(ellipse 70% 54% at 6% 11%, rgba(249,115,22,.14) 0%, transparent 68%),
radial-gradient(ellipse 54% 60% at 92% 13%, rgba(234,179,8,.11) 0%, transparent 65%),
radial-gradient(ellipse 58% 46% at 53% 93%, rgba(239,68,68,.09) 0%, transparent 62%),
radial-gradient(ellipse 40% 35% at 20% 76%, rgba(249,115,22,.08) 0%, transparent 58%);
}
html[data-palette="ember"][data-theme="dark"] body::before {
background:
radial-gradient(ellipse 68% 52% at 5% 10%, rgba(249,115,22,.24) 0%, transparent 66%),
radial-gradient(ellipse 50% 60% at 93% 12%, rgba(234,179,8,.18) 0%, transparent 63%),
radial-gradient(ellipse 56% 46% at 51% 95%, rgba(239,68,68,.16) 0%, transparent 61%),
radial-gradient(ellipse 40% 33% at 18% 77%, rgba(251,146,60,.12) 0%, transparent 56%),
radial-gradient(ellipse 33% 27% at 81% 57%, rgba(234,179,8,.09) 0%, transparent 52%);
}
/* Cards */
html[data-palette="ember"][data-theme="light"] .card,
html[data-palette="ember"][data-theme="light"] .glass-card,
html[data-palette="ember"][data-theme="light"] .ai-support-card {
background: #ffffff !important;
border-color: #ffe0b2 !important;
}
html[data-palette="ember"][data-theme="dark"] .card,
html[data-palette="ember"][data-theme="dark"] .glass-card {
background: #2d1500 !important;
border-color: #5a3000 !important;
}
html[data-palette="ember"][data-theme="light"] .glass-card { background: rgba(255,255,255,.76) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important; }
html[data-palette="ember"][data-theme="dark"] .glass-card { background: rgba(45,21,0,.72) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important; }
/* Top menu */
html[data-palette="ember"][data-theme="light"] .top-menu-card {
background:
radial-gradient(circle at 8% 12%, rgba(249,115,22,.07), transparent 34%),
rgba(255,247,237,.93) !important;
border-color: rgba(249,115,22,.14) !important;
}
html[data-palette="ember"][data-theme="dark"] .top-menu-card {
background:
radial-gradient(circle at 8% 12%, rgba(251,146,60,.12), transparent 34%),
linear-gradient(135deg, #2d1500 0%, #1c0a00 100%) !important;
border-color: rgba(251,146,60,.16) !important;
}
/* Tech news */
html[data-palette="ember"][data-theme="light"] .tech-news-card {
background: #fff3e0 !important;
border-color: rgba(249,115,22,.15) !important;
}
html[data-palette="ember"] .tech-news-label {
color: #ea580c !important;
background: rgba(249,115,22,.1) !important;
border-color: rgba(249,115,22,.22) !important;
}
html[data-palette="ember"][data-theme="dark"] .tech-news-label {
color: #fb923c !important;
background: rgba(251,146,60,.12) !important;
border-color: rgba(251,146,60,.25) !important;
}
/* Hero banner */
html[data-palette="ember"] .hero {
background: linear-gradient(125deg, #ea580c, #f97316 55%, #d97706);
}
/* Panel hero */
html[data-palette="ember"][data-theme="light"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(249,115,22,.12), transparent 30%),
linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,.2));
}
html[data-palette="ember"][data-theme="dark"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(251,146,60,.18), transparent 34%),
linear-gradient(120deg, rgba(45,21,0,.85), rgba(28,10,0,.85));
}
/* Sidebar brand-wrap */
html[data-palette="ember"][data-theme="light"] .sidebar-brand-wrap {
background: #431407 !important;
border-bottom-color: rgba(255,255,255,.10) !important;
}
/* Sidebar nav — light mode */
html[data-palette="ember"][data-theme="light"] .sidebar-link { color: #431407 !important; }
html[data-palette="ember"][data-theme="light"] .sidebar-link:hover {
background: rgba(249,115,22,.09) !important;
color: #c2410c !important;
}
html[data-palette="ember"][data-theme="light"] .sidebar-link.active {
background: linear-gradient(135deg, #ea580c, #f97316) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(249,115,22,.3) !important;
}
html[data-palette="ember"][data-theme="light"] .sidebar-group-title {
color: rgba(249,115,22,.55) !important;
}
html[data-palette="ember"][data-theme="light"] .sidebar-submenu a { color: #7c2d12 !important; }
html[data-palette="ember"][data-theme="light"] .sidebar-submenu a:hover {
color: #ea580c !important;
background: rgba(249,115,22,.07) !important;
}
html[data-palette="ember"][data-theme="light"] .sidebar-user-card {
background: rgba(249,115,22,.07) !important;
border-color: rgba(249,115,22,.16) !important;
}
html[data-palette="ember"][data-theme="light"] .sidebar-user-role { color: #c2410c !important; }
html[data-palette="ember"][data-theme="light"] #mobileNavOffcanvas { background: #fff3e0 !important; }
/* Tables */
html[data-palette="ember"][data-theme="light"] .table-modern thead th,
html[data-palette="ember"][data-theme="light"] .table thead th {
background: rgba(249,115,22,.07) !important;
color: #7c2d12 !important;
}
/* Metric cards — accent token */
html[data-palette="ember"] .metric-server { --metric-accent: #7c3aed; --metric-accent-rgb: 124, 58, 237; }
/* Selector */
html[data-palette="ember"] .selector-card {
background: linear-gradient(130deg, #fff7ed, #fed7aa 45%, #fef3c7 100%);
border-color: #fb923c;
box-shadow: 0 2px 10px rgba(249,115,22,.10), 0 1px 3px rgba(249,115,22,.06);
}
html[data-palette="ember"] .selector-title { color: #7c2d12; }
html[data-palette="ember"] .selector-sub { color: #9a3412; }
/* Active-glow */
html[data-palette="ember"] .top-menu-links .btn.active-glow,
html[data-palette="ember"] .top-menu-actions .btn.active-glow {
box-shadow: 0 0 0 0.2rem rgba(249,115,22,.34), 0 10px 22px rgba(249,115,22,.3);
}
/* AI support */
html[data-palette="ember"] .ai-support-card {
background: linear-gradient(135deg, rgba(249,115,22,.1), rgba(234,179,8,.09));
}
html[data-palette="ember"] .ai-support-chip { border-color: rgba(249,115,22,.22); }
html[data-palette="ember"][data-theme="dark"] .ai-support-chip {
background: #2d1500;
border-color: rgba(251,146,60,.28);
}
/* Trend */
html[data-palette="ember"] .trend-period-btn-group .btn.active {
background: #f97316;
border-color: #f97316;
}
/* Selector – dark */
html[data-palette="ember"][data-theme="dark"] .selector-card {
background: linear-gradient(130deg, #2d1500, #381c00 45%, #462400 100%);
border-color: #8a4800;
box-shadow: 0 2px 10px rgba(249,115,22,.14), 0 1px 3px rgba(249,115,22,.08);
}
html[data-palette="ember"][data-theme="dark"] .selector-title { color: #fb923c; }
html[data-palette="ember"][data-theme="dark"] .selector-sub { color: #e0956a; }
/* Tables – dark */
html[data-palette="ember"][data-theme="dark"] .table-modern thead th,
html[data-palette="ember"][data-theme="dark"] .table thead th {
background: rgba(251,146,60,.1) !important;
color: #fb923c !important;
}
/* Sidebar nav — dark mode */
html[data-palette="ember"][data-theme="dark"] .sidebar-link { color: #e0956a !important; }
html[data-palette="ember"][data-theme="dark"] .sidebar-link:hover {
background: rgba(251,146,60,.12) !important;
color: #fed7aa !important;
}
html[data-palette="ember"][data-theme="dark"] .sidebar-link.active {
background: linear-gradient(135deg, #ea580c, #f97316) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(249,115,22,.35) !important;
}
html[data-palette="ember"][data-theme="dark"] .sidebar-group-title {
color: rgba(251,146,60,.45) !important;
}
html[data-palette="ember"][data-theme="dark"] .sidebar-submenu a { color: #a06040 !important; }
html[data-palette="ember"][data-theme="dark"] .sidebar-submenu a:hover {
color: #fb923c !important;
background: rgba(251,146,60,.1) !important;
}
html[data-palette="ember"][data-theme="dark"] .sidebar-user-card {
background: rgba(251,146,60,.1) !important;
border-color: rgba(251,146,60,.2) !important;
}
html[data-palette="ember"][data-theme="dark"] .sidebar-user-role { color: #fb923c !important; }
html[data-palette="ember"][data-theme="dark"] #mobileNavOffcanvas { background: #1c0a00 !important; }
/* Tech news card – dark */
html[data-palette="ember"][data-theme="dark"] .tech-news-card {
background: #2d1500 !important;
border-color: rgba(251,146,60,.18) !important;
}
/* Slate – dark selector + table (was missing) */
html[data-palette="slate"][data-theme="dark"] .selector-card {
background: linear-gradient(130deg, #1e293b, #1e293b 45%, #334155 100%);
border-color: #475569;
box-shadow: 0 2px 10px rgba(59,130,246,.14), 0 1px 3px rgba(59,130,246,.08);
}
html[data-palette="slate"][data-theme="dark"] .selector-title { color: #93c5fd; }
html[data-palette="slate"][data-theme="dark"] .selector-sub { color: #94a3b8; }
html[data-palette="slate"][data-theme="dark"] .table-modern thead th,
html[data-palette="slate"][data-theme="dark"] .table thead th {
background: rgba(96,165,250,.1) !important;
color: #93c5fd !important;
}
html[data-palette="slate"][data-theme="dark"] .tech-news-card {
background: #1e293b !important;
border-color: rgba(96,165,250,.18) !important;
}
/* ============================================================
LUMINESCENT — Deep navy command-center, cyan accent
Accent #00cfee · Light bg #eafbff · Dark bg #07101e
Designed to match a premium "management console" aesthetic.
============================================================ */
html[data-palette="luminescent"] {
--ui-primary: #00cfee;
--ui-primary-rgb: 0, 207, 238;
--ui-primary-2: #00d4a0;
--ui-danger: #ff5577;
--ui-warning: #f59e0b;
--ui-success: #00d4a0;
--ui-bg: #eafbff;
--ui-surface: #ffffff;
--ui-surface-2: #f0fdff;
--ui-surface-3: #e0f8ff;
--ui-border: #b8ecf8;
--ui-border-strong: #5dd8f0;
--ui-text: #03202e;
--ui-muted: #2a7a96;
--ui-muted-soft: #5dacc0;
--sidebar-bg: #051030;
--sidebar-border: rgba(0,207,238,.12);
}
html[data-palette="luminescent"][data-theme="dark"] {
--ui-bg: #07101e;
--ui-surface: #0c1828;
--ui-surface-2: #101e30;
--ui-surface-3: #152438;
--ui-border: #0e2035;
--ui-border-strong: #163050;
--ui-text: #cce4ff;
--ui-muted: #6090b0;
--ui-muted-soft: #3d6080;
--ui-primary: #00cfee;
--ui-primary-rgb: 0, 207, 238;
--ui-primary-2: #00d4a0;
--sidebar-bg: #040c18;
--sidebar-border: rgba(0,207,238,.10);
}
html[data-palette="luminescent"][data-theme="light"] {
--sidebar-bg: #051030;
--sidebar-border: rgba(0,207,238,.18);
}
/* Body */
html[data-palette="luminescent"][data-theme="light"] body {
background:
radial-gradient(circle at 10% 10%, rgba(0,207,238,.10), transparent 36%),
radial-gradient(circle at 90% 88%, rgba(0,212,160,.08), transparent 40%),
#eafbff !important;
color: #03202e !important;
}
html[data-palette="luminescent"][data-theme="dark"] body {
background:
radial-gradient(ellipse at 20% 0%, rgba(0,207,238,.07) 0%, transparent 55%),
radial-gradient(ellipse at 80% 100%, rgba(0,212,160,.04) 0%, transparent 55%),
#07101e !important;
color: #cce4ff !important;
}
/* Cards */
html[data-palette="luminescent"][data-theme="light"] .card,
html[data-palette="luminescent"][data-theme="light"] .glass-card,
html[data-palette="luminescent"][data-theme="light"] .ai-support-card {
background: #ffffff !important;
border-color: #b8ecf8 !important;
}
html[data-palette="luminescent"][data-theme="dark"] .card,
html[data-palette="luminescent"][data-theme="dark"] .glass-card {
background: #0c1828 !important;
border-color: #0e2035 !important;
box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(0,207,238,.06) !important;
}
/* Top menu */
html[data-palette="luminescent"][data-theme="light"] .top-menu-card {
background:
radial-gradient(circle at 8% 12%, rgba(0,207,238,.08), transparent 34%),
rgba(234,251,255,.96) !important;
border-color: rgba(0,207,238,.18) !important;
}
html[data-palette="luminescent"][data-theme="dark"] .top-menu-card {
background:
radial-gradient(circle at 8% 12%, rgba(0,207,238,.10), transparent 34%),
linear-gradient(135deg, #0a1a2e 0%, #07101e 100%) !important;
border-color: rgba(0,207,238,.14) !important;
box-shadow: 0 2px 16px rgba(0,0,0,.5), 0 1px 0 rgba(0,207,238,.12) inset !important;
}
/* Tech news */
html[data-palette="luminescent"][data-theme="light"] .tech-news-card {
background: #d8f8ff !important;
border-color: rgba(0,207,238,.18) !important;
}
html[data-palette="luminescent"] .tech-news-label {
color: #00cfee !important;
background: rgba(0,207,238,.10) !important;
border-color: rgba(0,207,238,.25) !important;
}
html[data-palette="luminescent"][data-theme="dark"] .tech-news-label {
color: #5de0f5 !important;
background: rgba(0,207,238,.12) !important;
border-color: rgba(0,207,238,.28) !important;
}
/* Hero banner */
html[data-palette="luminescent"] .hero {
background: linear-gradient(125deg, #006b8f, #00acd0 55%, #00cfee);
}
/* Panel hero */
html[data-palette="luminescent"][data-theme="light"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(0,207,238,.14), transparent 30%),
linear-gradient(120deg, rgba(255,255,255,.60), rgba(255,255,255,.25));
}
html[data-palette="luminescent"][data-theme="dark"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(0,207,238,.20), transparent 34%),
linear-gradient(120deg, rgba(12,24,40,.90), rgba(7,16,30,.90));
}
/* Sidebar brand-wrap */
html[data-palette="luminescent"][data-theme="light"] .sidebar-brand-wrap {
background: #03182c !important;
border-bottom-color: rgba(0,207,238,.18) !important;
}
html[data-palette="luminescent"][data-theme="dark"] .sidebar-brand-wrap {
background: #030d1c !important;
border-bottom-color: rgba(0,207,238,.14) !important;
}
/* Sidebar nav — light mode */
html[data-palette="luminescent"][data-theme="light"] .sidebar-link { color: #03202e !important; }
html[data-palette="luminescent"][data-theme="light"] .sidebar-link:hover {
background: rgba(0,207,238,.10) !important;
color: #007a96 !important;
}
html[data-palette="luminescent"][data-theme="light"] .sidebar-link.active {
background: linear-gradient(135deg, #006b8f, #00cfee) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(0,207,238,.30) !important;
}
html[data-palette="luminescent"][data-theme="light"] .sidebar-group-title {
color: rgba(0,207,238,.5) !important;
}
html[data-palette="luminescent"][data-theme="light"] .sidebar-submenu a { color: #2a7a96 !important; }
html[data-palette="luminescent"][data-theme="light"] .sidebar-submenu a:hover {
color: #00cfee !important;
background: rgba(0,207,238,.07) !important;
}
html[data-palette="luminescent"][data-theme="light"] .sidebar-user-card {
background: rgba(0,207,238,.07) !important;
border-color: rgba(0,207,238,.16) !important;
}
html[data-palette="luminescent"][data-theme="light"] .sidebar-user-role { color: #00acd0 !important; }
html[data-palette="luminescent"][data-theme="light"] #mobileNavOffcanvas { background: #eafbff !important; }
/* Sidebar nav — dark mode */
html[data-palette="luminescent"][data-theme="dark"] .sidebar-link { color: #7ab8d0 !important; }
html[data-palette="luminescent"][data-theme="dark"] .sidebar-link:hover {
background: rgba(0,207,238,.10) !important;
color: #a8dff0 !important;
}
html[data-palette="luminescent"][data-theme="dark"] .sidebar-link.active {
background: linear-gradient(135deg, #005a78, #007899) !important;
color: #00efff !important;
box-shadow: 0 0 0 1px rgba(0,207,238,.35), 0 4px 16px rgba(0,207,238,.20) !important;
}
html[data-palette="luminescent"][data-theme="dark"] .sidebar-group-title {
color: rgba(0,207,238,.35) !important;
}
html[data-palette="luminescent"][data-theme="dark"] .sidebar-submenu a { color: #3d6080 !important; }
html[data-palette="luminescent"][data-theme="dark"] .sidebar-submenu a:hover {
color: #7ab8d0 !important;
background: rgba(0,207,238,.08) !important;
}
html[data-palette="luminescent"][data-theme="dark"] .sidebar-user-card {
background: rgba(0,207,238,.08) !important;
border-color: rgba(0,207,238,.16) !important;
}
html[data-palette="luminescent"][data-theme="dark"] .sidebar-user-role { color: #00cfee !important; }
html[data-palette="luminescent"][data-theme="dark"] #mobileNavOffcanvas { background: #07101e !important; }
/* Tables — light */
html[data-palette="luminescent"][data-theme="light"] .table-modern thead th,
html[data-palette="luminescent"][data-theme="light"] .table thead th {
background: rgba(0,207,238,.07) !important;
color: #006b8f !important;
}
/* Tables — dark */
html[data-palette="luminescent"][data-theme="dark"] .table-modern thead th,
html[data-palette="luminescent"][data-theme="dark"] .table thead th {
background: rgba(0,207,238,.08) !important;
color: #5de0f5 !important;
}
html[data-palette="luminescent"][data-theme="dark"] .table-modern tbody tr:hover {
background: rgba(0,207,238,.07) !important;
}
/* Metric cards — accent token */
html[data-palette="luminescent"] .metric-server { --metric-accent: #00a882; --metric-accent-rgb: 0, 168, 130; }
/* Selector card */
html[data-palette="luminescent"][data-theme="light"] .selector-card {
background: linear-gradient(130deg, #eafbff, #d4f4ff 45%, #c2effd 100%);
border-color: #5dd8f0;
box-shadow: 0 2px 10px rgba(0,207,238,.10), 0 1px 3px rgba(0,207,238,.06);
}
html[data-palette="luminescent"][data-theme="light"] .selector-title { color: #006b8f; }
html[data-palette="luminescent"][data-theme="light"] .selector-sub { color: #2a7a96; }
html[data-palette="luminescent"][data-theme="dark"] .selector-card {
background: linear-gradient(130deg, #0c1828, #101e30 45%, #152438 100%);
border-color: #163050;
box-shadow: 0 2px 10px rgba(0,207,238,.08), 0 1px 3px rgba(0,207,238,.05);
}
html[data-palette="luminescent"][data-theme="dark"] .selector-title { color: #5de0f5; }
html[data-palette="luminescent"][data-theme="dark"] .selector-sub { color: #6090b0; }
/* Active-glow */
html[data-palette="luminescent"] .top-menu-links .btn.active-glow,
html[data-palette="luminescent"] .top-menu-actions .btn.active-glow {
box-shadow: 0 0 0 0.2rem rgba(0,207,238,.34), 0 10px 22px rgba(0,207,238,.28);
}
/* AI support */
html[data-palette="luminescent"] .ai-support-card {
background: linear-gradient(135deg, rgba(0,207,238,.10), rgba(0,212,160,.09));
}
html[data-palette="luminescent"] .ai-support-chip { border-color: rgba(0,207,238,.22); }
html[data-palette="luminescent"][data-theme="dark"] .ai-support-chip {
background: #0c1828;
border-color: rgba(0,207,238,.26);
}
/* Trend period */
html[data-palette="luminescent"] .trend-period-btn-group .btn.active {
background: #00cfee;
border-color: #00cfee;
color: #07101e;
}
/* Tech news card – dark */
html[data-palette="luminescent"][data-theme="dark"] .tech-news-card {
background: #0c1828 !important;
border-color: rgba(0,207,238,.14) !important;
}
/* Dark mode: extra glow on focused form inputs */
html[data-palette="luminescent"][data-theme="dark"] .form-control:focus,
html[data-palette="luminescent"][data-theme="dark"] .form-select:focus {
border-color: rgba(0,207,238,.60) !important;
box-shadow: 0 0 0 3px rgba(0,207,238,.18) !important;
}
/* Dark mode: icon-btn subtle glow */
html[data-palette="luminescent"][data-theme="dark"] .icon-btn:hover {
box-shadow: 0 3px 12px rgba(0,207,238,.18), 0 0 0 1px rgba(0,207,238,.20) !important;
}
/* ============================================================
VERDANT — Deep Forest Green (kurumsal koyu yeşil)
============================================================ */
html[data-palette="verdant"] {
--ui-primary: #059669;
--ui-primary-rgb: 5, 150, 105;
--ui-primary-2: #0d9488;
--ui-danger: #dc2626;
--ui-warning: #d97706;
--ui-success: #16a34a;
--ui-bg: #f0fdf4;
--ui-surface: #ffffff;
--ui-surface-2: #f0fdf4;
--ui-surface-3: #dcfce7;
--ui-border: #bbf7d0;
--ui-border-strong: #4ade80;
--ui-text: #052e16;
--ui-muted: #166534;
--ui-muted-soft: #15803d;
--sidebar-bg: #052e16;
--sidebar-border: rgba(5,150,105,.14);
}
html[data-palette="verdant"][data-theme="dark"] {
--ui-bg: #061a0e;
--ui-surface: #0a2414;
--ui-surface-2: #0e2e1a;
--ui-surface-3: #133820;
--ui-border: #0f3d1c;
--ui-border-strong: #1a5c2a;
--ui-text: #bbf7d0;
--ui-muted: #4ade80;
--ui-muted-soft: #22c55e;
--ui-primary: #34d399;
--ui-primary-rgb: 52, 211, 153;
--ui-primary-2: #2dd4bf;
--sidebar-bg: #040f08;
--sidebar-border: rgba(52,211,153,.10);
}
html[data-palette="verdant"][data-theme="light"] {
--sidebar-bg: #052e16;
--sidebar-border: rgba(5,150,105,.18);
}
/* Body */
html[data-palette="verdant"][data-theme="light"] body {
background:
radial-gradient(circle at 10% 10%, rgba(5,150,105,.10), transparent 36%),
radial-gradient(circle at 90% 88%, rgba(13,148,136,.07), transparent 40%),
#f0fdf4 !important;
color: #052e16 !important;
}
html[data-palette="verdant"][data-theme="dark"] body {
background:
radial-gradient(ellipse at 20% 0%, rgba(52,211,153,.07) 0%, transparent 55%),
radial-gradient(ellipse at 80% 100%, rgba(13,148,136,.04) 0%, transparent 55%),
#061a0e !important;
color: #bbf7d0 !important;
}
/* Cards */
html[data-palette="verdant"][data-theme="light"] .card,
html[data-palette="verdant"][data-theme="light"] .glass-card,
html[data-palette="verdant"][data-theme="light"] .ai-support-card {
background: #ffffff !important;
border-color: #bbf7d0 !important;
}
html[data-palette="verdant"][data-theme="dark"] .card,
html[data-palette="verdant"][data-theme="dark"] .glass-card {
background: #0a2414 !important;
border-color: #0f3d1c !important;
box-shadow: 0 4px 24px rgba(0,0,0,.40), 0 0 0 1px rgba(52,211,153,.06) !important;
}
/* Top menu */
html[data-palette="verdant"][data-theme="light"] .top-menu-card {
background:
radial-gradient(circle at 8% 12%, rgba(5,150,105,.08), transparent 34%),
rgba(240,253,244,.96) !important;
border-color: rgba(5,150,105,.18) !important;
}
html[data-palette="verdant"][data-theme="dark"] .top-menu-card {
background:
radial-gradient(circle at 8% 12%, rgba(52,211,153,.09), transparent 34%),
linear-gradient(135deg, #0a2414 0%, #061a0e 100%) !important;
border-color: rgba(52,211,153,.12) !important;
box-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 0 rgba(52,211,153,.10) inset !important;
}
/* Tech news */
html[data-palette="verdant"][data-theme="light"] .tech-news-card {
background: #dcfce7 !important;
border-color: rgba(5,150,105,.18) !important;
}
html[data-palette="verdant"] .tech-news-label {
color: #059669 !important;
background: rgba(5,150,105,.10) !important;
border-color: rgba(5,150,105,.25) !important;
}
html[data-palette="verdant"][data-theme="dark"] .tech-news-label {
color: #6ee7b7 !important;
background: rgba(52,211,153,.12) !important;
border-color: rgba(52,211,153,.28) !important;
}
/* Hero banner */
html[data-palette="verdant"] .hero {
background: linear-gradient(125deg, #064e3b, #047857 55%, #059669);
}
/* Panel hero */
html[data-palette="verdant"][data-theme="light"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(5,150,105,.14), transparent 30%),
linear-gradient(120deg, rgba(255,255,255,.60), rgba(255,255,255,.25));
}
html[data-palette="verdant"][data-theme="dark"] .panel-hero {
background:
radial-gradient(circle at 0% 0%, rgba(52,211,153,.18), transparent 34%),
linear-gradient(120deg, rgba(10,36,20,.90), rgba(6,26,14,.90));
}
/* Sidebar brand-wrap */
html[data-palette="verdant"][data-theme="light"] .sidebar-brand-wrap {
background: #021a0a !important;
border-bottom-color: rgba(52,211,153,.18) !important;
}
html[data-palette="verdant"][data-theme="dark"] .sidebar-brand-wrap {
background: #020d06 !important;
border-bottom-color: rgba(52,211,153,.12) !important;
}
/* Brand-wrap text — light mode has dark green bg so text must be light */
html[data-palette="verdant"][data-theme="light"] .sidebar-brand-text-main-large { color: #d1fae5 !important; }
html[data-palette="verdant"][data-theme="light"] .sidebar-brand-version { color: #6ee7b7 !important; }
html[data-palette="verdant"][data-theme="light"] .sidebar-brand-name { color: #d1fae5 !important; }
html[data-palette="verdant"][data-theme="light"] .sidebar-brand-sub { color: #6ee7b7 !important; }
html[data-palette="verdant"][data-theme="light"] .sidebar-head-icon { color: #34d399 !important; opacity: 1 !important; }
html[data-palette="verdant"][data-theme="light"] .sidebar-title { color: #d1fae5 !important; }
/* Toggle-mini button */
html[data-palette="verdant"][data-theme="light"] .sidebar-toggle-mini {
background: rgba(5,150,105,.08) !important;
border-color: rgba(5,150,105,.22) !important;
color: #064e3b !important;
}
/* Sidebar nav — light mode */
html[data-palette="verdant"][data-theme="light"] .sidebar-link { color: #052e16 !important; }
html[data-palette="verdant"][data-theme="light"] .sidebar-link:hover {
background: rgba(5,150,105,.09) !important;
color: #059669 !important;
}
html[data-palette="verdant"][data-theme="light"] .sidebar-link.active {
background: linear-gradient(135deg, #064e3b, #059669) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(5,150,105,.32) !important;
}
html[data-palette="verdant"][data-theme="light"] .sidebar-group-title {
color: rgba(5,150,105,.55) !important;
}
html[data-palette="verdant"][data-theme="light"] .sidebar-submenu a { color: #064e3b !important; }
html[data-palette="verdant"][data-theme="light"] .sidebar-submenu a:hover {
color: #059669 !important;
background: rgba(5,150,105,.07) !important;
}
html[data-palette="verdant"][data-theme="light"] .sidebar-user-card {
background: rgba(5,150,105,.07) !important;
border-color: rgba(5,150,105,.16) !important;
}
html[data-palette="verdant"][data-theme="light"] .sidebar-user-role { color: #059669 !important; }
html[data-palette="verdant"][data-theme="light"] #mobileNavOffcanvas { background: #f0fdf4 !important; }
/* Sidebar nav — dark mode */
html[data-palette="verdant"][data-theme="dark"] .sidebar-link { color: #4ade80 !important; }
html[data-palette="verdant"][data-theme="dark"] .sidebar-link:hover {
background: rgba(52,211,153,.10) !important;
color: #86efac !important;
}
html[data-palette="verdant"][data-theme="dark"] .sidebar-link.active {
background: linear-gradient(135deg, #064e3b, #065f46) !important;
color: #6ee7b7 !important;
box-shadow: 0 0 0 1px rgba(52,211,153,.30), 0 4px 16px rgba(52,211,153,.18) !important;
}
html[data-palette="verdant"][data-theme="dark"] .sidebar-group-title {
color: rgba(52,211,153,.40) !important;
}
html[data-palette="verdant"][data-theme="dark"] .sidebar-submenu a {
color: #22c55e !important;
background: rgba(52,211,153,.07) !important;
border-color: rgba(52,211,153,.18) !important;
}
html[data-palette="verdant"][data-theme="dark"] .sidebar-submenu a:hover {
color: #86efac !important;
background: rgba(52,211,153,.14) !important;
border-color: rgba(52,211,153,.30) !important;
}
html[data-palette="verdant"][data-theme="dark"] .sidebar-user-card {
background: rgba(52,211,153,.08) !important;
border-color: rgba(52,211,153,.16) !important;
}
html[data-palette="verdant"][data-theme="dark"] .sidebar-user-role { color: #34d399 !important; }
html[data-palette="verdant"][data-theme="dark"] #mobileNavOffcanvas { background: #061a0e !important; }
/* Tables — light */
html[data-palette="verdant"][data-theme="light"] .table-modern thead th,
html[data-palette="verdant"][data-theme="light"] .table thead th {
background: rgba(5,150,105,.07) !important;
color: #064e3b !important;
}
/* Tables — dark */
html[data-palette="verdant"][data-theme="dark"] .table-modern thead th,
html[data-palette="verdant"][data-theme="dark"] .table thead th {
background: rgba(52,211,153,.08) !important;
color: #6ee7b7 !important;
}
html[data-palette="verdant"][data-theme="dark"] .table-modern tbody tr:hover {
background: rgba(52,211,153,.07) !important;
}
/* Metric cards — accent token */
html[data-palette="verdant"] .metric-server { --metric-accent: #0d9488; --metric-accent-rgb: 13, 148, 136; }
/* Selector card */
html[data-palette="verdant"][data-theme="light"] .selector-card {
background: linear-gradient(130deg, #f0fdf4, #dcfce7 45%, #bbf7d0 100%);
border-color: #4ade80;
box-shadow: 0 2px 10px rgba(5,150,105,.10), 0 1px 3px rgba(5,150,105,.06);
}
html[data-palette="verdant"][data-theme="light"] .selector-title { color: #064e3b; }
html[data-palette="verdant"][data-theme="light"] .selector-sub { color: #166534; }
html[data-palette="verdant"][data-theme="dark"] .selector-card {
background: linear-gradient(130deg, #0a2414, #0e2e1a 45%, #133820 100%);
border-color: #1a5c2a;
box-shadow: 0 2px 10px rgba(52,211,153,.08), 0 1px 3px rgba(52,211,153,.04);
}
html[data-palette="verdant"][data-theme="dark"] .selector-title { color: #6ee7b7; }
html[data-palette="verdant"][data-theme="dark"] .selector-sub { color: #4ade80; }
/* Active-glow */
html[data-palette="verdant"] .top-menu-links .btn.active-glow,
html[data-palette="verdant"] .top-menu-actions .btn.active-glow {
box-shadow: 0 0 0 0.2rem rgba(5,150,105,.32), 0 10px 22px rgba(5,150,105,.24);
}
/* AI support */
html[data-palette="verdant"] .ai-support-card {
background: linear-gradient(135deg, rgba(5,150,105,.10), rgba(13,148,136,.09));
}
html[data-palette="verdant"] .ai-support-chip { border-color: rgba(5,150,105,.22); }
html[data-palette="verdant"][data-theme="dark"] .ai-support-chip {
background: #0a2414;
border-color: rgba(52,211,153,.26);
}
/* Trend period */
html[data-palette="verdant"] .trend-period-btn-group .btn.active {
background: #059669;
border-color: #059669;
color: #f0fdf4;
}
html[data-palette="verdant"][data-theme="dark"] .trend-period-btn-group .btn.active {
background: #34d399;
border-color: #34d399;
color: #061a0e;
}
/* Tech news card – dark */
html[data-palette="verdant"][data-theme="dark"] .tech-news-card {
background: #0a2414 !important;
border-color: rgba(52,211,153,.12) !important;
}
/* Dark mode: extra glow on focused form inputs */
html[data-palette="verdant"][data-theme="dark"] .form-control:focus,
html[data-palette="verdant"][data-theme="dark"] .form-select:focus {
border-color: rgba(52,211,153,.60) !important;
box-shadow: 0 0 0 3px rgba(52,211,153,.16) !important;
}
/* Dark mode: icon-btn subtle glow */
html[data-palette="verdant"][data-theme="dark"] .icon-btn:hover {
box-shadow: 0 3px 12px rgba(52,211,153,.16), 0 0 0 1px rgba(52,211,153,.18) !important;
}
/* ════════════ END panel-themes.css MERGED ════════════ */
/* ════════════════════════════════════════════════════════════════
MERGED CONTENT FROM panel-visual.css (Sprint 2 konsolidasyonu)
Visual layer (transitions, hover effects, polish) — cascade sırası korundu.
panel-visual.css'in HTML'den linki kaldırıldı, dosya .bak olarak saklı.
════════════════════════════════════════════════════════════════ */
/* ============================================================
panel-visual.css — Enhanced visual layer for Teknik Danışman
============================================================ */
/* ─── Smooth Theme/Palette Transition ─────────────────────── */
/* Tema veya palet değiştiğinde renk geçişi yumuşak olsun */
html {
transition:
background-color 0.28s ease,
color 0.28s ease;
}
body,
.card, .glass-card,
.top-menu-card,
.left-sidebar-card, .top-menu-brand, .top-menu-user,
.panel-hero, .hero,
.table-modern thead th,
.form-control, .form-select,
.btn-outline-secondary, .btn-outline-primary {
transition:
background-color 0.28s ease,
border-color 0.28s ease,
color 0.18s ease,
box-shadow 0.22s ease !important;
}
/* ─── Card Hover Lift ──────────────────────────────────────── */
.card:not(.top-menu-card):not(.left-sidebar-card) {
transition:
transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.22s ease,
background-color 0.28s ease !important;
}
.card:not(.top-menu-card):not(.left-sidebar-card):hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(var(--ui-primary-rgb, 15,108,189), 0.10), 0 2px 6px rgba(0,0,0,.05);
border-color: rgba(var(--ui-primary-rgb, 15,108,189), 0.2);
}
html[data-theme="dark"] .card:not(.top-menu-card):not(.left-sidebar-card):hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.24), 0 0 0 1px rgba(var(--ui-primary-rgb), 0.18);
border-color: rgba(var(--ui-primary-rgb), 0.28);
}
/* Metric kart hover */
.metric-card {
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.metric-card:hover {
transform: translateY(-3px) scale(1.01);
box-shadow: 0 10px 28px rgba(var(--metric-accent-rgb, var(--ui-primary-rgb)), 0.18),
0 2px 8px rgba(0,0,0,.06) !important;
}
/* ─── Page Load Progress Bar ──────────────────────────────── */
#page-progress {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
height: 3px;
width: 0%;
background: linear-gradient(90deg, var(--ui-primary, #4f7cff), #7c3aed);
transition: width 0.25s ease, opacity 0.4s ease;
pointer-events: none;
opacity: 1;
border-radius: 0 2px 2px 0;
box-shadow: 0 0 8px color-mix(in srgb, var(--ui-primary, #4f7cff) 60%, transparent);
}
#page-progress.done {
width: 100% !important;
opacity: 0;
transition: width 0.2s ease, opacity 0.5s ease 0.1s;
}
/* ─── Focus Visible Rings ──────────────────────────────────── */
:focus-visible {
outline: 2px solid var(--ui-primary, #4f7cff);
outline-offset: 2px;
border-radius: var(--ui-radius-sm, 4px);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary, #4f7cff) 25%, transparent);
}
/* ─── Custom Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track {
background: var(--ui-bg, #f4f5f7);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--ui-border, #d1d5db) 80%, var(--ui-primary, #4f7cff) 20%);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--ui-primary, #4f7cff);
}
[data-theme="dark"] ::-webkit-scrollbar-track {
background: var(--ui-bg, #1a1d23);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: var(--ui-border-strong, #3a3f4b);
}
/* ─── CSS-Only Tooltips ────────────────────────────────────── */
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(3px) scale(0.95);
background: var(--ui-text, #1a1d27);
color: var(--ui-bg, #f0f2f5);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
padding: 4px 9px;
border-radius: 5px;
pointer-events: none;
opacity: 0;
filter: blur(1px);
transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
z-index: 1080;
box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
[data-tooltip]::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%) translateY(2px) scale(0.95);
border: 5px solid transparent;
border-top-color: var(--ui-text, #1a1d27);
pointer-events: none;
opacity: 0;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 1080;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
opacity: 1;
filter: blur(0);
transform: translateX(-50%) translateY(0) scale(1);
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
/* Tooltip below variant */
[data-tooltip-pos="below"]::after {
bottom: auto;
top: calc(100% + 6px);
}
[data-tooltip-pos="below"]::before {
bottom: auto;
top: calc(100% + 2px);
border-top-color: transparent;
border-bottom-color: var(--ui-text, #1a1d27);
}
/* Tooltips disabled */
[data-tooltip]::before,
[data-tooltip]::after {
display: none !important;
}
html[data-help-tips="off"] [data-tooltip]::before,
html[data-help-tips="off"] [data-tooltip]::after {
display: none !important;
}
/* ─── Skeleton Loaders ─────────────────────────────────────── */
@keyframes skeleton-shimmer {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
var(--ui-border, #e5e7eb) 25%,
color-mix(in srgb, var(--ui-border, #e5e7eb) 50%, white) 50%,
var(--ui-border, #e5e7eb) 75%
);
background-size: 800px 100%;
animation: skeleton-shimmer 1.4s infinite linear;
border-radius: var(--ui-radius-sm, 4px);
color: transparent !important;
user-select: none;
pointer-events: none;
}
.skeleton * { visibility: hidden; }
.skeleton-text {
height: 0.85rem;
border-radius: 3px;
margin-bottom: 0.45rem;
}
.skeleton-text:last-child { width: 70%; }
.skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
}
.skeleton-card {
height: 90px;
border-radius: var(--ui-radius, 10px);
}
.skeleton-row {
height: 2.4rem;
border-radius: var(--ui-radius-sm, 4px);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .skeleton {
background: linear-gradient(
90deg,
#2a2d35 25%,
#353840 50%,
#2a2d35 75%
);
background-size: 800px 100%;
}
/* ─── Enhanced Form Validation States ─────────────────────── */
.form-control.is-valid,
.form-select.is-valid {
border-color: var(--bs-success, #198754);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
padding-right: calc(1.5em + .75rem);
}
.form-control.is-invalid,
.form-select.is-invalid {
border-color: var(--bs-danger, #dc3545);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
padding-right: calc(1.5em + .75rem);
animation: shake 0.35s ease;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(3px); }
}
.invalid-feedback {
display: block;
font-size: 0.78rem;
color: var(--bs-danger, #dc3545);
margin-top: 0.2rem;
}
.valid-feedback {
display: block;
font-size: 0.78rem;
color: var(--bs-success, #198754);
margin-top: 0.2rem;
}
/* ─── Card Hover Lift Effect ───────────────────────────────── */
.card {
transition: box-shadow 0.22s ease, transform 0.22s ease;
will-change: transform;
}
.card-lift:hover,
.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
}
[data-theme="dark"] .card-lift:hover,
[data-theme="dark"] .stat-card:hover {
box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
}
/* ─── Metric Card Visual Enhancements ──────────────────────── */
.metric-card {
transition: transform 0.22s cubic-bezier(.22,.68,0,1.1), box-shadow 0.22s ease;
will-change: transform;
cursor: default;
}
.metric-card:hover {
transform: translateY(-4px) scale(1.012);
box-shadow: 0 10px 28px rgba(var(--metric-accent-rgb, var(--ui-primary-rgb)), 0.18),
0 2px 8px rgba(0,0,0,.06);
}
[data-theme="dark"] .metric-card:hover {
box-shadow: 0 10px 28px rgba(var(--metric-accent-rgb, var(--ui-primary-rgb)), 0.28),
0 2px 8px rgba(0,0,0,.22);
}
.metric-col {
transition: z-index 0s;
}
.metric-col:hover {
z-index: 2;
position: relative;
}
/* Delta badges — panel-modern.css'teki tanım yeterli, burada override yok */
/* Mail KPI cards */
.mail-kpi {
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mail-kpi:hover {
transform: translateY(-2px);
}
/* Panel surface cards get subtle hover */
.panel-surface {
transition: box-shadow 0.2s ease;
}
.panel-surface:hover {
box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
[data-theme="dark"] .panel-surface:hover {
box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
/* ─── Stat Cards ───────────────────────────────────────────── */
.stat-card {
border-radius: var(--ui-radius, 10px);
border: 1px solid var(--ui-border, #e5e7eb);
background: var(--ui-surface, #fff);
padding: 1rem 1.2rem;
display: flex;
align-items: center;
gap: 0.85rem;
cursor: default;
}
.stat-card .stat-icon {
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
background: color-mix(in srgb, var(--ui-primary, #4f7cff) 12%, transparent);
color: var(--ui-primary, #4f7cff);
}
.stat-card .stat-value {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.1;
color: var(--ui-text, #1a1d27);
}
.stat-card .stat-label {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ui-muted, #6b7280);
margin-top: 0.1rem;
}
/* ─── Empty State ──────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: 3rem 1.5rem;
color: var(--ui-muted, #6b7280);
}
.empty-state .empty-icon {
font-size: 3rem;
opacity: 0.35;
display: block;
margin-bottom: 0.75rem;
}
.empty-state h5 {
font-size: 0.95rem;
font-weight: 600;
color: var(--ui-text, #374151);
margin-bottom: 0.3rem;
}
.empty-state p {
font-size: 0.82rem;
margin: 0;
}
/* ─── Table Enhancements ───────────────────────────────────── */
.table-responsive {
border-radius: var(--ui-radius, 10px);
overflow: hidden;
}
.table > tbody > tr {
transition: background 0.13s ease;
}
/* Row highlight on click (JS adds .row-flash) */
@keyframes row-flash {
0% { background: color-mix(in srgb, var(--ui-primary, #4f7cff) 18%, transparent); }
100% { background: transparent; }
}
tr.row-flash {
animation: row-flash 0.6s ease forwards;
}
/* ─── Badge Variants ───────────────────────────────────────── */
.badge-soft-primary {
background: color-mix(in srgb, var(--ui-primary, #4f7cff) 14%, transparent);
color: var(--ui-primary, #4f7cff);
border-radius: 20px;
padding: 3px 9px;
font-size: 0.72rem;
font-weight: 600;
}
.badge-soft-success {
background: color-mix(in srgb, #198754 14%, transparent);
color: #198754;
border-radius: 20px;
padding: 3px 9px;
font-size: 0.72rem;
font-weight: 600;
}
.badge-soft-danger {
background: color-mix(in srgb, #dc3545 14%, transparent);
color: #dc3545;
border-radius: 20px;
padding: 3px 9px;
font-size: 0.72rem;
font-weight: 600;
}
.badge-soft-warning {
background: color-mix(in srgb, #f59e0b 16%, transparent);
color: #b45309;
border-radius: 20px;
padding: 3px 9px;
font-size: 0.72rem;
font-weight: 600;
}
.badge-soft-secondary {
background: color-mix(in srgb, #6b7280 14%, transparent);
color: #6b7280;
border-radius: 20px;
padding: 3px 9px;
font-size: 0.72rem;
font-weight: 600;
}
[data-theme="dark"] .badge-soft-warning { color: #fbbf24; }
/* ─── Inline Action Buttons ────────────────────────────────── */
.btn-icon {
width: 30px;
height: 30px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
font-size: 0.85rem;
transition: background 0.15s, transform 0.12s;
}
.btn-icon:hover {
transform: scale(1.08);
}
/* ─── Password Strength Meter ──────────────────────────────── */
.pw-strength-bar {
height: 4px;
border-radius: 2px;
background: var(--ui-border, #e5e7eb);
margin-top: 5px;
overflow: hidden;
}
.pw-strength-fill {
height: 100%;
border-radius: 2px;
transition: width 0.3s ease, background 0.3s ease;
width: 0%;
}
.pw-strength-fill[data-level="1"] { width: 25%; background: #ef4444; }
.pw-strength-fill[data-level="2"] { width: 50%; background: #f59e0b; }
.pw-strength-fill[data-level="3"] { width: 75%; background: #3b82f6; }
.pw-strength-fill[data-level="4"] { width: 100%; background: #10b981; }
.pw-strength-label {
font-size: 0.7rem;
font-weight: 600;
margin-top: 3px;
color: var(--ui-muted, #6b7280);
}
/* soft-enter tanımı dosya sonundaki ENHANCED PAGE TRANSITIONS bölümünde */
/* ─── Modal Enhancement ────────────────────────────────────── */
.modal-content {
border: 1px solid var(--ui-border, #e5e7eb);
border-radius: var(--ui-radius, 10px);
box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="dark"] .modal-content {
background: var(--ui-surface, #23262e);
border-color: #3a3f4b;
}
/* ─── Alert Enhancement ────────────────────────────────────── */
.alert {
border-left: 4px solid transparent;
border-radius: var(--ui-radius-sm, 6px);
font-size: 0.855rem;
}
.alert-success { border-left-color: #198754; }
.alert-danger { border-left-color: #dc3545; }
.alert-warning { border-left-color: #f59e0b; }
.alert-info { border-left-color: var(--ui-primary, #4f7cff); }
/* ─── Pagination Enhancement ───────────────────────────────── */
.pagination .page-link {
border-radius: 6px !important;
margin: 0 1px;
min-width: 34px;
text-align: center;
font-size: 0.82rem;
font-weight: 500;
border-color: var(--ui-border, #e5e7eb);
color: var(--ui-text, #374151);
transition: background 0.15s, color 0.15s;
}
.pagination .page-item.active .page-link {
background: var(--ui-primary, #4f7cff);
border-color: var(--ui-primary, #4f7cff);
}
.pagination .page-link:hover {
background: color-mix(in srgb, var(--ui-primary, #4f7cff) 12%, transparent);
color: var(--ui-primary, #4f7cff);
}
/* ─── Dashboard Hero Greeting ──────────────────────────────── */
.dash-greeting-strip {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-radius: var(--ui-radius, 10px);
background: linear-gradient(120deg,
color-mix(in srgb, var(--ui-primary, #4f7cff) 10%, var(--ui-surface, #fff)) 0%,
var(--ui-surface, #fff) 100%
);
border: 1px solid color-mix(in srgb, var(--ui-primary, #4f7cff) 18%, var(--ui-border, #e5e7eb));
margin-bottom: 1rem;
}
[data-theme="dark"] .dash-greeting-strip {
background: linear-gradient(120deg,
color-mix(in srgb, var(--ui-primary, #4f7cff) 12%, #23262e) 0%,
#23262e 100%
);
border-color: color-mix(in srgb, var(--ui-primary, #4f7cff) 22%, #3a3f4b);
}
.dash-greeting-left {
display: flex;
align-items: center;
gap: 1.1rem;
}
.dash-greeting-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ui-primary, #4f7cff), #7c3aed);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.55rem;
font-weight: 700;
flex-shrink: 0;
letter-spacing: -0.03em;
overflow: hidden;
position: relative;
}
.dash-greeting-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dash-greeting-avatar-photo span {
display: none;
}
.dash-greeting-avatar-photo.is-fallback {
display: flex;
}
.dash-greeting-avatar-photo.is-fallback span {
display: inline;
}
.dash-greeting-text .greeting-title {
font-size: 1rem;
font-weight: 700;
color: var(--ui-text, #1a1d27);
line-height: 1.2;
}
.dash-greeting-text .greeting-userline {
display: flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.15rem;
flex-wrap: wrap;
}
.dash-greeting-text .greeting-user-name {
font-size: 1.08rem;
font-weight: 800;
color: var(--ui-text, #1a1d27);
line-height: 1.1;
}
.dash-greeting-text .greeting-user-role {
display: inline-flex;
align-items: center;
padding: 0.16rem 0.5rem;
border-radius: 999px;
background: rgba(var(--ui-primary-rgb, 15, 108, 189), 0.12);
color: var(--ui-primary, #4f7cff);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
}
.dash-greeting-text .greeting-sub {
font-size: 0.76rem;
color: var(--ui-muted, #6b7280);
margin-top: 0.22rem;
}
.dash-summary-chips {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
align-items: center;
}
.dash-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
}
.dash-chip-danger { background: color-mix(in srgb, #dc3545 14%, transparent); color: #dc3545; }
.dash-chip-warning { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.dash-chip-primary { background: color-mix(in srgb, var(--ui-primary, #4f7cff) 14%, transparent); color: var(--ui-primary, #4f7cff); }
.dash-chip-success { background: color-mix(in srgb, #10b981 14%, transparent); color: #065f46; }
.dash-chip-muted { background: color-mix(in srgb, #6b7280 12%, transparent); color: #4b5563; }
[data-theme="dark"] .dash-chip-muted { color: #94a3b8; }
[data-theme="dark"] .dash-greeting-text .greeting-user-name { color: #eef4ff; }
[data-theme="dark"] .dash-greeting-text .greeting-user-role {
background: rgba(110, 168, 254, 0.16);
color: #a9d0ff;
}
[data-theme="dark"] .dash-chip-warning { color: #fbbf24; }
[data-theme="dark"] .dash-chip-success { color: #34d399; }
/* ─── Dashboard Critical Table ─────────────────────────────── */
.tbl-critical tr.row-urgent td:first-child {
border-left: 3px solid #dc3545;
}
.tbl-critical tr.row-warn td:first-child {
border-left: 3px solid #f59e0b;
}
.tbl-critical tr.row-info td:first-child {
border-left: 3px solid var(--ui-primary, #4f7cff);
}
.tbl-critical tr.row-urgent {
background: color-mix(in srgb, #dc3545 5%, transparent) !important;
}
.tbl-critical .type-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 5px;
font-size: 0.78rem;
margin-right: 5px;
flex-shrink: 0;
}
.tbl-critical .type-icon-license { background: color-mix(in srgb, #0a7ea4 15%, transparent); color: #0a7ea4; }
.tbl-critical .type-icon-service { background: color-mix(in srgb, #1f9d61 15%, transparent); color: #1f9d61; }
.tbl-critical .type-icon-server { background: color-mix(in srgb, #7352ff 15%, transparent); color: #7352ff; }
.tbl-critical td {
vertical-align: middle;
}
/* ─── Dashboard Payments Table ─────────────────────────────── */
.tbl-payments tr.row-urgent td:first-child { border-left: 3px solid #dc3545; }
.tbl-payments tr.row-warn td:first-child { border-left: 3px solid #f59e0b; }
.tbl-payments tr.row-planned td:first-child { border-left: 3px solid #10b981; }
.tbl-payments tr.row-urgent {
background: color-mix(in srgb, #dc3545 5%, transparent) !important;
}
.tbl-payments tfoot tr {
font-weight: 700;
background: color-mix(in srgb, var(--ui-primary, #4f7cff) 8%, transparent);
}
.tbl-payments td { vertical-align: middle; }
/* ─── Timeline Items (Customer Portal) ─────────────────────── */
.timeline-item {
border-left: 3px solid var(--ui-border, #e5e7eb);
padding-left: 0.85rem;
position: relative;
margin-bottom: 0.6rem;
transition: border-color 0.15s;
}
.timeline-item.urgent { border-left-color: #dc3545; }
.timeline-item.warning { border-left-color: #f59e0b; }
.timeline-item.info { border-left-color: var(--ui-primary, #4f7cff); }
.timeline-item::before {
content: '';
position: absolute;
left: -5px;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
opacity: 0.7;
}
/* ─── Count-Up Number (Metric Cards) ───────────────────────── */
.metric-value[data-countup] {
transition: none;
}
/* ─── Chart Loading Skeleton ────────────────────────────────── */
.chart-wrap.loading canvas {
display: none;
}
.chart-wrap.loading::after {
content: '';
display: block;
height: 180px;
border-radius: var(--ui-radius-sm, 4px);
}
.chart-wrap.loading {
position: relative;
}
.chart-wrap.loading::after {
background: linear-gradient(90deg, var(--ui-border, #e5e7eb) 25%, color-mix(in srgb, var(--ui-border, #e5e7eb) 50%, white) 50%, var(--ui-border, #e5e7eb) 75%);
background-size: 800px 100%;
animation: skeleton-shimmer 1.4s infinite linear;
}
/* ─── Confirm Modal ────────────────────────────────────────── */
.td-confirm-content {
border-radius: 16px;
border: 1px solid var(--ui-border, #e5e7eb);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="dark"] .td-confirm-content {
background: #23262e;
border-color: #3a3f4b;
box-shadow: 0 4px 20px rgba(0,0,0,.36), 0 1px 4px rgba(0,0,0,.20);
color: #e2e8f0;
}
[data-theme="dark"] #tdConfirmModal .modal-content {
background: #23262e;
border-color: #3a3f4b;
color: #e2e8f0;
}
[data-theme="dark"] #tdConfirmModal .modal-backdrop {
background-color: rgba(0,0,0,.7);
}
[data-theme="dark"] .td-confirm-title {
color: #f1f5f9;
}
[data-theme="dark"] .td-confirm-sub {
color: #94a3b8;
}
[data-theme="dark"] .td-confirm-icon {
background: rgba(220, 53, 69, .2);
}
.td-confirm-body {
text-align: center;
padding: 2rem 1.5rem 1rem;
}
.td-confirm-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: color-mix(in srgb, #dc3545 12%, transparent);
color: #dc3545;
font-size: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.td-confirm-title {
font-size: 1rem;
font-weight: 700;
color: var(--ui-text, #1a1d27);
margin-bottom: 0.35rem;
}
.td-confirm-sub {
font-size: 0.82rem;
color: var(--ui-muted, #6b7280);
}
.td-confirm-footer {
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.5rem 1.25rem;
border-top: 1px solid var(--ui-border, #e5e7eb);
background: color-mix(in srgb, var(--ui-bg, #f4f5f7) 60%, transparent);
}
[data-theme="dark"] .td-confirm-footer {
background: #1e2028;
border-top-color: #3a3f4b;
}
/* ─── Back to Top Button ────────────────────────────────────── */
.back-to-top-btn {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 1050;
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid var(--ui-border, #e5e7eb);
background: var(--ui-surface, #fff);
color: var(--ui-muted, #6b7280);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
cursor: pointer;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.25s, transform 0.25s, background 0.15s, color 0.15s;
pointer-events: none;
}
.back-to-top-btn.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.back-to-top-btn:hover {
background: var(--ui-primary, #4f7cff);
color: white;
border-color: var(--ui-primary, #4f7cff);
}
[data-theme="dark"] .back-to-top-btn {
background: #2a2d35;
border-color: #3a3f4b;
color: #9aa3b0;
}
/* ─── Keyboard Shortcuts Overlay ────────────────────────────── */
.sc-overlay {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(0,0,0,.45);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
backdrop-filter: blur(3px);
}
.sc-overlay.active {
opacity: 1;
pointer-events: auto;
}
.sc-panel {
background: var(--ui-surface, #fff);
border: 1px solid var(--ui-border, #e5e7eb);
border-radius: 16px;
width: 360px;
max-width: calc(100vw - 2rem);
box-shadow: 0 24px 64px rgba(0,0,0,.22);
overflow: hidden;
transform: scale(0.95);
transition: transform 0.2s;
}
.sc-overlay.active .sc-panel {
transform: scale(1);
}
[data-theme="dark"] .sc-panel {
background: #23262e;
border-color: #3a3f4b;
}
.sc-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem 0.75rem;
border-bottom: 1px solid var(--ui-border, #e5e7eb);
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ui-muted, #6b7280);
}
[data-theme="dark"] .sc-header { border-bottom-color: #3a3f4b; }
.sc-close {
background: none;
border: none;
color: var(--ui-muted, #6b7280);
padding: 2px 5px;
cursor: pointer;
border-radius: 6px;
font-size: 0.85rem;
line-height: 1;
}
.sc-close:hover { background: var(--ui-border, #e5e7eb); }
.sc-body {
padding: 0.75rem 1.25rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.sc-row {
display: flex;
align-items: center;
gap: 0.85rem;
font-size: 0.82rem;
color: var(--ui-text, #374151);
}
.sc-row kbd {
background: var(--ui-bg, #f4f5f7);
border: 1px solid var(--ui-border, #d1d5db);
border-radius: 5px;
padding: 2px 7px;
font-size: 0.75rem;
font-family: ui-monospace, monospace;
white-space: nowrap;
min-width: 70px;
text-align: center;
color: var(--ui-text, #374151);
box-shadow: 0 1px 0 var(--ui-border, #d1d5db);
}
[data-theme="dark"] .sc-row kbd {
background: #2a2d35;
border-color: #4a4f5c;
color: #cdd5e0;
}
/* ─── Search Clear Button ────────────────────────────────────── */
.search-clear-wrap {
position: relative;
display: flex;
align-items: center;
}
.search-clear-wrap input {
padding-right: 2rem !important;
width: 100%;
}
.search-clear-btn {
position: absolute;
right: 0.4rem;
background: none;
border: none;
color: var(--ui-muted, #9ca3af);
font-size: 0.95rem;
line-height: 1;
padding: 2px 4px;
cursor: pointer;
border-radius: 4px;
display: none;
}
.search-clear-btn:hover { color: var(--ui-text, #374151); }
/* ─── Sortable TH visual indicator ─────────────────────────── */
.sortable-th {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.sortable-th::after {
content: '\F282';
font-family: 'bootstrap-icons';
font-size: 0.7rem;
margin-left: 4px;
opacity: 0.3;
vertical-align: middle;
}
.sortable-th.sort-asc::after {
content: '\F235';
opacity: 0.85;
color: var(--ui-primary, #4f7cff);
}
.sortable-th.sort-desc::after {
content: '\F229';
opacity: 0.85;
color: var(--ui-primary, #4f7cff);
}
/* ─── Password Show/Hide Toggle ─────────────────────────────── */
.pw-wrap {
position: relative;
display: flex;
align-items: center;
}
.pw-wrap input {
padding-right: 2.4rem !important;
width: 100%;
}
.pw-toggle {
position: absolute;
right: 0.45rem;
background: none;
border: none;
color: var(--ui-muted, #9ca3af);
font-size: 0.95rem;
line-height: 1;
padding: 2px 4px;
cursor: pointer;
border-radius: 4px;
}
.pw-toggle:hover { color: var(--ui-text, #374151); }
/* ─── Copy Button ────────────────────────────────────────────── */
[data-copy], [data-copy-target], [data-copy-input] {
cursor: pointer;
}
/* ─── Print Styles ─────────────────────────────────────────── */
@media print {
/* Hide chrome */
.top-menu-card,
.col-md-3,
.left-sidebar-wrap,
.page-actions,
.btn,
.pagination,
#page-progress,
.offcanvas,
.mobile-nav-hamburger,
.panel-hero .breadcrumb,
.topbar-actions,
[data-tooltip]::after,
[data-tooltip]::before {
display: none !important;
}
/* Full-width content */
.col-md-9,
.col-lg-9 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
.container,
.container-fluid {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Reset backgrounds and colours */
body,
html {
background: white !important;
color: black !important;
font-size: 11pt !important;
}
.card {
border: 1px solid #bbb !important;
box-shadow: none !important;
background: white !important;
color: black !important;
break-inside: avoid;
margin-bottom: 0.6rem !important;
}
.panel-hero {
background: none !important;
box-shadow: none !important;
border: 1px solid #bbb !important;
color: black !important;
}
/* Tables: prevent mid-row page breaks, keep headers on each page */
.table {
font-size: 9pt !important;
width: 100% !important;
table-layout: auto !important;
border-collapse: collapse !important;
color: black !important;
}
.table thead {
display: table-header-group; /* repeat header on every printed page */
}
.table tfoot {
display: table-footer-group;
}
.table tbody tr {
break-inside: avoid;
page-break-inside: avoid;
}
.table th,
.table td {
border: 1px solid #bbb !important;
background: white !important;
color: black !important;
padding: 4px 6px !important;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal !important;
}
.table thead th {
background: #f0f0f0 !important;
font-weight: bold;
}
/* Prevent overflow-hidden from clipping table */
.table-responsive {
overflow: visible !important;
}
/* Metric cards: compact, 2-up */
.metric-card {
background: #f7f7f7 !important;
color: black !important;
box-shadow: none !important;
border: 1px solid #ccc !important;
break-inside: avoid;
}
.metric-card * { color: black !important; }
/* Suppress link URL decoration */
a[href]::after {
content: none !important;
}
/* Page margins */
@page {
margin: 1.5cm 1cm;
size: A4 landscape;
}
}
/* ============================================================
V4 — Metric card palette-aware gradient overrides
Midnight (purple) and Ember (orange) palettes use their own
accent colours so the cards feel coherent instead of clashing.
============================================================ */
/* Midnight palette */
/* Metric card gradient overrides panel-themes.css'e taşındı — burada artık yok */
/* ============================================================
V5 — Firefox scrollbar fallback (scrollbar-color / width)
Works alongside existing ::-webkit-scrollbar rules.
============================================================ */
* {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--ui-border, #d1d5db) 80%, var(--ui-primary, #4f7cff) 20%) var(--ui-bg, #f4f5f7);
}
[data-theme="dark"] * {
scrollbar-color: #3a3f4b #1a1d23;
}
/* ============================================================
V6 — Mobile input min-height: reduce on very small screens
The 42px min-height is comfortable on ≥375px but cramped at 320px.
============================================================ */
@media (max-width: 359.98px) {
.form-page .form-control,
.form-page .form-select,
.form-page textarea {
min-height: 36px;
font-size: 0.9rem;
}
}
/* ============================================================
HERO BACKGROUND ANIMATIONS
Subtle floating orbs & shimmer on .panel-hero and .hero
============================================================ */
/* --- Keyframes --- */
@keyframes heroOrb1 {
0% { transform: translate(0, 0) scale(1); }
33% { transform: translate(18px, -12px) scale(1.08); }
66% { transform: translate(-10px, 16px) scale(0.94); }
100% { transform: translate(0, 0) scale(1); }
}
@keyframes heroOrb2 {
0% { transform: translate(0, 0) scale(1); }
40% { transform: translate(-22px, 10px) scale(1.1); }
70% { transform: translate(12px, -18px) scale(0.92); }
100% { transform: translate(0, 0) scale(1); }
}
@keyframes heroOrb3 {
0% { transform: translate(0, 0) scale(1); opacity: 0.5; }
50% { transform: translate(14px, 10px) scale(1.12); opacity: 0.8; }
100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
}
@keyframes heroShimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* --- .panel-hero (main dashboard hero bar) --- */
.panel-hero {
position: relative;
overflow: hidden;
}
.panel-hero::before,
.panel-hero::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* Orb 1 — top-left glow */
.panel-hero::before {
width: 160px;
height: 160px;
top: -60px;
left: -40px;
background: radial-gradient(circle, rgba(var(--ui-primary-rgb), 0.22) 0%, transparent 70%);
animation: heroOrb1 9s ease-in-out infinite;
}
/* Orb 2 — bottom-right glow */
.panel-hero::after {
width: 120px;
height: 120px;
bottom: -50px;
right: 80px;
background: radial-gradient(circle, rgba(var(--ui-primary-rgb), 0.15) 0%, transparent 70%);
animation: heroOrb2 12s ease-in-out infinite;
}
/* Make sure text stays above pseudo-elements */
.panel-hero > * { position: relative; z-index: 1; }
/* Extra orb via data attribute trick — use a box-shadow shimmer on the hero content */
.panel-hero .hero-copy {
position: relative;
}
.panel-hero .hero-copy::after {
content: '';
position: absolute;
top: 50%;
right: -80px;
transform: translateY(-50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--ui-primary-rgb), 0.18) 0%, transparent 70%);
animation: heroOrb3 7s ease-in-out infinite;
pointer-events: none;
}
/* --- .hero (colored sub-page hero) --- */
.hero::before {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
width: 200px;
height: 200px;
top: -80px;
right: 120px;
background: radial-gradient(circle, rgba(255,255,255,0.13) 0%, transparent 70%);
animation: heroOrb1 10s ease-in-out infinite;
}
.hero > * { position: relative; z-index: 1; }
/* Dark mode — slightly stronger orbs */
html[data-theme="dark"] .panel-hero::before {
background: radial-gradient(circle, rgba(var(--ui-primary-rgb), 0.3) 0%, transparent 70%);
}
html[data-theme="dark"] .panel-hero::after {
background: radial-gradient(circle, rgba(var(--ui-primary-rgb), 0.2) 0%, transparent 70%);
}
/* ─── Accessibility: Focus States ─────────────────────────── */
/* Global :focus-visible — klavye navigasyonu için belirgin outline */
:focus-visible {
outline: 2px solid var(--ui-primary, #3b82f6);
outline-offset: 2px;
border-radius: 4px;
}
/* Butonlar */
.btn:focus-visible,
.top-menu-links .btn:focus-visible,
.top-menu-actions .btn:focus-visible,
.sidebar-link:focus-visible,
.icon-btn:focus-visible {
outline: 2px solid var(--ui-primary, #3b82f6);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(var(--ui-primary-rgb, 59,130,246), 0.18);
}
/* Form elemanları */
.form-control:focus-visible,
.form-select:focus-visible {
outline: 2px solid var(--ui-primary, #3b82f6);
outline-offset: 0;
}
/* Bootstrap btn-close (modal kapat butonu) */
.btn-close:focus-visible {
outline: 2px solid var(--ui-primary, #3b82f6);
outline-offset: 2px;
box-shadow: none;
}
/* ─── Touch Targets — minimum 44×44px ─────────────────────── */
/* Tablo aksiyon butonları için tam WCAG touch target */
.icon-btn,
.icon-btn.btn-sm {
min-height: 30px;
min-width: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Üst menü nav butonları: masaüstünde ince, mobilde genel .btn kuralı 44px'e çıkarır */
.top-menu-actions .btn,
.top-menu-links .btn {
min-height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Sidebar linkler için yeterli dokunma alanı */
.sidebar-link {
min-height: 40px;
display: flex;
align-items: center;
}
/* Mobilde tüm buton/link touch targetları büyüt */
@media (max-width: 767.98px) {
.icon-btn,
.icon-btn.btn-sm {
min-height: 44px;
min-width: 44px;
}
.btn {
min-height: 44px;
}
.sidebar-link {
min-height: 48px;
}
}
/* ─── Unified Badge / Status Chip System ───────────────────── */
/* Tüm sayfalar bu sınıfları kullanmalı */
.status-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.22rem 0.65rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.03em;
white-space: nowrap;
}
.status-chip-ok {
background: rgba(25,135,84,.12);
color: #146c43;
}
.status-chip-warn {
background: rgba(var(--ui-warning-rgb, 183,106,0),.12);
color: var(--ui-warning, #b76a00);
}
.status-chip-danger {
background: rgba(var(--ui-danger-rgb, 180,35,60),.12);
color: var(--ui-danger, #b4233c);
}
.status-chip-info {
background: rgba(var(--ui-primary-rgb), .12);
color: var(--ui-primary);
}
.status-chip-neutral {
background: var(--ui-surface-3, #f1f3f5);
color: var(--ui-muted);
}
html[data-theme="dark"] .status-chip-ok { background: rgba(25,135,84,.20); color: #4ade80; }
html[data-theme="dark"] .status-chip-warn { background: rgba(255,208,127,.15); color: var(--ui-warning); }
html[data-theme="dark"] .status-chip-danger { background: rgba(var(--ui-danger-rgb,180,35,60),.20); color: var(--ui-danger); }
html[data-theme="dark"] .status-chip-info { background: rgba(var(--ui-primary-rgb),.18); }
html[data-theme="dark"] .status-chip-neutral { background: var(--ui-surface-2); }
/* ─── Empty State — Unified ─────────────────────────────────── */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5rem 1rem;
text-align: center;
color: var(--ui-muted);
}
.empty-state .empty-icon {
font-size: 2.4rem;
margin-bottom: 0.75rem;
opacity: 0.4;
display: block;
line-height: 1;
}
.empty-state h5 {
font-size: 1rem;
font-weight: 700;
color: var(--ui-text);
margin-bottom: 0.35rem;
}
.empty-state p {
font-size: 0.88rem;
color: var(--ui-muted);
margin-bottom: 0.85rem;
}
.empty-state .btn {
font-size: 0.82rem;
}
/* ─── Form UX Enhancements ─────────────────────────────────── */
/* Form control focus animasyonu */
.form-control,
.form-select {
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.28s ease !important;
}
.form-control:focus,
.form-select:focus {
border-color: var(--ui-primary) !important;
box-shadow: 0 0 0 3px rgba(var(--ui-primary-rgb), 0.14) !important;
}
/* Inline validation feedback renkleri palette'e uyumlu */
.form-control.is-valid {
border-color: #198754 !important;
box-shadow: 0 0 0 3px rgba(25,135,84,.12) !important;
}
.form-control.is-invalid {
border-color: var(--ui-danger) !important;
box-shadow: 0 0 0 3px rgba(var(--ui-danger-rgb, 180,35,60), .12) !important;
}
.invalid-feedback {
color: var(--ui-danger);
font-size: 0.8rem;
margin-top: 0.25rem;
}
/* Form section ayırıcı */
.form-section-title {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ui-muted);
padding: 0.5rem 0 0.3rem;
border-bottom: 1px solid var(--ui-border);
margin-bottom: 0.85rem;
display: flex;
align-items: center;
gap: 0.45rem;
}
.form-section-title i {
font-size: 0.85rem;
color: var(--ui-primary);
opacity: 0.8;
}
/* Input grup içi ikon rengi */
.input-group-text {
background: var(--ui-surface-2, var(--ui-surface));
border-color: var(--ui-border);
color: var(--ui-muted);
transition: background-color 0.28s ease, border-color 0.18s ease;
}
/* Şifre göster/gizle butonu */
.pw-toggle-btn {
cursor: pointer;
user-select: none;
transition: color 0.15s ease;
}
.pw-toggle-btn:hover { color: var(--ui-primary); }
/* Zorunlu alan yıldızı */
.required-star {
color: var(--ui-danger);
margin-left: 2px;
font-size: 0.75em;
}
/* ─── Global Footer ───────────────────────────────────────── */
#globalFooterText {
padding: 12px 0;
}
.footer-linkedin {
font-size: 0.75rem;
}
.footer-link {
color: inherit;
text-decoration: none;
opacity: 0.8;
}
.footer-link i {
margin-right: 4px;
}
.footer-copy {
font-weight: 600;
letter-spacing: 0.5px;
}
.footer-sub {
font-size: 0.75rem;
opacity: 0.75;
letter-spacing: 0.3px;
}
/* ─── Responsive Table → Card Mode (<640px) ───────────────── */
/*
Kullanım: tabloya data-label attribute'u ekle her | 'ye
| ... |
CSS otomatik olarak etiket gösterir.
*/
@media (max-width: 639.98px) {
.table-card-mode thead {
display: none;
}
.table-card-mode,
.table-card-mode tbody,
.table-card-mode tr,
.table-card-mode td {
display: block;
width: 100%;
}
.table-card-mode tr {
background: var(--ui-surface);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md, 12px);
margin-bottom: 0.65rem;
padding: 0.6rem 0.75rem;
box-shadow: var(--ui-shadow-soft);
}
.table-card-mode td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.3rem 0;
border: none;
font-size: 0.85rem;
border-bottom: 1px solid var(--ui-border);
}
.table-card-mode td:last-child {
border-bottom: none;
padding-bottom: 0;
}
.table-card-mode td::before {
content: attr(data-label);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ui-muted);
flex: 0 0 45%;
margin-right: 0.5rem;
}
/* Actions sütunu full genişlik */
.table-card-mode td.td-actions {
justify-content: flex-end;
padding-top: 0.45rem;
}
.table-card-mode td.td-actions::before {
display: none;
}
}
/* ─── Extra-small (<576px) breakpoint ─────────────────────── */
@media (max-width: 575.98px) {
/* Tipografi küçült */
body { font-size: 0.9rem; }
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.3rem; }
/* Kart padding'i azalt */
.card-body { padding: 0.75rem !important; }
.glass-card { padding: 0.75rem !important; }
/* Tablo hücreleri */
.table-modern thead th,
.table-modern tbody td { padding: 0.5rem 0.4rem !important; font-size: 0.8rem; }
/* Panel hero daha kompakt */
.panel-hero { padding: 0.75rem 0.9rem !important; }
.panel-hero h2 { font-size: 1.15rem !important; }
.page-kicker { font-size: 0.625rem !important; letter-spacing: 0.22em !important; }
/* Form alanları tam genişlik */
.form-control,
.form-select { font-size: 1rem; padding: 0.55rem 0.75rem; }
/* Metric kartlar tam genişlik */
.metric-card { padding: 0.75rem !important; }
.metric-value { font-size: 1.6rem !important; }
/* Top menü logo küçült */
.top-menu-brand img { max-height: 28px; }
/* Selector kart */
.selector-card { padding: 0.85rem !important; }
/* WiFi stack tek sütun */
.wifi-stack-row { flex-direction: column !important; }
.wifi-stack-card { min-width: unset !important; width: 100% !important; }
}
/* ============================================================
VFX-A — Metric Card Cascade Entry (B)
Metric kartlar sırayla yukarıdan aşağı kayarak girer.
============================================================ */
.metric-card {
animation: soft-enter 0.45s cubic-bezier(0.22, 0.68, 0, 1.1) both;
}
.metric-col:nth-child(1) .metric-card { animation-delay: 0ms; }
.metric-col:nth-child(2) .metric-card { animation-delay: 85ms; }
.metric-col:nth-child(3) .metric-card { animation-delay: 170ms; }
.metric-col:nth-child(4) .metric-card { animation-delay: 255ms; }
@media (prefers-reduced-motion: reduce) {
.metric-card { animation: none !important; }
}
/* ============================================================
VFX-D — Critical Status Chip Pulse (D)
.status-chip-danger elemanları hafif ring pulse ile titreşir.
============================================================ */
@keyframes status-pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(var(--ui-danger-rgb, 180,35,60), 0.45); }
70% { box-shadow: 0 0 0 7px rgba(var(--ui-danger-rgb, 180,35,60), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--ui-danger-rgb, 180,35,60), 0); }
}
.status-chip-danger {
animation: status-pulse-ring 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.status-chip-danger { animation: none !important; }
}
/* ============================================================
VFX-E1 — Tooltip Gelişmiş Giriş (E)
Tooltip aşağıdan slide-in + scale efektiyle açılır.
============================================================ */
[data-tooltip]::after {
transform: translateX(-50%) translateY(4px) scale(0.9);
transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-tooltip]::before {
transform: translateX(-50%) translateY(4px) scale(0.9);
transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
/* ============================================================
VFX-E2 — Empty State İkon Animasyonu (E)
Boş durum ikonları hafif bounce efektiyle canlanır.
============================================================ */
@keyframes empty-bounce {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
50% { transform: translateY(-9px) scale(1.07); opacity: 0.58; }
}
.empty-state .empty-icon {
animation: empty-bounce 2.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@media (prefers-reduced-motion: reduce) {
.empty-state .empty-icon { animation: none !important; }
}
/* ============================================================
VFX-E3 — Sidebar Alt Menü Smooth Transition (E)
display:none/block yerine max-height + opacity ile açılır.
============================================================ */
.sidebar-submenu {
display: block !important;
max-height: 0;
overflow: hidden;
opacity: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.24s ease,
padding 0.24s ease;
}
.sidebar-entry.open .sidebar-submenu {
max-height: 500px;
opacity: 1;
padding-top: 0.1rem !important;
padding-bottom: 0.35rem !important;
}
/* ============================================================
VFX-F — Tablo Satırı Silme / Ekleme Animasyonu (F)
.row-deleting: silinen satır sola kayarak solar.
.row-inserting: yeni satır aşağıdan yukarıya girer.
============================================================ */
@keyframes row-fade-out {
from { opacity: 1; transform: translateX(0); max-height: 100px; }
to { opacity: 0; transform: translateX(28px); max-height: 0; }
}
@keyframes row-fade-in {
from { opacity: 0; transform: translateY(-8px); background-color: rgba(var(--ui-primary-rgb), 0.12); }
to { opacity: 1; transform: translateY(0); background-color: transparent; }
}
tr.row-deleting td,
.list-group-item.row-deleting {
animation: row-fade-out 0.38s cubic-bezier(0.4, 0, 0.8, 0.6) forwards;
pointer-events: none;
}
tr.row-inserting,
.list-group-item.row-inserting {
animation: row-fade-in 0.42s cubic-bezier(0.22, 0.68, 0, 1.1) both;
}
@media (prefers-reduced-motion: reduce) {
tr.row-deleting td,
.list-group-item.row-deleting,
tr.row-inserting,
.list-group-item.row-inserting { animation: none !important; }
}
/* ============================================================
SPLASH SCREEN — İlk açılış giriş animasyonu
Session başına bir kez gösterilir (sessionStorage flag).
============================================================ */
#td-splash {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(150deg, #060d1e 0%, #0b1730 40%, #0a1528 70%, #060d1e 100%);
overflow: hidden;
will-change: opacity, transform;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#td-splash.td-splash--hide {
opacity: 0;
transform: scale(1.05);
pointer-events: none;
}
/* Arka plan halkaları */
.td-splash-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.07);
animation: splashRingPulse 3.2s ease-in-out infinite;
}
.td-splash-ring-1 { width: 200px; height: 200px; animation-delay: 0s; }
.td-splash-ring-2 { width: 340px; height: 340px; border-color: rgba(255,255,255,0.045); animation-delay: 0.4s; }
.td-splash-ring-3 { width: 500px; height: 500px; border-color: rgba(255,255,255,0.025); animation-delay: 0.8s; }
.td-splash-ring-4 { width: 680px; height: 680px; border-color: rgba(255,255,255,0.012); animation-delay: 1.2s; }
/* Parlayan merkez ışık */
.td-splash-glow {
position: absolute;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(79,124,255,0.22) 0%,
rgba(20,184,166,0.10) 45%,
transparent 72%
);
filter: blur(18px);
animation: splashGlowPulse 2.8s ease-in-out infinite;
}
/* Logo ikonu */
.td-splash-icon {
position: relative;
width: 78px;
height: 78px;
border-radius: 22px;
background: linear-gradient(140deg,
rgba(79,124,255,0.92) 0%,
rgba(20,184,166,0.80) 100%
);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
box-shadow:
0 0 0 1px rgba(255,255,255,0.12),
0 0 32px rgba(79,124,255,0.45),
0 8px 32px rgba(0,0,0,0.4);
animation: splashIconIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
.td-splash-icon::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 23px;
background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 60%);
pointer-events: none;
}
.td-splash-icon img {
width: 46px;
height: 46px;
filter: brightness(0) invert(1);
position: relative;
z-index: 1;
}
/* Başlık */
.td-splash-title {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 1.65rem;
font-weight: 800;
color: #fff;
letter-spacing: 0.01em;
margin: 0 0 0.3rem;
animation: splashTextIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
/* Alt başlık */
.td-splash-sub {
font-size: 0.7rem;
color: rgba(255,255,255,0.42);
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0;
animation: splashTextIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}
/* Yükleme noktaları */
.td-splash-dots {
display: flex;
gap: 7px;
margin-top: 2.2rem;
animation: splashTextIn 0.4s ease 0.82s both;
}
.td-splash-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.28);
}
.td-splash-dot:nth-child(1) { animation: splashDotBounce 1.0s ease-in-out 0.90s infinite; }
.td-splash-dot:nth-child(2) { animation: splashDotBounce 1.0s ease-in-out 1.08s infinite; }
.td-splash-dot:nth-child(3) { animation: splashDotBounce 1.0s ease-in-out 1.26s infinite; }
/* Alt progress bar */
.td-splash-bar-wrap {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(255,255,255,0.07);
overflow: hidden;
}
.td-splash-bar {
height: 100%;
width: 0;
background: linear-gradient(90deg,
rgba(79,124,255,0.9),
rgba(20,184,166,0.85),
rgba(79,124,255,0.9)
);
background-size: 200% 100%;
animation:
splashBarFill 1.65s cubic-bezier(0.4, 0, 0.2, 1) 0.08s forwards,
splashBarShimmer 0.9s linear 0.08s infinite;
}
/* ── Splash keyframes ── */
@keyframes splashIconIn {
from { opacity: 0; transform: scale(0.45) translateY(28px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes splashTextIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes splashBarFill {
0% { width: 0; }
55% { width: 68%; }
100% { width: 100%; }
}
@keyframes splashBarShimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
@keyframes splashRingPulse {
0%, 100% { transform: scale(1); opacity: 0.55; }
50% { transform: scale(1.05); opacity: 0.15; }
}
@keyframes splashGlowPulse {
0%, 100% { transform: scale(1); opacity: 0.65; }
50% { transform: scale(1.18); opacity: 1; }
}
@keyframes splashDotBounce {
0%, 100% { transform: translateY(0) scale(1); background: rgba(255,255,255,0.28); }
50% { transform: translateY(-5px) scale(1.3); background: rgba(255,255,255,0.82); }
}
@media (prefers-reduced-motion: reduce) {
#td-splash, #td-splash * { transition: none !important; animation: none !important; }
}
/* ============================================================
ENHANCED PAGE TRANSITIONS — Daha sinematik sayfa girişi
============================================================ */
.soft-enter {
animation: soft-enter 0.48s cubic-bezier(0.22, 0.68, 0, 1.05) both;
}
@keyframes soft-enter {
from {
opacity: 0;
transform: translateY(14px) scale(0.988);
filter: blur(1.5px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
/* Tablo satırları kademeli giriş animasyonu */
.table-modern tbody tr {
animation: tableRowIn 0.35s cubic-bezier(0.22, 0.68, 0, 1.1) both;
}
.table-modern tbody tr:nth-child(1) { animation-delay: 0ms; }
.table-modern tbody tr:nth-child(2) { animation-delay: 28ms; }
.table-modern tbody tr:nth-child(3) { animation-delay: 56ms; }
.table-modern tbody tr:nth-child(4) { animation-delay: 84ms; }
.table-modern tbody tr:nth-child(5) { animation-delay: 112ms; }
.table-modern tbody tr:nth-child(6) { animation-delay: 140ms; }
.table-modern tbody tr:nth-child(7) { animation-delay: 168ms; }
.table-modern tbody tr:nth-child(8) { animation-delay: 196ms; }
.table-modern tbody tr:nth-child(9) { animation-delay: 224ms; }
.table-modern tbody tr:nth-child(10) { animation-delay: 252ms; }
@keyframes tableRowIn {
from { opacity: 0; transform: translateX(-6px); }
to { opacity: 1; transform: translateX(0); }
}
/* Card grid kademeli giriş */
.card.panel-surface {
animation: cardSlideIn 0.4s cubic-bezier(0.22, 0.68, 0, 1.05) both;
}
.row > [class*="col-"] .card.panel-surface:first-child { animation-delay: 40ms; }
.row > [class*="col-"]:nth-child(2) .card.panel-surface { animation-delay: 80ms; }
.row > [class*="col-"]:nth-child(3) .card.panel-surface { animation-delay: 120ms; }
.row > [class*="col-"]:nth-child(4) .card.panel-surface { animation-delay: 160ms; }
@keyframes cardSlideIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.soft-enter,
.table-modern tbody tr,
.card.panel-surface { animation: none !important; filter: none !important; }
}
/* ─── Luminescent Palette — Extra Visual Layer ─────────────── */
/* Sidebar'da ince sol kenar çizgisi ile "active" daha belirgin */
html[data-palette="luminescent"][data-theme="dark"] .sidebar-link.active {
border-left: 3px solid #00cfee !important;
}
html[data-palette="luminescent"][data-theme="dark"] .sidebar-link {
border-left: 3px solid transparent !important;
transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease !important;
}
/* Card'lara üst kenarda ince cyan çizgi */
html[data-palette="luminescent"][data-theme="dark"] .card:not(.top-menu-card):not(.left-sidebar-card):hover {
border-color: rgba(0,207,238,.22) !important;
box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(0,207,238,.16) !important;
}
/* Metric pill glow efekti */
html[data-palette="luminescent"][data-theme="dark"] .metric-pill {
background: rgba(12,24,40,0.9) !important;
border-color: rgba(0,207,238,.20) !important;
}
/* Badge'lar */
html[data-palette="luminescent"][data-theme="dark"] .badge.bg-primary {
background: rgba(0,207,238,.18) !important;
color: #5de0f5 !important;
border: 1px solid rgba(0,207,238,.30) !important;
}
html[data-palette="luminescent"][data-theme="dark"] .badge.bg-success {
background: rgba(0,212,160,.15) !important;
color: #00e0aa !important;
border: 1px solid rgba(0,212,160,.28) !important;
}
html[data-palette="luminescent"][data-theme="dark"] .badge.bg-warning,
html[data-palette="luminescent"][data-theme="dark"] .badge.text-bg-warning {
background: rgba(245,158,11,.15) !important;
color: #fbbf24 !important;
border: 1px solid rgba(245,158,11,.28) !important;
}
html[data-palette="luminescent"][data-theme="dark"] .badge.bg-danger {
background: rgba(255,85,119,.15) !important;
color: #ff8099 !important;
border: 1px solid rgba(255,85,119,.28) !important;
}
/* Btn outline primary — luminescent teal varyantı */
html[data-palette="luminescent"][data-theme="dark"] .btn-outline-primary {
color: #00cfee !important;
border-color: rgba(0,207,238,.40) !important;
}
html[data-palette="luminescent"][data-theme="dark"] .btn-outline-primary:hover {
background: rgba(0,207,238,.14) !important;
border-color: #00cfee !important;
}
html[data-palette="luminescent"] .btn-primary {
background: #00cfee !important;
border-color: #00b8d4 !important;
color: #07101e !important;
font-weight: 700 !important;
}
html[data-palette="luminescent"] .btn-primary:hover {
background: #00e5ff !important;
border-color: #00cfee !important;
}
/* Scrollbar – luminescent */
html[data-palette="luminescent"][data-theme="dark"] ::-webkit-scrollbar-track { background: #07101e; }
html[data-palette="luminescent"][data-theme="dark"] ::-webkit-scrollbar-thumb { background: #163050; }
html[data-palette="luminescent"][data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #00cfee; }
/* Progress bar */
html[data-palette="luminescent"] #page-progress {
background: linear-gradient(90deg, #00cfee, #00d4a0);
box-shadow: 0 0 10px rgba(0,207,238,.6);
}
/* ════════════ END panel-visual.css MERGED ════════════ */
/* ════════════════════════════════════════════════════════════════
MERGED CONTENT FROM panel-luxury.css (Sprint 1 konsolidasyonu)
Yukarıda luxury kuralları, aşağıda v2 kuralları — cascade sırası korundu.
panel-luxury.css'in HTML'den linki kaldırıldı, dosya .bak olarak saklı.
════════════════════════════════════════════════════════════════ */
/* ============================================================
panel-luxury.css — Design System Refresh Layer
Loads LAST in ; intentional cascade winner.
Hibrit dil: Modern SaaS (Linear/Vercel) + Enterprise (Atlassian)
- Minimal, ince border, restrained shadow
- Yoğun bilgi yoğunluğu, kompakt padding
- 5 palet × dark/light ile uyumlu (yalnızca --ui-* token'ları kullanır)
- Bootstrap 5 sınıflarını üzerine yazar, HTML değişikliği gerekmez
============================================================ */
/* ---------- 1. Design Tokens (palette-agnostic) ---------- */
:root {
/* Typography stack — already-loaded Google Fonts */
--ds-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--ds-font-display: 'Plus Jakarta Sans', 'IBM Plex Sans', system-ui, sans-serif;
--ds-font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Type scale (modular, 1.125 ratio centered on 14px body) */
--ds-fs-2xs: 10px;
--ds-fs-xs: 11px;
--ds-fs-sm: 12px;
--ds-fs-md: 13px;
--ds-fs-base:14px;
--ds-fs-lg: 15px;
--ds-fs-xl: 16px;
--ds-fs-2xl: 18px;
--ds-fs-3xl: 20px;
--ds-fs-4xl: 24px;
--ds-fs-5xl: 30px;
--ds-fs-6xl: 36px;
/* Weights */
--ds-fw-regular: 400;
--ds-fw-medium: 500;
--ds-fw-semibold:600;
--ds-fw-bold: 700;
/* Line heights */
--ds-lh-tight: 1.2;
--ds-lh-normal: 1.45;
--ds-lh-relaxed: 1.65;
/* Letter-spacing */
--ds-ls-tight: -0.011em;
--ds-ls-normal: 0;
--ds-ls-wide: 0.04em;
--ds-ls-caps: 0.08em;
/* Spacing scale (4px base) */
--ds-sp-0: 0;
--ds-sp-1: 2px;
--ds-sp-2: 4px;
--ds-sp-3: 6px;
--ds-sp-4: 8px;
--ds-sp-5: 10px;
--ds-sp-6: 12px;
--ds-sp-8: 16px;
--ds-sp-10: 20px;
--ds-sp-12: 24px;
--ds-sp-16: 32px;
--ds-sp-20: 40px;
--ds-sp-24: 48px;
--ds-sp-32: 64px;
/* Radius */
--ds-radius-xs: 4px;
--ds-radius-sm: 6px;
--ds-radius-md: 8px;
--ds-radius-lg: 10px;
--ds-radius-xl: 14px;
--ds-radius-pill: 999px;
/* Shadow scale — Linear-grade subtle */
--ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
--ds-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 8px rgba(15, 23, 42, 0.04);
--ds-shadow-lg: 0 4px 6px rgba(15, 23, 42, 0.05), 0 12px 24px rgba(15, 23, 42, 0.06);
--ds-shadow-xl: 0 8px 12px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.08);
--ds-shadow-focus: 0 0 0 3px rgba(var(--ui-primary-rgb, 59, 130, 246), 0.22);
/* Motion */
--ds-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--ds-dur-fast: 120ms;
--ds-dur-base: 180ms;
--ds-dur-slow: 260ms;
/* Sizing — compact for enterprise density */
--ds-h-xs: 24px;
--ds-h-sm: 28px;
--ds-h-md: 32px;
--ds-h-lg: 36px;
--ds-h-xl: 40px;
}
/* Dark mode shadow tweaks */
html[data-theme="dark"] {
--ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
--ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.28);
--ds-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.28);
--ds-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.38), 0 12px 24px rgba(0, 0, 0, 0.32);
--ds-shadow-xl: 0 8px 12px rgba(0, 0, 0, 0.40), 0 24px 48px rgba(0, 0, 0, 0.36);
}
/* ---------- 2. Global typographic baseline ---------- */
html, body {
font-family: var(--ds-font-sans) !important;
font-size: var(--ds-fs-base) !important;
line-height: var(--ds-lh-normal) !important;
letter-spacing: var(--ds-ls-tight);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'cv11', 'ss01', 'ss03';
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--ds-font-display) !important;
font-weight: var(--ds-fw-semibold) !important;
letter-spacing: var(--ds-ls-tight);
line-height: var(--ds-lh-tight);
color: var(--ui-text);
}
h1, .h1 { font-size: var(--ds-fs-5xl) !important; font-weight: var(--ds-fw-bold) !important; }
h2, .h2 { font-size: var(--ds-fs-4xl) !important; }
h3, .h3 { font-size: var(--ds-fs-3xl) !important; }
h4, .h4 { font-size: var(--ds-fs-2xl) !important; }
h5, .h5 { font-size: var(--ds-fs-xl) !important; }
h6, .h6 { font-size: var(--ds-fs-lg) !important; }
small, .small, .text-muted {
font-size: var(--ds-fs-sm) !important;
}
code, kbd, pre, samp, .font-monospace {
font-family: var(--ds-font-mono) !important;
font-size: 0.92em;
font-feature-settings: 'zero', 'ss01';
}
/* Tabular numerics for tables/dashboards */
.table, .metric-card, .stat-value, .badge, .invoice-amount, [data-tabular] {
font-variant-numeric: tabular-nums;
}
/* ---------- 3. Base body / layout chrome ---------- */
body {
background: var(--ui-bg);
color: var(--ui-text);
-webkit-text-size-adjust: 100%;
}
::selection {
background: rgba(var(--ui-primary-rgb, 59, 130, 246), 0.20);
color: var(--ui-text);
}
/* M3: Sadece blob tanımlanmış paletlerde subdue et (boş ::before reflow'unu önle) */
html[data-palette="slate"] body::before,
html[data-palette="midnight"] body::before,
html[data-palette="ocean"] body::before,
html[data-palette="ember"] body::before,
html[data-palette="luminescent"] body::before,
html[data-palette="verdant"] body::before {
opacity: 0.55 !important;
filter: saturate(0.85);
will-change: opacity;
}
html[data-theme="dark"][data-palette] body::before {
opacity: 0.45 !important;
}
/* Scrollbar — minimal, modern */
* {
scrollbar-width: thin;
scrollbar-color: var(--ui-border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--ui-border-strong);
border-radius: var(--ds-radius-pill);
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: var(--ui-muted);
background-clip: padding-box;
border: 2px solid transparent;
}
/* ---------- 4. Buttons ---------- */
/* :not(.btn-close) Bootstrap'ın modal X butonunu (kare, SVG bg) korumak için */
.btn:not(.btn-close) {
font-family: var(--ds-font-sans) !important;
font-weight: var(--ds-fw-medium) !important;
font-size: var(--ds-fs-md) !important;
letter-spacing: 0;
border-radius: var(--ds-radius-md) !important;
padding: 0 var(--ds-sp-6) !important;
height: var(--ds-h-md);
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: var(--ds-sp-3);
border-width: 1px !important;
transition: background-color var(--ds-dur-fast) var(--ds-ease),
border-color var(--ds-dur-fast) var(--ds-ease),
color var(--ds-dur-fast) var(--ds-ease),
box-shadow var(--ds-dur-fast) var(--ds-ease),
transform var(--ds-dur-fast) var(--ds-ease) !important;
white-space: nowrap;
}
.btn:focus-visible { outline: none !important; box-shadow: var(--ds-shadow-focus) !important; }
.btn:not(.btn-close):active { transform: translateY(0.5px); }
/* Input-group içinde butonlar form-control yüksekliğine hizalanır (M1) */
.input-group .btn:not(.btn-close) { height: var(--ds-h-lg); }
.btn-sm {
font-size: var(--ds-fs-sm) !important;
height: var(--ds-h-sm);
padding: 0 var(--ds-sp-5) !important;
border-radius: var(--ds-radius-sm) !important;
gap: var(--ds-sp-2);
}
.btn-lg {
font-size: var(--ds-fs-lg) !important;
height: var(--ds-h-xl);
padding: 0 var(--ds-sp-8) !important;
border-radius: var(--ds-radius-md) !important;
}
/* Primary — solid, subtle elevation */
.btn-primary, .btn-primary:focus {
background: var(--ui-primary) !important;
border-color: var(--ui-primary) !important;
color: #fff !important;
box-shadow: var(--ds-shadow-xs);
}
.btn-primary:hover {
background: rgba(var(--ui-primary-rgb), 0.92) !important;
border-color: rgba(var(--ui-primary-rgb), 0.92) !important;
box-shadow: var(--ds-shadow-sm);
}
/* Secondary / outline */
.btn-secondary, .btn-outline-secondary {
background: var(--ui-surface) !important;
color: var(--ui-text) !important;
border-color: var(--ui-border-strong) !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover {
background: var(--ui-surface-2) !important;
border-color: var(--ui-muted-soft) !important;
color: var(--ui-text) !important;
}
.btn-outline-primary {
background: transparent !important;
color: var(--ui-primary) !important;
border-color: rgba(var(--ui-primary-rgb), 0.35) !important;
}
.btn-outline-primary:hover {
background: rgba(var(--ui-primary-rgb), 0.08) !important;
border-color: var(--ui-primary) !important;
color: var(--ui-primary) !important;
}
.btn-outline-danger { color: var(--ui-danger) !important; border-color: rgba(239, 68, 68, 0.35) !important; background: transparent !important; }
.btn-outline-danger:hover { background: rgba(239, 68, 68, 0.10) !important; color: var(--ui-danger) !important; border-color: var(--ui-danger) !important; }
.btn-danger { background: var(--ui-danger) !important; border-color: var(--ui-danger) !important; color: #fff !important; }
.btn-warning { background: var(--ui-warning) !important; border-color: var(--ui-warning) !important; color: #1a1206 !important; }
.btn-success { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
/* Ghost / link buttons */
.btn-link {
color: var(--ui-primary) !important;
text-decoration: none !important;
height: auto;
padding: var(--ds-sp-1) var(--ds-sp-3) !important;
}
.btn-link:hover { background: rgba(var(--ui-primary-rgb), 0.08) !important; }
/* Icon-only buttons */
.btn .bi { font-size: 1em; line-height: 1; }
.btn-sm .bi { font-size: 0.95em; }
/* ---------- 5. Cards ---------- */
.card,
.glass-card {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ds-radius-lg) !important;
box-shadow: var(--ds-shadow-xs) !important;
transition: box-shadow var(--ds-dur-base) var(--ds-ease),
border-color var(--ds-dur-base) var(--ds-ease),
transform var(--ds-dur-base) var(--ds-ease);
}
/* M2: hover lift sadece tıklanabilir kartlarda — statik bilgi kartlarında değil */
a.card:hover,
.card[role="button"]:hover,
.card.clickable:hover,
.card.is-link:hover,
.metric-card:hover,
.stat-card:hover,
.selector-card:hover,
.customer-link-card:hover {
box-shadow: var(--ds-shadow-sm) !important;
border-color: var(--ui-border-strong) !important;
}
.card-header {
background: transparent !important;
border-bottom: 1px solid var(--ui-border) !important;
padding: var(--ds-sp-6) var(--ds-sp-8) !important;
font-weight: var(--ds-fw-semibold);
font-size: var(--ds-fs-md);
letter-spacing: 0.04em; /* m5: kompakt yazıda 0.08em fazlaydı */
text-transform: uppercase;
color: var(--ui-muted);
}
.card-body { padding: var(--ds-sp-8) !important; }
.card-footer {
background: var(--ui-surface-2) !important;
border-top: 1px solid var(--ui-border) !important;
padding: var(--ds-sp-6) var(--ds-sp-8) !important;
}
.card-title {
font-family: var(--ds-font-display) !important;
font-weight: var(--ds-fw-semibold) !important;
font-size: var(--ds-fs-2xl) !important;
margin-bottom: var(--ds-sp-2);
color: var(--ui-text);
}
.card-subtitle, .card-text + .text-muted {
font-size: var(--ds-fs-sm);
color: var(--ui-muted);
}
/* ---------- 6. Tables (Atlassian-style dense) ---------- */
.table {
font-size: var(--ds-fs-md) !important;
color: var(--ui-text) !important;
margin-bottom: 0;
}
.table > :not(caption) > * > * {
padding: var(--ds-sp-4) var(--ds-sp-6) !important;
vertical-align: middle;
border-bottom-color: var(--ui-border) !important;
}
.table thead th, .table-modern thead th {
background: var(--ui-surface-2) !important;
color: var(--ui-muted) !important;
font-weight: var(--ds-fw-semibold) !important;
font-size: var(--ds-fs-xs) !important;
letter-spacing: var(--ds-ls-caps);
text-transform: uppercase;
border-bottom: 1px solid var(--ui-border-strong) !important;
padding: var(--ds-sp-5) var(--ds-sp-6) !important;
white-space: nowrap;
}
.table tbody tr {
transition: background-color var(--ds-dur-fast) var(--ds-ease);
}
.table tbody tr:hover {
background: rgba(var(--ui-primary-rgb), 0.045) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
background: var(--ui-surface-2) !important;
color: inherit;
}
/* M6: Tablo köşe yuvarlaması — .table-responsive sarımı dahil */
.card > .table:first-child thead th:first-child,
.card > .table-responsive:first-child > .table thead th:first-child { border-top-left-radius: var(--ds-radius-lg); }
.card > .table:first-child thead th:last-child,
.card > .table-responsive:first-child > .table thead th:last-child { border-top-right-radius: var(--ds-radius-lg); }
.card > .table-responsive { border-radius: var(--ds-radius-lg); overflow: hidden; }
/* ---------- 7. Forms ---------- */
.form-control,
.form-select,
.input-group-text {
font-family: var(--ds-font-sans) !important;
font-size: var(--ds-fs-md) !important;
height: var(--ds-h-lg);
padding: 0 var(--ds-sp-5) !important;
background: var(--ui-surface-2) !important;
color: var(--ui-text) !important;
border: 1px solid var(--ui-border-strong) !important;
border-radius: var(--ds-radius-md) !important;
box-shadow: none !important;
transition: border-color var(--ds-dur-fast) var(--ds-ease),
box-shadow var(--ds-dur-fast) var(--ds-ease),
background-color var(--ds-dur-fast) var(--ds-ease);
}
textarea.form-control { height: auto; padding: var(--ds-sp-4) var(--ds-sp-5) !important; min-height: 80px; line-height: var(--ds-lh-normal); }
/* Dark mode: inputs must be visually distinct from the card surface.
card bg = --ui-surface (#141f31), so use --ui-surface-3 (#1d2a40) here. */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
background: var(--ui-surface-3) !important;
border-color: var(--ui-border-strong) !important;
}
html[data-theme="dark"] .input-group-text {
background: var(--ui-surface-2) !important;
border-color: var(--ui-border-strong) !important;
}
.form-control:focus,
.form-select:focus {
border-color: var(--ui-primary) !important;
box-shadow: var(--ds-shadow-focus) !important;
outline: none !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
background: var(--ui-surface-3) !important;
}
.form-control::placeholder { color: var(--ui-muted-soft); opacity: 1; }
.form-control:disabled, .form-select:disabled {
background: var(--ui-surface-2) !important;
color: var(--ui-muted);
cursor: not-allowed;
}
.form-control-sm, .form-select-sm {
height: var(--ds-h-sm);
font-size: var(--ds-fs-sm) !important;
padding: 0 var(--ds-sp-4) !important;
border-radius: var(--ds-radius-sm) !important;
}
.form-control-lg, .form-select-lg {
height: var(--ds-h-xl);
font-size: var(--ds-fs-lg) !important;
}
.form-label {
font-size: var(--ds-fs-sm) !important;
font-weight: var(--ds-fw-medium) !important;
color: var(--ui-text);
margin-bottom: var(--ds-sp-2);
}
.form-text { font-size: var(--ds-fs-xs); color: var(--ui-muted-soft); }
.input-group-text {
background: var(--ui-surface-2) !important;
color: var(--ui-muted);
border-color: var(--ui-border-strong) !important;
}
.form-check-input {
border-color: var(--ui-border-strong);
cursor: pointer;
}
.form-check-input:checked {
background-color: var(--ui-primary) !important;
border-color: var(--ui-primary) !important;
}
.form-check-input:focus { box-shadow: var(--ds-shadow-focus) !important; }
.form-check-label { font-size: var(--ds-fs-md); color: var(--ui-text); }
/* ---------- 8. Modals ---------- */
.modal-content {
border: 1px solid var(--ui-border-strong) !important;
border-radius: var(--ds-radius-xl) !important;
background: var(--ui-surface) !important;
box-shadow: var(--ds-shadow-xl) !important;
overflow: hidden;
}
.modal-header {
padding: var(--ds-sp-8) var(--ds-sp-10) !important;
border-bottom: 1px solid var(--ui-border) !important;
background: var(--ui-surface) !important;
}
.modal-title {
font-family: var(--ds-font-display) !important;
font-weight: var(--ds-fw-semibold) !important;
font-size: var(--ds-fs-2xl) !important;
letter-spacing: var(--ds-ls-tight);
color: var(--ui-text);
}
.modal-body { padding: var(--ds-sp-10) !important; font-size: var(--ds-fs-md); }
.modal-footer {
padding: var(--ds-sp-6) var(--ds-sp-10) !important;
border-top: 1px solid var(--ui-border) !important;
background: var(--ui-surface-2) !important;
gap: var(--ds-sp-3);
}
.modal-backdrop.show { opacity: 0.55; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* ---------- 9. Badges ---------- */
.badge {
font-family: var(--ds-font-sans) !important;
font-weight: var(--ds-fw-medium) !important;
font-size: var(--ds-fs-xs) !important;
letter-spacing: 0.02em;
padding: 3px var(--ds-sp-4) !important;
border-radius: var(--ds-radius-sm) !important;
display: inline-flex;
align-items: center;
gap: var(--ds-sp-2);
line-height: 1.4;
vertical-align: middle;
}
.badge.rounded-pill { border-radius: var(--ds-radius-pill) !important; padding: 3px var(--ds-sp-5) !important; }
.badge.bg-primary, .badge.text-bg-primary {
background: rgba(var(--ui-primary-rgb), 0.12) !important;
color: var(--ui-primary) !important;
border: 1px solid rgba(var(--ui-primary-rgb), 0.22);
}
.badge.bg-secondary, .badge.text-bg-secondary {
background: var(--ui-surface-2) !important;
color: var(--ui-muted) !important;
border: 1px solid var(--ui-border);
}
.badge.bg-success, .badge.text-bg-success {
background: rgba(34, 197, 94, 0.12) !important;
color: #15803d !important;
border: 1px solid rgba(34, 197, 94, 0.22);
}
html[data-theme="dark"] .badge.bg-success, html[data-theme="dark"] .badge.text-bg-success { color: #4ade80 !important; }
.badge.bg-danger, .badge.text-bg-danger {
background: rgba(239, 68, 68, 0.12) !important;
color: #b91c1c !important;
border: 1px solid rgba(239, 68, 68, 0.22);
}
html[data-theme="dark"] .badge.bg-danger, html[data-theme="dark"] .badge.text-bg-danger { color: #f87171 !important; }
.badge.bg-warning, .badge.text-bg-warning {
background: rgba(245, 158, 11, 0.14) !important;
color: #b45309 !important;
border: 1px solid rgba(245, 158, 11, 0.26);
}
html[data-theme="dark"] .badge.bg-warning, html[data-theme="dark"] .badge.text-bg-warning { color: #fbbf24 !important; }
.badge.bg-info, .badge.text-bg-info {
background: rgba(6, 182, 212, 0.12) !important;
color: #0e7490 !important;
border: 1px solid rgba(6, 182, 212, 0.22);
}
html[data-theme="dark"] .badge.bg-info, html[data-theme="dark"] .badge.text-bg-info { color: #67e8f9 !important; }
/* ---------- 10. Alerts ---------- */
.alert {
border-radius: var(--ds-radius-md) !important;
border: 1px solid transparent !important;
padding: var(--ds-sp-5) var(--ds-sp-6) !important;
font-size: var(--ds-fs-md) !important;
display: flex;
align-items: flex-start;
gap: var(--ds-sp-4);
border-left-width: 3px !important;
}
.alert-primary { background: rgba(var(--ui-primary-rgb), 0.06) !important; border-color: rgba(var(--ui-primary-rgb), 0.18) !important; border-left-color: var(--ui-primary) !important; color: var(--ui-text) !important; }
.alert-success { background: rgba(34, 197, 94, 0.06) !important; border-color: rgba(34, 197, 94, 0.18) !important; border-left-color: #22c55e !important; color: var(--ui-text) !important; }
.alert-danger { background: rgba(239, 68, 68, 0.06) !important; border-color: rgba(239, 68, 68, 0.18) !important; border-left-color: #ef4444 !important; color: var(--ui-text) !important; }
.alert-warning { background: rgba(245, 158, 11, 0.07) !important; border-color: rgba(245, 158, 11, 0.20) !important; border-left-color: #f59e0b !important; color: var(--ui-text) !important; }
.alert-info { background: rgba(6, 182, 212, 0.06) !important; border-color: rgba(6, 182, 212, 0.18) !important; border-left-color: #06b6d4 !important; color: var(--ui-text) !important; }
.alert-secondary { background: var(--ui-surface-2) !important; border-color: var(--ui-border) !important; border-left-color: var(--ui-muted-soft) !important; color: var(--ui-text) !important; }
/* ---------- 11. Dropdowns ---------- */
.dropdown-menu {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border-strong) !important;
border-radius: var(--ds-radius-md) !important;
box-shadow: var(--ds-shadow-lg) !important;
padding: var(--ds-sp-2) !important;
font-size: var(--ds-fs-md);
min-width: 180px;
}
.dropdown-item {
color: var(--ui-text) !important;
padding: var(--ds-sp-3) var(--ds-sp-5) !important;
border-radius: var(--ds-radius-sm) !important;
font-size: var(--ds-fs-md);
display: flex;
align-items: center;
gap: var(--ds-sp-3);
transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}
.dropdown-item:hover, .dropdown-item:focus {
background: rgba(var(--ui-primary-rgb), 0.08) !important;
color: var(--ui-primary) !important;
}
/* C3: .active (seçili) ile :active (klik anı) ayrımı — ani solid mavi sıçraması yok */
.dropdown-item.active {
background: rgba(var(--ui-primary-rgb), 0.12) !important;
color: var(--ui-primary) !important;
font-weight: var(--ds-fw-semibold);
}
.dropdown-item:active {
background: rgba(var(--ui-primary-rgb), 0.18) !important;
color: var(--ui-primary) !important;
}
.dropdown-divider { border-color: var(--ui-border) !important; margin: var(--ds-sp-2) 0; }
.dropdown-header {
font-size: var(--ds-fs-2xs) !important;
letter-spacing: var(--ds-ls-caps);
text-transform: uppercase;
color: var(--ui-muted-soft);
padding: var(--ds-sp-3) var(--ds-sp-5);
}
/* ---------- 12. Sidebar refinement ---------- */
.sidebar, #panelSidebar, .panel-sidebar {
border-right: 1px solid var(--sidebar-border, rgba(255,255,255,0.06));
}
.sidebar-link, .panel-sidebar a, .nav-sidebar .nav-link {
font-family: var(--ds-font-sans) !important;
font-size: var(--ds-fs-md) !important;
font-weight: var(--ds-fw-medium) !important;
border-radius: var(--ds-radius-md) !important;
padding: var(--ds-sp-4) var(--ds-sp-5) !important;
letter-spacing: 0;
position: relative;
transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}
/* C2: Aktif sidebar öğesi — palette dolu gradient'i bastır + soldan ince çubuk indicator */
.sidebar-link.active, .nav-sidebar .nav-link.active {
position: relative;
background: rgba(var(--ui-primary-rgb), 0.14) !important;
background-image: none !important;
color: var(--ui-primary) !important;
box-shadow: none !important;
padding-left: calc(var(--ds-sp-5) + 6px) !important;
}
html[data-theme="dark"] .sidebar-link.active,
html[data-theme="dark"] .nav-sidebar .nav-link.active {
background: rgba(var(--ui-primary-rgb), 0.18) !important;
color: #fff !important;
}
.sidebar-link.active::before, .nav-sidebar .nav-link.active::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
background: var(--ui-primary);
border-radius: 0 3px 3px 0;
}
.sidebar-group-title {
font-size: var(--ds-fs-2xs) !important;
letter-spacing: var(--ds-ls-caps) !important;
text-transform: uppercase;
font-weight: var(--ds-fw-semibold) !important;
padding: var(--ds-sp-5) var(--ds-sp-5) var(--ds-sp-2) !important;
margin-top: var(--ds-sp-3);
}
.sidebar-brand-wrap {
padding: var(--ds-sp-6) var(--ds-sp-5) !important;
border-bottom: 1px solid var(--sidebar-border) !important;
}
.sidebar-user-card {
border-radius: var(--ds-radius-md) !important;
padding: var(--ds-sp-4) !important;
font-size: var(--ds-fs-sm);
}
/* ---------- 13. Top menu bar ---------- */
.top-menu-card {
border-radius: var(--ds-radius-xl) !important;
border: 1px solid var(--ui-border) !important;
box-shadow: var(--ds-shadow-xs) !important;
padding: var(--ds-sp-5) var(--ds-sp-8) !important;
}
.top-menu-tool-btn,
.top-menu-links .btn,
.top-menu-actions .btn {
height: var(--ds-h-md);
font-size: var(--ds-fs-md) !important;
border-radius: var(--ds-radius-md) !important;
}
/* ---------- 14. Hero / panel-hero — light/dark aware ---------- */
/* .panel-hero (admin sayfa başlığı) — surface tabanlı, light/dark uyumlu.
Not: dashboard hero'su .hero + .panel-hero birlikte taşır; .hero'nun
primary-gradient + beyaz text stilini buradan bastırıyoruz. */
.panel-hero {
border-radius: var(--ds-radius-xl) !important;
padding: var(--ds-sp-12) var(--ds-sp-16) !important;
box-shadow: var(--ds-shadow-xs) !important;
position: relative;
overflow: hidden;
border: 1px solid var(--ui-border) !important;
color: var(--ui-text) !important;
}
/* Light mode: temiz beyaz surface + sol-üstte yumuşak primary glow */
html[data-theme="light"] .panel-hero {
background:
radial-gradient(ellipse 60% 80% at 0% 0%, rgba(var(--ui-primary-rgb), 0.10), transparent 55%),
radial-gradient(ellipse 40% 60% at 100% 100%, rgba(var(--ui-primary-rgb), 0.06), transparent 60%),
var(--ui-surface) !important;
}
html[data-theme="light"] .panel-hero h1,
html[data-theme="light"] .panel-hero h2,
html[data-theme="light"] .panel-hero h3,
html[data-theme="light"] .panel-hero .hero-title { color: var(--ui-text) !important; }
html[data-theme="light"] .panel-hero p,
html[data-theme="light"] .panel-hero .hero-sub,
html[data-theme="light"] .panel-hero .page-summary { color: var(--ui-muted) !important; }
html[data-theme="light"] .panel-hero .page-kicker { color: var(--ui-primary) !important; }
/* Dark mode: yükseltilmiş yüzey + ince primary aksent */
html[data-theme="dark"] .panel-hero {
background:
radial-gradient(ellipse 60% 80% at 0% 0%, rgba(var(--ui-primary-rgb), 0.18), transparent 55%),
radial-gradient(ellipse 50% 70% at 100% 100%, rgba(var(--ui-primary-rgb), 0.10), transparent 60%),
var(--ui-surface-2) !important;
border-color: var(--ui-border-strong) !important;
}
html[data-theme="dark"] .panel-hero h1,
html[data-theme="dark"] .panel-hero h2,
html[data-theme="dark"] .panel-hero h3,
html[data-theme="dark"] .panel-hero .hero-title { color: var(--ui-text) !important; }
html[data-theme="dark"] .panel-hero p,
html[data-theme="dark"] .panel-hero .hero-sub,
html[data-theme="dark"] .panel-hero .page-summary { color: var(--ui-muted) !important; }
html[data-theme="dark"] .panel-hero .page-kicker { color: var(--ui-primary) !important; }
/* Tipografi */
.panel-hero h1, .panel-hero h2, .panel-hero h3, .panel-hero .hero-title {
font-family: var(--ds-font-display) !important;
font-weight: var(--ds-fw-bold) !important;
letter-spacing: -0.02em;
margin-bottom: var(--ds-sp-2);
line-height: 1.2;
}
.panel-hero h1, .panel-hero .hero-title { font-size: var(--ds-fs-5xl) !important; }
.panel-hero h2 { font-size: var(--ds-fs-4xl) !important; }
.panel-hero h3 { font-size: var(--ds-fs-3xl) !important; }
.panel-hero p, .panel-hero .hero-sub, .panel-hero .page-summary {
font-size: var(--ds-fs-md) !important;
font-weight: var(--ds-fw-regular);
margin-bottom: 0;
}
.panel-hero .page-kicker {
font-family: var(--ds-font-sans) !important;
font-size: var(--ds-fs-xs) !important;
font-weight: var(--ds-fw-semibold) !important;
letter-spacing: var(--ds-ls-caps) !important;
text-transform: uppercase !important;
}
/* Compact varyant — dashboard ana sayfa */
.panel-hero.dashboard-hero-compact,
.panel-hero.ds-hero {
padding: var(--ds-sp-8) var(--ds-sp-10) !important;
}
.panel-hero.dashboard-hero-compact h1,
.panel-hero.dashboard-hero-compact h2,
.panel-hero.dashboard-hero-compact h3 {
font-size: var(--ds-fs-3xl) !important;
}
/* Hero mini stats (yan göstergeler) — surface tonu */
html[data-theme="light"] .panel-hero .hero-mini-stat,
html[data-theme="light"] .panel-hero .hero-mini-pill {
background: var(--ui-surface-2) !important;
border: 1px solid var(--ui-border) !important;
color: var(--ui-text) !important;
box-shadow: none !important;
}
html[data-theme="light"] .panel-hero .hero-mini-value {
color: var(--ui-text) !important;
}
html[data-theme="light"] .panel-hero .hero-mini-label {
color: var(--ui-muted) !important;
}
html[data-theme="dark"] .panel-hero .hero-mini-stat,
html[data-theme="dark"] .panel-hero .hero-mini-pill {
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid var(--ui-border) !important;
color: var(--ui-text) !important;
}
/* Visual orbs (panel-visual.css'teki ::before/::after) light mode'da daha hafif */
html[data-theme="light"] .panel-hero::before {
background: radial-gradient(circle, rgba(var(--ui-primary-rgb), 0.10) 0%, transparent 70%) !important;
}
html[data-theme="light"] .panel-hero::after {
background: radial-gradient(circle, rgba(var(--ui-primary-rgb), 0.08) 0%, transparent 70%) !important;
}
/* .hero (renkli alt-sayfa banner) — sadece .panel-hero olmadığında primary gradient kalsın */
.hero:not(.panel-hero) {
border-radius: var(--ds-radius-xl) !important;
padding: var(--ds-sp-12) var(--ds-sp-16) !important;
box-shadow: var(--ds-shadow-sm);
position: relative;
overflow: hidden;
}
.hero:not(.panel-hero) h1, .hero:not(.panel-hero) h2 {
font-family: var(--ds-font-display) !important;
font-weight: var(--ds-fw-bold) !important;
letter-spacing: -0.02em;
color: #fff;
}
.hero:not(.panel-hero) p { color: rgba(255, 255, 255, 0.85); }
/* ---------- 15. Breadcrumb ---------- */
.panel-breadcrumb .breadcrumb {
font-size: var(--ds-fs-sm) !important;
background: transparent;
padding: 0;
margin-bottom: 0;
}
.panel-breadcrumb .breadcrumb-item {
color: var(--ui-muted);
}
.panel-breadcrumb .breadcrumb-item a {
color: var(--ui-muted);
text-decoration: none;
transition: color var(--ds-dur-fast) var(--ds-ease);
}
.panel-breadcrumb .breadcrumb-item a:hover { color: var(--ui-primary); }
.panel-breadcrumb .breadcrumb-item.active { color: var(--ui-text); font-weight: var(--ds-fw-medium); }
.panel-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: '/';
color: var(--ui-muted-soft);
padding: 0 var(--ds-sp-3);
}
/* ---------- 16. Tabs / Nav-pills ---------- */
.nav-tabs {
border-bottom: 1px solid var(--ui-border) !important;
gap: var(--ds-sp-1);
}
.nav-tabs .nav-link {
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
color: var(--ui-muted) !important;
font-weight: var(--ds-fw-medium) !important;
font-size: var(--ds-fs-md);
padding: var(--ds-sp-4) var(--ds-sp-6) !important;
margin-bottom: -1px;
transition: color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}
.nav-tabs .nav-link:hover { color: var(--ui-text) !important; border-bottom-color: var(--ui-border-strong) !important; background: transparent !important; }
.nav-tabs .nav-link.active {
color: var(--ui-primary) !important;
background: transparent !important;
border-bottom-color: var(--ui-primary) !important;
}
.nav-pills .nav-link {
border-radius: var(--ds-radius-md) !important;
font-weight: var(--ds-fw-medium) !important;
font-size: var(--ds-fs-md);
padding: var(--ds-sp-3) var(--ds-sp-5) !important;
color: var(--ui-muted) !important;
}
.nav-pills .nav-link:hover { background: var(--ui-surface-2) !important; color: var(--ui-text) !important; }
.nav-pills .nav-link.active {
background: var(--ui-primary) !important;
color: #fff !important;
}
/* ---------- 17. Pagination ---------- */
.pagination {
gap: var(--ds-sp-1);
}
.page-link {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
color: var(--ui-text) !important;
font-size: var(--ds-fs-md) !important;
font-weight: var(--ds-fw-medium);
border-radius: var(--ds-radius-sm) !important;
padding: var(--ds-sp-3) var(--ds-sp-5) !important;
margin: 0 1px;
transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}
.page-link:hover { background: var(--ui-surface-2) !important; border-color: var(--ui-border-strong) !important; color: var(--ui-text) !important; }
.page-item.active .page-link {
background: var(--ui-primary) !important;
border-color: var(--ui-primary) !important;
color: #fff !important;
}
.page-item.disabled .page-link { color: var(--ui-muted-soft) !important; background: var(--ui-surface) !important; }
/* ---------- 18. Tooltip / Popover ---------- */
.tooltip-inner {
background: #18181b !important;
color: #fafafa !important;
font-size: var(--ds-fs-sm) !important;
font-weight: var(--ds-fw-medium);
padding: var(--ds-sp-3) var(--ds-sp-5);
border-radius: var(--ds-radius-sm);
box-shadow: var(--ds-shadow-md);
}
.tooltip .tooltip-arrow::before { border-top-color: #18181b !important; border-bottom-color: #18181b !important; }
.popover {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border-strong) !important;
border-radius: var(--ds-radius-md);
box-shadow: var(--ds-shadow-lg);
font-size: var(--ds-fs-md);
}
.popover-header {
background: var(--ui-surface-2) !important;
border-bottom: 1px solid var(--ui-border) !important;
font-weight: var(--ds-fw-semibold);
font-size: var(--ds-fs-md);
}
.popover-body { color: var(--ui-text); padding: var(--ds-sp-5); }
/* ---------- 19. Progress ---------- */
.progress {
background: var(--ui-surface-2) !important;
border-radius: var(--ds-radius-pill);
height: 6px;
overflow: hidden;
}
.progress-bar {
background: var(--ui-primary) !important;
border-radius: var(--ds-radius-pill);
}
/* ---------- 20. List groups ---------- */
.list-group-item {
background: var(--ui-surface) !important;
border-color: var(--ui-border) !important;
color: var(--ui-text) !important;
padding: var(--ds-sp-5) var(--ds-sp-6) !important;
font-size: var(--ds-fs-md);
}
.list-group-item:hover { background: var(--ui-surface-2) !important; }
.list-group-item.active { background: rgba(var(--ui-primary-rgb), 0.10) !important; color: var(--ui-text) !important; border-color: rgba(var(--ui-primary-rgb), 0.25) !important; }
/* ---------- 21. Off-canvas ---------- */
.offcanvas {
background: var(--ui-surface) !important;
border-color: var(--ui-border-strong) !important;
}
.offcanvas-header { border-bottom: 1px solid var(--ui-border); padding: var(--ds-sp-6) var(--ds-sp-8); }
.offcanvas-title { font-family: var(--ds-font-display); font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-2xl); }
.offcanvas-body { padding: var(--ds-sp-8); }
/* ---------- 22. Toasts ---------- */
.toast {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border-strong) !important;
border-radius: var(--ds-radius-md) !important;
box-shadow: var(--ds-shadow-lg) !important;
font-size: var(--ds-fs-md);
}
.toast-header {
background: var(--ui-surface-2) !important;
border-bottom: 1px solid var(--ui-border) !important;
color: var(--ui-text);
font-weight: var(--ds-fw-semibold);
}
.toast-body { padding: var(--ds-sp-5) var(--ds-sp-6); color: var(--ui-text); }
/* ---------- 23. Spinners ---------- */
.spinner-border, .spinner-grow { color: var(--ui-primary); }
/* ---------- 24. Code blocks / kbd ---------- */
pre {
background: var(--ui-surface-2) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ds-radius-md) !important;
padding: var(--ds-sp-6) var(--ds-sp-8) !important;
font-size: var(--ds-fs-sm);
line-height: 1.55;
overflow-x: auto;
}
/* M5: Code rengi olarak ui-text kullan — tüm paletlerde WCAG AA garanti */
code:not(pre code) {
background: var(--ui-surface-2);
color: var(--ui-text);
border: 1px solid var(--ui-border);
padding: 1px 6px;
border-radius: var(--ds-radius-xs);
font-size: 0.88em;
}
kbd {
background: var(--ui-surface) !important;
color: var(--ui-text) !important;
border: 1px solid var(--ui-border-strong) !important;
border-bottom-width: 2px !important;
border-radius: var(--ds-radius-xs);
padding: 1px 6px;
font-family: var(--ds-font-mono);
font-size: 0.85em;
box-shadow: var(--ds-shadow-xs);
}
/* ---------- 25. Metric / stat cards (dashboard) ---------- */
.metric-card, .stat-card {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ds-radius-lg) !important;
padding: var(--ds-sp-8) !important;
box-shadow: var(--ds-shadow-xs);
transition: box-shadow var(--ds-dur-base) var(--ds-ease), transform var(--ds-dur-base) var(--ds-ease);
position: relative;
overflow: hidden;
}
.metric-card, .stat-card { will-change: transform; }
.metric-card:hover, .stat-card:hover {
box-shadow: var(--ds-shadow-md);
transform: translateY(-2px);
}
.metric-label, .stat-label {
font-size: var(--ds-fs-xs) !important;
font-weight: var(--ds-fw-semibold) !important;
letter-spacing: var(--ds-ls-caps);
text-transform: uppercase;
color: var(--ui-muted) !important;
margin-bottom: var(--ds-sp-3);
}
.metric-value, .stat-value {
font-family: var(--ds-font-display) !important;
font-size: var(--ds-fs-5xl) !important;
font-weight: var(--ds-fw-bold) !important;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ui-text);
font-variant-numeric: tabular-nums;
}
.metric-delta, .stat-delta {
font-size: var(--ds-fs-sm);
font-weight: var(--ds-fw-medium);
margin-top: var(--ds-sp-3);
display: inline-flex;
align-items: center;
gap: var(--ds-sp-2);
}
.metric-delta.up { color: #16a34a; }
.metric-delta.down { color: #dc2626; }
/* ---------- 26. Selector cards ---------- */
.selector-card {
border-radius: var(--ds-radius-xl) !important;
border: 1px solid var(--ui-border-strong) !important;
box-shadow: var(--ds-shadow-sm) !important;
padding: var(--ds-sp-8) !important;
}
.selector-title {
font-family: var(--ds-font-display) !important;
font-weight: var(--ds-fw-semibold) !important;
font-size: var(--ds-fs-2xl) !important;
letter-spacing: var(--ds-ls-tight);
}
.selector-sub {
font-size: var(--ds-fs-md);
color: var(--ui-muted);
}
/* ---------- 27. Detail modals (custom) ---------- */
.detail-modal,
.detail-modal .modal-content {
border-radius: var(--ds-radius-xl) !important;
border: 1px solid var(--ui-border-strong) !important;
box-shadow: var(--ds-shadow-xl) !important;
}
/* ---------- 28. Search inputs / icons ---------- */
.search-input,
input[type="search"].form-control {
padding-left: var(--ds-sp-12) !important;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 12px center;
background-size: 16px;
}
/* ---------- 29. Avatar ---------- */
.avatar, .user-avatar, .sidebar-user-avatar {
border-radius: var(--ds-radius-pill) !important;
border: 1px solid var(--ui-border);
background: var(--ui-surface-2);
object-fit: cover;
}
/* ---------- 30. Focus ring (universal accessibility) ---------- */
*:focus-visible:not(.btn):not(.form-control):not(.form-select):not(.form-check-input) {
outline: 2px solid var(--ui-primary) !important;
outline-offset: 2px;
border-radius: var(--ds-radius-xs);
}
/* ---------- 31. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- 32. Print-friendly ---------- */
@media print {
body { background: #fff !important; color: #000 !important; }
.sidebar, .top-menu-card, .panel-hero, .btn, .panel-breadcrumb { display: none !important; }
.card { border: 1px solid #ccc !important; box-shadow: none !important; }
}
/* ---------- 33. Splash overlay refinement ---------- */
#td-splash {
background: var(--ui-bg) !important;
}
.td-splash-title {
font-family: var(--ds-font-display) !important;
font-weight: var(--ds-fw-bold) !important;
letter-spacing: var(--ds-ls-tight);
}
.td-splash-sub {
font-family: var(--ds-font-sans) !important;
font-size: var(--ds-fs-md);
color: var(--ui-muted);
letter-spacing: var(--ds-ls-wide);
text-transform: uppercase;
}
/* ---------- 34. Container density utilities ---------- */
.container, .container-fluid, .container-xl, .container-lg {
padding-left: var(--ds-sp-8);
padding-right: var(--ds-sp-8);
}
/* Section spacing — quieter rhythms */
section, .section { margin-bottom: var(--ds-sp-12); }
/* ---------- 35. Mobile refinements ---------- */
@media (max-width: 768px) {
:root {
--ds-fs-base: 13px;
}
.card-body, .modal-body { padding: var(--ds-sp-6) !important; }
.panel-hero { padding: var(--ds-sp-8) !important; }
.panel-hero h1, .panel-hero h2, .panel-hero .hero-title { font-size: var(--ds-fs-3xl) !important; }
.panel-hero h3 { font-size: var(--ds-fs-2xl) !important; }
.table > :not(caption) > * > * { padding: var(--ds-sp-3) var(--ds-sp-4) !important; }
}
/* ════════════ END panel-luxury.css MERGED — panel-v2 begins ════════════ */
/* ══════════════════════════════════════════════════════════════
panel-v2.css — TeknikDanışman Executive Design System
Loads LAST — intentional cascade winner
Design: Tech & SaaS · Trust & Authority · Executive Dashboard
Fonts: Sora (headings) · DM Sans (body/UI) · DM Mono (data)
Colors: Indigo #6366f1 · Teal #0d9488 · Navy sidebar #060c16
══════════════════════════════════════════════════════════════ */
/* ─── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
--v2-accent: #6366f1;
--v2-accent-rgb: 99,102,241;
--v2-accent2: #0d9488;
--v2-accent2-rgb: 13,148,136;
--v2-sidebar: #060c16;
--ui-primary: #6366f1 !important;
--ui-primary-rgb: 99,102,241 !important;
--ui-primary-2: #0d9488 !important;
--ui-bg: #f4f6fb !important;
--ui-surface: #ffffff !important;
--ui-surface-2: #f0f3ff !important;
--ui-surface-3: #e8eeff !important;
--ui-border: rgba(0,0,0,.07) !important;
--ui-border-strong:rgba(0,0,0,.12) !important;
--ui-text: #0e1726 !important;
--ui-muted: #5a6a8a !important;
--ui-muted-soft: #99a8c0 !important;
--ui-danger: #ef4444 !important;
--ui-warning: #f59e0b !important;
--ui-success: #10b981 !important;
--sidebar-bg: #060c16 !important;
--ui-shadow-card: 0 1px 3px rgba(14,23,38,.06),0 1px 2px rgba(14,23,38,.04) !important;
--ui-shadow-card-hover:0 4px 20px rgba(99,102,241,.12),0 2px 8px rgba(14,23,38,.06) !important;
--ui-radius-lg: 14px !important;
--ui-radius-md: 10px !important;
--ui-radius-sm: 6px !important;
--ds-font-sans: 'DM Sans','Segoe UI',system-ui,sans-serif !important;
--ds-font-display: 'Sora','DM Sans',system-ui,sans-serif !important;
--ds-font-mono: 'DM Mono','JetBrains Mono',ui-monospace,monospace !important;
}
/* Dark mode */
html[data-theme="dark"] {
--ui-bg: #080e1a !important;
--ui-surface: #0e1726 !important;
--ui-surface-2: #131f30 !important;
--ui-surface-3: #1a2840 !important;
--ui-border: rgba(255,255,255,.07) !important;
--ui-border-strong:rgba(255,255,255,.14) !important;
--ui-text: #f0f4ff !important;
--ui-muted: #7a90b0 !important;
--ui-muted-soft: #4a607a !important;
--ui-primary: #818cf8 !important;
--ui-primary-rgb: 129,140,248 !important;
--ui-primary-2: #2dd4bf !important;
--ui-danger: #f87171 !important;
--ui-warning: #fbbf24 !important;
--ui-success: #34d399 !important;
--ui-shadow-card: 0 2px 8px rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.15) !important;
--ui-shadow-card-hover:0 6px 24px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.2) !important;
--v2-accent: #818cf8;
--v2-accent-rgb: 129,140,248;
--v2-accent2: #2dd4bf;
}
/* ─── 2. TYPOGRAPHY ─────────────────────────────────────────── */
html, body {
font-family: 'DM Sans','Segoe UI',system-ui,sans-serif !important;
font-size: 14px !important;
letter-spacing: -.008em !important;
-webkit-font-smoothing: antialiased !important;
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.section-card-title,.kpi-value,
.sa-hero-title,.sa-kpi-val,.sa-stat-val {
font-family: 'Sora',system-ui,sans-serif !important;
letter-spacing: -.022em !important;
line-height: 1.2 !important;
}
code,kbd,pre,samp,.font-monospace,[data-tabular] {
font-family: 'DM Mono',ui-monospace,monospace !important;
font-variant-numeric: tabular-nums;
}
/* ─── 3. LAYOUT ─────────────────────────────────────────────── */
body { background: var(--ui-bg) !important; }
#page-progress {
background: linear-gradient(90deg,var(--ui-primary),var(--ui-primary-2)) !important;
box-shadow: 0 0 10px rgba(99,102,241,.5) !important;
}
/* ─── 4. SIDEBAR — daha hafif, nefes alan ────────────────────
Tasarım iyileştirmesi: WCAG AA için kontrast artırıldı (rgba .48 → .62, .32 → .48)
Active state: arka plan ağırlığı azaltıldı, sol border öne çıkarıldı (görsel hiyerarşi netleşti)
Padding artırıldı: linkler nefes alıyor */
.left-sidebar-card {
background: #0a1322 !important;
border: none !important;
border-right: 1px solid rgba(255,255,255,.04) !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.sidebar-head,.sidebar-logo-head {
background: rgba(0,0,0,.2) !important;
border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.sidebar-brand-main {
font-family: 'Sora',sans-serif !important;
font-size: .8rem !important; font-weight: 700 !important;
color: #fff !important; letter-spacing: -.015em !important;
}
.sidebar-brand-sub { color: rgba(255,255,255,.46) !important; font-size: .6rem !important; }
.sidebar-group-title {
font-size: .575rem !important; font-weight: 700 !important;
letter-spacing: .1em !important; text-transform: uppercase !important;
color: rgba(255,255,255,.42) !important;
padding: 1rem .75rem .35rem !important;
background: none !important; border: none !important; margin: 0 !important;
}
.sidebar-section-sep {
height: 1px !important; background: rgba(255,255,255,.05) !important;
margin: .65rem .5rem !important; border: none !important; opacity: 1 !important;
}
.sidebar-link,.sidebar-link-aux,.sidebar-link-utility {
color: rgba(255,255,255,.62) !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 6px !important;
padding: .55rem .7rem !important;
font-size: .79rem !important; font-weight: 400 !important;
transition: background .12s,color .12s !important;
transform: none !important; box-shadow: none !important;
position: relative !important;
}
.sidebar-link:hover,.sidebar-link-aux:hover {
background: rgba(255,255,255,.05) !important;
color: rgba(255,255,255,.92) !important;
}
.sidebar-link.active,.sidebar-main-link.active {
background: rgba(129,140,248,.08) !important;
color: #fff !important;
border-color: transparent !important;
font-weight: 600 !important;
}
.sidebar-link.active::before,.sidebar-main-link.active::before {
content: '' !important;
position: absolute !important; left: 0 !important; top: 22% !important; bottom: 22% !important;
width: 3px !important; background: #818cf8 !important;
border-radius: 0 3px 3px 0 !important;
}
.sidebar-badge {
font-size: .6rem !important; font-weight: 700 !important;
padding: .1rem .4rem !important;
background: rgba(129,140,248,.22) !important; color: #a5b4fc !important;
border-radius: 99px !important; border: none !important;
}
.sidebar-footer {
border-top: 1px solid rgba(255,255,255,.05) !important;
background: transparent !important; padding: .375rem .375rem .5rem !important;
}
.sidebar-build-note { font-family:'DM Mono',monospace !important; font-size:.58rem !important; color:rgba(255,255,255,.16) !important; }
.icon-label { display:flex !important; align-items:center !important; gap:.5rem !important; }
.icon-label .bi { font-size:.875rem !important; }
/* ─── 5. TOPBAR ─────────────────────────────────────────────── */
.menu-hero-greeting {
background: rgba(8,14,26,.88) !important;
backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
border-radius: 0 !important; box-shadow: none !important;
padding: .625rem 1.5rem !important; gap: .75rem !important;
}
html[data-theme="light"] .menu-hero-greeting {
background: rgba(244,246,251,.94) !important;
border-bottom: 1px solid rgba(99,102,241,.1) !important;
}
.menu-hero-greeting-name {
font-family: 'Sora',sans-serif !important;
font-size: .875rem !important; font-weight: 600 !important;
color: var(--ui-text) !important; letter-spacing: -.015em !important;
}
.menu-hero-greeting-role {
font-size: .63rem !important; font-weight: 600 !important;
background: rgba(99,102,241,.12) !important; color: var(--ui-primary) !important;
border: 1px solid rgba(99,102,241,.2) !important;
border-radius: 99px !important; padding: .125rem .5rem !important;
}
html[data-theme="dark"] .menu-hero-greeting-role { background:rgba(129,140,248,.15) !important; color:#a5b4fc !important; border-color:rgba(129,140,248,.22) !important; }
.menu-hero-greeting-date { font-size: .7rem !important; color: var(--ui-muted) !important; }
/* Topbar status dot */
.topbar-status-dot {
display: inline-block; width: 7px; height: 7px;
border-radius: 50%; background: #34d399;
box-shadow: 0 0 0 3px rgba(52,211,153,.15);
animation: v2-pulse-status 2s infinite;
flex-shrink: 0;
}
@keyframes v2-pulse-status {
0%,100% { box-shadow: 0 0 0 2px rgba(52,211,153,.15); }
50% { box-shadow: 0 0 0 5px rgba(52,211,153,.05); }
}
.top-menu-tool-btn {
background: var(--ui-surface) !important; border-color: var(--ui-border-strong) !important;
color: var(--ui-muted) !important; border-radius: var(--ui-radius-md) !important;
padding: .3rem .5rem !important; transition: all .12s !important;
}
.top-menu-tool-btn:hover {
background: var(--ui-surface-2) !important; color: var(--ui-primary) !important;
border-color: rgba(99,102,241,.3) !important;
}
html[data-theme="dark"] .top-menu-tool-btn { background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.1) !important; color:rgba(255,255,255,.48) !important; }
html[data-theme="dark"] .top-menu-tool-btn:hover { background:rgba(129,140,248,.12) !important; color:#a5b4fc !important; border-color:rgba(129,140,248,.25) !important; }
/* Dropdown */
.dropdown-menu {
border: 1px solid var(--ui-border-strong) !important;
border-radius: var(--ui-radius-lg) !important;
box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
background: var(--ui-surface) !important; padding: .375rem !important;
}
html[data-theme="dark"] .dropdown-menu { background: var(--ui-surface-2) !important; }
.dropdown-item { border-radius: 6px !important; font-size:.8125rem !important; padding:.45rem .75rem !important; color:var(--ui-text) !important; transition:background .12s !important; }
.dropdown-item:hover { background:rgba(99,102,241,.08) !important; color:var(--ui-primary) !important; }
html[data-theme="dark"] .dropdown-item:hover { background:rgba(129,140,248,.1) !important; color:#a5b4fc !important; }
.dropdown-item.text-danger:hover { background:rgba(239,68,68,.08) !important; color:#ef4444 !important; }
.dropdown-divider { border-color: var(--ui-border) !important; margin: .25rem !important; }
/* ─── 6. TRUST & AUTHORITY HERO ─────────────────────────────── */
/* Grid pattern background applied to panel-hero and kpi-hero */
.panel-hero,
.kpi-hero-card,
.dash-hero-card {
position: relative !important;
border-radius: var(--ui-radius-lg) !important;
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border-strong) !important;
overflow: hidden !important;
margin-bottom: 1.5rem !important;
}
/* Grid pattern kaldırıldı — radial glow tek başına atmosfer için yeterli (görsel gürültü azaltma) */
.panel-hero::before,
.kpi-hero-card::before,
.dash-hero-card::before { display: none !important; }
/* Radial glows */
.panel-hero::after,
.kpi-hero-card::after,
.dash-hero-card::after {
content: '' !important;
position: absolute !important;
top: -80px !important; left: -80px !important;
width: 400px !important; height: 350px !important;
background: radial-gradient(circle, rgba(99,102,241,.14) 0%, transparent 70%) !important;
filter: blur(40px) !important;
pointer-events: none !important; z-index: 0 !important;
}
/* Hero inner content above pseudo-elements */
.panel-hero > *,
.kpi-hero-card > *,
.dash-hero-card > * { position: relative !important; z-index: 1 !important; }
/* Hero eyebrow badge — blinking dot */
.hero-eyebrow, .page-kicker {
display: inline-flex !important; align-items: center !important; gap: .4rem !important;
font-size: .68rem !important; font-weight: 700 !important;
letter-spacing: .09em !important; text-transform: uppercase !important;
color: var(--ui-primary) !important;
background: rgba(99,102,241,.08) !important;
border: 1px solid rgba(99,102,241,.18) !important;
border-radius: 99px !important; padding: .25rem .7rem !important;
margin-bottom: .625rem !important;
}
html[data-theme="dark"] .hero-eyebrow,
html[data-theme="dark"] .page-kicker { color:#a5b4fc !important; background:rgba(129,140,248,.1) !important; border-color:rgba(129,140,248,.2) !important; }
.hero-eyebrow::before, .page-kicker::before {
content: '' !important;
display: inline-block !important; width: 6px !important; height: 6px !important;
background: var(--ui-primary) !important; border-radius: 50% !important;
}
html[data-theme="dark"] .hero-eyebrow::before,
html[data-theme="dark"] .page-kicker::before { background: #818cf8 !important; }
/* v2-blink kaldırıldı — dekoratif animasyon dikkati veriden uzaklaştırıyordu.
Sadece gerçekten "live" durum belirten .topbar-status-dot'ta pulse korunuyor. */
/* Gradient hero title */
.hero-title-gradient {
background: linear-gradient(135deg, #6366f1 0%, #0d9488 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
html[data-theme="dark"] .hero-title-gradient {
background: linear-gradient(135deg, #818cf8 0%, #2dd4bf 100%) !important;
-webkit-background-clip: text !important; background-clip: text !important;
}
/* Hero teal glow (right side) */
.hero-teal-glow {
position: absolute !important;
bottom: -60px !important; right: 10% !important;
width: 320px !important; height: 260px !important;
background: radial-gradient(circle, rgba(13,148,136,.1) 0%, transparent 70%) !important;
filter: blur(40px) !important;
pointer-events: none !important; z-index: 0 !important;
}
/* Trust badges strip */
.trust-badges-strip {
display: flex !important; align-items: center !important; gap: 1.5rem !important;
padding: .75rem 1.5rem !important;
border-top: 1px solid var(--ui-border) !important;
background: rgba(0,0,0,.04) !important;
overflow-x: auto !important; scrollbar-width: none !important;
}
html[data-theme="dark"] .trust-badges-strip { background: rgba(0,0,0,.2) !important; }
.trust-badges-strip::-webkit-scrollbar { display: none; }
.trust-badge-item {
display: flex !important; align-items: center !important; gap: .375rem !important;
font-size: .73rem !important; font-weight: 500 !important;
color: var(--ui-muted) !important; white-space: nowrap !important; flex-shrink: 0 !important;
}
.trust-badge-item .bi { color: var(--ui-primary); font-size: .875rem; }
html[data-theme="dark"] .trust-badge-item .bi { color: #818cf8; }
/* ─── 7. EXECUTIVE SECTION HEADERS ──────────────────────────── */
.exec-section-head {
display: flex !important; align-items: flex-end !important;
justify-content: space-between !important; gap: 1rem !important;
margin-bottom: 1.25rem !important;
}
.exec-eyebrow {
font-size: .63rem !important; font-weight: 700 !important;
letter-spacing: .1em !important; text-transform: uppercase !important;
color: var(--ui-primary) !important; margin-bottom: .2rem !important;
}
html[data-theme="dark"] .exec-eyebrow { color: #a5b4fc !important; }
.exec-title {
font-family: 'Sora',sans-serif !important;
font-size: 1.25rem !important; font-weight: 600 !important;
color: var(--ui-text) !important; letter-spacing: -.022em !important;
}
.section-card-title {
font-family: 'Sora',sans-serif !important;
letter-spacing: -.02em !important; color: var(--ui-text) !important;
}
.section-card-kicker {
font-size: .6rem !important; font-weight: 700 !important;
letter-spacing: .1em !important; text-transform: uppercase !important;
color: var(--ui-primary) !important; margin-bottom: .2rem !important;
}
html[data-theme="dark"] .section-card-kicker { color: #a5b4fc !important; }
.section-card-meta { font-size: .75rem !important; color: var(--ui-muted) !important; }
.section-card-head { border-bottom: 1px solid var(--ui-border) !important; }
/* Period selector */
.period-selector {
display: flex !important;
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border-strong) !important;
border-radius: var(--ui-radius-md) !important; padding: .2rem !important;
}
.period-btn {
padding: .3rem .7rem !important; background: none !important; border: none !important;
border-radius: 7px !important; font-size: .73rem !important; font-weight: 500 !important;
font-family: 'DM Sans',sans-serif !important; color: var(--ui-muted) !important;
cursor: pointer !important; transition: all .15s !important;
}
.period-btn.active { background: var(--ui-primary) !important; color: #fff !important; }
.period-btn:hover:not(.active) { background: var(--ui-surface-2) !important; color: var(--ui-text) !important; }
/* Export button */
.export-btn {
display: flex !important; align-items: center !important; gap: .375rem !important;
padding: .375rem .8rem !important;
background: var(--ui-surface) !important; border: 1px solid var(--ui-border-strong) !important;
border-radius: var(--ui-radius-md) !important; font-size: .73rem !important;
font-family: 'DM Sans',sans-serif !important; color: var(--ui-muted) !important;
cursor: pointer !important; transition: all .15s !important;
}
.export-btn:hover { background: var(--ui-surface-2) !important; color: var(--ui-text) !important; }
/* ─── 8. KPI GLANCE CARDS ────────────────────────────────────── */
.kpi-glance-card {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-lg) !important;
box-shadow: var(--ui-shadow-card) !important;
padding: 1.125rem !important;
position: relative !important; overflow: hidden !important;
transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
.kpi-glance-card::before {
content: '' !important; position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important;
background: var(--ui-border) !important;
border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0 !important;
}
.kpi-glance-card.kpi-primary::before { background: linear-gradient(90deg,#6366f1,#0d9488) !important; }
.kpi-glance-card.kpi-danger::before { background: var(--ui-danger) !important; }
.kpi-glance-card.kpi-warning::before { background: var(--ui-warning) !important; }
.kpi-glance-card.kpi-teal::before { background: var(--ui-primary-2) !important; }
.kpi-glance-card.kpi-success::before { background: var(--ui-success) !important; }
html[data-theme="dark"] .kpi-glance-card.kpi-primary::before { background: linear-gradient(90deg,#818cf8,#2dd4bf) !important; }
.kpi-glance-card:hover {
transform: translateY(-2px) !important;
box-shadow: var(--ui-shadow-card-hover) !important;
border-color: rgba(99,102,241,.2) !important;
}
html[data-theme="dark"] .kpi-glance-card:hover { border-color: rgba(129,140,248,.18) !important; }
.kpi-value {
font-family: 'Sora',sans-serif !important;
letter-spacing: -.03em !important; line-height: 1 !important;
animation: v2-count-up .5s ease-out both !important;
}
@keyframes v2-count-up {
from { opacity:0; transform:translateY(6px); }
to { opacity:1; transform:translateY(0); }
}
.kpi-label {
font-size: .67rem !important; font-weight: 700 !important;
letter-spacing: .05em !important; text-transform: uppercase !important;
color: var(--ui-muted) !important; opacity: 1 !important;
}
.kpi-sub { font-size: .7rem !important; color: var(--ui-muted) !important; opacity: 1 !important; }
.kpi-ico { border-radius: 8px !important; }
/* Trend badges */
.kpi-trend-badge {
display: inline-flex !important; align-items: center !important; gap: .2rem !important;
font-size: .63rem !important; font-weight: 700 !important;
padding: .15rem .45rem !important; border-radius: 99px !important;
}
.kpi-trend-badge.positive { background: rgba(16,185,129,.12) !important; color: #10b981 !important; }
.kpi-trend-badge.negative { background: rgba(239,68,68,.12) !important; color: #ef4444 !important; }
.kpi-trend-badge.neutral { background: rgba(245,158,11,.12) !important; color: #f59e0b !important; }
html[data-theme="dark"] .kpi-trend-badge.positive { background:rgba(52,211,153,.14) !important; color:#34d399 !important; }
html[data-theme="dark"] .kpi-trend-badge.negative { background:rgba(248,113,113,.14) !important; color:#f87171 !important; }
/* Progress bars in KPI */
.kpi-progress-bar { height: 4px !important; background: var(--ui-surface-2) !important; border-radius: 99px !important; overflow: hidden !important; margin-bottom: .35rem !important; }
.kpi-progress-fill { height: 100% !important; background: var(--ui-primary) !important; border-radius: 99px !important; transition: width .6s cubic-bezier(.4,0,.2,1) !important; }
html[data-theme="dark"] .kpi-progress-fill { background: #818cf8 !important; }
.kpi-progress-labels { display:flex !important; justify-content:space-between !important; font-size:.63rem !important; color:var(--ui-muted) !important; }
/* Sparkline container */
.kpi-sparkline { height: 30px !important; margin-top: auto !important; overflow: hidden !important; }
.kpi-sparkline svg { width: 100% !important; height: 100% !important; display: block !important; }
/* ─── 9. CARDS ───────────────────────────────────────────────── */
.glass-card,
.card:not(.left-sidebar-card):not(.top-menu-card) {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-lg) !important;
box-shadow: var(--ui-shadow-card) !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.glass-card:hover,
.card:not(.left-sidebar-card):not(.top-menu-card):hover {
box-shadow: var(--ui-shadow-card-hover) !important;
border-color: rgba(99,102,241,.18) !important;
transform: translateY(-1px) !important;
}
html[data-theme="dark"] .glass-card:hover,
html[data-theme="dark"] .card:not(.left-sidebar-card):not(.top-menu-card):hover { border-color:rgba(129,140,248,.16) !important; }
/* Chart cards */
.chart-card {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-lg) !important;
padding: 1.25rem !important;
box-shadow: var(--ui-shadow-card) !important;
}
.chart-label {
font-size: .63rem !important; font-weight: 700 !important;
letter-spacing: .1em !important; text-transform: uppercase !important;
color: var(--ui-muted) !important; margin-bottom: .2rem !important;
}
.chart-title {
font-family: 'Sora',sans-serif !important;
font-size: .9375rem !important; font-weight: 600 !important;
color: var(--ui-text) !important; letter-spacing: -.015em !important;
}
.chart-legend { display:flex !important; align-items:center !important; gap:.75rem !important; font-size:.7rem !important; color:var(--ui-muted) !important; }
.legend-dot { display:inline-block !important; width:8px !important; height:8px !important; border-radius:50% !important; margin-right:.25rem !important; background:var(--c) !important; }
/* ─── 10. TABLES ─────────────────────────────────────────────── */
.table-modern thead th,
table.table thead > tr > th {
font-size: .65rem !important; font-weight: 700 !important;
letter-spacing: .07em !important; text-transform: uppercase !important;
color: var(--ui-muted) !important;
background: var(--ui-surface-2) !important;
border-bottom: 1px solid var(--ui-border-strong) !important;
padding: .6rem .875rem !important; white-space: nowrap !important;
}
html[data-theme="dark"] table.table thead > tr > th { background:rgba(255,255,255,.03) !important; }
table.table > :not(caption) > * > * {
border-bottom-color: var(--ui-border) !important;
padding: .75rem .875rem !important; font-size: .8rem !important;
color: var(--ui-text) !important; vertical-align: middle !important;
}
table.table tbody tr:hover > td { background: rgba(99,102,241,.04) !important; }
html[data-theme="dark"] table.table tbody tr:hover > td { background:rgba(129,140,248,.04) !important; }
table.table tbody tr:last-child td { border-bottom: none !important; }
/* Customer cell */
.table-customer { display:flex !important; align-items:center !important; gap:.625rem !important; }
.table-customer-avatar {
width: 30px !important; height: 30px !important;
border-radius: var(--ui-radius-sm) !important;
display: flex !important; align-items: center !important; justify-content: center !important;
font-size: .625rem !important; font-weight: 700 !important; color: #fff !important;
flex-shrink: 0 !important;
}
.table-customer-name { font-weight: 500 !important; font-size:.8rem !important; }
.table-customer-id { font-family:'DM Mono',monospace !important; font-size:.7rem !important; color:var(--ui-muted) !important; }
/* Table number cells */
.table-num { font-family:'DM Mono',monospace !important; font-size:.8rem !important; font-variant-numeric:tabular-nums !important; }
.table-num.revenue { color: #10b981 !important; font-weight: 500 !important; }
html[data-theme="dark"] .table-num.revenue { color: #34d399 !important; }
/* Sector tags */
.sector-tag {
font-size: .69rem !important; font-weight: 500 !important;
padding: .18rem .55rem !important;
background: var(--ui-surface-2) !important; border: 1px solid var(--ui-border) !important;
border-radius: 99px !important; color: var(--ui-muted) !important;
}
/* Status chips */
.status-chip {
font-size: .665rem !important; font-weight: 600 !important;
letter-spacing: .02em !important;
padding: .2rem .6rem !important; border-radius: 99px !important; white-space: nowrap !important;
}
.status-active { background:rgba(16,185,129,.12) !important; color:#10b981 !important; }
.status-warn { background:rgba(245,158,11,.12) !important; color:#f59e0b !important; }
.status-critical { background:rgba(239,68,68,.12) !important; color:#ef4444 !important; }
html[data-theme="dark"] .status-active { background:rgba(52,211,153,.14) !important; color:#34d399 !important; }
html[data-theme="dark"] .status-warn { background:rgba(245,158,11,.14) !important; color:#fbbf24 !important; }
html[data-theme="dark"] .status-critical { background:rgba(248,113,113,.14) !important; color:#f87171 !important; }
/* Row action btn */
.row-action-btn {
width: 28px !important; height: 28px !important; border-radius: 6px !important;
background: none !important; border: 1px solid var(--ui-border) !important;
color: var(--ui-muted) !important; cursor: pointer !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
transition: all .15s !important;
}
.row-action-btn:hover { background: var(--ui-primary) !important; color: #fff !important; border-color: var(--ui-primary) !important; }
/* Table footer / pagination */
.table-footer {
display:flex !important; align-items:center !important;
justify-content:space-between !important;
padding-top: .875rem !important; border-top: 1px solid var(--ui-border) !important; margin-top: .5rem !important;
}
.table-count { font-size: .73rem !important; color: var(--ui-muted) !important; }
.page-btn {
width: 28px !important; height: 28px !important; border-radius: 6px !important;
background: none !important; border: 1px solid var(--ui-border) !important;
color: var(--ui-muted) !important; cursor: pointer !important; font-size: .73rem !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
transition: all .15s !important;
}
.page-btn:hover:not(:disabled):not(.active) { background: var(--ui-surface-2) !important; color: var(--ui-text) !important; }
.page-btn.active { background: var(--ui-primary) !important; color: #fff !important; border-color: var(--ui-primary) !important; }
.page-btn:disabled { opacity: .35 !important; cursor: not-allowed !important; }
/* Table search */
.table-search {
padding: .375rem .75rem !important;
background: var(--ui-surface-2) !important; border: 1px solid var(--ui-border-strong) !important;
border-radius: var(--ui-radius-sm) !important; font-size: .8rem !important;
font-family: 'DM Sans',sans-serif !important; color: var(--ui-text) !important;
outline: none !important; transition: border-color .15s !important;
}
.table-search::placeholder { color: var(--ui-muted) !important; }
.table-search:focus { border-color: var(--ui-primary) !important; }
/* ─── 11. ALERT PANEL ────────────────────────────────────────── */
.alert-panel-card, .activity-panel-card {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-lg) !important;
overflow: hidden !important;
box-shadow: var(--ui-shadow-card) !important;
}
.panel-header-v2 {
display: flex !important; align-items: center !important; justify-content: space-between !important;
padding: .875rem 1.125rem .625rem !important;
border-bottom: 1px solid var(--ui-border) !important;
}
.panel-eyebrow-v2 {
font-size: .63rem !important; font-weight: 700 !important;
letter-spacing: .1em !important; text-transform: uppercase !important;
color: var(--ui-muted) !important;
}
.alert-count-badge {
font-size: .625rem !important; font-weight: 700 !important;
padding: .15rem .45rem !important;
background: rgba(239,68,68,.12) !important; color: var(--ui-danger) !important;
border-radius: 99px !important;
}
.refresh-btn {
font-size: .7rem !important; color: var(--ui-primary) !important;
background: none !important; border: none !important;
cursor: pointer !important; font-weight: 500 !important;
}
html[data-theme="dark"] .refresh-btn { color: #a5b4fc !important; }
.alert-item {
display: flex !important; align-items: center !important; gap: .625rem !important;
padding: .625rem 1.125rem !important;
border-bottom: 1px solid var(--ui-border) !important;
transition: background .15s !important;
}
.alert-item:last-child { border-bottom: none !important; }
.alert-item:hover { background: rgba(255,255,255,.03) !important; }
html[data-theme="light"] .alert-item:hover { background: rgba(0,0,0,.025) !important; }
.alert-icon-wrap {
width: 28px !important; height: 28px !important; border-radius: 7px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
flex-shrink: 0 !important; font-size: .8rem !important;
}
.alert-icon-wrap.danger { background:rgba(239,68,68,.12) !important; color:var(--ui-danger) !important; }
.alert-icon-wrap.warn { background:rgba(245,158,11,.12) !important; color:var(--ui-warning) !important; }
.alert-icon-wrap.info { background:rgba(96,165,250,.12) !important; color:#60a5fa !important; }
.alert-icon-wrap.success{ background:rgba(16,185,129,.12) !important; color:var(--ui-success) !important; }
.alert-title { font-size: .79rem !important; font-weight: 500 !important; color: var(--ui-text) !important; }
.alert-meta { font-size: .69rem !important; color: var(--ui-muted) !important; }
.alert-action-btn {
font-size: .69rem !important; font-weight: 600 !important;
padding: .2rem .5rem !important;
background: var(--ui-surface-2) !important; border: 1px solid var(--ui-border-strong) !important;
border-radius: 5px !important; color: var(--ui-muted) !important;
cursor: pointer !important; font-family: 'DM Sans',sans-serif !important;
transition: all .15s !important;
}
.alert-action-btn:hover { background: var(--ui-primary) !important; color: #fff !important; border-color: transparent !important; }
.show-all-btn {
display: block !important; width: 100% !important; padding: .625rem !important;
background: none !important; border: none !important; border-top: 1px solid var(--ui-border) !important;
text-align: center !important; font-size: .74rem !important; font-weight: 500 !important;
color: var(--ui-primary) !important; cursor: pointer !important;
font-family: 'DM Sans',sans-serif !important; transition: background .15s !important;
}
.show-all-btn:hover { background: rgba(99,102,241,.06) !important; }
html[data-theme="dark"] .show-all-btn { color: #a5b4fc !important; }
/* ─── 12. ACTIVITY FEED ─────────────────────────────────────── */
.activity-item {
display: flex !important; align-items: center !important; gap: .625rem !important;
padding: .5rem 1.125rem !important; transition: background .15s !important;
}
.activity-item:hover { background: rgba(255,255,255,.02) !important; }
html[data-theme="light"] .activity-item:hover { background: rgba(0,0,0,.025) !important; }
.activity-avatar {
width: 28px !important; height: 28px !important; border-radius: 50% !important;
display: flex !important; align-items: center !important; justify-content: center !important;
font-size: .6rem !important; font-weight: 700 !important; color: #fff !important;
flex-shrink: 0 !important;
}
.activity-text { font-size: .79rem !important; color: var(--ui-text) !important; }
.activity-time { font-size: .675rem !important; color: var(--ui-muted) !important; }
.activity-tag {
flex-shrink: 0 !important; font-size: .625rem !important; font-weight: 600 !important;
padding: .125rem .5rem !important; border-radius: 99px !important;
}
.tag-hardware { background:rgba(99,102,241,.12) !important; color:var(--ui-primary) !important; }
.tag-payment { background:rgba(16,185,129,.12) !important; color:#10b981 !important; }
.tag-license { background:rgba(245,158,11,.12) !important; color:#f59e0b !important; }
.tag-support { background:rgba(96,165,250,.12) !important; color:#60a5fa !important; }
html[data-theme="dark"] .tag-hardware { color:#a5b4fc !important; }
html[data-theme="dark"] .tag-payment { color:#34d399 !important; }
html[data-theme="dark"] .tag-license { color:#fbbf24 !important; }
/* ─── 13. BUTTONS ────────────────────────────────────────────── */
.btn { font-family:'DM Sans',sans-serif !important; font-weight:500 !important; border-radius:var(--ui-radius-md) !important; transition:all .12s ease !important; letter-spacing:-.005em !important; }
.btn-primary,.btn-primary:active { background:var(--ui-primary) !important; border-color:var(--ui-primary) !important; color:#fff !important; box-shadow:none !important; }
.btn-primary:hover { background:#5254cc !important; border-color:#5254cc !important; box-shadow:0 4px 14px rgba(99,102,241,.32) !important; }
html[data-theme="dark"] .btn-primary { background:#818cf8 !important; border-color:#818cf8 !important; color:#0e1726 !important; }
html[data-theme="dark"] .btn-primary:hover { background:#a5b4fc !important; border-color:#a5b4fc !important; }
.btn-outline-primary { color:var(--ui-primary) !important; border-color:var(--ui-primary) !important; background:transparent !important; }
.btn-outline-primary:hover { background:var(--ui-primary) !important; color:#fff !important; }
.btn-outline-secondary { color:var(--ui-muted) !important; border-color:var(--ui-border-strong) !important; background:transparent !important; }
.btn-outline-secondary:hover { background:var(--ui-surface-2) !important; color:var(--ui-text) !important; }
html[data-theme="dark"] .btn-outline-secondary { color:rgba(255,255,255,.5) !important; border-color:rgba(255,255,255,.12) !important; }
html[data-theme="dark"] .btn-outline-secondary:hover { background:rgba(255,255,255,.07) !important; color:rgba(255,255,255,.9) !important; }
.btn-success { background:var(--ui-success) !important; border-color:var(--ui-success) !important; color:#fff !important; }
.btn-danger { background:var(--ui-danger) !important; border-color:var(--ui-danger) !important; color:#fff !important; }
.btn-warning { background:var(--ui-warning) !important; border-color:var(--ui-warning) !important; color:#0f172a !important; }
/* CTA primary (hero button) */
.cta-primary-v2 {
display:inline-flex !important; align-items:center !important; gap:.5rem !important;
padding:.65rem 1.25rem !important; background:var(--ui-primary) !important; color:#fff !important;
border:none !important; border-radius:var(--ui-radius-md) !important;
font-size:.875rem !important; font-weight:600 !important; font-family:'DM Sans',sans-serif !important;
cursor:pointer !important; transition:all .2s !important;
box-shadow:0 4px 16px rgba(99,102,241,.3) !important;
}
.cta-primary-v2:hover { background:#5254cc !important; box-shadow:0 6px 20px rgba(99,102,241,.42) !important; transform:translateY(-1px) !important; }
/* ─── 14. FORM CONTROLS ──────────────────────────────────────── */
.form-control,.form-select {
font-family:'DM Sans',sans-serif !important; font-size:.8375rem !important;
border-radius:var(--ui-radius-md) !important; border-color:var(--ui-border-strong) !important;
background:var(--ui-surface) !important; color:var(--ui-text) !important;
transition:border-color .12s,box-shadow .12s !important;
}
.form-control:focus,.form-select:focus {
border-color:var(--ui-primary) !important;
box-shadow:0 0 0 3px rgba(99,102,241,.15) !important;
background:var(--ui-surface) !important;
}
html[data-theme="dark"] .form-control:focus,html[data-theme="dark"] .form-select:focus { box-shadow:0 0 0 3px rgba(129,140,248,.18) !important; }
.form-label { font-size:.775rem !important; font-weight:500 !important; color:var(--ui-text) !important; margin-bottom:.3rem !important; }
.form-text { font-size:.72rem !important; color:var(--ui-muted) !important; }
.form-control::placeholder,.form-select::placeholder { color:var(--ui-muted-soft) !important; }
/* ─── 15. BADGES ─────────────────────────────────────────────── */
.badge { font-family:'DM Sans',sans-serif !important; font-size:.67rem !important; font-weight:600 !important; border-radius:6px !important; padding:.2rem .5rem !important; }
.badge.bg-primary,.badge.text-bg-primary { background:rgba(99,102,241,.13) !important; color:var(--ui-primary) !important; }
html[data-theme="dark"] .badge.bg-primary,html[data-theme="dark"] .badge.text-bg-primary { background:rgba(129,140,248,.16) !important; color:#a5b4fc !important; }
.badge.bg-danger,.badge.text-bg-danger { background:rgba(239,68,68,.12) !important; color:var(--ui-danger) !important; }
.badge.bg-warning,.badge.text-bg-warning { background:rgba(245,158,11,.12) !important; color:#92400e !important; }
html[data-theme="dark"] .badge.bg-warning,html[data-theme="dark"] .badge.text-bg-warning { color:#fbbf24 !important; }
.badge.bg-success,.badge.text-bg-success { background:rgba(16,185,129,.12) !important; color:#065f46 !important; }
html[data-theme="dark"] .badge.bg-success,html[data-theme="dark"] .badge.text-bg-success { color:#34d399 !important; }
.badge.bg-secondary,.badge.text-bg-secondary { background:rgba(100,116,139,.1) !important; color:var(--ui-muted) !important; }
/* ─── 16. PROGRESS ───────────────────────────────────────────── */
.progress { border-radius:99px !important; background:var(--ui-surface-2) !important; overflow:visible !important; height:6px !important; }
.progress-bar { border-radius:99px !important; background:var(--ui-primary) !important; box-shadow:none !important; }
html[data-theme="dark"] .progress-bar { background:#818cf8 !important; }
/* ─── 17. ALERTS ─────────────────────────────────────────────── */
.alert { border-radius:var(--ui-radius-lg) !important; font-size:.8125rem !important; border-width:1px !important; }
.alert-primary { background:rgba(99,102,241,.07) !important; border-color:rgba(99,102,241,.2) !important; color:var(--ui-primary) !important; }
.alert-success { background:rgba(16,185,129,.07) !important; border-color:rgba(16,185,129,.2) !important; color:var(--ui-success) !important; }
.alert-danger { background:rgba(239,68,68,.07) !important; border-color:rgba(239,68,68,.2) !important; color:var(--ui-danger) !important; }
.alert-warning { background:rgba(245,158,11,.07) !important; border-color:rgba(245,158,11,.2) !important; color:var(--ui-warning) !important; }
/* ─── 18. TABS ───────────────────────────────────────────────── */
.nav-tabs { border-bottom:1px solid var(--ui-border) !important; gap:.125rem !important; }
.nav-tabs .nav-link { font-size:.8125rem !important; font-weight:500 !important; color:var(--ui-muted) !important; border:none !important; border-radius:6px 6px 0 0 !important; padding:.5rem .875rem !important; transition:color .12s,background .12s !important; }
.nav-tabs .nav-link:hover { color:var(--ui-text) !important; background:rgba(99,102,241,.06) !important; }
.nav-tabs .nav-link.active { color:var(--ui-primary) !important; background:transparent !important; border-bottom:2px solid var(--ui-primary) !important; font-weight:600 !important; }
html[data-theme="dark"] .nav-tabs .nav-link.active { color:#a5b4fc !important; border-bottom-color:#818cf8 !important; }
.nav-pills .nav-link { font-size:.8rem !important; font-weight:500 !important; border-radius:var(--ui-radius-md) !important; color:var(--ui-muted) !important; padding:.35rem .75rem !important; }
.nav-pills .nav-link.active { background:var(--ui-primary) !important; color:#fff !important; }
/* ─── 19. MODAL ──────────────────────────────────────────────── */
.modal-content { border-radius:var(--ui-radius-lg) !important; border:1px solid var(--ui-border-strong) !important; box-shadow:0 20px 60px rgba(0,0,0,.15) !important; background:var(--ui-surface) !important; }
html[data-theme="dark"] .modal-content { background:var(--ui-surface-2) !important; }
.modal-header { border-bottom:1px solid var(--ui-border) !important; padding:1rem 1.25rem .875rem !important; }
.modal-title { font-family:'Sora',sans-serif !important; font-size:1rem !important; font-weight:600 !important; letter-spacing:-.015em !important; }
.modal-footer { border-top:1px solid var(--ui-border) !important; }
/* ─── 20. BREADCRUMB ─────────────────────────────────────────── */
.panel-breadcrumb .breadcrumb { font-size:.78rem !important; margin-bottom:0 !important; }
.panel-breadcrumb .breadcrumb-item a { color:var(--ui-muted) !important; text-decoration:none !important; }
.panel-breadcrumb .breadcrumb-item.active { color:var(--ui-text) !important; font-weight:500 !important; }
.breadcrumb-item + .breadcrumb-item::before { color:var(--ui-muted) !important; }
/* ─── 21. DONUT CHARTS ───────────────────────────────────────── */
.donut-chart-container { display:flex !important; align-items:center !important; gap:1rem !important; }
.donut-legend { display:flex !important; flex-direction:column !important; gap:.375rem !important; }
.donut-legend-item { display:flex !important; align-items:center !important; gap:.4rem !important; font-size:.7rem !important; color:var(--ui-muted) !important; }
.donut-legend-item span { width:8px !important; height:8px !important; border-radius:2px !important; flex-shrink:0 !important; display:inline-block !important; }
.donut-legend-item strong { color:var(--ui-text) !important; margin-left:auto !important; padding-left:.5rem !important; }
.kpi-donut-val { font-family:'Sora',sans-serif !important; font-weight:700 !important; color:var(--ui-text) !important; }
/* ─── 22. SUPER ADMIN SIDEBAR ────────────────────────────────── */
.sa-sidebar { background:#060c16 !important; border-right:1px solid rgba(255,255,255,.05) !important; }
.sa-sidebar-header { background:rgba(0,0,0,.3) !important; border-bottom:1px solid rgba(255,255,255,.05) !important; }
.sa-brand-icon { background:rgba(129,140,248,.15) !important; border-color:rgba(129,140,248,.2) !important; color:#a5b4fc !important; }
.sa-brand-text { font-family:'Sora',sans-serif !important; font-size:.8375rem !important; font-weight:700 !important; color:#fff !important; letter-spacing:-.015em !important; }
.sa-brand-sub { color:rgba(255,255,255,.32) !important; }
.sa-menu-label { font-size:.575rem !important; font-weight:700 !important; letter-spacing:.1em !important; color:rgba(255,255,255,.26) !important; padding-left:1.1rem !important; }
.sa-nav-link { color:rgba(255,255,255,.48) !important; border-left:3px solid transparent !important; border-radius:0 8px 8px 0 !important; font-size:.8rem !important; font-weight:400 !important; transition:background .12s,color .12s !important; }
.sa-nav-link:hover { background:rgba(255,255,255,.055) !important; color:rgba(255,255,255,.85) !important; }
.sa-nav-link.active { background:rgba(129,140,248,.14) !important; color:#fff !important; font-weight:600 !important; border-left-color:#818cf8 !important; }
.sa-nav-link-danger { color:rgba(248,113,113,.65) !important; }
.sa-nav-link-danger:hover { background:rgba(248,113,113,.08) !important; color:#f87171 !important; }
.sa-sidebar-footer { background:rgba(0,0,0,.15) !important; border-top:1px solid rgba(255,255,255,.05) !important; }
.sa-user-name { color:rgba(255,255,255,.85) !important; }
.sa-user-role { color:rgba(129,140,248,.8) !important; opacity:1 !important; }
/* ─── 23. SUPER ADMIN TOPBAR ─────────────────────────────────── */
.sa-topbar { background:var(--ui-surface) !important; border-bottom:1px solid var(--ui-border) !important; backdrop-filter:blur(12px) !important; }
html[data-theme="dark"] .sa-topbar { background:rgba(8,14,26,.9) !important; border-bottom-color:rgba(255,255,255,.06) !important; }
.sa-topbar-btn { border-radius:var(--ui-radius-md) !important; border-color:var(--ui-border-strong) !important; color:var(--ui-muted) !important; }
.sa-topbar-btn:hover { background:rgba(99,102,241,.08) !important; color:var(--ui-primary) !important; border-color:rgba(99,102,241,.3) !important; }
html[data-theme="dark"] .sa-topbar-btn { border-color:rgba(255,255,255,.1) !important; color:rgba(255,255,255,.45) !important; }
html[data-theme="dark"] .sa-topbar-btn:hover { background:rgba(129,140,248,.1) !important; color:#a5b4fc !important; border-color:rgba(129,140,248,.22) !important; }
/* ─── 24. SUPER ADMIN HERO — Trust & Authority ───────────────── */
.sa-page-hero {
position: relative !important; overflow: hidden !important;
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border-strong) !important;
border-radius: var(--ui-radius-lg) !important;
}
/* Grid pattern */
.sa-page-hero::before {
content: '' !important; position: absolute !important; inset: 0 !important;
background-image:
linear-gradient(rgba(99,102,241,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(99,102,241,.055) 1px, transparent 1px) !important;
background-size: 36px 36px !important; pointer-events: none !important;
}
html[data-theme="dark"] .sa-page-hero::before {
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important;
}
/* Glow */
.sa-page-hero::after {
content: '' !important; position: absolute !important;
top: -60px !important; left: -60px !important;
width: 320px !important; height: 280px !important;
background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%) !important;
filter: blur(40px) !important; pointer-events: none !important;
}
.sa-page-hero > * { position: relative !important; z-index: 1 !important; }
.sa-hero-kicker {
font-size: .63rem !important; font-weight: 700 !important;
letter-spacing: .1em !important; text-transform: uppercase !important;
color: var(--ui-primary) !important;
}
html[data-theme="dark"] .sa-hero-kicker { color:#a5b4fc !important; }
.sa-hero-title { font-family:'Sora',sans-serif !important; font-size:1.375rem !important; font-weight:700 !important; letter-spacing:-.025em !important; color:var(--ui-text) !important; }
/* ─── 25. SUPER ADMIN KPI CARDS ──────────────────────────────── */
.sa-kpi-card {
background: var(--ui-surface) !important;
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius-lg) !important;
box-shadow: var(--ui-shadow-card) !important;
padding: 1.125rem 1.25rem !important;
position: relative !important; overflow: hidden !important;
transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
.sa-kpi-card::before {
content: '' !important; position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important;
background: linear-gradient(90deg,#6366f1,#0d9488) !important;
border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0 !important;
}
html[data-theme="dark"] .sa-kpi-card::before { background:linear-gradient(90deg,#818cf8,#2dd4bf) !important; }
.sa-kpi-card:hover { transform:translateY(-2px) !important; box-shadow:var(--ui-shadow-card-hover) !important; border-color:rgba(99,102,241,.2) !important; }
html[data-theme="dark"] .sa-kpi-card:hover { border-color:rgba(129,140,248,.18) !important; }
.sa-kpi-val { font-family:'Sora',sans-serif !important; font-size:1.875rem !important; font-weight:700 !important; letter-spacing:-.03em !important; line-height:1 !important; }
.sa-kpi-label { font-size:.68rem !important; font-weight:700 !important; letter-spacing:.04em !important; text-transform:uppercase !important; color:var(--ui-muted) !important; margin-top:.2rem !important; }
.sa-kpi-icon { width:44px !important; height:44px !important; border-radius:10px !important; font-size:1.2rem !important; }
.sa-kpi-trend { font-size:.7rem !important; color:var(--ui-muted) !important; }
/* ─── 26. SUPER ADMIN TABLE ──────────────────────────────────── */
.sa-content .table > thead > tr > th {
font-size: .65rem !important; font-weight:700 !important; letter-spacing:.07em !important;
text-transform:uppercase !important; color:var(--ui-muted) !important;
background:var(--ui-surface-2) !important; border-bottom:1px solid var(--ui-border-strong) !important;
}
html[data-theme="dark"] .sa-content .table > thead > tr > th { background:rgba(255,255,255,.025) !important; }
/* ─── 27. SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--ui-border-strong); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--ui-muted-soft); }
.left-sidebar-card ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); }
.left-sidebar-card ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.16); }
.sa-sidebar ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); }
/* ─── 28. FOCUS ──────────────────────────────────────────────── */
:focus-visible { outline:2px solid var(--ui-primary) !important; outline-offset:2px !important; border-radius:var(--ui-radius-sm) !important; }
/* ─── 29. OFFCANVAS / MOBILE SIDEBAR ─────────────────────────── */
.offcanvas { background:#060c16 !important; border-right:1px solid rgba(255,255,255,.06) !important; }
.offcanvas-header { border-bottom:1px solid rgba(255,255,255,.06) !important; }
.offcanvas-title { font-family:'Sora',sans-serif !important; color:#fff !important; }
.btn-close { filter:invert(1) !important; opacity:.4 !important; }
/* ─── 30. MISC ───────────────────────────────────────────────── */
.av-circle-hero { border-radius:8px !important; border:2px solid rgba(99,102,241,.25) !important; }
.notif-badge { background:var(--ui-danger) !important; font-size:.55rem !important; border-radius:99px !important; }
.empty-state { background:transparent !important; }
.empty-state-icon { color:var(--ui-muted) !important; opacity:.4 !important; }
/* Line stat (chart) */
.line-stat-val { font-family:'Sora',sans-serif !important; font-size:1.125rem !important; font-weight:700 !important; color:var(--ui-text) !important; letter-spacing:-.02em !important; }
.line-stat-lbl { font-size:.65rem !important; color:var(--ui-muted) !important; }
.trend-up { color:var(--ui-success) !important; }
.trend-down { color:var(--ui-danger) !important; }
/* ─── 31. MICRO ANIMATIONS ───────────────────────────────────── */
@keyframes v2-fade-in-up {
from { opacity:0; transform:translateY(14px); }
to { opacity:1; transform:translateY(0); }
}
.panel-hero,.kpi-hero-card,.dash-hero-card { animation:v2-fade-in-up .5s ease-out both !important; }
.kpi-glance-card:nth-child(1) .kpi-value { animation-delay:.05s !important; }
.kpi-glance-card:nth-child(2) .kpi-value { animation-delay:.10s !important; }
.kpi-glance-card:nth-child(3) .kpi-value { animation-delay:.15s !important; }
.kpi-glance-card:nth-child(4) .kpi-value { animation-delay:.20s !important; }
.kpi-glance-card:nth-child(5) .kpi-value { animation-delay:.25s !important; }
.sa-kpi-card:nth-child(1) .sa-kpi-val { animation:v2-count-up .5s .05s ease-out both !important; }
.sa-kpi-card:nth-child(2) .sa-kpi-val { animation:v2-count-up .5s .10s ease-out both !important; }
.sa-kpi-card:nth-child(3) .sa-kpi-val { animation:v2-count-up .5s .15s ease-out both !important; }
.sa-kpi-card:nth-child(4) .sa-kpi-val { animation:v2-count-up .5s .20s ease-out both !important; }
/* ─── 31. TABLE STYLES (Light/Dark Mode) ─────────────────────── */
.table-responsive {
background: var(--ui-surface) !important;
border-radius: var(--ui-radius-lg) !important;
}
.table {
background: var(--ui-surface) !important;
color: var(--ui-text) !important;
margin-bottom: 0 !important;
}
.table tbody tr {
background: var(--ui-surface) !important;
color: var(--ui-text) !important;
border-bottom-color: var(--ui-border) !important;
transition: background-color 0.12s ease !important;
}
.table tbody tr:hover {
background: var(--ui-surface-2) !important;
color: var(--ui-text) !important;
}
.table thead th {
background: var(--ui-surface-2) !important;
color: var(--ui-muted) !important;
border-bottom-color: var(--ui-border-strong) !important;
}
/* Touch — disable hover transforms */
@media (hover:none) {
.glass-card:hover,.card:not(.left-sidebar-card):not(.top-menu-card):hover,
.kpi-glance-card:hover,.sa-kpi-card:hover,.panel-hero:hover { transform:none !important; }
}
/* ─── 32. MOBILE RESPONSIVE ──────────────────────────────────── */
@media (max-width:992px) {
.left-sidebar-card { display:none !important; }
.main-content-wrapper,.main-content,.content-wrapper,.page-wrapper { margin-left:0 !important; width:100% !important; max-width:100% !important; padding-left:0 !important; }
.menu-hero-greeting { padding:.5rem .875rem !important; }
.sa-topbar { padding:.5rem .875rem !important; }
.sa-sidebar { transform:translateX(-100%) !important; }
.sa-sidebar.open { transform:translateX(0) !important; }
.sa-content { margin-left:0 !important; }
}
@media (max-width:768px) {
.menu-hero-greeting { flex-wrap:wrap !important; padding:.5rem .75rem !important; }
.menu-hero-greeting-actions { gap:.25rem !important; }
.top-menu-tool-btn { padding:.25rem .375rem !important; font-size:.75rem !important; }
.kpi-glance-card { padding:.75rem .875rem !important; }
.kpi-value { font-size:1.5rem !important; }
.glass-card,.card:not(.left-sidebar-card):not(.top-menu-card) { border-radius:10px !important; }
.table-responsive { overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }
table.table > :not(caption) > * > * { padding:.5rem .625rem !important; font-size:.775rem !important; }
.modal-dialog { margin:.5rem !important; max-width:calc(100vw - 1rem) !important; }
.form-control,.form-select { font-size:.875rem !important; }
.btn { padding:.375rem .75rem !important; font-size:.8125rem !important; }
.btn-sm { padding:.2rem .5rem !important; font-size:.75rem !important; }
.panel-breadcrumb { display:none !important; }
.sa-content { padding:.75rem !important; }
.sa-page-hero { padding:1rem !important; }
.sa-hero-title { font-size:1.1rem !important; }
.sa-kpi-card { padding:.875rem 1rem !important; }
.sa-kpi-val { font-size:1.5rem !important; }
.kpi-grid,.exec-main-grid { grid-template-columns:1fr !important; }
.exec-right-panel { display:grid !important; grid-template-columns:1fr 1fr !important; }
}
@media (max-width:480px) {
.row > [class*="col-"] { flex:0 0 100% !important; max-width:100% !important; }
.row > .col-6,.row > [class*="col-6"] { flex:0 0 50% !important; max-width:50% !important; }
.sa-hero-title { font-size:1rem !important; }
.kpi-value { font-size:1.35rem !important; }
.exec-right-panel { grid-template-columns:1fr !important; }
}
/* ─── 31. UTILITY CLASSES (inline style migration) ──────────────
Tasarım sisteminin disipline kalması için inline style'ları bu class'lara taşıyın */
.h-hero-pad { padding: 1.5rem 1.75rem 0 !important; }
.h-display { font-family: 'Sora', sans-serif !important; letter-spacing: -.025em !important; }
.h-hero-desc { font-size: .8rem !important; color: var(--ui-muted) !important; line-height: 1.5 !important; max-width: 420px !important; }
.h-status-dot-sm { width: 6px !important; height: 6px !important; }
@media (max-width:767.98px){
.h-hero-pad { padding: 1rem 1rem 0 !important; }
.h-hero-desc { max-width: 100% !important; }
}
/* ════════════════════════════════════════════════════════════════
MERGED CONTENT FROM panel-office.css (Sprint 4 konsolidasyonu)
Office tema layer — body.office-theme override'ları + col-md-3 mobile fix
Office tokenları ana --ui-* sistemine bağlandı (Adım 6 öncesinde).
Cascade: bu dosya EN SON yüklendiği için, office content panel-v2'nin EN SONUNA eklenir.
════════════════════════════════════════════════════════════════ */
/**
* TeknikDanışman Panel - Office Style (Metronic Demo 6)
* Metronic v9.4.10 Demo 6 tasarım sistemi
*/
:root {
--sidebar-w: 270px;
/* Office tema değişkenleri ana token sistemine bağlandı (panel-v2 --ui-* tokenları)
Çift renk sistemi (#3b82f6 vs #6366f1) çakışması giderildi */
--muted-bg: var(--ui-bg, #f4f6fb);
--card-bg: var(--ui-surface, #ffffff);
--border-color: var(--ui-border, #e5e7eb);
--text-primary: var(--ui-text, #0e1726);
--text-muted: var(--ui-muted, #5a6a8a);
--primary-color: var(--ui-primary, #6366f1);
}
html[data-theme="dark"] {
/* Dark mode: ana token sisteminden inherit edilir, override gereksiz */
}
/* ═══════════════════════════════════════════════════════════════════════════
BODY & PAGE
═════════════════════════════════════════════════════════════════════════ */
body {
background-color: var(--muted-bg) !important;
background-image: none !important;
color: var(--text-primary) !important;
}
body::before,
body::after {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
SIDEBAR
═════════════════════════════════════════════════════════════════════════ */
.left-sidebar-card {
background: var(--muted-bg) !important;
border: none !important;
border-right: 1px solid var(--border-color) !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.container.soft-enter > .row > .col-md-3 {
background: var(--muted-bg) !important;
}
/* Sidebar Header */
.sidebar-head,
.sidebar-logo-head {
background: var(--muted-bg) !important;
border-bottom: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
}
.sidebar-brand-main {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.sidebar-brand-sub {
color: var(--text-muted) !important;
}
/* Sidebar Menu Group Titles */
.sidebar-group-title {
color: var(--text-muted) !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
background: none !important;
border: none !important;
}
/* Sidebar Menu Items */
.sidebar-link,
.sidebar-link-aux,
.sidebar-main-link {
color: var(--text-primary) !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 6px !important;
padding: 0.5rem 0.6rem !important;
font-size: 0.875rem !important;
transition: all 0.15s ease !important;
}
.sidebar-link:hover,
.sidebar-link-aux:hover,
.sidebar-main-link:hover {
background: rgba(0, 0, 0, 0.05) !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
html[data-theme="dark"] .sidebar-link:hover,
html[data-theme="dark"] .sidebar-link-aux:hover,
html[data-theme="dark"] .sidebar-main-link:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: var(--border-color) !important;
}
.sidebar-link.active,
.sidebar-main-link.active {
background: var(--card-bg) !important;
border-color: var(--border-color) !important;
color: var(--primary-color) !important;
font-weight: 600 !important;
}
html[data-theme="dark"] .sidebar-link.active,
html[data-theme="dark"] .sidebar-main-link.active {
background: rgba(255, 255, 255, 0.1) !important;
border-color: var(--border-color) !important;
color: #60a5fa !important;
}
.sidebar-link.active::before,
.sidebar-main-link.active::before {
display: none !important;
}
/* Sidebar Footer */
.sidebar-footer {
border-top: 1px solid var(--border-color) !important;
background: var(--muted-bg) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
CONTENT AREA
═════════════════════════════════════════════════════════════════════════ */
.container.soft-enter > .row > .col-md-9 {
background: var(--muted-bg) !important;
padding: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
HERO / HEADER SECTIONS
═════════════════════════════════════════════════════════════════════════ */
.panel-hero::before,
.panel-hero::after,
.kpi-hero-card::before,
.kpi-hero-card::after,
.dash-hero-card::before,
.dash-hero-card::after {
display: none !important;
}
.panel-hero,
.kpi-hero-card,
.dash-hero-card,
.menu-hero-greeting {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 8px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
color: var(--text-primary) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
CARDS
═════════════════════════════════════════════════════════════════════════ */
.card {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 8px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
color: var(--text-primary) !important;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.card-header {
background: rgba(0, 0, 0, 0.02) !important;
border-bottom: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
font-weight: 600 !important;
}
html[data-theme="dark"] .card-header {
background: rgba(255, 255, 255, 0.05) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
METRIC / KPI CARDS
═════════════════════════════════════════════════════════════════════════ */
.metric-card,
.kpi-glance-card {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 8px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
TABLES
═════════════════════════════════════════════════════════════════════════ */
.table {
--bs-table-bg: var(--card-bg) !important;
--bs-table-border-color: var(--border-color) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
color: var(--text-primary) !important;
}
.table thead th {
background: rgba(0, 0, 0, 0.02) !important;
color: var(--text-muted) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
font-size: 0.7rem !important;
letter-spacing: 0.05em !important;
border-bottom: 1px solid var(--border-color) !important;
}
html[data-theme="dark"] .table thead th {
background: rgba(255, 255, 255, 0.05) !important;
color: var(--text-muted) !important;
}
.table tbody td {
border-bottom: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
vertical-align: middle !important;
}
.table tbody tr:hover {
background-color: rgba(0, 0, 0, 0.02) !important;
}
html[data-theme="dark"] .table tbody tr:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
BADGES
═════════════════════════════════════════════════════════════════════════ */
.badge,
.badge-success {
background: rgba(16, 185, 129, 0.1) !important;
color: #10b981 !important;
border: 1px solid rgba(16, 185, 129, 0.2) !important;
border-radius: 4px !important;
font-weight: 600 !important;
}
.badge-warning {
background: rgba(245, 158, 11, 0.1) !important;
color: #f59e0b !important;
border: 1px solid rgba(245, 158, 11, 0.2) !important;
}
.badge-danger {
background: rgba(239, 68, 68, 0.1) !important;
color: #ef4444 !important;
border: 1px solid rgba(239, 68, 68, 0.2) !important;
}
.badge-info {
background: rgba(59, 130, 246, 0.1) !important;
color: var(--primary-color) !important;
border: 1px solid rgba(59, 130, 246, 0.2) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
BUTTONS & CONTROLS
═════════════════════════════════════════════════════════════════════════ */
.top-menu-tool-btn {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-muted) !important;
border-radius: 6px !important;
transition: all 0.12s ease !important;
}
.top-menu-tool-btn:hover {
background: rgba(0, 0, 0, 0.05) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
html[data-theme="dark"] .top-menu-tool-btn:hover {
background: rgba(255, 255, 255, 0.08) !important;
color: var(--text-primary) !important;
}
.btn-outline-secondary {
border-color: var(--border-color) !important;
color: var(--text-muted) !important;
}
.btn-outline-secondary:hover {
background: rgba(0, 0, 0, 0.05) !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
background: rgba(255, 255, 255, 0.08) !important;
}
.btn-primary {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
FORMS
═════════════════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
border-radius: 6px !important;
}
.form-control:focus,
.form-select:focus {
background: var(--card-bg) !important;
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
color: var(--text-primary) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
DROPDOWNS & MENUS
═════════════════════════════════════════════════════════════════════════ */
.dropdown-menu {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}
.dropdown-item {
color: var(--text-primary) !important;
}
.dropdown-item:hover,
.dropdown-item.active {
background: rgba(0, 0, 0, 0.05) !important;
color: var(--primary-color) !important;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item.active {
background: rgba(255, 255, 255, 0.1) !important;
}
.notif-dropdown {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}
.notif-item {
border-bottom: 1px solid var(--border-color) !important;
}
.notif-item-title {
color: var(--text-primary) !important;
font-weight: 500 !important;
}
.notif-item-meta {
color: var(--text-muted) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
DASHBOARD CHART FIX
═════════════════════════════════════════════════════════════════════════ */
.donut-chart-wrap {
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.section-card-head > div:last-child {
flex-shrink: 0 !important;
min-width: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
SIDEBAR + CONTENT LAYOUT FIX (en sona yüklendikleri için priority yüksek)
═════════════════════════════════════════════════════════════════════════ */
.container.soft-enter .row {
display: flex !important;
flex-wrap: wrap !important;
}
/* Mobil versiyonda sidebar gizle, offcanvas'ı kullan */
.container.soft-enter .row > .col-md-3.pt-3 {
display: none !important;
}
.container.soft-enter .row > .col-md-9.pt-3 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
@media (min-width: 768px) {
.container.soft-enter .row > .col-md-3.pt-3 {
display: block !important;
flex: 0 0 220px !important;
max-width: 220px !important;
transition: flex 0.3s ease, max-width 0.3s ease !important;
}
.container.soft-enter .row > .col-md-9.pt-3 {
flex: 1 1 auto !important;
max-width: none !important;
transition: flex 0.3s ease !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
SIDEBAR COLLAPSED STATE (Mini Mode - Icons Only)
═════════════════════════════════════════════════════════════════════════ */
html[data-sidebar-state="collapsed"] .container.soft-enter .row > .col-md-3.pt-3 {
flex: 0 0 70px !important;
max-width: 70px !important;
min-width: 70px !important;
width: 70px !important;
}
html[data-sidebar-state="collapsed"] .container.soft-enter .row > .col-md-9.pt-3 {
flex: 1 1 auto !important;
max-width: none !important;
}
/* Hide text in collapsed mode, keep icons centered */
html[data-sidebar-state="collapsed"] .sidebar-link .icon-label > span:last-child,
html[data-sidebar-state="collapsed"] .sidebar-main-link .icon-label > span:last-child,
html[data-sidebar-state="collapsed"] .sidebar-link-aux .icon-label > span:last-child {
display: none !important;
}
html[data-sidebar-state="collapsed"] .icon-label {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
html[data-sidebar-state="collapsed"] .sidebar-link,
html[data-sidebar-state="collapsed"] .sidebar-link-aux,
html[data-sidebar-state="collapsed"] .sidebar-main-link {
padding: 0.75rem !important;
justify-content: center !important;
}
/* Hide sidebar brand text in collapsed mode */
html[data-sidebar-state="collapsed"] .sidebar-brand-sub,
html[data-sidebar-state="collapsed"] .sidebar-link-text {
display: none !important;
}
/* Adjust sidebar header height */
html[data-sidebar-state="collapsed"] .sidebar-head {
height: 70px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* End of panel-office.css */
/* ════════════ END panel-office.css MERGED ════════════ */