/* ==========================================================================
   MüşavirPort — Premium marka katmanı (Velzon üzerine)
   Layout Velzon app.min.css tarafından yönetilir; burası tipografi, renk,
   yüzey (kart/tablo/buton) ve özel bileşenlerin premium cilası.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Marka */
  --vz-primary: #3b76ef;
  --vz-primary-rgb: 59, 118, 239;
  --vz-link-color: #3b76ef;
  --vz-link-hover-color: #2c5fd0;

  --mp-primary: #3b76ef;
  --mp-primary-600: #2f66dd;
  --mp-primary-700: #2554bd;
  --mp-accent: #6a5cf0;
  --mp-ink: #101828;
  --mp-ink-2: #344054;
  --mp-muted: #667085;
  --mp-line: rgba(16, 24, 40, .08);
  --mp-line-soft: rgba(16, 24, 40, .05);
  --mp-surface: #ffffff;
  --mp-canvas: #f5f7fb;

  /* Yükseklik (elevation) — yumuşak, katmanlı */
  --mp-sh-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.04);
  --mp-sh-2: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -14px rgba(16,24,40,.16);
  --mp-sh-3: 0 2px 4px rgba(16,24,40,.04), 0 24px 48px -20px rgba(16,24,40,.24);
  --mp-radius: 14px;

  /* Koyu sidebar (kullanıcı isteği: siyaha yakın) */
  --vz-vertical-menu-bg-dark: #16181f;
  --vz-vertical-menu-title-color-dark: #79808f;
}

[data-bs-theme="dark"] {
  --mp-ink: #e9ecf1;
  --mp-ink-2: #c3c9d4;
  --mp-muted: #9aa2b1;
  --mp-line: rgba(255,255,255,.08);
  --mp-line-soft: rgba(255,255,255,.05);
  --mp-surface: #212529;
  --mp-canvas: #1a1d21;
  --mp-sh-1: 0 1px 2px rgba(0,0,0,.35);
  --mp-sh-2: 0 12px 28px -14px rgba(0,0,0,.6);
  --mp-sh-3: 0 24px 48px -20px rgba(0,0,0,.7);
}

/* ----------------------------------------------------------- tipografi -- */
body {
  font-family: "Inter", hkgrotesk, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.005em;
  color: var(--mp-ink-2);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .card-title, .kpi-val {
  font-family: "Plus Jakarta Sans", "Inter", hkgrotesk, sans-serif;
  letter-spacing: -.02em;
  color: var(--mp-ink);
}
.text-muted { color: var(--mp-muted) !important; }
/* Rakamlar hizalı (tablo/KPI/para) */
.kpi-val, .mp-num, table td, table th, .h1, .h2, .h3, .h4 { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- zemin ---- */
body { background-color: var(--mp-canvas); }
.main-content, .page-content { background-color: transparent; }
.page-content { padding-top: calc(70px + 1.6rem); }
[data-bs-theme="light"] body {
  background-image:
    radial-gradient(900px 420px at 78% -8%, rgba(59,118,239,.07), transparent 60%),
    radial-gradient(700px 380px at 5% 0%, rgba(106,92,240,.05), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------ sidebar --- */
[data-sidebar="dark"] .navbar-menu {
  background: linear-gradient(180deg, #191c24 0%, #14161d 100%) !important;
  border-right: 1px solid rgba(255,255,255,.05) !important;
}
[data-sidebar="dark"] .navbar-brand-box {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar-brand-box .logo { display: flex; align-items: center; height: 100%; }

/* Marka işareti (sidebar + topbar) */
.mp-wordmark {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.06rem;
  letter-spacing: -.03em; color: var(--mp-ink);
}
.mp-wordmark-dark, .mp-wordmark-dark span { color: #fff; }
.mp-mark {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; color: #fff; font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--mp-primary), var(--mp-accent));
  box-shadow: 0 6px 16px -6px rgba(59,118,239,.85);
}
.app-menu #scrollbar { max-height: calc(100vh - 70px); overflow-y: auto; scrollbar-width: thin; }
.app-menu #scrollbar::-webkit-scrollbar { width: 5px; }
.app-menu #scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 9px; }

#navbar-nav .menu-title span {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
#navbar-nav .nav-link.menu-link {
  position: relative; border-radius: 10px; margin: 2px 10px; padding: .62rem .8rem;
  font-weight: 500; color: #a7adba;
  transition: background .18s ease, color .18s ease;
}
#navbar-nav .nav-link.menu-link i { font-size: 1.05rem; opacity: .9; }
#navbar-nav .nav-link.menu-link:hover { background: rgba(255,255,255,.055); color: #fff; }
#navbar-nav .nav-link.menu-link.active {
  background: linear-gradient(90deg, rgba(59,118,239,.26), rgba(106,92,240,.10));
  color: #fff !important; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(59,118,239,.25);
}
#navbar-nav .nav-link.menu-link.active::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--mp-primary), var(--mp-accent));
}
#navbar-nav .nav-link.menu-link.active i { opacity: 1; color: #8fb2ff; }

/* -------------------------------------------------------------- topbar -- */
#page-topbar {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--mp-line);
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
}
[data-bs-theme="dark"] #page-topbar { background: rgba(33,37,41,.82); }
#page-topbar .navbar-header h5 { color: var(--mp-ink); letter-spacing: -.02em; }
.btn-topbar { transition: background .18s ease, transform .18s ease; }
.btn-topbar:hover { transform: translateY(-1px); }
.topbar-user .avatar-xs {
  background: linear-gradient(135deg, var(--mp-primary), var(--mp-accent)) !important;
  width: 34px; height: 34px; box-shadow: 0 2px 8px rgba(59,118,239,.35);
}
.topbar-badge { box-shadow: 0 0 0 2px var(--mp-surface); }

/* ------------------------------------------------------------- kartlar -- */
.card {
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-sh-1);
  background: var(--mp-surface);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--mp-line-soft);
  padding: 1rem 1.15rem;
  border-radius: var(--mp-radius) var(--mp-radius) 0 0;
}
.card-header .card-title, .card-header h5, .card-header h6 { margin-bottom: 0; letter-spacing: -.015em; }
.card-body { padding: 1.15rem; }

/* KPI kartları — degrade vurgu + yüzen ikon */
.kpi-card { position: relative; overflow: hidden; }
.kpi-card::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px;
  border-radius: 50%; background: radial-gradient(circle, rgba(59,118,239,.08), transparent 70%);
  pointer-events: none;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--mp-sh-2); border-color: rgba(59,118,239,.25); }
.kpi-card .kpi-icon {
  width: 48px; height: 48px; border-radius: 13px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 22px; flex: 0 0 48px;
  box-shadow: inset 0 0 0 1px rgba(16,24,40,.04);
}
.kpi-val { font-size: 1.72rem; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
a:hover .kpi-card { transform: translateY(-3px); box-shadow: var(--mp-sh-2); }

/* ------------------------------------------------------------- butonlar -- */
.btn { border-radius: 10px; font-weight: 500; letter-spacing: -.01em; transition: all .18s ease; }
.btn-lg { border-radius: 12px; }
.btn-primary, .btn-mp {
  background: linear-gradient(135deg, var(--mp-primary) 0%, var(--mp-primary-600) 100%);
  border-color: var(--mp-primary-600); color: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 16px -8px rgba(59,118,239,.7);
}
.btn-primary:hover, .btn-mp:hover, .btn-primary:focus, .btn-mp:focus {
  background: linear-gradient(135deg, var(--mp-primary-600) 0%, var(--mp-primary-700) 100%);
  border-color: var(--mp-primary-700); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 12px 22px -10px rgba(59,118,239,.75);
}
.btn-primary:active, .btn-mp:active { transform: translateY(0); }
.btn-light, .btn-outline-secondary { border-color: var(--mp-line); }
.btn-soft-primary { background: rgba(59,118,239,.1); color: var(--mp-primary); border: none; }
.btn-soft-primary:hover { background: rgba(59,118,239,.18); color: var(--mp-primary-700); }

/* -------------------------------------------------------------- formlar -- */
.form-control, .form-select {
  border-radius: 10px; border-color: var(--mp-line);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: rgba(59,118,239,.55);
  box-shadow: 0 0 0 4px rgba(59,118,239,.12);
}
.form-label { font-weight: 500; color: var(--mp-ink-2); font-size: .82rem; }
.input-group-text { border-radius: 10px; border-color: var(--mp-line); background: var(--mp-canvas); }

/* ------------------------------------------------------------- tablolar -- */
.table { --vz-table-border-color: var(--mp-line-soft); }
.table > thead th {
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; color: var(--mp-muted); background: transparent;
  border-bottom: 1px solid var(--mp-line) !important; padding-top: .65rem; padding-bottom: .65rem;
}
.table > tbody > tr { transition: background .14s ease; }
.table > tbody > tr:hover > * { background-color: rgba(59,118,239,.045); }
[data-bs-theme="dark"] .table > tbody > tr:hover > * { background-color: rgba(255,255,255,.035); }
.table > tbody > tr > td { border-color: var(--mp-line-soft); vertical-align: middle; }
.cursor-pointer { cursor: pointer; }

/* ------------------------------------------------------ durum rozetleri -- */
.badge-status {
  padding: .32rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem; letter-spacing: -.005em;
  box-shadow: inset 0 0 0 1px rgba(16,24,40,.04);
}
.badge-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85;
}
.status-Pending   { background:#eef0f4; color:#667085; }
.status-Filed     { background:#dcf7f0; color:#0a9382; }
.status-Acknowledged { background:#dceafb; color:#1f7fc0; }
.status-Overdue   { background:#fde6e1; color:#dc4b36; }
.status-Uploaded  { background:#dcf7f0; color:#0a9382; }
.status-UnderReview { background:#fef1d8; color:#c98a12; }
.status-Accepted  { background:#dcf7f0; color:#0a9382; }
.status-Rejected  { background:#fde6e1; color:#dc4b36; }
.status-Active    { background:#dcf7f0; color:#0a9382; }
.status-Trial     { background:#dceafb; color:#1f7fc0; }
.status-PastDue, .status-Suspended, .status-Cancelled { background:#fde6e1; color:#dc4b36; }
[data-bs-theme="dark"] .status-Pending { background:#2b303a; color:#a9b0bd; }
[data-bs-theme="dark"] .badge-status { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

/* ------------------------------------------------- takvim & dönem matrisi -- */
.mat-cell {
  display: inline-block; width: 20px; height: 20px; border-radius: 6px; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
  box-shadow: inset 0 0 0 1px rgba(16,24,40,.05);
}
.mat-cell:hover { transform: scale(1.18); box-shadow: 0 4px 10px rgba(16,24,40,.18); }
.mat-Pending { background:#dfe3e9; }
.mat-Filed { background: linear-gradient(135deg,#0ab39c,#089b87); }
.mat-Acknowledged { background: linear-gradient(135deg,#3ba7e8,#2286c4); }
.mat-Overdue { background: linear-gradient(135deg,#f8705c,#e04b34); }

/* ------------------------------------------------------------- toastlar -- */
.mp-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 4000; display: flex; flex-direction: column; gap: .55rem; }
.mp-toast {
  background: var(--mp-surface); border: 1px solid var(--mp-line); border-left: 3px solid var(--mp-primary);
  box-shadow: var(--mp-sh-3); border-radius: 12px; padding: .75rem 1rem;
  min-width: 260px; max-width: 380px; display: flex; align-items: center; gap: .6rem;
  font-size: .88rem; color: var(--mp-ink-2);
  transition: opacity .3s; animation: mpSlideIn .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes mpSlideIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------ açılırlar -- */
.dropdown-menu {
  border: 1px solid var(--mp-line); border-radius: 12px; box-shadow: var(--mp-sh-3);
  padding: .35rem; overflow: hidden;
}
.dropdown-item { border-radius: 8px; padding: .5rem .7rem; font-size: .88rem; }
.modal-content { border: none; border-radius: 16px; box-shadow: var(--mp-sh-3); }
.modal-header { border-bottom: 1px solid var(--mp-line-soft); padding: 1.1rem 1.25rem; }
.modal-footer { border-top: 1px solid var(--mp-line-soft); }
.progress { border-radius: 999px; background: var(--mp-line-soft); }
.progress-bar { background: linear-gradient(90deg, var(--mp-primary), var(--mp-accent)); border-radius: 999px; }

/* --------------------------------------------------------------- footer -- */
.footer { background: transparent; border-top: 1px solid var(--mp-line); color: var(--mp-muted); font-size: .82rem; }

/* --------------------------------------------- FullCalendar / ApexCharts -- */
[data-bs-theme="dark"] .fc {
  --fc-border-color:#2b303a; --fc-page-bg-color:transparent;
  --fc-neutral-bg-color:#242832; --fc-today-bg-color:rgba(59,118,239,.18);
}
.apexcharts-tooltip {
  border: 1px solid var(--mp-line) !important; border-radius: 10px !important;
  box-shadow: var(--mp-sh-2) !important;
}

/* -------------------------------------------------------------- yardımcı -- */
.mp-hairline { border-top: 1px solid var(--mp-line); }
.mp-glass {
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
}
.mp-gradient-text {
  background: linear-gradient(135deg, var(--mp-primary), var(--mp-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
::selection { background: rgba(59,118,239,.22); }
@media (max-width: 767.98px) {
  .page-content { padding-top: calc(70px + 1rem); }
  .kpi-val { font-size: 1.45rem; }
}
